674 lines
41 KiB
TypeScript
674 lines
41 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Card } from '../../../shared/ui/Card';
|
|
import { Button } from '../../../shared/ui/Button';
|
|
import { ArrowLeft, Save, Upload, X, Printer, ZoomIn, Trash2, Plus } from 'lucide-react';
|
|
import { assetApi } from '../../../shared/api/assetApi';
|
|
import type { Asset } from '../../../shared/api/assetApi';
|
|
import { SERVER_URL } from '../../../shared/api/client';
|
|
import { createPortal } from 'react-dom';
|
|
import { useAuth } from '../../../shared/auth/AuthContext';
|
|
|
|
interface AssetBasicInfoProps {
|
|
asset: Asset & { image?: string, accessories?: any[] };
|
|
onRefresh: () => void;
|
|
}
|
|
|
|
export function AssetBasicInfo({ asset, onRefresh }: AssetBasicInfoProps) {
|
|
const navigate = useNavigate();
|
|
const { user } = useAuth();
|
|
// User role is now allowed to edit assets
|
|
const canEdit = user?.role === 'admin' || user?.role === 'supervisor' || user?.role === 'user';
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [editData, setEditData] = useState(asset);
|
|
const [isZoomed, setIsZoomed] = useState(false);
|
|
const [allAssets, setAllAssets] = useState<Asset[]>([]);
|
|
const [accessories, setAccessories] = useState<any[]>([]);
|
|
const [showAccModal, setShowAccModal] = useState(false);
|
|
const [newAcc, setNewAcc] = useState({ name: '', spec: '', quantity: 1 });
|
|
|
|
useEffect(() => {
|
|
loadAccessories();
|
|
}, [asset.id]);
|
|
|
|
const loadAccessories = async () => {
|
|
try {
|
|
const data = await assetApi.getAccessories(asset.id);
|
|
setAccessories(data);
|
|
} catch (err) {
|
|
console.error("Failed to load accessories", err);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isEditing) {
|
|
const loadAllAssets = async () => {
|
|
try {
|
|
const data = await assetApi.getAll();
|
|
setAllAssets(data);
|
|
} catch (err) {
|
|
console.error("Failed to load assets", err);
|
|
}
|
|
};
|
|
loadAllAssets();
|
|
}
|
|
}, [isEditing]);
|
|
|
|
const isFacility = asset.category === '설비';
|
|
|
|
const handleChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
|
|
) => {
|
|
const { name, value } = e.target;
|
|
setEditData(prev => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
await assetApi.update(asset.id, editData);
|
|
setIsEditing(false);
|
|
onRefresh(); // Refresh data from server
|
|
} catch (error) {
|
|
console.error("Failed to update asset:", error);
|
|
alert("저장에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
try {
|
|
const res = await assetApi.uploadImage(file);
|
|
setEditData(prev => ({ ...prev, image: res.data.url }));
|
|
} catch (error) {
|
|
console.error("Failed to upload image:", error);
|
|
alert("이미지 업로드에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
const handleDeleteImage = () => {
|
|
if (confirm("이미지를 삭제하시겠습니까?")) {
|
|
setEditData(prev => ({ ...prev, image: '' }));
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setEditData(asset);
|
|
setIsEditing(false);
|
|
};
|
|
|
|
const handleAddAccessory = async () => {
|
|
if (!newAcc.name) return alert('품명을 입력해주세요.');
|
|
try {
|
|
await assetApi.addAccessory(asset.id, newAcc);
|
|
setNewAcc({ name: '', spec: '', quantity: 1 });
|
|
setShowAccModal(false);
|
|
loadAccessories();
|
|
} catch (err) {
|
|
alert('등록 실패');
|
|
}
|
|
};
|
|
|
|
const handleDeleteAccessory = async (id: number) => {
|
|
if (!confirm('삭제하시겠습니까?')) return;
|
|
try {
|
|
await assetApi.deleteAccessory(id);
|
|
loadAccessories();
|
|
} catch (err) {
|
|
alert('삭제 실패');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center mb-4 gap-1" style={{ justifyContent: 'flex-end' }}>
|
|
{isEditing ? (
|
|
<>
|
|
<Button size="sm" variant="secondary" onClick={handleCancel} icon={<ArrowLeft size={16} />}>취소</Button>
|
|
<Button size="sm" onClick={handleSave} icon={<Save size={16} />}>저장</Button>
|
|
</>
|
|
) : (
|
|
canEdit && <Button size="sm" variant="secondary" onClick={() => setIsEditing(true)}>수정</Button>
|
|
)}
|
|
<Button variant="secondary" size="sm" icon={<Printer size={16} />} onClick={() => window.print()}>출력</Button>
|
|
</div>
|
|
|
|
<Card className="content-card print-friendly">
|
|
|
|
<div className="document-layout flex gap-6 items-start">
|
|
{/* Left: Image Area */}
|
|
<div
|
|
className="doc-image-area flex-none bg-white border border-slate-300 rounded flex flex-col items-center justify-center overflow-hidden relative group cursor-pointer p-2"
|
|
style={{ width: '400px', height: '350px' }}
|
|
onClick={() => !isEditing && editData.image && setIsZoomed(true)}
|
|
>
|
|
{editData.image ? (
|
|
<>
|
|
<img
|
|
src={
|
|
editData.image.startsWith('http')
|
|
? editData.image
|
|
: `${SERVER_URL}${!SERVER_URL && !editData.image.startsWith('/') ? '/' : ''}${editData.image}`
|
|
}
|
|
alt={asset.name}
|
|
className="w-full h-full"
|
|
style={{ objectFit: 'contain', maxWidth: '100%', maxHeight: '100%' }}
|
|
/>
|
|
{!isEditing && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
|
|
<div className="bg-black/50 text-white p-2 rounded-full">
|
|
<ZoomIn size={24} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="text-slate-400">이미지 없음</div>
|
|
)}
|
|
|
|
{isEditing && (
|
|
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-4" onClick={(e) => e.stopPropagation()}>
|
|
<label className="cursor-pointer bg-white p-2 rounded-full hover:bg-slate-100 text-slate-700">
|
|
<Upload size={20} />
|
|
<input type="file" accept="image/*" className="hidden" onChange={handleImageUpload} />
|
|
</label>
|
|
{editData.image && (
|
|
<button onClick={handleDeleteImage} className="bg-white p-2 rounded-full hover:bg-red-50 text-red-500">
|
|
<Trash2 size={20} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right: Info Table */}
|
|
<div className="doc-info-area flex-1">
|
|
|
|
<table className="doc-table w-full border-collapse border border-slate-300 table-fixed">
|
|
<colgroup>
|
|
<col className="w-[10%] bg-slate-50" />
|
|
<col className="w-[23%]" />
|
|
<col className="w-[10%] bg-slate-50" />
|
|
<col className="w-[23%]" />
|
|
<col className="w-[10%] bg-slate-50" />
|
|
<col className="w-[24%]" />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr style={{ height: '70px' }}>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">관리번호</th>
|
|
<td colSpan={3} className="border border-slate-300 p-2 text-lg bg-slate-50">
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium text-left cursor-default">
|
|
{editData.id}
|
|
</div>
|
|
</td>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">구입가격</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
type="number"
|
|
name="purchasePrice"
|
|
value={editData.purchasePrice || ''}
|
|
onChange={handleChange}
|
|
placeholder="0"
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{editData.purchasePrice ? `${Number(editData.purchasePrice).toLocaleString()} 원` : '-'}
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
<tr style={{ height: '70px' }}>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">설비명</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
name="name"
|
|
value={editData.name}
|
|
onChange={handleChange}
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{editData.name}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">S/N</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
name="serialNumber"
|
|
value={editData.serialNumber}
|
|
onChange={handleChange}
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{editData.serialNumber}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">입고일</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
type="date"
|
|
name="purchaseDate"
|
|
value={editData.purchaseDate}
|
|
onChange={handleChange}
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none font-sans border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
style={{ fontFamily: 'inherit' }}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium font-sans cursor-default">
|
|
{editData.purchaseDate}
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
<tr style={{ height: '70px' }}>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">모델명</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
name="model"
|
|
value={editData.model}
|
|
onChange={handleChange}
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{editData.model}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">제작사</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
name="manufacturer"
|
|
value={editData.manufacturer}
|
|
onChange={handleChange}
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{editData.manufacturer}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">교정주기</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
name="calibrationCycle"
|
|
value={editData.calibrationCycle}
|
|
onChange={handleChange}
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{editData.calibrationCycle}
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
<tr style={{ height: '70px' }}>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">스펙/사양</th>
|
|
<td colSpan={5} className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
name="specs"
|
|
value={editData.specs}
|
|
onChange={handleChange}
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{editData.specs}
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
<tr style={{ height: '70px' }}>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">설치위치</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
name="location"
|
|
value={editData.location}
|
|
onChange={handleChange}
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{editData.location}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">관리책임자</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<input
|
|
name="manager"
|
|
value={editData.manager}
|
|
onChange={handleChange}
|
|
className="block px-2 !text-lg !font-medium transition-colors rounded-none outline-none border border-slate-300 shadow-sm focus:outline-none focus:bg-slate-50"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{editData.manager}
|
|
</div>
|
|
)}
|
|
</td>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">관리상태</th>
|
|
<td className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<div className="relative w-full">
|
|
<select
|
|
name="status"
|
|
value={editData.status}
|
|
onChange={e => setEditData({ ...editData, status: e.target.value as any })}
|
|
className="block px-3 py-1 bg-transparent border border-slate-300 rounded-none !text-lg !font-medium text-slate-700 outline-none focus:bg-slate-50 transition-colors appearance-none shadow-sm"
|
|
style={{ WebkitAppearance: 'none', MozAppearance: 'none', appearance: 'none', backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: 'right 0.5rem center', backgroundRepeat: 'no-repeat', backgroundSize: '1.5em 1.5em', paddingRight: '2.5rem' }}
|
|
>
|
|
<option value="active">정상 가동</option>
|
|
<option value="maintain">점검 중</option>
|
|
<option value="broken">수리 필요</option>
|
|
<option value="disposed">폐기 (말소)</option>
|
|
</select>
|
|
</div>
|
|
) : (
|
|
<div className="w-full !h-14 flex items-center px-2 border-0 !border-none">
|
|
<span className={`badge ${editData.status === 'active' ? 'badge-success' : editData.status === 'disposed' ? 'badge-neutral' : 'badge-warning'} !text-lg !font-medium px-4 py-2`}>
|
|
{editData.status === 'active' ? '정상 가동' : editData.status === 'disposed' ? '폐기 (말소)' : editData.status === 'maintain' ? '점검 중' : '수리 필요'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
{isFacility && (
|
|
<tr style={{ height: '70px' }}>
|
|
<th className="border border-slate-300 p-2 bg-slate-50 font-semibold text-center">상위 설비</th>
|
|
<td colSpan={5} className="border border-slate-300 p-2">
|
|
{isEditing ? (
|
|
<div className="relative w-full">
|
|
<select
|
|
name="parentId"
|
|
value={editData.parentId || ''}
|
|
onChange={handleChange}
|
|
className="block px-3 py-1 bg-transparent border border-slate-300 rounded-none !text-lg !font-medium text-slate-700 outline-none focus:bg-slate-50 transition-colors appearance-none shadow-sm"
|
|
style={{ WebkitAppearance: 'none', MozAppearance: 'none', appearance: 'none', backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: 'right 0.5rem center', backgroundRepeat: 'no-repeat', backgroundSize: '1.5em 1.5em', paddingRight: '2.5rem' }}
|
|
>
|
|
<option value="">(없음 - 메인 설비)</option>
|
|
{allAssets
|
|
.filter(a => a.category === '설비' && a.id !== asset.id)
|
|
.map(a => (
|
|
<option key={a.id} value={a.id}>[{a.id}] {a.name}</option>
|
|
))
|
|
}
|
|
</select>
|
|
</div>
|
|
) : (
|
|
<div className="w-full h-14 flex items-center px-2 text-lg font-medium cursor-default">
|
|
{asset.parentId ? (
|
|
<a href={`/asset/detail/${asset.parentId}`} className="text-blue-600 hover:underline">
|
|
[{asset.parentId}] {asset.parentName || '상위 설비'}
|
|
</a>
|
|
) : (
|
|
<span className="text-slate-400">메인 설비 (상위 설비 없음)</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sub-Equipment Section (Only for Facilities) */}
|
|
{isFacility && (
|
|
<div className="sub-equipment-section mt-8">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<h3 className="section-title text-lg font-bold">부속 설비 내역</h3>
|
|
{canEdit && (
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
icon={<Plus size={14} />}
|
|
onClick={() => {
|
|
// Navigate to register with pre-filled parent
|
|
navigate(`/asset/register?parentId=${asset.id}`);
|
|
}}
|
|
>
|
|
부속 설비 등록
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<table className="doc-table w-full text-center border-collapse border border-slate-300">
|
|
<thead>
|
|
<tr>
|
|
<th className="border border-slate-300 p-2 bg-slate-50">관리번호</th>
|
|
<th className="border border-slate-300 p-2 bg-slate-50">설비명</th>
|
|
<th className="border border-slate-300 p-2 bg-slate-50">위치</th>
|
|
<th className="border border-slate-300 p-2 bg-slate-50">상태</th>
|
|
<th className="border border-slate-300 p-2 bg-slate-50">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{asset.children && asset.children.length > 0 ? (
|
|
asset.children.map(child => (
|
|
<tr key={child.id}>
|
|
<td className="border border-slate-300 p-2 font-mono">{child.id}</td>
|
|
<td className="border border-slate-300 p-2 font-medium">{child.name}</td>
|
|
<td className="border border-slate-300 p-2">{child.location}</td>
|
|
<td className="border border-slate-300 p-2">
|
|
<span className={`badge ${child.status === 'active' ? 'badge-success' : 'badge-warning'}`}>
|
|
{child.status === 'active' ? '정상' : '점검/이동'}
|
|
</span>
|
|
</td>
|
|
<td className="border border-slate-300 p-2">
|
|
<a href={`/asset/detail/${child.id}`} className="text-blue-600 underline">이동</a>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={5} className="p-8 text-slate-400">등록된 부속 설비가 없습니다.</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
<div className="section-divider my-6 border-b border-slate-200"></div>
|
|
|
|
{/* Accessories Section (For non-facility or all?) - User said skip hierarchical for others, use simple accessories */}
|
|
{!isFacility && (
|
|
<div className="accessories-section">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<h3 className="section-title text-lg font-bold">부속품 관리</h3>
|
|
{canEdit && (
|
|
<Button size="sm" variant="secondary" icon={<Plus size={14} />} onClick={() => setShowAccModal(true)}>
|
|
부속품 추가
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<table className="doc-table w-full text-center border-collapse border border-slate-300">
|
|
<thead>
|
|
<tr>
|
|
<th className="border border-slate-300 p-2 bg-slate-50">품명</th>
|
|
<th className="border border-slate-300 p-2 bg-slate-50">규격</th>
|
|
<th className="border border-slate-300 p-2 bg-slate-50">수량</th>
|
|
<th className="border border-slate-300 p-2 bg-slate-50">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{accessories.length > 0 ? (
|
|
accessories.map(item => (
|
|
<tr key={item.id}>
|
|
<td className="border border-slate-300 p-2">{item.name}</td>
|
|
<td className="border border-slate-300 p-2">{item.spec || '-'}</td>
|
|
<td className="border border-slate-300 p-2">{item.quantity}개</td>
|
|
<td className="border border-slate-300 p-2">
|
|
<button
|
|
onClick={() => handleDeleteAccessory(item.id)}
|
|
className="text-slate-400 hover:text-red-500 text-sm underline"
|
|
>
|
|
삭제
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={4} className="p-8 text-slate-400">등록된 부속품이 없습니다.</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Accessory Add Modal */}
|
|
{showAccModal && createPortal(
|
|
<div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div className="bg-white rounded-lg shadow-xl w-[400px] p-6">
|
|
<h3 className="text-xl font-bold mb-4">부속품 추가</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">품명 *</label>
|
|
<input
|
|
className="w-full border p-2 rounded"
|
|
value={newAcc.name}
|
|
onChange={e => setNewAcc({ ...newAcc, name: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">규격 / 사양</label>
|
|
<input
|
|
className="w-full border p-2 rounded"
|
|
value={newAcc.spec}
|
|
onChange={e => setNewAcc({ ...newAcc, spec: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">수량</label>
|
|
<input
|
|
type="number"
|
|
className="w-full border p-2 rounded"
|
|
value={newAcc.quantity}
|
|
onChange={e => setNewAcc({ ...newAcc, quantity: Number(e.target.value) })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-6">
|
|
<Button variant="secondary" onClick={() => setShowAccModal(false)}>취소</Button>
|
|
<Button onClick={handleAddAccessory}>등록</Button>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
)}
|
|
|
|
{/* Image Zoom Modal - Moved to Portal */}
|
|
{isZoomed && editData.image && createPortal(
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
zIndex: 9999,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backdropFilter: 'blur(4px)'
|
|
}}
|
|
onClick={() => setIsZoomed(false)}
|
|
>
|
|
<div
|
|
style={{
|
|
backgroundColor: 'white',
|
|
borderRadius: '0.5rem',
|
|
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
|
maxWidth: '56rem', // max-w-4xl
|
|
width: '100%',
|
|
maxHeight: '90vh',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
margin: '1rem'
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Modal Header */}
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
padding: '1rem',
|
|
borderBottom: '1px solid #e2e8f0',
|
|
backgroundColor: '#f8fafc'
|
|
}}>
|
|
<h3 style={{ fontWeight: 'bold', fontSize: '1.125rem', color: '#1e293b' }}>{asset.name} - 이미지 상세</h3>
|
|
<button
|
|
onClick={() => setIsZoomed(false)}
|
|
style={{
|
|
padding: '0.5rem',
|
|
borderRadius: '9999px',
|
|
color: '#64748b',
|
|
cursor: 'pointer',
|
|
border: 'none',
|
|
background: 'transparent',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
onMouseOver={(e) => e.currentTarget.style.backgroundColor = '#e2e8f0'}
|
|
onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Modal Content */}
|
|
<div style={{
|
|
flex: 1,
|
|
overflow: 'auto',
|
|
padding: '1rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#f1f5f9'
|
|
}}>
|
|
<img
|
|
src={editData.image.startsWith('http') ? editData.image : `${SERVER_URL}${editData.image} `}
|
|
alt={asset.name}
|
|
style={{
|
|
maxWidth: '100%',
|
|
maxHeight: '75vh',
|
|
objectFit: 'contain',
|
|
backgroundColor: 'white',
|
|
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
|
|
display: 'block'
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
)}
|
|
</>
|
|
);
|
|
}
|