boostcamp-2020/project16-a-account-book

💲 너는 돈을 써라, 나는 관리를 할테니💲

N석봉 - 가계부 서비스

🏠 HOME PAGE

돈은 너가 쓰거라 🤑, 관리는 내가 할테니 😎

📌 가계부 서비스 소개

👩‍👩‍👧‍👦 개인 또는 공용으로 관리할 수 있는 자산관리 가계부 서비스

• 혼자만의 가계부를 관리할 수 있습니다.
• 친구를 초대하여 함께 가계부를 관리할 수 있습니다.

📈 지출과 수입에 대한 통계 제공

• 그동안의 지출내역과 수입을 분석하여 입출금 현황을 파악할 수 있습니다.

✔️ 내가 보고 싶은 것들만 필터링

• 원하는 내역만 필터링해서 볼 수 있는 기능을 제공합니다.

📆 달력을 통한 거래내역 확인

• 달 별로 돈의 사용 내역을 확인할 수 있습니다!

📩 MMS를 입력하여 바로 거래내역에 추가

• 문자로 온 거래내역을 치기만 하면, 바로 거래내역에 추가할 수 있습니다.

📌 기술 및 논의 정리 - WIKI

📌 주요 기능

🔗 로그인	🔗 가계부리스트	🔗 메인페이지	🔗 달력페이지

🔗 통계페이지	🔗 채팅페이지	🔗 태그페이지	🔗 알람 모달

📌서비스 흐름

⚙️ 프로젝트 구동 방법

우선 Repository clone한 후, Project16-A-Account-Book 폴더에 들어간다.

1. 몽고디비 설치 후 데이터베이스 생성 2. 백엔드

• 백엔드 환경 변수 설정

  • be/src 폴더 바로 밑에 .env 파일 생성
  • be/src/.env-template 안에 있는 내용 작성
  • .env 예시
    • mongodb cloud의 경우 DB_PORT는 작성하지 않기

    DB_USER=[데이터베이스 유저 이름 (ex. test)]
    
    DB_PASSWORD=[데이터베이스 password (ex. 123123)]
    
    DB_HOST=[데이터베이스 호스트 이름 (ex. cluster0.3v1lt.mongodb.net)]
    
    DB_DATABASE=[데이터베이스 이름 (ex. account?retryWrites=true&w=majority)]
    
    DB_PORT=[데이터베이스 포트 (ex. 27017)]
    
    JWT_SECRET=[JWT secret key (ex. ajsdFAG430tu04qkn) ]
    
    GITHUB_ID=[GitHub_OAuth_Client_Id (ex. 6df23f10bc0622c89804)]
    
    GITHUB_SECRET=[GitHub_OAuth_Client_Secret]
    
    HOST=[서버 주소 (ex. http://localhost)]
    
    BE_PORT=[백엔드엔드 서버 포트 (ex. 4000)]
    
    FE_PORT=[프론트엔드 서버 포트 (ex. 3000)]
    
    EXPIRES_IN=[JWT 토큰 만료 시간 (ex. 24h)]
    

• 실행

  cd be
  yarn 
  yarn dev

  or

  cd be
  npm install 
  npm run dev

3. 프론트엔드

• 프론트엔드 환경 변수 설정

  • fe 폴더 바로 밑에 .env.development 파일 생성
  • .env_sample에 있는 내용 작성
  • .env 예시

  REACT_APP_API_URL=[서버 주소 (ex. http://localhost)]
  
  REACT_APP_API_PORT=[프론트엔드 서버 포트 (ex. 4000)]
  

• 실행

  cd fe
  yarn
  yarn start

  or

  cd fe
  npm install 
  npm run start

📌 팀원소개

J128 윤석주	J114 양예진	J075 박상신	J081 박승환
dbstjrwnekd	yejineee	pkiop	rolled-potatoes

project16-a-account-book's Issues

Transaction PUT / DELETE API 구현

목표

• PUT으로 Transaction 수정을 할 수 있다.
• DELETE으로 Transaction 제거를 할 수 있다.

체크리스트

• PUT으로 Transaction 수정을 할 수 있다.
• DELETE으로 Transaction 제거를 할 수 있다.

Icon + a 태그로 네비게이션 변경

목표

네비게이션은 현재 IconButton을 사용하고 있다.
하지만 이 버튼은 다른 곳으로 이동하고자 하는 것이므로 Input + a 태그로 시맨틱하게 변경하고자 한다.

체크리스트

• example

참고

메인 페이지 컴포넌트 라우팅

목표

메인 페이지 컴포넌트의 각 라우팅 가능한 버튼 클릭 시 적절한 페이지로 이동하도록 구현

체크리스트

• 년, 월 버튼을 클릭 시 가계부 년, 월 설정으로 이동한다.
• 채팅 버튼을 클릭 시 SNS / 채팅화면으로 이동한다.

AccountBook, Transaction 컴포넌트에서 수입, 지출 분류에 따라 부호 지정하기

목표

AccountBook : 수입, 지출 분류에 따라 금액 총합에 더해줄지 빼줄지 정하기
Transaction : 수입 지출 분류에 따라 Price에 부호 지정

체크리스트

• 분류가 수입이면 AccountBook의 총합에 +로 집계
• 분류가 수입이면 Transaction의 Price에 -부호 붙이기
• 분류가 지출이면 AccountBook의 총합에 -로 집계
• 분류가 지출이면 Transaction의 Price에 -부호 붙이기

DateTransactionList 구현

목표

해당 날짜, Transaction Item 목록, 목록들의 금액 총합을 보여주는 컴포넌트를 구현한다.

체크리스트

• 날짜가 잘 나오는지
• Transaction Item 목록을 잘 불러오는지
• 목록들의 금액 총합을 잘 보여주는지
• CSS 레이아웃

Icon + Button 컴포넌트 생성

목표

버튼과 아이콘 아톰 컴포넌트를 결합한 컴포넌트를 생성한다.

체크리스트

• 아이콘 타입, button onClick 이벤트 함수를 prop로 입력을 받는다.
• 레이아웃 등 css 작업.

참고

로그인 페이지 생성

목표

체크리스트

• local 로그인 영역 동작
• OAuth 로그인 영역 동작
• Header 로고 클릭시 메인 페이지로 이동

참고

FE, BE Alias 설정

목표

FE, BE 개발할 때 Alias를 통해 쉽고 깔끔하게 경로를 지정할 수 있게 한다.

체크리스트

• FE Alias 가능
• BE Alias 가능

develop pull 받아 빌드시 에러

pull 받아서 yarn 으로 설치 -> yarn build시 최초 에러

위 사진 대로 babel-loder 의존성 지우고 yarn.lock, node_modules 지우고 다시 설치 시 yarn build는 되는데 build하면 아래 사진처럼 자동으로 'react'여야하는 속성이 'react-jsx로 start 시 에러 발생

npm run start도 동일

Price tag 컴포넌트 생성

목표

체크리스트

• 숫자를 props로 받는다
• 숫자 뒤에 "원"을 붙인다.
• 색을 props로 받는다.
• 크기를 props로 받는다.
• (선택) 000 마다 ,를 붙인다.

참고

MonthInfoHeader 구현

목표

가계부를 확인할 월(Month)을 선택할 수 있고,
월별 수입, 지출 총 합을 볼 수 있고,
클릭하면 채팅으로 이동하는 컴포넌트를 구현한다.

체크리스트

• 월 버튼 클릭 시 드랍다운이 잘 나오는지
• 드랍다운에서 원하는 년/월 선택 시 잘 적용 되는지
• 해당 월 수입 총합이 잘 나오는지
• 해당 월 지출 총합이 잘 나오는지
• 채팅 버튼 클릭시 채팅으로 잘 이동하는지
• CSS 레이아웃

프로젝트 구조 설계

• 프론트엔드 : CRA 사용
• 백엔드 : koa

결제내역 입력 API 수정

목표

• 결제내역 도큐먼트를 생성한 후, accounts의 transactions 배열에 생성된 도큐먼트의 object id를 추가한다.
• mongoose의 static method, instance method를 사용한다.

체크리스트

• thread safe 한 방식으로 데이터를 저장한다.

참고

Button 컴포넌트 생성

목표

버튼 아톰 컴포넌트를 생성한다.

체크리스트

• onClick, children을 props로 받는다.
• default css

참고

아이콘 컴포넌트 생성

목표

( 원안에 있는 + 부분)
아이콘 컴포넌트를 생성한다.
어떤 아이콘인지 구별 할 수 있는 type을 입력 받아서 그에 맞는 적절한 아이콘을 반환한다.

체크리스트

• 식별 가능한 type을 prop으로 받는다.
• default css 생성.

참고

이미지 컴포넌트 생성

목표

이미지 아톰 컴포넌트를 생성한다.

체크리스트

• 이미지 src에 들어갈 경로를 prop로 입력 받는다.
• default css

참고

Input 컴포넌트 생성

목표

input 아톰 컴포넌트를 생성한다.

체크리스트

• value, onChange를 props로 받는다.
• default css 작업

참고

husky 설정

목표

• husky 설정하여 코드 컨벤션 맞춤

라벨 컴포넌트 생성

목표

라벨 아톰 컴포넌트를 생성한다.

체크리스트

• children을 prop로 받는다.
• default css 생성.

참고

배포 자동화 설정

Dropdown List 컴포넌트

목표

[1]

[2] 전체 체크 되었을 경우

[3] 체크가 되지 않았을 경우

필터링에서 쓰이는 드랍다운 리스트를 생성한다.
[1]을 클릭하면 [2]와 같은 스타일의 드랍다운이 보여지도록 한다.

체크리스트

• 드랍다운 아이템에는 체크박스가 있다.
• 체크가 되는 경우 표시가 되어야 한다.

참고

가계부 입력 컴포넌트 구현

목표

가계부 입력 컴포넌트를 구현하여 페이지로 만든다.

체크리스트

• 가격을 입력할 수 있다. 000마다 쉼표가 자동으로 붙여진다.

• 분류는 지출, 수입, 이체 중에서 선택할 수 있다.

• 카테고리를 클릭하면 카테고리 드랍다운이 보여진다.

• 카테고리를 선택하지 않으면 미분류이다.

• 거래처명을 입력하면, 가격 상단의 거래처명이 4번에 쓰인 거래처명으로 설정된다.

• 거래처 명은 반드시 입력해야 한다.

• 결제수단을 선택하면, 이 가계부에 설정된 결제수단이 드롭다운으로 보여진다.

• 결제 수단은 반드시 선택해야 한다.

• 날짜를 선택할 수 있다. 날짜는 오늘 날짜가 기본적으로 선택된다.

• 메모를 입력할 수 있다. 메모 입력은 하지 않아도 된다. 최대 50자까지 입력할 수 있다.

참고

Local 로그인 폼 만들기

목표

체크리스트

• 아이디 비밀번호를 입력할 수 있다.
• 로그인 버튼 클릭시 입력한 데이터를 바탕으로 local 로그인을 진행한다.
• 회원가입 버튼 클릭시 회원가입 페이지로 이동한다

참고

가계부 리스트 페이지

목표

체크리스트

• Header 디자인
• ListItemContainer (디자인+기능)
• IconButton (디자인+기능)

참고

Label + Input 컴포넌트 생성

목표

라벨 아톰과 인풋 아톰을 결합한 컴포넌트를 생성한다.

체크리스트

• 라벨에 들어갈 text, input의 value, input의 onChange 이벤트 함수 를 prop으로 받는다.
• 레이아웃 배치 css 처리

참고

거래내역 아이템 컴포넌트 구현

목표

• TransactionItem을 구현한다.
  예 1)
  
  예 2)
  

체크리스트

• 아이콘 버튼, 타이틀, 분류, 거래방법, 금액이 표시되어 있다.

참고

체크박스 컴포넌트

목표

필터링에 쓰이는 체크박스 컴포넌트를 생성한다.

체크리스트

• 선택이 되면 체크가 되었음이 표시가 되어야 한다.

참고

Transaction API에 obj_id 쿼리스트링 처리 추가

목표

Transaction API에 obj_id를 추가해서 현재 가계부에 맞는 Transaction만 접근할 수 있게 한다.
api/transaction/:obj_id 형태의 API요청으로 해당하는 가계부의 데이터만 접근하도록 한다.

체크리스트

• obj_id에 맞는 가계부의 Transaction만 접근할 수 있다.

참고

하단 Navigation Bar 구현

목표

원하는 콘텐츠로 이동할 수 있는 Navigation Bar를 구현한다.

체크리스트

• 홈 버튼 클릭 시 가계부 메인으로 이동하는지
• 통계 버튼 클릭 시 통계 페이지로 이동하는지
• 달력 버튼 클릭시 달력 페이지로 이동하는지
• 태그 버튼 클릭시 태그 선택 페이지로 이동하는지
• (+) 버튼 클릭 시 가계부 작성 페이지로 이동하는지
• CSS 레이아웃

Transaction GET API에 필터 기능 추가

목표

// transaction GET query
'/:obj_id?start_date=2020-01-01&end_date='2020-02-01&income=&expense=&transfer=&method='

// return 
[
  {
    id: number,
    price: number,
    client: string,
    payment: string,
    category: string,
    classification: string,
    memo: string,
    date: date
  }
]

필터가 적용된 데이터만 가져올 수 있도록 필터 기능을 추가한다.

체크리스트

• 쿼리스트링으로 받은 필터 정보에 해당되는 Transaction만 return한다.

Transaction store 백엔드와 연동

목표

Transaction store 데이터를 백엔드에서 가져올 수 있도록 한다.

체크리스트

• 백엔드에서 데이터를 잘 가져 오는지

GitHub Login API생성

목표

체크리스트

• passport-koa를 이용한 api생성
• router, controller생성

참고

TransactionStore mobx 경고 해결

목표

TransactionStore mobx 경고 해결

체크리스트

• 경고가 더이상 나오지 않는지

Linked pull request

#74

드롭다운 컨테이너 컴포넌트 구현

목표

체크리스트

• 버튼을 클릭하였을 경우, 버튼 밑으로 빈 드랍다운이 보여지도록 한다.
• 드랍다운이 보이는 채로, 드랍다운 외부를 클릭하면, 드랍다운이 사라지도록 한다.

참고

드랍다운 내부 구현

목표

드랍다운을 클릭하면 보이는 내부를 구현한다.

체크리스트

• [ ]

참고

Transaction API에 인증 미들웨어 추가

목표

Transaction에 접근 가능한 사용자만 접근할 수 있도록 인증 미들웨어를 추가한다.

체크리스트

• 사용자는 접근 가능한 Transaction만 접근할 수 있다.

필터 드랍다운 컴포넌트

목표

체크리스트

• 드롭다운 컨테이너 컴포넌트를 사용한다.
• 기간, 결제수단, 카테고리 ( 지출, 수입, 이체 ) 를 선택할 수 있어야 한다.

참고

ListItemContainer 컴포넌트 생성

목표

체크리스트

• 아이콘이 잘 표시
• children이 잘 표시

참고

배포시 빌드를 GitHub Action에서 하도록 수정

목표

GitHub Action에서 빌드하고 번들링 된 파일만 서버에 전달한다.

개선 방향

기존에는 배포 서버에서 master 브랜치의 코드를 직접 빌드했다.
이 방식으론 빌드시에만 필요하고 배포시에는 필요없는 코드를 불필요하게 서버가 갖고 있어야 한다.

GitHub Action에서 빌드하고 번들링된 파일만 scp 등의 명령어로 서버에 전달 할 수 있다면 더 효율적으로 서버를 쓸 수 있다.

체크리스트

• GitHub Action에서 FE, BE 빌드하기
• 생성된 파일 scp 명령어로 서버에 전달.

참고

GitHub Action React 빌드

로그인시 로컬스토리지, mobx에 default account정보 추가

목표

로그인시 로컬스토리지, mobx에 default account정보 추가

체크리스트

• 첫 로그인시 default account생성
• 로컬스토리지에 추가
• mobx에 추가

참고

Transaction 컴포넌트 onClick 메소드 구현

목표

Transaction 컴포넌트를 누르면 Transaction을 수정하는 페이지로 이동하도록 한다.

체크리스트

• onClick 메소드로 클릭 시 수정 페이지(더미) 모달창이 잘 생성된다.

글로벌 스타일 지정

목표

Front에서 전역으로 사용될 글로벌 스타일 정의

체크리스트

• GlobalStyle 정의

참고

OAuth 로그인 폼 생성하기

목표

체크리스트

• Naver OAuth 로그인 기능
• Github OAuth 로그인 기능
• 로고 적용

참고

배포 스크립트 수정

문제점

배포할 경우 dev 의존 파일은 설치 할 필요가 없음
-> npm install --production 로 수정 해야 할 것 같음.

GitHub Login Button생성

목표

체크리스트

• button atom을 이용한 github login button생성
• 백엔드 api와 연동

참고

메인 페이지 컴포넌트 구현

목표

가계부 메인 페이지를 구현한다.

체크리스트

• 필터에 해당하는 항목 일별로 나누어 보여준다
• 선택된 년, 월, 필터에 해당하는 항목들의 총 수입, 총 지출, 채팅 으로 갈 수 있는 버튼을 보여준다.
• 가계부 항목 하나를 아이콘, 거래처, 결제수단, 분류, 금액(수입은 +, 지출은 -)형태로 보여준다.
• 버튼에 맞는 화면 으로 이동하는 네비게이션 바를 보여준다.

• 홈버튼 -> 가계부 메인
• 통계 -> 통계 화면
• +버튼 -> 가계부 입력
• 달력 -> 달력 페이지
• 태그 -> 카테고리 설정

• 가계부 버튼을 누르면 가계부 리스트를 보여준다(dropdown or 가계부 선택 페이지)

스토리북 설치

목표

프로젝트에 필요한 스토리북 라이브러리 설치

MonthListDropdown 컴포넌트 생성

목표

11월을 클릭 했을 때 나올 드롭다운 컴포넌트들을 가지고 있는 컴포넌트 생성.

현재 선택된 날 부터 데이터를 리스트화 하여 Dropdown container, Dropdown List에게 넘겨주어 드롭다운 컴포넌트를 생성한다.

체크리스트

• 날짜 리스트화.

참고

AccountBookList 드랍다운 컴포넌트 구현

목표

(디자인은 더 신경써서)
작성 / 수정할 수 있는 가계부 목록을 보여주는 드랍다운 컴포넌트를 구현한다.

체크리스트

• 가계부 아이콘이 잘 보이는지
• '가계부 1'에 해당하는 글씨가 잘 보이는지
• 원하는 가계부 클릭 시 해당 가계부 메인 페이지로 이동하는지

Transaction GET / POST API 구현

목표

• GET 메소드로 Transaction을 가져올 수 있도록 한다
• POST로 Transaction 생성을 할 수 있다.

체크리스트

• GET 메소드로 Transaction을 가져올 수 있도록 한다
• POST로 Transaction 생성을 할 수 있다.