@sko_dev/test-ds v1.0.0

test-ds

for testing before making @sk-team/ui-components

SKONS AI/DT Team의 커스텀 UI 컴포넌트 라이브러리 개발 전 테스트용입니다.

TailwindCSS와 HeroUI v5를 기반으로 제작되었습니다.

설치

npm install @sk-team/ui-components

Peer Dependencies 설치

npm install @heroui/react @heroui/theme @heroui/use-theme @react-aria/visually-hidden tailwindcss clsx tailwind-variants

사용법

1. Tailwind 설정 tailwind.config.js 추가

const skConfig = require('@sk-team/ui-components/tailwind.config');

module.exports = {
  ...skConfig,
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@sk-team/ui-components/dist/**/*.{js,ts,jsx,tsx}'
  ],
};
2. 컴포넌트 사용
jsximport { FlexBox, ThemeSwitch, NotificationButton } from '@sk-team/ui-components';

function App() {
  return (
    <FlexBox direction="col" gap="md" align="center">
      <ThemeSwitch />
      <NotificationButton color="black" />
    </FlexBox>
  );
}

컴포넌트 종류

레이아웃

FlexBox: 유연한 레이아웃 컴포넌트 ThemeSwitch: 다크/라이트 테마 전환 스위치

요소 컴포넌트

NotificationButton: 알림 버튼

테마 및 Palette

테마 및 색상

SK CI를 바탕으로 SK Brand Color를 포함한 Palette를 만들었습니다.

import { skColors } from '@sk-team/ui-components';

// 사용 예시
const redColor = skColors.red[500]; // #EA002C

import { title, subtitle } from '@sk-team/ui-components';

const titleClass = title({ 
  size: 'lg', 
  color: 'primary', 
  weight: 'bold' 
});

사용 가능한 색상:

sk-red, sk-orange, sk-yellow, sk-green sk-teal, sk-blue, sk-navy, sk-purple

스타일 유틸리티 텍스트 스타일링을 위한 유틸리티를 제공합니다: SK 브랜드 컬러와 커스텀 애니메이션을 포함한 테마 시스템을 제공합니다.