chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

사이드바 방식으로 변경

Browse Source
This commit is contained in:
dohyeons
2025-10-22 13:40:15 +09:00
parent 85987af65e
commit 01ebb2550c
16 changed files with 908 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/components/admin/dashboard/VehicleMapConfigPanel.tsx
View File

@@ -29,13 +29,13 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
const sampleData = queryResult?.rows?.[0] || {};
return (
<div className="space-y-4">
<h4 className="text-lg font-semibold text-gray-800">🗺️ 지도 설정</h4>
<div className="space-y-3">
<h4 className="text-xs font-semibold text-gray-800">🗺️ 지도 설정</h4>
{/* 쿼리 결과가 없을 때 */}
{!queryResult && (
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
<div className="text-yellow-800 text-sm">
<div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
<div className="text-yellow-800 text-xs">
💡 먼저 SQL 쿼리를 실행하여 데이터를 가져온 후 지도를 설정할 수 있습니다.
</div>
</div>
@@ -45,27 +45,27 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
{queryResult && (
<>
{/* 지도 제목 */}
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">지도 제목</label>
<div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">지도 제목</label>
<input
type="text"
value={currentConfig.title || ''}
onChange={(e) => updateConfig({ title: e.target.value })}
placeholder="차량 위치 지도"
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
/>
</div>
{/* 위도 컬럼 설정 */}
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
<div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">
위도 컬럼 (Latitude)
<span className="text-red-500 ml-1">*</span>
</label>
<select
value={currentConfig.latitudeColumn || ''}
onChange={(e) => updateConfig({ latitudeColumn: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
>
<option value="">선택하세요</option>
{availableColumns.map((col) => (
@@ -77,15 +77,15 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
</div>
{/* 경도 컬럼 설정 */}
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
<div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">
경도 컬럼 (Longitude)
<span className="text-red-500 ml-1">*</span>
</label>
<select
value={currentConfig.longitudeColumn || ''}
onChange={(e) => updateConfig({ longitudeColumn: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
>
<option value="">선택하세요</option>
{availableColumns.map((col) => (
@@ -97,14 +97,14 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
</div>
{/* 라벨 컬럼 (선택사항) */}
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
<div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">
라벨 컬럼 (마커 표시명)
</label>
<select
value={currentConfig.labelColumn || ''}
onChange={(e) => updateConfig({ labelColumn: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
>
<option value="">선택하세요 (선택사항)</option>
{availableColumns.map((col) => (
@@ -116,14 +116,14 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
</div>
{/* 상태 컬럼 (선택사항) */}
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700">
<div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">
상태 컬럼 (마커 색상)
</label>
<select
value={currentConfig.statusColumn || ''}
onChange={(e) => updateConfig({ statusColumn: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
>
<option value="">선택하세요 (선택사항)</option>
{availableColumns.map((col) => (
@@ -136,7 +136,7 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
{/* 설정 미리보기 */}
<div className="p-3 bg-gray-50 rounded-lg">
<div className="text-sm font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
<div className="text-xs font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
<div className="text-xs text-muted-foreground space-y-1">
<div><strong>위도:</strong> {currentConfig.latitudeColumn || '미설정'}</div>
<div><strong>경도:</strong> {currentConfig.longitudeColumn || '미설정'}</div>
@@ -149,7 +149,7 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
{/* 필수 필드 확인 */}
{(!currentConfig.latitudeColumn || !currentConfig.longitudeColumn) && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
<div className="text-red-800 text-sm">
<div className="text-red-800 text-xs">
⚠️ 위도와 경도 컬럼을 반드시 선택해야 지도에 표시할 수 있습니다.
</div>
</div>