# DB 연결 및 샘플 데이터 조회 페이지 개발 계획

> PostgreSQL 외부 DB 연결 → 샘플 데이터 INSERT → 웹 페이지에 표시

---

## 1. DB 연결 정보

| 항목 | 값 |
|------|-----|
| 호스트 | `192.168.0.60` |
| 포트 | `5432` |
| 사용자 | `casaos` |
| 비밀번호 | `casaos` |
| 데이터베이스 | `casaos` |

---

## 2. 작업 단계

### Step 1: Python에서 DB 연결 테스트

**목표:** 외부 PostgreSQL에 정상 접속되는지 확인

**할 일:**
- `backend/requirements.txt`에 `asyncpg`, `sqlalchemy[asyncio]` 추가
- `backend/database.py` 생성 — async 엔진, 세션 로컬 설정
- 테스트 스크립트로 연결 확인

#### 예상 프롬프트

> PostgreSQL 연결 정보 (host=192.168.0.60, port=5432, user=casaos, password=casaos, dbname=casaos)로 FastAPI에서 접속할 수 있도록 `backend/database.py`에 async SQLAlchemy 엔진과 세션 팩토리를 설정해주세요. 연결 문자열은 `DATABASE_URL` 환경변수에서 읽되, 기본값으로 위 정보를 사용하게 해주세요.

---

### Step 2: 샘플 데이터 테이블 생성 및 데이터 INSERT

**목표:** 게시판용 샘플 테이블 `samples` 생성 + 3~5건 데이터 삽입

**할 일:**
- `backend/init_db.py` — SQLAlchemy 모델로 테이블 생성 (또는 raw SQL)
- 샘플 데이터 INSERT SQL 실행 스크립트

**테이블 구조 (`samples`):**

| 컬럼 | 타입 | 설명 |
|------|------|------|
| id | SERIAL PK | 자동 증가 |
| title | VARCHAR(200) | 제목 |
| content | TEXT | 내용 |
| author | VARCHAR(100) | 작성자 |
| created_at | TIMESTAMP | 생성일 (기본값 now) |

**샘플 데이터 (INSERT):**

| title | content | author |
|-------|---------|--------|
| 첫 번째 샘플 | 안녕하세요, 첫 번째 게시글입니다. | 홍길동 |
| 두 번째 샘플 | PostgreSQL 외부 연결 테스트 중입니다. | 김철수 |
| 세 번째 샘플 | FastAPI와 Vue로 게시판을 만듭니다. | 이영희 |
| 네 번째 샘플 | 데이터베이스 연동이 잘 되네요! | 박민수 |
| 다섯 번째 샘플 | 화면에 표시되는지 확인해보세요. | 최지은 |

#### 예상 프롬프트

> `backend/models.py`에 `Sample` 모델을 정의해주세요. 필드는 id(INTEGER PK, autoincrement), title(VARCHAR 200), content(TEXT), author(VARCHAR 100), created_at(TIMESTAMP, default=now)입니다. 그리고 `backend/seed.py` 스크립트를 만들어 테이블을 생성하고 위 5건의 샘플 데이터를 INSERT하는 코드를 작성해주세요.

---

### Step 3: 샘플 데이터 조회 API

**목표:** `GET /api/samples` 로 샘플 데이터 목록 반환

**할 일:**
- `backend/routers/samples.py` 생성
- `backend/app.py`에 라우터 등록

#### 예상 프롬프트

> `backend/routers/samples.py`에 `GET /api/samples` 엔드포인트를 만들어주세요. DB에서 모든 Sample 데이터를 조회하여 JSON 배열로 반환합니다. Pydantic 스키마는 `backend/schemas.py`에 정의하고, async SQLAlchemy 세션을 사용해주세요. `backend/app.py`에 이 라우터를 include 해주세요.

---

### Step 4: 프론트엔드 — 샘플 데이터 조회 페이지

**목표:** `/samples` 경로에서 DB 데이터를 테이블로 표시

**할 일:**
- `frontend/src/pages/SampleListPage.vue` 생성
- `frontend/src/router.js`에 경로 등록
- `frontend/src/App.vue`에 네비게이션 링크 추가

**페이지 UI 구성:**
```
┌──────────────────────────────────────────┐
│  📋 샘플 데이터 목록                       │
├──────┬────────────────────┬──────────┬────┤
│  ID  │  제목              │  작성자   │ 날짜 │
├──────┼────────────────────┼──────────┼────┤
│  1   │ 첫 번째 샘플       │ 홍길동    │ ... │
│  2   │ 두 번째 샘플       │ 김철수    │ ... │
│  3   │ 세 번째 샘플       │ 이영희    │ ... │
│ ...  │ ...                │ ...      │ ... │
└──────┴────────────────────┴──────────┴────┘
```

#### 예상 프롬프트

> Vue 3 Options API 스타일로 `frontend/src/pages/SampleListPage.vue`를 만들어주세요. mounted()에서 `fetch('/api/samples')`로 데이터를 불러와 테이블 형태로 표시합니다. 컬럼은 ID, 제목, 작성자, 생성일시입니다. `frontend/src/router.js`에 `/samples` 경로를 추가하고, `frontend/src/App.vue` 네비게이션에 "샘플 목록" 링크를 추가해주세요.

---

## 3. 실행 순서

```
1. pip install -r backend/requirements.txt  (asyncpg, sqlalchemy 추가 설치)
2. python backend/seed.py                    (테이블 생성 + 샘플 데이터 INSERT)
3. uvicorn app:app --reload --port 8000      (백엔드 실행)
4. curl http://localhost:8000/api/samples    (API 테스트)
5. npm run dev                               (프론트엔드 실행)
6. http://localhost:5173/samples 접속         (화면 확인)
```

---

## 4. 검증 방법

| 항목 | 방법 |
|------|------|
| DB 연결 | 서버 로그에 연결 에러 없이 정상 기동 |
| 샘플 데이터 | `python backend/seed.py` 실행 후 DB에 5건 INSERT 확인 |
| API 응답 | `curl localhost:8000/api/samples` → 5건 JSON 배열 반환 |
| 화면 표시 | 브라우저에서 `/samples` 접속 → 테이블에 5행 표시 |