# 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` |