diff --git a/design_rule.md b/design_rule.md index 74ef70a..9f1db35 100644 --- a/design_rule.md +++ b/design_rule.md @@ -5,36 +5,43 @@ --- ### 1. 디자인 철학 (Design Philosophy) -* **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다. -* **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다. -* **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다. +* **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다. +* **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다. +* **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다. -### 2. 타이포그래피 (Typography) -* **Font Family**: `Pretendard Variable`, `Pretendard` (전역 적용) -* **Base Font Size**: 기본 텍스트 크기는 **16px**로 설정합니다. -* **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다. -* **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold), 800(ExtraBold), 900(Black). -* **Standard Scale**: - * **XS (12px)**: 보조 텍스트, 작은 라벨 - * **SM (14px)**: 일반 항목 라벨, 필터 텍스트 - * **Base (16px)**: 메인 데이터 내용, 테이블 셀, 상세 정보 값 - * **MD (19px)**: 섹션 제목, 강조 문구 - * **LG (23px)**: 주요 페이지 타이틀 - * **XL (29px)**: 핵심 통계 수치 (KPI) +### 2. 반응형 스케일링 (Fluid Scaling System) +* **Core Principle**: 모든 UI 요소는 `vmin`과 `vw` 단위를 조합한 `clamp()` 함수를 통해 화면 크기에 맞춰 동적으로 변화합니다. +* **Typography Scale**: + * **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트 + * **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨 + * **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터 + * **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목 + * **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목 + * **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표 +* **Layout Units**: + * **Header Height**: `clamp(50px, 8vmin, 90px)` + * **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)` + * **Radius**: `clamp(6px, 1.5vmin, 16px)` -### 3. 컬러 팔레트 (Color Palette) -* **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼. -* **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey). -* **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선. -* **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White). +### 3. 컬러 팔레트 (Vercel Stark Palette) +* **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소. +* **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘. +* **Border**: `#ebebeb` (Hairline) - 정보 구분선. +* **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2). +* **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`). -### 4. 레이아웃 및 컴포넌트 규칙 (Layout Rules) -* **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다. -* **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다. -* **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다. -* **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다. - * **Standard Height**: 입력창 및 선택창은 전역 표준인 `38px`를 유지합니다. -* **Modal (모달 공통 규칙)**: - * **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다. - * **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다. - * **Layout**: 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다. +### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules) +* **Header & Navigation**: + * 상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다. +* **Unified Filter Bar**: + * 검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다. + * **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다. +* **Dashboard**: + * **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다. + * **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다. +* **Footer**: + * 화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다. + * 상단에 1px 헤어라인 구분선을 가집니다. +* **Security & UX**: + * **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다. + * **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다. diff --git a/index.html b/index.html index 9b2c65a..f836f0a 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - ITAM 자산관리 ERP + 한맥가족 자산관리시스템 @@ -25,7 +25,7 @@ diff --git a/src/components/Modal/Forms/CommonHwFields.ts b/src/components/Modal/Forms/CommonHwFields.ts new file mode 100644 index 0000000..4d2d9e4 --- /dev/null +++ b/src/components/Modal/Forms/CommonHwFields.ts @@ -0,0 +1,38 @@ +import { ASSET_SCHEMA } from '../../../core/schema'; +import { generateOptionsHTML } from '../ModalUtils'; +import { CORP_LIST, ORG_LIST } from '../SharedData'; + +export function renderCommonHwFields(): string { + return ` +
구매 및 증빙 정보
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ +
+ + +
+
+
+ + +
+ `; +} diff --git a/src/components/Modal/Forms/PcForm.ts b/src/components/Modal/Forms/PcForm.ts new file mode 100644 index 0000000..547b02e --- /dev/null +++ b/src/components/Modal/Forms/PcForm.ts @@ -0,0 +1,72 @@ +import { ASSET_SCHEMA } from '../../../core/schema'; +import { generateOptionsHTML } from '../ModalUtils'; +import { CORP_LIST, ORG_LIST, HW_STATUS_LIST } from '../SharedData'; + +export function renderPcForm(): string { + return ` +
기본 정보 (PC/노트북)
+
+ +
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
사용자 및 조직
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
시스템 사양
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ `; +} diff --git a/src/components/Modal/Forms/ServerForm.ts b/src/components/Modal/Forms/ServerForm.ts new file mode 100644 index 0000000..e482636 --- /dev/null +++ b/src/components/Modal/Forms/ServerForm.ts @@ -0,0 +1,90 @@ +import { ASSET_SCHEMA } from '../../../core/schema'; +import { generateOptionsHTML } from '../ModalUtils'; +import { CORP_LIST, LOCATION_DATA, HW_STATUS_LIST } from '../SharedData'; + +export function renderServerForm(): string { + return ` +
기본 정보 (서버)
+
+ +
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
시스템 사양
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
네트워크 및 접속 정보
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
설치 위치
+
+ + +
+
+ +
+ + + +
+ +
+ `; +} diff --git a/src/components/Modal/HWModal.ts b/src/components/Modal/HWModal.ts index 7773548..c0b2a25 100644 --- a/src/components/Modal/HWModal.ts +++ b/src/components/Modal/HWModal.ts @@ -1,6 +1,5 @@ import { state, saveAsset, deleteAsset } from '../../core/state'; import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema'; -import { calculatePcScoreDeductive, getPcGrade } from '../../core/utils'; import { generateOptionsHTML, setFieldValue, @@ -11,10 +10,15 @@ import { } from './ModalUtils'; import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS, TYPE_PREFIX_MAP } from './SharedData'; import { BaseModal } from './BaseModal'; +import { renderPcForm } from './Forms/PcForm'; +import { renderServerForm } from './Forms/ServerForm'; +import { renderCommonHwFields } from './Forms/CommonHwFields'; +/** + * 하드웨어 자산 상세 모달 (Modular Edition) + */ class HwAssetModal extends BaseModal { private dynamicMapConfig: Record = {}; - private masterComponents: any[] = []; constructor() { super('hw', '자산 상세 정보'); @@ -25,7 +29,10 @@ class HwAssetModal extends BaseModal {