Initial commit

src/dummyDataGenerator.ts

@@ -0,0 +1,212 @@
+import { MasterAssetData, HardwareAsset, SoftwareAsset, SWUser } from './excelHandler';
+
+const corps = ['한맥', '삼안', '바론'];
+const users = ['홍길동', '김철수', '이영희', '박지훈', '김팀장', '신유진', '윤대웅', '마리아'];
+const depts = ['설계팀', '기술팀', '경영지원팀', '영업팀'];
+
+function rand(arr: any[]) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function randDate(startYear: number, endYear: number) {
+  const y = Math.floor(Math.random() * (endYear - startYear + 1)) + startYear;
+  const m = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
+  const d = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+function randUser() { // 25% 확률로 유휴자산 할당
+  return Math.random() < 0.25 ? '' : rand(users);
+}
+
+export function generateDummyData(): MasterAssetData {
+  const hw: HardwareAsset[] = [];
+  const sw: SoftwareAsset[] = [];
+  const swUsers: SWUser[] = [];
+  
+  // 1. 개인PC 50개
+  for (let i = 1; i <= 50; i++) {
+    const purchaseYear = Math.floor(Math.random() * 8) + 2017; // 2017~2024
+    hw.push({
+      id: Math.random().toString(36).substring(2, 9),
+      type: '개인PC',
+      법인: rand(corps),
+      자산코드: `HM-PC-${purchaseYear}-${String(i).padStart(3, '0')}`,
+      명칭: '',
+      위치: `${rand(['본사', '지사'])} ${Math.floor(Math.random()*5)+1}층`,
+      사용자: randUser(),
+      CPU: rand(['i5-10400', 'i7-12700', 'Ryzen 5', 'Ryzen 7']),
+      GPU: rand(['-', 'GTX 1660', 'RTX 3060', 'RTX 4070']),
+      RAM: rand(['16GB', '32GB']),
+      SSD1: rand(['256GB', '512GB', '1TB']),
+      SSD2: '',
+      HDD1: rand(['-', '1TB', '2TB']),
+      HDD2: '',
+      구매일: randDate(purchaseYear, purchaseYear),
+      금액: String(Math.floor(Math.random()*100 + 50) * 10000).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ','),
+      납품업체: rand(['다나와', '컴퓨존', '오피스디포']),
+      품의서명: '',
+      관리자: '', IP주소: '', MACaddress: '', OS: '', HW사양: ''
+    });
+  }
+
+  // 2. 서버 20개
+  for (let i = 1; i <= 20; i++) {
+    const purchaseYear = Math.floor(Math.random() * 8) + 2017; // 2017~2024
+    hw.push({
+      id: Math.random().toString(36).substring(2, 9),
+      type: '서버',
+      법인: rand(corps),
+      자산코드: `HM-SV-${purchaseYear}-${String(i).padStart(3, '0')}`,
+      명칭: `웹/DB 서버 #${i}`,
+      위치: 'IDC / 전산실',
+      관리자: randUser(),
+      IP주소: `192.168.10.${i}`,
+      MACaddress: '00:11:22:33:44:' + String(i).padStart(2, '0'),
+      OS: rand(['Windows Server 2019', 'Ubuntu 22.04 LTS', 'CentOS 7']),
+      HW사양: 'Xeon 16Core, 64GB RAM',
+      구매일: randDate(purchaseYear, purchaseYear),
+      금액: '5,000,000',
+      납품업체: '서버뱅크',
+      품의서명: ''
+    });
+  }
+
+  // 3. 스토리지 20개
+  for (let i = 1; i <= 20; i++) {
+    const purchaseYear = Math.floor(Math.random() * 8) + 2017; // 2017~2024
+    hw.push({
+      id: Math.random().toString(36).substring(2, 9),
+      type: '스토리지',
+      법인: rand(corps),
+      storage유형: rand(['NAS', 'DAS']),
+      자산코드: `HM-ST-${purchaseYear}-${String(i).padStart(3, '0')}`,
+      명칭: `백업 스토리지 #${i}`,
+      위치: '전산실',
+      모델명: rand(['Synology DS920+', 'QNAP TS-453D']),
+      용량: rand(['16TB', '32TB', '64TB']),
+      담당자_정: randUser(),
+      담당자_부: rand(users),
+      IP주소: `192.168.20.${i}`,
+      MACaddress: '',
+      구매일: randDate(purchaseYear, purchaseYear),
+      금액: '1,500,000',
+      납품업체: '스토리지넷',
+      품의서명: '',
+      관리자: '', OS: '', HW사양: ''
+    });
+  }
+
+  // 4. 전산비품 (노트북, 태블릿, 휴대폰 각각 5개씩)
+  const equips = [
+    { type: '노트북', code: 'NB', name: 'LG 그램 16인치', price: '1,800,000' },
+    { type: '태블릿', code: 'TB', name: '아이패드 프로 12.9', price: '1,500,000' },
+    { type: '휴대폰', code: 'PH', name: '갤럭시 S24', price: '1,200,000' }
+  ];
+  equips.forEach((eq) => {
+    for (let i = 1; i <= 5; i++) {
+      const purchaseYear = Math.floor(Math.random() * 6) + 2019; // 2019~2024
+      hw.push({
+        id: Math.random().toString(36).substring(2, 9),
+        type: '전산비품',
+        법인: rand(corps),
+        비품유형: eq.type,
+        자산코드: `HM-${eq.code}-${purchaseYear}-${String(i).padStart(3, '0')}`,
+        명칭: eq.name,
+        위치: rand(['본사', '지사']),
+        관리자: randUser(),
+        구매일: randDate(purchaseYear, purchaseYear),
+        금액: eq.price,
+        납품업체: '브랜드 총판',
+        품의서명: '',
+        IP주소: '', MACaddress: '', OS: '', HW사양: ''
+      });
+    }
+  });
+
+  // 5. 구독형 S/W 40개
+  for (let i = 1; i <= 40; i++) {
+    const swId = Math.random().toString(36).substring(2, 9);
+    
+    let isExpiring = Math.random() < 0.25;
+    let endDt = new Date();
+    if (isExpiring) {
+      endDt.setDate(endDt.getDate() + Math.floor(Math.random() * 25) + 1); // 1~25일 뒤 만료
+    } else {
+      endDt.setMonth(endDt.getMonth() + Math.floor(Math.random() * 11) + 2); // 넉넉히 남음
+    }
+    const endStr = `${endDt.getFullYear()}.${String(endDt.getMonth()+1).padStart(2,'0')}.${String(endDt.getDate()).padStart(2,'0')}`;
+    
+    sw.push({
+      id: swId,
+      type: '구독SW',
+      법인: rand(corps),
+      제품명: rand(['Adobe CC All Apps', 'Microsoft 365', 'Slack Pro', 'Notion Team']),
+      구매일: '2024-01-01',
+      구독일: `2024.01.01 ~ ${endStr}`,
+      금액: '600,000',
+      수량: Math.floor(Math.random() * 5) + 3, // 3~7
+      계정명: `user${i}@hm.com`,
+      납품업체: '총판',
+      비고: '연간구독'
+    });
+    const assignCount = Math.floor(Math.random() * 2) + 1;
+    for (let j=0; j<assignCount; j++) {
+      swUsers.push({
+        id: Math.random().toString(36).substring(2, 9),
+        swId: swId,
+        법인: rand(corps),
+        부서: rand(depts),
+        팀: rand(['1팀', '2팀', '기획팀']),
+        직위: rand(['사원', '대리', '과장']),
+        이름: rand(users),
+        사용기간: '2024.01~12',
+        신청서명: ''
+      });
+    }
+  }
+
+  // 6. 영구형 S/W 40개
+  for (let i = 1; i <= 40; i++) {
+    const swId = Math.random().toString(36).substring(2, 9);
+
+    let isExpiring = Math.random() < 0.25;
+    let endDt = new Date();
+    if (isExpiring) {
+      endDt.setDate(endDt.getDate() + Math.floor(Math.random() * 25) + 1); // 1~25일 뒤 만료
+    } else {
+      endDt.setMonth(endDt.getMonth() + Math.floor(Math.random() * 11) + 2); // 넉넉히 남음
+    }
+    const endStr = `${endDt.getFullYear()}.${String(endDt.getMonth()+1).padStart(2,'0')}.${String(endDt.getDate()).padStart(2,'0')}`;
+
+    sw.push({
+      id: swId,
+      type: '영구SW',
+      법인: rand(corps),
+      제품명: rand(['AutoCAD 2024', 'Windows 10 Pro', '한컴오피스 2022', 'Visual Studio 2022']),
+      구매일: '2020-05-15',
+      유지보수여부: true,
+      비고: `유지보수: ~ ${endStr}`,
+      금액: '1,500,000',
+      수량: Math.floor(Math.random() * 3) + 2, // 2~4
+      계정명: `sn-2020-${i}`,
+      납품업체: '오토데스크 / MS'
+    });
+    const assignCount = Math.floor(Math.random() * 2) + 1;
+    for (let j=0; j<assignCount; j++) {
+      swUsers.push({
+        id: Math.random().toString(36).substring(2, 9),
+        swId: swId,
+        법인: rand(corps),
+        부서: rand(depts),
+        팀: rand(['1팀', '2팀']),
+        직위: rand(['과장', '차장', '부장']),
+        이름: rand(users),
+        사용기간: '영구',
+        신청서명: ''
+      });
+    }
+  }
+
+  return { hw, sw, swUsers };
+}

src/excelHandler.ts

@@ -0,0 +1,324 @@
+import * as XLSX from 'xlsx';
+
+export interface HardwareAsset {
+  id: string;
+  type: string; // '개인PC', '서버', '스토리지', '전산비품'
+  법인: string;
+  자산코드: string;
+  명칭: string;
+  위치: string;
+  관리자: string;
+  IP주소: string;
+  MACaddress: string;
+  HW사양: string;
+  OS: string;
+  사용자?: string;
+  CPU?: string;
+  GPU?: string;
+  RAM?: string;
+  SSD1?: string;
+  SSD2?: string;
+  HDD1?: string;
+  HDD2?: string;
+  storage유형?: string;
+  비품유형?: string;
+  모델명?: string;
+  용량?: string;
+  담당자_정?: string;
+  담당자_부?: string;
+  구매일?: string;
+  금액?: string;
+  납품업체?: string;
+  품의서명?: string;
+}
+
+export interface SoftwareAsset {
+  id: string;
+  type: string; // '구독SW', '영구SW'
+  법인: string;
+  제품명: string;
+  구매일: string;
+  구독일?: string;
+  유지보수여부?: boolean;
+  금액: string;
+  수량: number;
+  계정명: string;
+  납품업체: string;
+  비고: string;
+}
+
+export interface SWUser {
+  id: string;
+  swId: string;
+  법인: string;
+  부서: string;
+  팀: string;
+  직위: string;
+  이름: string;
+  사용기간: string;
+  신청서명: string;
+}
+
+export interface MasterAssetData {
+  hw: HardwareAsset[];
+  sw: SoftwareAsset[];
+  swUsers: SWUser[];
+}
+
+const HW_TABS = ['개인PC', '서버', '스토리지', '전산비품'];
+const SW_TABS = ['구독SW', '영구SW'];
+
+const HW_HEADERS = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS', '구매일', '금액', '납품업체', '품의서명'];
+const PC_HEADERS = ['법인', '자산코드', '사용자', '위치', 'CPU', 'GPU', 'RAM', 'SSD1', 'SSD2', 'HDD1', 'HDD2', '구매일', '금액', '납품업체', '품의서명'];
+const STORAGE_HEADERS = ['법인', '유형', '자산코드', '명칭', '위치', '모델명', '용량', '담당자(정)', '담당자(부)', 'IP주소', 'MAC주소', '구매일', '금액', '납품업체', '품의서명'];
+const SUB_SW_HEADERS = ['ID', '법인', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
+const PERM_SW_HEADERS = ['ID', '법인', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
+const SW_USER_HEADERS = ['id', 'swId', '법인', '부서', '팀', '직위', '이름', '사용기간', '신청서명'];
+
+/**
+ * 템플릿 엑셀 다중 시트로 다운로드
+ */
+export function downloadTemplate() {
+  const wb = XLSX.utils.book_new();
+
+  // HW 탭들 생성
+  HW_TABS.forEach(tab => {
+    if (tab === '개인PC') {
+      const ws = XLSX.utils.aoa_to_sheet([PC_HEADERS]);
+      ws['!cols'] = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+      XLSX.utils.book_append_sheet(wb, ws, tab);
+    } else if (tab === '스토리지') {
+      const ws = XLSX.utils.aoa_to_sheet([STORAGE_HEADERS]);
+      ws['!cols'] = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+      XLSX.utils.book_append_sheet(wb, ws, tab);
+    } else {
+      const ws = XLSX.utils.aoa_to_sheet([HW_HEADERS]);
+      ws['!cols'] = [{wch:15}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:40}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+      XLSX.utils.book_append_sheet(wb, ws, tab);
+    }
+  });
+
+  // SW 탭들 생성
+  SW_TABS.forEach(tab => {
+    let hd = tab === '구독SW' ? SUB_SW_HEADERS : PERM_SW_HEADERS;
+    const ws = XLSX.utils.aoa_to_sheet([hd]);
+    ws['!cols'] = [{wch:15}, {wch:15}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
+    XLSX.utils.book_append_sheet(wb, ws, tab);
+  });
+
+  const swUserWs = XLSX.utils.aoa_to_sheet([SW_USER_HEADERS]);
+  swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+  XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');
+
+  XLSX.writeFile(wb, 'itam_assets_template.xlsx');
+}
+
+/**
+ * 마스터 데이터를 여러 시트로 쪼개서 내보내기
+ */
+export function exportToExcel(masterData: MasterAssetData) {
+  const wb = XLSX.utils.book_new();
+
+  // HW
+  HW_TABS.forEach(tab => {
+    const targetAssets = masterData.hw.filter(a => a.type === tab);
+    let wsData;
+    let colsConfig;
+
+    if (tab === '개인PC') {
+      wsData = [
+        PC_HEADERS,
+        ...targetAssets.map(a => [a.법인, a.자산코드, a.사용자, a.위치, a.CPU, a.GPU, a.RAM, a.SSD1, a.SSD2, a.HDD1, a.HDD2, a.구매일, a.금액, a.납품업체, a.품의서명])
+      ];
+      colsConfig = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+    } else if (tab === '스토리지') {
+      wsData = [
+        STORAGE_HEADERS,
+        ...targetAssets.map(a => [a.법인, a.storage유형, a.자산코드, a.명칭, a.위치, a.모델명, a.용량, a.담당자_정, a.담당자_부, a.IP주소, a.MACaddress, a.구매일, a.금액, a.납품업체, a.품의서명])
+      ];
+      colsConfig = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+    } else {
+      wsData = [
+        HW_HEADERS,
+        ...targetAssets.map(a => [a.법인, a.자산코드, a.명칭, a.위치, a.관리자, a.IP주소, a.MACaddress, a.HW사양, a.OS, a.구매일, a.금액, a.납품업체, a.품의서명])
+      ];
+      colsConfig = [{wch:15}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:40}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+    }
+    
+    const ws = XLSX.utils.aoa_to_sheet(wsData);
+    ws['!cols'] = colsConfig;
+    XLSX.utils.book_append_sheet(wb, ws, tab);
+  });
+
+  // SW
+  SW_TABS.forEach(tab => {
+    const targetAssets = masterData.sw.filter(a => a.type === tab);
+    let wsData;
+    if (tab === '구독SW') {
+      wsData = [
+        SUB_SW_HEADERS,
+        ...targetAssets.map(a => [a.id, a.법인, a.제품명, a.구매일, a.구독일, a.금액, a.수량, a.계정명, a.납품업체, a.비고])
+      ];
+    } else {
+      wsData = [
+        PERM_SW_HEADERS,
+        ...targetAssets.map(a => [a.id, a.법인, a.제품명, a.구매일, a.유지보수여부 ? 'Y' : 'N', a.금액, a.수량, a.계정명, a.납품업체, a.비고])
+      ];
+    }
+    const ws = XLSX.utils.aoa_to_sheet(wsData);
+    ws['!cols'] = [{wch:15}, {wch:15}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
+    XLSX.utils.book_append_sheet(wb, ws, tab);
+  });
+
+  // SW_사용자
+  const swUserWsData = [
+    SW_USER_HEADERS,
+    ...masterData.swUsers.map(u => [u.id, u.swId, u.법인, u.부서, u.팀, u.직위, u.이름, u.사용기간, u.신청서명])
+  ];
+  const swUserWs = XLSX.utils.aoa_to_sheet(swUserWsData);
+  swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+  XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');
+  
+  const dateStr = new Date().toISOString().split('T')[0];
+  XLSX.writeFile(wb, `itam_assets_master_${dateStr}.xlsx`);
+}
+
+/**
+ * 업로드된 다중 시트 엑셀을 파싱하여 Master Data 구성
+ */
+export async function parseExcel(file: File): Promise<MasterAssetData> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      try {
+        const data = e.target?.result;
+        const workbook = XLSX.read(data, { type: 'binary' });
+
+        const hwAssets: HardwareAsset[] = [];
+        const swAssets: SoftwareAsset[] = [];
+        const swUsers: SWUser[] = [];
+
+        workbook.SheetNames.forEach(sheetName => {
+          const worksheet = workbook.Sheets[sheetName];
+          const json = XLSX.utils.sheet_to_json(worksheet) as any[];
+
+          if (HW_TABS.includes(sheetName)) {
+            json.forEach(row => {
+              if (sheetName === '개인PC') {
+                hwAssets.push({
+                  id: Math.random().toString(36).substring(2, 9),
+                  type: sheetName,
+                  법인: row['법인'] || '',
+                  자산코드: row['자산코드'] || '',
+                  명칭: '', // 개인PC는 명칭 미사용
+                  위치: row['위치'] || '',
+                  사용자: row['사용자'] || '',
+                  관리자: '',
+                  IP주소: '',
+                  MACaddress: '',
+                  HW사양: '',
+                  OS: '',
+                  CPU: row['CPU'] || '',
+                  GPU: row['GPU'] || '',
+                  RAM: row['RAM'] || '',
+                  SSD1: row['SSD1'] || '',
+                  SSD2: row['SSD2'] || '',
+                  HDD1: row['HDD1'] || '',
+                  HDD2: row['HDD2'] || '',
+                  구매일: row['구매일'] || '',
+                  금액: row['금액'] ? String(row['금액']) : '',
+                  납품업체: row['납품업체'] || '',
+                  품의서명: row['품의서명'] || '',
+                });
+              } else if (sheetName === '스토리지') {
+                hwAssets.push({
+                  id: Math.random().toString(36).substring(2, 9),
+                  type: sheetName,
+                  법인: row['법인'] || '',
+                  자산코드: row['자산코드'] || '',
+                  명칭: row['명칭'] || '',
+                  위치: row['위치'] || '',
+                  관리자: '',
+                  IP주소: row['IP주소'] || '',
+                  MACaddress: row['MAC주소'] || row['MACaddress'] || row['MAC address'] || '',
+                  HW사양: '',
+                  OS: '',
+                  storage유형: row['유형'] || '',
+                  모델명: row['모델명'] || '',
+                  용량: row['용량'] || '',
+                  담당자_정: row['담당자(정)'] || '',
+                  담당자_부: row['담당자(부)'] || '',
+                  구매일: row['구매일'] || '',
+                  금액: row['금액'] ? String(row['금액']) : '',
+                  납품업체: row['납품업체'] || '',
+                  품의서명: row['품의서명'] || '',
+                });
+              } else {
+                hwAssets.push({
+                  id: Math.random().toString(36).substring(2, 9),
+                  type: sheetName,
+                  법인: row['법인'] || '',
+                  자산코드: row['자산코드'] || '',
+                  명칭: row['명칭'] || '',
+                  위치: row['위치'] || '',
+                  관리자: row['관리자'] || '',
+                  IP주소: row['IP주소'] || '',
+                  MACaddress: row['MACaddress'] || row['MAC address'] || '',
+                  HW사양: row['HW사양'] || row['H/W 사양'] || '',
+                  OS: row['OS'] || '',
+                  구매일: row['구매일'] || '',
+                  금액: row['금액'] ? String(row['금액']) : '',
+                  납품업체: row['납품업체'] || '',
+                  품의서명: row['품의서명'] || '',
+                });
+              }
+            });
+          }
+
+          if (SW_TABS.includes(sheetName)) {
+            json.forEach(row => {
+              swAssets.push({
+                id: row['ID'] ? String(row['ID']) : Math.random().toString(36).substring(2, 9),
+                type: sheetName,
+                법인: row['법인'] || '',
+                제품명: row['제품명'] || '',
+                구매일: row['구매일'] || '',
+                구독일: row['구독일'] || '',
+                유지보수여부: row['유지보수여부'] === 'Y' || row['유지보수여부'] === true,
+                금액: row['금액'] ? String(row['금액']) : '',
+                수량: parseInt(row['수량'] || '1', 10),
+                계정명: row['계정명'] || '',
+                납품업체: row['납품업체'] || '',
+                비고: row['비고'] || '',
+              });
+            });
+          }
+
+          if (sheetName === 'SW_사용자') {
+            json.forEach(row => {
+              swUsers.push({
+                id: row['id'] ? String(row['id']) : Math.random().toString(36).substring(2, 9),
+                swId: row['swId'] ? String(row['swId']) : '',
+                법인: row['법인'] || '',
+                부서: row['부서'] || '',
+                팀: row['팀'] || '',
+                직위: row['직위'] || '',
+                이름: row['이름'] || '',
+                사용기간: row['사용기간'] || '',
+                신청서명: row['신청서명'] || '',
+              });
+            });
+          }
+        });
+
+        resolve({ hw: hwAssets, sw: swAssets, swUsers });
+      } catch (err) {
+        reject(err);
+      }
+    };
+
+    reader.onerror = (err) => reject(err);
+    reader.readAsBinaryString(file);
+  });
+}

src/style.css

@@ -0,0 +1,354 @@
+:root {
+  --primary-color: #1E5149;
+  --primary-hover: #153c36;
+  --primary-light: #edf2f1;
+  --text-main: #111827;
+  --text-muted: #6B7280;
+  --border-color: #E5E7EB;
+  --bg-color: #F9FAFB;
+  --sidebar-bg: #ffffff;
+  --white: #FFFFFF;
+  --danger: #dc2626;
+  
+  --dash-primary: #6cc020;
+  --dash-light: #f2f9ec;
+  --dash-danger: #cf222e;
+}
+
+.shadow-sm {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
+}
+.rounded-lg {
+  border-radius: 8px;
+}
+.dashboard-card {
+  background-color: var(--white);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: none;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-layout-2col {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+@media (max-width: 768px) {
+  .dashboard-layout-2col {
+    grid-template-columns: 1fr;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Pretendard Variable', Pretendard, sans-serif;
+  color: var(--text-main);
+  background-color: var(--bg-color);
+  line-height: 1.5;
+  letter-spacing: -0.02em;
+  font-size: 14px;
+}
+
+/* App Layout - Sidebar & Main Content */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+}
+
+.sidebar {
+  width: 260px;
+  background-color: var(--sidebar-bg);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-main);
+}
+
+.sidebar-header h1 span {
+  color: var(--primary-color);
+}
+
+.nav-section {
+  padding: 1.5rem 0 0.5rem;
+}
+
+.nav-section h3 {
+  padding: 0 1.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.nav-section h3 i {
+  width: 14px;
+  height: 14px;
+}
+
+.nav-list {
+  list-style: none;
+}
+
+.nav-list li {
+  padding: 0.75rem 1.5rem;
+  margin: 0.25rem 0.75rem;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--text-main);
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.nav-list li i {
+  width: 18px;
+  height: 18px;
+  color: var(--text-muted);
+}
+
+.nav-list li:hover {
+  background-color: var(--bg-color);
+}
+
+.nav-list li.active {
+  background-color: var(--primary-light);
+  color: var(--primary-color);
+}
+
+.nav-list li.active i {
+  color: var(--primary-color);
+}
+
+/* Main Content Wrapper */
+.main-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Header */
+.top-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  background-color: var(--white);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.header-title h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-main);
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.content-area {
+  padding: 2rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Dashboard Grid */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background-color: var(--white);
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-card .title {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.stat-card .value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-main);
+  margin-top: 0.5rem;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  line-height: 1;
+}
+
+.btn i { width: 16px; height: 16px; }
+
+.btn-primary {
+  background-color: var(--primary-color);
+  color: var(--white);
+  border: 1px solid var(--primary-color);
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-hover);
+  border-color: var(--primary-hover);
+}
+
+.btn-outline {
+  background-color: transparent;
+  color: var(--text-main);
+  border: 1px solid var(--border-color);
+}
+
+.btn-outline:hover {
+  background-color: var(--border-color);
+}
+
+.btn-danger {
+  color: var(--danger);
+  border-color: #fca5a5;
+}
+
+.btn-danger:hover {
+  background-color: #fef2f2;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0.25rem;
+}
+
+/* Table */
+.table-container {
+  background-color: var(--white);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+th, td {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+th {
+  font-weight: 600;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  white-space: nowrap;
+  background-color: #FAFAFA;
+}
+
+td {
+  font-size: 0.875rem;
+}
+
+tbody tr:last-child td { border-bottom: none; }
+tbody tr:hover { background-color: var(--bg-color); }
+.empty-row td { text-align: center; padding: 3rem; color: var(--text-muted); }
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
+.modal-content {
+  background-color: var(--white);
+  width: 100%; max-width: 600px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+  transform: translateY(20px);
+  transition: transform 0.2s ease;
+}
+.modal-overlay:not(.hidden) .modal-content { transform: translateY(0); }
+.modal-header {
+  background-color: var(--primary-color);
+  color: var(--white);
+  padding: 1rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.modal-header h2 { font-size: 1.125rem; font-weight: 500; }
+.modal-body { padding: 1.5rem; }
+.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
+.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
+.form-group.full-width { grid-column: span 2; }
+.form-group label { font-size: 0.875rem; font-weight: 500; }
+.form-group input, .form-group textarea {
+  padding: 0.625rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-family: inherit; font-size: 0.875rem;
+  outline: none; transition: border-color 0.2s;
+}
+.form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color); }
+.modal-footer {
+  padding: 1rem 1.5rem; border-top: 1px solid var(--border-color);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.footer-actions { display: flex; gap: 0.5rem; }