📂 폴더 구조 가이드

메잇볼 클라이언트 팀에서는 코드 응집도와 유지보수 편의성을 높이기 위해 아래와 같은 폴더 구조를 따릅니다.
또한, 모든 폴더와 파일명은 **케밥 케이스(kebab-case)**를 적용해 일관성 있고 가독성이 뛰어난 구조를 유지합니다.

---

폴더 구조 예시

|-- 📁 .github
|-- 📁 node_modules
|-- 📁 public
|-- 📁 src 
  |-- 📁 pages
	  |-- 📁 home
		  |-- 📄ex) home.tsx
		  |-- 📁 components
		  |-- 📁 styles 등
  |-- 📁 shared
      |-- 📁 components
            |-- 📄ex) home-header.tsx
      |-- 📁 styles
      |-- 📁 constants
      |-- 📁 types 등 
|-- index.html 등 ETC

---

각 폴더별 역할 및 네이밍 이유

1️⃣ src/pages

• 목적: 사용자에게 보여지는 개별 페이지 단위의 컴포넌트와 그에 특화된 리소스를 관리
• 구성:
  • 페이지별 폴더(home, profile 등)로 구분
  • 각 페이지 폴더 안에 그 페이지 전용 components와 styles 폴더를 별도 관리
• 이유:
  • 페이지 단위로 코드를 응집시켜 이해하기 쉽고, 유지보수가 편리
  • 각 페이지에 종속적인 코드가 명확히 분리되어, 변경 시 영향 범위 최소화

2️⃣ src/shared

• 목적: 프로젝트 전역에서 재사용되는 공통 모듈 및 리소스 저장소
• 구성:
  • components: 여러 페이지에서 공통으로 사용하는 UI 컴포넌트
  • styles: 전역 스타일 및 테마 변수
  • constants: 전역 상수 (API URL, 색상 코드 등)
  • types: 타입 정의
• 이유:
  • 재사용성을 높이고, 중복 코드를 줄여 유지보수 비용 절감
  • 공통 리소스를 한 곳에 모아두어 변경 관리 및 영향도 분석이 용이

3️⃣ 기타 주요 폴더

• .github: GitHub 워크플로우, 이슈 및 PR 템플릿
• node_modules: 프로젝트 의존성
• public: 정적 파일 (이미지, 폰트 등)
• 루트의 index.html: 앱 진입점

---

케밥 케이스(kebab-case) 사용 이유

• 폴더명과 파일명 모두 케밥 케이스를 사용합니다.
• 장점:
  • OS 및 개발 도구 간 대소문자 구분 문제 최소화
  • 터미널에서 입력하기 쉽고, 경로 가독성이 뛰어남
  • URL과 유사해 직관적이고 협업 시 혼동 감소

---

설계 원칙

• 응집도: 관련 코드와 리소스를 한곳에 모아 관리하여 코드 이해도를 높임
• 단일 책임 원칙: 각 폴더는 명확한 책임과 역할을 가짐
• 확장성: 새로운 기능 추가 시 폴더를 쉽게 추가하고 관리 가능
• 협업 효율성: 일관된 구조 덕분에 팀원 모두 빠르게 코드 위치 파악 가능

---

메잇볼 팀은 이 폴더 구조를 통해 빠른 개발과 원활한 협업을 실현하고 있습니다.
작업 중 헷갈릴 때는 이 가이드를 참고해 주세요!