# Hello Web

**Python (FastAPI) 백엔드 + Vue 3 (Vite) 프론트엔드 + PostgreSQL** 프로젝트입니다.

- **백엔드**: FastAPI가 JSON API 제공 + 빌드된 Vue SPA 정적 파일 서빙
- **프론트엔드**: Vue 3 (Options API) + Vite 번들러
- **데이터베이스**: PostgreSQL (외부 서버 192.168.0.60)

---

## DB 연결 정보

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

연결 문자열은 `DATABASE_URL` 환경변수로 재정의 가능합니다.

---

## API 엔드포인트

| 메서드 | 경로 | 설명 |
|--------|------|------|
| `GET` | `/api/hello` | 기본 인사 API |
| `GET` | `/api/samples` | 샘플 데이터 목록 조회 |
| `GET` | `/api/samples/{id}` | 샘플 데이터 상세 조회 |
| `POST` | `/api/samples` | 샘플 데이터 생성 |
| `PUT` | `/api/samples/{id}` | 샘플 데이터 수정 |
| `DELETE` | `/api/samples/{id}` | 샘플 데이터 삭제 |

---

## 설치 및 실행

### 1. 의존성 설치

```bash
# 백엔드
pip3 install -r backend/requirements.txt

# 프론트엔드
cd frontend && npm install && cd ..
```

### 2. DB 테이블 생성 및 샘플 데이터 INSERT

```bash
python3 backend/seed.py
```

### 3. 개발 서버 실행 (동시 실행)

```bash
./dev.sh
```

또는 개별 실행:

```bash
# 터미널 1: 백엔드
cd backend && uvicorn app:app --reload --port 8000

# 터미널 2: 프론트엔드
cd frontend && npm run dev
```

### 4. 접속

| 주소 | 설명 |
|---|---|
| **http://localhost:8000** | FastAPI가 서빙하는 SPA (프로덕션) |
| **http://localhost:8000/api/samples** | API 직접 확인 |
| **http://localhost:5173** | Vite 개발 서버 (프록시 → FastAPI) |

### 5. 프로덕션 빌드

```bash
cd frontend && npm run build
```

빌드 후 `localhost:8000`에서 SPA를 확인할 수 있습니다.

---

## 프로젝트 구조

```
hello-web/
├── backend/
│   ├── app.py               # FastAPI 서버 (API + 정적 파일 서빙)
│   ├── database.py           # async SQLAlchemy 엔진/세션 설정
│   ├── models.py             # SQLAlchemy 모델 (Sample)
│   ├── schemas.py            # Pydantic 요청/응답 스키마
│   ├── seed.py               # 테이블 생성 + 샘플 데이터 INSERT
│   ├── routers/
│   │   └── samples.py       # CRUD API 라우터
│   └── requirements.txt     # Python 의존성
├── frontend/
│   ├── dist/                 # Vue 빌드 결과물
│   ├── src/
│   │   ├── main.js           # Vue 앱 진입점
│   │   ├── App.vue           # 루트 컴포넌트 (내비게이션 포함)
│   │   ├── router.js         # vue-router 경로 설정
│   │   └── pages/
│   │       ├── HomePage.vue
│   │       ├── AboutPage.vue
│   │       ├── SampleListPage.vue    # 목록 조회
│   │       ├── SampleDetailPage.vue  # 상세 조회/삭제
│   │       └── SampleFormPage.vue    # 생성/수정 폼
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
├── dev.sh                   # 백엔드 + 프론트엔드 동시 실행 스크립트
├── dbpageplan.md            # DB 연동 계획서
├── dbpagecrud.md            # CRUD 확장 계획서
└── README.md
```

---

## 주요 파일 설명

**`backend/database.py`** — async SQLAlchemy 엔진 및 세션 팩토리, `DATABASE_URL` 환경변수 지원

**`backend/models.py`** — `Sample` 모델 (id, title, content, author, created_at)

**`backend/seed.py`** — 테이블 생성 및 5건의 샘플 데이터 INSERT (중복 실행 방지)

**`backend/routers/samples.py`** — GET/POST/PUT/DELETE 전체 CRUD 엔드포인트

---

## 개발 워크플로우

```bash
# 1. 동시 실행
./dev.sh

# 2. curl로 API 테스트
curl http://localhost:8000/api/samples

# 3. 새 글 생성
curl -X POST http://localhost:8000/api/samples \
  -H "Content-Type: application/json" \
  -d '{"title":"테스트","content":"내용","author":"작성자"}'
```

---

## 서버 종료

```bash
# dev.sh 실행 시 → Ctrl+C

# 개별 종료
pkill -f "uvicorn app:app"
pkill -f "vite"
```

---

## 문제 해결

### 포트 8000이 이미 사용 중
```bash
lsof -i :8000
kill -9 <PID>
```

### DB 연결 오류
`backend/database.py`에서 `DATABASE_URL` 값을 환경에 맞게 수정하세요.