🧭 설계 시작 순서 – 단계별로 쪼개기
1️⃣ 가장 먼저 해야 할 건 “가장 중심이 되는 흐름”부터 설계하기!
Wise Wallet에서는 그게 바로 “입력 → 리스트 추가 → 수정/삭제” 이 흐름이다.
✅ Step 1: 입력 바 (입력 폼)부터 시작
이건 이 프로젝트에서 “가장 처음 사용자와 인터랙션하는 부분”이자
다른 모든 기능의 진입점이기 때문에 무조건 여기서 시작해야 한다.
관련된 요구사항
-
날짜 선택
-
수입/지출 전환 버튼
-
금액 인풋 (3자리 쉼표 포맷)
-
카테고리 드롭다운 (수입/지출 구분)
-
결제수단 드롭다운 (추가/삭제 포함)
-
내용 인풋 (글자 수 제한 + 카운팅)
-
확인 버튼 (모든 유효성 통과 시 활성화)
시작 시 설계 범위
-
core/:
-
AmountInput, DateInput, SwitchButton, Dropdown, DescriptionInput, Button
-
-
units/TransactionForm/:
-
상위에서 모든 상태를 관리
-
유효성 검증
-
확인 버튼 클릭 시 리스트에 추가하는 로직 포함
-
✅ Step 2: 리스트 (TransactionList)
사용자가 입력한 정보를 눈에 보이게 출력하는 UI
삭제, 수정, 필터링, 정렬 등의 요구사항이 포함됨
관련된 요구사항
-
날짜/요일별 그룹화
-
일자별 수입/지출 합계
-
체크박스 필터링 (수입/지출)
-
hover 시 삭제 버튼 노출
-
수정 시 내용 자동 채워짐
-
수정 완료 시 상태 해제
설계 범위
-
core/TransactionItemDisplay, DateLabel, AmountText, CategoryTag
-
units/TransactionList, EditableTransactionItem, FilterToggleBar
-
hooks/useTransactionFilter.js
✅ Step 3: 그 다음은 페이지(View) 단위 설계
이제 입력과 리스트 흐름이 정리되면, 그걸 실제로 보여주는 페이지 단위 컴포넌트를 설계한다.
-
views/MainView/
-
상단: Header
-
중단: TransactionForm
-
하단: TransactionList
-
✅ 이후 확장
-
달력 페이지 (views/CalendarView/)
-
하루 수입/지출/합계를 박스에 표시
-
오늘 날짜 강조
-
하단에 월별 총합 표시
-
-
통계 페이지 (views/StatisticsView/)
-
카테고리별 비율, 금액
-
클릭 시 소비추이 그래프와 리스트 확장
-
📌 추천 설계 순서 요약표
| 단계 | 시작 포인트 | 이유 |
|---|---|---|
| 1️⃣ | TransactionForm | 모든 데이터 흐름의 시작점 |
| 2️⃣ | TransactionList | 보여지는 데이터 관리, 수정/삭제 등 |
| 3️⃣ | MainView | 전체 구조화 |
| 4️⃣ | CalendarView | 날짜 기반 시각화 |
| 5️⃣ | StatisticsView | 통계 기능, 정렬/애니메이션 포함 |
