---
name: "PICKIT: Build"
description: PICKIT 기능을 실제로 구현합니다. 프론트엔드(pickit.js/Next.js)와 백엔드(FastAPI/PostgreSQL)를 분리해 병렬 개발합니다.
category: PICKIT Workflow
tags: [pickit, implementation, build]
---

# PICKIT Build

PICKIT 기능을 구현합니다.

**입력**: `/pickit:build <기능명 또는 계획 파일명>`  
예: `/pickit:build 리뷰-llm-요약` 또는 `/pickit:build` (계획 목록에서 선택)

---

## 컨텍스트

**레이어별 담당 에이전트**:
- `pickit.js` 수정, 넛지 UI, 카페24 DOM → **frontend-dev 에이전트**
- FastAPI 엔드포인트, DB 마이그레이션, LLM 호출 코드 → **backend-dev 에이전트**
- Next.js 대시보드 UI → **frontend-dev 에이전트**

**PICKIT 코딩 규칙**:
- `pickit.js`: eval() 금지, innerHTML 금지 (textContent만), PII 수집 금지, IIFE 구조 유지
- FastAPI: 모든 엔드포인트에 Rate Limiting, 화이트리스트 기반 이벤트 검증
- LLM 호출: Gemini API (`gemini-2.0-flash`), 응답 1.5초 초과 시 정적 폴백, Redis 캐싱 필수
- DB: `product_no + shop_id` 복합 키 사용, 멤버 ID는 암호화값만 저장

---

## 단계

1. **계획 파일 확인**

   `pickit/plans/` 디렉토리에서 해당 계획 파일 읽기.  
   없으면: "먼저 `/pickit:plan {기능명}`으로 계획을 수립해주세요."

2. **작업 분류**

   계획 파일 분석 후 작업을 두 트랙으로 분류:

   **트랙 A — 클라이언트/프론트엔드**:
   - pickit.js 신호 수집 코드
   - 넛지 UI 컴포넌트 (pickit.css)
   - Next.js 대시보드 컴포넌트

   **트랙 B — 백엔드/DB**:
   - FastAPI 엔드포인트
   - DB 스키마 마이그레이션
   - LLM 호출 코드 (llm.py)
   - 카페24 API 연동 코드

3. **병렬 구현**

   두 트랙이 독립적이면 Agent 툴로 동시 실행:

   **frontend-dev 에이전트 프롬프트**:
   ```
   PICKIT 프로젝트의 {기능명} 클라이언트 파트를 구현해주세요.

   구현 대상:
   {트랙 A 작업 목록}

   핵심 규칙:
   - pickit.js는 순수 JS IIFE 구조 (외부 라이브러리 없음)
   - innerHTML 대신 textContent, createElement 사용
   - 카페24 선택자: button#actionCart, span#actionBuy, .btnSubmit.sizeS, input#quantity
   - 로그인 판별: document.cookie.match(/iscache=F/)
   - 멤버 ID: CAFE24.FRONT_EXTERNAL_SCRIPT_VARIABLE_DATA.common_member_id_crypt

   참조 파일: client/pickit.js, pickit.css, PICKIT_DEV_PLAN_v2.md
   ```

   **backend-dev 에이전트 프롬프트**:
   ```
   PICKIT 프로젝트의 {기능명} 백엔드 파트를 구현해주세요.

   구현 대상:
   {트랙 B 작업 목록}

   핵심 규칙:
   - FastAPI + Pydantic, Railway PostgreSQL
   - LLM: google-genai 패키지, gemini-2.0-flash 모델, GEMINI_API_KEY 환경변수
   - 모든 LLM 응답은 JSON 파싱 후 Redis 캐싱 (키: nudge:{shop_id}:{rule_id}:{product_no}, TTL 1시간)
   - 폴백: LLM 실패 또는 timeout 시 nudge_copy.json에서 정적 카피 반환
   - 에러 응답: {"error": "ERROR_CODE", "message": "한국어 메시지"}

   참조 파일: server/main.py, server/llm.py, data/schema.sql, PICKIT_DEV_PLAN_v2.md
   ```

4. **통합 확인**

   양쪽 구현 완료 후:
   - 클라이언트 → 서버 API 호출 스펙 일치 여부 확인
   - DB 스키마 변경이 있으면 `data/schema.sql` 업데이트 확인
   - rules.json 변경이 있으면 nudge_copy.json 폴백 매핑 확인

5. **완료 안내**

   > "구현 완료. `/pickit:debug`로 QA 테스트를 진행하거나 `/pickit:nudge-gen`으로 넛지 카피를 생성할 수 있습니다."