180 lines
8.0 KiB
Markdown
180 lines
8.0 KiB
Markdown
# CRUD 게시판 페이지 개발 계획
|
|
|
|
> 기존 읽기 전용(`GET /api/samples`) → **Create, Read, Update, Delete** 확장
|
|
|
|
---
|
|
|
|
## 1. 작업 개요
|
|
|
|
현재 `SampleListPage.vue`는 단순 목록 조회만 가능. 아래 작업으로 완전한 CRUD 게시판으로 확장한다.
|
|
|
|
| 동작 | HTTP | 엔드포인트 | 현재 상태 |
|
|
|------|------|-----------|-----------|
|
|
| 목록 조회(List) | `GET` | `/api/samples` | ✅ 완료 |
|
|
| 상세 조회(Read) | `GET` | `/api/samples/{id}` | ❌ 없음 |
|
|
| 생성(Create) | `POST` | `/api/samples` | ❌ 없음 |
|
|
| 수정(Update) | `PUT` | `/api/samples/{id}` | ❌ 없음 |
|
|
| 삭제(Delete) | `DELETE` | `/api/samples/{id}` | ❌ 없음 |
|
|
|
|
---
|
|
|
|
## 2. 작업 단계
|
|
|
|
### Step 1: 백엔드 — API 완성
|
|
|
|
**파일:** `backend/schemas.py`
|
|
|
|
- `SampleCreate(title, content, author)` — POST 요청 바디
|
|
- `SampleUpdate(title, content, author)` — PUT 요청 바디 (모두 optional)
|
|
|
|
**파일:** `backend/routers/samples.py`
|
|
|
|
기존 `list_samples` 유지 + 아래 4개 엔드포인트 추가:
|
|
|
|
| 메서드 | 경로 | 함수명 | 설명 |
|
|
|--------|------|--------|------|
|
|
| `GET` | `/api/samples/{id}` | `get_sample` | 단건 조회, 없으면 404 |
|
|
| `POST` | `/api/samples` | `create_sample` | 새 글 등록, 생성된 레코드 반환 |
|
|
| `PUT` | `/api/samples/{id}` | `update_sample` | 수정, 없으면 404 |
|
|
| `DELETE` | `/api/samples/{id}` | `delete_sample` | 삭제, 없으면 404 |
|
|
|
|
**예상 프롬프트:**
|
|
|
|
> `backend/schemas.py`에 `SampleCreate`(title, content, author 필수)와 `SampleUpdate`(모든 필드 optional) Pydantic 모델을 추가해주세요. `backend/routers/samples.py`에 GET/POST/PUT/DELETE `/api/samples` 및 `/api/samples/{id}` 엔드포인트를 구현해주세요. 상세 조회/수정/삭제는 id로 단건 처리하고, 없을 경우 HTTP 404를 반환해야 합니다.
|
|
|
|
---
|
|
|
|
### Step 2: 프론트엔드 — 상세보기 페이지
|
|
|
|
**파일:** `frontend/src/pages/SampleDetailPage.vue`
|
|
|
|
- 경로: `/samples/:id`
|
|
- `mounted()`에서 `fetch('/api/samples/{id}')` 호출
|
|
- 제목, 내용, 작성자, 생성일시 표시
|
|
- "목록으로", "수정", "삭제" 버튼
|
|
- 삭제 버튼 → confirm → `fetch('DELETE /api/samples/{id}')` → 목록 이동
|
|
|
|
**예상 프롬프트:**
|
|
|
|
> `frontend/src/pages/SampleDetailPage.vue`를 Vue 3 Options API로 만들어주세요. URL 파라미터 `:id`로 단건 조회(GET /api/samples/{id})하여 제목, 내용, 작성자, 생성일시를 표시합니다. 하단에 "목록으로", "수정", "삭제" 버튼을 두고, 삭제는 confirm 후 DELETE 요청 후 /samples로 이동합니다.
|
|
|
|
---
|
|
|
|
### Step 3: 프론트엔드 — 생성/수정 폼 페이지
|
|
|
|
**파일:** `frontend/src/pages/SampleFormPage.vue`
|
|
|
|
- 경로: `/samples/new` (생성), `/samples/:id/edit` (수정)
|
|
- `props` 또는 `route.params.id`로 생성/수정 구분
|
|
- `:id` 없음 → 생성 모드 (빈 폼)
|
|
- `:id` 있음 → 수정 모드 (`mounted()`에서 기존 데이터 fetch 후 폼 채움)
|
|
- 필드: 제목(input), 내용(textarea), 작성자(input)
|
|
- 저장 버튼 → POST 또는 PUT → 목록(/samples) 이동
|
|
|
|
**예상 프롬프트:**
|
|
|
|
> `frontend/src/pages/SampleFormPage.vue`를 Vue 3 Options API로 만들어주세요. `route.params.id` 존재 여부로 생성/수정을 구분합니다. 생성 모드는 빈 폼을 보여주고 POST /api/samples로 전송, 수정 모드는 mounted()에서 GET /api/samples/{id}로 기존 데이터를 불러와 폼을 채우고 PUT /api/samples/{id}로 전송합니다. 저장 성공 후 /samples로 라우트 이동합니다.
|
|
|
|
---
|
|
|
|
### Step 4: 프론트엔드 — 라우터 등록 & 네비게이션
|
|
|
|
**파일:** `frontend/src/router.js`
|
|
|
|
새 경로 3개 등록:
|
|
|
|
| 경로 | 컴포넌트 | 이름 |
|
|
|------|---------|------|
|
|
| `/samples/new` | `SampleFormPage` | SampleNew |
|
|
| `/samples/:id` | `SampleDetailPage` | SampleDetail |
|
|
| `/samples/:id/edit` | `SampleFormPage` | SampleEdit |
|
|
|
|
**파일:** `frontend/src/App.vue`
|
|
|
|
- navigation에 "샘플 목록"은 이미 있음 (유지)
|
|
- 불필요한 nav 링크는 추가하지 않음 (새 글 작성은 목록 페이지에서 버튼으로)
|
|
|
|
---
|
|
|
|
### Step 5: 프론트엔드 — 목록 페이지에 버튼 추가
|
|
|
|
**파일:** `frontend/src/pages/SampleListPage.vue`
|
|
|
|
- 테이블 위 "새 글 작성" 버튼 (`router-link to="/samples/new"`)
|
|
- 테이블 행에 "상세보기" 링크/버튼 추가
|
|
|
|
---
|
|
|
|
## 3. 최종 UI 구성
|
|
|
|
### 목록 페이지 (`/samples`)
|
|
```
|
|
┌──────────────────────────────────────────────────┐
|
|
│ 📋 샘플 데이터 목록 [+ 새 글 작성] │
|
|
├──────┬────────────────────┬──────────┬──────┬─────┤
|
|
│ ID │ 제목 │ 작성자 │ 날짜 │ │
|
|
├──────┼────────────────────┼──────────┼──────┼─────┤
|
|
│ 1 │ 첫 번째 샘플 │ 홍길동 │ ... │[보기]│
|
|
│ 2 │ 두 번째 샘플 │ 김철수 │ ... │[보기]│
|
|
│ ... │ ... │ ... │ ... │ ... │
|
|
└──────┴────────────────────┴──────────┴──────┴─────┘
|
|
```
|
|
|
|
### 상세 페이지 (`/samples/1`)
|
|
```
|
|
┌──────────────────────────────────────────────┐
|
|
│ 첫 번째 샘플 │
|
|
│ │
|
|
│ 작성자: 홍길동 | 2026-05-26 17:55 │
|
|
│ ──────────────────────────────────────────── │
|
|
│ 안녕하세요, 첫 번째 게시글입니다. │
|
|
│ │
|
|
│ [목록] [수정] [삭제] │
|
|
└──────────────────────────────────────────────┘
|
|
```
|
|
|
|
### 생성/수정 폼 (`/samples/new` or `/samples/1/edit`)
|
|
```
|
|
┌──────────────────────────────────────────────┐
|
|
│ 제목 │
|
|
│ [____________________________] │
|
|
│ 작성자 │
|
|
│ [____________________________] │
|
|
│ 내용 │
|
|
│ [____________________________] │
|
|
│ [____________________________] │
|
|
│ │
|
|
│ [저장] [취소] │
|
|
└──────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 4. 실행 순서
|
|
|
|
```
|
|
1. backend/schemas.py — SampleCreate, SampleUpdate 추가
|
|
2. backend/routers/samples.py — POST, GET/:id, PUT/:id, DELETE/:id 구현
|
|
3. uvicorn 재시작 (자동 reload)
|
|
4. curl -X POST localhost:8000/api/samples (API 테스트)
|
|
5. curl -X PUT localhost:8000/api/samples/1 (API 테스트)
|
|
6. curl -X DELETE localhost:8000/api/samples/1 (API 테스트)
|
|
7. frontend/src/pages/SampleDetailPage.vue 생성
|
|
8. frontend/src/pages/SampleFormPage.vue 생성
|
|
9. frontend/src/pages/SampleListPage.vue — 버튼 추가
|
|
10. frontend/src/router.js — 경로 등록
|
|
11. npm run dev → localhost:5173/samples 접속
|
|
```
|
|
|
|
---
|
|
|
|
## 5. 검증 방법
|
|
|
|
| 항목 | 방법 |
|
|
|------|------|
|
|
| 생성 | 폼 작성 후 저장 → 목록에 새 행 표시 |
|
|
| 상세 | 목록에서 "보기" 클릭 → 상세 페이지 표시 |
|
|
| 수정 | 상세에서 "수정" → 폼 수정 → 저장 → 변경 확인 |
|
|
| 삭제 | 상세에서 "삭제" → confirm 확인 → 목록에서 제거 확인 |
|
|
| API 직접 | `curl -X POST -d '{...}' localhost:8000/api/samples` |
|