90 lines
3.6 KiB
TypeScript
90 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ChartDataSource } from "../types";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Database, Globe } from "lucide-react";
|
|
|
|
interface DataSourceSelectorProps {
|
|
dataSource: ChartDataSource;
|
|
onTypeChange: (type: "database" | "api") => void;
|
|
}
|
|
|
|
/**
|
|
* 데이터 소스 선택 컴포넌트
|
|
* - DB vs API 선택
|
|
* - 큰 카드 UI로 직관적인 선택
|
|
*/
|
|
export function DataSourceSelector({ dataSource, onTypeChange }: DataSourceSelectorProps) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-foreground">1단계: 데이터 소스 선택</h3>
|
|
<p className="mt-1 text-sm text-foreground">차트에 표시할 데이터를 어디서 가져올지 선택하세요</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{/* 데이터베이스 옵션 */}
|
|
<Card
|
|
className={`cursor-pointer p-6 transition-all ${
|
|
dataSource.type === "database"
|
|
? "border-2 border-primary bg-primary/10"
|
|
: "border-2 border-border hover:border-border"
|
|
}`}
|
|
onClick={() => onTypeChange("database")}
|
|
>
|
|
<div className="flex flex-col items-center space-y-3 text-center">
|
|
<div className={`rounded-full p-4 ${dataSource.type === "database" ? "bg-primary/10" : "bg-muted"}`}>
|
|
<Database className={`h-8 w-8 ${dataSource.type === "database" ? "text-primary" : "text-foreground"}`} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-foreground">데이터베이스</h4>
|
|
<p className="mt-1 text-sm text-foreground">SQL 쿼리로 데이터 조회</p>
|
|
</div>
|
|
<div className="space-y-1 text-xs text-muted-foreground">
|
|
<div>✓ 현재 DB 또는 외부 DB</div>
|
|
<div>✓ SELECT 쿼리 지원</div>
|
|
<div>✓ 실시간 데이터 조회</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* REST API 옵션 */}
|
|
<Card
|
|
className={`cursor-pointer p-6 transition-all ${
|
|
dataSource.type === "api"
|
|
? "border-2 border-success bg-success/10"
|
|
: "border-2 border-border hover:border-border"
|
|
}`}
|
|
onClick={() => onTypeChange("api")}
|
|
>
|
|
<div className="flex flex-col items-center space-y-3 text-center">
|
|
<div className={`rounded-full p-4 ${dataSource.type === "api" ? "bg-success/10" : "bg-muted"}`}>
|
|
<Globe className={`h-8 w-8 ${dataSource.type === "api" ? "text-success" : "text-foreground"}`} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-foreground">REST API</h4>
|
|
<p className="mt-1 text-sm text-foreground">외부 API에서 데이터 가져오기</p>
|
|
</div>
|
|
<div className="space-y-1 text-xs text-muted-foreground">
|
|
<div>✓ GET 요청 지원</div>
|
|
<div>✓ JSON 응답 파싱</div>
|
|
<div>✓ 커스텀 헤더 설정</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 선택된 타입 표시 */}
|
|
{dataSource.type && (
|
|
<div className="rounded-lg border border-border bg-muted p-3">
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<span className="font-medium text-foreground">선택됨:</span>
|
|
<span className="text-foreground">{dataSource.type === "database" ? "🗄️ 데이터베이스" : "🌐 REST API"}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|