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

58
frontend/components/admin/dashboard/ChartConfigPanel.tsx
View File

@@ -117,17 +117,17 @@ export function ChartConfigPanel({
다음 컬럼은 객체 또는 배열 타입이라서 차트 축으로 선택할 수 없습니다:
<div className="mt-1 flex flex-wrap gap-1">
{complexColumns.map((col) => (
<Badge key={col} variant="outline" className="bg-red-50">
<Badge key={col} variant="outline" className="bg-destructive/10">
{col} ({columnTypes[col]})
</Badge>
))}
</div>
</div>
<div className="mt-2 text-xs text-gray-600">
<div className="mt-2 text-xs text-foreground">
<strong>해결 방법:</strong> JSON Path를 사용하여 중첩된 객체 내부의 값을 직접 추출하세요.
<br />
예: <code className="rounded bg-gray-100 px-1">main</code> 또는{" "}
<code className="rounded bg-gray-100 px-1">data.items</code>
예: <code className="rounded bg-muted px-1">main</code> 또는{" "}
<code className="rounded bg-muted px-1">data.items</code>
</div>
</AlertDescription>
</Alert>
@@ -135,7 +135,7 @@ export function ChartConfigPanel({
{/* 차트 제목 */}
<div className="space-y-1.5">
<Label className="text-xs font-medium text-gray-700">차트 제목</Label>
<Label className="text-xs font-medium text-foreground">차트 제목</Label>
<Input
type="text"
value={currentConfig.title || ""}
@@ -149,9 +149,9 @@ export function ChartConfigPanel({
{/* X축 설정 */}
<div className="space-y-1.5">
<Label className="text-xs font-medium text-gray-700">
<Label className="text-xs font-medium text-foreground">
X축 (카테고리)
<span className="ml-1 text-red-500">*</span>
<span className="ml-1 text-destructive">*</span>
</Label>
<Select value={currentConfig.xAxis || undefined} onValueChange={(value) => updateConfig({ xAxis: value })}>
<SelectTrigger className="h-8 text-xs">
@@ -170,39 +170,39 @@ export function ChartConfigPanel({
return (
<SelectItem key={col} value={col} className="text-xs">
{col}
{previewText && <span className="ml-1.5 text-[10px] text-gray-500">(예: {previewText})</span>}
{previewText && <span className="ml-1.5 text-[10px] text-muted-foreground">(예: {previewText})</span>}
</SelectItem>
);
})}
</SelectContent>
</Select>
{simpleColumns.length === 0 && (
<p className="text-[11px] text-red-500">사용 가능한 컬럼이 없습니다. JSON Path를 확인하세요.</p>
<p className="text-[11px] text-destructive">사용 가능한 컬럼이 없습니다. JSON Path를 확인하세요.</p>
)}
</div>
{/* Y축 설정 (다중 선택 가능) */}
<div className="space-y-1.5">
<Label className="text-xs font-medium text-gray-700">
<Label className="text-xs font-medium text-foreground">
Y축 (값) - 여러 개 선택 가능
{!isPieChart && !isApiSource && <span className="ml-1 text-red-500">*</span>}
{!isPieChart && !isApiSource && <span className="ml-1 text-destructive">*</span>}
{(isPieChart || isApiSource) && (
<span className="ml-1.5 text-[11px] text-gray-500">(선택사항 - 그룹핑+집계 사용 가능)</span>
<span className="ml-1.5 text-[11px] text-muted-foreground">(선택사항 - 그룹핑+집계 사용 가능)</span>
)}
</Label>
<div className="max-h-48 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-2">
<div className="max-h-48 overflow-y-auto rounded border border-border bg-muted p-2">
<div className="space-y-1.5">
{/* 숫자 타입 우선 표시 */}
{numericColumns.length > 0 && (
<>
<div className="mb-1.5 text-[11px] font-medium text-green-700">숫자 타입 (권장)</div>
<div className="mb-1.5 text-[11px] font-medium text-success">숫자 타입 (권장)</div>
{numericColumns.map((col) => {
const isSelected = Array.isArray(currentConfig.yAxis)
? currentConfig.yAxis.includes(col)
: currentConfig.yAxis === col;
return (
<div key={col} className="flex items-center gap-1.5 rounded border-green-500 bg-green-50 p-1.5">
<div key={col} className="flex items-center gap-1.5 rounded border-success bg-success/10 p-1.5">
<Checkbox
checked={isSelected}
onCheckedChange={(checked) => {
@@ -229,7 +229,7 @@ export function ChartConfigPanel({
<Label className="flex-1 cursor-pointer text-xs font-normal">
<span className="font-medium">{col}</span>
{sampleData[col] !== undefined && (
<span className="ml-1.5 text-[10px] text-gray-600">(예: {sampleData[col]})</span>
<span className="ml-1.5 text-[10px] text-foreground">(예: {sampleData[col]})</span>
)}
</Label>
</div>
@@ -242,7 +242,7 @@ export function ChartConfigPanel({
{simpleColumns.filter((col) => !numericColumns.includes(col)).length > 0 && (
<>
{numericColumns.length > 0 && <div className="my-1.5 border-t"></div>}
<div className="mb-1.5 text-[11px] font-medium text-gray-600">기타 타입</div>
<div className="mb-1.5 text-[11px] font-medium text-foreground">기타 타입</div>
{simpleColumns
.filter((col) => !numericColumns.includes(col))
.map((col) => {
@@ -251,7 +251,7 @@ export function ChartConfigPanel({
: currentConfig.yAxis === col;
return (
<div key={col} className="flex items-center gap-1.5 rounded p-1.5 hover:bg-gray-50">
<div key={col} className="flex items-center gap-1.5 rounded p-1.5 hover:bg-muted">
<Checkbox
checked={isSelected}
onCheckedChange={(checked) => {
@@ -278,7 +278,7 @@ export function ChartConfigPanel({
<Label className="flex-1 cursor-pointer text-xs font-normal">
{col}
{sampleData[col] !== undefined && (
<span className="ml-1.5 text-[10px] text-gray-500">
<span className="ml-1.5 text-[10px] text-muted-foreground">
(예: {String(sampleData[col]).substring(0, 30)})
</span>
)}
@@ -291,9 +291,9 @@ export function ChartConfigPanel({
</div>
</div>
{simpleColumns.length === 0 && (
<p className="text-[11px] text-red-500">사용 가능한 컬럼이 없습니다. JSON Path를 확인하세요.</p>
<p className="text-[11px] text-destructive">사용 가능한 컬럼이 없습니다. JSON Path를 확인하세요.</p>
)}
<p className="text-[11px] text-gray-500">
<p className="text-[11px] text-muted-foreground">
팁: 여러 항목을 선택하면 비교 차트가 생성됩니다 (예: 갤럭시 vs 아이폰)
</p>
</div>
@@ -302,9 +302,9 @@ export function ChartConfigPanel({
{/* 집계 함수 */}
<div className="space-y-1.5">
<Label className="text-xs font-medium text-gray-700">
<Label className="text-xs font-medium text-foreground">
집계 함수
<span className="ml-1.5 text-[11px] text-gray-500">(데이터 처리 방식)</span>
<span className="ml-1.5 text-[11px] text-muted-foreground">(데이터 처리 방식)</span>
</Label>
<Select
value={currentConfig.aggregation || "none"}
@@ -338,16 +338,16 @@ export function ChartConfigPanel({
</SelectItem>
</SelectContent>
</Select>
<p className="text-[11px] text-gray-500">
<p className="text-[11px] text-muted-foreground">
그룹핑 필드와 함께 사용하면 자동으로 데이터를 집계합니다. (예: 부서별 개수, 월별 합계)
</p>
</div>
{/* 그룹핑 필드 (선택사항) */}
<div className="space-y-1.5">
<Label className="text-xs font-medium text-gray-700">
<Label className="text-xs font-medium text-foreground">
그룹핑 필드 (선택사항)
<span className="ml-1.5 text-[11px] text-gray-500">(같은 값끼리 묶어서 집계)</span>
<span className="ml-1.5 text-[11px] text-muted-foreground">(같은 값끼리 묶어서 집계)</span>
</Label>
<Select
value={currentConfig.groupBy || undefined}
@@ -373,7 +373,7 @@ export function ChartConfigPanel({
{/* 차트 색상 */}
<div className="space-y-1.5">
<Label className="text-xs font-medium text-gray-700">차트 색상</Label>
<Label className="text-xs font-medium text-foreground">차트 색상</Label>
<div className="grid grid-cols-4 gap-2">
{[
["#3B82F6", "#EF4444", "#10B981", "#F59E0B"], // 기본
@@ -387,8 +387,8 @@ export function ChartConfigPanel({
onClick={() => updateConfig({ colors: colorSet })}
className={`flex h-8 rounded border-2 transition-colors ${
JSON.stringify(currentConfig.colors) === JSON.stringify(colorSet)
? "border-gray-800"
: "border-gray-300 hover:border-gray-400"
? "border-foreground"
: "border-border hover:border-border/80"
}`}
>
{colorSet.map((color, idx) => (