FandomJingyu · two678 · Apr 30, 2025 · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025
diff --git a/.biomerc.json b/.biomerc.json
@@ -1,42 +1,42 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "vcs": {
-    "enabled": false,
-    "clientKind": "git",
-    "useIgnoreFile": false
-  },
-  "files": {
-    "ignoreUnknown": false,
-    "ignore": ["dist/**", "node_modules/**"]
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 2,
-    "lineEnding": "lf",
-    "lineWidth": 120,
-    "attributePosition": "auto"
-  },
-  "organizeImports": {
-    "enabled": true
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true
-    }
-  },
-  "javascript": {
-    "formatter": {
-      "quoteStyle": "single",
-      "jsxQuoteStyle": "double",
-      "trailingCommas": "all",
-      "semicolons": "always",
-      "arrowParentheses": "always",
-      "bracketSpacing": true,
-      "bracketSameLine": false,
-      "quoteProperties": "asNeeded",
-      "attributePosition": "auto"
-    }
-  }
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": ["dist/**", "node_modules/**"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineEnding": "lf",
+		"lineWidth": 120,
+		"attributePosition": "auto"
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "double",
+			"trailingCommas": "all",
+			"semicolons": "always",
+			"arrowParentheses": "always",
+			"bracketSpacing": true,
+			"bracketSameLine": false,
+			"quoteProperties": "asNeeded",
+			"attributePosition": "auto"
+		}
+	}
 }
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # 🌟Fandom-K
 
-좋아하는 아티스트에게 직접 응원을 전하고, 투명한 후원과 간편한 참여로 진짜 팬심을 행동으로 보여줄 수 있는 팬 커뮤니티 플랫폼입니다.
+Fandom-K는 좋아하는 아티스트에게 직접 응원을 전하고, 투명한 후원과 간편한 참여로 진짜 팬심을 행동으로 보여줄 수 있는 팬 커뮤니티 플랫폼입니다.
 
 ---
 
 ## 🚀 배포 주소
 
-👉 [Fadon-K 바로가기](https://your-deploy-url.com)
+👉 [Fandom-K 바로가기](https://fandom-k-jingyu.vercel.app/)
 
 ---
 
@@ -31,19 +31,76 @@
 
 ---
 
+## ⚙️ Installation
+
+```
+git clone https://github.com/FandomJingyu/Fandom-K.git
+npm install
+npm run dev
+```
+
+---
+
 ## 📌 주요 기능
 
 ### 🌐 랜딩 페이지
+- 사이트의 전반적인 정보와 주요 기능을 소개
+- GSAP 라이브러리를 활용해 인터랙티브 스크롤 애니메이션과 부드러운 요소 전환 효과 구현
+
+<img src="https://github.com/user-attachments/assets/59425eee-d02b-4fe4-ab5e-c37c55f60d9a" width="600" />
+
+
+### 🎁 후원을 기다리는 조공 & 🌟 이달의 차트
+- **후원을 기다리는 조공**: 아이돌 후원 참여 및 목표 달성률·상세 정보 확인 슬라이드를 통해 탐색
+- **이달의 차트**: 투표를 통해 아이돌 순위를 반영하고, 실시간 차트 변동을 확인
+
+
+<img src="https://github.com/user-attachments/assets/b4ef33fa-6a2b-44e2-9d00-341c9a6079f6" width="600" />
+
 
-< 아미지 삽입 예정 >
+### 💸 충전하기 모달창
+- 사용자가 크레딧 금액을 선택하고 충전 요청을 진행
 
-### 🎁 후원을 기다리는 조공
 
-### 🌟 이달의 차트
+<img src="https://github.com/user-attachments/assets/75acdfc6-1a89-4f49-bbe6-ecc5e76692d2" width="600" />
 
-### 💖 모달창
+### 💖 투표하기 모달창
+- 사용자가 아이돌을 선택해 투표를 진행하고, 결과에 반영
+
+
+<img src="https://github.com/user-attachments/assets/4902bd8b-ef24-4e06-a68c-62108004fa09" width="600" />
+
+### 🎤 아이돌 상세 정보 모달창
+- 선택한 아이돌의 프로필과 상세 정보를 확인
+
+
+<img src="https://github.com/user-attachments/assets/2524b865-501d-44d5-af73-abe54a9d613e" width="600" />
+
+### 💌 후원하기 상세 페이지
+- 조공할 아이돌의 목표 금액, 설명, 남은 시간을 확인하고 후원에 참여
+
+
+<img src="https://github.com/user-attachments/assets/d9d1f7d3-8135-4118-8f7c-f117803dfb69" width="600" />
 
 ### 💎 마이페이지
+- 관심 등록한 아이돌을 리스트로 관리하고, 슬라이드를 통해 탐색
+
+
+<img src="https://github.com/user-attachments/assets/58db54de-ffcb-40d9-ad5e-47310074e5c0" width="600" />
+
+### ⛔ NotFound 페이지
+- 잘못된 경로 접근 시 에러를 안내, 이전 또는 메인 페이지로 이동
+
+
+<img src="https://github.com/user-attachments/assets/9692fcdf-8027-4b23-a199-18f9c7d49b39" width="600" />
+
+### 에러 및 로딩 처리
+
+| 🌀 로딩 (스켈레톤 UI) | ❌ 에러 (페이지 새로 고침) |
+|-------------------|-----------------------|
+| ![스켈레톤 UI](https://github.com/user-attachments/assets/b257f8ae-7267-4106-8ad1-16eddee25609) | ![에러 처리](https://github.com/user-attachments/assets/582638b9-ad7a-452b-8f96-60a87f85974c) |
+
+
 
 ---
 
@@ -59,32 +116,103 @@
 
 🐥 **이지현**
 
-- 팀장
-- 프로젝트 초기 세팅
-- [공통 컴포넌트] - 헤더, 푸터
-- 모달창
+- **초기 세팅**
+  - 프로젝트 초기 세팅
+  - 공통 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 설정
+```      
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };
+module.exports = { extends: ["@commitlint/config-conventional"] };
diff --git a/package.json b/package.json
@@ -51,6 +51,6 @@
 		"vite": "^6.2.0"
 	},
 	"lint-staged": {
-		"*.{js,jsx,ts,tsx,json,css,scss,md}": ["biome check --apply"]
+		"*.{js,jsx,ts,tsx,json,css,scss,md}": ["biome check --write"]
 	}
 }
diff --git a/public/images/FANDOM.png b/public/images/FANDOM.png
diff --git a/public/images/SM.png b/public/images/SM.png
diff --git a/public/jingyu/jingyu01.jpg b/public/jingyu/jingyu01.jpg
diff --git a/public/mocks/mock01.png b/public/mocks/mock01.png
diff --git a/public/mocks/mock02.png b/public/mocks/mock02.png
diff --git a/public/mocks/mock03.png b/public/mocks/mock03.png
diff --git a/public/mocks/mock04.png b/public/mocks/mock04.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -11,7 +11,6 @@ import Landing from "./pages/Landing";
 import List from "./pages/List";
 import Mypage from "./pages/Mypage";
 import NotFound from "./pages/NotFound/index.jsx";
-import Testpage from "./pages/Testpage/index.jsx";
 
 function App() {
 	const lenisRef = useRef(null);
@@ -46,7 +45,6 @@ function App() {
 				<Route path="/" element={<DefaultLayout />}>
 					<Route path="/list" element={<List />} />
 					<Route path="/mypage" element={<Mypage />} />
-					<Route path="/testpage" element={<Testpage />} />
 					<Route path="/donation-detail/:id" element={<DonationDetail />} />
 				</Route>
 				<Route path="*" element={<NotFound />} />
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		module.exports = { extends: ['@commitlint/config-conventional'] };
		module.exports = { extends: ["@commitlint/config-conventional"] };