✅ 디렉토리 설계 기준
| 폴더명 | 역할 |
|---|
| core/ | UI만 담당하는 진짜 순수 컴포넌트 |
| units/ | core를 조립해서 로직과 상호작용을 가진 기능 컴포넌트 |
| views/ | 화면 단위의 완성 페이지 컴포넌트 |
| hooks/ | 재사용 가능한 커스텀 로직 함수들 |
| utils/ | format, 계산 등 비상태 유틸 함수 |
| constants/ | enum, 카테고리 목록 등 정적인 값 |
| services/ | fetch, API 통신 관련 로직 |
| contexts/ | 전역 상태를 관리하는 context API |
📁 최종 디렉토리 구조 (기능/요구사항 기반)
src/
├── core/
│ ├── inputs/
│ │ ├── AmountInput/
│ │ ├── DateInput/
│ │ ├── DescriptionInput/
│ │ └── TextField/
│ ├── buttons/
│ │ ├── Button/
│ │ └── SwitchButton/ # 수입/지출 토글
│ ├── select/
│ │ ├── CategorySelect/
│ │ └── PaymentSelect/
│ ├── list/
│ │ ├── TransactionItemDisplay/
│ │ ├── AmountText/
│ │ ├── CategoryTag/
│ │ └── DateLabel/
│ ├── stats/
│ │ ├── StatsRow/
│ │ └── MiniBarGraph/
│ ├── calendar/
│ │ └── CalendarCell/
│ └── common/
│ ├── Modal/
│ ├── Dropdown/
│ ├── Label/
│ ├── Icon/
│ └── CheckBox/
│
├── units/
│ ├── TransactionForm/
│ ├── TransactionList/
│ ├── FilterToggleBar/ # 수입/지출 필터 토글
│ ├── EditableTransactionItem/ # 수정 가능한 리스트 아이템
│ ├── CategoryStatisticsList/
│ ├── CalendarGrid/
│ └── PaymentManagerModal/ # 결제수단 추가/삭제 모달
│
├── views/
│ ├── MainView/ # 내역 입력 + 리스트
│ ├── CalendarView/
│ ├── StatisticsView/
│ └── NotFoundView/
│
├── hooks/
│ ├── useTransactionForm.js
│ ├── useModal.js
│ └── useCalendarData.js
│
├── services/
│ └── transactionAPI.js
│
├── constants/
│ ├── categories.js
│ ├── payments.js
│ └── colors.js
│
├── utils/
│ ├── formatAmount.js
│ ├── validateForm.js
│ └── dateUtils.js
│
├── contexts/
│ └── TransactionContext.js
│
├── App.jsx
└── main.jsx
📌 구성 특징 요약
| 특징 | 설명 |
|---|
| core/ | 모든 UI 컴포넌트를 로직 없이 순수하게 분리, core부터 구현하기(로직이 들어갈 공간은 남겨둔다_prop으로 받음) |
| units/ | 각 코어기능들을 import한뒤 로직을 붙여서 조립한다. |
| views/ | 요구사항에 따른 바탕화면 구성 |
| hooks/, services/ | 비즈니스 로직 분리 |
| constants/, utils/ | 전역 조릭 사용 정리 영역 |
📁 컴포넌트 계층 구조 설계
🧱 전체 컴포넌트 계층 시각화
App ( =MainPage)
├── Header
│ ├── LogoButton
│ ├── MonthNavigator
│ │ ├── SwipePrevPageDate
│ │ └── SwipeNextPageDate
│ └── TabSelector
└── TabView
├── FinancialRecords
│ ├── FormBox
│ │ ├── RegDateBox
│ │ ├── AmountBox
│ │ ├── ContentsBox
│ │ ├── MethodBox
│ │ ├── ClassificationBox
│ │ └── RegisterButtonBox
│ └── FinancialRecordsBoard
│ ├── BoardHeaderWrapper
│ └── RecordsListWrapper
├── FinancialCalandar
│ ├── CalendarGrid
│ ├── DayBox[]
│ └── MonthlySummaryBar
└── FinancialStatistic
├── MonthlySummary
├── CategoryList
├── SpendingTrendGraph
└── DetailList
