Menu
이 문서는 react의 컴포넌트를 만들 때 지켜야하는 폴더/index.tsx 방식의 colocation 패턴을 정의합니다. 컴포넌트를 새롭게 만들어야 하거나, 기존의 컴포넌트를 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
해당 프로젝트의 도메인 지식에 대한 정리 파일입니다. 이 서비스의 도메인에 대한 개념이 필요한 경우 이 스킬을 사용하세요.
이 문서는 react의 커스텀 훅을 만들 때 지켜야하는 패턴을 정의합니다. 커스텀 훅을 새롭게 만들어야 하거나, 기존의 훅을 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요.
이 문서는 react의 컴포넌트를 만들 때 지켜야하는 추상화 레벨을 정의합니다. 컴포넌트를 새롭게 만들어야 하거나, 기존의 컴포넌트를 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요.
| name | component-colocation-pattern |
| description | 이 문서는 react의 컴포넌트를 만들 때 지켜야하는 폴더/index.tsx 방식의 colocation 패턴을 정의합니다. 컴포넌트를 새롭게 만들어야 하거나, 기존의 컴포넌트를 리팩토링해야할 때, 그리고 코드리뷰를 진행할 때 이 스킬을 사용하세요. |
이 스킬은 모든 컴포넌트들 해당 프로젝트에서 지켜져야하는 컴포넌트 콜로케이션 패턴을 정의합니다.
모든 컴포넌트는 아래의 콜로케이션 패턴을 지켜야만 합니다. 각 컴포넌트는 자신의 폴더를 가지며, 해당 폴더 내에 index.tsx 파일을 통해 익스포트됩니다.
컴포넌트에서 사용되는 스타일 파일, 유틸 파일, 서브 컴포넌트 파일, 커스텀 훅 등은 모두 해당 컴포넌트 폴더 내에 위치해야 합니다.
index.tsx 파일에서 컴포넌트의 메인 구현을 익스포트하며, 다른 파일들은 컴포넌트 내부에서만 사용됩니다.
src/
├── components/
│ ├── Button/
│ │ ├── index.tsx # Button 컴포넌트 구현
│ │ ├── components/
│ │ | ├── ButtonIcon.tsx # Button 컴포넌트의 서브 컴포넌트
│ │ | ├── ButtonLoaderFallback.tsx # Button 컴포넌트의 로딩 상태 폴백
│ │ | ├── ButtonErrorFallback.tsx # Button 컴포넌트의 에러 상태 폴백
│ │ ├── utils/
│ │ | ├── index.ts # Button 유틸 함수 익스포트
| | | └── helpers.ts # Button 헬퍼 함수 구현
│ │ ├── styles.ts # Button 스타일
│ │ └── hooks/
| | └── useSubmit.ts # Button 관련 커스텀 훅
│ └── Card/
│ └── index.tsx # Card 컴포넌트 구현