Convention
파일 및 폴더 명명 규칙
올라핀테크 프론트엔드 프로젝트 내에서 지켜야하는 네이밍 규칙을 서술합니다.
파일 및 폴더 명명 규칙
폴더명
- kebab-case 사용
- 명확하고 의미 있는 이름 사용
✅ user-profile/
✅ apply-histories/
✅ account-copy-confirm-modal/
❌ UserProfile/
❌ applyHistories/파일명
컴포넌트 파일
- kebab-case +
.tsx확장자 - 폴더 기반 구조에서는
index.tsx사용
✅ draggable-bottom-sheet.tsx
✅ responsive-modal/index.tsx
✅ use-breakpoint.ts
❌ DraggableBottomSheet.tsx
❌ ResponsiveModal.tsx유틸리티 및 헬퍼 파일
- kebab-case +
.ts확장자
✅ generate-path.ts
✅ handle-action.ts
✅ tailwind-theme.ts상수 파일
- kebab-case +
.ts확장자
✅ constants.ts
✅ query-key.ts
✅ api-signature.tsZod 공통 스키마 파일
- kebab-case +
-schema.ts접미사
✅ password-schema.ts
✅ business-number-schema.ts
✅ api-response.ts디렉터리 기반 컴포넌트 구조
- 디렉터리 기반 컴포넌트 구조는 컴포넌트에 필요한 코드 파일들을 디렉터리 한 곳에 묶어 응집시켜 놓은 방식을 말함.
index.tsx또는index.ts를 진입점으로 사용:
account-copy-confirm-modal/
├── index.tsx # 메인 컴포넌트 (export)
├── account-copy-confirm-failed.tsx # 하위 컴포넌트
├── account-copy-confirm-form.tsx # 하위 컴포넌트
└── use-account-copy-ocr-modal.ts # 관련 훅