🧨 앱 제작 목표

• 기존에 수기로 쓰던 가계부 형태 그대로 앱으로 제작
• 각 장소의 주별/월별 지출의 빠른 확인
• 각 장소/각 항목 소감 확인 및 영구 기록
• localStorage에 데이터 저장 + vercel 배포

✨ 구현 기능 상세

1. 메인: 새 항목 등록하기

• 날짜 선택 (캘린더에서 날짜 선택)
• 지출 내역 기록
  • 제목 (지출 목적, 들른 장소 등)
  • 항목 (지출한 개별 품목의 이름과 가격)
    • 등록해둔 태그로 항목 분류 가능
    • 태그는 사용자가 직접 등록+삭제 가능
  • 항목 추가 가능 (해당 날짜+제목에 여러 항목으로 등록됨)
• 등록 버튼 클릭 -> 해당 날짜에 해당 제목으로 지출 내역 등록

2. 전체 탭

• 등록된 전체 지출 내역 렌더링
• 하나의 제목에 여러 개의 항목이 등록된 경우
  • 첫 번째 항목을 제외한 나머지 항목은 옆에 개수로 표시
  • 항목을 클릭해서 상세 모달을 열면 전체 항목 내역 볼 수 있음
• 오른쪽에는 각 항목별(list) 합계를 보여줌
  • 상세 모달에서 해당 날짜의 전체 지출 볼 수 있음

3. 월별/주별 탭

• 달력(월)을 넘기면 해당 월의 주차 수를 반영한 버튼을 아래에 렌더링
  (예: 2023년 3월 - 5주차, 2023년 4월 - 6주차)
• 달력 오른쪽에 각 달의 월별 총 지출 렌더링
• 아래 Total과 한 주 소감은 해당 월의 주차별로 조회 및 등록 (구현 예정)

4. 날짜별 탭

• 상단에서 날짜 선택 가능
• 특정 날짜에 등록된 지출 항목만 렌더링
• 상단 오른쪽에 해당 날짜의 총 지출 렌더링
• 상세를 열면 각 항목의 Total 확인 가능

5. 전체/날짜별 탭 상세 모달

• 해당 항목의 총 지출액과 '~외'로 숨겨진 상세 내역 확인 가능
• 추후 항목별 등록된 소감 확인 (예정)

6. 지출 삭제 모달

• 삭제 후 삭제한 특정 부분을 반영한 총 지출액과 항목을 리렌더링

🎨 앱 디자인

• 모두 스스로 디자인 (색 조합은 해외 사이트 참고)
• 본래 수기로 기록하던 가계부였던 점을 살려 손글씨 느낌의 폰트 설정 (Nanum Pen Script)
• 버튼/태그 선택 시 transition 색 변화 css 추가
• 앱 화면 상단의 대표 이미지와 랜덤 문구
  • 지출은 속상한 것이 아니라 '관리하고 되돌아보는 일기'라는 느낌을 주고자 함

🌃 UX 관련

• 새 항목 등록하기 모달에서 제목이나 항목명, 가격 입력란이 비어있을 경우 화면 상단에 안내 Toast 띄우기 (react-toastify)
• 화면을 새로고침하거나 브라우저를 종료 후 다시 들어와도 데이터 유지 (localStorage 구현 예정)

🪀 원활한 앱 사용을 위해 추가한 것

• 같은 날짜에 여러 개의 항목 등록 시 같은 날짜 아래에 등록되게 함
  (수정 전: 동일한 날짜여도 별개의 지출 내역이 날짜와 함께 등록됨)
• 새 항목 등록하기 모달에서 날짜를 변경해서 항목 추가 후 새로 항목 등록할 때 기존에 변경했던 날짜 지
  (수정 전: 모달을 껐다가 다시 켜면 모달의 날짜는 최근에 변경한 날짜이나 지출 등록은 항상 오늘 날짜로 됨)
• 지출 내역이 많은 전체 탭에서는 대략적인 내용만 볼 수 있도록 항목별 아이템이 2개 이상인 경우 '~ 외 +(갯수)' 형태로 표시
  • 날짜별 탭에서는 상세 내역 바로 확인 가능
  • 새 항목 등록하기 에서 '+ 항목 추가' 버튼으로 항목을 추가하면 발생
• 날짜 아래에 날짜 선택을 위한 가이드 문구 추가
• 새 항목 등록하기에서 '+ 항목 추가' 버튼 클릭으로 항목이 2개 이상이 되면 오른쪽에 삭제 가능한 버튼('-') 추가됨

🤦‍♀️ 구현하면서 느낀 점

• 3단계 이상 중첩되는 데이터를 다루는 과정에서 단단한 데이터 설계의 필요성을 느낌
• 스스로 앱을 기획, 디자인, 유저를 끌 만한 랜덤 문구를 설정하는 과정에서 타 직군 분들(기획자, 마케팅, 디자이너)의 노고를 느낌 ㅜㅜ
• 인터랙션이 많은 앱에서의 전역 상태 관리가 매우 큰 역할을 한다는 점
• 앱 개발 후의 유지 및 보수와 확장성을 고려한 파일과 폴더 구조 생성을 미리 계획해야 하는 부분
  • 예: recoil 폴더의 atom과 selector를 용도에 맞게 파일별로 나누고 index.tsx로 모아서 export하는 작업을 앱 제작 도중에 실시
  • 해당 작업을 마치고 나니 recoil 관련 요소들을 직관적으로 사용/확인하기 훨씬 쉬워짐
  • 이 작업을 앱 제작 전에 미리 고려했으면 좋았겠다는 생각이 듦

🌮 덧붙일 기능

• 주별 지출 보기 및 한 주 소감 (사실 메인인데..)
• 태그별 확인이 가능한 탭
• 각 지출과 항목에 대한 소감 등록/수정/삭제
  • 조회는 상세 모달에서
• 지출 항목 검색 -> 인덱싱 목적
• 태그 관리 (현재는 모달에서 등록 및 삭제만 가능, 태그 관리 메뉴를 따로 만들 예정)