design: Button, Input, Pagination 컴포넌트 UI 구현

[hsgh085]

💡 작업 내용

• Button UI 구현 및 스토리북 작성
• Input UI 구현 및 스토리북 작성
• Label UI 구현 및 스토리북 작성
• ErrorMessage UI 구현 및 스토리북 작성
• Pagination UI 구현 및 스토리북 작성

💡 자세한 설명

✅ Button 컴포넌트 사용법

아래와 같이 사용하면 디자이너님이 피그마에 정리해주신 Button 컴포넌트 이미지가 나옵니다.

<Button variant="primary">BUTTON</Button>
<Button variant="outlinePrimary">BUTTON</Button>
<Button variant="outlineShadow" iconRight={<AngleSmallDown />}>
  BUTTON
</Button>
<Button variant="outlineShadow" size="medium" iconLeft={<BookmarkRR />}>
  234
</Button>
<Button variant="outlineShadow" size="medium" iconLeft={<BookmarkSR />}>
  234
</Button>
<Button variant="outlineHighlightR">BUTTONNNNNNNNNNN</Button>
<Button variant="outlineHighlightB">BUTTONNNNNNNNNNN</Button>
<Button variant="circle">
  <Search />
</Button>

✅ Input 컴포넌트 사용법

<Input
    placeholder="이메일"
    icon={<Envelope />}
    isError
    errorMessage="아이디(로그인 전용 아이디) 또는 비밀번호가 잘못 되었습니다. 아이디와 비밀번호를 정확히 입력해 주세요."
  />

✅ Pagination 컴포넌트 사용법

아래 코드 예제와 같이 사용해주시면 됩니다.

  const [selectedPage, setSelectedPage] = useState(1);
  const totalPages = 10;
  const pages = createRangeArray(totalPages || 0);
  const handleChangeNavigate = (page: number) => {
    setSelectedPage(page);
  };

 <Pagination
    pages={pages}
    selected={selectedPage}
    maxPage={pages.length}
    onChangeNavigate={handleChangeNavigate}
  />

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

closes #135

[areumH]

여러 컴포넌트 구현하시느라 수고하셨습니다!!👍
그런데 assets/index.ts 파일 정리해주신 부분에 제가 저번에 구현했던 컴포넌트에 사용된 파일이 빠져있어요🫢 이 부분 수정해주시고 머지하시면 될 것 같아요!!

[hsgh085]

여러 컴포넌트 구현하시느라 수고하셨습니다!!👍 그런데 assets/index.ts 파일 정리해주신 부분에 제가 저번에 구현했던 컴포넌트에 사용된 파일이 빠져있어요🫢 이 부분 수정해주시고 머지하시면 될 것 같아요!!

아! 머지된 dev 브랜치를 pull 해온게 아니여서 머지하면 자연스럽게 병합될 거에요! 그럼 머지할께욥