프로젝트 전반적인 구조

project-root/
├─ public/               // 정적 파일 (이미지, 아이콘, 폰트)
│  └─ images/
│
├─ src/                  // 애플리케이션 소스 코드
│
├─ .vscode/              // VSCode 설정
├─ .gitignore
├─ .prettierrc
├─ eslint.config.js
├─ package.json
├─ package-lock.json
├─ README.md
└─ vite.config.js

src 폴더 하위 구조

• 컴포넌트, 페이지, custom hook, 유틸, 스타일 등 폴더 등을 포함해주세요

src/
├─ assets/            // 이미지, 폰트 등 정적 리소스
├─ components/        // 공통 UI 컴포넌트
│  ├─ Layout/         // 레이아웃 관련 컴포넌트
│  │  └─ index.jsx + Layout.module.css
│  ├─ Button/         // 버튼 관련 컴포넌트
│  │  └─ 여러 버튼 컴포넌트 + Button.module.css
│  └─ ...             // 기타 재사용 가능한 컴포넌트
│
├─ pages/             // 페이지 단위 컴포넌트
│  ├─ Home/
│  │  └─ index.jsx + Home.module.css
│  ├─ Login/
│  ├─ CompanyDetail/
│  └─ ...             // 추가 페이지
│
├─ hooks/             // 커스텀 훅
├─ utils/             // 공통 유틸 함수
├─ api/               // API 호출 및 서비스 함수
├─ styles/            // 글로벌 CSS
│  └─ global.css
├─ main.jsx           // 엔트리 포인트
└─ App.jsx            // 루트 컴포넌트

컴포넌트 구조 (공통 컴포넌트 및 일반 컴포넌트)

• 위치: src/components/
• 네이밍 규칙:
  • 컴포넌트 파일: PascalCase → Button.jsx, Header.jsx
  • 컴포넌트 폴더: PascalCase → Button/, Layout/
  • CSS 모듈: 컴포넌트 이름 + .module.css → Button.module.css
  • 작은 UI 컴포넌트는 접두사 사용 가능 → UICard.jsx

components/
├─ Layout/
│  ├─ index.jsx        // Layout 컴포넌트
│  └─ Layout.module.css
├─ Button/
│  ├─ LargeButton.jsx
│  ├─ MediumButton.jsx
│  ├─ OutlineButton.jsx
│  └─ Button.module.css
└─ ...

스타일 파일 구조

• 위치:
  • 글로벌: src/styles/global.css
  • 컴포넌트별 모듈 CSS: 각 컴포넌트 폴더 내 (ComponentName.module.css)
• 네이밍 규칙:
  • 글로벌: kebab-case 또는 global.css
  • 모듈 CSS: PascalCase + .module.css
• 전처리기 사용 여부: 필요시 SCSS 가능 (ComponentName.module.scss)

styles/
└─ global.css          // 전체 스타일, reset, 공통 변수
components/Button/
└─ Button.module.css   // 컴포넌트 전용 스타일

유틸리티 및 서비스 파일 구조

• 유틸리티 파일 위치: src/utils/
• 서비스(API) 파일 위치: src/api/
• 네이밍 규칙:
  • 유틸: camelCase → calculateAge.js, formatDate.js
  • API/서비스: camelCase 또는 기능별 폴더 → userService.js, companyApi.js

utils/
├─ calculateAge.js
├─ formatDate.js
└─ ...
api/
├─ userApi.js
├─ companyApi.js
└─ ...

커스텀 훅 파일 구조