# DSP 프론트엔드 클린 아키텍처 리뷰용 레이어 구조도

## 전체 레이어 구조

```mermaid
graph TB
    subgraph UI["UI Layer (화면 계층)"]
        APP["app/<br/>라우팅 엔트리만"]
        CONFIG["app-config/<br/>Provider, Context, Layout"]
        PAGE["page-container/<br/>페이지 단위 조립"]
        SHARED["shared/<br/>공통 재사용 자산"]
    end

    subgraph API["API Layer (api/)"]
        subgraph COMP["Composition Layer (선택적)"]
            COMPOSITIONS["api/composition<br/>멀티 query 조합"]
        end
        subgraph QUERY["Query Layer (단일 쿼리 가공)"]
            QUERIES["api/query<br/>React Query"]
            SELECTORS["api/selector<br/>단일 응답 가공"]
            TRANSFORMS["api/transform<br/>의미/규칙 재정의"]
        end
        subgraph DATA["Data Source Layer (원천 데이터)"]
            SERVICES["api/service<br/>HTTP 통신"]
            DTO["api/dto<br/>백엔드 계약"]
        end
    end

    subgraph CORE["Core Packages Layer (모든 레이어에서 참조 가능)"]
        HTTP["HttpClient"]
        DS["Design System"]
        UTILS["공통 유틸"]
    end

    PAGE -->|"composition 또는<br/>query 통해<br/>데이터 요청"| COMPOSITIONS
    PAGE -->|"단일 query<br/>직접 호출"| QUERIES
    COMPOSITIONS --> QUERIES
    COMPOSITIONS --> SELECTORS
    QUERIES --> SELECTORS
    QUERIES --> SERVICES
    SELECTORS --> TRANSFORMS
    SERVICES --> DTO
    SERVICES -->|"공통 인프라 사용"| HTTP

    style UI fill:#E3F2FD,stroke:#1565C0,stroke-width:2px
    style API fill:#FFF3E0,stroke:#E65100,stroke-width:2px
    style COMP fill:#FFF8E1,stroke:#F9A825,stroke-width:1px,stroke-dasharray: 5 5
    style QUERY fill:#FFECB3,stroke:#FF8F00,stroke-width:1px
    style DATA fill:#FFE0B2,stroke:#EF6C00,stroke-width:1px
    style CORE fill:#E8F5E9,stroke:#2E7D32,stroke-width:2px
```

## API 레이어 의존 방향

```mermaid
graph LR
    COMP["Composition<br/>(선택적)"] --> QUERIES["Query"]
    COMP --> SELECTORS["Selector"]
    QUERIES --> SELECTORS
    QUERIES --> SERVICES["Service"]
    SELECTORS --> TRANSFORMS["Transform"]
    SERVICES --> DTO["DTO"]

    style COMP fill:#FFF8E1,stroke:#F9A825,stroke-dasharray: 5 5
    style QUERIES fill:#FFECB3,stroke:#FF8F00
    style SELECTORS fill:#FFECB3,stroke:#FF8F00
    style TRANSFORMS fill:#FFECB3,stroke:#FF8F00
    style SERVICES fill:#FFE0B2,stroke:#EF6C00
    style DTO fill:#FFE0B2,stroke:#EF6C00
```

> - `composition`, `query`, `selector` 모두 `transform`을 직접 호출할 수 있음
> - `selector`는 복잡한 가공이 필요할 때만 사용

## UI 레이어 폴더 구조

```mermaid
graph TB
    subgraph APP_DIR["app/ (라우팅 엔트리만)"]
        PAGE_TSX["page.tsx"]
        LAYOUT_TSX["layout.tsx"]
        ERROR_TSX["error.tsx / loading.tsx"]
    end

    subgraph APP_CONFIG["app-config/ (전역 설정, 하나만 존재)"]
        PROVIDERS["providers/"]
        CONTEXTS["contexts/"]
        LAYOUTS["layouts/"]
    end

    subgraph PAGE_CONTAINER["page-container/ (페이지 조립)"]
        MOBILE["mobile/"]
        TABLET["tablet/"]
        PC_SHARED["_shared/ (기기별 공용)"]
    end

    subgraph SHARED_DIR["shared/ (공통 재사용 자산)"]
        COMPONENTS["components/<br/>순수 UI (api X)"]
        FEATURES["features/<br/>api 호출 포함"]
        HOOKS["hooks/"]
        UTILS_DIR["utils/"]
        STYLES["styles/"]
    end

    LAYOUT_TSX --> PROVIDERS
    LAYOUT_TSX --> LAYOUTS
    PAGE_TSX --> PAGE_CONTAINER

    style APP_DIR fill:#E3F2FD,stroke:#1565C0
    style APP_CONFIG fill:#F3E5F5,stroke:#7B1FA2
    style PAGE_CONTAINER fill:#E8F5E9,stroke:#2E7D32
    style SHARED_DIR fill:#FFF3E0,stroke:#E65100
    style FEATURES fill:#FFCDD2,stroke:#C62828
```
