👑 김민아 |
오승택 |
이소희 |
장민수 |
한다경 |
| Category | Stack |
|---|---|
| Library |   |
| Programming Language |  |
| Styling |  |
| Data Fetching |  |
| State Management |  |
| Package Manager |  |
| Formatting & Linting |   |
| Version Control |   |
| UI Document |  |
Format: prefix(scope): 작업내용 (#이슈번호)
예시: feat: 장바구니 컴포넌트 구현 (#5)
Format: prefix/이슈번호-작업내용 (kebab-case 사용)
- 예시:
fix/12-login-error
| 머릿말 | 설명 |
|---|---|
| main | 실제 서비스 브랜치 |
| develop | 배포 전 작업 기준 브랜치 (Default) |
| feat | 새로운 기능 단위 구현 |
| fix | 버그 수정 및 에러 해결 |
| refactor | 기능 변경 없는 코드 구조 개선 |
| hotfix | 서비스 중 긴급 수정 |
any타입 사용 금지 / 절대 경로 import 사용 / 린트 룰 임의 수정 금지
| 대상 | 컨벤션 | 예시 |
|---|---|---|
| 폴더 | kebab-case |
user-profile/ |
| 컴포넌트 파일 | PascalCase |
UserCard.tsx |
| Hook / API / Utils | kebab-case |
use-auth.ts, auth-api.ts, format-date.ts |
| TanStack Query | kebab-case |
use-user-query.ts, use-user-mutation.ts |
- 의미 있는 태그 사용 (
<main>,<article>,<section>,<nav>,<header>,<footer>등) - 헤딩은 논리적인 순서 유지, 레벨 점프 금지, 페이지당
<h1>하나 - WAI-ARIA: 텍스트 없는 버튼에
aria-label필수 / 실시간 알림에aria-live/ 드롭다운·아코디언에aria-expanded,aria-haspopup - 키보드 접근성:
outline: none으로 포커스 제거 금지 / 버튼은 반드시<button>태그 사용 / TabIndex 관리 철저 - 폼:
<input>에id부여 후<label>의for와 연결 / 추가 설명이나 에러는aria-describedby로 연결
- 컴포넌트 선언은 Arrow Function 사용:
export const Component = () => {} - 자식 요소 없을 때 Self-closing 형태로 작성:
<Component /> - 최상단 래퍼는 불필요한
<div>대신 Fragment(<>...</>) 사용 - 일반 컴포넌트는 Named Export 사용
const→let순서로 선언 (var금지)- 상수는
UPPER_SNAKE_CASE(예:API_KEY) - 줄임말 지양, 의미 있는 변수명 사용 (예:
userData) - 복수 데이터 변수명 끝에
s추가 (예:userLists) - Boolean 변수에
is접두사 사용 (예:isActive) - 문자열 조합은 템플릿 리터럴(
`) 사용
| 접두사 | 용도 |
|---|---|
get |
값을 가져와 반환 |
create |
새로운 값·변수 생성 |
check |
내부 로직 확인 |
convert |
특정 형태로 변환 |
add / minus |
더하거나 빼는 동작 |
filter |
배열을 필터링해 반환 |
handle |
이벤트 핸들링 함수 전용 (예: handleResetClick) |
has— |
boolean 반환 유틸 함수 (예: hasEmail) |
- 함수는 화살표 함수 사용
- 커스텀 훅은
use-접두어, 확장자.ts
| 상황 | key 값 |
|---|---|
| 순서가 절대 변하지 않는 정적 리스트 | index 사용 가능 |
| 항목이 추가되거나 정렬되는 동적 리스트 | 고유한 id 필수 |
| 매번 완전히 교체되며 상태가 없는 리스트 (페이지네이션 등) | index 사용 가능 |
- 네이밍은
PascalCase사용 - Props 타입은 접미사
Props(예:HeaderProps) type이름에는 접미사Types사용
📦src
┣ 📂app
┃ ┣ 📂providers
┃ ┣ 📂router
┃ ┃ ┗ 📜router.tsx
┃ ┗ 📜App.tsx
┣ 📂pages
┃ ┣ 📂cart
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂address-box
┃ ┃ ┃ ┣ 📂cart-header
┃ ┃ ┃ ┣ 📂order-price-summary
┃ ┃ ┃ ┣ 📂product-card
┃ ┃ ┃ ┣ 📂section
┃ ┃ ┃ ┃ ┗ 📂store-section
┃ ┃ ┃ ┣ 📂select-control
┃ ┃ ┃ ┣ 📂store-header
┃ ┃ ┃ ┣ 📂store-order-summary
┃ ┃ ┃ ┗ 📂tap
┃ ┃ ┣ 📂constants
┃ ┃ ┗ 📜CartPage.tsx
┃ ┣ 📂home
┃ ┃ ┣ 📂api
┃ ┃ ┃ ┣ 📂category
┃ ┃ ┃ ┣ 📂promotion
┃ ┃ ┃ ┣ 📂recommend-item
┃ ┃ ┃ ┗ 📂types
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂banner
┃ ┃ ┃ ┣ 📂category-list
┃ ┃ ┃ ┣ 📂deal-timer
┃ ┃ ┃ ┣ 📂delivery-banner
┃ ┃ ┃ ┣ 📂home-header
┃ ┃ ┃ ┣ 📂location
┃ ┃ ┃ ┣ 📂product-card
┃ ┃ ┃ ┣ 📂recommend-list
┃ ┃ ┃ ┣ 📂search-bar
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂sections
┃ ┃ ┃ ┣ 📂category-section
┃ ┃ ┃ ┣ 📂recommendation-section
┃ ┃ ┃ ┣ 📂special-deal-section
┃ ┃ ┣ 📂utils
┃ ┃ ┗ 📜HomePage.tsx
┃ ┣ 📂order-sheet
┃ ┃ ┣ 📂api
┃ ┃ ┃ ┣ 📂types
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂hidden-point-button
┃ ┃ ┃ ┣ 📂order-sheet-content
┃ ┃ ┃ ┣ 📂order-sheet-header
┃ ┃ ┃ ┣ 📂order-sheet-skeleton
┃ ┃ ┃ ┣ 📂point-usage-field
┃ ┃ ┃ ┣ 📂reward-info-card
┃ ┃ ┃ ┗ 📂reward-summary
┃ ┃ ┣ 📂constants
┃ ┃ ┣ 📂hooks
┃ ┃ ┣ 📂sections
┃ ┃ ┃ ┣ 📂agreement-section
┃ ┃ ┃ ┣ 📂payment-button-section
┃ ┃ ┃ ┣ 📂point-money-section
┃ ┃ ┃ ┗ 📂reward-point-section
┃ ┃ ┗ 📜OrderSheetPage.tsx
┃ ┗ 📂product
┃ ┃ ┣ 📂api
┃ ┃ ┃ ┣ 📂types
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂product-benefit-section
┃ ┃ ┃ ┣ 📂product-delivery-section
┃ ┃ ┃ ┃ ┣ 📂sections
┃ ┃ ┃ ┣ 📂product-header
┃ ┃ ┃ ┣ 📂product-image-section
┃ ┃ ┃ ┗ 📂product-info-section
┃ ┃ ┗ 📜ProductDetailPage.tsx
┣ 📂shared
┃ ┣ 📂api
┃ ┣ 📂assets
┃ ┣ 📂components
┃ ┃ ┣ 📂badges
┃ ┃ ┣ 📂boundary
┃ ┃ ┣ 📂button
┃ ┃ ┣ 📂cards
┃ ┃ ┣ 📂header
┃ ┣ 📂constants
┃ ┣ 📂icons
┃ ┣ 📂query
┃ ┣ 📂styles
┃ ┗ 📂utils
┣ 📜main.tsx