Web App Project

로그인 인증기능, 가계부 기능 합치기

하얀성 2024. 3. 3. 15:07

1. 가계부 내용 git 버전관리로 추가. 

2. 로그인 기능의 각 server,client의  package.json을 가계부 기능에 추가해준다.

3. 경로 수정. 라우터 등은 통합.  필요없는 라이브러리 삭제. 


-두 기능의 통합하여 렌더링해준 화면-

 

현 상황 문제점
- 시작 창이 로그인  된 창부터인데.. 이걸 로그인 화면으로 봐꿔야됨.
- db에서 사용자 한명당 손실 , 수입 관리 할 수 있도록 해야함.
- 화면 밑부분이 안나옴

 


현재 front/backend 구조.

📦src
 ┣ 📂assets
 ┃ ┗ 📜react.svg
 ┣ 📂Components
 ┃ ┣ 📂Button
 ┃ ┃ ┗ 📜Button.jsx
 ┃ ┣ 📂Chart
 ┃ ┃ ┗ 📜Chart.jsx
 ┃ ┣ 📂Dashboard
 ┃ ┃ ┗ 📜Dashboard.jsx
 ┃ ┣ 📂Expenses
 ┃ ┃ ┣ 📜ExpenseForm.jsx
 ┃ ┃ ┗ 📜Expenses.jsx
 ┃ ┣ 📂Form
 ┃ ┃ ┗ 📜Form.jsx
 ┃ ┣ 📂Income
 ┃ ┃ ┗ 📜Income.jsx
 ┃ ┣ 📂IncomeItem
 ┃ ┃ ┗ 📜IncomeItem.jsx
 ┃ ┣ 📂Navigation
 ┃ ┃ ┗ 📜Navigation.jsx
 ┃ ┣ 📂Orb
 ┃ ┃ ┗ 📜Orb.jsx
 ┃ ┣ 📜Footer2.jsx
 ┃ ┣ 📜Header.jsx
 ┃ ┣ 📜Home.jsx
 ┃ ┣ 📜Login.jsx
 ┃ ┗ 📜Signup.jsx
 ┣ 📂context
 ┃ ┗ 📜globalContext.jsx
 ┣ 📂History
 ┃ ┗ 📜History.jsx
 ┣ 📂img
 ┃ ┣ 📜avatar.png
 ┃ ┣ 📜avatar1.png
 ┃ ┗ 📜bg.png
 ┣ 📂styles
 ┃ ┣ 📜GlobalStyle.jsx
 ┃ ┗ 📜Layouts.jsx
 ┣ 📂utils
 ┃ ┣ 📜dateFormat.jsx
 ┃ ┣ 📜handleError.js
 ┃ ┣ 📜Icons.jsx
 ┃ ┣ 📜menuItems.jsx
 ┃ ┗ 📜useWindowSize.jsx
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜main.jsx

📦src
 ┣ 📂controllers
 ┃ ┣ 📜expense.js
 ┃ ┣ 📜income.js
 ┃ ┗ 📜UserAuthController.js
 ┣ 📂db
 ┃ ┗ 📜db.js
 ┣ 📂middlewares
 ┃ ┗ 📜verifytoken.js
 ┣ 📂models
 ┃ ┣ 📜ExpenseModel.js
 ┃ ┣ 📜IncomeModel.js
 ┃ ┗ 📜User.js
 ┣ 📂routes
 ┃ ┗ 📜UserAuthRouter.js
 ┗ 📜app.js

앞으로의 추가내용

 

[필요 기능]
- 로그인 창과 가계부 앱 잇기 -> 성공.
- 시작 창이 로그인  된 창부터인데.. 이걸 로그인 화면으로 봐꿔야됨.-> 성공
- db에서 사용자 한명당 손실 , 수입 관리 할 수 있도록 해야함.
- 로그아웃 버튼 이어주기
- 화면 밑부분이 안나옴
- 메인 창에서 로그아웃 버튼 숨기기
- 차트 보여주는 기간 고려해보기.
-> 전체 기간을 최대 몇일로 쪼갤것인가?
-> 마지막 기록일의 30일까지로 제한할 것인가?
-> 차트 아래에 자그마하게 수입,지출을 누르면 사라지는 기능 설명

- 폼 크기 줄이기, 옆에 수입 지출 버튼에서 추가내용 부분은 아래로 옮기고. 

[추가 기능]
- 프로필 이미지 랜덤 전송 추가.
- 본인이 원하는 이미지 기입, 유저 이름 변경도 추가.(put 기능 만들어야 할듯)
- 거래보기 대신 맨 아래에 유저 설정 변경 해야 할듯(가계부앱 라우터 관리 얘기하는것)
- 가입된 상태에서 로그인을 버튼을 누르면 바깥으로 나가짐...(로그인 하면 로그인, 회원가입 버튼은 숨겨야할듯)
- 수입, 지출 등록내용 검색기능

-수입 폼에 한글을 모두 급여를 -> 수입으로 수정