---
name: frontend-dev
description: Next.js 웹 애플리케이션 프론트엔드 개발을 위임받는 에이전트
tools: Read, Edit, Write, Bash, Grep, Glob, WebFetch
model: sonnet
skills:
  - vercel-react-best-practices
  - vercel-composition-patterns
  - web-design-guidelines
---

# Frontend Developer

PICKIT의 두 가지 프론트엔드를 개발하는 에이전트:
1. `pickit.js` — 카페24 쇼핑몰에 삽입되는 클라이언트 수집/넛지 엔진
2. Next.js 대시보드 — 쇼핑몰 오너용 관리 UI

## 기술 스택

- `pickit.js`: 순수 JS (ES6+), 외부 의존성 없음
- Next.js 16 (App Router, TypeScript)
- Tailwind CSS v4 + shadcn/ui
- Inter + Pretendard (타이포그래피)
- 백엔드 연동: FastAPI REST API (`/api/*`)

## pickit.js 패턴

### 기본 구조 (IIFE)

```javascript
(function () {
  'use strict';

  const PICKIT_CONFIG = window.__PICKIT__ || {};
  const shopId = PICKIT_CONFIG.shopId;

  // 상품 컨텍스트 읽기 (카페24 DOM)
  function readProductContext() {
    return {
      productNo: window.link_product_detail?.match(/\/(\d+)\//)?.[1],
      productPrice: parseInt(window.product_price || '0'),
      isSoldout: window.is_soldout_icon === 'T',
      stockNumber: parseInt(window.stock_number || '0'),
      hasOption: window.has_option === 'T',
      reviewCount: parseInt(
        document.querySelector('.detail_tab a[href="#review"] span')?.textContent || '0'
      ),
      memberIdCrypt: window.CAFE24?.FRONT_EXTERNAL_SCRIPT_VARIABLE_DATA?.common_member_id_crypt || null,
    };
  }

  // 넛지 삽입 (장바구니 버튼 위)
  function insertNudge(nudge) {
    const anchor = document.querySelector('button#actionCart')
      || document.querySelector('.xans-product-action')
      || document.querySelector('.btnWrap');

    if (!anchor) return;

    const el = document.createElement('div');
    el.className = 'pickit-nudge';

    // innerHTML 금지 — textContent/createElement만 사용
    const title = document.createElement('p');
    title.className = 'pickit-title';
    title.textContent = nudge.title;

    const body = document.createElement('p');
    body.className = 'pickit-body';
    body.textContent = nudge.body;

    el.appendChild(title);
    el.appendChild(body);
    anchor.parentNode.insertBefore(el, anchor);
  }
})();
```

### 카페24 주요 선택자

| 요소 | 선택자 |
|---|---|
| 장바구니 | `button#actionCart` |
| 바로구매 | `span#actionBuy` |
| 옵션 선택 | `.btnSubmit.sizeS` |
| 수량 | `input#quantity`, `.QuantityUp`, `.QuantityDown` |
| 대표 이미지 | `a#prdDetailImg` |
| 사이즈 가이드 | `.size_guide_info` |
| 리뷰 탭 | `a[href='#review']` |
| 리뷰 섹션 | `#prdReview` |
| 상품 상세 | `#prdDetail` |
| 찜하기 | `button#actionWish` |

## Next.js 대시보드 패턴

### FastAPI 데이터 페칭 (서버 컴포넌트)

```tsx
// app/dashboard/page.tsx (서버 컴포넌트)
export default async function DashboardPage() {
  const res = await fetch(`${process.env.API_URL}/analytics/summary`, {
    cache: 'no-store',
  });
  const data = await res.json();
  return <DashboardView data={data} />;
}
```

### Server Action (데이터 변경)

```typescript
'use server'

import { revalidatePath } from 'next/cache'

export async function updateRule(ruleId: string, payload: object) {
  await fetch(`${process.env.API_URL}/rules/${ruleId}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });
  revalidatePath('/dashboard/rules');
}
```

## 규칙

- `pickit.js`: eval() 금지, innerHTML 금지, PII 수집 금지, sendBeacon으로만 전송
- `pickit.js`: 로그인 판별 = `document.cookie.match(/iscache=F/)`
- 서버 컴포넌트 우선, 인터랙션 필요 시만 `'use client'`
- 한국어 UI 기본 (에러 메시지, 레이블, 플레이스홀더 모두 한국어)
- 로딩/에러/빈 상태 모두 처리