좋아하는 아이돌을 후원하고 투표할 수 있는 팬덤 플랫폼
팬덤케이(Fandom-K)는 아이돌 팬덤을 위한 플랫폼으로, 좋아하는 아이돌을 후원하고 투표할 수 있는 종합적인 팬덤 플랫폼입니다. 팬들이 크레딧 충전을 통해 후원금을 보내고, 이달의 아이돌 인기 투표에 참여하며, 개인 관심 아이돌을 관리할 수 있습니다.
2025/09/24 (수) ~ 2025/10/16 (목)
- 💰 후원 시스템: 크레딧을 충전하여 아이돌 후원
- 🗳️ 투표 시스템: 이달의 아이돌 인기 투표 참여
- 📊 실시간 차트: 투표 순위별 아이돌 차트 확인
- 👤 마이페이지: 관심 아이돌 관리 및 개인화
➡️ Fandom-K
| 구분 | 사용 기술 |
|---|---|
| Frontend |    |
| Styling |   |
| 상태 관리 |   |
| HTTP 클라이언트 |  |
| Routing |  |
| 배포 |  |
| 협업 |   |
- Node.js 18.0 이상
- npm
# 저장소 클론
git clone https://github.com/codeit-Five/FandomK.git
# 프로젝트 디렉토리로 이동
cd FandomK
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev➡️ https://fandom-k-api.vercel.app/19-5/
├── 📂 .github # GitHub 설정 파일
├── 📦 src
│ ├── 📂 api # API 디렉토리
│ ├── 📂 assets # 정적 리소스
│ │ ├── 📂 fonts # 폰트 디렉토리
│ │ ├── 📂 image # 이미지 디렉토리
│ │ └── 📂 styles # 전역 스타일
│ ├── 📂 components # 공통 컴포넌트 디렉토리
│ │ ├── 📂 Button # 버튼 컴포넌트
│ │ ├── 📂 Header # 헤더 컴포넌트
│ │ ├── 📂 IdolCard # 아이돌 프로필 컴포넌트
│ │ ├── 📂 Modal # 모달 컴포넌트
│ │ └── 📂 OptionCard # 라디오 버튼 컴포넌트
│ ├── 📂 hooks # Custom Hook 디렉토리
│ ├── 📂 pages # 페이지 디렉토리
│ │ ├── 📂 Landing
│ │ ├── 📂 List # 목록 페이지
│ │ │ ├── 📂 ChartSection
│ │ │ ├── 📂 CreditSection
│ │ │ ├── 📂 Donate
│ │ │ └── 📂 DonateSection
│ │ │ ├── 📂 carousel # Carousel 디렉토리
│ │ │ └── 📂 skeleton # Skeleton UI 디렉토리
│ │ ├── 📂 MyPage
│ │ └── 📂 NotFoundPage
│ ├── 📂 stores # 상태 관리 디렉토리
│ ├── 📂 util # 유틸리티 함수 디렉토리
│ ├── ⚛️ App.jsx
│ └── ⚛️ main.jsx
├── ⚙️ .env # 환경변수
├── 📝 .eslintrc.json # ESLint 설정 파일
├── 📝 .prettierrc.json # Prettier 설정 파일
├── 🔷 favicon.svg # favorite icon
├── 📄 index.html # 진입 HTML
├── 📦 jsconfig.json # 프로젝트 경로 별칭 설정 파일
├── 📦 package-lock.json # 의존성 고정 파일
├── 📦 package.json # 프로젝트 메타 정보
├── ⬆️ vercel.json # Vercel 배포 설정
└── ⚡ vite.config.js # Vite 설정
- Swagger UI: https://fandom-k-api.vercel.app/docs/
- Base URL: https://fandom-k-api.vercel.app/19-5/
// 아이돌 목록 조회
GET /idols
// 아이돌 차트 조회 (성별별)
GET /charts/{gender}
// 후원하기
POST /donations
{
"deadline": "2025-09-26T14:54:53.282Z",
"targetDonation": 1000,
"subtitle": "응원 메시지",
"title": "후원 제목",
"idolId": 1
}
// 투표하기
POST /votes
{
"idolId": 1
}- Fandom-K에 대한 전반적인 정보와 주요 기능을 소개
- 크레딧 확인 : 사용자가 가지고 있는 크레딧을 확인
- 후원을 기다리는 조공 : 아이돌 후원 내용 및 목표 달성률, 기간을 슬라이드를 통해 확인하고 참여
- 이달의 차트 : 쿠표를 통해 아이돌 순위를 반영하고, 실시간 차트 변동을 확인
- 사용자가 충전을 원하는 크레딧 금액을 선택하고 충전을 진행
- 후원할 조공을 확인하고 사용자가 입력한 크레딧을 후원
- 크레딧을 이용해 선택한 아이돌에게 투표하고, 결과를 반영
- 관심이 있는 아이돌을 리스트로 관리하고 확인
- 잘못된 경로로 접근했을 때, 에러를 안내하고 이전 또는 메인 페이지로 이동
 |
 |
 |
|---|---|---|
| 김재승 | 강지현 | 이선영 |
🖥️ 김재승
-
초기 세팅
- GitHub Issue, PR 템플릿 세팅
- 라우팅 설정
-
공통 컴포넌트
- 공통 Header 컴포넌트 구현
-
랜딩 페이지
- 랜딩 페이지 구현
-
마이 페이지
- localStorage 기반 관심 아이돌 관리 기능
- 리스트로 관심 아이돌 확인
-
배포
-
발표 및 발표 자료 제작
🖥️ 강지현
-
초기 세팅
- 프로젝트 워크플로우 및 개발 컨벤션 정리
- 디렉토리 초기 세팅
-
공통 컴포넌트
- 버튼 공통 컴포넌트 구현
- 아이돌 프로필 공통 컴포넌트 구현
- 모달 공통 컴포넌트 구현
- 라디오 버튼 공통 컴포넌트 구현
-
목록 페이지 크레딧 표시/후원을 기다리는 조공
- 스켈레톤 로딩 UI 구현 (
react-loading-skeleton활용) - 캐러셀 기능 구현 (
embla-carousel-react활용)
- 스켈레톤 로딩 UI 구현 (
-
NotFound 페이지
- NotFound 페이지 UI 구현
-
문서화
- README.md 정리
🖥️ 이선영
-
초기 세팅
- 디렉토리 초기 세팅
- 공통 style 정의
-
API 통신
- AXIOS를 활용한 API 통신 구현
- 응답 인터셉터를 통한 에러 처리 통일화
- toast 알림 구현
-
크레딧 상태 관리
Zustand를 활용하여 크레딧 전역 상태 관리 구현
-
목록 페이지 이달의 차트
- 여자/남자 아이돌 차트 탭 구현
- 총 투표수 기준 순위 정렬 기능
- 투표하기 모달 구현
- React 컴포넌트 설계: 재사용 가능한 컴포넌트 개발
- 상태 관리: Zustand를 활용한 전역 상태 관리
- API 통신: RESTful API와의 효율적인 데이터 통신
- 팀 협업: Git 브랜치 전략 및 코드 리뷰 프로세스
This project is licensed under the MIT License - see the LICENSE file for details.
이 프로젝트는 코드잇 스프린트 Front-End 19기 교육 과정의 팀 프로젝트로 제작되었습니다.