📌 프로젝트 일관성과 협업 효율성을 높이기 위한 가이드입니다.
코드 스타일, 네이밍, Git 전략 등 팀 전체가 같은 기준을 따르도록 설정한 원칙입니다.

---

• id → camelCase
  예: userCard, scrollTarget

• class → kebab-case
  예: main-banner, card-item

• 파일명, 폴더명, 이미지명 → kebab-case
  예: user-profile.js, img-folder/

🔔 id보다는 class 사용을 권장합니다.
→ id는 고유성으로 인해 스타일 재사용 및 유지보수에 불리합니다.

---

• 색상, 폰트, 크기 등은 변수로 관리
  → CSS 변수 또는 SCSS 변수 사용

css :root { --main-color: #1e90ff; --font-heading: 'Pretendard', sans-serif; }

• 아이콘/일러스트는 .svg + <img> 태그 활용
  → 브라우저 최적화 및 동적 스타일링에 유리

• 반응형 이미지 처리

  • picture 태그 대신 background-image 속성을 선호
  • 이유: CSS/JS에서 제어 및 리팩토링이 쉬움

---

이모지	타입	설명
✨	feat	새로운 기능 추가
🐛	bugFix	버그 수정
📚	docs	문서 수정
✏️	modify	기능 변경을 포함한 코드 수정
♻️	refactor	리팩토링 (동작 변화 없음)
🎨	design	CSS 등 UI 관련 변경
💡	comment	주석 추가 및 수정
💅	style	코드 포맷, 공백, 세미콜론 등 포맷팅
🧪	test	테스트 코드 관련 작업
⚙️	chore	빌드, 패키지 설정 등 운영 코드 작업
🚀	init	초기 프로젝트 세팅
🚚	rename	파일 또는 폴더명 변경
🗑️	remove	파일 삭제
🔀	merge	브랜치 병합 시 사용
🏗️	build	라이브러리, 패키지 설치
♿️	accessibility	접근성 관련 코드 작업

✅ 형식 예시:
✨ feat: 로그인 기능 구현
♻️ refactor: 카드 컴포넌트 구조 개선

---

• main
  → 실제 배포에 사용되는 최종 브랜치

• develop
  → 여러 기능 브랜치를 통합하는 개발 브랜치

• feature/기능명
  → 단위 작업 브랜치
  예: feature/signup-form, feature/product-list

---

• 접근성: 시맨틱 태그 + WAI-ARIA 속성 적극 사용
• 주석 작성: 복잡하거나 비직관적인 로직에는 주석 필수
• 파일 구조: 기능 단위로 폴더 구조를 설계해 유지보수성 확보
• 코드 리뷰: 모든 PR은 최소 1명 이상의 리뷰 후 머지