# 전체 로직 흐름도

## 1. 애플리케이션 초기화 및 요청 처리

```mermaid
graph TD
    A[사용자 요청] --> B[Nuxt 서버 시작]
    B --> C[환경 설정 로드]
    C --> D[미들웨어 체인 실행]
    D --> E[게임 데이터 로드]
    E --> F[페이지 데이터 로드]
    F --> G[컴포넌트 렌더링]
    G --> H[최종 HTML 응답]
```

## 2. 서버 사이드 미들웨어 체인

```mermaid
graph TD
    A[요청 수신] --> B{정적 자산?}
    B -->|Yes| C[스킵]
    B -->|No| D[gameAlias.ts 미들웨어]
    D --> E[호스트에서 게임 별칭 추출]
    E --> F[게임 데이터 API 호출]
    F --> G[event.context에 저장]
    G --> H[라우트 처리]
```

## 3. 데이터 흐름 및 상태 관리

```mermaid
graph LR
    A[게임 데이터 API] --> B[GameDataStore]
    C[페이지 데이터 API] --> D[PageDataStore]
    B --> E[게임 기본 정보]
    B --> F[지원 언어 목록]
    B --> G[SEO 메타 정보]
    D --> H[템플릿 배열]
    D --> I[페이지별 컴포넌트]
    D --> J[페이지 SEO 정보]
```

## 4. 국제화(i18n) 처리 흐름

```mermaid
graph TD
    A[URL 요청] --> B[언어 코드 추출]
    B --> C{지원 언어?}
    C -->|No| D[404 에러]
    C -->|Yes| E[동적 언어 설정]
    E --> F[prefix 전략 적용]
    F --> G[페이지 라우팅]
    G --> H[템플릿 렌더링]
```

## 5. 페이지 렌더링 흐름

```mermaid
graph TD
    A[app.vue] --> B[SSR gameData 로드]
    B --> C[스토어에 저장]
    C --> D[SEO 메타 태그 설정]
    D --> E[NuxtLayout 렌더링]
    E --> F[페이지 컴포넌트]
    F --> G[pageData 로드]
    G --> H[Section 컴포넌트]
    H --> I[템플릿 렌더링]
```

## 6. 템플릿 시스템 구조

```mermaid
graph TD
    A[Section 컴포넌트] --> B[templates 배열 순회]
    B --> C[templateRegistry 조회]
    C --> D{템플릿 코드 매칭}
    D -->|GR_VISUAL_01| E[GrVisual01]
    D -->|GR_VISUAL_02| F[GrVisual02]
    D -->|GR_VISUAL_03| G[GrVisual03]
    E --> H[동적 컴포넌트 렌더링]
    F --> H
    G --> H
    H --> I[TemplatesBackground]
    I --> J[최종 UI 출력]
```

## 7. 전체 요청-응답 사이클

```mermaid
sequenceDiagram
    participant U as 사용자
    participant S as 서버
    participant M as 미들웨어
    participant A as API
    participant C as 컴포넌트

    U->>S: 요청 (game.onstove.com/ko/about/story)
    S->>M: gameAlias.ts 실행
    M->>M: 게임 별칭 추출 (game)
    M->>A: 게임 데이터 API 호출
    A-->>M: 게임 정보 응답
    M->>M: event.context에 저장
    S->>C: 페이지 컴포넌트 로드
    C->>A: 페이지 데이터 API 호출
    A-->>C: 템플릿 데이터 응답
    C->>C: 템플릿 렌더링
    C-->>S: HTML 생성
    S-->>U: 최종 응답
```

## 8. API 통신 구조

```mermaid
graph LR
    A[게임 데이터 API] --> B[/pub-comm/v1.0/template/game]
    C[페이지 데이터 API] --> D[/pub-comm/v1.0/template/page]
    
    B --> E[game_alias]
    B --> F[lang_code]
    
    D --> G[game_alias]
    D --> H[lang_code]
    D --> I[page_url]
    
    E --> J[게임 기본 정보]
    F --> J
    G --> K[페이지별 템플릿]
    H --> K
    I --> K
```

## 9. 상태 관리 구조

```mermaid
graph TD
    A[Pinia 스토어] --> B[useGameDataStore]
    A --> C[usePageDataStore]
    
    B --> D[gameData]
    B --> E[setGameData]
    B --> F[clearGameData]
    
    C --> G[pageData]
    C --> H[setPageData]
    C --> I[clearPageData]
    
    D --> J[게임 기본 정보]
    D --> K[지원 언어 목록]
    D --> L[SEO 메타 정보]
    
    G --> M[템플릿 배열]
    G --> N[페이지 컴포넌트]
    G --> O[페이지 SEO 정보]
```

## 10. 컴포넌트 계층 구조

```mermaid
graph TD
    A[app.vue] --> B[NuxtLayout]
    B --> C[LayoutDefaultHeader]
    B --> D[NuxtPage]
    B --> E[LayoutDefaultFooter]
    
    D --> F[페이지 컴포넌트]
    F --> G[Section]
    G --> H[TemplatesBackground]
    G --> I[동적 템플릿 컴포넌트]
    
    I --> J[GrVisual01]
    I --> K[GrVisual02]
    I --> L[GrVisual03]
    
    A --> M[MoleculesLoadingFull]
    A --> N[MoleculesLoadingLocal]
```