feat: dompurify 플러그인설치, 푸터 추가

flow-diagram.md

@@ -0,0 +1,176 @@
+# 전체 로직 흐름도
+
+## 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]
+```