Home

📝 Notice

Prefix는 하위 목록을 구분으로 하며 선택적으로 사용한다.

🔏 Commit Message를 작성하는 법

유형들이 복합적으로 포함되어 있을 경우, 되도록 커밋을 분리한다. 분리가 어려운 경우 위 순서상 상위 항목의 유형으로 작성한다. (eg. 기능과 테스트가 모두 포함된 경우 기능으로 작성)

• ✨ Feat: 기능 추가, 삭제, 변경 - 제품 코드 수정 발생
• 💄 Design: CSS 등 사용자 UI 디자인 변경 - 제품 코드 수정 발생
• 🐛 Fix: 버그 수정 - 제품 코드 수정 발생
• 📝 Docs: 문서 추가, 삭제, 변경 - 코드 수정 없음
• 🎨 Style: 코드 형식, 정렬, 주석 등의 변경, eg; 세미콜론 추가 - 제품 코드 수정 발생, 하지만 동작에 영향을 주는 변경은 없음
• ♻️ Refactor: 코드 리펙토링, eg. renaming a variable - 제품코드 수정 발생
• 🧪 Test: 테스트 코드 추가, 삭제, 변경 등 - 제품 코드 수정 없음. 테스트 코드에 관련된 모든 변경에 해당
• 🔧 Config: npm 모듈 설치 등
• 🌱 Chore: 패키지 매니저 설정할 경우 등
• etc: 위에 해당하지 않는 모든 변경, eg. 빌드 스크립트 수정, 패키지 배포 설정 변경 - 코드 수정 없음

✍️ Commit Message Example

	코드
컨벤션	Feat: 기능 구현 내용
예시	Feat: CommonInput 컴포넌트 구현

📝 Commit Message Emoji

타입	이모지	이모지 코드	코드 수정 여부	코드 동작에 영향	설명
Initial Commit	🎉	🎉	X	X	프로젝트 초기 설정
Feat	✨	✨	O	O	기능 추가, 삭제, 변경
Style	💄	💄	O	O	CSS 등 사용자 UI 디자인 변경
Fix	🐛	🐛	O	O	버그 수정
Docs	📝	📝	X	X	문서 추가, 삭제, 변경
Style	🎨	🎨	O	X	코드 컨벤션 수정 (코드 형식, 정렬, 주석, 세미콜론 등 동작에 영향을 주는 변경은 없는 경우)
Refactor	♻️	♻️	O	O	파일구조 변경, 코드 리팩토리
Test	🧪	🧪	X	X	테스트 코드 관련 기능 추가, 삭제, 변경, 리팩토리
Config	🔧	🔧	X	X	의존성 모듈 등, 기타 설정
Chore	🌱	🌱	X	X	설정 변경, 잡다한 업무

📝 CSS 스타일

1. 정렬
2. with, height
3. postion
4. style들
5. transform

/* CSS 파일 예제 */

.default {
  /* 1. 정렬 (Alignment) */
  display: flex;
  justify-content: center;
  align-items : center;
  vertical-align: middle;
  text-align: center;

  /* 2. 너비와 높이 (Width and Height) */
  width: 200px;
  height: 100px;

  /* 3. 위치 (Position) */
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;

  /* 4. 스타일들 (Styles) */
  color: red;
  background-color: yellow;
  font-size: 24px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  border: 2px solid #000;
  margin: 10px;
  padding: 15px;

  /* 5. 변형 (Transform) */
  transform: rotate(45deg) scale(1.5) translate(20px, 30px);
}