Conventions

코드 리뷰를 하면서 팀원 간에 합의한 개발 관습을 문서화해 두었습니다. 항상 최신 상태를 유지하도록 팀원 모두 노력해주셨으면 좋겠습니다.

프로젝트 구조

• src/components 아래에 폴더를 만들고, 그 안에 컴포넌트 파일, 스토리 파일, 테스트 파일을 위치시켜 주세요.

• 폴더 이름, 파일 이름, 컴포넌트 이름은 모두 PascalCase로 letter case를 통일해 주세요.

• 변수 이름, 함수 이름, prop 이름은 모두 camelCase로 letter case를 통일해 주세요.

• index.tsx 파일을 통해 re-export하지 마세요.

  ├── src
  │   ├── components
  │   │   ├── Checkbox
  │   │   │   ├── Checkbox.stories.tsx
  │   │   │   ├── Checkbox.test.tsx
  │   │   │   └── Checkbox.tsx
  

  • 관련 논의: https://github.com/DaleStudy/leaderboard/pull/18#pullrequestreview-2377895806

• Compound pattern의 경우 Object.assign을 통한 다음 dot-notation 형식의 export과 RSC 지원을 위한 named-export를 제공해 주세요.

  • 최상단 Root는 무조건 dot-notation없이 제공
  • named-export를 따로 제공

  <Card> {/* 최상단 Root는 무조건 dot-notation없이 제공 */}
    <Card.Header />
    <Card.Body />
    <Card.Footer />
  </Card>

  • 관련 논의: https://github.com/DaleStudy/daleui/issues/830

컴포넌트

• 함수 컴포넌트를 작성할 때는 function 키워드로 선언해주세요.
• 이벤트 핸들러는 화살표 함수로 작성하여 변수에 할당해주세요.
• Boolean props는 is, has 접두사를 사용하지 않고 형용사 형태로 작성해주세요. (예: reversed)
• API 설명을 작성할 때는 명사 형태로 작성해주세요 (예: /*_ 비활성화 상태 _/)
• 신규 컴포넌트 개발시 index.ts에 re-export하여 root importimport { Button } from "daleui"가 가능하게 해주세요

스토리

• 스토리 제목이 컴포넌트 경로를 통해 자동 유추되도록 title 속성 값은 생략해주세요. 문자열로 직접 명시하면 타입 안전(type-safe)하지 않고, 컴포넌트 이름을 바꿀 때 싱크가 깨지기 쉬우니 참고해 주세요.
  • 관련 논의: https://github.com/DaleStudy/daleui/pull/168#discussion_r2048006809
• 여러 스토리에 걸쳐 필요한 args는 스토리 수준에서 중복하지 마시고 컴포넌트 수준에서 지정해주세요.
  • 관련 논의: https://github.com/DaleStudy/daleui/pull/168#discussion_r2048008436
• 컴포넌트의 기본값은 args에서 선언하여, 스토리에서 기본적으로 선택되도록 작성해주세요.
  • 관련 논의: https://github.com/DaleStudy/daleui/pull/792#discussion_r2756976616
• 스토리북이 기본 설정해 준 arg type을 덮어쓰면, 컴포넌트 타입이 변할 때마다 개발자가 신경 써서 arg type을 조정해야 하니 주의해 주세요. 아주 타당한 이유가 없는 한 arg type을 직접 지정하지 마세요.
  • 타당한 이유 예시)
    1. ReactNode Type을 사용해서 story에서 따옴표(")를 사용해야 할 때 -> control: 'text' 사용
    2. 컴포넌트를 여러개 export하는 compound pattern의 경우 -> argType 사용
• 항상 고정되어야 하는 prop은 Story의 argTypes에서 control: false로 선언해 주세요.
  • ex) Orientation Story에서 orientation props
• Docs 설명은 기본적으로 컴포넌트 주석에 작성합니다. 다만, Compound Pattern의 경우 개별 컴포넌트가 직접 export되지 않으므로 Docs 설명은 스토리에 작성합니다.
  • 관련 논의: https://github.com/DaleStudy/daleui/pull/489#discussion_r2418251290

테스트

• 테스트 파일은 별도 디렉토리에 중앙화하지 않고 애플리케이션 파일 바로 옆에 두세요.
• 단순한 테스트 구조를 위해 테스트 대상 모듈 구조가 복잡하지 않다면 describe()-it() 대신에 test()를 사용해 주세요.
• 이벤트를 발생시킬 때는 fireEvent 대신 @testing-library/user-event 패키지를 사용해 주세요. 브라우저 입장이 아닌 사용자 입장에서 테스트를 작성하기 위함입니다.
  • 관련 논의: https://github.com/DaleStudy/daleui/pull/170#discussion_r2057064150
• 테스트 제목은 한국어 사용자가 명세를 파악하기 쉽도록 한글로 작성해주세요.
  • 관련 논의
    • https://github.com/DaleStudy/daleui/pull/168#discussion_r2059342361
    • https://discord.com/channels/775115965964222492/1280152682044063837/1366565616299020288
• 스토리(Storybook)와 테스트(Unit Test)는 목적이 다르므로 분리 작성해 주세요.
  • 스토리: 문서화 및 데모 목적 / 테스트: 동작 검증 및 명세 목적
  • 따라서, 스토리에 의존하는 테스트(composeStories 등)는 사용하지 마세요.
  • 테스트는 스토리 변경에 영향받지 않고 독립적으로 동작하도록 작성해 주세요.
  • 관련 논의: Github 이슈, 관련 논의: 디스코드 정리