메뉴
KOIN 프로젝트에 새 기능을 추가하기 위한 구현 계획을 수립하는 스킬. 기능 요구사항 분석, API 설계, 컴포넌트 구조 결정, 파일 목록 생성을 담당한다. 새 기능 구현 계획, 기능 설계, 구현 범위 파악을 요청할 때 반드시 이 스킬을 사용할 것. 이미 계획이 있는 구현 작업에는 사용하지 않는다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
SonarCloud 이슈를 KOIN 프로젝트 컨벤션에 맞게 수정하는 스킬. TypeScript 타입 오류, React 패턴 개선, 보안 이슈 수정 방법을 제공한다. SonarCloud 이슈 수정, 코드 품질 개선, 정적 분석 이슈 해결을 요청할 때 반드시 이 스킬을 사용할 것. 새 기능 구현에는 사용하지 않는다.
KOIN 프로젝트의 기능 구현 계획을 실제 코드로 작성하는 스킬. TypeScript, React, SCSS, React Query, Zustand 패턴을 정확히 따르며 코드를 생성한다. 기능 구현, 코드 작성, API 연동, 컴포넌트 생성을 요청할 때 반드시 이 스킬을 사용할 것. 단순 버그 수정에는 사용하지 않는다.
KOIN 프로젝트의 코드 변경사항을 git 커밋하고 GitHub Pull Request를 생성하는 스킬. 브랜치 생성, 커밋, gh CLI를 통한 PR 작성을 담당한다. PR 생성, GitHub PR 작성, 브랜치 커밋, 풀 리퀘스트를 요청할 때 반드시 이 스킬을 사용할 것. 코드 작성이나 수정에는 사용하지 않는다.
KOIN 프로젝트의 두 가지 AI 파이프라인을 조율하는 오케스트레이터 스킬. (1) SonarCloud 코드 품질 분석 → 이슈 수정 → PR 생성 파이프라인, (2) 기능 요구사항 분석 → 코드 구현 → 검증 → PR 생성 파이프라인을 자동으로 실행한다. "SonarCloud 분석해줘", "SonarCloud 이슈 수정해줘", "코드 품질 개선해줘", "기능 구현해줘", "새 기능 추가해줘", "PR 만들어줘", "파이프라인 실행", "다시 실행", "재실행", "이전 결과 개선", "업데이트" 등의 요청 시 반드시 이 스킬을 사용할 것.
KOIN 프로젝트 코드 변경사항의 품질을 검증하는 스킬. TypeScript 타입 정합성, KOIN 컨벤션 준수, SSR 안전성, 에러 핸들링 패턴을 경계면 교차 비교로 검증한다. 코드 검증, QA, 품질 확인, 리뷰, 수정 검토를 요청할 때 반드시 이 스킬을 사용할 것. 초기 코드 작성에는 사용하지 않는다.
SonarCloud에서 KOIN 프로젝트 코드 이슈를 조회하고 분류하는 스킬. SonarCloud API 호출, 이슈 파싱, 수정 배치 생성을 수행한다. SonarCloud 분석, 이슈 조회, 코드 품질 확인, 정적 분석 결과 파싱 등을 요청할 때 반드시 이 스킬을 사용할 것. 단순 lint 실행이나 ESLint 관련 작업에는 사용하지 않는다.
| name | feature-planning |
| description | KOIN 프로젝트에 새 기능을 추가하기 위한 구현 계획을 수립하는 스킬. 기능 요구사항 분석, API 설계, 컴포넌트 구조 결정, 파일 목록 생성을 담당한다. 새 기능 구현 계획, 기능 설계, 구현 범위 파악을 요청할 때 반드시 이 스킬을 사용할 것. 이미 계획이 있는 구현 작업에는 사용하지 않는다. |
새 기능이 어느 도메인에 속하는지 먼저 판단한다:
| 도메인 | 경로 | 특성 |
|---|---|---|
| 시간표 | src/api/timetable/, src/pages/timetable/ | 복잡한 상태 관리 (Zustand) |
| 버스 | src/api/bus/, src/pages/bus/ | 실시간 데이터, SSE |
| 식당 | src/api/dinings/, src/pages/cafeteria/ | 날짜 기반 필터링 |
| 커뮤니티 | src/api/articles/, src/pages/articles/ | 인증 필요, 페이지네이션 |
| 가게 | src/api/store/, src/pages/store/ | 검색/필터 |
| 클럽 | src/api/club/, src/pages/clubs/ | 좋아요, 카테고리 |
계획 수립 전에 반드시 유사한 기능을 탐색한다:
# 유사 도메인의 파일 구조 확인
ls src/api/[similar-domain]/
ls src/components/[SimilarFeature]/
# 참조할 패턴 파악
cat src/api/[similar-domain]/APIDetail.ts
cat src/api/[similar-domain]/queries.ts
// src/api/[domain]/APIDetail.ts
export class GetFeatureList implements APIRequest<FeatureListResponse> {
path = '/feature';
method = HTTP_METHOD.GET;
params: { page: number; size: number };
auth = false; // 인증 필요 시 true
}
export class PostFeature implements APIRequest<FeatureResponse> {
path = '/feature';
method = HTTP_METHOD.POST;
data: CreateFeatureRequest;
auth = true;
}
src/components/[FeatureName]/
├── index.tsx # 메인 컴포넌트
├── [FeatureName].module.scss # 스타일
├── hooks/
│ └── use[FeatureName].ts # 데이터 페칭 훅
├── PCView/ # PC 전용 뷰 (레이아웃이 크게 다를 때)
│ └── PCView.tsx
└── MobileView/ # 모바일 전용 뷰
└── MobileView.tsx
| 상황 | 선택 |
|---|---|
| 서버 데이터 조회/캐싱 | React Query (useSuspenseQuery) |
| 조건부 페칭, 백그라운드 갱신 | React Query (useQuery) |
| 전역 UI 상태 (모달, 사이드바) | Zustand |
| 복잡한 폼 | react-hook-form |
| 단순 컴포넌트 내부 상태 | useState |
다음 조건 중 하나라도 해당하면 SSR:
SSR 페이지는:
getServerSideProps 사용SSRLayout 사용HydrationBoundary로 React Query 상태 전달