자주 쓰는 명령어를 슬래시명령어로 만들 수 있다.

기본 추가 방법

/[명령어] 로 수행하는 명령어를 만든다.

• 방법: .claude/commands/ 하위에 md 파일을 생성하자!
• 예) .claude/commit.md -> /commit 명령어로 수행

Namespace 기능 추가 방법

/[namespace]:[명령어] 로 수행하는 명령어를 만든다.

• 방법: .claude/[디렉토리]/commands/ 하위에 md 파일을 생성하자!
• 예) .claude/git/commit.md -> /git:commit 명령어로 수행

동적 파라미터

명령어 수행 시 동적 파라미터를 넘길 수 있다.

• 예1) /git:commit [커밋메시지] <-- 동적 파라미터
• 예2) /git:commit [파라미터1][파라미터2] [파라미터3]...

커스텀 커맨드 예시 (.md 파일)

---
description: 새로운 React 함수형 컴포넌트 생성
argument-hint: ["Component Name (e.g.: Button, Card, UserProfile)"]
---

# add-component/

이 명령은 새로운 React 함수형 컴포넌트를 생성합니다.

### 명령어 정의
echo '새로운 컴포넌트 파일 $ARGUMENTS를 생성하세요.' > .claude/commands/add-component.md

## 사용법

```
/add-component ComponentName
```

#ARGUMENTS는 "ComponentName"이 됩니다.

## 예시

```
/add-component Button
/add-component Card
/add-component UserProfile
```

---

## 구현

주어진 컴포넌트 이름으로 다음을 수행합니다:

1. 파일 경로 생성: `components/{ComponentName}.tsx`
2. React 함수형 컴포넌트 기본 템플릿 생성
3. TypeScript 타입 정의 포함
4. Tailwind CSS 클래스 예시 추가
5. 파일 저장 후 에디터에서 자동으로 열기

## 생성되는 파일 예시

**컴포넌트 이름**: Button

```tsx
"use client";

import { ReactNode } from "react";
import { cn } from "@/lib/utils";

interface ButtonProps {
  children: ReactNode;
  className?: string;
  /**
   * 버튼의 타입
   */
  type?: "button" | "submit" | "reset";
  /**
   * 클릭 이벤트 핸들러
   */
  onClick?: () => void;
}

/**
 * Button 컴포넌트
 * @param {ButtonProps} props - 버튼 Props
 * @returns {ReactNode} 렌더링된 버튼
 */
export function Button({
  children,
  className,
  type = "button",
  onClick,
}: ButtonProps) {
  return (
    <button
      type={type}
      onClick={onClick}
      className={cn(
        "px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
        className
      )}
    >
      {children}
    </button>
  );
}
```

## 주의사항

- 이미 존재하는 파일은 덮어쓰지 않습니다.
- 컴포넌트 이름은 PascalCase로 작성해야 합니다.
- 생성된 파일은 TypeScript와 Tailwind CSS를 사용합니다.