177 lines
4.1 KiB
Markdown
177 lines
4.1 KiB
Markdown
# 전체 로직 흐름도
|
|
|
|
## 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: 요청 (l9.onstove.com/ko/about/story)
|
|
S->>M: gameAlias.ts 실행
|
|
M->>M: 게임 별칭 추출 (l9)
|
|
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]
|
|
```
|