Code Convention

Directory 구조

|- public
|- src
  |- assets
  |- pages
  |- routes
  |- components
    |- Button
      |- index.ts # export하는 파일
      |- Button.tsx # UI
      |- Button.stories.tsx # 스토리북 파일
      |- hooks.ts # 비즈니스 로직
      |- utils.ts
      |- types.ts
  |- api (useQuery, useMutation 반환하는 커스텀 훅)
    |- config.ts (fetch 하는 함수)
    |- useGetVoteList.ts
    |- usePostVote.ts (POST로 투표 만드는 커스텀 훅)
    |- useUploadImage.ts
    |- ...
  |- mocks # msw 세팅 디렉토리
    |- data
    |- browser.ts
    |- handlers.ts
  |- hooks (필요할 때 추가)
    |- useDebounce.ts
  |- utils
    |- twMerge.ts
    |- ...
  |- types # 스키마
    |- user.ts
    |- vote.ts

Branch Rule

feature-{이슈번호}/{작업 내용} # 일반적인 개발
fix-{이슈번호}/{작업 내용} #QA, 로직 수정

브랜치
# 1 -> 버튼 컴포넌트 만들기
feature-1/button

# commit msg
PR 제목이 commit msg

Storybook Code Convention

// storybook meta data 설정 // title: storybook 사이드바에서 보여질 경로와 이름 // component: 스토리북을 작성할 컴포넌트 const meta: Meta = { title: 'templates/ButtonExample', component: ButtonExample, };

export default meta;

// Story 타입 정의
// meta 타입을 추론하여 Story 타입을 정의합니다.
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  // args: 컴포넌트에 전달할 props를 정의합니다.
  args: {
    text: 'Primary',
    variant: 'primary',
  },
  // render: 컴포넌트를 렌더링하는 방식을 정의합니다.
  // - args를 스프레드 연산자로 전달하여 모든 props를 전달
  render: (args) => <ButtonExample {...args} />,
};

export const Secondary: Story = {
  args: {
    text: 'Secondary',
    variant: 'secondary',
  },
  render: (args) => <ButtonExample {...args} />,
};

Component Source Code 예시

// components/Button/index.ts

export { default } from './Button';

// components/Button/Button.tsx

export default function CreateVoteButton() {
  const { onClick, buttonText } = useCreateVoteButton(); // Business Logic
   
  return (
    <button onClick={onClick}>{buttonText}</button>
  )
}

// components/Button/hooks.ts
export default function useCreateVoteButton() {
  const { mutate: postVote } = usePostVote();
  
  const handleClickVoteButton = () => {
    postVote();
  }
  
  return {
    handleClickVoteButton,
  }
}