🌟Fandom-K

Fandom-K는 좋아하는 아티스트에게 직접 응원을 전하고, 투명한 후원과 간편한 참여로 진짜 팬심을 행동으로 보여줄 수 있는 팬 커뮤니티 플랫폼입니다.

---

🚀 배포 주소

👉 Fandom-K 바로가기

---

🗓️ 프로젝트 기간

• 시작일: 2025.04.15
• 종료일: 2025.04.30

---

💻 기술 스택

구분	사용 기술
Frontend
Language
Style
API 통신
정적 분석
배포
협업 툴

---

⚙️ Installation

git clone https://github.com/FandomJingyu/Fandom-K.git
npm install
npm run dev

---

📌 주요 기능

🌐 랜딩 페이지

• 사이트의 전반적인 정보와 주요 기능을 소개
• GSAP 라이브러리를 활용해 인터랙티브 스크롤 애니메이션과 부드러운 요소 전환 효과 구현

🎁 후원을 기다리는 조공 & 🌟 이달의 차트

• 후원을 기다리는 조공: 아이돌 후원 참여 및 목표 달성률·상세 정보 확인 슬라이드를 통해 탐색
• 이달의 차트: 투표를 통해 아이돌 순위를 반영하고, 실시간 차트 변동을 확인

💸 충전하기 모달창

• 사용자가 크레딧 금액을 선택하고 충전 요청을 진행

💖 투표하기 모달창

• 사용자가 아이돌을 선택해 투표를 진행하고, 결과에 반영

🎤 아이돌 상세 정보 모달창

• 선택한 아이돌의 프로필과 상세 정보를 확인

💌 후원하기 상세 페이지

• 조공할 아이돌의 목표 금액, 설명, 남은 시간을 확인하고 후원에 참여

💎 마이페이지

• 관심 등록한 아이돌을 리스트로 관리하고, 슬라이드를 통해 탐색

⛔ NotFound 페이지

• 잘못된 경로 접근 시 에러를 안내, 이전 또는 메인 페이지로 이동

에러 및 로딩 처리

🌀 로딩 (스켈레톤 UI)	❌ 에러 (페이지 새로 고침)

---

👩🏻‍💻 팀원

이지현	김수민	유동환	김태일	김서연

---

🎯 역할 소개

🐥 이지현

• 초기 세팅

  • 프로젝트 초기 세팅
  • 공통 Modal, Header, Footer 컴포넌트

• 투표 & 후원 기능

  • vote API 통신
  • 투표하기 모달
  • 충전하기 모달
  • 후원 상세페이지 후원 기능 구현

• 배포

  • 프로젝트 배포 및 CI/CD 파이프라인 구축

🌸 김수민

• 초기 세팅

  • 디렉토리 초기 세팅
  • 공통 style 정의 및 라우팅 설정

• 페이지 구현

  • 랜딩 페이지 개발
  • 목록페이지 충전하기 컴포넌트 개발
  • 후원 상세페이지 구현

• API 통합 및 메시지 처리

  • API 데이터 POST 및 통합 구조 설계
  • toast 메시지 구현

🌿 유동환

• 공통 컴포넌트 구현

  • 공통 버튼 컴포넌트 개발
  • 버튼별 디자인 및 상태 기능 구현

• 마이페이지 기능

  • localStorage 기반 관심 아이돌 관리 기능
  • 슬라이더 라이브러리를 활용 관심 아이돌 탐색

• 발표 및 발표 자료 제작

🔥 김태일

• 공통 아이돌 프로필 컴포넌트 제작

  • 원형 프로필 이미지 프레임 구현
  • 프로필 삭제 아이콘 제작

• 목록페이지 이달의 차트 구현

  • 여자/남자 아이돌 차트 탭 구현
  • 총 투표수 기준 순위 정렬 기능
  • 아이돌 상세 정보 모달 구현

💫 김서연

• 공통 컴포넌트 구현

  • RadioButton, Error 컴포넌트
  • 에러 및 상태 페이지 구현
  • NotFound 페이지 제작

• 목록페이지 후원을 기다리는 조공

  • 슬라이더 캐러셀 구현
  • ProgressBar 달성률 표시

• 발표 자료 제작

---

📁 폴더 구조

프로젝트 루트
┣ .github        🛠 GitHub 설정 파일
┣ .husky         🛠 Git Hook 설정
┣ .vscode        🛠 VSCode 설정
┣ public         🌐 정적 파일 디렉토리 (image, icon)

┣ src            🚀 소스 코드
┃ ┣ apis        🔗 API 호출 모듈
┃ ┣ components  🧩 재사용 컴포넌트 (Button, Error, Header & Footer, Modal, RadioButton, IdolProfile)
┃ ┣ context     🌍 글로벌 상태 관리 (Credit)
┃ ┣ hooks       🪝 커스텀 훅 (useChart, useDonation, useMobile, useSafeSubmit)
┃ ┣ layouts     🧱 레이아웃 컴포넌트
┃ ┣ pages       📄 라우트 페이지
┃ ┃ ┣ Landing
┃ ┃ ┣ List      🎁 Donation & Chart
┃ ┃ ┣ DonationDetail
┃ ┃ ┣ Mypage
┃ ┃ ┣ NotFound
┃ ┣ styles      🎨 스타일 파일
┃ ┣ utils       🛠 유틸리티 함수

┣ build.sh               🚀 빌드 스크립트
┣ commitlint.config.js   📝 커밋 메시지 규칙
┣ index.html             🏠 진입점 HTML
┣ package-lock.json      📦 의존성 고정 파일
┣ package.json           📦 프로젝트 메타 정보
┣ vercel.json            🛰 Vercel 배포 설정
┣ vite.config.js         ⚡ Vite 설정