490 lines
19 KiB
TypeScript
490 lines
19 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import {
|
||
Database,
|
||
ArrowLeft,
|
||
Save,
|
||
Monitor,
|
||
Smartphone,
|
||
Tablet,
|
||
ChevronDown,
|
||
Settings,
|
||
Grid3X3,
|
||
Eye,
|
||
EyeOff,
|
||
Zap,
|
||
Languages,
|
||
Settings2,
|
||
PanelLeft,
|
||
PanelLeftClose,
|
||
AlignStartVertical,
|
||
AlignCenterVertical,
|
||
AlignEndVertical,
|
||
AlignStartHorizontal,
|
||
AlignCenterHorizontal,
|
||
AlignEndHorizontal,
|
||
AlignHorizontalSpaceAround,
|
||
AlignVerticalSpaceAround,
|
||
RulerIcon,
|
||
Tag,
|
||
Keyboard,
|
||
Equal,
|
||
} from "lucide-react";
|
||
import { ScreenResolution, SCREEN_RESOLUTIONS } from "@/types/screen";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuLabel,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuTrigger,
|
||
} from "@/components/ui/dropdown-menu";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
} from "@/components/ui/dialog";
|
||
|
||
interface GridSettings {
|
||
columns: number;
|
||
gap: number;
|
||
padding: number;
|
||
snapToGrid: boolean;
|
||
showGrid: boolean;
|
||
gridColor?: string;
|
||
gridOpacity?: number;
|
||
}
|
||
|
||
type AlignMode = "left" | "centerX" | "right" | "top" | "centerY" | "bottom";
|
||
type DistributeDirection = "horizontal" | "vertical";
|
||
type MatchSizeMode = "width" | "height" | "both";
|
||
|
||
interface SlimToolbarProps {
|
||
screenName?: string;
|
||
tableName?: string;
|
||
screenResolution?: ScreenResolution;
|
||
onBack: () => void;
|
||
onSave: () => void;
|
||
isSaving?: boolean;
|
||
onPreview?: () => void;
|
||
onResolutionChange?: (resolution: ScreenResolution) => void;
|
||
gridSettings?: GridSettings;
|
||
onGridSettingsChange?: (settings: GridSettings) => void;
|
||
onGenerateMultilang?: () => void;
|
||
isGeneratingMultilang?: boolean;
|
||
onOpenMultilangSettings?: () => void;
|
||
// 패널 토글 기능
|
||
isPanelOpen?: boolean;
|
||
onTogglePanel?: () => void;
|
||
// 정렬/배분/크기 기능
|
||
selectedCount?: number;
|
||
onAlign?: (mode: AlignMode) => void;
|
||
onDistribute?: (direction: DistributeDirection) => void;
|
||
onMatchSize?: (mode: MatchSizeMode) => void;
|
||
onToggleLabels?: () => void;
|
||
onShowShortcuts?: () => void;
|
||
}
|
||
|
||
export const SlimToolbar: React.FC<SlimToolbarProps> = ({
|
||
screenName,
|
||
tableName,
|
||
screenResolution,
|
||
onBack,
|
||
onSave,
|
||
isSaving = false,
|
||
onPreview,
|
||
onResolutionChange,
|
||
gridSettings,
|
||
onGridSettingsChange,
|
||
onGenerateMultilang,
|
||
isGeneratingMultilang = false,
|
||
onOpenMultilangSettings,
|
||
isPanelOpen = false,
|
||
onTogglePanel,
|
||
selectedCount = 0,
|
||
onAlign,
|
||
onDistribute,
|
||
onMatchSize,
|
||
onToggleLabels,
|
||
onShowShortcuts,
|
||
}) => {
|
||
// 사용자 정의 해상도 상태
|
||
const [customWidth, setCustomWidth] = useState("");
|
||
const [customHeight, setCustomHeight] = useState("");
|
||
const [showCustomInput, setShowCustomInput] = useState(false);
|
||
|
||
const getCategoryIcon = (category: string) => {
|
||
switch (category) {
|
||
case "desktop":
|
||
return <Monitor className="h-4 w-4 text-blue-600" />;
|
||
case "tablet":
|
||
return <Tablet className="h-4 w-4 text-green-600" />;
|
||
case "mobile":
|
||
return <Smartphone className="h-4 w-4 text-purple-600" />;
|
||
default:
|
||
return <Monitor className="h-4 w-4 text-blue-600" />;
|
||
}
|
||
};
|
||
|
||
const handleCustomResolution = () => {
|
||
const width = parseInt(customWidth);
|
||
const height = parseInt(customHeight);
|
||
if (width > 0 && height > 0 && onResolutionChange) {
|
||
const customResolution: ScreenResolution = {
|
||
width,
|
||
height,
|
||
name: `사용자 정의 (${width}×${height})`,
|
||
category: "custom",
|
||
};
|
||
onResolutionChange(customResolution);
|
||
setShowCustomInput(false);
|
||
}
|
||
};
|
||
|
||
const updateGridSetting = (key: keyof GridSettings, value: boolean) => {
|
||
if (onGridSettingsChange && gridSettings) {
|
||
onGridSettingsChange({
|
||
...gridSettings,
|
||
[key]: value,
|
||
});
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="flex h-14 items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 shadow-sm">
|
||
{/* 좌측: 네비게이션 + 패널 토글 + 화면 정보 */}
|
||
<div className="flex items-center space-x-4">
|
||
<Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
|
||
<ArrowLeft className="h-4 w-4" />
|
||
<span>목록으로</span>
|
||
</Button>
|
||
|
||
{onTogglePanel && <div className="h-6 w-px bg-gray-300" />}
|
||
|
||
{/* 패널 토글 버튼 */}
|
||
{onTogglePanel && (
|
||
<Button
|
||
variant={isPanelOpen ? "default" : "outline"}
|
||
size="sm"
|
||
onClick={onTogglePanel}
|
||
className="flex items-center space-x-2"
|
||
title="패널 열기/닫기 (P)"
|
||
>
|
||
{isPanelOpen ? (
|
||
<PanelLeftClose className="h-4 w-4" />
|
||
) : (
|
||
<PanelLeft className="h-4 w-4" />
|
||
)}
|
||
<span>패널</span>
|
||
</Button>
|
||
)}
|
||
|
||
<div className="h-6 w-px bg-gray-300" />
|
||
|
||
<div className="flex items-center space-x-3">
|
||
<div>
|
||
<h1 className="text-lg font-semibold text-gray-900">{screenName || "화면 설계"}</h1>
|
||
{tableName && (
|
||
<div className="mt-0.5 flex items-center space-x-1">
|
||
<Database className="h-3 w-3 text-gray-500" />
|
||
<span className="font-mono text-xs text-gray-500">{tableName}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 해상도 선택 드롭다운 */}
|
||
{screenResolution && (
|
||
<>
|
||
<div className="h-6 w-px bg-gray-300" />
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<button className="flex items-center space-x-2 rounded-md bg-blue-50 px-3 py-1.5 transition-colors hover:bg-blue-100">
|
||
{getCategoryIcon(screenResolution.category || "desktop")}
|
||
<span className="text-sm font-medium text-blue-900">{screenResolution.name}</span>
|
||
<span className="text-xs text-blue-600">
|
||
({screenResolution.width} × {screenResolution.height})
|
||
</span>
|
||
{onResolutionChange && <ChevronDown className="h-3 w-3 text-blue-600" />}
|
||
</button>
|
||
</DropdownMenuTrigger>
|
||
{onResolutionChange && (
|
||
<DropdownMenuContent align="start" className="w-64">
|
||
<DropdownMenuLabel className="text-xs text-gray-500">데스크톱</DropdownMenuLabel>
|
||
{SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
|
||
<DropdownMenuItem
|
||
key={resolution.name}
|
||
onClick={() => onResolutionChange(resolution)}
|
||
className="flex items-center space-x-2"
|
||
>
|
||
<Monitor className="h-4 w-4 text-blue-600" />
|
||
<span className="flex-1">{resolution.name}</span>
|
||
<span className="text-xs text-gray-400">
|
||
{resolution.width}×{resolution.height}
|
||
</span>
|
||
</DropdownMenuItem>
|
||
))}
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuLabel className="text-xs text-gray-500">태블릿</DropdownMenuLabel>
|
||
{SCREEN_RESOLUTIONS.filter((r) => r.category === "tablet").map((resolution) => (
|
||
<DropdownMenuItem
|
||
key={resolution.name}
|
||
onClick={() => onResolutionChange(resolution)}
|
||
className="flex items-center space-x-2"
|
||
>
|
||
<Tablet className="h-4 w-4 text-green-600" />
|
||
<span className="flex-1">{resolution.name}</span>
|
||
<span className="text-xs text-gray-400">
|
||
{resolution.width}×{resolution.height}
|
||
</span>
|
||
</DropdownMenuItem>
|
||
))}
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuLabel className="text-xs text-gray-500">모바일</DropdownMenuLabel>
|
||
{SCREEN_RESOLUTIONS.filter((r) => r.category === "mobile").map((resolution) => (
|
||
<DropdownMenuItem
|
||
key={resolution.name}
|
||
onClick={() => onResolutionChange(resolution)}
|
||
className="flex items-center space-x-2"
|
||
>
|
||
<Smartphone className="h-4 w-4 text-purple-600" />
|
||
<span className="flex-1">{resolution.name}</span>
|
||
<span className="text-xs text-gray-400">
|
||
{resolution.width}×{resolution.height}
|
||
</span>
|
||
</DropdownMenuItem>
|
||
))}
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuLabel className="text-xs text-gray-500">사용자 정의</DropdownMenuLabel>
|
||
<DropdownMenuItem
|
||
onClick={() => {
|
||
setCustomWidth(screenResolution.width.toString());
|
||
setCustomHeight(screenResolution.height.toString());
|
||
setShowCustomInput(true);
|
||
}}
|
||
className="flex items-center space-x-2"
|
||
>
|
||
<Settings className="h-4 w-4 text-gray-600" />
|
||
<span className="flex-1">사용자 정의...</span>
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
)}
|
||
</DropdownMenu>
|
||
|
||
{/* 사용자 정의 해상도 다이얼로그 */}
|
||
<Dialog open={showCustomInput} onOpenChange={setShowCustomInput}>
|
||
<DialogContent className="sm:max-w-[320px]">
|
||
<DialogHeader>
|
||
<DialogTitle>사용자 정의 해상도</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="grid grid-cols-2 gap-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="customWidth" className="text-sm">너비 (px)</Label>
|
||
<Input
|
||
id="customWidth"
|
||
type="number"
|
||
value={customWidth}
|
||
onChange={(e) => setCustomWidth(e.target.value)}
|
||
placeholder="1920"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="customHeight" className="text-sm">높이 (px)</Label>
|
||
<Input
|
||
id="customHeight"
|
||
type="number"
|
||
value={customHeight}
|
||
onChange={(e) => setCustomHeight(e.target.value)}
|
||
placeholder="1080"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setShowCustomInput(false)}>
|
||
취소
|
||
</Button>
|
||
<Button onClick={handleCustomResolution}>
|
||
적용
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</>
|
||
)}
|
||
|
||
{/* 격자 설정 */}
|
||
{gridSettings && onGridSettingsChange && (
|
||
<>
|
||
<div className="h-6 w-px bg-gray-300" />
|
||
<div className="flex items-center space-x-2 rounded-md bg-gray-50 px-3 py-1.5">
|
||
<Grid3X3 className="h-4 w-4 text-gray-600" />
|
||
<div className="flex items-center space-x-3">
|
||
<label className="flex cursor-pointer items-center space-x-1.5">
|
||
{gridSettings.showGrid ? (
|
||
<Eye className="h-3.5 w-3.5 text-primary" />
|
||
) : (
|
||
<EyeOff className="h-3.5 w-3.5 text-gray-400" />
|
||
)}
|
||
<Checkbox
|
||
checked={gridSettings.showGrid}
|
||
onCheckedChange={(checked) => updateGridSetting("showGrid", checked as boolean)}
|
||
className="h-3.5 w-3.5"
|
||
/>
|
||
<span className="text-xs text-gray-600">격자 표시</span>
|
||
</label>
|
||
<label className="flex cursor-pointer items-center space-x-1.5">
|
||
<Zap className={`h-3.5 w-3.5 ${gridSettings.snapToGrid ? "text-primary" : "text-gray-400"}`} />
|
||
<Checkbox
|
||
checked={gridSettings.snapToGrid}
|
||
onCheckedChange={(checked) => updateGridSetting("snapToGrid", checked as boolean)}
|
||
className="h-3.5 w-3.5"
|
||
/>
|
||
<span className="text-xs text-gray-600">격자 스냅</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* 중앙: 정렬/배분 도구 (다중 선택 시 표시) */}
|
||
{selectedCount >= 2 && (onAlign || onDistribute || onMatchSize) && (
|
||
<div className="flex items-center space-x-1 rounded-md bg-blue-50 px-2 py-1">
|
||
{/* 정렬 */}
|
||
{onAlign && (
|
||
<>
|
||
<span className="mr-1 text-xs font-medium text-blue-700">정렬</span>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("left")} title="좌측 정렬 (Alt+L)">
|
||
<AlignStartVertical className="h-3.5 w-3.5" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("centerX")} title="가로 중앙 (Alt+C)">
|
||
<AlignCenterVertical className="h-3.5 w-3.5" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("right")} title="우측 정렬 (Alt+R)">
|
||
<AlignEndVertical className="h-3.5 w-3.5" />
|
||
</Button>
|
||
<div className="mx-0.5 h-4 w-px bg-blue-200" />
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("top")} title="상단 정렬 (Alt+T)">
|
||
<AlignStartHorizontal className="h-3.5 w-3.5" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("centerY")} title="세로 중앙 (Alt+M)">
|
||
<AlignCenterHorizontal className="h-3.5 w-3.5" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("bottom")} title="하단 정렬 (Alt+B)">
|
||
<AlignEndHorizontal className="h-3.5 w-3.5" />
|
||
</Button>
|
||
</>
|
||
)}
|
||
|
||
{/* 배분 (3개 이상 선택 시) */}
|
||
{onDistribute && selectedCount >= 3 && (
|
||
<>
|
||
<div className="mx-1 h-4 w-px bg-blue-200" />
|
||
<span className="mr-1 text-xs font-medium text-blue-700">배분</span>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("horizontal")} title="가로 균등 배분 (Alt+H)">
|
||
<AlignHorizontalSpaceAround className="h-3.5 w-3.5" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("vertical")} title="세로 균등 배분 (Alt+V)">
|
||
<AlignVerticalSpaceAround className="h-3.5 w-3.5" />
|
||
</Button>
|
||
</>
|
||
)}
|
||
|
||
{/* 크기 맞추기 */}
|
||
{onMatchSize && (
|
||
<>
|
||
<div className="mx-1 h-4 w-px bg-blue-200" />
|
||
<span className="mr-1 text-xs font-medium text-blue-700">크기</span>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("width")} title="너비 맞추기 (Alt+W)">
|
||
<RulerIcon className="h-3.5 w-3.5" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("height")} title="높이 맞추기 (Alt+E)">
|
||
<RulerIcon className="h-3.5 w-3.5 rotate-90" />
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("both")} title="크기 모두 맞추기">
|
||
<Equal className="h-3.5 w-3.5" />
|
||
</Button>
|
||
</>
|
||
)}
|
||
|
||
<div className="mx-1 h-4 w-px bg-blue-200" />
|
||
<span className="text-xs text-blue-600">{selectedCount}개 선택</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 우측: 버튼들 */}
|
||
<div className="flex items-center space-x-2">
|
||
{/* 라벨 토글 버튼 */}
|
||
{onToggleLabels && (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={onToggleLabels}
|
||
className="flex items-center space-x-1"
|
||
title="라벨 일괄 표시/숨기기 (Alt+Shift+L)"
|
||
>
|
||
<Tag className="h-4 w-4" />
|
||
<span>라벨</span>
|
||
</Button>
|
||
)}
|
||
|
||
{/* 단축키 도움말 */}
|
||
{onShowShortcuts && (
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={onShowShortcuts}
|
||
className="h-9 w-9"
|
||
title="단축키 도움말 (?)"
|
||
>
|
||
<Keyboard className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
|
||
{onPreview && (
|
||
<Button variant="outline" onClick={onPreview} className="flex items-center space-x-2">
|
||
<Smartphone className="h-4 w-4" />
|
||
<span>반응형 미리보기</span>
|
||
</Button>
|
||
)}
|
||
{onGenerateMultilang && (
|
||
<Button
|
||
variant="outline"
|
||
onClick={onGenerateMultilang}
|
||
disabled={isGeneratingMultilang}
|
||
className="flex items-center space-x-2"
|
||
title="화면 라벨에 대한 다국어 키를 자동으로 생성합니다"
|
||
>
|
||
<Languages className="h-4 w-4" />
|
||
<span>{isGeneratingMultilang ? "생성 중..." : "다국어 생성"}</span>
|
||
</Button>
|
||
)}
|
||
{onOpenMultilangSettings && (
|
||
<Button
|
||
variant="outline"
|
||
onClick={onOpenMultilangSettings}
|
||
className="flex items-center space-x-2"
|
||
title="다국어 키 연결 및 설정을 관리합니다"
|
||
>
|
||
<Settings2 className="h-4 w-4" />
|
||
<span>다국어 설정</span>
|
||
</Button>
|
||
)}
|
||
<Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
|
||
<Save className="h-4 w-4" />
|
||
<span>{isSaving ? "저장 중..." : "저장"}</span>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SlimToolbar;
|