@doublejun1/ui-starter-kit

이 패키지는 애플리케이션 전반에서 사용할 수 있는 재사용 가능한 UI 컴포넌트의 시작 세트를 제공합니다. shadcn/ui를 기반으로 하며, Magic UI의 일부 컴포넌트도 포함하고 있습니다.

설치

NPM 또는 Yarn을 사용하는 경우

npm install @doublejun1/ui-starter-kit
# 또는
yarn add @doublejun1/ui-starter-kit
# 또는
pnpm add @doublejun1/ui-starter-kit

모노레포 내부에서 사용하는 경우 (pnpm workspaces)

애플리케이션의 package.json에 다음과 같이 의존성을 추가합니다 (버전은 최신 버전을 확인하세요):

{
  "dependencies": {
    "@my-org/ui-starter-kit": "^0.0.1" // 예시 버전, 실제 버전으로 교체
  }
}

그런 다음, 모노레포 루트에서 pnpm install을 실행합니다.

사용 방법

다음과 같이 컴포넌트를 가져와서 사용할 수 있습니다:

import { Button } from '@my-org/ui-starter-kit';

const MyComponent = () => {
  return <Button>클릭하세요</Button>;
};

포함된 컴포넌트 (shadcn/ui 기반)

이 스타터 킷에는 다음과 같은 shadcn/ui 컴포넌트들이 기본적으로 포함되어 있으며, 필요에 따라 추가될 수 있습니다:

• Accordion
• Alert
• Alert Dialog
• Aspect Ratio
• Avatar
• Badge
• Button
• Calendar
• Card
• Carousel
• Checkbox
• Collapsible
• Combobox
• Command
• Context Menu
• Dialog
• Drawer
• Dropdown Menu
• Form
• Hover Card
• Input
• Label
• Menubar
• Navigation Menu
• Pagination
• Popover
• Progress
• Radio Group
• Resizable
• Scroll Area
• Select
• Separator
• Sheet
• Skeleton
• Slider
• Sonner (Toast)
• Switch
• Table
• Tabs
• Textarea
• Toast
• Toggle
• Toggle Group
• Tooltip

(이 목록은 프로젝트 진행 상황에 따라 업데이트됩니다.)

Magic UI 기반 컴포넌트

이 스타터 킷에는 다음과 같은 Magic UI 컴포넌트들이 포함되어 있습니다:

• Animated Shiny Text (AnimatedShinyText)

scripts/add-magic-component.mjs 스크립트를 사용하여 더 많은 Magic UI 컴포넌트를 프로젝트에 쉽게 추가할 수 있습니다. (자세한 내용은 해당 스크립트 참조)

(이 목록은 프로젝트 진행 상황에 따라 업데이트됩니다.)

고급 라이브러리 통합 가이드 (선택 사항)

@my-org/ui-starter-kit는 핵심 UI 컴포넌트에 집중하여 가볍게 유지하는 것을 목표로 합니다. 그러나 BlockNote (리치 텍스트 편집기)나 Dnd Kit (드래그 앤 드롭 기능)과 같은 고급 라이브러리도 필요에 따라 쉽게 통합하여 사용할 수 있습니다.

이러한 라이브러리들은 기본적으로 포함되어 있지 않지만, 다음 가이드라인을 통해 프로젝트에 추가할 수 있습니다.

BlockNote (리치 텍스트 편집기)

BlockNote는 블록 기반의 강력한 리치 텍스트 편집기입니다. ui-starter-kit와 함께 사용하려면 다음 단계를 따르세요:

1. 설치: 애플리케이션 또는 ui-starter-kit 패키지에 BlockNote 관련 패키지를 설치합니다.

   pnpm add @blocknote/core @blocknote/react

2. 통합: BlockNote 문서를 참조하여 편집기를 애플리케이션의 필요한 부분에 통합합니다. ui-starter-kit의 스타일과 일관성을 유지하기 위해 필요에 따라 스타일을 조정할 수 있습니다.

   • BlockNote 공식 문서: https://www.blocknote.org/docs/introduction

Dnd Kit (드래그 앤 드롭)

Dnd Kit은 현대적이고 접근성 높은 드래그 앤 드롭 기능을 위한 경량 라이브러리입니다.

1. 설치: 애플리케이션 또는 ui-starter-kit 패키지에 Dnd Kit 관련 패키지를 설치합니다.

   pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

2. 통합: Dnd Kit 문서를 참조하여 필요한 드래그 앤 드롭 기능을 구현합니다. ui-starter-kit의 컴포넌트들과 함께 사용하여 풍부한 사용자 인터페이스를 만들 수 있습니다.

   • Dnd Kit 공식 문서: https://docs.dndkit.com/

이처럼 ui-starter-kit는 핵심적인 UI 기반을 제공하며, 프로젝트의 특정 요구사항에 맞춰 다양한 외부 라이브러리와 함께 확장하여 사용할 수 있도록 설계되었습니다.

기여 방법

(추후 내용 추가)

라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하십시오.