jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge origin/main into lhj - 대시보드 기능 통합

Browse Source 
- 달력-할일-긴급지시 Context 연동 (lhj)
- 창고 현황 3D 위젯 추가 (main)
- 대시보드 저장 모달 개선 (main)
- 메뉴 할당 모달 추가 (main)
- 그리드 스냅 기능 유지
- DashboardProvider 통합
This commit is contained in:
leeheejin
2025-10-17 10:01:33 +09:00
parent fa08a26079 e5aa9d46f5
commit 829161d195
16 changed files with 2415 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
frontend/components/admin/MenuFormModal.tsx
View File

@@ -47,12 +47,12 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
uiTexts,
}) => {
// console.log("🎯 MenuFormModal 렌더링 - Props:", {
// isOpen,
// menuId,
// parentId,
// menuType,
// level,
// parentCompanyCode,
// isOpen,
// menuId,
// parentId,
// menuType,
// level,
// parentCompanyCode,
// });
// 다국어 텍스트 가져오기 함수
@@ -75,12 +75,18 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
});
// 화면 할당 관련 상태
const [urlType, setUrlType] = useState<"direct" | "screen">("screen"); // URL 직접 입력 or 화면 할당 (기본값: 화면 할당)
const [urlType, setUrlType] = useState<"direct" | "screen" | "dashboard">("screen"); // URL 직접 입력 or 화면 할당 or 대시보드 할당 (기본값: 화면 할당)
const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
const [screens, setScreens] = useState<ScreenDefinition[]>([]);
const [screenSearchText, setScreenSearchText] = useState("");
const [isScreenDropdownOpen, setIsScreenDropdownOpen] = useState(false);
// 대시보드 할당 관련 상태
const [selectedDashboard, setSelectedDashboard] = useState<any | null>(null);
const [dashboards, setDashboards] = useState<any[]>([]);
const [dashboardSearchText, setDashboardSearchText] = useState("");
const [isDashboardDropdownOpen, setIsDashboardDropdownOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [isEdit, setIsEdit] = useState(false);
const [companies, setCompanies] = useState<Company[]>([]);
@@ -93,21 +99,6 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
try {
const response = await screenApi.getScreens({ size: 1000 }); // 모든 화면 가져오기
// console.log("🔍 화면 목록 로드 디버깅:", {
// totalScreens: response.data.length,
// firstScreen: response.data[0],
// firstScreenFields: response.data[0] ? Object.keys(response.data[0]) : [],
// firstScreenValues: response.data[0] ? Object.values(response.data[0]) : [],
// allScreenIds: response.data
// .map((s) => ({
// screenId: s.screenId,
// legacyId: s.id,
// name: s.screenName,
// code: s.screenCode,
// }))
// .slice(0, 5), // 처음 5개만 출력
// });
setScreens(response.data);
console.log("✅ 화면 목록 로드 완료:", response.data.length);
} catch (error) {
@@ -116,15 +107,28 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
}
};
// 대시보드 목록 로드
const loadDashboards = async () => {
try {
const { dashboardApi } = await import("@/lib/api/dashboard");
const response = await dashboardApi.getMyDashboards();
setDashboards(response.dashboards || []);
console.log("✅ 대시보드 목록 로드 완료:", response.dashboards?.length || 0);
} catch (error) {
console.error("❌ 대시보드 목록 로드 실패:", error);
toast.error("대시보드 목록을 불러오는데 실패했습니다.");
}
};
// 화면 선택 시 URL 자동 설정
const handleScreenSelect = (screen: ScreenDefinition) => {
// console.log("🖥️ 화면 선택 디버깅:", {
// screen,
// screenId: screen.screenId,
// screenIdType: typeof screen.screenId,
// legacyId: screen.id,
// allFields: Object.keys(screen),
// screenValues: Object.values(screen),
// screen,
// screenId: screen.screenId,
// screenIdType: typeof screen.screenId,
// legacyId: screen.id,
// allFields: Object.keys(screen),
// screenValues: Object.values(screen),
// });
// ScreenDefinition에서는 screenId 필드를 사용
@@ -155,24 +159,42 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
}));
// console.log("🖥️ 화면 선택 완료:", {
// screenId: screen.screenId,
// legacyId: screen.id,
// actualScreenId,
// screenName: screen.screenName,
// menuType: menuType,
// formDataMenuType: formData.menuType,
// isAdminMenu,
// generatedUrl: screenUrl,
// screenId: screen.screenId,
// legacyId: screen.id,
// actualScreenId,
// screenName: screen.screenName,
// menuType: menuType,
// formDataMenuType: formData.menuType,
// isAdminMenu,
// generatedUrl: screenUrl,
// });
};
// 대시보드 선택 시 URL 자동 설정
const handleDashboardSelect = (dashboard: any) => {
setSelectedDashboard(dashboard);
setIsDashboardDropdownOpen(false);
// 대시보드 URL 생성
let dashboardUrl = `/dashboard/${dashboard.id}`;
// 현재 메뉴 타입이 관리자인지 확인 (0 또는 "admin")
const isAdminMenu = menuType === "0" || menuType === "admin" || formData.menuType === "0";
if (isAdminMenu) {
dashboardUrl += "?mode=admin";
}
setFormData((prev) => ({ ...prev, menuUrl: dashboardUrl }));
toast.success(`대시보드가 선택되었습니다: ${dashboard.title}`);
};
// URL 타입 변경 시 처리
const handleUrlTypeChange = (type: "direct" | "screen") => {
const handleUrlTypeChange = (type: "direct" | "screen" | "dashboard") => {
// console.log("🔄 URL 타입 변경:", {
// from: urlType,
// to: type,
// currentSelectedScreen: selectedScreen?.screenName,
// currentUrl: formData.menuUrl,
// from: urlType,
// to: type,
// currentSelectedScreen: selectedScreen?.screenName,
// currentUrl: formData.menuUrl,
// });
setUrlType(type);
@@ -286,10 +308,10 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
const screenId = menuUrl.match(/\/screens\/(\d+)/)?.[1];
if (screenId) {
// console.log("🔍 기존 메뉴에서 화면 ID 추출:", {
// menuUrl,
// screenId,
// hasAdminParam: menuUrl.includes("mode=admin"),
// currentScreensCount: screens.length,
// menuUrl,
// screenId,
// hasAdminParam: menuUrl.includes("mode=admin"),
// currentScreensCount: screens.length,
// });
// 화면 설정 함수
@@ -298,15 +320,15 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
if (screen) {
setSelectedScreen(screen);
// console.log("🖥️ 기존 메뉴의 할당된 화면 설정:", {
// screen,
// originalUrl: menuUrl,
// hasAdminParam: menuUrl.includes("mode=admin"),
// screen,
// originalUrl: menuUrl,
// hasAdminParam: menuUrl.includes("mode=admin"),
// });
return true;
} else {
// console.warn("⚠️ 해당 ID의 화면을 찾을 수 없음:", {
// screenId,
// availableScreens: screens.map((s) => ({ screenId: s.screenId, id: s.id, name: s.screenName })),
// screenId,
// availableScreens: screens.map((s) => ({ screenId: s.screenId, id: s.id, name: s.screenName })),
// });
return false;
}
@@ -325,30 +347,34 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
}, 500);
}
}
} else if (menuUrl.startsWith("/dashboard/")) {
setUrlType("dashboard");
setSelectedScreen(null);
// 대시보드 ID 추출 및 선택은 useEffect에서 처리됨
} else {
setUrlType("direct");
setSelectedScreen(null);
}
// console.log("설정된 폼 데이터:", {
// objid: menu.objid || menu.OBJID,
// parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
// menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
// menuUrl: menu.menu_url || menu.MENU_URL || "",
// menuDesc: menu.menu_desc || menu.MENU_DESC || "",
// seq: menu.seq || menu.SEQ || 1,
// menuType: convertedMenuType,
// status: convertedStatus,
// companyCode: companyCode,
// langKey: langKey,
// objid: menu.objid || menu.OBJID,
// parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
// menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
// menuUrl: menu.menu_url || menu.MENU_URL || "",
// menuDesc: menu.menu_desc || menu.MENU_DESC || "",
// seq: menu.seq || menu.SEQ || 1,
// menuType: convertedMenuType,
// status: convertedStatus,
// companyCode: companyCode,
// langKey: langKey,
// });
}
} catch (error: any) {
console.error("메뉴 정보 로딩 오류:", error);
// console.error("오류 상세 정보:", {
// message: error?.message,
// stack: error?.stack,
// response: error?.response,
// message: error?.message,
// stack: error?.stack,
// response: error?.response,
// });
toast.error(getText(MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_MENU_INFO));
} finally {
@@ -391,11 +417,11 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
});
// console.log("메뉴 등록 기본값 설정:", {
// parentObjId: parentId || "0",
// menuType: defaultMenuType,
// status: "ACTIVE",
// companyCode: "",
// langKey: "",
// parentObjId: parentId || "0",
// menuType: defaultMenuType,
// status: "ACTIVE",
// companyCode: "",
// langKey: "",
// });
}
}, [menuId, parentId, menuType]);
@@ -430,10 +456,11 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
}
}, [isOpen, formData.companyCode]);
// 화면 목록 로드
// 화면 목록 및 대시보드 목록 로드
useEffect(() => {
if (isOpen) {
loadScreens();
loadDashboards();
}
}, [isOpen]);
@@ -449,9 +476,9 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
if (screen) {
setSelectedScreen(screen);
// console.log("✅ 기존 메뉴의 할당된 화면 자동 설정 완료:", {
// screenId,
// screenName: screen.screenName,
// menuUrl,
// screenId,
// screenName: screen.screenName,
// menuUrl,
// });
}
}
@@ -459,6 +486,23 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
}
}, [screens, isEdit, formData.menuUrl, urlType, selectedScreen]);
// 대시보드 목록 로드 완료 후 기존 메뉴의 할당된 대시보드 설정
useEffect(() => {
if (dashboards.length > 0 && isEdit && formData.menuUrl && urlType === "dashboard") {
const menuUrl = formData.menuUrl;
if (menuUrl.startsWith("/dashboard/")) {
const dashboardId = menuUrl.replace("/dashboard/", "");
if (dashboardId && !selectedDashboard) {
console.log("🔄 대시보드 목록 로드 완료 - 기존 할당 대시보드 자동 설정");
const dashboard = dashboards.find((d) => d.id === dashboardId);
if (dashboard) {
setSelectedDashboard(dashboard);
}
}
}
}
}, [dashboards, isEdit, formData.menuUrl, urlType, selectedDashboard]);
// 드롭다운 외부 클릭 시 닫기
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
@@ -471,9 +515,13 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
setIsScreenDropdownOpen(false);
setScreenSearchText("");
}
if (!target.closest(".dashboard-dropdown")) {
setIsDashboardDropdownOpen(false);
setDashboardSearchText("");
}
};
if (isLangKeyDropdownOpen || isScreenDropdownOpen) {
if (isLangKeyDropdownOpen || isScreenDropdownOpen || isDashboardDropdownOpen) {
document.addEventListener("mousedown", handleClickOutside);
}
@@ -751,6 +799,12 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
화면 할당
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="dashboard" id="dashboard" />
<Label htmlFor="dashboard" className="cursor-pointer">
대시보드 할당
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="direct" id="direct" />
<Label htmlFor="direct" className="cursor-pointer">
@@ -826,10 +880,91 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
{/* 선택된 화면 정보 표시 */}
{selectedScreen && (
<div className="rounded-md border bg-accent p-3">
<div className="bg-accent rounded-md border p-3">
<div className="text-sm font-medium text-blue-900">{selectedScreen.screenName}</div>
<div className="text-xs text-primary">코드: {selectedScreen.screenCode}</div>
<div className="text-xs text-primary">생성된 URL: {formData.menuUrl}</div>
<div className="text-primary text-xs">코드: {selectedScreen.screenCode}</div>
<div className="text-primary text-xs">생성된 URL: {formData.menuUrl}</div>
</div>
)}
</div>
)}
{/* 대시보드 할당 */}
{urlType === "dashboard" && (
<div className="space-y-2">
{/* 대시보드 선택 드롭다운 */}
<div className="relative">
<Button
type="button"
variant="outline"
className="w-full justify-between"
onClick={() => setIsDashboardDropdownOpen(!isDashboardDropdownOpen)}
>
<span className="truncate">{selectedDashboard ? selectedDashboard.title : "대시보드 선택"}</span>
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
{/* 드롭다운 메뉴 */}
{isDashboardDropdownOpen && (
<div className="dashboard-dropdown absolute z-50 mt-1 max-h-60 w-full overflow-hidden rounded-md border bg-white shadow-lg">
{/* 검색창 */}
<div className="border-b p-2">
<div className="relative">
<Search className="absolute top-2.5 left-2 h-4 w-4 text-gray-400" />
<Input
type="text"
placeholder="대시보드 검색..."
value={dashboardSearchText}
onChange={(e) => setDashboardSearchText(e.target.value)}
className="pl-8"
/>
</div>
</div>
{/* 대시보드 목록 */}
<div className="max-h-48 overflow-y-auto">
{dashboards
.filter(
(dashboard) =>
dashboard.title.toLowerCase().includes(dashboardSearchText.toLowerCase()) ||
(dashboard.description &&
dashboard.description.toLowerCase().includes(dashboardSearchText.toLowerCase())),
)
.map((dashboard) => (
<div
key={dashboard.id}
onClick={() => handleDashboardSelect(dashboard)}
className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-gray-100"
>
<div className="flex items-center justify-between">
<div>
<div className="text-sm font-medium">{dashboard.title}</div>
{dashboard.description && (
<div className="text-xs text-gray-500">{dashboard.description}</div>
)}
</div>
</div>
</div>
))}
{dashboards.filter(
(dashboard) =>
dashboard.title.toLowerCase().includes(dashboardSearchText.toLowerCase()) ||
(dashboard.description &&
dashboard.description.toLowerCase().includes(dashboardSearchText.toLowerCase())),
).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
</div>
</div>
)}
</div>
{/* 선택된 대시보드 정보 표시 */}
{selectedDashboard && (
<div className="bg-accent rounded-md border p-3">
<div className="text-sm font-medium text-blue-900">{selectedDashboard.title}</div>
{selectedDashboard.description && (
<div className="text-primary text-xs">설명: {selectedDashboard.description}</div>
)}
<div className="text-primary text-xs">생성된 URL: {formData.menuUrl}</div>
</div>
)}
</div>

309
frontend/components/admin/dashboard/DashboardDesigner.tsx
View File

@@ -7,10 +7,25 @@ import { DashboardTopMenu } from "./DashboardTopMenu";
import { ElementConfigModal } from "./ElementConfigModal";
import { ListWidgetConfigModal } from "./widgets/ListWidgetConfigModal";
import { TodoWidgetConfigModal } from "./widgets/TodoWidgetConfigModal";
import { DashboardSaveModal } from "./DashboardSaveModal";
import { DashboardElement, ElementType, ElementSubtype } from "./types";
import { GRID_CONFIG, snapToGrid, snapSizeToGrid, calculateCellSize } from "./gridUtils";
import { Resolution, RESOLUTIONS, detectScreenResolution } from "./ResolutionSelector";
import { DashboardProvider } from "@/contexts/DashboardContext";
import { useMenu } from "@/contexts/MenuContext";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { CheckCircle2 } from "lucide-react";
interface DashboardDesignerProps {
dashboardId?: string;
@@ -25,6 +40,7 @@ interface DashboardDesignerProps {
*/
export default function DashboardDesigner({ dashboardId: initialDashboardId }: DashboardDesignerProps = {}) {
const router = useRouter();
const { refreshMenus } = useMenu();
const [elements, setElements] = useState<DashboardElement[]>([]);
const [selectedElement, setSelectedElement] = useState<string | null>(null);
const [elementCounter, setElementCounter] = useState(0);
@@ -35,6 +51,12 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
const [canvasBackgroundColor, setCanvasBackgroundColor] = useState<string>("#f9fafb");
const canvasRef = useRef<HTMLDivElement>(null);
// 저장 모달 상태
const [saveModalOpen, setSaveModalOpen] = useState(false);
const [dashboardDescription, setDashboardDescription] = useState<string>("");
const [successModalOpen, setSuccessModalOpen] = useState(false);
const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
// 화면 해상도 자동 감지
const [screenResolution] = useState<Resolution>(() => detectScreenResolution());
const [resolution, setResolution] = useState<Resolution>(screenResolution);
@@ -42,17 +64,12 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
// resolution 변경 감지 및 요소 자동 조정
const handleResolutionChange = useCallback(
(newResolution: Resolution) => {
console.log("🎯 해상도 변경 요청:", newResolution);
setResolution((prev) => {
console.log("🎯 이전 해상도:", prev);
// 이전 해상도와 새 해상도의 캔버스 너비 비율 계산
const oldConfig = RESOLUTIONS[prev];
const newConfig = RESOLUTIONS[newResolution];
const widthRatio = newConfig.width / oldConfig.width;
console.log("📐 너비 비율:", widthRatio, `(${oldConfig.width}px → ${newConfig.width}px)`);
// 요소들의 위치와 크기를 비율에 맞춰 조정
if (widthRatio !== 1 && elements.length > 0) {
// 새 해상도의 셀 크기 계산
@@ -82,7 +99,6 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
};
});
console.log("✨ 요소 위치/크기 자동 조정 (그리드 스냅 적용):", adjustedElements.length, "개");
setElements(adjustedElements);
}
@@ -122,34 +138,21 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
const loadDashboard = async (id: string) => {
setIsLoading(true);
try {
// console.log('🔄 대시보드 로딩:', id);
const { dashboardApi } = await import("@/lib/api/dashboard");
const dashboard = await dashboardApi.getDashboard(id);
// console.log('✅ 대시보드 로딩 완료:', dashboard);
// 대시보드 정보 설정
setDashboardId(dashboard.id);
setDashboardTitle(dashboard.title);
// 저장된 설정 복원
console.log("🔍 로드된 대시보드:", dashboard);
console.log("📦 저장된 settings:", (dashboard as any).settings);
console.log("🎯 settings 타입:", typeof (dashboard as any).settings);
console.log("🔍 resolution 값:", (dashboard as any).settings?.resolution);
if ((dashboard as any).settings?.resolution) {
const savedResolution = (dashboard as any).settings.resolution as Resolution;
console.log("✅ 저장된 해상도 복원:", savedResolution);
setResolution(savedResolution);
} else {
console.log("⚠️ 저장된 해상도 없음");
const settings = (dashboard as { settings?: { resolution?: Resolution; backgroundColor?: string } }).settings;
if (settings?.resolution) {
setResolution(settings.resolution);
}
if ((dashboard as any).settings?.backgroundColor) {
console.log("✅ 저장된 배경색 복원:", (dashboard as any).settings.backgroundColor);
setCanvasBackgroundColor((dashboard as any).settings.backgroundColor);
if (settings?.backgroundColor) {
setCanvasBackgroundColor(settings.backgroundColor);
}
// 요소들 설정
@@ -168,7 +171,6 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
setElementCounter(maxId);
}
} catch (error) {
// console.error('❌ 대시보드 로딩 오류:', error);
alert(
"대시보드를 불러오는 중 오류가 발생했습니다.\n\n" +
(error instanceof Error ? error.message : "알 수 없는 오류"),
@@ -230,7 +232,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
setElementCounter((prev) => prev + 1);
setSelectedElement(newElement.id);
},
[elementCounter, canvasConfig.width],
[elementCounter, canvasConfig],
);
// 메뉴에서 요소 추가 시 (캔버스 중앙에 배치)
@@ -248,7 +250,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
createElement(type, subtype, centerX, centerY);
},
[canvasConfig.width, canvasConfig.height, createElement],
[canvasConfig, createElement],
);
// 요소 업데이트
@@ -267,13 +269,17 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
[selectedElement],
);
// 전체 삭제
// 전체 삭제 확인 모달 열기
const clearCanvas = useCallback(() => {
if (window.confirm("모든 요소를 삭제하시겠습니까?")) {
setElements([]);
setSelectedElement(null);
setElementCounter(0);
}
setClearConfirmOpen(true);
}, []);
// 실제 초기화 실행
const handleClearConfirm = useCallback(() => {
setElements([]);
setSelectedElement(null);
setElementCounter(0);
setClearConfirmOpen(false);
}, []);
// 요소 설정 모달 열기
@@ -314,88 +320,124 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
);
// 레이아웃 저장
const saveLayout = useCallback(async () => {
const saveLayout = useCallback(() => {
if (elements.length === 0) {
alert("저장할 요소가 없습니다. 차트나 위젯을 추가해주세요.");
return;
}
try {
// 실제 API 호출
const { dashboardApi } = await import("@/lib/api/dashboard");
// 저장 모달 열기
setSaveModalOpen(true);
}, [elements]);
const elementsData = elements.map((el) => ({
id: el.id,
type: el.type,
subtype: el.subtype,
position: el.position,
size: el.size,
title: el.title,
customTitle: el.customTitle,
showHeader: el.showHeader,
content: el.content,
dataSource: el.dataSource,
chartConfig: el.chartConfig,
}));
// 저장 처리
const handleSave = useCallback(
async (data: {
title: string;
description: string;
assignToMenu: boolean;
menuType?: "admin" | "user";
menuId?: string;
}) => {
try {
const { dashboardApi } = await import("@/lib/api/dashboard");
let savedDashboard;
const elementsData = elements.map((el) => ({
id: el.id,
type: el.type,
subtype: el.subtype,
position: el.position,
size: el.size,
title: el.title,
customTitle: el.customTitle,
showHeader: el.showHeader,
content: el.content,
dataSource: el.dataSource,
chartConfig: el.chartConfig,
listConfig: el.listConfig,
}));
if (dashboardId) {
// 기존 대시보드 업데이트
console.log("💾 저장 시작 - 현재 resolution 상태:", resolution);
console.log("💾 저장 시작 - 현재 배경색 상태:", canvasBackgroundColor);
let savedDashboard;
const updateData = {
elements: elementsData,
settings: {
resolution,
backgroundColor: canvasBackgroundColor,
},
};
if (dashboardId) {
// 기존 대시보드 업데이트
const updateData = {
title: data.title,
description: data.description || undefined,
elements: elementsData,
settings: {
resolution,
backgroundColor: canvasBackgroundColor,
},
};
console.log("💾 저장할 데이터:", updateData);
console.log("💾 저장할 settings:", updateData.settings);
savedDashboard = await dashboardApi.updateDashboard(dashboardId, updateData);
} else {
// 새 대시보드 생성
const dashboardData = {
title: data.title,
description: data.description || undefined,
isPublic: false,
elements: elementsData,
settings: {
resolution,
backgroundColor: canvasBackgroundColor,
},
};
savedDashboard = await dashboardApi.updateDashboard(dashboardId, updateData);
console.log("✅ 저장된 대시보드:", savedDashboard);
console.log("✅ 저장된 settings:", (savedDashboard as any).settings);
alert(`대시보드 "${savedDashboard.title}"이 업데이트되었습니다!`);
// Next.js 라우터로 뷰어 페이지 이동
router.push(`/dashboard/${savedDashboard.id}`);
} else {
// 새 대시보드 생성
const title = prompt("대시보드 제목을 입력하세요:", "새 대시보드");
if (!title) return;
const description = prompt("대시보드 설명을 입력하세요 (선택사항):", "");
const dashboardData = {
title,
description: description || undefined,
isPublic: false,
elements: elementsData,
settings: {
resolution,
backgroundColor: canvasBackgroundColor,
},
};
savedDashboard = await dashboardApi.createDashboard(dashboardData);
const viewDashboard = confirm(`대시보드 "${title}"이 저장되었습니다!\n\n지금 확인해보시겠습니까?`);
if (viewDashboard) {
// Next.js 라우터로 뷰어 페이지 이동
router.push(`/dashboard/${savedDashboard.id}`);
savedDashboard = await dashboardApi.createDashboard(dashboardData);
setDashboardId(savedDashboard.id);
}
setDashboardTitle(savedDashboard.title);
setDashboardDescription(data.description);
// 메뉴 할당 처리
if (data.assignToMenu && data.menuId) {
const { menuApi } = await import("@/lib/api/menu");
// 대시보드 URL 생성 (관리자 메뉴면 mode=admin 추가)
let dashboardUrl = `/dashboard/${savedDashboard.id}`;
if (data.menuType === "admin") {
dashboardUrl += "?mode=admin";
}
// 메뉴 정보 가져오기
const menuResponse = await menuApi.getMenuInfo(data.menuId);
if (menuResponse.success && menuResponse.data) {
const menu = menuResponse.data;
const updateData = {
menuUrl: dashboardUrl,
parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
menuDesc: menu.menu_desc || menu.MENU_DESC || "",
seq: menu.seq || menu.SEQ || 1,
menuType: menu.menu_type || menu.MENU_TYPE || "1",
status: menu.status || menu.STATUS || "active",
companyCode: menu.company_code || menu.COMPANY_CODE || "",
langKey: menu.lang_key || menu.LANG_KEY || "",
};
// 메뉴 URL 업데이트
await menuApi.updateMenu(data.menuId, updateData);
// 메뉴 목록 새로고침
await refreshMenus();
}
}
// 성공 모달 표시
setSuccessModalOpen(true);
} catch (error) {
const errorMessage = error instanceof Error ? error.message : "알 수 없는 오류";
alert(`대시보드 저장 중 오류가 발생했습니다.\n\n오류: ${errorMessage}`);
throw error;
}
} catch (error) {
const errorMessage = error instanceof Error ? error.message : "알 수 없는 오류";
alert(`대시보드 저장 중 오류가 발생했습니다.\n\n오류: ${errorMessage}\n\n관리자에게 문의하세요.`);
}
}, [elements, dashboardId, router, resolution, canvasBackgroundColor]);
},
[elements, dashboardId, resolution, canvasBackgroundColor, refreshMenus],
);
// 로딩 중이면 로딩 화면 표시
if (isLoading) {
@@ -479,6 +521,65 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
)}
</>
)}
{/* 저장 모달 */}
<DashboardSaveModal
isOpen={saveModalOpen}
onClose={() => setSaveModalOpen(false)}
onSave={handleSave}
initialTitle={dashboardTitle}
initialDescription={dashboardDescription}
isEditing={!!dashboardId}
/>
{/* 저장 성공 모달 */}
<Dialog
open={successModalOpen}
onOpenChange={() => {
setSuccessModalOpen(false);
router.push("/admin/dashboard");
}}
>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<CheckCircle2 className="h-6 w-6 text-green-600" />
</div>
<DialogTitle className="text-center">저장 완료</DialogTitle>
<DialogDescription className="text-center">대시보드가 성공적으로 저장되었습니다.</DialogDescription>
</DialogHeader>
<div className="flex justify-center pt-4">
<Button
onClick={() => {
setSuccessModalOpen(false);
router.push("/admin/dashboard");
}}
>
확인
</Button>
</div>
</DialogContent>
</Dialog>
{/* 초기화 확인 모달 */}
<AlertDialog open={clearConfirmOpen} onOpenChange={setClearConfirmOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>캔버스 초기화</AlertDialogTitle>
<AlertDialogDescription>
모든 요소가 삭제됩니다. 이 작업은 되돌릴 수 없습니다.
<br />
계속하시겠습니까?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>취소</AlertDialogCancel>
<AlertDialogAction onClick={handleClearConfirm} className="bg-red-600 hover:bg-red-700">
초기화
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</DashboardProvider>
);
@@ -517,6 +618,8 @@ function getElementTitle(type: ElementType, subtype: ElementSubtype): string {
return "🚚 기사 관리 위젯";
case "list":
return "📋 리스트 위젯";
case "warehouse-3d":
return "🏭 창고 현황 (3D)";
default:
return "🔧 위젯";
}
@@ -557,6 +660,8 @@ function getElementContent(type: ElementType, subtype: ElementSubtype): string {
return "driver-management";
case "list":
return "list-widget";
case "warehouse-3d":
return "warehouse-3d";
default:
return "위젯 내용이 여기에 표시됩니다";
}

321
frontend/components/admin/dashboard/DashboardSaveModal.tsx Normal file
View File

@@ -0,0 +1,321 @@
"use client";
import { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
SelectGroup,
SelectLabel,
} from "@/components/ui/select";
import { Loader2, Save } from "lucide-react";
import { menuApi } from "@/lib/api/menu";
interface MenuItem {
id: string;
name: string;
url?: string;
parent_id?: string;
children?: MenuItem[];
}
interface DashboardSaveModalProps {
isOpen: boolean;
onClose: () => void;
onSave: (data: {
title: string;
description: string;
assignToMenu: boolean;
menuType?: "admin" | "user";
menuId?: string;
}) => Promise<void>;
initialTitle?: string;
initialDescription?: string;
isEditing?: boolean;
}
export function DashboardSaveModal({
isOpen,
onClose,
onSave,
initialTitle = "",
initialDescription = "",
isEditing = false,
}: DashboardSaveModalProps) {
const [title, setTitle] = useState(initialTitle);
const [description, setDescription] = useState(initialDescription);
const [assignToMenu, setAssignToMenu] = useState(false);
const [menuType, setMenuType] = useState<"admin" | "user">("admin");
const [selectedMenuId, setSelectedMenuId] = useState<string>("");
const [adminMenus, setAdminMenus] = useState<MenuItem[]>([]);
const [userMenus, setUserMenus] = useState<MenuItem[]>([]);
const [loading, setLoading] = useState(false);
const [loadingMenus, setLoadingMenus] = useState(false);
useEffect(() => {
if (isOpen) {
setTitle(initialTitle);
setDescription(initialDescription);
setAssignToMenu(false);
setMenuType("admin");
setSelectedMenuId("");
loadMenus();
}
}, [isOpen, initialTitle, initialDescription]);
const loadMenus = async () => {
setLoadingMenus(true);
try {
const [adminData, userData] = await Promise.all([menuApi.getAdminMenus(), menuApi.getUserMenus()]);
// API 응답이 배열인지 확인하고 처리
const adminMenuList = Array.isArray(adminData) ? adminData : adminData?.data || [];
const userMenuList = Array.isArray(userData) ? userData : userData?.data || [];
setAdminMenus(adminMenuList);
setUserMenus(userMenuList);
} catch (error) {
console.error("메뉴 목록 로드 실패:", error);
setAdminMenus([]);
setUserMenus([]);
} finally {
setLoadingMenus(false);
}
};
const flattenMenus = (
menus: MenuItem[],
prefix = "",
parentPath = "",
): { id: string; label: string; uniqueKey: string }[] => {
if (!Array.isArray(menus)) {
return [];
}
const result: { id: string; label: string; uniqueKey: string }[] = [];
menus.forEach((menu, index) => {
// 메뉴 ID 추출 (objid 또는 id)
const menuId = (menu as any).objid || menu.id || "";
const uniqueKey = `${parentPath}-${menuId}-${index}`;
// 메뉴 이름 추출
const menuName =
menu.name ||
(menu as any).menu_name_kor ||
(menu as any).MENU_NAME_KOR ||
(menu as any).menuNameKor ||
(menu as any).title ||
"이름없음";
// lev 필드로 레벨 확인 (lev > 1인 메뉴만 추가)
const menuLevel = (menu as any).lev || 0;
if (menuLevel > 1) {
result.push({
id: menuId,
label: prefix + menuName,
uniqueKey,
});
}
// 하위 메뉴가 있으면 재귀 호출
if (menu.children && Array.isArray(menu.children) && menu.children.length > 0) {
result.push(...flattenMenus(menu.children, prefix + menuName + " > ", uniqueKey));
}
});
return result;
};
const handleSave = async () => {
if (!title.trim()) {
alert("대시보드 이름을 입력해주세요.");
return;
}
if (assignToMenu && !selectedMenuId) {
alert("메뉴를 선택해주세요.");
return;
}
setLoading(true);
try {
await onSave({
title: title.trim(),
description: description.trim(),
assignToMenu,
menuType: assignToMenu ? menuType : undefined,
menuId: assignToMenu ? selectedMenuId : undefined,
});
onClose();
} catch (error) {
console.error("저장 실패:", error);
} finally {
setLoading(false);
}
};
const currentMenus = menuType === "admin" ? adminMenus : userMenus;
const flatMenus = flattenMenus(currentMenus);
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
<DialogHeader>
<DialogTitle>{isEditing ? "대시보드 수정" : "대시보드 저장"}</DialogTitle>
</DialogHeader>
<div className="space-y-6 py-4">
{/* 대시보드 이름 */}
<div className="space-y-2">
<Label htmlFor="title">
대시보드 이름 <span className="text-red-500">*</span>
</Label>
<Input
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="예: 생산 현황 대시보드"
className="w-full"
/>
</div>
{/* 대시보드 설명 */}
<div className="space-y-2">
<Label htmlFor="description">설명</Label>
<Textarea
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="대시보드에 대한 간단한 설명을 입력하세요"
rows={3}
className="w-full resize-none"
/>
</div>
{/* 구분선 */}
<div className="border-t pt-4">
<h3 className="mb-3 text-sm font-semibold">메뉴 할당</h3>
{/* 메뉴 할당 여부 */}
<div className="space-y-4">
<RadioGroup
value={assignToMenu ? "yes" : "no"}
onValueChange={(value) => setAssignToMenu(value === "yes")}
>
<div className="flex items-center space-x-2">
<RadioGroupItem value="no" id="assign-no" />
<Label htmlFor="assign-no" className="cursor-pointer">
메뉴에 할당하지 않음
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="yes" id="assign-yes" />
<Label htmlFor="assign-yes" className="cursor-pointer">
메뉴에 할당
</Label>
</div>
</RadioGroup>
{/* 메뉴 할당 옵션 */}
{assignToMenu && (
<div className="ml-6 space-y-4 border-l-2 border-gray-200 pl-4">
{/* 메뉴 타입 선택 */}
<div className="space-y-2">
<Label>메뉴 타입</Label>
<RadioGroup value={menuType} onValueChange={(value) => setMenuType(value as "admin" | "user")}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="admin" id="menu-admin" />
<Label htmlFor="menu-admin" className="cursor-pointer">
관리자 메뉴
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="user" id="menu-user" />
<Label htmlFor="menu-user" className="cursor-pointer">
사용자 메뉴
</Label>
</div>
</RadioGroup>
</div>
{/* 메뉴 선택 */}
<div className="space-y-2">
<Label>메뉴 선택</Label>
{loadingMenus ? (
<div className="flex items-center justify-center py-4">
<Loader2 className="h-5 w-5 animate-spin text-gray-400" />
<span className="ml-2 text-sm text-gray-500">메뉴 목록 로딩 중...</span>
</div>
) : (
<div className="space-y-2">
<Select value={selectedMenuId} onValueChange={setSelectedMenuId}>
<SelectTrigger className="w-full">
<SelectValue placeholder="메뉴를 선택하세요" />
</SelectTrigger>
<SelectContent className="z-[99999]">
<SelectGroup>
<SelectLabel>{menuType === "admin" ? "관리자 메뉴" : "사용자 메뉴"}</SelectLabel>
{flatMenus.length === 0 ? (
<div className="px-2 py-3 text-sm text-gray-500">사용 가능한 메뉴가 없습니다.</div>
) : (
flatMenus.map((menu) => (
<SelectItem key={menu.uniqueKey} value={menu.id}>
{menu.label}
</SelectItem>
))
)}
</SelectGroup>
</SelectContent>
</Select>
{selectedMenuId && (
<div className="rounded-md bg-gray-50 p-2 text-sm text-gray-700">
선택된 메뉴:{" "}
<span className="font-medium">{flatMenus.find((m) => m.id === selectedMenuId)?.label}</span>
</div>
)}
</div>
)}
{assignToMenu && selectedMenuId && (
<p className="mt-1 text-xs text-gray-500">
선택한 메뉴의 URL이 이 대시보드로 자동 설정됩니다.
{menuType === "admin" && " (관리자 모드 파라미터 포함)"}
</p>
)}
</div>
</div>
)}
</div>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={onClose} disabled={loading}>
취소
</Button>
<Button onClick={handleSave} disabled={loading}>
{loading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
저장 중...
</>
) : (
<>
<Save className="mr-2 h-4 w-4" />
저장
</>
)}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

13
frontend/components/admin/dashboard/DashboardTopMenu.tsx
View File

@@ -11,7 +11,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Save, Trash2, Eye, Palette } from "lucide-react";
import { Save, Trash2, Palette } from "lucide-react";
import { ElementType, ElementSubtype } from "./types";
import { ResolutionSelector, Resolution } from "./ResolutionSelector";
import { Input } from "@/components/ui/input";
@@ -20,7 +20,6 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
interface DashboardTopMenuProps {
onSaveLayout: () => void;
onClearCanvas: () => void;
onViewDashboard?: () => void;
dashboardTitle?: string;
onAddElement?: (type: ElementType, subtype: ElementSubtype) => void;
resolution?: Resolution;
@@ -33,12 +32,11 @@ interface DashboardTopMenuProps {
/**
* 대시보드 편집 화면 상단 메뉴바
* - 차트/위젯 선택 (셀렉트박스)
* - 저장/초기화/보기 버튼
* - 저장/초기화 버튼
*/
export function DashboardTopMenu({
onSaveLayout,
onClearCanvas,
onViewDashboard,
dashboardTitle,
onAddElement,
resolution = "fhd",
@@ -187,6 +185,7 @@ export function DashboardTopMenu({
<SelectItem value="map-summary">커스텀 지도 카드</SelectItem>
{/* <SelectItem value="list-summary">커스텀 목록 카드</SelectItem> */}
<SelectItem value="status-summary">커스텀 상태 카드</SelectItem>
<SelectItem value="warehouse-3d">창고 현황 (3D)</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>일반 위젯</SelectLabel>
@@ -214,12 +213,6 @@ export function DashboardTopMenu({
{/* 우측: 액션 버튼 */}
<div className="flex items-center gap-2">
{onViewDashboard && (
<Button variant="outline" size="sm" onClick={onViewDashboard} className="gap-2">
<Eye className="h-4 w-4" />
미리보기
</Button>
)}
<Button variant="outline" size="sm" onClick={onClearCanvas} className="gap-2 text-red-600 hover:text-red-700">
<Trash2 className="h-4 w-4" />
초기화

13
frontend/components/admin/dashboard/ElementConfigModal.tsx
View File

@@ -155,7 +155,8 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
// customTitle이 변경되었는지 확인
const isTitleChanged = customTitle.trim() !== (element.customTitle || "");
const canSave = isTitleChanged || // 제목만 변경해도 저장 가능
const canSave =
isTitleChanged || // 제목만 변경해도 저장 가능
(isSimpleWidget
? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능
currentStep === 2 && queryResult && queryResult.rows.length > 0
@@ -203,18 +204,16 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
<X className="h-5 w-5" />
</Button>
</div>
{/* 커스텀 제목 입력 */}
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700 mb-1">
위젯 제목 (선택사항)
</label>
<label className="mb-1 block text-sm font-medium text-gray-700">위젯 제목 (선택사항)</label>
<input
type="text"
value={customTitle}
onChange={(e) => setCustomTitle(e.target.value)}
placeholder={`예: 정비 일정 목록, 창고 위치 현황 등 (비워두면 자동 생성)`}
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
placeholder={"예: 정비 일정 목록, 창고 위치 현황 등 (비워두면 자동 생성)"}
className="focus:border-primary focus:ring-primary w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:outline-none"
/>
<p className="mt-1 text-xs text-gray-500">
💡 비워두면 테이블명으로 자동 생성됩니다 (예: "maintenance_schedules 목록")

210
frontend/components/admin/dashboard/MenuAssignmentModal.tsx Normal file
View File

@@ -0,0 +1,210 @@
"use client";
import React, { useState, useEffect } from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "sonner";
import { menuApi, MenuItem } from "@/lib/api/menu";
import { Loader2 } from "lucide-react";
interface MenuAssignmentModalProps {
isOpen: boolean;
onClose: () => void;
onConfirm: (assignToMenu: boolean, menuId?: string, menuType?: "0" | "1") => void;
dashboardId: string;
dashboardTitle: string;
}
export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
isOpen,
onClose,
onConfirm,
dashboardId,
dashboardTitle,
}) => {
const [assignToMenu, setAssignToMenu] = useState<boolean>(false);
const [selectedMenuId, setSelectedMenuId] = useState<string>("");
const [selectedMenuType, setSelectedMenuType] = useState<"0" | "1">("0");
const [adminMenus, setAdminMenus] = useState<MenuItem[]>([]);
const [userMenus, setUserMenus] = useState<MenuItem[]>([]);
const [loading, setLoading] = useState(false);
// 메뉴 목록 로드
useEffect(() => {
if (isOpen && assignToMenu) {
loadMenus();
}
}, [isOpen, assignToMenu]);
const loadMenus = async () => {
try {
setLoading(true);
const [adminResponse, userResponse] = await Promise.all([
menuApi.getAdminMenus(), // 관리자 메뉴
menuApi.getUserMenus(), // 사용자 메뉴
]);
if (adminResponse.success) {
setAdminMenus(adminResponse.data || []);
}
if (userResponse.success) {
setUserMenus(userResponse.data || []);
}
} catch (error) {
console.error("메뉴 목록 로드 실패:", error);
toast.error("메뉴 목록을 불러오는데 실패했습니다.");
} finally {
setLoading(false);
}
};
// 메뉴 트리를 평탄화하여 Select 옵션으로 변환
const flattenMenus = (menus: MenuItem[], level: number = 0): Array<{ id: string; name: string; level: number }> => {
const result: Array<{ id: string; name: string; level: number }> = [];
menus.forEach((menu) => {
const menuId = menu.objid || menu.OBJID || "";
const menuName = menu.menu_name_kor || menu.MENU_NAME_KOR || "";
const parentId = menu.parent_obj_id || menu.PARENT_OBJ_ID || "0";
// 메뉴 이름이 있고, 최상위가 아닌 경우에만 추가
if (menuName && parentId !== "0") {
result.push({
id: menuId,
name: " ".repeat(level) + menuName,
level,
});
// 하위 메뉴가 있으면 재귀 호출
const children = menus.filter((m) => (m.parent_obj_id || m.PARENT_OBJ_ID) === menuId);
if (children.length > 0) {
result.push(...flattenMenus(children, level + 1));
}
}
});
return result;
};
const currentMenus = selectedMenuType === "0" ? adminMenus : userMenus;
const flatMenus = flattenMenus(currentMenus);
const handleConfirm = () => {
if (assignToMenu && !selectedMenuId) {
toast.error("메뉴를 선택해주세요.");
return;
}
onConfirm(assignToMenu, selectedMenuId, selectedMenuType);
};
const handleClose = () => {
setAssignToMenu(false);
setSelectedMenuId("");
setSelectedMenuType("0");
onClose();
};
return (
<Dialog open={isOpen} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>대시보드 저장 완료</DialogTitle>
<DialogDescription>'{dashboardTitle}' 대시보드가 저장되었습니다.</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-3">
<Label>이 대시보드를 메뉴에 할당하시겠습니까?</Label>
<RadioGroup
value={assignToMenu ? "yes" : "no"}
onValueChange={(value) => setAssignToMenu(value === "yes")}
className="flex space-x-4"
>
<div className="flex items-center space-x-2">
<RadioGroupItem value="yes" id="yes" />
<Label htmlFor="yes" className="cursor-pointer font-normal">
예, 메뉴에 할당
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="no" id="no" />
<Label htmlFor="no" className="cursor-pointer font-normal">
아니오, 나중에
</Label>
</div>
</RadioGroup>
</div>
{assignToMenu && (
<>
<div className="space-y-2">
<Label>메뉴 타입</Label>
<RadioGroup
value={selectedMenuType}
onValueChange={(value) => {
setSelectedMenuType(value as "0" | "1");
setSelectedMenuId(""); // 메뉴 타입 변경 시 선택 초기화
}}
className="flex space-x-4"
>
<div className="flex items-center space-x-2">
<RadioGroupItem value="0" id="admin" />
<Label htmlFor="admin" className="cursor-pointer font-normal">
관리자 메뉴
</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="1" id="user" />
<Label htmlFor="user" className="cursor-pointer font-normal">
사용자 메뉴
</Label>
</div>
</RadioGroup>
</div>
<div className="space-y-2">
<Label>할당할 메뉴 선택</Label>
{loading ? (
<div className="flex items-center justify-center py-4">
<Loader2 className="h-6 w-6 animate-spin text-gray-400" />
</div>
) : (
<Select value={selectedMenuId} onValueChange={setSelectedMenuId}>
<SelectTrigger>
<SelectValue placeholder="메뉴를 선택하세요" />
</SelectTrigger>
<SelectContent className="max-h-[300px]">
{flatMenus.map((menu) => (
<SelectItem key={menu.id} value={menu.id}>
{menu.name}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
</>
)}
</div>
<DialogFooter>
<Button variant="outline" onClick={handleClose}>
취소
</Button>
<Button onClick={handleConfirm}>{assignToMenu ? "메뉴에 할당하고 완료" : "완료"}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
};

5
frontend/components/admin/dashboard/types.ts
View File

@@ -35,7 +35,8 @@ export type ElementSubtype =
| "booking-alert"
| "maintenance"
| "document"
| "list"; // 위젯 타입
| "list"
| "warehouse-3d"; // 위젯 타입
export interface Position {
x: number;
@@ -140,7 +141,7 @@ export interface ChartConfig {
// 애니메이션
enableAnimation?: boolean; // 애니메이션 활성화
// 상태 필터링 (커스텀 상태 카드용)
statusFilter?: string[]; // 표시할 상태 목록 (예: ["driving", "parked"])
animationDuration?: number; // 애니메이션 시간 (ms)

418
frontend/components/admin/dashboard/widgets/Warehouse3DWidget.tsx Normal file
View File

@@ -0,0 +1,418 @@
"use client";
import React, { useRef, useState, useEffect, Suspense } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls, Text, Box, Html } from "@react-three/drei";
import * as THREE from "three";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Loader2, Maximize2, Info } from "lucide-react";
interface WarehouseData {
id: string;
name: string;
position_x: number;
position_y: number;
position_z: number;
size_x: number;
size_y: number;
size_z: number;
color: string;
capacity: number;
current_usage: number;
status: string;
description?: string;
}
interface MaterialData {
id: string;
warehouse_id: string;
name: string;
material_code: string;
quantity: number;
unit: string;
position_x: number;
position_y: number;
position_z: number;
size_x: number;
size_y: number;
size_z: number;
color: string;
status: string;
}
interface Warehouse3DWidgetProps {
element?: any;
}
// 창고 3D 박스 컴포넌트
function WarehouseBox({
warehouse,
onClick,
isSelected,
}: {
warehouse: WarehouseData;
onClick: () => void;
isSelected: boolean;
}) {
const meshRef = useRef<THREE.Mesh>(null);
const [hovered, setHovered] = useState(false);
useFrame(() => {
if (meshRef.current) {
if (isSelected) {
meshRef.current.scale.lerp(new THREE.Vector3(1.05, 1.05, 1.05), 0.1);
} else if (hovered) {
meshRef.current.scale.lerp(new THREE.Vector3(1.02, 1.02, 1.02), 0.1);
} else {
meshRef.current.scale.lerp(new THREE.Vector3(1, 1, 1), 0.1);
}
}
});
const usagePercentage = (warehouse.current_usage / warehouse.capacity) * 100;
return (
<group position={[warehouse.position_x, warehouse.position_y + warehouse.size_y / 2, warehouse.position_z]}>
<mesh
ref={meshRef}
onClick={(e) => {
e.stopPropagation();
onClick();
}}
onPointerOver={() => setHovered(true)}
onPointerOut={() => setHovered(false)}
>
<boxGeometry args={[warehouse.size_x, warehouse.size_y, warehouse.size_z]} />
<meshStandardMaterial color={warehouse.color} transparent opacity={0.3} wireframe={false} />
</mesh>
{/* 창고 테두리 */}
<lineSegments>
<edgesGeometry args={[new THREE.BoxGeometry(warehouse.size_x, warehouse.size_y, warehouse.size_z)]} />
<lineBasicMaterial color={isSelected ? "#FFD700" : hovered ? "#FFFFFF" : warehouse.color} linewidth={2} />
</lineSegments>
{/* 창고 이름 라벨 */}
<Text position={[0, warehouse.size_y / 2 + 1, 0]} fontSize={1} color="white" anchorX="center" anchorY="middle">
{warehouse.name}
</Text>
{/* 사용률 표시 */}
<Html position={[0, warehouse.size_y / 2 + 2, 0]} center>
<div className="pointer-events-none rounded bg-black/80 px-2 py-1 text-xs text-white">
{usagePercentage.toFixed(0)}% 사용중
</div>
</Html>
</group>
);
}
// 자재 3D 박스 컴포넌트
function MaterialBox({
material,
onClick,
isSelected,
}: {
material: MaterialData;
onClick: () => void;
isSelected: boolean;
}) {
const meshRef = useRef<THREE.Mesh>(null);
const [hovered, setHovered] = useState(false);
useFrame(() => {
if (meshRef.current && (isSelected || hovered)) {
meshRef.current.rotation.y += 0.01;
}
});
const statusColor =
{
stocked: material.color,
reserved: "#FFA500",
urgent: "#FF0000",
out_of_stock: "#808080",
}[material.status] || material.color;
return (
<group position={[material.position_x, material.position_y + material.size_y / 2, material.position_z]}>
<mesh
ref={meshRef}
onClick={(e) => {
e.stopPropagation();
onClick();
}}
onPointerOver={() => setHovered(true)}
onPointerOut={() => setHovered(false)}
>
<boxGeometry args={[material.size_x, material.size_y, material.size_z]} />
<meshStandardMaterial color={statusColor} metalness={0.5} roughness={0.2} />
</mesh>
{(hovered || isSelected) && (
<Html position={[0, material.size_y / 2 + 0.5, 0]} center>
<div className="pointer-events-none rounded bg-black/90 px-2 py-1 text-xs text-white shadow-lg">
<div className="font-bold">{material.name}</div>
<div className="text-gray-300">
{material.quantity} {material.unit}
</div>
</div>
</Html>
)}
</group>
);
}
// 3D 씬 컴포넌트
function Scene({
warehouses,
materials,
onSelectWarehouse,
onSelectMaterial,
selectedWarehouse,
selectedMaterial,
}: {
warehouses: WarehouseData[];
materials: MaterialData[];
onSelectWarehouse: (warehouse: WarehouseData | null) => void;
onSelectMaterial: (material: MaterialData | null) => void;
selectedWarehouse: WarehouseData | null;
selectedMaterial: MaterialData | null;
}) {
return (
<>
{/* 조명 */}
<ambientLight intensity={0.5} />
<directionalLight position={[10, 10, 5]} intensity={1} castShadow />
<directionalLight position={[-10, 10, -5]} intensity={0.5} />
{/* 바닥 그리드 */}
<gridHelper args={[100, 50, "#444444", "#222222"]} position={[0, 0, 0]} />
{/* 창고들 */}
{warehouses.map((warehouse) => (
<WarehouseBox
key={warehouse.id}
warehouse={warehouse}
onClick={() => {
if (selectedWarehouse?.id === warehouse.id) {
onSelectWarehouse(null);
} else {
onSelectWarehouse(warehouse);
onSelectMaterial(null);
}
}}
isSelected={selectedWarehouse?.id === warehouse.id}
/>
))}
{/* 자재들 */}
{materials.map((material) => (
<MaterialBox
key={material.id}
material={material}
onClick={() => {
if (selectedMaterial?.id === material.id) {
onSelectMaterial(null);
} else {
onSelectMaterial(material);
}
}}
isSelected={selectedMaterial?.id === material.id}
/>
))}
{/* 카메라 컨트롤 */}
<OrbitControls enableDamping dampingFactor={0.05} minDistance={10} maxDistance={100} />
</>
);
}
export function Warehouse3DWidget({ element }: Warehouse3DWidgetProps) {
const [warehouses, setWarehouses] = useState<WarehouseData[]>([]);
const [materials, setMaterials] = useState<MaterialData[]>([]);
const [loading, setLoading] = useState(true);
const [selectedWarehouse, setSelectedWarehouse] = useState<WarehouseData | null>(null);
const [selectedMaterial, setSelectedMaterial] = useState<MaterialData | null>(null);
const [isFullscreen, setIsFullscreen] = useState(false);
useEffect(() => {
loadData();
}, []);
const loadData = async () => {
try {
setLoading(true);
// API 호출 (백엔드 API 구현 필요)
const response = await fetch("/api/warehouse/data");
if (response.ok) {
const data = await response.json();
setWarehouses(data.warehouses || []);
setMaterials(data.materials || []);
} else {
// 임시 더미 데이터 (개발용)
console.log("API 실패, 더미 데이터 사용");
}
} catch (error) {
console.error("창고 데이터 로드 실패:", error);
} finally {
setLoading(false);
}
};
if (loading) {
return (
<Card className="h-full">
<CardContent className="flex h-full items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
</CardContent>
</Card>
);
}
return (
<Card className={`flex h-full flex-col ${isFullscreen ? "fixed inset-0 z-50" : ""}`}>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-lg font-bold">🏭 창고 현황 (3D)</CardTitle>
<div className="flex gap-2">
<Badge variant="outline">
{warehouses.length}개 창고 | {materials.length}개 자재
</Badge>
<button onClick={() => setIsFullscreen(!isFullscreen)} className="text-gray-500 hover:text-gray-700">
<Maximize2 className="h-4 w-4" />
</button>
</div>
</CardHeader>
<CardContent className="flex flex-1 gap-4 p-4">
{/* 3D 뷰 */}
<div className="flex-1 rounded-lg bg-gray-900">
<Canvas camera={{ position: [30, 20, 30], fov: 50 }}>
<Suspense fallback={null}>
<Scene
warehouses={warehouses}
materials={materials}
onSelectWarehouse={setSelectedWarehouse}
onSelectMaterial={setSelectedMaterial}
selectedWarehouse={selectedWarehouse}
selectedMaterial={selectedMaterial}
/>
</Suspense>
</Canvas>
</div>
{/* 정보 패널 */}
<div className="w-80 space-y-4 overflow-y-auto">
{/* 선택된 창고 정보 */}
{selectedWarehouse && (
<Card>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2 text-sm">
<Info className="h-4 w-4" />
창고 정보
</CardTitle>
</CardHeader>
<CardContent className="space-y-2 text-sm">
<div>
<span className="font-semibold">이름:</span> {selectedWarehouse.name}
</div>
<div>
<span className="font-semibold">ID:</span> {selectedWarehouse.id}
</div>
<div>
<span className="font-semibold">용량:</span> {selectedWarehouse.current_usage} /{" "}
{selectedWarehouse.capacity}
</div>
<div>
<span className="font-semibold">사용률:</span>{" "}
{((selectedWarehouse.current_usage / selectedWarehouse.capacity) * 100).toFixed(1)}%
</div>
<div>
<span className="font-semibold">상태:</span>{" "}
<Badge variant={selectedWarehouse.status === "active" ? "default" : "secondary"}>
{selectedWarehouse.status}
</Badge>
</div>
{selectedWarehouse.description && (
<div>
<span className="font-semibold">설명:</span> {selectedWarehouse.description}
</div>
)}
</CardContent>
</Card>
)}
{/* 선택된 자재 정보 */}
{selectedMaterial && (
<Card>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2 text-sm">
<Info className="h-4 w-4" />
자재 정보
</CardTitle>
</CardHeader>
<CardContent className="space-y-2 text-sm">
<div>
<span className="font-semibold">이름:</span> {selectedMaterial.name}
</div>
<div>
<span className="font-semibold">코드:</span> {selectedMaterial.material_code}
</div>
<div>
<span className="font-semibold">수량:</span> {selectedMaterial.quantity} {selectedMaterial.unit}
</div>
<div>
<span className="font-semibold">위치:</span>{" "}
{warehouses.find((w) => w.id === selectedMaterial.warehouse_id)?.name}
</div>
<div>
<span className="font-semibold">상태:</span>{" "}
<Badge
variant={
selectedMaterial.status === "urgent"
? "destructive"
: selectedMaterial.status === "reserved"
? "secondary"
: "default"
}
>
{selectedMaterial.status}
</Badge>
</div>
</CardContent>
</Card>
)}
{/* 창고 목록 */}
{!selectedWarehouse && !selectedMaterial && (
<Card>
<CardHeader className="pb-3">
<CardTitle className="text-sm">창고 목록</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{warehouses.map((warehouse) => {
const warehouseMaterials = materials.filter((m) => m.warehouse_id === warehouse.id);
return (
<button
key={warehouse.id}
onClick={() => setSelectedWarehouse(warehouse)}
className="w-full rounded-lg border p-2 text-left transition-colors hover:bg-gray-50"
>
<div className="flex items-center justify-between">
<span className="font-semibold">{warehouse.name}</span>
<Badge variant="outline">{warehouseMaterials.length}개</Badge>
</div>
<div className="mt-1 text-xs text-gray-500">
{((warehouse.current_usage / warehouse.capacity) * 100).toFixed(0)}% 사용중
</div>
</button>
);
})}
</CardContent>
</Card>
)}
</div>
</CardContent>
</Card>
);
}