테트리스 게임

사용자가 테트리스 게임을 만들어 달라고 요청했습니다. 먼저 프로젝트의 구조와 개요를 파악해야 합니다. docs/프로젝트-개요.md와 docs/개발-계획.md를 읽어보겠습니다.

새로운 테트리스 프로젝트입니다. web/src에는 App.jsx와 main.jsx만 있습니다. 기존 코드를 확인하고, 테트리스 게임을 만들어야 합니다. 먼저 현재 코드를 확인하겠습니다.

이제 테트리스 게임을 만들어야 합니다. 계획을 세워봅시다. 1. 테트리스 게임 설계 문서 작성 (docs/서비스-기획.md, docs/개발-계획.md) 2. 테트리스 게임 컴포넌트 구현 (App.jsx 수정) 테트리스 게임의 핵심 기능: - 10x20 보드 - 7가지 테트로미노 (I, O, T, S, Z, J, L) - 이동, 회전, 하드 드랍 - 줄 완성 시 제거 및 점수 - 게임 오버 - 키보드 컨트롤 순수 React로 구현하고, 별도 API는 필요 없을 것 같습니다. 단일 파일로 App.jsx에 구현하거나 컴포넌트를 분리할 수 있습니다. 복잡도를 고려해 단일 파일로 구현하겠습니다. 3단계 이상이므로 set_plan을 사용합니다. 계획: 1. 기획 문서 작성 (docs/서비스-기획.md, docs/개발-계획.md) 2. 테트리스 게임 로직 구현 (App.jsx) 3. 개발 서버 확인 및 디버깅

1단계 시작: 기획 문서 작성

1단계 완료. 2단계: 테트리스 게임 구현. App.jsx를 수정해야 합니다. 테트리스 게임을 React로 구현할 때 고려할 사항: - 보드는 10x20 2D 배열. 각 셀은 null 또는 색상 문자열. - 현재 블록은 { type, rotation, x, y } 로 관리. - 7종 테트로미노의 모양 정의 (각 회전 상태별). - 게임 루프: setInterval로 블록이 한 칸씩 내려감. - 충돌 감지: 블록이 보드 경계를 벗어나거나 이미 채워진 셀과 겹치면 이동 불가. - 줄 제거: 가득 찬 줄을 찾아 제거하고 위의 줄들을 아래로 내림. - 키보드 이벤트: keydown 리스너. 색상: - I: #00f0f0 (cyan) - O: #f0f000 (yellow) - T: #a000f0 (purple) - S: #00f000 (green) - Z: #f00000 (red) - J: #0000f0 (blue) - L: #f0a000 (orange) 테트로미노 회전 상태: SRS(Super Rotation System)를 간단히 구현하거나, 각 블록의 4가지 회전 상태를 직접 정의. 간단하게 각 블록별로 회전 상태를 배열로 정의하겠습니다. 구현할 코드를 작성하겠습니다. 블록 모양 정의 (각 타입별 4개의 회전 상태): - I: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] 등... 실제로는 각 블록의 모양을 좌표 리스트로 정의하는 것이 더 간편합니다: 예: I 블록의 기본 모양 = [[0,0],[1,0],[2,0],[3,0]] (또는 행렬로) 일반적인 접근은 각 블록을 NxN 행렬로 정의하고 회전 시 행렬을 변환하는 것입니다. 간단히 각 테트로미노의 4가지 회전 상태를 미리 정의하겠습니다. 각 블록 타입별 shapes 배열: - I: [ [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]], [[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0]], [[0,0,0,0],[0,0,0,0],[1,1,1,1],[0,0,0,0]], [[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]] ] - O: [ [[1,1],[1,1]], [[1,1],[1,1]], [[1,1],[1,1]], [[1,1],[1,1]] ] - T: [ [[0,1,0],[1,1,1],[0,0,0]], [[0,1,0],[0,1,1],[0,1,0]], [[0,0,0],[1,1,1],[0,1,0]], [[0,1,0],[1,1,0],[0,1,0]] ] - S: [ [[0,1,1],[1,1,0],[0,0,0]], [[0,1,0],[0,1,1],[0,0,1]], [[0,0,0],[0,1,1],[1,1,0]], [[1,0,0],[1,1,0],[0,1,0]] ] - Z: [ [[1,1,0],[0,1,1],[0,0,0]], [[0,0,1],[0,1,1],[0,1,0]], [[0,0,0],[1,1,0],[0,1,1]], [[0,1,0],[1,1,0],[1,0,0]] ] - J: [ [[1,0,0],[1,1,1],[0,0,0]], [[0,1,1],[0,1,0],[0,1,0]], [[0,0,0],[1,1,1],[0,0,1]], [[0,1,0],[0,1,0],[1,1,0]] ] - L: [ [[0,0,1],[1,1,1],[0,0,0]], [[0,1,0],[0,1,0],[0,1,1]], [[0,0,0],[1,1,1],[1,0,0]], [[1,1,0],[0,1,0],[0,1,0]] ] 이제 전체 App.jsx를 작성하겠습니다. 주의: 기존 파일은 edit_file로 부분 치환해야 하지만, 내용이 완전히 바뀌므로 edit_file로 전체를 바꾸는 것이 맞습니다. old_string은 현재 파일 전체 내용을 사용해야 합니다. 그런데 코드가 길어질 것 같으니, 먼저 현재 App.jsx 전체 내용을 old_string으로, 새 내용을 new_string으로 하는 edit_file을 사용하겠습니다.

이제 App.jsx를 테트리스 게임으로 교체합니다. edit_file을 사용합니다.

2단계 완료. 3단계: 로그 확인 및 디버깅. 먼저 read_logs로 오류가 없는지 확인합니다.

Vite HMR이 정상적으로 업데이트를 감지했습니다. 오류가 없습니다. 개발 서버도 정상 작동 중입니다. 3단계 완료. 모든 작업이 끝났습니다.