Component Guide

컴포넌트 가이드

공통 컴포넌트

Button

// 기본 버튼
<Button>Click</Button>
// 프라이머리 버튼
<Button primary>Submit</Button>
// 비활성화 버튼
<Button disabled>Disabled</Button>

Input

// 텍스트 입력
<Input
type="text"
placeholder="Enter text"
onChange={handleChange}
/>
// 비밀번호 입력
<Input
type="password"
placeholder="Password"
/>

Modal

<Modal
isOpen={isOpen}
onClose={handleClose}
title="알림"
>
<p>내용을 입력하세요.</p>
</Modal>

페이지 컴포넌트 예시

로그인 페이지

function SignIn() {
return (
<div>
<Input placeholder="이메일" />
<Input type="password" placeholder="비밀번호" />
<Button primary>로그인</Button>
<SocialLogin /> {/ 소셜 로그인 컴포넌트 /}
</div>
);
}

게시판 목록

function BoardList() {
return (
<div>
<SearchBar />
<BoardItems />
<Pagination />
</div>
);
}

컴포넌트 작성 규칙

• 파일명은 PascalCase 사용
• props는 명확한 이름 사용
• 재사용 가능한 로직은 커스텀 훅으로 분리
• 컴포넌트당 하나의 책임만 가지도록 지향