SKILL.md

--- frontmatter

name: pf-feature
description: 기능 개발 전체 플로우. "기능 개발", "새 기능", "feature" 요청 시 사용.
allowed-tools: Read, Write, Bash, Glob, Grep

PF 기능 개발 플로우

$ARGUMENTS 기능을 체계적으로 개발합니다.

개발 플로우

code

1. 요구사항 분석
   ↓
2. 브랜치 생성
   ↓
3. 설계 & 계획
   ↓
4. 구현
   ↓
5. 테스트
   ↓
6. 코드 리뷰 준비
   ↓
7. PR 생성

1단계: 요구사항 분석

체크리스트

• 기능의 목적이 명확한가?
• 사용자 시나리오가 정의되었는가?
• 성공 기준이 있는가?
• 의존성이 있는 다른 기능이 있는가?
• 디자인/기획 문서가 있는가?

질문할 것

code

- 이 기능의 주요 사용자는 누구인가?
- 예외 상황은 어떻게 처리하나?
- 성능 요구사항이 있는가?
- 접근성 요구사항이 있는가?

2단계: 브랜치 생성

bash

# 브랜치 네이밍 규칙
# feature/이슈번호-간단한설명
git checkout -b feature/123-user-profile

# 또는 이슈 없이
git checkout -b feature/add-dark-mode

3단계: 설계 & 계획

컴포넌트 설계

code

기능: 사용자 프로필 페이지

컴포넌트 구조:
pages/profile/
├── index.tsx           # 페이지 진입점
├── components/
│   ├── ProfileHeader.tsx
│   ├── ProfileForm.tsx
│   └── AvatarUpload.tsx
├── hooks/
│   └── useProfile.ts
└── types.ts

필요한 API:
- GET /users/me
- PUT /users/me
- POST /users/avatar

상태 관리:
- useProfileStore (Zustand)
- 또는 로컬 상태로 충분

작업 분해

code

[ ] 1. 타입 정의 (types.ts)
[ ] 2. API 서비스 함수 (services/profile.service.ts)
[ ] 3. ProfileHeader 컴포넌트
[ ] 4. ProfileForm 컴포넌트
[ ] 5. AvatarUpload 컴포넌트
[ ] 6. 페이지 조합
[ ] 7. 라우트 추가
[ ] 8. 테스트 작성

4단계: 구현

순서

•타입 정의

tsx

// types.ts
export interface UserProfile {
  id: number;
  name: string;
  email: string;
  avatar?: string;
}

export interface UpdateProfileDto {
  name?: string;
  email?: string;
}

•API 서비스

tsx

// services/profile.service.ts
export const profileService = {
  getProfile: () => apiClient.get<UserProfile>("/users/me"),
  updateProfile: (data: UpdateProfileDto) => apiClient.put<UserProfile>("/users/me", data),
  uploadAvatar: (file: File) => apiClient.upload<{ url: string }>("/users/avatar", file),
};

•컴포넌트 구현

tsx

// 기본 구조 먼저, 스타일은 나중에
function ProfileForm({ profile, onSubmit }) {
  // 1. 상태 및 로직
  // 2. 핸들러
  // 3. 렌더링
}

•페이지 조합

tsx

// pages/profile/index.tsx
export default function ProfilePage() {
  const { data: profile, isLoading } = useProfile();

  if (isLoading) return <ProfileSkeleton />;

  return (
    <div className="container mx-auto py-8">
      <ProfileHeader profile={profile} />
      <ProfileForm profile={profile} />
    </div>
  );
}

•라우트 추가

tsx

// routes/index.tsx
const ProfilePage = lazy(() => import("@/pages/profile"));

<Route path="/profile" element={<ProfilePage />} />;

5단계: 테스트

실행

bash

# 개발 서버로 수동 테스트
pnpm --filter 앱이름 dev

# 린트
pnpm lint

# 타입 체크
pnpm tsc --noEmit

테스트 작성 (권장)

bash

# 컴포넌트 테스트 생성
/pf-test-component ProfileForm

6단계: 코드 리뷰 준비

자체 점검

bash

# 코드 리뷰 스킬 사용
/pf-code-review src/pages/profile

체크리스트

7단계: PR 생성

bash

# 변경사항 커밋
git add .
git commit -m "feat: add user profile page

- Add profile page with header and form
- Add avatar upload functionality
- Add profile API service"

# 푸시
git push -u origin feature/123-user-profile

# PR 생성
gh pr create --title "feat: 사용자 프로필 페이지 추가" --body "
## 개요
사용자 프로필 조회/수정 페이지 구현

## 변경사항
- 프로필 페이지 UI
- 아바타 업로드 기능
- 프로필 수정 API 연동

## 테스트
- [ ] 프로필 조회 확인
- [ ] 프로필 수정 확인
- [ ] 아바타 업로드 확인
- [ ] 모바일 반응형 확인

## 스크린샷
(스크린샷 첨부)

## 관련 이슈
Closes #123
"

빠른 명령어 참고

bash

# 새 앱 생성
pnpm turbo gen app

# 특정 앱 실행
pnpm --filter 앱이름 dev

# 빌드 테스트
pnpm --filter 앱이름 build

# 스토리북
pnpm storybook