Initial commit

docs/superpowers/specs/2026-06-09-sqlite-fastapi-vue-crud-design.md

@@ -0,0 +1,192 @@
+# SQLite + FastAPI + Vue CRUD 예제 설계
+
+## 목표
+
+기존의 단일 `'hello world'` 조회 예제를 확장해, SQLite에 저장된 메시지를 Vue 화면에서 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)할 수 있는 목록형 CRUD 예제로 만든다.
+
+## 범위
+
+이번 작업은 다음을 포함한다.
+
+- SQLite `messages` 테이블 유지
+- 메시지 목록 조회 API 추가
+- 메시지 생성 API 추가
+- 메시지 수정 API 추가
+- 메시지 삭제 API 추가
+- Vue 화면에서 목록형 CRUD UI 구현
+- 초기 데이터로 `hello world` 1건 유지
+- 실행 문서 업데이트
+
+이번 작업은 다음을 포함하지 않는다.
+
+- 인증/권한
+- 검색/정렬/페이지네이션
+- 다중 테이블 관계
+- 복잡한 폼 검증
+- 배포 설정
+
+## 구조
+
+기존 분리형 구조를 그대로 유지한다.
+
+```text
+skillDesk/
+├── backend/
+│   ├── init_db.py
+│   ├── main.py
+│   ├── requirements.txt
+│   └── app.db
+├── frontend/
+│   ├── index.html
+│   └── src/
+│       └── main.js
+└── README.md
+```
+
+## 데이터 모델
+
+테이블명: `messages`
+
+컬럼:
+
+- `id` INTEGER PRIMARY KEY AUTOINCREMENT
+- `content` TEXT NOT NULL
+
+메시지 단위는 매우 단순하게 유지한다. 별도 제목, 작성일, 상태 컬럼은 추가하지 않는다.
+
+## API 설계
+
+### 1. 목록 조회
+
+`GET /api/messages`
+
+응답 예시:
+
+```json
+[
+  { "id": 1, "content": "hello world" }
+]
+```
+
+### 2. 생성
+
+`POST /api/messages`
+
+요청 예시:
+
+```json
+{
+  "content": "new message"
+}
+```
+
+응답 예시:
+
+```json
+{
+  "id": 2,
+  "content": "new message"
+}
+```
+
+### 3. 수정
+
+`PUT /api/messages/{id}`
+
+요청 예시:
+
+```json
+{
+  "content": "updated message"
+}
+```
+
+응답 예시:
+
+```json
+{
+  "id": 1,
+  "content": "updated message"
+}
+```
+
+### 4. 삭제
+
+`DELETE /api/messages/{id}`
+
+응답 예시:
+
+```json
+{
+  "success": true
+}
+```
+
+## 백엔드 설계
+
+- FastAPI는 기존 CORS 설정을 유지한다.
+- sqlite3 표준 라이브러리를 사용한다.
+- 입력 모델은 최소한으로 `content` 문자열만 받는다.
+- 빈 문자열은 거부한다.
+- 존재하지 않는 id에 대한 수정/삭제는 404로 반환한다.
+
+## 프론트엔드 설계
+
+### 화면 구성
+
+- 상단 제목과 설명
+- 새 메시지 입력 폼
+- 메시지 목록 영역
+- 각 항목의 수정 / 삭제 버튼
+- 수정 모드일 때 인라인 입력창과 저장 / 취소 버튼
+- 로딩 / 에러 / 빈 목록 상태 표시
+
+### 사용자 흐름
+
+1. 페이지 진입 시 목록을 불러온다.
+2. 입력창에 값을 넣고 생성 버튼을 누르면 메시지가 추가된다.
+3. 각 항목의 수정 버튼을 누르면 해당 줄이 편집 모드로 바뀐다.
+4. 저장 시 수정 API를 호출하고 목록을 갱신한다.
+5. 삭제 시 삭제 API를 호출하고 목록을 갱신한다.
+
+### 상태
+
+다음 상태를 최소로 둔다.
+
+- 전체 목록
+- 새 메시지 입력값
+- 현재 편집 중인 메시지 id
+- 편집 중 입력값
+- 로딩 상태
+- 에러 상태
+
+## 데이터 흐름
+
+1. `init_db.py`가 DB를 만들고 `hello world`를 기본 데이터로 넣는다.
+2. Vue는 페이지 로드 시 `GET /api/messages`를 호출한다.
+3. 사용자가 생성/수정/삭제를 수행하면 해당 API를 호출한다.
+4. 요청 성공 후 목록을 다시 불러오거나 로컬 상태를 갱신한다.
+
+## 오류 처리
+
+- 빈 메시지 생성/수정은 프론트엔드와 백엔드 모두에서 막는다.
+- 없는 메시지 수정/삭제는 404로 처리한다.
+- API 실패 시 화면에 간단한 오류 문구를 표시한다.
+
+## 검증 기준
+
+다음 조건을 만족하면 성공이다.
+
+- 초기 화면에 `hello world`가 포함된 목록이 표시된다.
+- 새 메시지를 추가할 수 있다.
+- 기존 메시지를 수정할 수 있다.
+- 기존 메시지를 삭제할 수 있다.
+- 삭제 후 목록이 즉시 반영된다.
+- README 실행 방법이 최신 흐름에 맞게 정리된다.
+
+## 구현 원칙
+
+- 기존 예제 구조를 최대한 유지한다.
+- 불필요한 라이브러리는 추가하지 않는다.
+- CRUD 흐름이 한눈에 보이는 최소 UI를 만든다.
+- 과도한 추상화보다 이해하기 쉬운 코드를 우선한다.