Feat/#134/chaged list page directory structure

README.md

@@ -1,18 +1,19 @@
 # 코드잇 스프린트 13기 3팀(파트 2)
-> 개발기간: 2025.01.24 ~  
+
+> 개발기간: 2025.01.24 ~
 
 ## Contributors
 
-<table align="center">
+<table style="text-align:center">
   <thead>
     <tr>
-      <th align="center" width="250px;">팀원</th>
-      <th align="center" width="600px;">역할</th>
+      <th width="250px;">팀원</th>
+      <th width="600px;">역할</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td align="center" height="300px">
+      <td height="300px">
         <a href="https://github.com/hyeonjiroh">
           <img src="https://avatars.githubusercontent.com/u/108173863?v=4" width="150px;" height="150px;" alt="노현지" />
           <h3><b>노현지</b></h3>
@@ -26,7 +27,7 @@
       </td>
     </tr>
     <tr>
-      <td align="center" height="300px">
+      <td height="300px">
         <a href="https://github.com/doctor-taco">
           <img src="https://avatars.githubusercontent.com/u/100111506?v=4" width="150px;" height="150px;" alt="박재현" />
           <h3><b>박재현</b></h3>
@@ -41,7 +42,7 @@
       </td>  
     </tr>
     <tr>
-      <td align="center" height="300px">
+      <td height="300px">
         <a href="https://github.com/juha399">
           <img src="https://avatars.githubusercontent.com/u/174230233?v=4" width="150px;" height="150px;" alt="신주하" />
           <h3><b>신주하</b></h3>
@@ -53,7 +54,7 @@
       </td>
     </tr>
     <tr>
-      <td align="center" height="300px">
+      <td height="300px">
         <a href="https://github.com/yoonc01">
           <img src="https://avatars.githubusercontent.com/u/143938662?v=4" width="150px;" height="150px;" alt="윤효준" />
           <h3><b>윤효준</b></h3>
@@ -67,7 +68,7 @@
       </td>
     </tr>
     <tr>
-      <td align="center" height="300px">
+      <td height="300px">
         <a href="https://github.com/jihye5081">
           <img src="https://avatars.githubusercontent.com/u/87625901?v=4" width="150px;" height="150px;" alt="임지혜" />
           <h3><b>임지혜</b></h3>
@@ -137,34 +138,42 @@ feat : #27/Component Base - Button 기능 개발
 ```
 
 ## 기술 스택
+
 #### Environment
+
 ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)
 ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white)
 ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)
 
 #### Config
+
 ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)
 ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
 
 #### Linters
+
 ![js](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)
 ![js](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)
 
 #### Development
+
 ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
 ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
 ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
 
 #### communication
+
 ![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?style=for-the-badge&logo=discord&logoColor=white)
 ![Notion](https://img.shields.io/badge/Notion-%23000000.svg?style=for-the-badge&logo=notion&logoColor=white)
 
 #### Deployment
+
 ![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)
 
 ## 설치 및 실행 방법
 
 ### 로컬 실행
+
 ```
 git clone https://github.com/yoonc01/Fandom-K.git
 cd Fandom-K
@@ -173,27 +182,38 @@ npm run dev
 ```
 
 ### 배포 주소
+
 🚀 프로젝트를 확인하려면 [여기](https://fandom-k-murex.vercel.app/)를 클릭하세요!
 
 ## 프로젝트 구조
 
 ```
 📦 src
-├──── apis               # API 관련 함수 및 관리 파일
+├──── apis                    # API 관련 함수 및 관리 파일
 │
-├──── assets             # 이미지 및 정적 파일 관리
-│     ├── icons          # 아이콘 관련 파일
+├──── assets                  # 이미지 및 정적 파일 관리
+│     ├── icons               # 아이콘 관련 파일
 │     │
-│     └── images         # 일반 이미지 파일
+│     └── images              # 일반 이미지 파일
 │
-├──── components         # 공통 컴포넌트 관리
+├──── components              # 공통 컴포넌트 관리
+│     │
+│     └── modalContent        # 모달창 내용 관리
 │
-├──── utils              # 유틸리티 함수 관리
+├──── utils                   # 유틸리티 함수 관리
 │
-└──── pages              # 라우터 페이지 관리
-      ├── landingPage    # 랜딩 페이지 관련 파일
+└──── pages                   # 라우터 페이지 관리
+      ├── landingPage         # 랜딩 페이지 관련 파일
+      │
+      ├── listPage            # 리스트 페이지 관련 파일
+      │     ├── credit        # credit 관련 파일
+      │     │
+      │     ├── donation      # donation 관련 파일
+      │     │
+      │     └── monthlyChart  # monthlyChart 관련 파일
       │
-      ├── listPage       # 리스트 페이지 관련 파일
+      ├── myPage              # myPage 관련 파일
       │
-      └── myPage         # 마이페이지 관련 파일
+      └── notFoundPage        # 404 에러 페이지 관련 파일
+
 ```

src/pages/listPage/ListPage.jsx

@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react';
 import Modal from '@/components/Modal';
 import Header from '@/components/Header';
-import CreditSection from '@/pages/listPage/CreditSection';
+import CreditSection from '@/pages/listPage/credit/CreditSection';
 import { getCredits } from '@/utils/creditStorage';
-import RechargeModalContent from '@/pages/listPage/RechargeModalContent';
-import CreditRechargeSuccess from '@/pages/listPage/CreditRechargeSuccess';
-import CreditShortageModalContent from '@/pages/listPage/CreditShortageModalContent';
-import DonationsList from '@/pages/listPage/DonationsList';
-import DonationModalContent from '@/pages/listPage/DonationModalContent';
+import RechargeModalContent from '@/components/modalContent/RechargeModalContent';
+import CreditRechargeSuccess from '@/components/modalContent/CreditRechargeSuccess';
+import CreditShortageModalContent from '@/components/modalContent/CreditShortageModalContent';
+import DonationsList from '@/pages/listPage/donation/DonationsList';
+import DonationModalContent from '@/components/modalContent/DonationModalContent';
 import leftTopGradient from '@/assets/images/leftTopGradient.png';
-import DonationSuccess from './DonationSuccess';
-import MonthlyChartSection from './MonthlyChartSection';
+import DonationSuccess from '@/components/modalContent/DonationSuccess';
+import MonthlyChartSection from '@/pages/listPage/monthlyChart/MonthlyChartSection';
 
 function ListPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);

src/pages/listPage/DonationsList.jsx → src/pages/listPage/donation/DonationsList.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
 import { getItems } from '@/apis/donationApi';
-import DonationCard from '@/pages/listPage/DonationCard';
+import DonationCard from '@/pages/listPage/donation/DonationCard';
 import prevIcon from '@/assets/icons/prevIcon.svg';
 import nextIcon from '@/assets/icons/nextIcon.svg';
 

src/pages/listPage/MonthlyChartList.jsx → src/pages/listPage/monthlyChart/MonthlyChartList.jsx

@@ -1,5 +1,4 @@
-import { useEffect } from 'react';
-import MonthlyChartItem from './MonthlyChartItem';
+import MonthlyChartItem from '@/pages/listPage/monthlyChart/MonthlyChartItem';
 
 const MonthlyChartList = ({ idols }) => {
   if (!idols.length === 0) {

src/pages/listPage/MonthlyChartSection.jsx → src/pages/listPage/monthlyChart/MonthlyChartSection.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import chartLogo from '@/assets/icons/chartLogo.svg';
 import { getLists } from '@/apis/idolListApi';
 import PrimaryButton from '@/components/PrimaryButton';
-import MonthlyChartList from './MonthlyChartList';
+import MonthlyChartList from '@/pages/listPage/monthlyChart/MonthlyChartList';
 
 const MonthlyChartSection = () => {
   const [gender, setGender] = useState('female');