# 게시판(Board) 개발 계획

> FastAPI + Vue 3 + PostgreSQL (외부 설치)

---

## 1. 작업 범위 개요

기존 hello-web 프로젝트에 **게시판(CRUD)** 기능을 추가한다.

- **PostgreSQL**은 외부에 설치하여 연결
- **백엔드**: FastAPI + SQLAlchemy(async) + asyncpg
- **프론트엔드**: Vue 3 (Options API) 게시판 페이지 추가

---

## 2. PostgreSQL 준비 (외부)

### 2.1. PostgreSQL 설치 및 DB 생성

```sql
CREATE DATABASE helloboard;
CREATE USER hello_user WITH PASSWORD 'your_password';
GRANT ALL PRIVILEGES ON DATABASE helloboard TO hello_user;
```

### 2.2. 연결 정보 (예시)

```
DB_HOST=localhost
DB_PORT=5432
DB_NAME=helloboard
DB_USER=hello_user
DB_PASSWORD=your_password
```

### 예상 프롬프트

> macOS에 PostgreSQL이 설치되어 있지 않습니다. Homebrew로 PostgreSQL을 설치하고, `helloboard` 데이터베이스와 `hello_user` 사용자를 생성하는 스크립트를 작성해주세요.

---

## 3. 백엔드 작업

### Step 1: 의존성 추가

`backend/requirements.txt` 에 패키지 추가:
- `sqlalchemy[asyncio]` — ORM
- `asyncpg` — PostgreSQL async driver
- `psycopg2-binary` — sync driver (마이그레이션 등)
- `alembic` — DB 마이그레이션 (선택)

### 예상 프롬프트

> FastAPI 프로젝트에 PostgreSQL을 연결하려고 합니다. `requirements.txt`에 SQLAlchemy(asyncio), asyncpg, alembic을 추가하고, `backend/database.py`에 async DB 세션 설정 코드를 작성해주세요. DB 연결 정보는 환경변수에서 읽도록 해주세요.

---

### Step 2: DB 모델 정의

`backend/models.py` — 게시글 모델

```python
# BoardPost 모델
# - id, title, content, author, created_at, updated_at
```

### 예상 프롬프트

> 게시판을 위한 SQLAlchemy 모델을 `backend/models.py`에 정의해주세요. 필드는 id(INTEGER PK), title(VARCHAR), content(TEXT), author(VARCHAR), created_at, updated_at을 포함합니다. async 세션을 사용하는 Base를 상속받아주세요.

---

### Step 3: API 엔드포인트

`backend/routers/board.py` — 게시판 CRUD API

| 메서드 | 경로 | 설명 |
|--------|------|------|
| GET | `/api/boards` | 목록 조회 (페이징) |
| GET | `/api/boards/{id}` | 상세 조회 |
| POST | `/api/boards` | 글 작성 |
| PUT | `/api/boards/{id}` | 글 수정 |
| DELETE | `/api/boards/{id}` | 글 삭제 |

### 예상 프롬프트

> FastAPI 게시판 CRUD 라우터를 `backend/routers/board.py`에 작성해주세요. Pydantic 스키마는 `backend/schemas.py`에 분리하고, async SQLAlchemy 세션을 사용해주세요. 목록 조회는 페이지네이션(page, per_page)을 지원해야 합니다. `backend/app.py`에 라우터를 include 시켜주세요.

---

### Step 4: CORS 업데이트 (필요시)

외부 PostgreSQL 연결과는 무관하지만, 개발 환경에서 API 호출이 정상 동작하도록 기존 CORS 설정 유지.

---

## 4. 프론트엔드 작업

### Step 1: 게시판 페이지 생성

| 파일 | 설명 |
|------|------|
| `BoardListPage.vue` | 게시글 목록 (테이블/카드) |
| `BoardDetailPage.vue` | 게시글 상세 + 목록으로 돌아가기 |
| `BoardWritePage.vue` | 글 작성/수정 폼 |

### 예상 프롬프트

> Vue 3 Options API 스타일로 게시판 페이지 3개를 `frontend/src/pages/` 아래에 생성해주세요.
> - `BoardListPage.vue`: 게시글 목록 (테이블, 페이지네이션 버튼)
> - `BoardDetailPage.vue`: 게시글 상세 (제목, 작성자, 내용, 날짜)
> - `BoardWritePage.vue`: 글 작성 폼 (제목 input, 내용 textarea, 저장 버튼)
> API 호출은 fetch를 사용하고, `/api/boards` 엔드포인트를 호출합니다.

---

### Step 2: 라우터 등록

`frontend/src/router.js` 에 게시판 경로 추가

| 경로 | 페이지 |
|------|--------|
| `/boards` | BoardListPage |
| `/boards/:id` | BoardDetailPage |
| `/boards/new` | BoardWritePage |
| `/boards/:id/edit` | BoardWritePage (수정 모드) |

### 예상 프롬프트

> `frontend/src/router.js`에 게시판 페이지 4개 경로를 추가해주세요: `/boards`, `/boards/new`, `/boards/:id`, `/boards/:id/edit`. 기존 Home, About 경로는 유지하고, BoardWritePage는 new와 edit을 모두 처리할 수 있도록 props로 구분해주세요.

---

### Step 3: 네비게이션에 링크 추가

`frontend/src/App.vue` 네비게이션에 "게시판" 링크 추가

### 예상 프롬프트

> `frontend/src/App.vue`의 네비게이션 메뉴에 `<router-link to="/boards">게시판</router-link>`를 추가해주세요. 기존 홈, 소개 링크 스타일과 동일하게 적용합니다.

---

## 5. 실행 순서

```
1. PostgreSQL 설치 및 DB/사용자 생성 (외부)
2. requirements.txt 업데이트 + pip install
3. database.py, models.py, schemas.py 작성
4. board.py 라우터 작성 + app.py에 등록
5. 프론트엔드 페이지 3개 생성
6. router.js에 경로 등록
7. App.vue 네비게이션 업데이트
8. 서버 실행 후 테스트
```

---

## 6. 검증 방법

| 항목 | 방법 |
|------|------|
| DB 연결 | `GET /api/boards` → 빈 배열 `[]` |
| 글 작성 | POST `/api/boards` → 201 + 생성된 글 |
| 목록 조회 | GET `/api/boards?page=1&per_page=10` |
| 상세 조회 | GET `/api/boards/1` → 단일 글 객체 |
| 글 수정 | PUT `/api/boards/1` → 수정된 글 |
| 글 삭제 | DELETE `/api/boards/1` → 204 No Content |
| 프론트 렌더링 | localhost:5173/boards 접속 → 목록 표시 |

### 예상 프롬프트

> 게시판 API를 curl로 간단히 테스트하는 스크립트를 작성해주세요. 글 작성, 목록 조회, 상세 조회, 수정, 삭제를 순서대로 테스트합니다.