pio-essential

TailwindCSS Based Design System

Getting Start

Introduction

만들어둔 컴포넌트나 훅을 다른 프로젝트에 계속 copy/paste 하는건 너무 귀찮아!

그래서 만들어 봤습니다.
PIO 가 애정하고 자주 쓰는 React Components, Hooks 모음집 pio-essential

pio-essential:
필요한 컴포넌트, 훅을 프로젝트에 복사하여 붙여넣을 수 있는 React 오픈 소스 라이브러리 입니다.

pio-essntial 은 npx 를 통해 필요한 컴포넌트, 훅을 복사하여 붙여넣을 수 있는 재사용 가능한 컴포넌트, 훅 모음입니다.
필요한 컴포넌트, 훅을 선택하고 프로젝트에 복사하세요! 그리고 필요한 부분들을 수정해서 사용하세요!

pio-essential 의 컴포넌트, 훅은 npm 을 통해 제공되지 않습니다.

Installation

pio-essential 은 shadcn/ui 으로부터 모티브를 얻었으며, TailwindCSS 를 기반으로 작성되었습니다.
그렇기 때문에 pio-essential 의 컴포넌트를 사용하기 위해서는 다음의 종속성 설치 및 환경 설정이 필요합니다.

Note: Shadcn UI 를 사용하고 있다면 해당 단계를 건너뛰어도 무방합니다.
shadcn UI 를 통해 좀 더 자세하게 종속성 설치 및 환경 설정하기 (권장)

1. TailwindCSS 설치

1

Install Tailwind CSS

Terminal

npm install -D tailwindcss postcss autoprefixer

yarn add -D tailwindcss postcss autoprefixer

npx tailwindcss init

2

Add Tailwind to your PostCSS configuration

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3

Configure your template paths

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

4

Add the Tailwind directives to your CSS

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

NextJS, Vite 등 다양한 환경에서의 TailwindCSS 설정은 TailwindCSS 공식 문서를 따라주세요.

2. 그 외 종속성 설치 및 유틸리티 함수 생성

npm install tailwind-merge clsx class-variance-authority

yarn add tailwind-merge clsx class-variance-authority

src/lib/utils.ts

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

3. path alias 설정

pio-essential 의 컴포넌트, 훅은 다음의 구조에 복사됩니다.

root
└── 📦 src
    ├── 📂 components
    |   ├── 📂 ui
    |   └── 📂 icons
    └── 📂 hooks

연관된 컴포넌트, 유틸리티 함수 import 를 위해 path alias 설정이 필요합니다.

tsconfig

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

StoryBook 을 통해 사용법 알아보기

StoryBook 을 통해 컴포넌트 및 훅의 Reference를 알아보세요!

Usage

npx pio-essential add <NAME>

Components

• Button
• HorizontalList
• LoadingDots
• Modal
• RippleEffect — 잔물결 이펙트를 생성하는 컴포넌트
• Sidebar — Resizeable Sidebar 컴포넌트
• Tab — React Context API 기반 Tab Header, Tab Section

Hooks

• useHorizontalScroll — 수평 스크롤을 위한 Grabbing 이벤트 기능을 제공하는 Hook
• useOutsideClick — 특정 영역 외부 클릭에 대한 callback 기능을 제공하는 Hook