Skip to content

Latest commit

 

History

History
307 lines (218 loc) · 19.6 KB

README.md

File metadata and controls

307 lines (218 loc) · 19.6 KB

구름톤 유니브 전남대학교 공식 웹사이트

🔖 프로젝트 소개 및 목적

  • 2024년 9월 8일부터 10월 10일까지 진행한 교내 프로젝트 기간동안 개발이 가능한 아이디어를 고르는 과정에서 최종 아이디어로 '구름톤 유니브 전남대학교 웹사이트 제작'이 선정되었습니다.
  • 동아리 내에서 진행하는 활동들을 기록하고 공유하고, 로그인 기능을 통해 동아리 회원 관리 및 일정 관리가 가능합니다.

🏃🏻 프로젝트 목표

  • 미르미(동아리 회원)들의 동아리 활동을 기록하고 공유하며, 또한 IT 서비스 개발에 관심이 있는 전남대학교 재학생들에게 동아리를 홍보하는 웹사이트를 기획하고 개발합니다.
  • 교내 미르미들과 함께 프로젝트를 진행해보며 추후 해커톤(단풍톤)을 대비합니다.
  • Notion, Figma, Discord 등 협업 서비스를 사용하여 활발한 소통을 바탕으로 효율적인 협업을 통해 공동의 목표에 달성합니다.

🧑🏻‍💻 팀원

구름톤 유니브 전남대학교 교내 프로젝트 B팀입니다.

파트 이름 기수 GitHub
Frontend 김윤선 3기 @goodoong
Frontend 이경민 2기 @2kmkmkm
Backend 김상훈 2기 @ben7094
Backend 김채흔 2기 @ChaeheunKim
Backend 나인혜 3기 @inhvee
Backend 전석균 3기 @jsg9987
PM 박지환 2기 @latencyspace
Design 최지원 2기 @jiiiwonyy

📚 기술 스택

이번 교내 프로젝트를 진행하며 사용한 기술 스택을 정리한 섹션입니다.

카테고리 프레임워크 & 라이브러리
Frontend
Backend
Collaborative

🗂️ 개발 레포 및 문서

아래 링크를 통해 개발 레포지토리 및 관련 문서들을 확인하실 수 있습니다.

카테고리 링크
Frontend Repository GitHub
Backend Repository GitHub
UI Design Figma
Function Flowchart FigJam
ERD ERDCloud
API Specification Notion PDF

🔗 기능

  • 로그인 및 회원가입

    • 사용자는 회원 정보를 입력하여 웹사이트에 가입할 수 있으며, 가입 단계에서 이메일 인증을 통해 회원가입을 완료할 수 있습니다.

    • 회원가입 단계 이후, 추가적인 절차를 통해 교내 미르미인지 검증하는 단계를 거쳐 검증된 사용자라면 승인되어 로그인이 가능하도록 합니다.

      로그인 및 회원가입
      1. 로그인
      1. 회원가입
      1. 회원가입 관련 상태변화
      1. 승인 대기

  • 메인 페이지

    • 메인 페이지에서는 저희 동아리에 관한 간단한 소개와 함께 어떠한 활동이 이루어지고 있는지, 그리고 교내 및 중앙 행사 일정을 확인하실 수 있습니다.

      메인 페이지

  • 멤버 페이지

    • 회원가입 이후 승인된 사용자는 해당 페이지에 등록되며, 사진/기수/파트와 같은 개인 정보는 마이 페이지에서 수정할 수 있습니다.

    • 상단에 배치된 파트별/기수별 필터링 기능을 통해 원하는 정보를 빠르게 찾아볼 수 있도록 합니다.

      멤버 페이지

  • 액티비티 페이지

    • 동아리에서 이루어지는 모든 활동을 액티비티 페이지에서 확인할 수 있으며, 세부 항목으로는 프로젝트(교내, 해커톤)/세미나/스터디/네트워킹이 있습니다.

    • 컨텐츠 박스에는 간략하게 컴포넌트 형식으로 정보가 제공되고, 각 항목별로 자세한 정보는 컨텐츠 박스를 클릭하여 나타나는 모달창을 통해 확인할 수 있습니다.

      액티비티 페이지
      1. 프로젝트 카테고리
      1. 컨텐츠 박스 클릭 시 모달창
      1. 세미나 카테고리
      1. 네트워킹 카테고리

  • 리크루트 페이지

    • 동아리에 관심이 있는 재학생 또는 모집 기간에 동아리원 모집 대한 정보를 확인할 수 있도록 제작한 페이지입니다.

    • 이전 모집 공고글/FAQ 등 다양한 정보를 제공하고 있습니다.

      리크루트 페이지

  • 마이 페이지 및 일정 페이지

    • 로그인을 하게 되면 상단 네비게이션 바의 우측에 위치한 회원 사진 아이콘을 클릭하여 마이 페이지 또는 일정 페이지로 이동이 가능합니다.

    • 마이 페이지를 통해 회원 정보(사진, 파트, 기수 등)의 추가 및 수정이 가능합니다.

    • 일정 페이지에서 동아리의 전반적인 행사 정보를 달력 형태로 확인할 수 있고, 추가/수정은 관리자만 가능합니다.

      마이 페이지 및 일정 페이지
      1. 내 정보 수정
      1. 비밀번호 변경
      1. 비밀번호 변경 - 오류 메세지
      1. 일정 페이지

  • 관리자 페이지

    • 동아리 행사 또는 일정을 기록하고 수정하기 위해 만든 기능입니다.

    • 관리자 계정으로만 엑세스가 가능하며, 회원 관리/일정 관리/게시글 관리 기능을 지원합니다.

      관리자 페이지
      1. 회원 관리
      1. 일정 관리
      1. 게시글 관리

📈 개발 프로세스

아래 토글을 통해 대략적인 교내 프로젝트 기간 내 스케쥴을 확인하실 수 있습니다.

Schedule

기획 단계

  1. 대략적인 일정(기획/디자인/개발 기간)을 정하고 두 번의 프로젝트 아이디어 회의를 거쳐 최종 아이디어를 선정하였습니다.
  2. '구름톤 유니브 전남대학교 공식 웹사이트'에 필요한 기능들에 대해 추가적인 아이디어 회의를 거쳐 필요한 기능들을 모두 정했습니다.
  3. 정해진 기능들을 바탕으로 컨텐츠 및 웹사이트 스케치를 진행하고, 해당 내용을 노션에 기록하였습니다. Notion PDF
  4. 디자인 파트와 회의를 통해 기능과 스케치에 대한 설명을 드리고 API 명세서 및 ERD 작성을 위한 기능 플로우를 만들었습니다. 해당 내용은 상단의 개발 문서 항목에서 확인하실 수 있습니다.

디자인

  1. 텍스트와 컬러 스타일을 미리 등록하여 일관성 있는 디자인을 할 수 있도록 세팅하였습니다.

    스타일 등록

  2. 페이지 작업 시 컴포넌트의 분류가 용이하도록 관련 페이지 옆에 컴포넌트를 정리하였습니다.

    페이지 간 컴포넌트 분류

  3. 다양한 동아리 웹사이트 랜딩 페이지 레퍼런스를 조사하는 과정에서 애니메이션을 많이 활용함을 알게 되어 상태 변화에 따른 컴포넌트를 신경썼고 피그마의 Interaction 기능을 활용하여 제작하였습니다.

    상태 변화가 일어나는 컴포넌트 Variants 등록

개발 파트 역할 분배

파트 이름 개발 업무
Frontend 김윤선 메인 페이지, 멤버 페이지, 리크루트 페이지, 마이 페이지, 일정 페이지 개발
Frontend 이경민 공통 컴포넌트, 로그인 및 회원가입 페이지, 회원가입 승인 대기 페이지, 관리자 페이지 개발 및 라우팅
Backend 김상훈 React 캘린더 라이브러리를 사용한 일정 관리(일정 조회/추가/수정/삭제) 기능 개발
Backend 김채흔 로그인 및 회원가입, 동아리 멤버 리스트 조회 기능 개발
Backend 나인혜 마이 페이지(조회, 세부 정보 수정 및 삭제, 프로필 사진 업로드, 비밀번호 변경 요청) 기능 개발
Backend 전석균 API 명세서 및 ERD 작성 총괄, 게시글 관리(게시글 리스트 조회, 게시글 수정 시 이미지 첨부 모달, 게시글 등록/수정/삭제) 기능 개발

프론트엔드 작업 프로세스

  1. 프로젝트 기획 및 디자인 기간 동안, 개발에 사용할 기술 스택을 정리하고 깃허브 환경 세팅 및 연동을 해두었습니다.
  2. 각자 맡을 파트를 분배하고 재사용을 위한 공통 컴포넌트를 구현해 두었습니다.
  3. 피그마 디자인 작업과 동시에 화면 개발을 시작하였고, 전체적인 개발 마무리 후 백엔드와 API 연동을 진행하였습니다.

백엔드 작업 프로세스

  1. 스프링 부트 기본 세팅 이후 Configuration과 Redis, 그리고 MySQL DB 세팅 및 JPA와 Security 기본 설정
  2. 로그인, 마이 페이지, 멤버 페이지, 일정 관리 페이지, 게시글 페이지 별로 나눠 API 명세서 작성
  3. 회원, 마이 페이지 등 각 엔티티 간의 관계 설정 및 변수 설정을 위한 ERD 작성
  4. API URL과 요청 및 응답값 작성

🚨 이슈 및 트러블 슈팅

🎨 Design

  • 이슈

    • 저희 프로젝트는 협업을 노션과 디스코드를 통해 진행하였고, 노션의 <기획> 페이지와 <기능 명세서> 페이지를 보고 피그마로 디자인을 진행하였습니다.
    • 하지만 기능 명세서 부분의 정보가 정확하지 않아서 기획 페이지와 기능 명세서 페이지를 번갈아가며 확인해야 하는 번거로움이 있었습니다.
    • 또한 기능 부분이 정확하게 명시되어 있지 않은 부분들이 있어서 해당 부분을 디자인할 때 어려움이 있었고, 기획 페이지만 보고 디자인을 했다가 API 명세서와 다른 부분이 있어 디자인을 다시 수정해야 했습니다.

  • 트러블 슈팅

    • 팀 노션에 API 명세서와 ERD가 있어 상세한 부분(게시글 정보, 회원가입 정보 등)은 해당 페이지를 참고하며 페이지 제작을 완료하였습니다.

🖥️ Frontend

  • 이슈

    • CSS 작성 시, 컴포넌트 배치나 반응형 디자인 적용에 어려움을 느꼈습니다.
    • 각자 개발을 진행하다보니 겹치는 컴포넌트를 따로 만들 때가 있었습니다.
    • 와이어프레임과 화면 비율이 달라서 전체적으로 보이는 크기가 달랐었습니다.

  • 트러블 슈팅

    • CSS 공식 문서와 구글링을 통해 활용법과 예시를 알게 되었고, 알맞은 코드들을 하나씩 적용해보며 디자인의 변화를 확인하였습니다.
    • 사전에 기존 컴포넌트들을 제대로 숙지하고 비슷한 것이 있는지 확인하고 최대한 재사용하려 노력하였습니다.
    • 양쪽 여백은 최대한 비슷한 비율로 나타내려고 하였고, 여러 컴포넌트들이 화면에 스크롤 되는 경우에는 하나의 내용으로 묶일 수 있는 컴포넌트가 전부 나올 수 있도록 고려하였습니다.

⚙️ Backend

  • 이슈

    • 게시글 페이지에서 사진 업로드 API를 만드는 과정 중, Form Data가 아니라 json과 Multipart 두 가지 자료형으로 보냈어야 하는 상황에서 어노테이션을 사용해 파싱을 진행하였습니다.
    • List 안에 오브젝트 형태로 key와 value가 들어가 있는데, 로직 상에서는 List으로 처리를 해서 파싱이 제대로 되지 않는 문제가 발생하였습니다.

  • 트러블 슈팅

    • 위 이슈는 자료 구조 문제였으며, List<Map<String, Object>>로 변경하고 로직을 수정하여 해결하였습니다.

🗓️ 향후 계획

  • 제한된 기간 내 기능 구현을 위한 개발에 초점이 맞춰져 있던 프로젝트지만 이후 리팩토링 및 디벨롭을 할 예정이었기 때문에, 교내 프로젝트 기간이 마무리되고 교내 미르미들의 의견을 받아 추가/수정하고 지속적으로 배포할 예정입니다.
  • 웹에 맞춰 제작되어졌기 때문에 모바일에서 봤을 때를 고려한 모바일 버전의 레이아웃 제작 및 반응형 웹사이트 개발을 계획 중에 있습니다.
  • 기간별로 계절에 맞는 에셋(벚꽃, 단풍)을 이용한 웹사이트 디자인을 변경할 예정입니다.