diff --git a/README.md b/README.md index ef8ae3f..4ace5a3 100644 --- a/README.md +++ b/README.md @@ -1,72 +1,87 @@

- Codigdex 로고 + Codigdex 로고

Codigdex

- 버그 몬스터를 물리치고, 캡처 퀴즈를 통과해 나만의 코딩 도감을 완성하는 픽셀 아트 교육 게임 + 버그 몬스터와 코드로 싸우고, 퀴즈로 포획해 나만의 개발 도감을 완성하는 픽셀 아트 교육 게임

+ Release v1.0.0 CI PR policy - Claude Code Review - Live demo + Play Codigdex License

-## Codigdex란? +

+ 게임 플레이 + · + 게임 디자인 + · + Career Path 설계 +

+ +## 게임 소개 -Codigdex는 코딩 개념을 읽는 데서 끝나지 않습니다. 코드 배틀에서 버그 몬스터를 쓰러뜨리고 짧은 캡처 퀴즈로 이해도를 확인하면, 결과에 따라 브론즈·실버·골드 카드가 개인 도감에 등록됩니다. 낮은 등급의 카드도 다시 도전해 골드로 성장시킬 수 있습니다. +Codigdex는 코딩 개념을 읽는 데서 끝나지 않습니다. 코드 블록을 올바른 순서로 조립해 버그 몬스터를 쓰러뜨리고, 캡처 퀴즈에서 60% 이상 정답을 맞히면 몬스터가 개인 도감에 등록됩니다. -플레이어는 서버 구름 위 픽셀 마을 `Codeville`의 주니어 개발자로 시작합니다. 튜토리얼과 Git·Linux 공통 과정을 마친 뒤 원하는 직업으로 전직하고, 직업별 상세 지도에서 기술 지역을 돌며 도감을 확장합니다. +플레이어는 서버 구름 위 픽셀 마을 `Codeville`의 주니어 개발자로 시작합니다. 튜토리얼을 지나 Git과 Linux 공통 과정을 수료한 뒤 다섯 가지 직업 중 하나로 전직하고, 직업별 상세 지도의 원판과 랜드마크를 통해 다음 기술 지역을 탐색합니다.

- 필드 가이드를 든 주니어 개발자와 버그 몬스터 지역 + 필드 가이드를 든 주니어 개발자와 버그 몬스터 지역

-## 게임 진행 구조 +## V1.0.0 플레이 흐름 ```text -튜토리얼 - → 주니어 공통 Path (Git → Linux) +튜토리얼: 반복문의 숲 + → CH.01 Git: 기록의 들판 (Lv.1~Lv.5) + → CH.02 Linux: 셸 동굴 (Lv.1~Lv.5) → 1차 전직 선택 - → 직업별 상세 지도 - → 기술 지역 → 코드 배틀 → 캡처 퀴즈 → 도감 등록 - → ??? (두 직업 Path 완성 후 열리는 2차 전직) + → 직업별 상세 지도와 기술 지역 탐색 + → ??? 미래 몬스터와 2차 전직 Path 미리 보기 ``` -현재 직업 Path는 웹 프론트엔드, 백엔드, DevOps, 데이터 엔지니어, 데이터 분석가로 구성됩니다. 전직 후에는 공통 과정의 루피 대신 각 직업의 선배 NPC가 길을 안내합니다. 향후 풀스택 엔지니어, ML Developer, 플랫폼 엔지니어/SRE 같은 2차 전직은 처음부터 `???`로 보이되, 관련된 두 1차 직업 도감을 완성해야 정체와 조건이 드러납니다. +V1.0.0에는 튜토리얼 1종과 Git·Linux 각 5종, 총 11종의 포획 가능한 몬스터가 들어 있습니다. 전문 기술 지역의 배틀·퀴즈와 실제 2차 전직 해금은 다음 버전에서 이어집니다. + +## 주요 기능 + +| 영역 | V1.0.0 제공 내용 | +|---|---| +| 코드 배틀 | 섞인 코드 블록을 올바른 순서로 조립하는 전투 | +| 캡처 퀴즈 | 몬스터 레벨에 따라 3~7문항 출제, 60% 이상 정답 시 포획 | +| Codigdex | 포획 카드, 설명, 코드 예제, 챕터 진행도 확인 | +| 챕터 진행 | Lv.1부터 Lv.5까지 순차 해금하고 다음 챕터 개방 | +| 1차 전직 | 프론트엔드, 백엔드, DevOps, 데이터 엔지니어, 데이터 분석가 | +| Career Map | 지도 속 원판과 연결된 랜드마크 전체를 상세 지역 진입점으로 사용 | +| 직업별 NPC | 전직 후 선택한 직업의 선배가 상세 지도를 안내 | +| 미래 콘텐츠 | 전문 몬스터와 2차 전직을 `???` 슬롯 및 Path로 미리 표시 | +| 저장 | 브라우저 로컬 저장 v2, 기존 v1 진행 기록 자동 마이그레이션 | + +미래 몬스터 슬롯은 아직 포획할 수 없으며 현재 도감 완성률에도 포함되지 않습니다.

- 기술 지역을 따라 이동하는 DevOps 상세 지도 + 원판과 랜드마크를 따라 기술 지역으로 이동하는 DevOps 상세 지도

-## 현재 구현 - -- 튜토리얼, CH.01 Git, CH.02 Linux의 퀘스트 → 배틀 → 퀴즈 → 포획 루프 -- 챕터마다 Lv.1~Lv.5로 이어지는 몬스터와 순차 해금 -- 정답률에 따른 브론즈·실버·골드 카드와 골드 재도전 -- 완성도와 챕터 마스터 배지를 보여 주는 Codigdex 화면 -- 5개 1차 직업 선택, 직업별 월페이퍼 지도와 기술 지역 표시 -- 전직에 따라 달라지는 직업별 가이드 NPC -- `???`로 미리 보이는 2차 전직 슬롯 -- 아직 배틀이 없는 전문 기술 몬스터를 `???` 도감 슬롯으로 미리 표시 -- 브라우저 로컬 저장 v2와 기존 v1 저장 데이터 자동 마이그레이션 -- Phaser와 분리된 `lib/domain` 규칙, Vitest 단위·통합 테스트 +## Career Path -직업별 전문 챕터의 몬스터 아트와 지도는 준비되어 있으며, 각 지역의 배틀·퀴즈 콘텐츠는 순차 연결 중입니다. 상세 커리큘럼과 2차 전직 해금 원칙은 [직업 전직 Path 설계](docs/CAREER_PATH_DESIGN.md)를 참고하세요. +| 1차 직업 | 전문 지도에 표시되는 주요 기술 | +|---|---| +| 웹 프론트엔드 개발자 | HTML/CSS, JavaScript, 브라우저·HTTP, React, 테스트 | +| 백엔드 개발자 | HTTP/API, 서버 프레임워크, SQL, 인증·보안, 네트워크, Docker | +| DevOps 엔지니어 | 네트워크, Docker, CI/CD, Kubernetes, Cloud·IaC, 모니터링 | +| 데이터 엔지니어 | Python, SQL·모델링, 데이터 파이프라인, Docker, 오케스트레이션 | +| 데이터 분석가 | SQL, 기초 통계, 시각화, BI 도구, 분석용 Python | -## 기술 스택 +전직 화면에는 1차 직업에서 미래 2차 전직으로 이어지는 계보가 표시됩니다. 풀스택 엔지니어, ML Developer, 플랫폼 엔지니어/SRE 등의 이름과 실제 해금 조건은 아직 `???`로 잠겨 있습니다. -- Next.js 16, React 19 -- Phaser 4 -- TypeScript -- Vitest -- Vercel +## 로컬 실행 -## 시작하기 +요구 사항: Node.js 20 이상, npm ```bash cd web @@ -74,7 +89,7 @@ npm install npm run dev ``` -브라우저에서 [http://localhost:3001](http://localhost:3001)을 엽니다. +[http://localhost:3001](http://localhost:3001)에서 게임을 실행합니다. ```bash npm run test @@ -82,15 +97,20 @@ npm run lint npm run build ``` -## 프로젝트 구조 +## 기술 스택과 구조 + +- Next.js 16 · React 19 · TypeScript +- Phaser 4 +- Vitest +- Vercel ```text web/ ├─ app/ Next.js 진입점 -├─ lib/domain/ 챕터, 도감, 직업과 진로 규칙 -├─ lib/phaser/scenes/ Phaser 화면 -├─ lib/phaser/worldMap/ 월드맵, 상세 진로 지도와 상호작용 -├─ lib/phaser/save/ 버전별 저장 스키마와 마이그레이션 +├─ lib/domain/ 챕터·퀴즈·도감·직업 규칙 +├─ lib/phaser/scenes/ 게임 장면 +├─ lib/phaser/worldMap/ 월드맵·Career Map·진입 영역 +├─ lib/phaser/save/ 저장 스키마와 마이그레이션 ├─ public/assets/ │ ├─ careers/ 직업 초상과 전직 후 NPC │ ├─ monsters/ 챕터별 도감 몬스터 @@ -99,7 +119,14 @@ web/ └─ test/ 도메인·Phaser 테스트 ``` -저장 데이터는 `progress`, `player`, `ui` 영역을 분리합니다. 도감 카드에는 몬스터 ID와 포획 시각만 저장하고 표시 정보는 현재 챕터 정의에서 다시 구성하므로, 콘텐츠가 바뀌어도 오래된 저장 데이터가 화면을 오염시키지 않습니다. 미래 몬스터의 `???` 슬롯은 현재 도감 완성률에서 제외하며, 2차 전직 해금 여부 역시 별도 플래그가 아니라 포획 기록에서 계산하도록 확장할 예정입니다. +저장 데이터는 `progress`, `player`, `ui`로 분리됩니다. 도감에는 몬스터 ID와 포획 시각만 저장하고 표시 정보와 Path 진행도는 현재 콘텐츠 정의에서 다시 계산합니다. + +## 다음 버전 + +- 전문 기술 지역별 코드 배틀과 캡처 퀴즈 +- 포획 결과에 따른 브론즈·실버·골드 카드와 재도전 업그레이드 +- 두 개의 1차 직업 Path 완성으로 해금되는 실제 2차 전직 +- 2차 전직 전용 통합 챕터, 초상과 도감 배지 ## 문서 @@ -108,24 +135,21 @@ web/ - [프로젝트 및 PR 정책](AGENTS.md) - [Git 작업 흐름 (한국어)](docs/kor/GIT_WORKFLOW.md) / [Git workflow (English)](docs/eng/GIT_WORKFLOW.md) - [기여 가이드](CONTRIBUTING.md) +- [보안 정책](SECURITY.md) ## 기여 -기능 브랜치는 `feat/` 형식을 사용하고 `develop`으로 Draft PR을 엽니다. 저장소 자동화가 Linear `COD-n` 이슈와 GitHub 미러 이슈를 생성·연결하며, 모든 PR은 해당 이슈 쌍과 CI 검증을 통과해야 합니다. 자세한 흐름과 수동 복구 절차는 [AGENTS.md의 PR 정책](AGENTS.md#pr--issue-policy)을 확인하세요. +기능 브랜치는 `feat/` 형식을 사용합니다. 브랜치를 push하면 저장소 자동화가 Linear `COD-n` 이슈, GitHub 미러 이슈, `develop` 대상 Draft PR을 생성합니다. 모든 PR은 이슈 연결과 CI 정책을 통과해야 하며 `main`에는 `develop`에서만 병합합니다. 전체 절차와 수동 복구 방법은 [AGENTS.md의 PR 정책](AGENTS.md#pr--issue-policy)을 확인하세요.
새 저장소 자동화 설정 체크리스트 -이 프로젝트를 템플릿으로 사용하는 새 저장소에서는 다음 항목을 한 번만 설정합니다. - -1. `develop` 브랜치를 만들고 기본 PR 대상으로 사용합니다. +1. `develop` 브랜치를 만들고 기능 PR의 기본 대상으로 사용합니다. 2. Claude GitHub App을 설치합니다. -3. Actions secrets에 `CLAUDE_CODE_OAUTH_TOKEN`(또는 `ANTHROPIC_API_KEY`), `SLACK_WEBHOOK_URL`, `LINEAR_API_KEY`, `GH_PAT`을 등록합니다. -4. `GH_PAT`은 해당 저장소의 Contents 읽기, Issues 쓰기, Pull requests 쓰기 권한을 가진 fine-grained PAT를 사용합니다. +3. Actions secrets에 `CLAUDE_CODE_OAUTH_TOKEN` 또는 `ANTHROPIC_API_KEY`, `SLACK_WEBHOOK_URL`, `LINEAR_API_KEY`, `GH_PAT`을 등록합니다. +4. `GH_PAT`에는 Contents 읽기, Issues 쓰기, Pull requests 쓰기 권한을 부여합니다. 5. Actions variables에 `LINEAR_PROJECT_SLUG`, `LINEAR_PROJECT_NAME`을 등록합니다. -6. `develop`과 `main`의 브랜치 보호 규칙에서 `validate-flow`, `review` 검사를 요구하도록 설정합니다. - -설정 후에는 `feat/` push 시 Linear/GitHub 이슈 쌍과 Draft PR 생성, PR 정책 검사, 리뷰, merge 알림이 자동으로 실행됩니다. +6. 브랜치 보호 규칙에서 `validate-flow`와 `review` 검사를 요구하도록 설정합니다.
diff --git a/docs/images/battle.png b/docs/images/battle.png new file mode 100644 index 0000000..d378e57 Binary files /dev/null and b/docs/images/battle.png differ diff --git a/docs/images/codigdex.png b/docs/images/codigdex.png new file mode 100644 index 0000000..3cc0274 Binary files /dev/null and b/docs/images/codigdex.png differ diff --git a/docs/images/intro.png b/docs/images/intro.png new file mode 100644 index 0000000..4e02503 Binary files /dev/null and b/docs/images/intro.png differ diff --git a/docs/images/path-map.png b/docs/images/path-map.png new file mode 100644 index 0000000..87d6df5 Binary files /dev/null and b/docs/images/path-map.png differ diff --git a/docs/images/world-map.png b/docs/images/world-map.png new file mode 100644 index 0000000..508b381 Binary files /dev/null and b/docs/images/world-map.png differ diff --git a/web/package-lock.json b/web/package-lock.json index ce97216..d42c0f6 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -1,12 +1,12 @@ { "name": "codigdex-game", - "version": "0.1.0", + "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "codigdex-game", - "version": "0.1.0", + "version": "1.0.0", "dependencies": { "next": "16.3.4", "phaser": "^4.2.1", diff --git a/web/package.json b/web/package.json index ec9a92b..bcd1309 100644 --- a/web/package.json +++ b/web/package.json @@ -1,6 +1,6 @@ { "name": "codigdex-game", - "version": "0.1.0", + "version": "1.0.0", "private": true, "scripts": { "dev": "next dev -p 3001",