[Feat] WTH-410: 어드민 회비 등록 온보딩 UI 구현

.gitignore

@@ -51,6 +51,5 @@ next-env.d.ts
 # Sentry Config File
 .env.sentry-build-plugin
 
-# Obsidian per-user state
-docs/.obsidian/workspace.json
-docs/.obsidian/workspaces.json
+# Obsidian
+docs/.obsidian/

docs/로그/세션로그-JIN921-2026-06-25.md

@@ -0,0 +1,80 @@
+# 세션로그 — @JIN921 — 2026-06-25
+
+## 오늘의 목표
+
+- 총 회비 설정 온보딩 5단계 중 4단계까지 구현 (Step 1~4)
+
+## 작업한 것
+
+### 인프라
+
+- `src/stores/useDuesSetupStore.ts` — Zustand `combine` + `devtools` + `persist` 스토어 신규 생성
+  - 5단계 폼 데이터를 localStorage에 유지 (`'duesSetup'` 키)
+  - 패턴 레퍼런스: `useCreateClubDraftStore`
+- `src/constants/mock.ts` — `MOCK_PAYMENT_TARGETS` (25명), `MOCK_PREVIOUS_BALANCE` 추가
+
+### 라우팅
+
+단계별 독립 URL 방식 선택 (결정 배경: 브라우저 히스토리 활용, 새로고침 안전성).
+
+```
+/[clubId]/admin/dues/setup/1  ← Step 1
+/[clubId]/admin/dues/setup/2  ← Step 2
+/[clubId]/admin/dues/setup/3  ← Step 3
+```
+
+### 공유 서브컴포넌트 (`components/admin/dues/setup/components/`)
+
+| 컴포넌트 | 역할 |
+|---|---|
+| `DuesSetupStepIndicator` | 5단계 진행 표시 (teal 완료/활성, gray 미완료) |
+| `FormCard` | 카드 래퍼 (step 번호 + 설명 헤더 통일) |
+| `NextButton` / `PrevButton` | 하단 네비게이션 버튼 |
+| `DuesMemberTable` | Step 2 체크박스 테이블 |
+| `DuesSearchBar` | Step 2 이름 검색 인풋 |
+
+### Step 1 — 기본 정보
+
+- 필드: 1인당 회비금액 (숫자 입력), 회비 이름 (최대 30자), 회비 설명 선택 (최대 30자)
+- 유효성 검사: 금액·이름 필수 (`ring-state-error`)
+- "다음으로" → `/setup/2`
+
+### Step 2 — 납부 대상
+
+- 멤버 목록: `MOCK_PAYMENT_TARGETS` (실 API 연결 전 mock 사용)
+- 탭 필터: 전체 / 선택됨 / 제외됨 (카운트 실시간 반영)
+- 이름 검색 (클라이언트 필터)
+- 체크박스로 납부 대상 선택 → `selectedMemberIds[]` 스토어 저장
+- 최초 진입 시 TARGETED 상태 멤버 자동 선택 (`memberIdsInitialized` 플래그)
+- 페이지네이션 (10개/페이지)
+
+### Step 3 — 이월 설정
+
+두 케이스 분기 (`MOCK_PREVIOUS_BALANCE null 여부`):
+
+| | Case 1 (이전 잔액 있음) | Case 2 (이전 잔액 없음) |
+|---|---|---|
+| 정보 카드 | 금액 + "이전 기수 N기 잔액" (light teal bg) | "이전 기수 정보가 없습니다! 직접 금액을 작성해주세요." (brand-primary 텍스트) |
+| 기본 선택 | 이월하지 않기 | 잔액을 이번 기수로 이월하기 |
+| "이월하지 않기" 부설명 | "이월 금액이 지출 내역으로 기록됩니다." | (없음) |
+| "이월하기" 부설명 | (없음) | "아래 금액을 작성해주세요" |
+| 추가 입력 | (없음) | 이월 금액 설명 textarea (선택, 최대 30자) |
+
+### Step 4 — 계좌 공개 ← **오늘 마지막 구현**
+
+- 필드: 계좌번호 (필수), 은행 (필수), 예금주 (필수, 최대 30자), 안내 문구 선택 (선택, 최대 30자)
+- 2열 grid 레이아웃: 계좌번호+은행 / 예금주+안내문구
+- "멤버에게 계좌를 공개" Switch 토글 → `isAccountPublic` 스토어 저장
+- 유효성: 3개 필수 필드 모두 입력 시에만 `/setup/5` 이동
+- `useDuesSetupStore`에 `accountNumber`, `bankName`, `accountHolder`, `accountGuide`, `isAccountPublic` 필드 추가
+- 라우팅: `/[clubId]/admin/dues/setup/4`
+
+## 남은 작업 (TODO)
+- [ ] 은행 선택 드롭다운 구현 레퍼런스 찾기
+- [ ] **온보딩 데이터 관리 레퍼런스 조사** — 실 API 연결 시 `selectedMemberIds`, `MOCK_PREVIOUS_BALANCE` 등을 어떻게 넘길지 결정 필요. 참고할 패턴: `useCreateClubDraftStore` → Server Action 제출 흐름
+- [ ] Step 5 — 최종 확인 구현
+
+## 공유할 것 (팀원이 봐야 할 변화)
+
+- `useDuesSetupStore` 추가됨 — persist로 새로고침해도 입력값 유지됨. 온보딩 완료 후 반드시 `reset()` 호출해야 함
+- mock 데이터 (`MOCK_PAYMENT_TARGETS`, `MOCK_PREVIOUS_BALANCE`) — API 연결 전 임시. 실 API 붙일 때 같이 교체