Lumir-internal-design-system NPM

LUMIR Internal Design System

루미르 사내 프로젝트용 디자인 시스템입니다. 이 시스템은 일관된 UI/UX를 제공하고 개발 효율성을 높이기 위해 설계되었습니다.

주요 기능

사이드바 컴포넌트
메뉴 아이템 관리
반응형 디자인
Next.js와 통합

설치

npm install lumir-internal-design-system
pnpm add lumir-internal-design-system

사용법

CSS 파일을 임포트합니다:

import "lumir-internal-design-system/index.css";

컴포넌트를 임포트하여 사용합니다:

import { SidebarTest } from "lumir-internal-design-system";

next.config.js 파일에 아래 설정을 추가해줍니다.:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['lumir-internal-design-system']
};

컴포넌트

사이드바

사이드바 컴포넌트는 애플리케이션의 주요 네비게이션 요소입니다.

메뉴 구조

메뉴는 main과 config 두 섹션으로 나뉩니다. 각 섹션은 여러 카테고리를 포함하며, 각 카테고리는 여러 메뉴 아이템을 가집니다.

메뉴 아이템 타입

interface MenuItem {
  name: string;
  path: string;
  icon: string;
}

interface MenuCategory {
  category: string;
  icon: string;
  items: MenuItem[];
}

import {
  Sidebar,
  SidebarItem,
  SidebarLogo,
} from "lumir-internal-design-system";

const favorites: MenuItem[] = [
  {
    name: '전체 면접 일정',
    path: '/calendar',
    icon: 'FiPieChart',
  }
]

const menuItems: {
  main: MenuCategory[];
  config: MenuCategory[];
} = {main: [
    {
      category: '나의 면접 일정',
      icon: 'FiPieChart',
      items: [
        { name: '서면평가', path: '/', icon: 'FiPieChart' },
        { name: '대면평가', path: '/dashboard/employees', icon: 'FiBarChart2' },
        { name: '입사 후 1차 평가', path: '/dashboard/employees', icon: 'FiBarChart2' },
        { name: '입사 후 2차 평가', path: '/dashboard/employees', icon: 'FiBarChart2' },
      ]
    },
    {
      category: '인사 관리',
      icon: 'FiCalendar',
      items: [
        { name: '지원자 관리', path: '/attendance', icon: 'FiClock' },
        { name: '채용 포지션 관리', path: '/attendance', icon: 'FiClock' },
        { name: '지원자 신규 추가', path: '/attendance', icon: 'FiClock' },
      ]
    },
    {
      category: '관리자',
      icon: 'FiSettings',
      items: [
        { name: '사용자 관리', path: '/management/files', icon: 'FiHome' },
      ]
    },
    {
      category: '외부 링크',
      icon: 'FiSettings',
      items: [
        { name: '루미르', path: 'https://www.google.com', icon: 'FiHome' },
        { name: '사람인', path: 'https://www.google.com', icon: 'FiHome' },
        { name: '잡코리아', path: 'https://www.google.com', icon: 'FiHome' },
        { name: '점핏', path: 'https://www.google.com', icon: 'FiHome' },
        { name: '프로그래머스', path: 'https://www.google.com', icon: 'FiHome' },
      ]
    }
  ],
  config: [
    {
      category: '설정',
      icon: 'FiSettings',
      items: [
        { name: '일반 설정', path: '/settings/users', icon: 'FiSettings' },
        { name: '근태 설정', path: '/settings', icon: 'FiTool' },
      ]
    },
  ]}

<Sidebar currentPath={pathname}>
  <SidebarHeader>
    <SidebarLogo src={LUMIR_LOGO_1} />
    <SidebarToggle />
  </SidebarHeader>
  <SidebarFavorite
    name="전체 면접 일정"
    path="/calendar"
    icon="FiPieChart"
    LinkComponent={Link}
  />
  <SidebarUpperSection>
    {/* 메뉴 카테고리 및 아이템 */}
  </SidebarUpperSection>
  <SidebarBottomSection>
    {/* 사용자 정보 등 */}
  </SidebarBottomSection>
</Sidebar>

자세한 사용법은 사이드바 문서를 참조하세요.