88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import { useState } from 'react'
|
|
import { mockHardwareSpecs, HardwareSpec } from '../data/mockData'
|
|
|
|
const SpecModal = ({ spec, onClose }: { spec: HardwareSpec, onClose: () => void }) => {
|
|
return (
|
|
<div style={{
|
|
position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
|
|
backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center',
|
|
zIndex: 1000
|
|
}}>
|
|
<div className="card" style={{ width: '600px', maxWidth: '90%' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
|
|
<h2>상세 사양 정보</h2>
|
|
<button className="btn" onClick={onClose}>×</button>
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '10px' }}>
|
|
<strong>PC명:</strong> <span>{spec.pcName}</span>
|
|
<strong>사용자:</strong> <span>{spec.userName}</span>
|
|
<strong>부서:</strong> <span>{spec.department}</span>
|
|
<strong>OS:</strong> <span>{spec.os}</span>
|
|
<strong>CPU:</strong> <span>{spec.cpu}</span>
|
|
<strong>Memory:</strong> <span>{spec.memory}</span>
|
|
<strong>Disk:</strong> <span>{spec.disk}</span>
|
|
<strong>MAC:</strong> <span>{spec.macAddress}</span>
|
|
<strong>IP:</strong> <span>{spec.ipAddress}</span>
|
|
<strong>Graphic:</strong> <span>{spec.graphicCard}</span>
|
|
</div>
|
|
<div style={{ marginTop: '20px', textAlign: 'right' }}>
|
|
<button className="btn btn-primary" onClick={onClose}>닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const HardwareManagementView = () => {
|
|
const [selectedSpec, setSelectedSpec] = useState<HardwareSpec | null>(null)
|
|
|
|
return (
|
|
<div>
|
|
<div className="content-header">
|
|
<div className="content-title">H/W 사양 정보</div>
|
|
</div>
|
|
|
|
<table className="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>PC명</th>
|
|
<th>부서</th>
|
|
<th>사용자</th>
|
|
<th>OS</th>
|
|
<th>CPU</th>
|
|
<th>IP주소</th>
|
|
<th>상세</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{mockHardwareSpecs.map(spec => (
|
|
<tr key={spec.id}>
|
|
<td>{spec.pcName}</td>
|
|
<td>{spec.department}</td>
|
|
<td>{spec.userName}</td>
|
|
<td>{spec.os.split(' ')[2]}</td>
|
|
<td title={spec.cpu}>{spec.cpu.split('@')[0]}</td>
|
|
<td>{spec.ipAddress}</td>
|
|
<td>
|
|
<button
|
|
className="btn btn-primary"
|
|
style={{ padding: '4px 8px', fontSize: '0.8rem' }}
|
|
onClick={() => setSelectedSpec(spec)}
|
|
>
|
|
보기
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
{selectedSpec && (
|
|
<SpecModal spec={selectedSpec} onClose={() => setSelectedSpec(null)} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HardwareManagementView
|