LUMIR Internal Design System

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

목차

• 주요 기능
• 설치
• 사용법
• 메뉴 구조
• 컴포넌트
  • 사이드바
  • 로고
• 커스터마이징
• 참고사항
• 라이선스

주요 기능

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

설치

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

사용법

1. CSS 파일을 임포트합니다:

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

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

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

3. 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>

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

커스터마이징

사이드바는 TailwindCSS로 커스터마이징할 수 있습니다. Sidebar 컴포넌트에 className을 prop으로 전달하여 사용하세요.

참고사항

• 이 디자인 시스템은 Next.js의 Link 컴포넌트와 통합되어 있습니다. 다른 프레임워크에서는 동작하지 않습니다.
• 아이콘은 react-icons 라이브러리를 사용합니다.
• 외부 링크 지원: 메뉴 아이템에 외부 URL을 지정할 수 있습니다.

라이선스

이 프로젝트는 내부용으로, 루미르의 소유입니다. 무단 사용 및 배포를 금지합니다.