FANDOM-K

1. 프로젝트 소개

FANDOM-K는 K-POP 팬들을 위한 종합 팬덤 플랫폼입니다. 우리 플랫폼을 통해 사용자들은 다음과 같은 활동을 할 수 있습니다:

• 좋아하는 K-POP 아이돌을 위한 이벤트 생성 및 참여
• 아이돌에게 크레딧을 후원하여 직접적인 지원 제공
• 다양한 투표 이벤트에 참여하여 팬덤 활동 증진
• 마이페이지에서 좋아하는 아이돌 추가 및 관리
• 팬덤 커뮤니티와 소통하며 정보 공유

FANDOM-K는 팬과 아이돌 사이의 거리를 좁히고, 팬들이 더욱 적극적으로 아이돌을 지원할 수 있는 플랫폼을 목표로 합니다.

2. 배포 주소

• 배포 주소

3. 주요 기능

랜딩 페이지

• K-POP 팬덤 문화에서 차용한 요소(입장띠, 포토카드, 스마트폰 등)를 시각적으로 녹여냈습니다.
• 모션 애니메이션과 스크롤 스냅을 활용하여 몰입감 있는 UX를 제공합니다.
• IntersectionObserver API를 활용해 화면에 요소가 나타날 때만 애니메이션을 활성화하여 성능 최적화를 적용했습니다.

메인 페이지

캐러셀

• useRef를 활용하여 캐러셀 전체 넓이에 대해서 표시할 카드의 넓이를 구하여 카드를 렌더링해줬습니다.
• 반응형 디자인으로 화면 크기 움직임을 resize이벤트 리스너로 확인하고 이에 따라 카드 넓이와 카드를 랜더링 해주는 개수를 조절하여 반응형으로 캐러셀이 동작하도록 만들었습니다.
• 애니메이션 중복 사용을 방지하기 위한 로직을 추가하여 캐러셀이 동작이 완료된 이후에 애니메이션이 동작하도록 구현하였습니다.

이달의 차트

• react-router-dom의 Outlet 컴포넌트를 사용하여 선택한 탭에 따라 다른 컴포넌트를 렌더링하도록 구현하였습니다.
• 디바이스 크기에 따라 페이지네이션 개수를 자동 조절 (PC: 10개, 모바일: 5개), 커서 기반 데이터 로딩 방식으로 데이터 페이징을 적용했습니다.
• 성능 측면에서는 useCallback을 사용해 불필요한 리렌더링 방지하고 효율적인 렌더링을 유도했습니다.

충전 모달

• 모달 컴포넌트는 React Portal을 활용하여 구현했습니다. .React Portal을 사용함으로써 모달이 DOM 계층 구조와 관계없이 document.body에 직접 렌더링되어 z-index 문제를 방지할 수 있었습니다.
• motion 라이브러리를 활용하여 모달이 열고 닫힐 때 부드러운 애니메이션 효과를 넣어 사용자 경험을 향상시켰습니다.

투표 모달

• ChartContext를 활용해 상태 통합 관리하며, 순위를 자동 부여하는 로직을 구현했습니다.

상세 페이지

• 적응형 디자인으로, PC와 Tablet, Mobile에서 다른 레이아웃을 확인하실 수 있습니다.
• progress bar가 포함된 후원 정보 컴포넌트는, 합성 컴포넌트 패턴으로 구현하여 렌더링 최적화와 컴포넌트의 재사용성을 높였습니다.
• web worker로 타이머를 구현하여 메인 스레드의 부담을 줄였습니다.
• memo를 통해 불필요한 렌더링을 최소화했습니다.
• lazy loading과 Suspense를 추가해 성능 최적화 했습니다.
• PC와 Mobile은 원 스크롤 페이지로 구현되어 있고, 애니메이션은 motion과 tailwindCSS를 활용했습니다.

후원 모달

• 상세 페이지에서 사용되는 후원 모달은 Modal 컴포넌트, CreditForm 컴포넌트, IdolCardList 컴포넌트를 조합하여 구현하였습니다.

마이 페이지

• motion라이브러리를 사용하여 각 동작마다의 시각적인 상호작용을 증대시켰습니다.
• Intersectoin Observer API를 통한 무한스크롤을 구현하여 데이터를 불러오도록하였습니다.
• useCallback,memo를 사용하여 렌더링성능을 최적화하였습니다.

404 페이지

4. 폴더 구조

5. 개발 스택

6. 팀원 소개 및 역할

이름 / 직책	사진	주요 역할
명지우 (팀장)		프로젝트 총괄 공통 컴포넌트: 차트 순위, 관심있는 아이돌 후원 상세 페이지
맹은빈 (팀원)		공통 컴포넌트: 버튼, Input 마이 페이지
문혜란 (팀원)		공통 컴포넌트 메인 페이지: 차트, 투표
박재현 (팀원)		프로젝트 환경 설정 디자인 및 랜딩 페이지 토스트 메시지
유용민 (팀원)		공통 컴포넌트: Navbar, 모달창 등 메인 페이지: 캐러셀 배포

7. 개발 프로세스

✅ 개발 흐름

1. 기본 요구사항 완성 (1~2차 스프린트)

   • 컴포넌트 스타일 개발 (컴포넌트 단위 분담)
   • 기능 개발 (기능 단위 분담)

2. 리팩토링 (3~4차 스프린트)

   • 페이지 단위 또는 기능 단위로 리팩토링

---

✅ 기본 요구사항 완성

1. 컴포넌트 스타일 개발

   • 기본 링크 연결, onChange, 유효성 검사 포함

2. 기능 단위 개발

   • API 연결 등 실제 기능 구현

3. 페이지 단위 완성

   • 기능이 포함된 컴포넌트를 레이아웃에 맞게 배치

---

✅ 리팩토링

1. 모든 개발 완료 후 리팩토링 시작
2. 기본 요구사항 외의 추가 기능 중점 개발 (예: 애니메이션)
3. 선점제 방식으로 리팩토링 진행 (R&R 사전 분담 없음)

8. Git 전략 및 컨벤션

브랜치 전략

• Fork 없이 작업: Organization → 원본 clone
• 브랜치 구조:

  브랜치	설명
  main	실제 서비스 배포용 브랜치
  develop	dev 서버에서 사용하는 통합 브랜치
  feature/번호	기능 단위 작업 브랜치 (작업 완료 후 삭제) 예: feature/30

---

💬 커밋 컨벤션 (Udacity 스타일)

태그	설명
feat	새로운 기능 추가
fix	버그 수정
docs	문서 수정
style	코드 포맷팅, 세미콜론 누락 등 (코드 로직 변화 없음)
refactor	코드 리팩토링
test	테스트 코드 추가 및 수정
chore	빌드, 패키지 매니저 등 설정 변경

---

🧩 네이밍 컨벤션

• 조건식이 복잡하거나 재사용한다면 이름을 부여
• 매직 넘버는 상수화하여 사용
• 절대 경로 alias 사용 권장

항목	네이밍 규칙
디렉토리명	kebab-case
컴포넌트, 페이지명	PascalCase (파일명 = 컴포넌트명)
함수, 변수, 훅	camelCase
asset 파일명	소문자 사용 아이콘: icon_, 이미지: image_
이벤트 핸들러 prop	on__
이벤트 함수명	handle__
커스텀 훅	use__
boolean 타입 변수	is__, has__
Context	__Context
고차 컴포넌트(HOC)	with__
state setter 함수	set__
배열 변수	__List
컴포넌트 선언 방식	화살표 함수 사용
UI 컴포넌트	단수형 이름 (예: Button, Card)
Entity 컴포넌트	Entity명 + 역할 (예: UserProfile, ProductCard)
import 순서	1) 외부 라이브러리 (default → custom) 2) 절대 경로 3) 상대 경로