beff95b4e1
모델, 서비스, 컨트롤러, React SPA 뷰, 라우트 추가 GCS 업로드/다운로드, 드래그앤드롭 사진 관리 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
679 lines
31 KiB
PHP
679 lines
31 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '공사현장 사진대지')
|
|
|
|
@section('content')
|
|
<div id="root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
<script type="text/babel">
|
|
@verbatim
|
|
const { useState, useEffect, useCallback, useRef } = React;
|
|
|
|
const API = {
|
|
list: '/juil/construction-photos/list',
|
|
store: '/juil/construction-photos',
|
|
show: (id) => `/juil/construction-photos/${id}`,
|
|
upload: (id) => `/juil/construction-photos/${id}/upload`,
|
|
update: (id) => `/juil/construction-photos/${id}`,
|
|
destroy: (id) => `/juil/construction-photos/${id}`,
|
|
deletePhoto: (id, type) => `/juil/construction-photos/${id}/photo/${type}`,
|
|
downloadPhoto: (id, type) => `/juil/construction-photos/${id}/download/${type}`,
|
|
photoUrl: (id, type) => `/juil/construction-photos/${id}/download/${type}?inline=1`,
|
|
};
|
|
|
|
const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content || '';
|
|
|
|
const TYPE_LABELS = { before: '작업전', during: '작업중', after: '작업후' };
|
|
const TYPE_COLORS = {
|
|
before: { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-700', badge: 'bg-blue-100 text-blue-800' },
|
|
during: { bg: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-700', badge: 'bg-yellow-100 text-yellow-800' },
|
|
after: { bg: 'bg-green-50', border: 'border-green-200', text: 'text-green-700', badge: 'bg-green-100 text-green-800' },
|
|
};
|
|
|
|
async function apiFetch(url, options = {}) {
|
|
const res = await fetch(url, {
|
|
headers: {
|
|
'X-CSRF-TOKEN': CSRF_TOKEN,
|
|
'Accept': 'application/json',
|
|
...options.headers,
|
|
},
|
|
...options,
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({ message: '요청 처리 중 오류가 발생했습니다.' }));
|
|
throw new Error(err.message || `HTTP ${res.status}`);
|
|
}
|
|
return res.json();
|
|
}
|
|
|
|
// --- Toast ---
|
|
function Toast({ message, type, onClose }) {
|
|
useEffect(() => {
|
|
const t = setTimeout(onClose, 3000);
|
|
return () => clearTimeout(t);
|
|
}, [onClose]);
|
|
|
|
const colors = type === 'error' ? 'bg-red-500' : 'bg-green-500';
|
|
return (
|
|
<div className={`fixed top-4 right-4 z-[9999] px-6 py-3 rounded-lg shadow-lg text-white ${colors} transition-all`}>
|
|
{message}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- PhotoUploadBox ---
|
|
function PhotoUploadBox({ type, photoPath, photoId, onUpload, onDelete, disabled }) {
|
|
const [dragOver, setDragOver] = useState(false);
|
|
const [uploading, setUploading] = useState(false);
|
|
const inputRef = useRef(null);
|
|
const colors = TYPE_COLORS[type];
|
|
const hasPhoto = !!photoPath;
|
|
|
|
const handleFiles = async (files) => {
|
|
if (!files || files.length === 0 || !photoId) return;
|
|
const file = files[0];
|
|
if (!file.type.startsWith('image/')) {
|
|
alert('이미지 파일만 업로드할 수 있습니다.');
|
|
return;
|
|
}
|
|
setUploading(true);
|
|
try {
|
|
await onUpload(photoId, type, file);
|
|
} finally {
|
|
setUploading(false);
|
|
}
|
|
};
|
|
|
|
const onDrop = (e) => {
|
|
e.preventDefault();
|
|
setDragOver(false);
|
|
handleFiles(e.dataTransfer.files);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<span className={`inline-block text-xs font-semibold mb-1.5 px-2 py-0.5 rounded ${colors.badge} w-fit`}>
|
|
{TYPE_LABELS[type]}
|
|
</span>
|
|
<div
|
|
className={`relative border-2 border-dashed rounded-lg overflow-hidden transition-all cursor-pointer aspect-[4/3]
|
|
${dragOver ? 'border-blue-400 bg-blue-50' : hasPhoto ? `${colors.border} ${colors.bg}` : 'border-gray-300 bg-gray-50'}
|
|
${disabled ? 'opacity-50 pointer-events-none' : 'hover:border-blue-400'}`}
|
|
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
|
|
onDragLeave={() => setDragOver(false)}
|
|
onDrop={onDrop}
|
|
onClick={() => !uploading && inputRef.current?.click()}
|
|
>
|
|
{uploading && (
|
|
<div className="absolute inset-0 bg-black/40 flex items-center justify-center z-10">
|
|
<div className="w-8 h-8 border-3 border-white border-t-transparent rounded-full animate-spin"></div>
|
|
</div>
|
|
)}
|
|
{hasPhoto ? (
|
|
<>
|
|
<img
|
|
src={API.photoUrl(photoId, type)}
|
|
alt={TYPE_LABELS[type]}
|
|
className="w-full h-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
<button
|
|
className="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600 z-10 shadow"
|
|
onClick={(e) => { e.stopPropagation(); onDelete(photoId, type); }}
|
|
title="사진 삭제"
|
|
>
|
|
×
|
|
</button>
|
|
</>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center h-full text-gray-400 p-3">
|
|
<svg className="w-8 h-8 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
<span className="text-xs text-center">클릭 또는 드래그</span>
|
|
</div>
|
|
)}
|
|
<input
|
|
ref={inputRef}
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
className="hidden"
|
|
onChange={(e) => handleFiles(e.target.files)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- PhotoCard ---
|
|
function PhotoCard({ item, onSelect, onUpload, onDeletePhoto }) {
|
|
const photoCount = ['before', 'during', 'after'].filter(t => item[`${t}_photo_path`]).length;
|
|
|
|
return (
|
|
<div
|
|
className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
|
|
onClick={() => onSelect(item)}
|
|
>
|
|
{/* 사진 썸네일 3칸 */}
|
|
<div className="grid grid-cols-3 gap-0.5 bg-gray-100 p-0.5">
|
|
{['before', 'during', 'after'].map(type => (
|
|
<div key={type} className="aspect-square bg-gray-200 overflow-hidden relative">
|
|
{item[`${type}_photo_path`] ? (
|
|
<img
|
|
src={API.photoUrl(item.id, type)}
|
|
alt={TYPE_LABELS[type]}
|
|
className="w-full h-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-gray-400">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"
|
|
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
<span className={`absolute bottom-0 left-0 right-0 text-center text-[9px] py-0.5 font-medium ${TYPE_COLORS[type].badge}`}>
|
|
{TYPE_LABELS[type]}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* 정보 */}
|
|
<div className="p-3">
|
|
<h3 className="font-semibold text-sm text-gray-900 truncate">{item.site_name}</h3>
|
|
<div className="flex items-center justify-between mt-1.5">
|
|
<span className="text-xs text-gray-500">{item.work_date}</span>
|
|
<span className="text-xs text-gray-400">{photoCount}/3</span>
|
|
</div>
|
|
{item.user && (
|
|
<span className="text-xs text-gray-400 mt-1 block">{item.user.name}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- CreateModal ---
|
|
function CreateModal({ show, onClose, onCreate }) {
|
|
const [siteName, setSiteName] = useState('');
|
|
const [workDate, setWorkDate] = useState(new Date().toISOString().split('T')[0]);
|
|
const [description, setDescription] = useState('');
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
if (!show) return null;
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
if (!siteName.trim()) return alert('현장명을 입력해주세요.');
|
|
setSaving(true);
|
|
try {
|
|
await onCreate({ site_name: siteName.trim(), work_date: workDate, description: description.trim() || null });
|
|
setSiteName('');
|
|
setDescription('');
|
|
onClose();
|
|
} catch (err) {
|
|
alert(err.message);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={onClose}>
|
|
<div className="bg-white rounded-2xl shadow-xl w-full max-w-md" onClick={e => e.stopPropagation()}>
|
|
<div className="p-6">
|
|
<h2 className="text-lg font-bold text-gray-900 mb-4">새 사진대지 등록</h2>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">현장명 *</label>
|
|
<input
|
|
type="text"
|
|
value={siteName}
|
|
onChange={e => setSiteName(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
placeholder="공사 현장명을 입력하세요"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">작업일자 *</label>
|
|
<input
|
|
type="date"
|
|
value={workDate}
|
|
onChange={e => setWorkDate(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">설명</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={e => setDescription(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
rows={3}
|
|
placeholder="작업 내용을 간단히 기록하세요"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<button type="button" onClick={onClose} className="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">
|
|
취소
|
|
</button>
|
|
<button type="submit" disabled={saving} className="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
|
|
{saving ? '등록 중...' : '등록'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- DetailModal ---
|
|
function DetailModal({ item, onClose, onUpload, onDeletePhoto, onUpdate, onDelete, onRefresh }) {
|
|
const [editing, setEditing] = useState(false);
|
|
const [siteName, setSiteName] = useState('');
|
|
const [workDate, setWorkDate] = useState('');
|
|
const [description, setDescription] = useState('');
|
|
const [saving, setSaving] = useState(false);
|
|
const [lightbox, setLightbox] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (item) {
|
|
setSiteName(item.site_name);
|
|
setWorkDate(item.work_date);
|
|
setDescription(item.description || '');
|
|
setEditing(false);
|
|
}
|
|
}, [item]);
|
|
|
|
if (!item) return null;
|
|
|
|
const handleSave = async () => {
|
|
if (!siteName.trim()) return alert('현장명을 입력해주세요.');
|
|
setSaving(true);
|
|
try {
|
|
await onUpdate(item.id, { site_name: siteName.trim(), work_date: workDate, description: description.trim() || null });
|
|
setEditing(false);
|
|
onRefresh();
|
|
} catch (err) {
|
|
alert(err.message);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!confirm('이 사진대지를 삭제하시겠습니까? 모든 사진이 함께 삭제됩니다.')) return;
|
|
try {
|
|
await onDelete(item.id);
|
|
onClose();
|
|
} catch (err) {
|
|
alert(err.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={onClose}>
|
|
<div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
|
{/* Header */}
|
|
<div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between rounded-t-2xl z-10">
|
|
{editing ? (
|
|
<input
|
|
type="text"
|
|
value={siteName}
|
|
onChange={e => setSiteName(e.target.value)}
|
|
className="text-lg font-bold text-gray-900 border border-gray-300 rounded-lg px-3 py-1 flex-1 mr-3"
|
|
/>
|
|
) : (
|
|
<h2 className="text-lg font-bold text-gray-900">{item.site_name}</h2>
|
|
)}
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">×</button>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{/* Info */}
|
|
<div className="flex flex-wrap gap-4 mb-6">
|
|
{editing ? (
|
|
<>
|
|
<div>
|
|
<label className="block text-xs text-gray-500 mb-1">작업일자</label>
|
|
<input type="date" value={workDate} onChange={e => setWorkDate(e.target.value)}
|
|
className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm" />
|
|
</div>
|
|
<div className="flex-1 min-w-[200px]">
|
|
<label className="block text-xs text-gray-500 mb-1">설명</label>
|
|
<textarea value={description} onChange={e => setDescription(e.target.value)}
|
|
className="w-full px-3 py-1.5 border border-gray-300 rounded-lg text-sm" rows={2} />
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
{item.work_date}
|
|
</div>
|
|
{item.user && (
|
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
{item.user.name}
|
|
</div>
|
|
)}
|
|
{item.description && (
|
|
<p className="text-sm text-gray-600 w-full">{item.description}</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Photos */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
{['before', 'during', 'after'].map(type => (
|
|
<PhotoUploadBox
|
|
key={type}
|
|
type={type}
|
|
photoPath={item[`${type}_photo_path`]}
|
|
photoId={item.id}
|
|
onUpload={onUpload}
|
|
onDelete={onDeletePhoto}
|
|
disabled={false}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex justify-between pt-4 border-t border-gray-200">
|
|
<button onClick={handleDelete}
|
|
className="px-4 py-2 text-sm text-red-600 bg-red-50 rounded-lg hover:bg-red-100">
|
|
삭제
|
|
</button>
|
|
<div className="flex gap-2">
|
|
{editing ? (
|
|
<>
|
|
<button onClick={() => setEditing(false)}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">
|
|
취소
|
|
</button>
|
|
<button onClick={handleSave} disabled={saving}
|
|
className="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
|
|
{saving ? '저장 중...' : '저장'}
|
|
</button>
|
|
</>
|
|
) : (
|
|
<button onClick={() => setEditing(true)}
|
|
className="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">
|
|
수정
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lightbox */}
|
|
{lightbox && (
|
|
<div className="fixed inset-0 bg-black/80 flex items-center justify-center z-[60]"
|
|
onClick={() => setLightbox(null)}>
|
|
<img src={lightbox} className="max-w-[90vw] max-h-[90vh] object-contain" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- App ---
|
|
function App() {
|
|
const [items, setItems] = useState([]);
|
|
const [pagination, setPagination] = useState({ current_page: 1, last_page: 1 });
|
|
const [loading, setLoading] = useState(false);
|
|
const [search, setSearch] = useState('');
|
|
const [dateFrom, setDateFrom] = useState('');
|
|
const [dateTo, setDateTo] = useState('');
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
const [selectedItem, setSelectedItem] = useState(null);
|
|
const [toast, setToast] = useState(null);
|
|
|
|
const showToast = (message, type = 'success') => setToast({ message, type });
|
|
|
|
const fetchList = useCallback(async (page = 1) => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams({ per_page: '12', page: String(page) });
|
|
if (search) params.set('search', search);
|
|
if (dateFrom) params.set('date_from', dateFrom);
|
|
if (dateTo) params.set('date_to', dateTo);
|
|
|
|
const res = await apiFetch(`${API.list}?${params}`);
|
|
setItems(res.data.data || []);
|
|
setPagination({
|
|
current_page: res.data.current_page,
|
|
last_page: res.data.last_page,
|
|
total: res.data.total,
|
|
});
|
|
} catch (err) {
|
|
showToast(err.message, 'error');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [search, dateFrom, dateTo]);
|
|
|
|
useEffect(() => {
|
|
fetchList();
|
|
}, [fetchList]);
|
|
|
|
const handleCreate = async (data) => {
|
|
const res = await apiFetch(API.store, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
});
|
|
showToast('사진대지가 등록되었습니다.');
|
|
fetchList();
|
|
// 생성 후 바로 상세 열기
|
|
setSelectedItem(res.data);
|
|
};
|
|
|
|
const handleUpload = async (id, type, file) => {
|
|
const formData = new FormData();
|
|
formData.append('type', type);
|
|
formData.append('photo', file);
|
|
|
|
const res = await apiFetch(API.upload(id), {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
showToast('사진이 업로드되었습니다.');
|
|
// 상세 모달 데이터 갱신
|
|
if (selectedItem?.id === id) {
|
|
setSelectedItem(res.data);
|
|
}
|
|
fetchList();
|
|
};
|
|
|
|
const handleDeletePhoto = async (id, type) => {
|
|
if (!confirm(`${TYPE_LABELS[type]} 사진을 삭제하시겠습니까?`)) return;
|
|
const res = await apiFetch(API.deletePhoto(id, type), { method: 'DELETE' });
|
|
showToast('사진이 삭제되었습니다.');
|
|
if (selectedItem?.id === id) {
|
|
setSelectedItem(res.data);
|
|
}
|
|
fetchList();
|
|
};
|
|
|
|
const handleUpdate = async (id, data) => {
|
|
await apiFetch(API.update(id), {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
});
|
|
showToast('사진대지가 수정되었습니다.');
|
|
fetchList();
|
|
};
|
|
|
|
const handleDelete = async (id) => {
|
|
await apiFetch(API.destroy(id), { method: 'DELETE' });
|
|
showToast('사진대지가 삭제되었습니다.');
|
|
fetchList();
|
|
};
|
|
|
|
const handleSelectItem = async (item) => {
|
|
try {
|
|
const res = await apiFetch(API.show(item.id));
|
|
setSelectedItem(res.data);
|
|
} catch {
|
|
setSelectedItem(item);
|
|
}
|
|
};
|
|
|
|
const refreshSelected = async () => {
|
|
if (!selectedItem) return;
|
|
try {
|
|
const res = await apiFetch(API.show(selectedItem.id));
|
|
setSelectedItem(res.data);
|
|
} catch {}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
|
|
|
|
{/* Header */}
|
|
<div className="bg-white border-b border-gray-200 px-6 py-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-xl font-bold text-gray-900">공사현장 사진대지</h1>
|
|
<p className="text-sm text-gray-500 mt-0.5">작업전/작업중/작업후 현장 사진을 관리합니다</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowCreate(true)}
|
|
className="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 shadow-sm"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
새 사진대지
|
|
</button>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap gap-3 mt-4">
|
|
<input
|
|
type="text"
|
|
placeholder="현장명, 설명 검색..."
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm w-64 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="date"
|
|
value={dateFrom}
|
|
onChange={e => setDateFrom(e.target.value)}
|
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
<span className="text-gray-400">~</span>
|
|
<input
|
|
type="date"
|
|
value={dateTo}
|
|
onChange={e => setDateTo(e.target.value)}
|
|
className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
{(search || dateFrom || dateTo) && (
|
|
<button
|
|
onClick={() => { setSearch(''); setDateFrom(''); setDateTo(''); }}
|
|
className="px-3 py-2 text-sm text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200"
|
|
>
|
|
초기화
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<div className="w-8 h-8 border-3 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
|
|
</div>
|
|
) : items.length === 0 ? (
|
|
<div className="text-center py-20">
|
|
<svg className="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"
|
|
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
<p className="text-gray-500 text-lg">등록된 사진대지가 없습니다</p>
|
|
<p className="text-gray-400 text-sm mt-1">새 사진대지를 등록해보세요</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
{items.map(item => (
|
|
<PhotoCard
|
|
key={item.id}
|
|
item={item}
|
|
onSelect={handleSelectItem}
|
|
onUpload={handleUpload}
|
|
onDeletePhoto={handleDeletePhoto}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{pagination.last_page > 1 && (
|
|
<div className="flex items-center justify-center gap-2 mt-8">
|
|
<button
|
|
disabled={pagination.current_page === 1}
|
|
onClick={() => fetchList(pagination.current_page - 1)}
|
|
className="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
이전
|
|
</button>
|
|
<span className="text-sm text-gray-600">
|
|
{pagination.current_page} / {pagination.last_page}
|
|
{pagination.total !== undefined && ` (총 ${pagination.total}건)`}
|
|
</span>
|
|
<button
|
|
disabled={pagination.current_page === pagination.last_page}
|
|
onClick={() => fetchList(pagination.current_page + 1)}
|
|
className="px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
다음
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modals */}
|
|
<CreateModal show={showCreate} onClose={() => setShowCreate(false)} onCreate={handleCreate} />
|
|
<DetailModal
|
|
item={selectedItem}
|
|
onClose={() => setSelectedItem(null)}
|
|
onUpload={handleUpload}
|
|
onDeletePhoto={handleDeletePhoto}
|
|
onUpdate={handleUpdate}
|
|
onDelete={handleDelete}
|
|
onRefresh={refreshSelected}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
|
@endverbatim
|
|
</script>
|
|
@endpush
|