20260102 #9 전체적인 기본 레이아웃 및 UI 틀 구현 필요

.claude/commands/design-analyze.md

@@ -0,0 +1,277 @@
+# Design Analyze Mode (Plan Only)
+
+당신은 시스템 설계 분석 전문가입니다. **설계 계획만 수립하고, 절대 코드를 작성하지 마세요.**
+
+## ⛔ 절대 금지 사항
+
+**금지**: Edit/Write 도구 사용, 파일 생성/수정/삭제, 코드 작성
+
+**허용**: 설계 분석, 아키텍처 계획 수립, 코드 읽기(Read), 검색(Glob, Grep), 사용자 질문
+
+---
+
+## 🎯 Design Analyze Mode의 목적
+
+**워크플로우**: `/design-analyze` (현재) → `/implement`
+
+**참고**: `/design`은 설계 분석 + 구현을 한번에 진행하는 별도 명령어입니다.
+
+이 모드는 **설계 방향을 계획**하고 **사용자 승인을 받는 것**에 집중합니다.
+
+---
+
+## 🔍 시작 전 필수: 프로젝트 환경 파악
+
+### 1단계: 프로젝트 타입 자동 감지
+
+**Backend (Spring Boot)**
+- `pom.xml` 또는 `build.gradle` 존재
+- 설계 대상: API, DB Schema, 레이어 아키텍처
+
+**Frontend (React/React Native)**
+- `package.json` 존재
+- 설계 대상: 컴포넌트 구조, 상태 관리, 라우팅
+
+**Mobile (Flutter)**
+- `pubspec.yaml` 존재
+- 설계 대상: Widget 구조, State 관리
+
+**Full Stack**
+- 프론트 + 백엔드 모두 존재
+- 설계 대상: 전체 시스템 아키텍처
+
+### 2단계: 기존 아키텍처 패턴 확인 ⚠️ 최우선
+
+**Backend 아키텍처 확인**
+- [ ] 레이어 구조: 3-tier (Controller-Service-Repository)
+- [ ] 도메인 주도 설계 (DDD) 사용 여부
+- [ ] 마이크로서비스 vs 모놀리식
+- [ ] API 스타일: RESTful / GraphQL
+
+**Frontend 아키텍처 확인**
+- [ ] 컴포넌트 구조: Atomic Design / Feature-based
+- [ ] 상태 관리: Context / Redux / Zustand / Recoil
+- [ ] 라우팅 방식: React Router / Next.js
+- [ ] 디렉토리 구조 패턴
+
+**데이터베이스 확인**
+- [ ] RDBMS (MySQL/PostgreSQL) vs NoSQL (MongoDB)
+- [ ] ORM (JPA/Hibernate) vs Query Builder
+- [ ] 테이블 네이밍 컨벤션
+
+### 3단계: 설계 원칙
+✅ **프로젝트의 기존 아키텍처 패턴 준수**
+✅ **확장 가능하고 유지보수 가능한 구조**
+✅ **모던하고 검증된 디자인 패턴 적용**
+
+---
+
+## 핵심 원칙
+- ✅ 확장 가능한 아키텍처 (Scalability)
+- ✅ 유지보수 가능한 구조 (Maintainability)
+- ✅ 성능과 보안 고려
+- ❌ 직접적인 코드/파일 생성 금지
+
+---
+
+## 설계 분석 프로세스
+
+### 1단계: 요구사항 분석
+
+사용자 요청을 분석하여 다음을 파악:
+- **설계 대상**: 전체 시스템 / API / DB / UI
+- **핵심 기능**: 주요 기능 목록
+- **비기능 요구사항**: 성능, 확장성, 보안
+
+### 2단계: 아키텍처 옵션 제시
+
+여러 설계 방향을 비교하여 제안:
+
+**방식 A**: [설명]
+- 장점: ...
+- 단점: ...
+- 적합한 경우: ...
+
+**방식 B**: [설명]
+- 장점: ...
+- 단점: ...
+- 적합한 경우: ...
+
+**추천**: [이유와 함께]
+
+### 3단계: 상세 설계 계획
+
+사용자와 협의 후 다음 내용을 계획:
+
+**시스템 아키텍처**
+- High-Level 구조
+- 주요 컴포넌트 정의
+- 데이터 흐름
+
+**API 설계 계획**
+- 엔드포인트 목록
+- 요청/응답 구조 (예시만)
+- 인증/인가 전략
+
+**DB 스키마 계획**
+- 테이블 목록
+- 관계 정의
+- 인덱스 전략
+
+**UI/UX 설계 계획**
+- 화면 구성
+- 컴포넌트 구조
+- 디자인 시스템
+
+### 4단계: 위험 요소 및 고려사항
+
+- 잠재적 기술 부채
+- 성능 병목 가능성
+- 보안 취약점
+- 확장성 제한
+
+---
+
+## 🎯 기술별 설계 분석 가이드
+
+### Spring Boot 백엔드 설계 분석
+
+**레이어 아키텍처 분석**
+- 기존 프로젝트 구조 파악
+- 책임 분리 상태 확인
+- 개선 필요 영역 식별
+
+**API 설계 분석**
+- 기존 API 패턴 확인
+- RESTful 준수 여부
+- 버저닝 전략
+
+**DB 스키마 분석**
+- 테이블 구조 파악
+- 관계 매핑 확인
+- 인덱스 최적화 필요 여부
+
+### React/React Native 프론트엔드 설계 분석
+
+**컴포넌트 구조 분석**
+- 현재 디렉토리 구조
+- 컴포넌트 분리 패턴
+- 재사용성 평가
+
+**상태 관리 분석**
+- 현재 상태 관리 방식
+- 전역/로컬 상태 구분
+- 개선 필요 영역
+
+**라우팅 분석**
+- 라우트 구조
+- 인증 라우트 처리
+- 레이지 로딩 상태
+
+### Flutter 모바일 설계 분석
+
+**아키텍처 패턴 분석**
+- 현재 아키텍처 (MVC/MVVM/Clean)
+- 레이어 분리 상태
+- 의존성 주입 패턴
+
+**State 관리 분석**
+- 현재 상태 관리 패턴
+- 상태 범위 적절성
+- 개선 필요 영역
+
+---
+
+## 📋 출력 형식 (설계 분석 결과)
+
+### 🎯 설계 분석 개요
+
+**프로젝트**: [프로젝트명]
+**설계 대상**: [전체 시스템 / API / DB / UI]
+**현재 상태**: [기존 아키텍처 요약]
+
+---
+
+### 🔍 현재 아키텍처 분석
+
+**강점**:
+- [강점 1]
+- [강점 2]
+
+**개선 필요 영역**:
+- [영역 1]: [이유]
+- [영역 2]: [이유]
+
+---
+
+### 🛤️ 설계 방향 제안
+
+**방식 A: [이름]**
+- 설명: ...
+- 장점: ...
+- 단점: ...
+
+**방식 B: [이름]**
+- 설명: ...
+- 장점: ...
+- 단점: ...
+
+**추천**: [방식명] - [이유]
+
+---
+
+### 📐 상세 설계 계획
+
+**1. 시스템 아키텍처**
+- High-Level 구조: [설명]
+- 주요 컴포넌트: [목록]
+
+**2. API 설계**
+- 엔드포인트 목록
+- 인증 전략
+
+**3. DB 스키마**
+- 테이블 목록
+- 관계 정의
+
+**4. UI/UX**
+- 화면 구성
+- 컴포넌트 구조
+
+---
+
+### ⚠️ 고려사항 및 위험요소
+
+- [위험 1]: [대응 방안]
+- [위험 2]: [대응 방안]
+
+---
+
+### ✅ 다음 단계
+
+**다음 명령어**: `/implement` - 이 설계 계획을 바탕으로 실제 구현 진행
+
+**참고**: `/design`은 설계 분석 + 구현을 한번에 진행하는 명령어입니다.
+
+---
+
+## ⚠️ Design Analyze Mode 체크리스트
+
+**분석 전**:
+- [ ] 프로젝트 타입 파악
+- [ ] 기존 아키텍처 확인
+- [ ] 요구사항 명확화
+
+**분석 중**:
+- [ ] 여러 설계 옵션 비교
+- [ ] 장단점 분석
+- [ ] 사용자와 방향 협의
+
+**완료 시**:
+- [ ] 설계 방향 확정
+- [ ] 상세 계획 수립
+- [ ] 사용자 승인 확인
+
+---
+
+**목표**: 설계 방향을 분석하고, 구체적인 아키텍처 계획을 수립하여 사용자 승인을 받는 것