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

backup_temp/src/components/AssetManagementView.tsx

@@ -0,0 +1,168 @@
+import { useState } from 'react'
+import { idcServers, idcStorages, IdcServer } from '../data/idcData'
+import ServerDetailModal from './ServerDetailModal'
+
+const AssetManagementView = () => {
+  const [viewMode, setViewMode] = useState<'server' | 'storage'>('server')
+  const [selectedServer, setSelectedServer] = useState<IdcServer | null>(null)
+
+  return (
+    <div className="asset-management" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div className="content-header">
+        <div className="content-title">전산자산관리대장 (IDC)</div>
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button 
+            className={`btn ${viewMode === 'server' ? 'btn-primary' : 'btn-outline'}`}
+            onClick={() => setViewMode('server')}
+          >
+            서버 목록
+          </button>
+          <button 
+            className={`btn ${viewMode === 'storage' ? 'btn-primary' : 'btn-outline'}`}
+            onClick={() => setViewMode('storage')}
+          >
+            스토리지 목록
+          </button>
+        </div>
+      </div>
+
+      <div className="table-container">
+        <div style={{ padding: '24px 0 16px 0' }}>
+          <h3 style={{ fontSize: '1.125rem', fontWeight: 600, color: 'var(--primary-color)', margin: 0 }}>
+            {viewMode === 'server' ? 'IDC 서버 상세 정보' : 'IDC 스토리지 상세 정보'}
+          </h3>
+        </div>
+        
+        {viewMode === 'server' ? (
+          <table className="data-table">
+            <thead>
+              <tr>
+                <th>회사</th>
+                <th>서버번호</th>
+                <th>구분</th>
+                <th>설치위치</th>
+                <th>관리자</th>
+                <th>IP 주소</th>
+                <th>접속 정보</th>
+                <th>H/W 사양</th>
+                <th>OS</th>
+                <th>구매일</th>
+              </tr>
+            </thead>
+            <tbody>
+              {idcServers.map((server) => (
+                <tr key={server.serverNo} onClick={() => setSelectedServer(server)} style={{ cursor: 'pointer' }}>
+                  <td style={{ fontWeight: 600 }}>{server.company}</td>
+                  <td style={{ color: 'var(--primary-color)', fontWeight: 500 }}>{server.serverNo}</td>
+                  <td>
+                    <div>{server.category}</div>
+                    {server.remarks && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.remarks}</div>}
+                  </td>
+                  <td>{server.location}</td>
+                  <td>
+                    <div style={{ fontWeight: 500 }}>{server.managerPrimary ? `정: ${server.managerPrimary}` : '정: -'}</div>
+                    <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.managerSecondary ? `부: ${server.managerSecondary}` : '부: -'}</div>
+                  </td>
+                  <td>
+                    <div>{server.ip1}</div>
+                    {server.ip2 && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{server.ip2}</div>}
+                  </td>
+                  <td>
+                    {server.remoteAccess.map((access, idx) => (
+                      <div key={idx} style={{ 
+                        marginBottom: idx < server.remoteAccess.length - 1 ? '8px' : 0,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '2px'
+                      }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                          <span style={{ fontSize: '0.7rem', backgroundColor: '#f3f4f6', padding: '1px 4px', borderRadius: '2px', color: 'var(--text-muted)', fontWeight: 600 }}>{access.tool}</span>
+                          <span style={{ fontSize: '0.8125rem', fontWeight: 500 }}>{access.id}</span>
+                        </div>
+                        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', paddingLeft: '4px', borderLeft: '1px solid var(--border-color)', marginLeft: '4px' }}>
+                          PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span>
+                        </div>
+                      </div>
+                    ))}
+                  </td>
+                  <td style={{ fontSize: '0.8125rem' }}>
+                    <div style={{ fontWeight: 500 }}>{server.model}</div>
+                    <div style={{ color: 'var(--text-muted)' }}>{server.cpu} / {server.ram}</div>
+                    <div style={{ color: 'var(--text-muted)' }}>{server.storage.join(' + ')}</div>
+                  </td>
+                  <td style={{ fontSize: '0.8125rem' }}>{server.os}</td>
+                  <td style={{ fontSize: '0.8125rem' }}>{server.purchaseDate}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <table className="data-table">
+            <thead>
+              <tr>
+                <th>회사</th>
+                <th>서버번호</th>
+                <th>구분</th>
+                <th>설치위치</th>
+                <th>관리자</th>
+                <th>IP 주소</th>
+                <th>접속 정보</th>
+                <th>모델명</th>
+                <th>용량</th>
+                <th>구매일</th>
+              </tr>
+            </thead>
+            <tbody>
+              {idcStorages.map((storage) => (
+                <tr key={storage.serverNo}>
+                  <td style={{ fontWeight: 600 }}>{storage.company}</td>
+                  <td style={{ color: 'var(--primary-color)', fontWeight: 500 }}>{storage.serverNo}</td>
+                  <td>
+                    <div>{storage.category}</div>
+                    {storage.remarks && <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{storage.remarks}</div>}
+                  </td>
+                  <td>{storage.location}</td>
+                  <td>
+                    <span style={{ fontWeight: 500 }}>정: {storage.managerPrimary}</span>
+                    <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginLeft: '8px' }}>부: {storage.managerSecondary}</span>
+                  </td>
+                  <td>{storage.ip}</td>
+                  <td>
+                    {storage.remoteAccess.map((access, idx) => (
+                      <div key={idx} style={{ 
+                        marginBottom: idx < storage.remoteAccess.length - 1 ? '8px' : 0,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '2px'
+                      }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                          <span style={{ fontSize: '0.7rem', backgroundColor: '#f3f4f6', padding: '1px 4px', borderRadius: '2px', color: 'var(--text-muted)', fontWeight: 600 }}>{access.tool}</span>
+                          <span style={{ fontSize: '0.8125rem', fontWeight: 500 }}>{access.id}</span>
+                        </div>
+                        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', paddingLeft: '4px', borderLeft: '1px solid var(--border-color)', marginLeft: '4px' }}>
+                          PW: <span style={{ color: 'var(--text-main)' }}>{access.pw}</span>
+                        </div>
+                      </div>
+                    ))}
+                  </td>
+                  <td>{storage.model}</td>
+                  <td style={{ fontWeight: 600 }}>{storage.capacity}</td>
+                  <td>{storage.purchaseDate}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {selectedServer && (
+        <ServerDetailModal 
+          server={selectedServer} 
+          onClose={() => setSelectedServer(null)} 
+        />
+      )}
+    </div>
+  )
+}
+
+export default AssetManagementView