115 lines
3.5 KiB
Markdown
115 lines
3.5 KiB
Markdown
# 01. 프로젝트 시작 화면과 라우팅
|
|
|
|
## 목표
|
|
|
|
Next.js 14 프로젝트를 초기화하고, 시작 화면에서 문제 풀이 화면(`/play`)으로 이동할 수 있는 가장 작은 앱 흐름을 만든다.
|
|
|
|
## 이번 단계에서 할 것
|
|
|
|
- Next.js 14 App Router 기반 프로젝트를 초기화한다.
|
|
- TypeScript, Tailwind CSS, ESLint를 함께 설정한다.
|
|
- 루트 시작 화면(`/`)을 만든다.
|
|
- 문제 풀이 화면(`/play`)을 만든다.
|
|
- 시작 화면의 버튼 또는 링크를 통해 `/play`로 이동할 수 있게 한다.
|
|
- `pnpm dev`로 앱 실행을 확인한다.
|
|
|
|
## 이번 단계에서 하지 않을 것
|
|
|
|
- 문제 생성 엔진 구현
|
|
- KaTeX 수식 렌더링
|
|
- 답 입력 및 채점 UI
|
|
- Zustand 상태 관리
|
|
- Framer Motion 애니메이션
|
|
- DB, Prisma, Redis, NextAuth 설정
|
|
- 유형 선택 화면
|
|
- 모드 선택 화면
|
|
- 테스트 환경 구성
|
|
|
|
## 수정 또는 생성 예상 파일
|
|
|
|
프로젝트 초기화 후 다음 파일들이 핵심 확인 대상이 된다.
|
|
|
|
- `app/layout.tsx`
|
|
- `app/page.tsx`
|
|
- `app/(game)/play/page.tsx`
|
|
- `app/globals.css`
|
|
- `package.json`
|
|
- `tailwind.config.ts`
|
|
- `tsconfig.json`
|
|
|
|
## 작업 순서
|
|
|
|
1. `pnpm create next-app@14 . --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*"`로 프로젝트를 초기화한다.
|
|
2. 생성된 기본 파일 구조를 확인한다.
|
|
3. `app/page.tsx`를 시작 화면으로 정리한다.
|
|
4. `app/(game)/play/page.tsx`를 추가해 빈 풀이 화면을 만든다.
|
|
5. 시작 화면에서 `/play`로 이동하는 링크를 추가한다.
|
|
6. `pnpm dev`를 실행해 브라우저에서 화면 이동을 확인한다.
|
|
|
|
## 화면 흐름
|
|
|
|
```text
|
|
/ 시작 화면
|
|
- 괄호 음수 분배 연습 시작
|
|
- 시작 버튼 클릭
|
|
|
|
↓
|
|
|
|
/play 풀이 화면
|
|
- 아직 실제 문제는 표시하지 않음
|
|
- 다음 단계에서 문제 생성 엔진과 연결 예정
|
|
```
|
|
|
|
## 시작 화면 초안
|
|
|
|
시작 화면은 기능 소개보다 바로 연습을 시작할 수 있는 간단한 화면으로 만든다.
|
|
|
|
- 제목: 괄호 음수 분배 연습
|
|
- 보조 문구: 괄호 앞의 음수를 분배할 때 부호가 어떻게 바뀌는지 연습한다.
|
|
- 주요 액션: 연습 시작
|
|
|
|
## 풀이 화면 초안
|
|
|
|
`/play` 화면은 아직 실제 문제 풀이 기능을 넣지 않는다.
|
|
|
|
- 제목: 문제 풀이
|
|
- 보조 문구: 다음 단계에서 괄호 음수 분배 문제가 표시된다.
|
|
- 돌아가기 링크: 처음으로
|
|
|
|
## 완료 기준
|
|
|
|
- `pnpm dev`가 정상 실행된다.
|
|
- 브라우저에서 `/` 페이지가 열린다.
|
|
- 시작 화면에서 “연습 시작”을 누르면 `/play`로 이동한다.
|
|
- `/play`에서 “처음으로”를 누르면 `/`로 돌아온다.
|
|
- 콘솔에 명백한 런타임 오류가 없다.
|
|
|
|
## 확인 명령
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
필요하면 초기화 직후 다음 명령으로 정적 검사를 확인한다.
|
|
|
|
```bash
|
|
pnpm lint
|
|
```
|
|
|
|
## 작업 결과
|
|
|
|
- Next.js 14 App Router 프로젝트를 초기화했다.
|
|
- TypeScript, Tailwind CSS, ESLint 설정을 추가했다.
|
|
- `/` 시작 화면을 만들었다.
|
|
- `/play` 풀이 화면을 만들었다.
|
|
- 시작 화면의 “연습 시작” 링크로 `/play` 이동을 확인했다.
|
|
- `/play` 화면의 “처음으로” 링크로 `/` 복귀를 확인했다.
|
|
- `pnpm lint` 통과를 확인했다.
|
|
- `pnpm dev` 실행 후 브라우저에서 화면 이동을 확인했다.
|
|
|
|
## 다음 단계
|
|
|
|
`02-parenthesis-sign-engine.md`에서 괄호 앞 음수 분배 문제 생성 엔진을 만든다.
|
|
|
|
다음 단계에서는 UI를 확장하지 않고, `lib/engine/` 아래에 순수 TypeScript 함수와 단위 테스트를 먼저 추가한다.
|