🎤✨ FANDOM-K🎶🌟

코드잇 스프린트 6기 Part 2 과정에서 2팀이 진행한 기초 프로젝트 Fandom-K 레포지토리

🔗 배포 주소

https://fandom-k.vercel.app

🏃프로젝트 소개

아이돌 조공 플랫폼 Fandom-K

• 리스트 페이지를 통해 아이돌을 후원하고 투표
• 마이 페이지를 통해 좋아하는 아이돌을 선택하여, 좋아하는 아이돌 목록 생성

📌 주요 기능

• 헤더

  • 로고 클릭 시, 리스트 페이지로 이동
  • 우측 프로필 클릭 시, 마이 페이지로 이동

  

  
  

• 랜딩 페이지

  • 초기 시작 페이지
  • "지금 시작하기" 버튼을 눌렀을 때, 리스트 페이지로 이동하고 localStorage 초기화

  

  
  

• 리스트 페이지

  • 크레딧을 활용하여 아이돌 투표 및 후원할 수 있는 기능 제공

  • 크레딧은 localStorage 에서 관리

  • 토스트 창

    • 크레딧이 충전 되었을 때 나타남
    • 조공을 후원 했을 때 나타남
    • 아이돌에게 투표을 했을 때 나타남
    • 투표할 크레딧 양이 부족했을 때 나타남

  • 내 크레딧

    • 현재 내 크레딧 확인
    • "충전하기" 클릭 시, 모달 창에서 100, 500, 1000 크레딧 충전

    

    
    

  • 후원을 기다리는 조공

    • 현재 후원을 할 수 있는 목록을 캐러셀을 통해 확인
    • "후원하기" 클릭 시, 후원 모달 창에서 원하는 양의 크레딧 후원

    

    
    

  • 이달의 차트

    • 현재 많은 투표를 받은 여자/남자 아이돌을 탭을 통해 순위 확인
    • "차트 투표하기" 클릭 시, 1000 크레딧을 소모하여 원하는 아이돌에게 1표 투표

    

    
    

• 마이 페이지

  • 하단 아이돌 목록 선택 후, 제출하기 버튼을 누르면 상단 목록에 추가됨
  • 각 목록은 특정 갯수를 만족하면 무한 슬라이딩 기능 활성화
  • 반대로 특정 갯수를 만족하지 못하는 경우, 슬라이딩 기능 비활성화

  

  
  

⚒️ 개발 일정

⌛2024.05.01 (수) ~ 2024.05.16 (목)

📝 프로젝트 기간 중 수행 내용

1. 기술 스택 채용 및 구현 일정 조율
2. 프로젝트 관련 환경 셋업
3. 역할 분담
4. 프로젝트 구현
  - 공통 컴포넌트
  - 페이지 UI 구현 (mock 데이터 이용)
  - 기능 구현 및 API 연동
5. 발표 및 자료 준비
6. 리팩토링 및 문서화

👩🏻‍💻 팀원 소개

이지현	채종민	이종욱	김혜경	김고넬료
@easyhyun00	@jaychae	@bersk3r	@i-nooo-2	@nelryoS2

🤝 역할 분담

이지현

• 프로젝트 초기 세팅
• 배포 및 자동화 작업
• 애니메이션 적용
• 캐러셀, 프로필, 로딩 에러, 푸터 컴포넌트
• 낫 파운드, 내 크레딧, 후원을 기다리는 조공, 모달
• 발표 및 자료 제작

채종민

• 진행바 및 헤더 로딩 스피너
• 이 달의 차트 파트
• 발표 자료 제작
• 탭 컴포넌트 및 랜딩 페이지

이종욱

• 모달 초기 UI 및 기능 제작
• 배경 및 그라데이션 UI 제작
• 마이 페이지
• README 파일 수정

김혜경

• 스타일 초기 셋팅
• 버튼 UI 제작
• 메타데이터 작성
• 발표 자료 제작

김고넬료

• README 파일 초안 작성

💻 기술 스택

• Environment

• Config

• Development

• Deploy

• CI / CD

• Collaboration Tools

🗂️ 폴더 구조

^Fandom-K

📦src
 ┣ 📂apis
 ┣ 📂assets
 ┃ ┣ 📂icons
 ┃ ┗ 📂images
 ┣ 📂components
 ┃ ┣ 📂Background
 ┃ ┣ 📂Carousel
 ┃ ┣ 📂CustomButton
 ┃ ┣ 📂Footer
 ┃ ┣ 📂Header
 ┃ ┣ 📂LoadingError
 ┃ ┣ 📂Modal
 ┃ ┣ 📂MyCarousel
 ┃ ┣ 📂Profile
 ┣ 📂constants
 ┣ 📂contexts
 ┣ 📂hooks
 ┣ 📂pages
 ┃ ┣ 📂LandingPage
 ┃ ┣ 📂ListPage
 ┃ ┣ 📂MyPage
 ┃ ┣ 📂NotFoundPage
 ┣ 📂styles
 ┗ 📂utils

🌲 깃 브랜치 전략

1. 깃 허브 이슈 생성
2. 발행된 이슈 번호 기반으로 feat-{번호} 형태로 브랜치를 생성 (예시 : feat-01)
3. 로컬에서 작업이 완료 후, pull Request 작성
   • main 브랜치에 변동 사항이 있으면 작업하고 있는 코드에 반영 후 push 진행
   • Conflict가 발생하면, 충돌이 발생된 부분을 Resolve 한 후에 merge 진행
4. Pull Request에 대한 merge를 진행하는 경우, 리뷰어로 설정된 팀원 중 2명 이상의 승인이 완료되면 작성자가 직접 merge를 눌러 main 브랜치로 병합.
   • squash & merge 기능을 사용하여, 여러 개의 커밋을 하나의 커밋으로 통합
   • discord Webhooks을 통해 PR이 생성될 때 알림 오도록 설정

🚨 프로젝트 내 발생한 문제점 / 해결방안

문제점

• Github Orginazation에 대한 배포 시 유료 기능 지원 문제
• 캐러셀 컴포넌트 내 React-Slick 슬라이드 멈춤 문제
• 모달과 페이지 컴포넌트 간의 우선 순위 문제
• 페이지 이동 시, 스크롤이 그대로 유지되는 문제

해결 방안

• Git Action을 활용하여 자동 배포 및 PR 프리뷰 생성 (#32, #35)
• React-Slick 내 설정 내용 중, useEffect가 발생될 떄, 슬라이드를 처음으로 이동하도록 변경 (#51, #65)
• createPortal 을 활용하여 DOM 구조에 종속되지 않도록 구현 (#60)
• 스크롤을 초기화하는 Hook을 구현하여, 각 페이지마다 적용되도록 변경 (#60)

📗 프로젝트 내 잘한 점 / 아쉬운 점

😊 잘한 점

코드에 대한 규칙 및 관리에 대한 부분이 뛰어남

• 코드 및 커밋 컨벤션에 대한 초기 설정이 잘 진행
• Github Issue와 PR 기능을 활용하여, 코드에 대한 형상 관리가 수월
• PR 리뷰 및 피드백이 활발하며, 의견에 대한 수용 빠름
• 작업 단위로 분리됨에 따라, 브랜치 간의 충돌이 적음

😮‍💨 아쉬운 점

일부 팀원 분들의 프로젝트 참여율이 다른 팀에 비해 저조

• 열심히 참여하지 않는 팀원이 존재하여 다른 팀원이 많은 부담을 짐
• 팀 미팅에 대한 참여도는 높았지만, 그 이후에 소통이 잘 진행되지 못함