@your-org/bbang-components

YES24 스타일의 React 컴포넌트 라이브러리입니다. shadcn/ui 기반으로 제작되었으며, Tailwind CSS를 사용하고 커스터마이징 가능한 테마 시스템을 제공합니다.

설치

npm install @your-org/bbang-components
# 또는
yarn add @your-org/bbang-components
# 또는
pnpm add @your-org/bbang-components

필수 의존성

이 패키지는 다음 peer dependencies가 필요합니다:

• react ^18.2.0
• react-dom ^18.2.0

사용법

기본 설정

1. CSS 스타일 import:

import '@your-org/bbang-components/styles'

2. 컴포넌트 import:

import { Button, ProductCard, Footer } from '@your-org/bbang-components'

테마 커스터마이징

방법 1: CSS 변수 사용

CSS 변수를 직접 설정하여 테마를 커스터마이징할 수 있습니다:

:root {
  --primary: 210 100% 50%; /* 기본 파란색 */
  --primary-foreground: 0 0% 100%;
  --font-sans: 'Your Font', sans-serif;
  --font-roboto: 'Your Roboto Font', sans-serif;
  --radius-custom: 5px;
}

방법 2: JavaScript 테마 API 사용

import { createTheme, generateThemeCSS } from '@your-org/bbang-components/themes'

// 커스텀 테마 생성
const customTheme = createTheme({
  colors: {
    primary: {
      DEFAULT: 'hsl(220, 90%, 56%)',
      foreground: 'hsl(0, 0%, 100%)',
    },
    background: 'hsl(0, 0%, 100%)',
  },
  fonts: {
    sans: ['Inter', 'sans-serif'],
    roboto: ['Roboto', 'sans-serif'],
  },
  borderRadius: {
    custom: '8px',
  },
})

// CSS 변수 생성
const themeCSS = generateThemeCSS(customTheme)

// 스타일 태그에 적용
const style = document.createElement('style')
style.textContent = themeCSS
document.head.appendChild(style)

방법 3: React 컴포넌트로 테마 적용

import { useEffect } from 'react'
import { createTheme, generateThemeCSS } from '@your-org/bbang-components/themes'

function App() {
  useEffect(() => {
    const customTheme = createTheme({
      colors: {
        primary: {
          DEFAULT: 'hsl(220, 90%, 56%)',
        },
      },
      fonts: {
        sans: ['Inter', 'sans-serif'],
      },
    })

    const css = generateThemeCSS(customTheme)
    const style = document.createElement('style')
    style.id = 'yes24-theme'
    style.textContent = css
    document.head.appendChild(style)

    return () => {
      const existing = document.getElementById('yes24-theme')
      if (existing) existing.remove()
    }
  }, [])

  return <YourApp />
}

컴포넌트 카테고리

Buttons

• CartActionButton
• CouponModalButton
• FooterScrollTopButton
• FreeShippingButton
• OrderActionButton
• ProductListActionButton
• QuickCategoryButton

Cart

• CartItemRow
• CartItemCheckbox
• CartItemImage
• CartItemInfo
• CartItemPrice
• CartItemQuantity
• CartItemDelivery
• CartItemActions
• CartActionBar
• FreeShippingBanner
• DigitalCartTable
• 기타 카트 관련 컴포넌트들

Product

• ProductCard
• ProductGridItem
• ProductList
• SectionProductCard
• SectionProductList
• 기타 상품 관련 컴포넌트들

Navigation

• NavigationHeader
• NavigationLink
• TabBar
• TabItem
• SearchBar
• 기타 네비게이션 컴포넌트들

Footer

• Footer
• FooterLink
• FooterCompanyInfo
• FooterContactInfo
• 기타 푸터 컴포넌트들

Modal/Banner

• CouponModal
• HeroBanner
• FilterButton
• 기타 모달/배너 컴포넌트들

Review

• ReviewGallery
• ReviewCard
• 기타 리뷰 관련 컴포넌트들

UI (shadcn/ui 기반)

• Button
• Card
• Checkbox
• Input
• Badge
• Label
• Progress

예제

기본 사용

import { Button, ProductCard } from '@your-org/bbang-components'
import '@your-org/bbang-components/styles'

function App() {
  return (
    <div>
      <Button>클릭하세요</Button>
      <ProductCard
        imageSrc="/image.jpg"
        title="상품명"
        price={24000}
      />
    </div>
  )
}

테마 적용 예제

import { Footer } from '@your-org/bbang-components'
import { createTheme, generateThemeCSS } from '@your-org/bbang-components/themes'
import { useEffect } from 'react'
import '@your-org/bbang-components/styles'

function App() {
  useEffect(() => {
    // 커스텀 테마 생성
    const theme = createTheme({
      colors: {
        primary: {
          DEFAULT: 'hsl(220, 90%, 56%)',
        },
      },
      fonts: {
        sans: ['Inter', 'sans-serif'],
      },
    })

    // CSS 변수 적용
    const css = generateThemeCSS(theme)
    const style = document.createElement('style')
    style.id = 'yes24-custom-theme'
    style.textContent = css
    document.head.appendChild(style)

    return () => {
      const existing = document.getElementById('yes24-custom-theme')
      if (existing) existing.remove()
    }
  }, [])

  return (
    <Footer
      links={[
        { label: '회사소개', bold: false },
        { label: '개인정보처리방침', bold: true },
      ]}
    />
  )
}

폰트 설정

기본적으로 다음 폰트가 사용됩니다:

• Sans: Apple SD Gothic Neo
• Roboto: Roboto (숫자 표시용)

Google Fonts에서 Roboto를 로드하려면:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

커스텀 폰트를 사용하려면 테마 설정에서 변경할 수 있습니다.

개발

# 개발 서버 실행
npm run dev

# 빌드
npm run build

# 미리보기
npm run preview

라이선스

MIT

기여

기여를 환영합니다! 이슈를 등록하거나 Pull Request를 보내주세요.