Figma 퍼블리싱 파이프라인 05. 실행 예시: 운영 관리 상세 - 제품 관리 탭

# 요청 형식
퍼블리싱해줘 https://www.figma.com/design/MiI74Bwt1BQ89xxzaMQ81u/...?node-id=19838-69031 --report

python3 .claude/scripts/figma_analyze.py "<FIGMA_URL>" \
  --app admin --out /tmp/figma_spec.json

apps/admin/src/app/(auth)/shopping-mall-management/management/[managementId]/_source/components/product-management/
├── product-management.tsx (메인)
├── product-management-control.tsx (필터)
└── product-management-table.tsx (테이블) ← 주요 변경

활성 탭: "상품 관리" (border-b-2, grey.10)
비활성 탭: 5개 (grey.5)
폰트: SemiBold, 14px
간격: px=40px, gap=20px

python3 .claude/scripts/figma_analyze.py "<FIGMA_URL>" \
  --app admin --out /tmp/figma_spec.json

{
  "tableColumns": [
    {
      "name": "상태",
      "width": "fixed(120px)",
      "component": "StatusBadge"
    },
    {
      "name": "상품 정보",
      "width": "fixed(272px)",
      "structure": "ImageAsNext(40x40px) + Text(lineClamp=2)"
    },
    {
      "name": "카테고리",
      "width": "flex-1",
      "component": "Text(pre-caption-2)"
    },
    {
      "name": "상품 가격",
      "width": "flex-1",
      "component": "Text(pre-caption-1, localeString)"
    },
    {
      "name": "구매 확정 수",
      "width": "flex-1",
      "component": "Text(pre-caption-1, localeString)"
    },
    {
      "name": "전환율",
      "width": "flex-1",
      "component": "Text(pre-caption-1) + % suffix"
    },
    {
      "name": "광고 집행 기간",
      "width": "flex-1",
      "component": "Text(pre-caption-2, yyyy. MM. dd. ~)"
    },
    {
      "name": "상세",
      "width": "fixed(90px)",
      "component": "Icon Button(CaretRight)"
    }
  ],
  "rowHeight": "56px",
  "rowBgColor": "rgba(234, 255, 233, 0.3)"
}

// BEFORE
const columns: TableColumn<MockProductManagementItem>[] = [
  {
    key: 'status',
    label: '광고 상태', // "상태"로 변경
    width: { type: 'fixed', value: 120 },
  },
  {
    key: 'productName',
    label: '상품명', // "상품 정보"로 변경
    width: { type: 'fixed', value: 440 }, // 272로 변경
    render: (item) => (
      <ImageAsNext
        w="62px" // 40px로 변경
        h="62px" // 40px로 변경
      />
    ),
  },
  // ... 기존 컬럼들
  {
    key: 'commissionRate', // 삭제
    label: '판매 수수료율', // 삭제
  },
]
 
// AFTER
const columns: TableColumn<MockProductManagementItem>[] = [
  {
    key: 'status',
    label: '상태', // 변경
    width: { type: 'fixed', value: 120 },
  },
  {
    key: 'productName',
    label: '상품 정보', // 변경
    width: { type: 'fixed', value: 272 }, // 변경
    render: (item) => (
      <ImageAsNext
        w="40px" // 변경
        h="40px" // 변경
      />
    ),
  },
  {
    key: 'purchaseConfirmCount', // 신규
    label: '구매 확정 수',
    render: (item) => (
      <Text>{item.purchaseConfirmCount.toLocaleString()}</Text>
    ),
  },
  {
    key: 'conversionRate', // 신규
    label: '전환율',
    render: (item) => {
      const conversionRate = item.clickCount > 0
        ? Math.round((item.purchaseConfirmCount / item.clickCount) * 100)
        : 0
      return <Text>{conversionRate}%</Text>
    },
  },
  {
    key: 'startedAt',
    label: '광고 집행 기간', // 변경
  },
]

// BEFORE
getRowProps={() => ({ className: 'group', h: '78px' })}
 
// AFTER
getRowProps={() => ({
  className: 'group',
  h: '56px', // 변경
  bg: 'rgba(234, 255, 233, 0.3)' // 추가
})}

// BEFORE
export interface MockProductManagementItem {
  // ... 기존 필드들
  commissionRate: number
  // ... 
}
 
// AFTER
export interface MockProductManagementItem {
  // ... 기존 필드들
  conversionRate?: number // 추가 (렌더링 시 계산됨)
  // ...
}

pnpm type-check

퍼블리싱 완료!
 
타입 검사 통과
컴포넌트 렌더링 검증 완료
Mock 데이터 검증 완료