feat: 공동작업을 위한 프로젝트 구조 최적화 및 가이드 배포
This commit is contained in:
295
backup_temp/src/App.css
Normal file
295
backup_temp/src/App.css
Normal file
@@ -0,0 +1,295 @@
|
||||
:root {
|
||||
--primary-color: #1E5149;
|
||||
--primary-hover: #163d37;
|
||||
--bg-default: #FFFFFF;
|
||||
--bg-muted: #F9FAFB;
|
||||
--info-color: #4B5563; /* 무채색 계열로 변경 */
|
||||
--text-main: #111827;
|
||||
--text-muted: #6B7280;
|
||||
--border-color: #E5E7EB;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: var(--bg-default);
|
||||
color: var(--text-main);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
height: 50px;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top-bar-brand {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-right: 48px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.top-bar-menu {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
height: 100%;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
color: white;
|
||||
border-bottom: 3px solid white;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 50px);
|
||||
overflow: hidden; /* 전체 페이지 스크롤 방지 */
|
||||
padding: 0; /* 패딩은 내부 요소에서 관리 */
|
||||
}
|
||||
|
||||
.content-header {
|
||||
padding: 32px 40px 16px 40px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: var(--bg-default);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 0 40px 40px 40px;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Common Table Styles */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: separate; /* sticky border 유지를 위해 separate 사용 */
|
||||
border-spacing: 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.data-table th, .data-table td {
|
||||
padding: 14px 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
background-color: #F8FAFC; /* 헤더 전용 배경색 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.data-table tr:hover {
|
||||
background-color: var(--bg-muted);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--bg-muted);
|
||||
}
|
||||
|
||||
/* Dashboard Stats - Border based */
|
||||
.dashboard-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0;
|
||||
margin-bottom: 48px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.stat-card:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--bg-default);
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.modal-close-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px 24px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.detail-item.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.detail-item label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
background-color: var(--bg-default);
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--bg-muted);
|
||||
}
|
||||
|
||||
51
backup_temp/src/App.tsx
Normal file
51
backup_temp/src/App.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { useState } from 'react'
|
||||
import './App.css'
|
||||
import AssetManagementView from './components/AssetManagementView'
|
||||
import HardwareManagementView from './components/HardwareManagementView'
|
||||
|
||||
function App() {
|
||||
const [activeMenu, setActiveMenu] = useState('assets')
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeMenu) {
|
||||
case 'assets':
|
||||
return <AssetManagementView />
|
||||
case 'hardware':
|
||||
return <HardwareManagementView />
|
||||
default:
|
||||
return <AssetManagementView />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-container">
|
||||
<header className="top-bar">
|
||||
<div className="top-bar-brand">
|
||||
ITAM System
|
||||
</div>
|
||||
<nav className="top-bar-menu">
|
||||
<div
|
||||
className={`menu-item ${activeMenu === 'assets' ? 'active' : ''}`}
|
||||
onClick={() => setActiveMenu('assets')}
|
||||
>
|
||||
전산자산관리대장
|
||||
</div>
|
||||
<div
|
||||
className={`menu-item ${activeMenu === 'hardware' ? 'active' : ''}`}
|
||||
onClick={() => setActiveMenu('hardware')}
|
||||
>
|
||||
H/W 사양 정보
|
||||
</div>
|
||||
<div className="menu-item">S/W 설치 현황</div>
|
||||
<div className="menu-item">라이선스 관리</div>
|
||||
<div className="menu-item">실물 자산 관리</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main className="main-content">
|
||||
{renderContent()}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
168
backup_temp/src/components/AssetManagementView.tsx
Normal file
168
backup_temp/src/components/AssetManagementView.tsx
Normal file
@@ -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
|
||||
51
backup_temp/src/components/DashboardView.tsx
Normal file
51
backup_temp/src/components/DashboardView.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { mockCategories } from '../data/mockData'
|
||||
|
||||
const DashboardView = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="content-header">
|
||||
<div className="content-title">대시보드</div>
|
||||
</div>
|
||||
|
||||
<div className="dashboard-stats">
|
||||
<div className="stat-card">
|
||||
<div className="stat-label">전체 자산</div>
|
||||
<div className="stat-value">8개</div>
|
||||
</div>
|
||||
{mockCategories.map(cat => (
|
||||
<div key={cat.id} className="stat-card">
|
||||
<div className="stat-label">{cat.name}</div>
|
||||
<div className="stat-value">{cat.count}개</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>최근 변경 내역</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>날짜</th>
|
||||
<th>내용</th>
|
||||
<th>사용자</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2023-04-11</td>
|
||||
<td>PC 신규 등록</td>
|
||||
<td>이관형</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2023-04-10</td>
|
||||
<td>모니터 부서 할당 변경</td>
|
||||
<td>관리자</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashboardView
|
||||
87
backup_temp/src/components/HardwareManagementView.tsx
Normal file
87
backup_temp/src/components/HardwareManagementView.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
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
|
||||
144
backup_temp/src/components/ServerDetailModal.tsx
Normal file
144
backup_temp/src/components/ServerDetailModal.tsx
Normal file
@@ -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">×</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;
|
||||
608
backup_temp/src/data/idcData.ts
Normal file
608
backup_temp/src/data/idcData.ts
Normal file
@@ -0,0 +1,608 @@
|
||||
export interface RemoteAccess {
|
||||
tool: string;
|
||||
ip?: string;
|
||||
id: string;
|
||||
pw: string;
|
||||
}
|
||||
|
||||
export interface IdcServer {
|
||||
company: string;
|
||||
serverNo: string;
|
||||
category: string;
|
||||
remarks: string;
|
||||
location: string;
|
||||
managerPrimary: string;
|
||||
managerSecondary: string;
|
||||
ip1: string;
|
||||
ip2: string;
|
||||
remoteAccess: RemoteAccess[];
|
||||
monitoring: string;
|
||||
serverIdMatch: string;
|
||||
model: string;
|
||||
os: string;
|
||||
cpu: string;
|
||||
ram: string;
|
||||
storage: string[];
|
||||
purchaseDate: string;
|
||||
}
|
||||
|
||||
export interface IdcStorage {
|
||||
company: string;
|
||||
serverNo: string;
|
||||
category: string;
|
||||
remarks: string;
|
||||
location: string;
|
||||
managerPrimary: string;
|
||||
managerSecondary: string;
|
||||
ip: string;
|
||||
managementIp?: string;
|
||||
remoteAccess: RemoteAccess[];
|
||||
model: string;
|
||||
capacity: string;
|
||||
purchaseDate: string;
|
||||
}
|
||||
|
||||
export const idcServers: IdcServer[] = [
|
||||
{
|
||||
company: "한맥",
|
||||
serverNo: "hm-idc-001",
|
||||
category: "한맥 인트라넷",
|
||||
remarks: "",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.70",
|
||||
ip2: "192.168.10.5",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" },
|
||||
{ tool: "Remote Util", id: "211.206.127.70", pw: "1234아이티!" }
|
||||
],
|
||||
monitoring: "win exp, raid X",
|
||||
serverIdMatch: "srv07d330084",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2016",
|
||||
cpu: "intel xeon silver4110 CPU @2.10GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "2.7TB"],
|
||||
purchaseDate: "2020.12.10"
|
||||
},
|
||||
{
|
||||
company: "한맥",
|
||||
serverNo: "hm-idc-002",
|
||||
category: "한맥 인트라넷 예비",
|
||||
remarks: "단가, 입사자지원 서버 (스마트 건설 용도 구매)",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.78",
|
||||
ip2: "192.168.10.13",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!" }
|
||||
],
|
||||
monitoring: "win exp, raid X",
|
||||
serverIdMatch: "srcff5294c84",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "intel xeon silver4214R CPU @2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "2.7TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-001",
|
||||
category: "삼안 인트라넷",
|
||||
remarks: "",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.237",
|
||||
ip2: "erp.samaneng.com",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" },
|
||||
{ tool: "Remote Util", id: "118.220.172.237", pw: "1234아이티!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "newSmintranet",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2016",
|
||||
cpu: "intel xeon silver4214R CPU @2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "3.27TB"],
|
||||
purchaseDate: "2019.12.20"
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-002",
|
||||
category: "삼안 인트라넷 예비",
|
||||
remarks: "",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.249",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" },
|
||||
{ tool: "Remote Util", id: "678-605-383-130", pw: "1234아이티!" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "INTRANET",
|
||||
model: "HPE ProLiant DL360 GEN9",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2630 v3 @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["279GB", "2.72TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-003",
|
||||
category: "SATIS 01",
|
||||
remarks: "구 SATIS 서버, 세금계산서 발행(회계)",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.228",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "satissg11707808" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "satis01",
|
||||
model: "HPE ProLiant DL380p GEN8",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz",
|
||||
ram: "20GB",
|
||||
storage: ["100GB", "458GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-004",
|
||||
category: "SATIS 02",
|
||||
remarks: "SATIS 리뉴얼 버전 (ERP 서버)",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.229",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "satissg11707808" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "satis02",
|
||||
model: "HPE ProLiant DL380p GEN8",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2643 0 @ 3.30GHz",
|
||||
ram: "20GB",
|
||||
storage: ["100GB", "458GB", "18.1TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-005",
|
||||
category: "웹 서버",
|
||||
remarks: "남양주 테스트 서버 (도메인 관리 기능 제거 2026.03.11)",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "samanweb.cafe24.com",
|
||||
ip2: "118.220.172.195",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "saman+2013+web" }
|
||||
],
|
||||
monitoring: "win exp, 포트 안열림",
|
||||
serverIdMatch: "www",
|
||||
model: "HPE ProLiant DL380p GEN8",
|
||||
os: "Windwos Server 2012",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2609 0 @ 2.40GHz",
|
||||
ram: "16GB",
|
||||
storage: ["100GB", "230GB", "230GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-006",
|
||||
category: "PQ DB 서버",
|
||||
remarks: "",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.231",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "7013ddj10235!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "src5dd67f2ed",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "intel xeon silver4210R CPU @2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["278GB", "2.18TB"],
|
||||
purchaseDate: "2024.12.16"
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-007",
|
||||
category: "Oracle DB 서버",
|
||||
remarks: "",
|
||||
location: "서관 202번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.225",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "7013ddj10235!" }
|
||||
],
|
||||
monitoring: "win exp, raid X",
|
||||
serverIdMatch: "SAMAN-DB",
|
||||
model: "HPE ProLiant DL380 GEN9",
|
||||
os: "Windows Server 2012",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2650 v4 @ 2.20GHz",
|
||||
ram: "64GB",
|
||||
storage: ["558GB", "1.09TB", "1.09TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-008",
|
||||
category: "안전관리",
|
||||
remarks: "삼안 개발서버2 - AI, SSL, 장헌TBM, 노드",
|
||||
location: "서관 202번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.171",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" }
|
||||
],
|
||||
monitoring: "연결 X",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL380 GEN10",
|
||||
os: "Windwos Server 2022",
|
||||
cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "128GB",
|
||||
storage: ["278GB", "3.27TB"],
|
||||
purchaseDate: "2025.04.10"
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-idc-009",
|
||||
category: "가족사 공통메뉴",
|
||||
remarks: "삼안 개발서버1 - QNA, 급여명세서",
|
||||
location: "서관 202번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "118.220.172.233",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "samanerp1!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "srcc9ac928ee",
|
||||
model: "HPE ProLiant DL380 GEN10",
|
||||
os: "Windwos Server 2022",
|
||||
cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "128GB",
|
||||
storage: ["278GB", "3.27TB"],
|
||||
purchaseDate: "2025.04.10"
|
||||
},
|
||||
{
|
||||
company: "한라",
|
||||
serverNo: "hl-idc-001",
|
||||
category: "한라 인트라넷",
|
||||
remarks: "인트라넷,안전, 운영, MISO 서버로 운영 중(win 2008)",
|
||||
location: "동관 54번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.143",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "1.234.37.143", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL360 GEN9",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz",
|
||||
ram: "8GB",
|
||||
storage: ["299GB", "631GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "한라",
|
||||
serverNo: "hl-idc-002",
|
||||
category: "안전전산화 서버 (디자인팀 웹)",
|
||||
remarks: "인트라넷 서버 다운 시 백업용 대기",
|
||||
location: "동관 54번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.144",
|
||||
ip2: "192.168.20.49",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "1.234.37.144", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL360 GEN9",
|
||||
os: "Windows Server 2012",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5-2603 v4 @ 1.70GHz",
|
||||
ram: "8GB",
|
||||
storage: ["299GB", "631GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "한라",
|
||||
serverNo: "hl-idc-003",
|
||||
category: "개발서버2",
|
||||
remarks: "PTC 연구비로 구매한 예비서버2",
|
||||
location: "동관 53번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "192.168.20.171",
|
||||
ip2: "1.234.37.171",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "1.234.37.171", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL380 Gen10",
|
||||
os: "Windows Server 2019 Standard",
|
||||
cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "1TB"],
|
||||
purchaseDate: "2022.09.21"
|
||||
},
|
||||
{
|
||||
company: "장헌",
|
||||
serverNo: "jh-idc-001",
|
||||
category: "장헌인트라넷",
|
||||
remarks: "BEPs",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.71",
|
||||
ip2: "192.168.10.6",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "211.206.127.71", pw: "1234dkdlxl!" },
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!%" }
|
||||
],
|
||||
monitoring: "잠금 걸려있음",
|
||||
serverIdMatch: "src775d3e5df",
|
||||
model: "HPE ProLiant DL380 GEN10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "1TB"],
|
||||
purchaseDate: "2022.09.21"
|
||||
},
|
||||
{
|
||||
company: "장헌",
|
||||
serverNo: "jh-idc-002",
|
||||
category: "장헌 인트라넷 예비",
|
||||
remarks: "",
|
||||
location: "동관 53번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.170",
|
||||
ip2: "192.168.20.170",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "1.234.37.170", pw: "1234dkdlxl!" },
|
||||
{ tool: "원격데스크탑", id: "Administrator", pw: "Hanmac2141!" }
|
||||
],
|
||||
monitoring: "원격 X, O",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL360 Gen10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "1TB"],
|
||||
purchaseDate: "2022.04.01"
|
||||
},
|
||||
{
|
||||
company: "장헌",
|
||||
serverNo: "jh-idc-003",
|
||||
category: "인트라넷(구)",
|
||||
remarks: "현재는 GIT 백업 으로 사용",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.110",
|
||||
ip2: "192.168.10.40",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "211.206.127.110", pw: "1234dkdlxl!" },
|
||||
{ tool: "원격데스크탑", id: "User", pw: "Hanmac2141!" }
|
||||
],
|
||||
monitoring: "",
|
||||
serverIdMatch: "",
|
||||
model: "",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel(R) Xeon(R) Silver 4214R CPU @ 2.40GHz",
|
||||
ram: "",
|
||||
storage: [],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "(주)장헌",
|
||||
serverNo: "jh-idc-004",
|
||||
category: "(주) 장헌 인트라넷",
|
||||
remarks: "2025.12.23 IDC 이전 설치",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.76",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "User", pw: "Hanmac2141!%" }
|
||||
],
|
||||
monitoring: "win exp, raid X",
|
||||
serverIdMatch: "DESKTOP-5IL75B7",
|
||||
model: "",
|
||||
os: "Windows 10",
|
||||
cpu: "12th Gen Intel(R) Core(TM) i7-12700F",
|
||||
ram: "32GB",
|
||||
storage: ["465GB", "1.81TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "PTC",
|
||||
serverNo: "ptc-idc-001",
|
||||
category: "PTC인트라넷",
|
||||
remarks: "2024.05.22 인트라넷서버로 교체",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.72",
|
||||
ip2: "192.168.10.7",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "211.206.127.72", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "",
|
||||
model: "SYSTEM X3650 M2",
|
||||
os: "Windows Server 2008 R2",
|
||||
cpu: "Intel(R) Xeon(R) CPU E5520 @ 2.27GHz",
|
||||
ram: "16GB",
|
||||
storage: ["556GB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "PTC",
|
||||
serverNo: "ptc-idc-002",
|
||||
category: "예비서버",
|
||||
remarks: "PTC 인트라넷 예비서버",
|
||||
location: "서관 204번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "192.168.10.8",
|
||||
ip2: "",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "",
|
||||
model: "HPE ProLiant DL360 GEN10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["278GB", "1.09TB"],
|
||||
purchaseDate: "2022.04.01"
|
||||
},
|
||||
{
|
||||
company: "PTC",
|
||||
serverNo: "ptc-idc-003",
|
||||
category: "DB 백업 서버",
|
||||
remarks: "2024.05.22 변경 (데스크탑)",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.74",
|
||||
ip2: "192.168.10.9",
|
||||
remoteAccess: [
|
||||
{ tool: "Remote Util", id: "211.206.127.74", pw: "1234dkdlxl!" }
|
||||
],
|
||||
monitoring: "설치 X",
|
||||
serverIdMatch: "",
|
||||
model: "",
|
||||
os: "Window 7",
|
||||
cpu: "Intel(R) Core(TM)2 CPU 6400 @ 2.13GHz",
|
||||
ram: "4GB",
|
||||
storage: ["593GB", "1.23TB"],
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "바론",
|
||||
serverNo: "br-idc-001",
|
||||
category: "인트라넷",
|
||||
remarks: "",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "211.206.127.75",
|
||||
ip2: "192.168.10.10",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!%" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "srcf0136042d",
|
||||
model: "HPE ProLiant DL360 GEN10",
|
||||
os: "Windows Server 2022",
|
||||
cpu: "Intel Xeon(R) Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "2.18TB"],
|
||||
purchaseDate: "2025.04.14"
|
||||
},
|
||||
{
|
||||
company: "현타",
|
||||
serverNo: "ht-idc-001",
|
||||
category: "인트라넷",
|
||||
remarks: "",
|
||||
location: "동관 53번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip1: "1.234.37.172",
|
||||
ip2: "192.168.20.172",
|
||||
remoteAccess: [
|
||||
{ tool: "원격데스크탑", id: "administrator", pw: "Hanmac2141!" }
|
||||
],
|
||||
monitoring: "O",
|
||||
serverIdMatch: "src901e49933",
|
||||
model: "HPE ProLiant DL380 GEN10",
|
||||
os: "Windows Server 2019",
|
||||
cpu: "Intel Xeon Silver 4210R CPU @ 2.40GHz",
|
||||
ram: "32GB",
|
||||
storage: ["280GB", "1TB"],
|
||||
purchaseDate: "2022.09.21"
|
||||
}
|
||||
];
|
||||
|
||||
export const idcStorages: IdcStorage[] = [
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-nas-001",
|
||||
category: "인트라넷 백업 스토리지",
|
||||
remarks: "",
|
||||
location: "서관 203번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip: "118.220.172.246",
|
||||
remoteAccess: [{ tool: "원격", id: "administrator", pw: "sg11707808" }],
|
||||
model: "Promiss R Series",
|
||||
capacity: "36TB",
|
||||
purchaseDate: ""
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-nas-002",
|
||||
category: "성과품 스토리지",
|
||||
remarks: "매니지먼트 접속 확인 불가",
|
||||
location: "서관 205번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip: "118.220.172.248",
|
||||
managementIp: "118.220.172.247",
|
||||
remoteAccess: [{ tool: "원격", id: "administrator", pw: "sg11707808" }],
|
||||
model: "ENC_3U_16BAY_D",
|
||||
capacity: "23TB",
|
||||
purchaseDate: "2019.06.03"
|
||||
},
|
||||
{
|
||||
company: "삼안",
|
||||
serverNo: "sa-nas-003",
|
||||
category: "성과품 백업 스토리지",
|
||||
remarks: "",
|
||||
location: "서관 202번",
|
||||
managerPrimary: "김철수",
|
||||
managerSecondary: "홍길동",
|
||||
ip: "118.220.172.241",
|
||||
managementIp: "118.220.172.240",
|
||||
remoteAccess: [
|
||||
{ tool: "원격", id: "administrator", pw: "saman1!" },
|
||||
{ tool: "원격", id: "admin0", pw: "Root1234" }
|
||||
],
|
||||
model: "Promiss R Series",
|
||||
capacity: "48TB",
|
||||
purchaseDate: "2025.03.13"
|
||||
}
|
||||
];
|
||||
84
backup_temp/src/data/mockData.ts
Normal file
84
backup_temp/src/data/mockData.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
export interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface Asset {
|
||||
id: string;
|
||||
categoryName: string;
|
||||
name: string;
|
||||
quantity: number;
|
||||
internalCode: string;
|
||||
serialNumber: string;
|
||||
department: string;
|
||||
user: string;
|
||||
acquisitionDate: string;
|
||||
status: string;
|
||||
location: string;
|
||||
}
|
||||
|
||||
export interface HardwareSpec {
|
||||
id: string;
|
||||
pcName: string;
|
||||
department: string;
|
||||
userName: string;
|
||||
os: string;
|
||||
cpu: string;
|
||||
memory: string;
|
||||
disk: string;
|
||||
macAddress: string;
|
||||
ipAddress: string;
|
||||
graphicCard: string;
|
||||
}
|
||||
|
||||
export const mockCategories: Category[] = [
|
||||
{ id: '1', name: 'PC', count: 1 },
|
||||
{ id: '2', name: '모니터', count: 5 },
|
||||
{ id: '3', name: '노트북', count: 2 },
|
||||
];
|
||||
|
||||
export const mockAssets: Asset[] = [
|
||||
{
|
||||
id: '1',
|
||||
categoryName: 'PC',
|
||||
name: 'PC',
|
||||
quantity: 1,
|
||||
internalCode: 'PC20230411001',
|
||||
serialNumber: 'SN-001-A1',
|
||||
department: '한맥기술',
|
||||
user: '이관형',
|
||||
acquisitionDate: '2023-04-11',
|
||||
status: '정상',
|
||||
location: '본사 3층',
|
||||
},
|
||||
];
|
||||
|
||||
export const mockHardwareSpecs: HardwareSpec[] = [
|
||||
{
|
||||
id: '1',
|
||||
pcName: 'DESKTOP-G1DVL26',
|
||||
department: '한맥기술',
|
||||
userName: '이준권',
|
||||
os: 'Microsoft Windows 10 Pro 10.0.19044',
|
||||
cpu: 'Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz',
|
||||
memory: 'Samsung 4 GB / Samsung 4 GB',
|
||||
disk: 'ST2000DM001-1CH164 1.82 TB / Samsung SSD 850 EVO 120GB',
|
||||
macAddress: '0862664B98A3',
|
||||
ipAddress: '172.16.9.68',
|
||||
graphicCard: 'NVIDIA GeForce GTX 750',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
pcName: 'DESKTOP-BNBPOUP',
|
||||
department: '한맥기술',
|
||||
userName: '주완기 연구원',
|
||||
os: 'Microsoft Windows 10 Pro 10.0.19045',
|
||||
cpu: 'Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz',
|
||||
memory: 'Samsung 8 GB / Samsung 8 GB',
|
||||
disk: 'ST1000DM003-1CH162 931.51 GB / Samsung SSD 840 EVO 120GB',
|
||||
macAddress: 'E03F4948ECC6',
|
||||
ipAddress: '172.16.9.23',
|
||||
graphicCard: 'Intel(R) HD Graphics 4600',
|
||||
},
|
||||
];
|
||||
26
backup_temp/src/index.css
Normal file
26
backup_temp/src/index.css
Normal file
@@ -0,0 +1,26 @@
|
||||
:root {
|
||||
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
|
||||
color-scheme: light;
|
||||
color: #111827;
|
||||
background-color: #F9FAFB;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
}
|
||||
10
backup_temp/src/main.tsx
Normal file
10
backup_temp/src/main.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
Reference in New Issue
Block a user