feat: 공동작업을 위한 프로젝트 구조 최적화 및 가이드 배포

backup_temp/src/components/ServerDetailModal.tsx

@@ -0,0 +1,144 @@
+import React, { useEffect } from 'react';
+import { IdcServer } from '../data/idcData';
+
+interface ServerDetailModalProps {
+  server: IdcServer;
+  onClose: () => void;
+}
+
+const ServerDetailModal: React.FC<ServerDetailModalProps> = ({ server, onClose }) => {
+  // ESC 키로 모달 닫기
+  useEffect(() => {
+    const handleEsc = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => {
+      window.removeEventListener('keydown', handleEsc);
+    };
+  }, [onClose]);
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 style={{ margin: 0, fontSize: '1.125rem', fontWeight: 600 }}>{server.category} ({server.serverNo})</h2>
+          <button className="modal-close-btn" onClick={onClose} aria-label="Close modal">&times;</button>
+        </div>
+        
+        <div className="modal-body">
+          <div className="detail-grid">
+            {/* Row 1 */}
+            <div className="detail-item">
+              <label>회사 구분</label>
+              <div className="detail-value">{server.company}</div>
+            </div>
+            <div className="detail-item">
+              <label>서버 번호</label>
+              <div className="detail-value" style={{ color: 'var(--primary-color)', fontWeight: 600 }}>{server.serverNo}</div>
+            </div>
+
+            {/* Row 2 */}
+            <div className="detail-item">
+              <label>자산명(용도)</label>
+              <div className="detail-value">{server.category}</div>
+            </div>
+            <div className="detail-item">
+              <label>설치 위치</label>
+              <div className="detail-value">{server.location}</div>
+            </div>
+
+            {/* Row 3: 관리자 추가 */}
+            <div className="detail-item full-width">
+              <label>관리 담당자</label>
+              <div className="detail-value">
+                <span style={{ fontWeight: 600, color: 'var(--text-main)' }}>정: {server.managerPrimary}</span>
+                <span style={{ marginLeft: '16px', color: 'var(--text-muted)' }}>부: {server.managerSecondary}</span>
+              </div>
+            </div>
+
+            {/* Row 4 */}
+            <div className="detail-item">
+              <label>IP 주소 1</label>
+              <div className="detail-value">{server.ip1 || '-'}</div>
+            </div>
+            <div className="detail-item">
+              <label>IP 주소 2</label>
+              <div className="detail-value">{server.ip2 || '-'}</div>
+            </div>
+
+            {/* Row 5 */}
+            <div className="detail-item full-width">
+              <label>원격 접속 정보</label>
+              <div className="detail-value">
+                {server.remoteAccess.length > 0 ? (
+                  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+                    {server.remoteAccess.map((access, idx) => (
+                      <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '4px 8px', backgroundColor: 'var(--bg-muted)', borderRadius: '4px', border: '1px solid var(--border-color)' }}>
+                        <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-muted)' }}>{access.tool}</span>
+                        <span style={{ fontWeight: 500 }}>{access.id}</span>
+                        <span style={{ color: 'var(--border-color)' }}>|</span>
+                        <span>PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span></span>
+                      </div>
+                    ))}
+                  </div>
+                ) : '-'}
+              </div>
+            </div>
+
+            {/* Row 6 */}
+            <div className="detail-item">
+              <label>제조사 및 모델명</label>
+              <div className="detail-value">{server.model || '-'}</div>
+            </div>
+            <div className="detail-item">
+              <label>OS</label>
+              <div className="detail-value">{server.os || '-'}</div>
+            </div>
+
+            {/* Row 7 */}
+            <div className="detail-item">
+              <label>CPU</label>
+              <div className="detail-value">{server.cpu || '-'}</div>
+            </div>
+            <div className="detail-item">
+              <label>RAM</label>
+              <div className="detail-value">{server.ram || '-'}</div>
+            </div>
+
+            {/* Row 8 */}
+            <div className="detail-item full-width">
+              <label>Storage (디스크 구성)</label>
+              <div className="detail-value">{server.storage.length > 0 ? server.storage.join(' + ') : '-'}</div>
+            </div>
+
+            {/* Row 9 */}
+            <div className="detail-item">
+              <label>구매일자</label>
+              <div className="detail-value">{server.purchaseDate || '-'}</div>
+            </div>
+            <div className="detail-item">
+              <label>모니터링 여부</label>
+              <div className="detail-value">{server.monitoring || '-'}</div>
+            </div>
+
+            {/* Row 10 */}
+            <div className="detail-item full-width">
+              <label>비고 및 특이사항</label>
+              <div className="detail-value" style={{ minHeight: '40px' }}>{server.remarks || '-'}</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="modal-footer">
+          <button className="btn btn-outline" onClick={onClose} style={{ marginRight: '8px' }}>닫기</button>
+          <button className="btn btn-primary" onClick={onClose}>수정(저장)</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ServerDetailModal;