KDT1-FE · EungBug · Jul 22, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Local Netlify folder
+.netlify
diff --git a/README.md b/README.md
@@ -1,230 +1,116 @@
-# KDT5-M6
-🤝 검색어 자동완성 사이트 및 소비패턴 기록 서비스 구현, 팀 프로젝트
+![apple-icon-60x60](https://github.com/FC-TOY-10/ddock-ple/assets/108085046/3f3cd6bd-0e1a-4a18-9e72-4498b86ebc1a)
 
-Calendar & List 등 내가 소비한 금액 및 품목들을 기입하고, 월단위로 얼마를 썼는지, 어떤 항목에 비중을 두었는지 등을 기록하는
+# 똑플
 
-웹 서비스를 구현합니다.
+### 🔗 배포주소
 
+[똑플](https://ddock-ple.netlify.app/)
 
+### 📄 프로젝트 소개
 
-웹/모바일웹 구현 모두 무방하며, 다양한 차트를 활용할 수 있습니다.
+가계부 API를 이용하여 소비 기록과 소비 습관을 기를 수 있는 가계부 만들기  
+똑플 : 똑똑한 소비 플랜
 
+### 🗓 프로젝트 기간
 
-react를 필수로 사용해야 합니다.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+2023.07.05 ~ 2023.07.23
 
+### 📌 프로젝트 기능
 
+#### 로그인 페이지
 
-과제 수행 및 제출 방법
+- 회원가입 페이지로 이동 가능
+- 이메일 인증 후 로그인 가능
+- 구글 아이디로 간편 로그인 가능
+- 비로그인 상태에선 회원가입 페이지 외 다른 페이지 접속 불가
+- 로그아웃시 로그인 페이지로 이동
 
-KDT기수번호_이름
+#### 메인 페이지
 
+- 월간 수입 + 지출 = 총액 표시
+- 이번 달 예산 등록
+- 총액/ 예산에 따른 비율을 스피너로 표시
 
+#### 월간 페이지
 
-E.g, KDT0_BaeJinHo
+- fullCalendar 기능 연동
+- 등록된 입금, 지출 내역 fullCalnedar 연동후 노출
+  - 입금, 지출 내역 데이터 비교
+- 등록된 입금, 지출 내역 아래 리스트로 노출
+- 리스트 내역 수정 및 삭제 기능
+-
 
-현재 저장소를 로컬에 클론(Clone)합니다.
-자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDTX_BaeJinHo)
-자신의 본명 브랜치에서 과제를 수행합니다.
-과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDTX_BaeJinHo)
-저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDTX_BaeJinHo)
-main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+#### 등록 페이지
 
+- 날짜 선택 datePicker 기능 연동
+- 금액 입력후 입금, 지출 클릭시 데이터 구분
+- 지출 등록시 카테고리 별 지출 등록 가능
 
-[필수 구현] 
-지출 내역 입력 폼 (지출 금액, 지출항목, 지출 날짜)
-지출 내역 목록(일반 리스트형, 칼렌더 형 표기 가능) 
-지출 내역 수정 및 삭제 
+#### 주간 페이지
 
-[선택 구현]
-지출 내역 칼렌더로 표기
-지출 내역 월별 내역, 주별 내역, 일별 내역 표기 
-차트를 이용해서 소비 내역 표기 하기
-모바일 형태로 구현할지, 웹 형태로 구현할지는 자유
+- 월간 페이지에 등록한 입금, 지출 목록만 생성
+- 주(week)마다 구분해서 리스트 생성
+- 해당 주를 클릭하면 일(day)별로 목록 생성
+- 수정, 삭제 버튼으로 일 목록 수정, 삭제 가능
 
-URL 예제 : http://52.78.195.183:3003/api/expenses
-API
-1. 소비 기록 작성 API
+#### 통계 페이지
 
-description 추가 (선택)
+- 주간 통계, 월간 통계 탭 구분 기능
+- 주간 수입, 지출 데이터 차트 표현
+  - 주간 수입, 지출 데이터 라인 차트 연동
+  - 카테고리 별 지출 횟수 데이터 도넛 차트 연동
+  - 지난주 총 금액 데이터 비교
+- 월간 수입, 지출 데이터 차트 표현
+  - 월간 자산 분석 데이터 파이 차트 연동
+  - 월간 지출 TOP 3 카테고리 데이터 막대 그래프 연동
+  - 월간 카테고리 별 지출 분석 레이더 차트 연동
 
-Request:
-```javascript
-POST /expenses
-Content-Type: application/json
+#### 검색 페이지
 
-{
-  "amount": 100,
-  "userId": "user123",
-  "category": "food",
-  "description": "설명",
-  "date": "2023-07-04T10:30:00.000Z"
-}
-```
-Response:
-
-```javascript
-Status: 201 Created
-{
-  "message": "Expense created successfully"
-}
-```
-
-
-2. 소비 품목 목록 API
-Request:
-```javascript
-GET /categories?userId={userId}
-```
-Response: 
-
-Status: 200 OK
-```javascript
-["food", "clothing", "electronics"]
-```
-
-3. 검색어에 해당하는 소비 항목 및 금액 조회 API
-
-Request:
-```javascript
-GET /expenses/search?q={keyword}&userId={userId}
-```
-
-Response:
-```javascript
-Status: 200 OK
-[
-  {
-    "amount": 100,
-    "userId": "user123",
-    "category": "food",
-    "date": "2023-07-04T10:30:00.000Z"
-  },
-  {
-    "amount": 80,
-    "userId": "user456",
-    "category": "food",
-    "date": "2023-07-03T14:20:00.000Z"
-  }
-]
-```
+- 검색 기간 필터링 기능
+  - DatePicker 연동
+- 검색 카테고리 필터링 기능
+- 검색 결과 목록 노출 및 총 지출 금액 노출
 
-4. 일별, 주별, 월별 소비 조회 API
-Request:
-```javascript
+### ⚒️ 기술 스택
 
-(category는 선택)
-GET /expenses/summary?period={period}&userId={userId}&category={category}
-period : daily, weekly, monthly
-```
-Response:
-
-```javascript
-Status: 200 OK
-[
-  {
-    "_id": "2023-07-04",
-    "totalAmount": 180
-  },
-  {
-    "_id": "2023-07-03",
-    "totalAmount": 80
-  }
-]
-```
-5. 소비 기록 수정 API
-Request:
-```javascript
-PUT /expenses/123
-
-Content-Type: application/json
-
-{
-  "amount": 150,
-  "userId": "user123",
-  "category": "food",
-  "date": "2023-07-04T10:30:00.000Z"
-}
-```
-Response:
-```javascript
-Status: 200 OK
-{
-  "message": "Expense updated successfully"
-}
-```
-
-6. 소비 기록 삭제 API
-Request:
-```javascript
-DELETE /expenses/123
-```
-Response:
-```javascript
-Status: 200 OK
-{
-  "message": "Expense deleted successfully"
-}
-```
-
-7. 소비 기록 달력 호출 API
-Request:
-```javascript
-(category는 선택)
-GET /expenses/calendar?year=2023&month=7&userId={userId}&category={category}
-```
-Response:
-```javascript
-Status: 200 OK
-{
-  "1": [
-    {
-      "amount": 100,
-      "userId": "user123",
-      "category": "food",
-      "date": "2023-07-01T10:30:00.000Z"
-    }
-  ],
-  "4": [
-    {
-      "amount": 80,
-      "userId": "user456",
-      "category": "food",
-      "date": "2023-07-04T14:20:00.000Z"
-    }
-  ]
-}
+<div style="display: flex; gap: 4px">
+<img src="https://img.shields.io/badge/React-61DAFB?style=flat&logo=React&logoColor=white"/>
+<img src="https://img.shields.io/badge/Typescript-3178C6?style=flat&logo=typescript&logoColor=white"/>
+<img src="https://img.shields.io/badge/VITE-646CFF?style=flat&logo=vite&logoColor=white"/>
+<img src="https://img.shields.io/badge/StyledComponents-DB7093?style=flat&logo=styledcomponents&logoColor=white"/>
+<img src="https://img.shields.io/badge/Axios-5A29E4?style=flat&logo=axios&logoColor=white"/>
+<img src="https://img.shields.io/badge/Chart.js-FF6384?style=flat&logo=chartdotjs&logoColor=white"/>
+<img src="https://img.shields.io/badge/Firebase-FFCA28?style=flat&logo=firebase&logoColor=white"/>
+<img src="https://img.shields.io/badge/Zustand-133011?style=flat&logo=&logoColor=white"/>
+</div>
 
-```
+### 👩🏻‍💻🧑🏻‍💻 개발팀 소개
 
+|             **[이은비](https://github.com/EungBug)**             |   **[김하은](https://github.com/hahahaday12)**   |         **[황인승](https://github.com/hwanginseung)**          |
+| :--------------------------------------------------------------: | :----------------------------------------------: | :------------------------------------------------------------: |
+| 프로젝트 팀장,<br> Github 관리, <br>통계 페이지,<br> 검색 페이지 | 월간 페이지,<br>캘린더 구현,<br>소비 등록 페이지 | 로그인, 로그아웃,<br>회원가입,<br>메인 페이지,<br> 주간 페이지 |
 
+### 📂 폴더구조
 
-8. 카데고리에 해당하는 소비 항목 및 금액 조회 API(정확한 카데고리)
-
-Request:
-```javascript
-GET /expenses/category?q={keyword}&userId={userId}
 ```
-
-Response:
-```javascript
-Status: 200 OK
-[
-  {
-    "amount": 100,
-    "userId": "user123",
-    "category": "food",
-    "date": "2023-07-04T10:30:00.000Z"
-  },
-  {
-    "amount": 80,
-    "userId": "user456",
-    "category": "food",
-    "date": "2023-07-03T14:20:00.000Z"
-  }
-]
+📦src
+ ┣ 📂apis
+ ┣ 📂components
+ ┃ ┣ 📂chart
+ ┃ ┣ 📂common
+ ┃ ┣ 📂home
+ ┃ ┣ 📂login
+ ┃ ┣ 📂monthly
+ ┃ ┣ 📂search
+ ┃ ┗ 📂weekly
+ ┣ 📂constants
+ ┣ 📂pages
+ ┣ 📂types
+ ┣ 📂utils
+ ┣ 📜GlobalStyle.tsx
+ ┣ 📜firebase.ts
+ ┣ 📜main.tsx
+ ┣ 📜store.ts
+ ┗ 📜vite-env.d.ts
 ```
-
diff --git a/_redirects b/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <meta
+      http-equiv="Content-Security-Policy"
+      content="upgrade-insecure-requests" /> -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0" />
+    <title>똑플</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      type="module"
+      src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+	  status = 200