8c045acab3
Backend:
- screen_layouts_pop 테이블용 CRUD API 추가 (getLayoutPop, saveLayoutPop, deleteLayoutPop, getScreenIdsWithPopLayout)
- 멀티테넌시 권한 체크 포함
Frontend API:
- screenApi에 POP 레이아웃 함수 4개 추가
POP 관리 페이지:
- popScreenMngList 신규 생성
- isPop prop으로 미리보기 URL 분기 (/pop/screens/{id})
- CreateScreenModal에서 POP 화면 생성 시 빈 레이아웃 자동 생성
POP 디자이너:
- PopDesigner, PopCanvas, PopPanel, SectionGrid 컴포넌트 구현
- react-dnd로 팔레트→캔버스 드래그앤드롭
- react-grid-layout으로 컴포넌트 자유 배치/리사이즈
- 그리드 단순화: 고정 셀 크기(40px) 기반 자동 계산, 그리드 점 제거
- onLayoutChange를 onDragStop/onResizeStop으로 변경하여 드롭 시 크기 유지
369 lines
14 KiB
TypeScript
369 lines
14 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,
|
||
} 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;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
export const SlimToolbar: React.FC<SlimToolbarProps> = ({
|
||
screenName,
|
||
tableName,
|
||
screenResolution,
|
||
onBack,
|
||
onSave,
|
||
isSaving = false,
|
||
onPreview,
|
||
onResolutionChange,
|
||
gridSettings,
|
||
onGridSettingsChange,
|
||
onGenerateMultilang,
|
||
isGeneratingMultilang = false,
|
||
onOpenMultilangSettings,
|
||
isPanelOpen = false,
|
||
onTogglePanel,
|
||
}) => {
|
||
// 사용자 정의 해상도 상태
|
||
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>
|
||
|
||
{/* 우측: 버튼들 */}
|
||
<div className="flex items-center space-x-2">
|
||
{onPreview && (
|
||
<Button variant="outline" onClick={onPreview} className="flex items-center space-x-2">
|
||
<Eye className="h-4 w-4" />
|
||
<span>POP 미리보기</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;
|