kt-event-marketing-fe/claude/frontend-design.md

# 프론트엔드설계가이드 

[요청사항]
- <설계원칙>을 준용하여 설계
- <설계순서>에 따라 설계
- [결과파일] 안내에 따라 파일 작성

[가이드]
<설계원칙>
- 기술스택: TypeScript 5.5 + React 18.3 + Vite 5.4
- 프로토타입과 동일하게 설계  
- 각 백엔드서비스 API명세서와 반드시 일치
- 모바일, 태블릿, 웹 화면 크기에 맞게 반응형으로 디자인  

<설계순서>
- 준비:
  - 프로토타입 분석: '../{시스템}/design/uiux/prototype'디렉토리의 모든 파일을 'design/prototype' 디렉토리로 복사하고 분석 및 이해 
  - API 분석: "[백엔드시스템]"섹션의 정보를 이용하여 API명세서를 'design/api'에 다운로드하여 분석 및 이해
  - 화면요구사항 분석: "[요구사항]" 섹션을 읽어 화면 요구사항 이해

- 설계:
  - 1. **UI/UX 설계**
    - 1.1 UI프레임워크 선택: MUI, Ant Design, Chakra UI, Mantine, React Bootstrap 등    
    - 1.2 화면목록 정의
    - 1.3 화면 간 사용자 플로우 정의 
    - 1.4 화면별 상세 설계: 
      - 1.4.1 상세기능
      - 1.4.2 UI 구성요소
      - 1.4.3 인터랙션
    - 1.5 화면간 전환 및 네비게이션 
    - 1.6 반응형 설계 전략 
    - 1.7 접근성 보장 방안 
    - 1.8 성능 최적화 방안 

  - 2. **스타일가이드 작성**: 
    API명세서 분석 결과와 선택한 UI프레임워크 특성을 반영
    - 2.1 브랜드 아이덴티티: 디자인 컨셉 등 
    - 2.2 디자인 원칙  
    - 2.3 컬러 시스템 
    - 2.4 타이포그래피
    - 2.5 간격 시스템
    - 2.6 컴포넌트 스타일 
    - 2.7 반응형 브레이크포인트
    - 2.8 대상 서비스 특화 컴포넌트  
    - 2.9 인터랙션 패턴

  - 3. **정보 아키텍처 설계**
    - 3.1 사이트맵: 페이지 구조 및 네비게이션 흐름
    - 3.2 프로젝트 구조 설계: 패키지와 파일까지 설계

  - 4. **API매핑설계서**
    - 4.1 API경로 매핑  
      public/runtime-env.js파일을 읽어 API그룹과 '"[백엔드시스템]"섹션에 정의된 각 서비스별 HOST를 지정       
      예시)
      ```
      window.__runtime_config__ = { 
        API_GROUP: "/api/${version:v1}",
        USER_HOST: "http://localhost:8081",
        ORDER_HOST: "http://localhost:8082"
      }
      ```

    - 4.2 **API와 화면 상세기능 매칭**: '1.4.1 상세기능'과 API 매핑   
      - 화면, 기능, 백엔드 서비스, API경로, 요청데이터 구조, 응답데이터 구조 명시    
      - API 요청데이타와 API 응답데이터 예시 

[참고자료]
- 프로토타입: design/prototype/*
- API명세서: design/api/*.json

[결과파일]
- UI/UX설계서: design/frontend/uiux-design.md
- 스타일가이드: design/frontend/style-guide.md
- 정보아키텍처: design/frontend/ia.md
- API매핑설계서: design/frontend/api-mapping.md