Component Creator

ARGUMENT 확인

$ARGUMENTS 없음 → 질문:
"어떤 컴포넌트를 만들까요?
- 이름 (예: UserCard, useProductFilter)
- 역할/기능 설명
- 위치 (경로 힌트, 없으면 자동 판단)"

$ARGUMENTS 있음 → 다음 단계 진행

컴포넌트 유형 판단

워크플로우

Phase 1: 프로젝트 패턴 추출

기존 컴포넌트를 직접 읽어 패턴을 확정한다. 이 단계의 결과가 Phase 3의 실제 템플릿이 된다.

1-1. 컴포넌트 후보 탐색 (병렬):

// 유사한 컴포넌트가 있을 법한 경로를 병렬 탐색
Task(
  (subagent_type = 'explore'),
  (model = 'sonnet'),
  (prompt = `
  아래 경로에서 가장 최근에 수정된 컴포넌트 2개를 찾아 전체 코드를 읽어라:
  - src/components/
  - src/features/ 또는 src/domains/ 또는 src/views/
  - src/app/ 또는 src/pages/ (페이지 요청 시)
  - src/hooks/ (훅 요청 시)

  없으면 src/ 전체에서 가장 일반적인 .tsx 파일 2개를 찾아라.
`),
);

1-2. 패턴 스펙 확정:

탐색 결과를 바탕으로 아래 항목을 확정한다. 불명확하면 실제 코드에서 보이는 대로 따른다.

Phase 2: 생성 계획 출력

Phase 1에서 확정된 패턴 스펙을 포함해서 출력한다:

## 생성 계획: {컴포넌트명}

- 유형: {UI 컴포넌트 / 도메인 컴포넌트 / 페이지 / 훅}
- 경로: {생성 위치}
- 참조한 기존 컴포넌트: {경로}

### 적용할 패턴 스펙

- 파일 구조: {index.tsx 단일 / index.tsx + styled.ts / index.tsx + styled.ts + types.ts}
- 스타일링: {@emotion/styled / styled-components / css modules / 없음}
- Props 타입: {interface / type} → {같은 파일 / types.ts 분리}
- export: {named / default}
- 'use client': {있음 / 없음}

### 생성 파일

- {파일1}: {역할}
- {파일2}: {역할}

생성할까요? [Y/n]

Phase 3: 파일 생성

Phase 1에서 추출한 패턴 스펙을 그대로 따른다. 아래 예시는 참고용이며, 실제 파일은 스펙에 따라 다르게 생성된다.

예: Phase 1에서 named export, @emotion/styled, types.ts 분리, 'use client' 없음 패턴이 확인됐다면:

// {Name}/index.tsx  ← 'use client' 없음 (스펙에 따라)
import type { {Name}Props } from './types'    // types.ts 분리 (스펙에 따라)
import * as S from './styled'

export function {Name}({ ... }: {Name}Props) {  // named export (스펙에 따라)
  return <S.Container>...</S.Container>
}

// {Name}/styled.ts  ← @emotion/styled (스펙에 따라)
import styled from '@emotion/styled';
export const Container = styled.div``;

// {Name}/types.ts  ← 분리 (스펙에 따라)
export interface {Name}Props { ... }  // interface (스펙에 따라)

훅인 경우도 동일하게 기존 훅 파일을 읽어 패턴을 따른다.

생성 중 패턴 참조가 필요한 경우:

• ref prop 또는 ComponentProps 사용 → ../../rules/references/typescript/ts-react-nextjs.md 읽기 (React 19 방식)
• Brand Types, Conditional Types 등 심화 타입 → ../../rules/references/typescript/ts-type-patterns.md 읽기

Phase 4: 연관 파일 업데이트

생성 후 필요 시:

• index.ts (barrel export) 업데이트
• 라우트 파일 등록 (페이지인 경우)
• 스토리북 파일 생성 (프로젝트에 storybook이 있는 경우)

Phase 5: 검증

패키지 매니저: lock 파일 기준 자동 감지 — yarn.lock → yarn, pnpm-lock.yaml → pnpm, package-lock.json → npm (없으면 npm)

{패키지매니저} tsc --noEmit
{패키지매니저} lint

타입 오류나 import 누락이 없는지 확인한다.

금지 패턴

참조 문서