환영합니다

SLSoft Components는 공통으로 사용할 수 있는 UI 컴포넌트 라이브러리입니다.

이곳에서 제공하는 모든 컴포넌트는 Vue 3와 Vite를 기반으로 구축되어 있어 효율적이고 일관된 UI 개발을 가능하게 합니다.

주요 특징 ✨

• 손쉬운 사용법: 직관적인 API와 명확한 문서를 통해 누구나 빠르게 시작할 수 있습니다.
• 타입스크립트 지원: 타입 정의를 제공하여 코드 자동완성과 오류 최소화를 도와줍니다.
• TailwindCSS 호환성: 컴포넌트는 TailwindCSS 클래스를 쉽게 적용하여 자유로운 스타일 커스터마이징이 가능합니다.

설치 및 사용 방법 🚀

제공되는 압축 파일을 프로젝트의 루트 경로(package.json이 있는 폴더)의 다음 위치에 압축 해제해주세요:

/lib/slsoft-components

컴포넌트를 프로젝트 내에서 손쉽게 참조할 수 있도록 vite.config.js 파일에 다음과 같은 alias 설정을 추가해주세요:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'slsoft-components': path.resolve(__dirname, 'lib/slsoft-components/'), // 컴포넌트 라이브러리 참조를 위한 설정
    },
  },
  server: {
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

설정이 완료되면 별도의 import 없이 컴포넌트를 즉시 사용할 수 있습니다. 예를 들어, 아래와 같이 <sc-button> 컴포넌트를 템플릿에서 바로 사용할 수 있습니다.

<template>
  <sc-button color="primary" class="w-[200px]">
    기본 버튼
  </sc-button>
</template>

자세한 사용 예제는 각 컴포넌트의 상세 문서를 참고해주세요.

• 컴포넌트 목록 및 사용법

문의 및 지원 📞

라이브러리 사용 중 문제가 발생하거나 요청 사항이 있는 경우 담당자에게 문의해 주시기 바랍니다.