makers-front-event v0.1.0

Makers Event Web Service

콤포넌트

• 컴포넌트 타입
  • atoms, molecules, organisms 3가지 타입으로 운용
    • atoms: 기본 UI 콤포넌트 ex. 버튼, 입력필드, 셀렉트박스, 토스트 등
    • molecules: atoms 조합
    • organisms: 헤더, 푸터, 상품카드, 상품그룹모듈(2x1타입, 스와이프타입 등)
• 콤포넌트 생성 스크립트 : yarn create:component -- type=<컴포넌트 타입> name=<컴포넌트 이름>
  • <콤포넌트명>.module.css / <콤포넌트명>.stories.tsx / index.tsx

네이밍

• js/ts/jsx/tsx
  • camelCase로 작성
• 콤포넌트 파일명
  • PascalCase로 작성
• CSS 스타일 클래스
  • kebab-case로 작성
• 이미지, 아이콘 등 리소스
  • snake_case로 작성

스타일 설정

• PostCSS, CSS Module 사용
  • https://postcss.org/
• 컴포넌트는 .module.css 빌트인 모듈 활용 구현
  • https://nextjs.org/docs/app/building-your-application/styling/css-modules
• 스타일 상속시 props 네이밍으로 customClass 사용

• typography 적용시 module.css 기본 기능인 composes 사용

  .className {
    composes text-caption from global;
    color: white;
  }

### 스타일 파일 구조

- @/app/global.css 엔드포인트
- @/app/css/makers.css 커스텀 스타일 정의 -> TODO: 확인 ㅣㄹ요
- 기타 필요시 @/app/css/\* CSS 파일 생성