Initial commit

2026-06-10 12:49:53 +09:00
commit b159597559
707 changed files with 551154 additions and 0 deletions
@@ -0,0 +1,73 @@
+# SQLite + FastAPI + Vue 전역 설정 분리 구현 계획
+> **에이전트 작업자용:** 각 작업은 체크박스(`- [ ]`)로 추적합니다.
+**목표:** 프론트엔드가 `index.html`의 전역 설정 객체에서 API 호스트와 포트를 읽어 오도록 바꿔, 포트 변경 시 `main.js`를 수정하지 않아도 되게 만든다.
+**아키텍처:** `frontend/index.html`에 `window.APP_CONFIG`를 정의하고, `frontend/src/main.js`는 이 전역 객체를 읽어 기본값과 함께 `API_BASE_URL`을 조합한다. README는 설정 위치와 포트 충돌 대응 절차를 `index.html` 기준으로 다시 설명한다.
+**기술 스택:** HTML, Vue 3 ESM, JavaScript, Markdown
+---
+
+- [ ] **작업 1: HTML 전역 설정 객체 추가**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/index.html` (수정)
+  - **할 일:** Vue 앱 스크립트가 실행되기 전에 `window.APP_CONFIG` 객체를 선언하고, 기본 `apiHost`와 `apiPort`를 넣는다.
+  - **최소 구현 예시:**
+    ```html
+    <script>
+      window.APP_CONFIG = {
+        apiHost: 'http://127.0.0.1',
+        apiPort: '8000',
+      }
+    </script>
+    ```
+  - **검증 명령:** `python3 -m http.server 5173 -d frontend`
+  - **기대 결과:** 브라우저가 `index.html`을 로드하면 Vue 앱 시작 전 전역 설정 객체가 준비된다.
+
+- [ ] **작업 2: main.js가 전역 설정과 기본값을 읽도록 변경**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (수정)
+  - **할 일:** 기존 `API_HOST`, `API_PORT` 상수를 `window.APP_CONFIG` 기반으로 바꾸고, 설정이 없을 때 기본값 `127.0.0.1:8000`이 유지되게 한다.
+  - **최소 구현 예시:**
+    ```javascript
+    const appConfig = window.APP_CONFIG ?? {}
+    const apiHost = appConfig.apiHost || 'http://127.0.0.1'
+    const apiPort = appConfig.apiPort || '8000'
+    const API_BASE_URL = `${apiHost}:${apiPort}/api`
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/main.py`
+  - **기대 결과:** `main.js`를 수정하지 않고 `index.html` 값만 바꿔 다른 백엔드 포트로 연결할 수 있다.
+
+- [ ] **작업 3: 기존 CRUD fetch 흐름 유지 확인**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (검토)
+  - **할 일:** 생성, 조회, 수정, 삭제 fetch 호출이 모두 새 `API_BASE_URL`을 그대로 사용하도록 유지한다.
+  - **최소 구현 예시:**
+    ```javascript
+    const response = await fetch(`${API_BASE_URL}/messages`)
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/main.py`
+  - **기대 결과:** 설정 방식만 바뀌고 CRUD 기능 경로는 그대로 유지된다.
+
+- [ ] **작업 4: README 설정 위치 설명 갱신**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/README.md` (수정)
+  - **할 일:** 기존 `main.js`의 `API_PORT` 수정 안내를 `index.html`의 `window.APP_CONFIG.apiPort` 수정 안내로 바꾼다.
+  - **최소 구현 예시:**
+    ```markdown
+    `frontend/index.html`의 `window.APP_CONFIG`에서 `apiPort` 값을 백엔드 실행 포트와 맞춥니다.
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/init_db.py backend/main.py`
+  - **기대 결과:** README만 읽어도 설정 수정 위치가 `index.html`이라는 점을 알 수 있다.
+
+- [ ] **작업 5: 포트 충돌 대응 예시를 전역 설정 방식으로 보강**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/README.md` (수정)
+  - **할 일:** 백엔드를 `8001`, 프론트를 `5174`로 실행할 때 `apiPort: '8001'` 예시를 함께 적는다.
+  - **최소 구현 예시:**
+    ```html
+    window.APP_CONFIG = {
+      apiHost: 'http://127.0.0.1',
+      apiPort: '8001',
+    }
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/init_db.py backend/main.py`
+  - **기대 결과:** 사용자가 포트 충돌 시 실행 명령과 전역 설정 값을 한 번에 맞출 수 있다.
+
+- [ ] **작업 6: 진단 및 수동 검증**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/index.html` (진단), `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (진단), `/Users/woozooni/Documents/trae_projects/skillDesk/README.md` (진단)
+  - **할 일:** IDE 진단을 확인하고, 필요 시 즉시 수정한다. 가능하면 프론트 정적 서버를 열어 설정 객체가 페이지 로드 전에 선언되는 구조도 점검한다.
+  - **검증 도구:** IDE 진단 확인
+  - **기대 결과:** 새 오류 없이 전역 설정 분리 구조가 문서와 코드에 모두 반영된다.
@@ -0,0 +1,69 @@
+# SQLite + FastAPI + Vue 포트 설정 분리 구현 계획
+> **에이전트 작업자용:** 각 작업은 체크박스(`- [ ]`)로 추적합니다.
+**목표:** CRUD 예제의 프론트 API 주소와 실행 포트 안내를 분리해 포트 충돌 시 최소 수정으로 다시 실행할 수 있게 만든다.
+**아키텍처:** 프론트엔드는 `frontend/src/main.js`에서 API 주소를 `API_HOST`, `API_PORT`, `API_BASE_URL` 상수로 나누어 관리한다. 실행 포트 선택은 백엔드와 프론트 모두 명령줄에서 유지하고, README에 기본 포트와 대체 포트 예시를 함께 적어 사용자가 충돌 상황에서 바로 대응할 수 있게 한다.
+**기술 스택:** Vue 3 ESM, FastAPI, Python http.server, Markdown
+---
+
+- [ ] **작업 1: 프론트 API 주소 상수 구조 변경**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (수정)
+  - **할 일:** 현재 하나의 문자열로 선언된 `API_BASE_URL`을 `API_HOST`, `API_PORT`, `API_BASE_URL`로 분리한다.
+  - **최소 구현 예시:**
+    ```javascript
+    const API_HOST = 'http://127.0.0.1'
+    const API_PORT = '8000'
+    const API_BASE_URL = `${API_HOST}:${API_PORT}/api`
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/main.py`
+  - **기대 결과:** 프론트 코드에서 백엔드 포트를 한 줄만 수정해 다른 포트로 연결할 수 있다.
+
+- [ ] **작업 2: 프론트 주석과 설정 의도 정리**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (수정)
+  - **할 일:** 사용자 규칙에 맞춰 각 상수와 조합 이유를 한글 주석으로 설명하고, 기존 fetch 호출이 새 상수를 그대로 사용하도록 유지한다.
+  - **최소 구현 예시:**
+    ```javascript
+    const API_HOST = 'http://127.0.0.1' // 백엔드 API 호스트 주소를 별도 상수로 분리한다.
+    const API_PORT = '8000' // 백엔드 포트 충돌 시 이 값만 바꾸면 되도록 한다.
+    const API_BASE_URL = `${API_HOST}:${API_PORT}/api` // 실제 fetch 요청에 사용할 기본 API 주소를 조합한다.
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/main.py`
+  - **기대 결과:** 프론트 상수 구조만 읽어도 포트 변경 지점을 쉽게 찾을 수 있다.
+
+- [ ] **작업 3: README 기본 실행 예시를 명시적 포트 기준으로 보강**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/README.md` (수정)
+  - **할 일:** 기존 실행 안내에 기본 백엔드 포트 `8000`, 프론트 포트 `5173`을 명령 예시로 명확히 적는다.
+  - **최소 구현 예시:**
+    ```markdown
+    uvicorn backend.main:app --host 127.0.0.1 --port 8000
+    python3 -m http.server 5173 -d frontend
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/init_db.py backend/main.py`
+  - **기대 결과:** README만 보고 기본 실행 주소를 바로 이해할 수 있다.
+
+- [ ] **작업 4: README에 포트 충돌 대응 섹션 추가**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/README.md` (수정)
+  - **할 일:** `8001`, `5174` 같은 대체 포트 예시와 함께, 프론트에서 `API_PORT`를 어디서 바꾸는지 안내한다.
+  - **최소 구현 예시:**
+    ```markdown
+    uvicorn backend.main:app --host 127.0.0.1 --port 8001
+    python3 -m http.server 5174 -d frontend
+    `frontend/src/main.js`의 `API_PORT`도 `8001`로 맞춥니다.
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/init_db.py backend/main.py`
+  - **기대 결과:** 포트 충돌 시 사용자가 다음 명령과 코드 수정 위치를 바로 알 수 있다.
+
+- [ ] **작업 5: 문법 및 진단 확인**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (진단), `/Users/woozooni/Documents/trae_projects/skillDesk/README.md` (진단)
+  - **할 일:** IDE 진단으로 새 오류를 확인하고, 필요 시 즉시 수정한다.
+  - **검증 도구:** IDE 진단 확인
+  - **기대 결과:** 수정 파일에 새 오류가 없다.
+
+- [ ] **작업 6: 수동 확인 절차 정리**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/README.md` (검토)
+  - **할 일:** 사용자가 직접 확인할 수 있도록 기본 포트 실행과 대체 포트 실행 시 어떤 주소를 열어야 하는지 최종 점검한다.
+  - **실행 명령:**
+    ```bash
+    uvicorn backend.main:app --host 127.0.0.1 --port 8001
+    python3 -m http.server 5174 -d frontend
+    ```
+  - **기대 결과:** `frontend/src/main.js`의 `API_PORT`를 `8001`로 맞추면 `http://127.0.0.1:5174`에서 정상 동작해야 한다는 실행 흐름이 README에 반영된다.
@@ -0,0 +1,207 @@
+# Skill 문서 확장 구현 계획
+> **에이전트 작업자용:** REQUIRED SUB-SKILL: 현재 세션에서는 인라인으로 실행한다. Steps use checkbox (`- [ ]`) syntax for tracking.
+**Goal:** 10개 스킬 문서를 원문에 더 가깝게 확장하고, README와 TRAE 테스트 시나리오 문서를 추가한다.
+**Architecture:** 기존 `.trae/skills/*/SKILL.md`를 스킬 성격별로 확장하고, 저장소 루트에는 탐색용 README를, `docs/`에는 실행 가능한 테스트 시나리오 문서를 둔다. 검증은 Markdown 진단과 문서 간 링크/명칭 일관성 확인으로 마무리한다.
+**Tech Stack:** Markdown, Trae skill frontmatter, VS Code diagnostics
+---
+
+### Task 1: 프로세스 스킬 문서 확장
+**Files:**
+- Modify: `.trae/skills/brainstorming/SKILL.md`
+- Modify: `.trae/skills/systematic-debugging/SKILL.md`
+- Modify: `.trae/skills/writing-plans/SKILL.md`
+- Modify: `.trae/skills/using-superpowers/SKILL.md`
+- Modify: `.trae/skills/karpathy-guidelines/SKILL.md`
+- Test: 문서 진단 확인
+
+- [ ] **Step 1: 현재 프로세스 스킬 문서를 다시 읽어 섹션 공통 틀을 고정**
+Read:
+```text
+.trae/skills/brainstorming/SKILL.md
+.trae/skills/systematic-debugging/SKILL.md
+.trae/skills/writing-plans/SKILL.md
+.trae/skills/using-superpowers/SKILL.md
+.trae/skills/karpathy-guidelines/SKILL.md
+```
+Expected: 각 문서에 공통으로 들어갈 섹션(개요, 적용 시점, 워크플로, 금지 사항, 기대 결과)을 정할 수 있다.
+
+- [ ] **Step 2: brainstorming 문서를 원문 흐름에 가깝게 확장**
+Include:
+```markdown
+## 체크리스트
+## 프로세스 흐름
+## 설계 제시 규칙
+## 문서화와 사용자 검토 게이트
+## 시각 보조 도구 사용 기준
+```
+Expected: 설계 전 구현 금지, 한 번에 한 질문, 2~3개 접근법 제안, writing-plans로 전환 규칙이 모두 드러난다.
+
+- [ ] **Step 3: systematic-debugging 문서를 4단계 절차 중심으로 확장**
+Include:
+```markdown
+## 철칙
+## 1단계: 근본 원인 조사
+## 2단계: 패턴 분석
+## 3단계: 가설과 검증
+## 4단계: 구현
+## 중단 신호
+```
+Expected: 수정 전에 조사, 증거 기반 추적, 최소 변경 검증, 3회 이상 실패 시 구조 재검토가 명확해진다.
+
+- [ ] **Step 4: writing-plans 문서를 계획 품질 기준 중심으로 확장**
+Include:
+```markdown
+## 파일 구조 먼저 정의
+## 작업 단위 규칙
+## 계획 문서 헤더
+## 금지 사항
+## 자체 검토
+## 완료 후 인계
+```
+Expected: placeholder 금지, 작은 단계, 명확한 파일 경로, 검증 가능한 명령이 강조된다.
+
+- [ ] **Step 5: using-superpowers와 karpathy-guidelines를 운영 규칙 중심으로 확장**
+Include:
+```markdown
+## 최우선 규칙
+## 스킬 우선 적용 순서
+## 흔한 자기합리화 경고
+## 코딩 전에 먼저 생각하기
+## 단순함 우선
+## 수술하듯 수정하기
+## 목표 기반 실행
+```
+Expected: 스킬 선적용 원칙과 과설계 방지 원칙이 각각 독립적으로 읽혀야 한다.
+
+- [ ] **Step 6: 진단 확인**
+Run: Markdown diagnostics for the five edited files
+Expected: 진단 오류 없음
+
+### Task 2: UI/구현/탐색 스킬 문서 확장
+**Files:**
+- Modify: `.trae/skills/frontend-design/SKILL.md`
+- Modify: `.trae/skills/ui-ux-pro-max/SKILL.md`
+- Modify: `.trae/skills/find-skills/SKILL.md`
+- Modify: `.trae/skills/webapp-testing/SKILL.md`
+- Modify: `.trae/skills/agent-browser/SKILL.md`
+- Test: 문서 진단 확인
+
+- [ ] **Step 1: 현재 다섯 문서를 다시 읽고 성격별 확장 포인트 정리**
+Read:
+```text
+.trae/skills/frontend-design/SKILL.md
+.trae/skills/ui-ux-pro-max/SKILL.md
+.trae/skills/find-skills/SKILL.md
+.trae/skills/webapp-testing/SKILL.md
+.trae/skills/agent-browser/SKILL.md
+```
+Expected: 디자인형, 탐색형, 테스트형, 자동화형 문서에 필요한 추가 섹션이 정리된다.
+
+- [ ] **Step 2: frontend-design 문서를 미학 방향성과 금지 패턴 중심으로 확장**
+Include:
+```markdown
+## 디자인 사고
+## 미학 가이드라인
+## 반드시 피할 것
+## 구현 복잡도와 미학의 일치
+## 산출물 기대치
+```
+Expected: 흔한 AI 스타일 회피, 타이포그래피/색상/모션/공간 구성 원칙이 상세해진다.
+
+- [ ] **Step 3: ui-ux-pro-max 문서를 적용 조건과 우선순위 점검 기준 중심으로 확장**
+Include:
+```markdown
+## 언제 적용할지
+## 반드시 사용할 상황
+## 권장 상황
+## 불필요한 상황
+## 우선순위별 검토 항목
+## 산출물 기준
+```
+Expected: 웹/모바일 UI 품질 관리용 종합 규칙처럼 읽힌다.
+
+- [ ] **Step 4: find-skills, webapp-testing, agent-browser 문서를 실행 절차 중심으로 확장**
+Include:
+```markdown
+## 검색 절차
+## 품질 검증
+## 정찰 후 행동 패턴
+## with_server.py 사용 원칙
+## agent-browser skills get core
+## 특수 가이드
+```
+Expected: 사용자가 바로 명령과 판단 기준을 가져다 쓸 수 있다.
+
+- [ ] **Step 5: 진단 확인**
+Run: Markdown diagnostics for the five edited files
+Expected: 진단 오류 없음
+
+### Task 3: README와 테스트 시나리오 문서 작성
+**Files:**
+- Create: `README.md`
+- Create: `docs/test-scenarios.md`
+- Test: 문서 진단 확인
+
+- [ ] **Step 1: README 초안 작성**
+Include:
+```markdown
+# skillDesk
+## 프로젝트 소개
+## 포함된 스킬
+## 디렉터리 구조
+## TRAE에서 사용하는 방법
+## 추천 사용 흐름
+## 테스트 시나리오
+```
+Expected: 저장소 목적, 10개 스킬, 사용 흐름을 처음 보는 사람도 이해할 수 있다.
+
+- [ ] **Step 2: 테스트 시나리오 문서 작성**
+Include:
+```markdown
+# TRAE 테스트 시나리오
+## 공통 사용법
+## brainstorming 시나리오
+## frontend-design 시나리오
+## ...
+## agent-browser 시나리오
+```
+Expected: 각 스킬당 최소 1개 프롬프트, 기대 동작, 확인 포인트가 담긴다.
+
+- [ ] **Step 3: README와 테스트 문서 간 링크 연결**
+Add:
+```markdown
+[테스트 시나리오](./docs/test-scenarios.md)
+[brainstorming](./.trae/skills/brainstorming/SKILL.md)
+```
+Expected: README에서 주요 문서로 빠르게 이동할 수 있다.
+
+- [ ] **Step 4: 진단 확인**
+Run: Markdown diagnostics for `README.md` and `docs/test-scenarios.md`
+Expected: 진단 오류 없음
+
+### Task 4: 최종 검증과 정리
+**Files:**
+- Modify: 전체 문서 일관성 점검 결과에 따라 필요한 파일
+- Test: 전체 신규/수정 Markdown 파일 진단 확인
+
+- [ ] **Step 1: 문서 명칭과 링크 일관성 점검**
+Check:
+```text
+README.md
+docs/test-scenarios.md
+.trae/skills/*/SKILL.md
+```
+Expected: 스킬 이름, 링크 경로, 설명 용어가 서로 충돌하지 않는다.
+
+- [ ] **Step 2: Markdown 진단 일괄 확인**
+Run: diagnostics for all touched markdown files
+Expected: 진단 오류 없음
+
+- [ ] **Step 3: 결과 요약 작성**
+Include:
+```text
+확장한 스킬 목록
+추가한 문서 목록
+검증 결과
+```
+Expected: 사용자가 바로 산출물을 훑어볼 수 있다.
@@ -0,0 +1,198 @@
+# SQLite + FastAPI + Vue CRUD 구현 계획
+> **에이전트 작업자용:** 각 작업은 체크박스(`- [ ]`)로 추적합니다.
+**목표:** SQLite의 `messages` 테이블 데이터를 FastAPI CRUD API로 조작하고 Vue 화면에서 생성, 조회, 수정, 삭제할 수 있게 만든다.
+**아키텍처:** 백엔드는 `sqlite3`와 FastAPI로 단순 CRUD 엔드포인트를 제공하고, 프론트엔드는 브라우저용 Vue ESM 번들로 목록형 CRUD UI를 구현한다. 구현은 기존 파일 구조를 유지하면서 최소한의 상태만 추가하고, 마지막에 API와 화면 흐름을 직접 검증한다.
+**기술 스택:** Python 3, FastAPI, sqlite3, Vue 3 ESM, 정적 HTML
+---
+
+- [ ] **작업 1: DB 초기화 스크립트 유지 여부 점검**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/backend/init_db.py` (수정)
+  - **할 일:** `messages` 테이블 구조가 CRUD 요구사항에 충분한지 확인하고, 초기 데이터 `hello world` 1건을 유지하는 방식으로 정리한다.
+  - **최소 구현 예시:**
+    ```python
+    cursor.execute(
+        "CREATE TABLE IF NOT EXISTS messages (id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT NOT NULL)"
+    )
+    cursor.execute("DELETE FROM messages")
+    cursor.execute("INSERT INTO messages (content) VALUES (?)", ("hello world",))
+    ```
+  - **검증 명령:** `python3 backend/init_db.py`
+  - **기대 결과:** `backend/app.db`가 다시 생성되거나 갱신되고, `messages` 테이블에 `hello world` 1건이 들어간다.
+
+- [ ] **작업 2: FastAPI용 요청 모델과 DB 헬퍼 추가**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/backend/main.py` (수정)
+  - **할 일:** SQLite 연결 헬퍼, 메시지 직렬화 헬퍼, 입력 검증용 Pydantic 모델을 추가한다.
+  - **최소 구현 예시:**
+    ```python
+    class MessagePayload(BaseModel):
+        content: str
+
+        @field_validator("content")
+        @classmethod
+        def validate_content(cls, value: str) -> str:
+            stripped_value = value.strip()
+            if not stripped_value:
+                raise ValueError("Content must not be empty")
+            return stripped_value
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/main.py`
+  - **기대 결과:** API 함수들이 공통 검증 로직과 연결 헬퍼를 재사용할 준비가 된다.
+
+- [ ] **작업 3: 메시지 목록 조회 API 구현**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/backend/main.py` (수정)
+  - **할 일:** `GET /api/messages` 엔드포인트를 추가해 전체 메시지 목록을 `id` 오름차순으로 반환한다.
+  - **최소 구현 예시:**
+    ```python
+    @app.get("/api/messages")
+    def list_messages() -> list[dict[str, object]]:
+        with get_connection() as connection:
+            rows = connection.execute(
+                "SELECT id, content FROM messages ORDER BY id ASC"
+            ).fetchall()
+        return [serialize_message(row) for row in rows]
+    ```
+  - **검증 명령:** `python3 -c "from backend.main import list_messages; print(list_messages())"`
+  - **기대 결과:** `hello world`가 포함된 리스트가 출력된다.
+
+- [ ] **작업 4: 메시지 생성 API 구현**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/backend/main.py` (수정)
+  - **할 일:** `POST /api/messages` 엔드포인트를 추가해 메시지를 저장하고 생성된 `id`와 `content`를 반환한다.
+  - **최소 구현 예시:**
+    ```python
+    @app.post("/api/messages", status_code=201)
+    def create_message(payload: MessagePayload) -> dict[str, object]:
+        with get_connection() as connection:
+            cursor = connection.execute(
+                "INSERT INTO messages (content) VALUES (?)",
+                (payload.content,),
+            )
+            connection.commit()
+        return {"id": cursor.lastrowid, "content": payload.content}
+    ```
+  - **검증 명령:** `python3 - <<'PY'\nfrom backend.main import create_message, MessagePayload\nprint(create_message(MessagePayload(content='created from plan')))\nPY`
+  - **기대 결과:** 새 `id`와 저장된 `content`가 출력된다.
+
+- [ ] **작업 5: 메시지 수정 API 구현**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/backend/main.py` (수정)
+  - **할 일:** `PUT /api/messages/{id}` 엔드포인트를 추가해 해당 메시지를 수정하고, 없는 `id`는 404를 반환한다.
+  - **최소 구현 예시:**
+    ```python
+    @app.put("/api/messages/{message_id}")
+    def update_message(message_id: int, payload: MessagePayload) -> dict[str, object]:
+        with get_connection() as connection:
+            cursor = connection.execute(
+                "UPDATE messages SET content = ? WHERE id = ?",
+                (payload.content, message_id),
+            )
+            connection.commit()
+        if cursor.rowcount == 0:
+            raise HTTPException(status_code=404, detail="Message not found")
+        return {"id": message_id, "content": payload.content}
+    ```
+  - **검증 명령:** `python3 - <<'PY'\nfrom backend.main import update_message, MessagePayload\nprint(update_message(1, MessagePayload(content='updated hello world')))\nPY`
+  - **기대 결과:** 수정된 메시지 객체가 출력된다.
+
+- [ ] **작업 6: 메시지 삭제 API 구현**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/backend/main.py` (수정)
+  - **할 일:** `DELETE /api/messages/{id}` 엔드포인트를 추가해 해당 메시지를 삭제하고 성공 여부를 반환한다.
+  - **최소 구현 예시:**
+    ```python
+    @app.delete("/api/messages/{message_id}")
+    def delete_message(message_id: int) -> dict[str, bool]:
+        with get_connection() as connection:
+            cursor = connection.execute(
+                "DELETE FROM messages WHERE id = ?",
+                (message_id,),
+            )
+            connection.commit()
+        if cursor.rowcount == 0:
+            raise HTTPException(status_code=404, detail="Message not found")
+        return {"success": True}
+    ```
+  - **검증 명령:** `python3 - <<'PY'\nfrom backend.main import delete_message\nprint(delete_message(1))\nPY`
+  - **기대 결과:** `{'success': True}`가 출력된다.
+
+- [ ] **작업 7: Vue 상태를 목록형 CRUD 구조로 변경**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (수정)
+  - **할 일:** 단일 `message` 상태를 `messages`, `newContent`, `editingId`, `editingContent` 상태로 교체하고 목록 조회 함수를 만든다.
+  - **최소 구현 예시:**
+    ```javascript
+    const messages = ref([])
+    const newContent = ref('')
+    const editingId = ref(null)
+    const editingContent = ref('')
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/main.py`
+  - **기대 결과:** 프론트 로직이 CRUD API 구조와 맞는 상태 이름으로 정리된다.
+
+- [ ] **작업 8: Vue 생성/수정/삭제 액션 구현**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (수정)
+  - **할 일:** `fetch`를 사용해 생성, 수정, 삭제 요청을 보내고 성공 후 목록을 다시 불러오거나 상태를 갱신한다.
+  - **최소 구현 예시:**
+    ```javascript
+    const createMessage = async () => {
+      await fetch(`${API_BASE_URL}/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: newContent.value.trim() }),
+      })
+      await loadMessages()
+    }
+    ```
+  - **검증 명령:** `python3 backend/init_db.py`
+  - **기대 결과:** 프론트에서 각 버튼이 API 호출 함수와 연결된다.
+
+- [ ] **작업 9: Vue 템플릿을 목록형 CRUD UI로 교체**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (수정)
+  - **할 일:** 입력 폼, 목록, 인라인 편집, 빈 상태, 에러 상태를 모두 표시하는 템플릿으로 교체한다.
+  - **최소 구현 예시:**
+    ```html
+    <form @submit.prevent="createMessage">
+      <input v-model="newContent" />
+      <button type="submit">추가</button>
+    </form>
+    <li v-for="message in messages" :key="message.id">
+      <span>{{ message.content }}</span>
+    </li>
+    ```
+  - **검증 명령:** `python3 -m http.server 5173 -d frontend`
+  - **기대 결과:** 브라우저에서 목록형 CRUD 화면이 렌더링된다.
+
+- [ ] **작업 10: README 실행/검증 문구를 CRUD 기준으로 갱신**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/README.md` (수정)
+  - **할 일:** 단일 조회 설명을 목록형 CRUD 예제 설명으로 바꾸고, 확인 포인트를 CRUD 흐름에 맞게 수정한다.
+  - **최소 구현 예시:**
+    ```markdown
+    - 백엔드 API: `http://127.0.0.1:8000/api/messages`
+    - 프론트엔드 화면: `http://127.0.0.1:5173`
+    - 정상 동작 시 메시지 추가, 수정, 삭제가 모두 가능하다.
+    ```
+  - **검증 명령:** `python3 -m py_compile backend/init_db.py backend/main.py`
+  - **기대 결과:** README만 읽어도 CRUD 예제 실행과 확인 방법을 이해할 수 있다.
+
+- [ ] **작업 11: 백엔드 문법과 API 흐름 검증**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/backend/init_db.py` (검증), `/Users/woozooni/Documents/trae_projects/skillDesk/backend/main.py` (검증)
+  - **할 일:** DB를 초기화하고, Python에서 API 함수를 직접 호출해 생성, 조회, 수정, 삭제 흐름이 모두 동작하는지 확인한다.
+  - **실행 명령:**
+    ```bash
+    python3 backend/init_db.py
+    python3 - <<'PY'
+    from backend.main import MessagePayload, create_message, delete_message, list_messages, update_message
+    print("LIST-1", list_messages())
+    created = create_message(MessagePayload(content="plan create"))
+    print("CREATED", created)
+    print("LIST-2", list_messages())
+    updated = update_message(created["id"], MessagePayload(content="plan update"))
+    print("UPDATED", updated)
+    print("LIST-3", list_messages())
+    print("DELETED", delete_message(created["id"]))
+    print("LIST-4", list_messages())
+    PY
+    ```
+  - **기대 결과:** 각 단계 출력에 따라 CRUD가 순서대로 성공한다.
+
+- [ ] **작업 12: 진단 점검 및 인라인 실행 정리**
+  - **대상 파일:** `/Users/woozooni/Documents/trae_projects/skillDesk/backend/main.py` (진단), `/Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js` (진단), `/Users/woozooni/Documents/trae_projects/skillDesk/README.md` (진단)
+  - **할 일:** 진단 도구로 오류를 확인하고 바로 수정한 뒤, 변경 파일과 실행 방법을 사용자에게 인계한다.
+  - **검증 도구:** IDE 진단 확인
+  - **기대 결과:** 새 오류 없이 CRUD 예제를 실행할 수 있는 상태로 마무리된다.
@@ -0,0 +1,155 @@
+# SQLite + FastAPI + Vue Hello World 구현 계획
+> **에이전트 작업자용:** 현재 세션에서 인라인으로 실행한다. Steps use checkbox (`- [ ]`) syntax for tracking.
+**Goal:** SQLite에 저장된 `'hello world'` 값을 FastAPI API를 통해 Vue 화면에 표시하는 최소 실행 예제를 만든다.
+**Architecture:** `backend/`에는 SQLite 초기화 스크립트와 FastAPI API를 두고, `frontend/`에는 Vite 기반 Vue 앱을 둔다. Vue는 `/api/message`를 호출해 DB 값을 받아 렌더링한다.
+**Tech Stack:** Python, FastAPI, sqlite3, uvicorn, Vue 3, Vite
+---
+
+### Task 1: 백엔드 기본 구조 만들기
+**Files:**
+- Create: `backend/requirements.txt`
+- Create: `backend/init_db.py`
+- Create: `backend/main.py`
+- Test: `python3 -m py_compile backend/init_db.py backend/main.py`
+
+- [ ] **Step 1: requirements 파일 작성**
+Content:
+```text
+fastapi
+uvicorn
+```
+Expected: 백엔드 설치 의존성이 명확해진다.
+
+- [ ] **Step 2: SQLite 초기화 스크립트 작성**
+Code should:
+```python
+import sqlite3
+from pathlib import Path
+```
+Behavior:
+- `app.db` 생성
+- `messages` 테이블 생성
+- 기존 데이터 삭제 후 `'hello world'` 삽입
+Expected: `python3 backend/init_db.py` 실행 시 DB 파일과 샘플 데이터가 생성된다.
+
+- [ ] **Step 3: FastAPI 앱 작성**
+Code should:
+```python
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+```
+Behavior:
+- `GET /api/message`
+- SQLite에서 첫 메시지 조회
+- 없으면 404 반환
+Expected: 앱이 JSON으로 `{ "message": "hello world" }`를 반환할 수 있다.
+
+- [ ] **Step 4: Python 문법 확인**
+Run:
+```bash
+python3 -m py_compile backend/init_db.py backend/main.py
+```
+Expected: 출력 없이 종료
+
+### Task 2: 프론트엔드 기본 구조 만들기
+**Files:**
+- Create: `frontend/package.json`
+- Create: `frontend/vite.config.js`
+- Create: `frontend/index.html`
+- Create: `frontend/src/main.js`
+- Test: `npm run build`
+
+- [ ] **Step 1: package.json 작성**
+Content should include:
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  }
+}
+```
+Expected: Vue/Vite 개발 및 빌드 명령이 준비된다.
+
+- [ ] **Step 2: Vite 프록시 설정 작성**
+Behavior:
+- `/api` 요청을 `http://127.0.0.1:8000`으로 프록시
+Expected: 프론트엔드에서 상대 경로로 API 호출 가능
+
+- [ ] **Step 3: index.html 작성**
+Behavior:
+- `#app` 마운트 포인트 제공
+Expected: Vue 앱이 정상적으로 마운트 가능
+
+- [ ] **Step 4: Vue 메인 앱 작성**
+Behavior:
+- 로딩 상태 표시
+- `/api/message` fetch
+- 성공 시 메시지 표시
+- 실패 시 에러 문구 표시
+Expected: 브라우저에서 `'hello world'`를 볼 수 있는 최소 화면이 구성된다.
+
+- [ ] **Step 5: 프론트엔드 빌드 확인**
+Run:
+```bash
+npm install
+npm run build
+```
+Expected: 빌드 성공
+
+### Task 3: 실행 문서 정리
+**Files:**
+- Modify: `README.md`
+- Test: 문서 진단 확인
+
+- [ ] **Step 1: README에 예제 실행 섹션 추가**
+Include:
+```markdown
+## SQLite + FastAPI + Vue 예제 실행
+```
+Details:
+- Python 가상환경 생성
+- 백엔드 의존성 설치
+- DB 초기화
+- FastAPI 실행
+- 프론트엔드 설치/실행
+- 접속 URL 안내
+Expected: 처음 보는 사용자도 따라 실행 가능
+
+### Task 4: 기본 동작 검증
+**Files:**
+- Modify: 필요 시 문제 있는 파일
+- Test: DB 초기화, Python 문법, 프론트엔드 빌드
+
+- [ ] **Step 1: DB 초기화 실행**
+Run:
+```bash
+python3 backend/init_db.py
+```
+Expected: `backend/app.db` 생성
+
+- [ ] **Step 2: FastAPI 의존성 설치 후 앱 import 확인**
+Run:
+```bash
+python3 -m venv .venv
+.venv/bin/pip install -r backend/requirements.txt
+.venv/bin/python -c "from backend.main import app; print(app.title)"
+```
+Expected: 앱 타이틀 출력
+
+- [ ] **Step 3: 프론트엔드 설치 및 빌드**
+Run:
+```bash
+npm install
+npm run build
+```
+Expected: 빌드 성공
+
+- [ ] **Step 4: 결과 요약 정리**
+Include:
+```text
+생성 파일
+실행 방법
+검증 결과
+```
+Expected: 사용자가 바로 실행을 이어갈 수 있다.