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

샤드시옌으로 쫙 수정

Browse Source
This commit is contained in:
leeheejin
2025-10-29 17:53:03 +09:00
parent 2517261db9
commit 437e0c331c
87 changed files with 1493 additions and 1491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/components/admin/dashboard/MapTestConfigPanel.tsx
View File

@@ -123,9 +123,9 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
<div className="space-y-3">
{/* 타일맵 URL 설정 (외부 커넥션 또는 직접 입력) */}
<div className="space-y-2">
<Label className="text-xs font-medium text-gray-700">
<Label className="text-xs font-medium text-foreground">
타일맵 소스 (지도 배경)
<span className="text-red-500 ml-1">*</span>
<span className="text-destructive ml-1">*</span>
</Label>
{/* 외부 커넥션 선택 */}
@@ -140,7 +140,7 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
}
}
}}
className="w-full px-2 py-1.5 border border-gray-300 rounded-md text-xs h-8 bg-white"
className="w-full px-2 py-1.5 border border-border rounded-md text-xs h-8 bg-background"
>
<option value="">저장된 커넥션 선택</option>
{connections.map((conn) => (
@@ -167,9 +167,9 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 타일맵 소스 목록 */}
{/* <div className="space-y-2">
<div className="flex items-center justify-between">
<label className="block text-xs font-medium text-gray-700">
<label className="block text-xs font-medium text-foreground">
타일맵 소스 (REST API)
<span className="text-red-500 ml-1">*</span>
<span className="text-destructive ml-1">*</span>
</label>
<Button
type="button"
@@ -184,14 +184,14 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
</div>
{tileMapSources.map((source, index) => (
<div key={source.id} className="space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
<div key={source.id} className="space-y-2 rounded-lg border border-border bg-muted p-3">
<div className="space-y-1">
<label className="block text-xs font-medium text-gray-600">
<label className="block text-xs font-medium text-foreground">
외부 커넥션 선택 (선택사항)
</label>
<select
onChange={(e) => loadFromConnection(source.id, e.target.value)}
className="w-full px-2 py-1.5 border border-gray-300 rounded-md text-xs h-8 bg-white"
className="w-full px-2 py-1.5 border border-border rounded-md text-xs h-8 bg-background"
>
<option value="">직접 입력 또는 커넥션 선택</option>
{connections.map((conn) => (
@@ -217,7 +217,7 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
variant="ghost"
size="icon"
onClick={() => removeTileMapSource(source.id)}
className="h-8 w-8 text-gray-500 hover:text-red-600"
className="h-8 w-8 text-muted-foreground hover:text-destructive"
>
<X className="h-4 w-4" />
</Button>
@@ -233,7 +233,7 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 지도 제목 */}
{/* <div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">지도 제목</label>
<label className="block text-xs font-medium text-foreground">지도 제목</label>
<Input
type="text"
value={currentConfig.title || ''}
@@ -245,7 +245,7 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 구분선 */}
{/* <div className="border-t pt-3">
<h5 className="text-xs font-semibold text-gray-700 mb-2">📍 마커 데이터 설정 (선택사항)</h5>
<h5 className="text-xs font-semibold text-foreground mb-2">📍 마커 데이터 설정 (선택사항)</h5>
<p className="text-xs text-muted-foreground mb-3">
데이터 소스 탭에서 API 또는 데이터베이스를 연결하면 마커를 표시할 수 있습니다.
</p>
@@ -253,8 +253,8 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 쿼리 결과가 없을 때 */}
{/* {!queryResult && (
<div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
<div className="text-yellow-800 text-xs">
<div className="p-3 bg-warning/10 border border-warning rounded-lg">
<div className="text-warning text-xs">
💡 데이터 소스를 연결하고 쿼리를 실행하면 마커 설정이 가능합니다.
</div>
</div>
@@ -265,13 +265,13 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
<>
{/* 위도 컬럼 설정 */}
<div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">
<label className="block text-xs font-medium text-foreground">
위도 컬럼 (Latitude)
</label>
<select
value={currentConfig.latitudeColumn || ''}
onChange={(e) => updateConfig({ latitudeColumn: e.target.value })}
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
className="w-full px-2 py-1.5 border border-border rounded-lg text-xs"
>
<option value="">선택하세요</option>
{availableColumns.map((col) => (
@@ -284,13 +284,13 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 경도 컬럼 설정 */}
<div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">
<label className="block text-xs font-medium text-foreground">
경도 컬럼 (Longitude)
</label>
<select
value={currentConfig.longitudeColumn || ''}
onChange={(e) => updateConfig({ longitudeColumn: e.target.value })}
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
className="w-full px-2 py-1.5 border border-border rounded-lg text-xs"
>
<option value="">선택하세요</option>
{availableColumns.map((col) => (
@@ -303,13 +303,13 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 라벨 컬럼 (선택사항) */}
<div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">
<label className="block text-xs font-medium text-foreground">
라벨 컬럼 (마커 표시명)
</label>
<select
value={currentConfig.labelColumn || ''}
onChange={(e) => updateConfig({ labelColumn: e.target.value })}
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
className="w-full px-2 py-1.5 border border-border rounded-lg text-xs"
>
<option value="">선택하세요 (선택사항)</option>
{availableColumns.map((col) => (
@@ -322,13 +322,13 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 상태 컬럼 (선택사항) */}
<div className="space-y-1.5">
<label className="block text-xs font-medium text-gray-700">
<label className="block text-xs font-medium text-foreground">
상태 컬럼 (마커 색상)
</label>
<select
value={currentConfig.statusColumn || ''}
onChange={(e) => updateConfig({ statusColumn: e.target.value })}
className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs"
className="w-full px-2 py-1.5 border border-border rounded-lg text-xs"
>
<option value="">선택하세요 (선택사항)</option>
{availableColumns.map((col) => (
@@ -343,8 +343,8 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 기상특보 데이터 안내 */}
{queryResult && isWeatherAlertData && (
<div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
<div className="text-blue-800 text-xs">
<div className="p-3 bg-primary/10 border border-primary rounded-lg">
<div className="text-primary text-xs">
🚨 기상특보 데이터가 감지되었습니다. 지역명(reg_ko)을 기준으로 자동으로 영역이 표시됩니다.
</div>
</div>
@@ -355,38 +355,38 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 날씨 정보 표시 옵션 */}
<div className="space-y-1.5">
<label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
<label className="flex items-center gap-2 text-xs font-medium text-foreground cursor-pointer">
<input
type="checkbox"
checked={currentConfig.showWeather || false}
onChange={(e) => updateConfig({ showWeather: e.target.checked })}
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary"
/>
<span>날씨 정보 표시</span>
</label>
<p className="text-xs text-gray-500 ml-6">
<p className="text-xs text-muted-foreground ml-6">
마커 팝업에 해당 위치의 날씨 정보를 함께 표시합니다
</p>
</div>
<div className="space-y-1.5">
<label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
<label className="flex items-center gap-2 text-xs font-medium text-foreground cursor-pointer">
<input
type="checkbox"
checked={currentConfig.showWeatherAlerts || false}
onChange={(e) => updateConfig({ showWeatherAlerts: e.target.checked })}
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary"
/>
<span>기상특보 영역 표시</span>
</label>
<p className="text-xs text-gray-500 ml-6">
<p className="text-xs text-muted-foreground ml-6">
현재 발효 중인 기상특보(주의보/경보)를 지도에 색상 영역으로 표시합니다
</p>
</div>
{/* 설정 미리보기 */}
<div className="p-3 bg-gray-50 rounded-lg">
<div className="text-xs font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
<div className="p-3 bg-muted rounded-lg">
<div className="text-xs font-medium text-foreground mb-2">📋 설정 미리보기</div>
<div className="text-xs text-muted-foreground space-y-1">
<div><strong>타일맵:</strong> {currentConfig.tileMapUrl ? '✅ 설정됨' : '❌ 미설정'}</div>
<div><strong>위도:</strong> {currentConfig.latitudeColumn || '미설정'}</div>
@@ -403,8 +403,8 @@ export function MapTestConfigPanel({ config, queryResult, onConfigChange }: MapT
{/* 필수 필드 확인 */}
{/* {!currentConfig.tileMapUrl && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
<div className="text-red-800 text-xs">
<div className="p-3 bg-destructive/10 border border-destructive rounded-lg">
<div className="text-destructive text-xs">
⚠️ 타일맵 URL을 입력해야 지도가 표시됩니다.
</div>
</div>