Storybook에서 작성한 UI 컴포넌트들을 실제 애플리케이션에서 어떻게 사용하는지 보여주는 라이브 데모입니다.
총 클릭 수: 0회
미리보기:
활성화 상태
비활성화 상태
import { Button } from '@/components/ui/Button';
// 기본 사용
<Button label="Click me" variant="primary" size="medium" />
// 이벤트 핸들러와 함께
<Button
label="Submit"
variant="primary"
onClick={() => console.log('Clicked!')}
/>
// 비활성화 상태
<Button label="Disabled" variant="primary" disabled />입력값: (없음)
💡 포커스를 벗어나면 이메일 형식을 검증합니다.
필수 입력 항목입니다.
import { Input } from '@/components/ui/Input';
import { useState } from 'react';
const [value, setValue] = useState('');
const [error, setError] = useState('');
// 기본 사용
<Input
label="이름"
placeholder="이름을 입력하세요"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
// 검증 로직과 함께
<Input
type="email"
label="이메일"
value={value}
onChange={(e) => setValue(e.target.value)}
onBlur={() => {
if (!value.includes('@')) {
setError('올바른 이메일 형식이 아닙니다.');
}
}}
error={error}
/>이것은 기본 카드입니다. 컨텐츠를 자유롭게 배치할 수 있습니다.
중요한 정보를 강조하는 파란색 배경의 카드입니다.
성공 메시지나 긍정적인 정보를 표시하는 녹색 카드입니다.
주의가 필요한 정보를 표시하는 노란색 카드입니다.
이 카드는 하단에 액션 버튼을 포함하고 있습니다.
마우스를 올리면 hover 효과가 나타납니다. 클릭 가능한 카드에 유용합니다.
John Doe
john@example.com
카드 안에는 어떤 복잡한 레이아웃도 넣을 수 있습니다.
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
// 기본 카드
<Card title="제목" variant="default">
<p>카드 내용</p>
</Card>
// Footer가 있는 카드
<Card
title="확인 필요"
variant="primary"
footer={
<div className="flex gap-2">
<Button label="취소" variant="outline" />
<Button label="확인" variant="primary" />
</div>
}
>
<p>이 작업을 계속하시겠습니까?</p>
</Card>
// Hoverable 카드
<Card title="클릭 가능" hoverable>
<p>이 카드는 클릭할 수 있습니다.</p>
</Card>import { Alert } from '@/components/ui/Alert';
// 기본 사용
<Alert variant="info" title="알림">
메시지 내용
</Alert>
// 닫기 버튼 포함
<Alert
variant="success"
title="성공"
closable
onClose={() => console.log('Closed')}
>
작업이 완료되었습니다.
</Alert>
// 커스텀 아이콘
<Alert variant="info" title="새 메시지" icon="📧">
메일함을 확인하세요.
</Alert>모든 필드는 필수입니다.