EVERYWEAR

AI로 입어보고 AI로 분석하는 스마트 피팅 앱

🤖 EVERYWEAR Member

최정인

김재범

김동환

---

📈 Performance Optimization Guide

➡️ 성능 최적화 해결 문서

🛠 EVERYWEAR WEB 기술 스택

➡️ 기술 스택 선정 문서

카테고리	기술 스택
UI Library
Language
Build Tool
Routing
Styling
State & Networking
Client State Management
Utility
Package Manager
Formatting & Workflow
Deployment

👕 EVERYWEAR WEB Convention

EVERYWEAR Web 팀의 협업 효율과 코드 품질 유지를 위한 컨벤션 문서입니다.
Git / 브랜치 / 커밋 / 코드 스타일 / 폴더 구조 전반에 대한 기준을 정의합니다.

---

Git Convention

Git Flow 요약

• main : 항상 배포 가능한 상태 유지
• develop : 기능 통합 브랜치
• feat/* : 기능 단위 작업 브랜치

📌 Git Flow 상세 규칙

main branch

• 언제나 배포 가능한 안정 상태만 유지합니다.
• 직접 커밋 및 작업을 금지합니다.

develop branch

• 모든 기능 개발의 통합 브랜치입니다.
• 기능 개발은 항상 develop에서 분기한 feature 브랜치에서 진행합니다.
• 안정화 완료 시 main 브랜치로 병합하여 CI/CD를 통해 배포합니다.

Feature branch

• develop 브랜치에서 분기하여 기능 단위 개발을 진행합니다.
• 작업 완료 후 반드시 develop 브랜치로 PR을 생성합니다.

---

Commit Message Convention

기본 형식

{type}({scope}): {subject}

• type: 작업 종류

• scope: 변경 범위 (선택)

• subject: 변경 요약 (필수)

📌 Commit Type & 작성 규칙

Commit Type

• feat : 새로운 기능 추가
• fix : 버그 수정
• refactor : 코드 리팩토링
• perf: 성능 개선
• style : 코드 포맷팅, 세미콜론 누락 등 (비즈니스 로직 변경 없음)
• chore : 빌드 업무 수정, 패키지 매니저 수정, 설정 변경
• docs : 문서 수정
• test : 테스트 코드 추가 및 수정
• design: UI 등 디자인 변경
• rename: 파일 또는 폴더명 변경
• remove: 파일 또는 폴더 삭제

---

작성 규칙

• 커밋 메시지는 현재형으로 작성합니다.

• 첫 글자는 소문자 사용을 권장합니다.

• 끝에 마침표(.)는 붙이지 않습니다.

• subject는 50자 이내로 간결하게 작성합니다.

• 변경 내용을 명확히 드러내는 동사를 사용합니다.

  • ❌ update, change
  • ✅ add, remove, prevent, handle, refactor

Branch Convention

기본 형식

{type}/{scope}-{short-description}

📌 브랜치 네이밍 규칙

규칙

• type은 소문자로 작성합니다.

• scope는 변경 범위를 짧고 명확하게 작성합니다. (ex: web, admin, api, auth, evaluation)

• short-description은 kebab-case로 작성합니다.

• 한글, 한글 직역 변수명 사용을 금지합니다.

• 의미 없는 축약어 사용을 지양합니다.

Pull Request Rule

• main, develop 브랜치에 직접 push 금지
• 반드시 브랜치를 생성한 후 Pull Request를 생성합니다.
• Pull Request 병합을 위해서는 2명 이상의 Approve가 필요합니다.

📌 Pull Request 상세 가이드

• 포크 방식이 아닌 브랜치 기반 PR만 허용합니다.
• PR 템플릿 작성을 필수로 합니다.
• 기능 단위로 PR을 분리하여 작성합니다.
• 리뷰 코멘트는 존중하며, 논의가 필요한 경우 적극적으로 소통합니다.
• 머지 전 CI / 빌드 상태를 반드시 확인합니다.

---

🗂 프로젝트 구조

src/
├── apis/                              # 서버 API 호출 레이어
│   ├── common/                        # axios instance, interceptor 등 공통 설정
│   ├── domain/                        # 도메인별 API wrapper (generated 위를 감싸는 레이어)
│   ├── generated/                     # swagger-typescript-api 생성물 (있다면)
│   └── index.ts                       # apis 진입점 / re-export
├── assets/
│   └── icons/                         # 아이콘/정적 리소스 엔트리(아이콘 전용)
│
├── components/                    # UI 컴포넌트
│
├── constants/                     # 상수 관리
│
├── hooks/                         # 커스텀 훅
│   ├── services/                  # 서버 통신 성격의 hook
│   └── domain/                    # 비즈니스 로직 성격의 hook
│
├── lib/                               # queryClient 세팅 
│
├── pages/                         # 라우팅 단위 페이지(View)
│   ├── onboarding/
│   ├── login/
│   ├── home/
│   ├── products/
│   ├── ai-fitting/
│   ├── closet/
│   ├── setting/
│   ├── recent-fitting/
│   └── not-found/
│
├── providers/                     # 전역 Provider
├── router/                        # 라우터 설정
├── store/                         # 전역 상태 관리
├── types/                         # 전역 타입 정의
├── utils/                         # 공통 유틸 함수
│
├── App.tsx                        # 앱 루트 컴포넌트
└── main.tsx                       # React DOM entry

---

🤝 Ground Rule

기본 원칙

• 질문을 주저하지 않습니다.

• 작업 내용은 상세히 공유합니다.

시연영상

https://youtu.be/mhZT-iZ_WFY