Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

프론트엔드 5기 1조(김필진, 이은지, 임승이, 방미선) 토이프로젝트 #11

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
7 changes: 7 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"useTabs": false,
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"printWidth": 80
}
283 changes: 89 additions & 194 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,195 +1,90 @@
# KDT5-M6
🤝 검색어 자동완성 사이트 및 소비패턴 기록 서비스 구현, 팀 프로젝트

Calendar & List 등 내가 소비한 금액 및 품목들을 기입하고, 월단위로 얼마를 썼는지, 어떤 항목에 비중을 두었는지 등을 기록하는

웹 서비스를 구현합니다.



웹/모바일웹 구현 모두 무방하며, 다양한 차트를 활용할 수 있습니다.


react를 필수로 사용해야 합니다.
과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!



과제 수행 및 제출 방법

KDT기수번호_이름



E.g, KDT0_BaeJinHo

현재 저장소를 로컬에 클론(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)하지 않도록 주의하세요!
과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!


[필수 구현]
지출 내역 입력 폼 (지출 금액, 지출항목, 지출 날짜)
지출 내역 목록(일반 리스트형, 칼렌더 형 표기 가능)
지출 내역 수정 및 삭제

[선택 구현]
지출 내역 칼렌더로 표기
지출 내역 월별 내역, 주별 내역, 일별 내역 표기
차트를 이용해서 소비 내역 표기 하기
모바일 형태로 구현할지, 웹 형태로 구현할지는 자유

API
1. 소비 기록 작성 API

Request:
```javascript
POST /expenses
Content-Type: application/json

{
"amount": 100,
"userId": "user123",
"category": "food",
"date": "2023-07-04T10:30:00.000Z"
}
```
Response:

```javascript
Status: 201 Created
{
"message": "Expense created successfully"
}
```


2. 소비 품목 목록 API
Request:
```javascript
GET /categories
```
Response:

Status: 200 OK
```javascript
["food", "clothing", "electronics"]
```

3. 검색어에 해당하는 소비 항목 및 금액 조회 API

Request:
```javascript
GET /expenses/search?q=food
```

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"
}
]
```

4. 일별, 주별, 월별 소비 조회 API
Request:
```javascript
GET /expenses/summary?period=daily
```
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
GET /expenses/calendar?year=2023&month=7
```
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"
}
]
}

```

# KEEP
링크 [클릭](https://keep-team1.netlify.app)
github [클릭](https://github.com/pildrums/KDT5-M6/tree/KDT5_Team1)

# 👩‍🚀 개발팀

<table>
<tr>
<td align="center">
<a href="https://github.com/pildrums">
<img src="https://avatars.githubusercontent.com/u/77140851?v=4" width="100px;" alt="Pildrum"/><br />
<sub><b>김필진</b><br></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Eunjii">
<img src="https://avatars.githubusercontent.com/u/51252978?v=4" width="100px;" alt="Eunjii"/><br />
<sub><b>이은지</b><br></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/doitidey">
<img src="https://avatars.githubusercontent.com/u/128357188?v=4" width="100px;" alt="Lim Seung-Yi"/><br />
<sub><b>임승이</b><br></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/cdm1263">
<img src="https://avatars.githubusercontent.com/u/128245462?v=4" width="100px;" alt="Bang Misun"/><br />
<sub><b>방미선</b><br></sub>
</a>
</td>
</tr>
<tr>
<td align="center">
<sub><b>소비내역 월별 차트</b><br></sub>
</td>
<td align="center">
<sub><b>소비내역 추가, 수정, 삭제 모달, 메인화면 레이아웃</b><br></sub>
</td>
<td align="center">
<sub><b>소비내역 일별, 주간, 월별 캘린더</b><br></sub>
</td>
<td align="center">
<sub><b>소비내역 검색, 조회</b><br></sub>
</td>
</tr>

</table>

<br />
<br />

# 사용기술 및 개발환경

### Development

<p>
<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/styled components-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/React Router-CA4245?style=flat&logo=React Router&logoColor=white" />
<img src="https://img.shields.io/badge/React Query-FF4154?style=flat&logo=ReactQuery&logoColor=white" />

</p>

<br />
<br />

# 화면 구성
## 1. 전체화면 (담당 조원: 총원)
<img src="./img/screenshot1.png" />

## 2. 내역 추가 (담당 조원: 이은지)
<img src="./img/screenshot2.png" />
<img src="./img/screenshot3.png" />

## 3. 월별/주간 지출 내역 (담당 조원: 임승이)
<img src="./img/screenshot4.png" />
<img src="./img/screenshot5.png" />

## 4. 지출 내역 차트 (담당 조원: 김필진)
<img src="./img/screenshot6.png" />


## 6. 내역 조회 (담당 조원: 방미선)
<img src="./img/screenshot7.png" />
<img src="./img/screenshot8.png" />

Binary file added img/screenshot1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/screenshot2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/screenshot3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/screenshot4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/screenshot5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/screenshot6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/screenshot7.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/screenshot8.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading