CCGP-ui

메인 인덱스 | CCG-Platform | GitHub

이 문서는 CCGP-ui 레포의 핵심 정보와 포트폴리오 메모를 한 파일로 정리한 노트입니다.

주요 목적

Cloud Container Gaming Platform(CCGP)을 위한 React 기반 프론트엔드 웹 애플리케이션입니다. 랜딩 페이지, 사용자 인증 플로우, 그리고 게임 컨테이너 워크스페이스 관리를 위한 대시보드 인터페이스를 제공합니다.

주요 기술 스택

카테고리	스택
프레임워크	React 19
빌드 도구	Vite 7
스타일링	styled-components 6
라우팅	react-router-dom 7
HTTP 클라이언트	axios
인증	JWT (jwt-decode)

포트폴리오 메모

이 레포에는 React 19, Vite 7, styled-components 기반 프론트엔드 구성이 들어 있습니다. 랜딩 페이지, 인증 흐름, 워크스페이스 대시보드를 한 코드베이스에서 다루고 있어서 제가 프론트엔드에서 맡은 범위를 설명할 때 기준점으로 삼을 수 있습니다.

주요 파일

1. src/App.jsx - 라우팅 및 테마를 포함한 메인 앱
2. src/main.jsx - React 진입점
3. src/components/hook/base.jsx - Axios HTTP 클라이언트 설정
4. src/components/hook/auth/HookLogin.jsx - 인증 훅
5. src/components/hook/workspace/CreateWorkspace.jsx - 워크스페이스 생성
6. src/page/landing/Landing.jsx - 랜딩 페이지
7. src/page/vm/Vm.jsx - 대시보드 컴포넌트
8. .github/workflows/ - CI/CD 설정
9. vite.config.js - 빌드 설정
10. package.json - 의존성 및 스크립트

아키텍처 유형

컴포넌트 기반 아키텍처를 가진 단일 페이지 애플리케이션(SPA)입니다. 특징:

• 테마 styled-components
• JWT 기반 인증
• RESTful API 통합
• 모듈식 페이지 구조

주요 기능

• 다크 테마의 반응형 디자인
• 자동 갱신이 포함된 JWT 기반 인증
• GitHub Actions CI/CD for GHCR
• 잘 구성된 컴포넌트 계층 구조

관련 레포지토리

• portal-backend (API 백엔드)
• PodManager (컨테이너 오케스트레이션)

참고사항

• CI/CD 파이프라인이 함께 보입니다.
• 인증과 대시보드 흐름이 분리된 구조를 확인할 수 있습니다.
• portal-backend, PodManager와 함께 읽으면 서비스 흐름이 더 분명합니다.