🛠️ 개발 및 관리 규칙 (Strict Development Rules)

1. 언어 설정: 영어로 생각하되, 모든 답변은 한국어로 작성한다.
2. 임의 수정 절대 금지 (Zero-Arbitrary Change):
   • 사용자가 명시적으로 지시한 부분 외에는 단 한 줄의 코드도, 그 어떤 파일도 임의로 수정, 정리, 리팩토링하지 않는다.
   • 지시받지 않은 다른 파트의 코드는 절대 건드리지 않으며, 영향 범위가 요청 범위를 벗어나지 않도록 '외과 수술식(Surgical) 수정'을 원칙으로 한다.
3. 개선 작업 절차 (Test-First Approach):
   • 사용자가 개선(Refactoring, Optimization 등)을 지시한 경우, 수정 전 현재 시스템이 정상적으로 잘 작동하는지 먼저 전수 확인한다.
   • 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증한다.
   • 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 '진행시켜' 승인을 얻은 뒤에만 집행한다.
4. 선보고 후승인: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.

---

🚀 서버 구동 및 외부 접속 규칙 (Server Run & External Access)

1. 포트 고정: 개발 서버는 반드시 8080 포트를 사용한다. (vite.config.ts 설정 준수)
2. 외부 접속 허용 (Host): 사무실 내 타 직원이 접속할 수 있도록 --host 모드로 구동한다.
3. 구동 명령어:

   npm run dev
   

   • 해당 명령어 실행 시 0.0.0.0 또는 Network: http://[내-IP]:8080/ 경로로 타인 접속이 가능하다.
4. IP 확인 방법:
   • Windows: ipconfig 명령어로 'IPv4 주소' 확인 후 공유.

---

🎨 ITAM 시스템 디자인 가이드 (Design Guide)

1. 디자인 철학 (Design Philosophy)

   • Minimalist & Border-based: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
   • Professional Achromatic: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
   • Green Accent: 블루 대신 짙은 그린(#1E5149)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.

2. 타이포그래피 (Typography)

   • Font Family: Pretendard (전역 적용)
   • Letter Spacing: -0.02em (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
   • Weights: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).

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

4. 레이아웃 및 컴포넌트 규칙 (Layout Rules)

   • Box-less Design: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
   • Line-based Division: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
   • Table: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
   • Input/Button: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
   • Modal (모달 공통 규칙):
     • Header: 짙은 그린(#1E5149) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
     • Interaction: 사용자의 편의를 위해 ESC 키를 누르거나 모달 바깥 영역(Overlay)을 클릭하면 모달이 닫히도록 구현합니다.
     • Layout: detail.png 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.