seyfert-ui

Seyfert 디자인 시스템 기반의 React 컴포넌트 라이브러리입니다.

📦 설치

npm install seyfert-ui

🚀 빠른 시작

import React from 'react';
import { Button, Input, Modal } from 'seyfert-ui';

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <Input label="이메일" placeholder="이메일을 입력하세요" type="email" />
      <Button onClick={() => setIsOpen(true)}>모달 열기</Button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="확인">
        모달 내용
      </Modal>
    </div>
  );
}

🧩 컴포넌트

기본 컴포넌트

• Button - 다양한 스타일과 크기의 버튼
• Input - 폼 입력 필드
• Modal - 모달 다이얼로그
• Toast - 알림 메시지
• Tag - 태그 컴포넌트

사용 예제

Button

import { Button } from 'seyfert-ui';

// 기본 버튼
<Button>클릭하세요</Button>

// 아이콘이 있는 버튼
<Button
  leftIcon={<PlusIcon />}
  variant="primary"
  size="lg"
>
  추가
</Button>

// 로딩 상태
<Button loading>로딩 중...</Button>

Input

import { Input } from 'seyfert-ui';

// 기본 입력 필드
<Input
  label="이메일"
  placeholder="이메일을 입력하세요"
  type="email"
/>

// 에러 상태
<Input
  label="비밀번호"
  type="password"
  state="error"
  errorMessage="비밀번호가 너무 짧습니다"
/>

// 아이콘이 있는 입력 필드
<Input
  label="검색"
  leftIcon={<SearchIcon />}
  rightIcon={<ClearIcon />}
/>

Modal

import { Modal, Button } from 'seyfert-ui';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>모달 열기</Button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="확인"
        footer={
          <div className="flex justify-end space-x-2">
            <Button variant="outline" onClick={() => setIsOpen(false)}>
              취소
            </Button>
            <Button onClick={() => setIsOpen(false)}>확인</Button>
          </div>
        }
      >
        정말로 삭제하시겠습니까?
      </Modal>
    </>
  );
}

Toast

import { Toast } from 'seyfert-ui';

function MyComponent() {
  const [showToast, setShowToast] = useState(false);

  return (
    <>
      <Button onClick={() => setShowToast(true)}>토스트 표시</Button>

      <Toast
        message="성공적으로 저장되었습니다!"
        type="success"
        isVisible={showToast}
        onClose={() => setShowToast(false)}
      />
    </>
  );
}

Tag

import { Tag } from 'seyfert-ui';

// 기본 태그
<Tag>기본 태그</Tag>

// 제거 가능한 태그
<Tag
  removable
  onRemove={() => console.log('제거됨')}
>
  제거 가능한 태그
</Tag>

// 다양한 변형
<Tag variant="success">성공</Tag>
<Tag variant="error">오류</Tag>
<Tag variant="warning">경고</Tag>

🎨 테마

컴포넌트는 Seyfert 디자인 시스템의 일관된 디자인 토큰을 사용합니다.

import { defaultTheme } from 'seyfert-ui';

// 테마 객체에 접근
console.log(defaultTheme.colors.primary[500]);
console.log(defaultTheme.typography.fontSize.lg);

📱 반응형 디자인

모든 컴포넌트는 모바일부터 데스크톱까지 반응형으로 설계되었습니다.

♿ 접근성

• WCAG 2.1 AA 준수
• 키보드 네비게이션 지원
• 스크린 리더 호환
• 적절한 ARIA 속성 사용

🧪 테스트

# 테스트 실행
npm test

# 테스트 커버리지
npm run test:coverage

# 테스트 감시 모드
npm run test:watch

📚 Storybook

컴포넌트 문서와 예제를 확인하려면 Storybook을 실행하세요:

npm run storybook

🔧 개발

# 의존성 설치
npm install

# 개발 모드
npm run dev

# 빌드
npm run build

# 린트
npm run lint

# 타입 체크
npm run type-check

📄 라이선스

MIT License

🤝 기여

기여를 환영합니다! 이슈를 생성하거나 풀 리퀘스트를 보내주세요.

📞 지원

• GitHub Issues
• 문서 사이트