diff --git a/CLAUDE.md b/CLAUDE.md index 1061497..dc84419 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -18,7 +18,7 @@ | `/stock` | `Stock` | 주식 뉴스/지수 | | `/stock/trade` | `StockTrade` | 주식 트레이딩 (포트폴리오·리포트·어드바이저·보유종목 인텔·관심종목 5탭) | | `/stock/screener` | `Screener` | 노드 기반 강세주 스크리너 (폼 ↔ n8n 스타일 캔버스 모드 토글, 점수 노드 7 + 위생 게이트 + ATR 포지션 사이저) | -| `/realestate` | `Subscription` | 청약 자격·일정 관리
• **프로필 탭**: 자치구 5티어 분류(드래그&드롭, PC 전용 / 모바일 read-only), 매칭 임계값 슬라이더, 텔레그램 알림 토글
• **카드/매칭 결과**: district 뱃지 + 5티어(S/A/B/C/D) 뱃지 표시
• **상세 모달**: 매칭 분석 섹션 (점수 + 사유 + 신청 자격) | +| `/realestate` | `Subscription` | 청약 자격·일정 관리
• **프로필 탭**: 자치구 5티어 분류(드래그&드롭, PC 전용 / 모바일 read-only), 매칭 임계값 슬라이더, 텔레그램 알림 토글
• **카드/매칭 결과**: district 뱃지 + 5티어(S/A/B/C/D) 뱃지 표시
• **상세 모달**: 매칭 분석 섹션 (점수 + 사유 + 신청 자격)
• **(모듈 분해: shell + components/8 + subscriptionUtils)** | | `/realestate/property` | `RealEstate` | 관심 단지 정보 | | `/realestate/listings` | `Listings` | 실매물 매매/전세 — 매물 목록+판정 tier / 안전마진 체커·예산 계산기 / 조건 편집 (3탭) | | `/travel` | `Travel` | 여행 사진 갤러리 (Dark Room 테마) | @@ -243,6 +243,23 @@ npm run preview # 빌드 결과물 미리보기 --- +## 기능 모듈 구조 (컨벤션) + +대형 기능 페이지는 단일 파일이 아니라 아래 모듈 구조로 분해한다 (레퍼런스: `src/pages/listings/`, `src/pages/subscription/`). + +``` +src/pages// +├── .jsx # 페이지 shell — 라우팅 진입, 탭바/헤더/레이아웃, 하위 조합만 +├── .css # 스타일 (shell에서 1회 import) +├── components/ # 표현 단위(카드/탭/상세/리스트) 각 단일 책임 +├── hooks/ # 상태·API·부수효과 훅 (선택) +└── Utils.js # 순수 헬퍼(포맷/매핑/계산) + Utils.test.js +``` + +규칙: 파일당 단일 책임·권장 ≤300줄; 순수 로직은 `*Utils.js`로 추출 + 유닛 테스트; shell은 데이터 페칭/비즈니스 로직을 직접 갖지 않고 조합만; 컴포넌트는 props/훅 인터페이스로만 통신. + +--- + ## Sonic Forge — AI 음악 생성 스튜디오 (`/lab/music`) ### 파일 구조 diff --git a/README.md b/README.md index 7b94b3a..b89ea4d 100644 --- a/README.md +++ b/README.md @@ -222,3 +222,9 @@ apiPost('/api/travel/sync'); | 공통 컴포넌트 | 10개 | | API 헬퍼 함수 | 65+ | | 외부 라이브러리 | React, Router, Leaflet, Recharts, Three.js, react-swipeable | + +--- + +### 기능 모듈 구조 + +대형 기능 페이지는 `src/pages//` 아래 **shell(`.jsx`) + `components/` + `hooks/` + `Utils.js`(+테스트)** 로 책임을 분해합니다. 파일당 단일 책임·권장 ≤300줄, 순수 로직은 유틸로 뽑아 유닛 테스트합니다. (레퍼런스: `listings`, `subscription`)