feat(pop): PC <-> POP 모드 전환 네비게이션 + POP 기본 화면(Landing) 기능
PC 모드에서 프로필 드롭다운을 통해 POP 화면으로 진입하고, POP에서 PC로 돌아오는 양방향 네비게이션을 구현한다. 기존 메뉴 시스템(menu_info)을 활용하여 POP 화면의 권한 제어와 회사별 관리가 가능하도록 한다. [백엔드: POP 메뉴 조회 API] - AdminService.getPopMenuList: L1 POP 메뉴(menu_desc [POP] 또는 menu_name_kor POP 포함) 하위의 active L2 메뉴 조회 - company_code 필터링 적용 (L1 + L2 모두) - landingMenu 반환: menu_desc에 [POP_LANDING] 태그가 있는 메뉴 - GET /admin/pop-menus 라우트 추가 [프론트: PC -> POP 진입] - AppLayout: handlePopModeClick 함수 추가 - landingMenu 있으면 해당 URL로 바로 이동 - 없으면 childMenus 수에 따라 단일 화면/대시보드/안내 분기 - UserDropdown: onPopModeClick prop + "POP 모드" 메뉴 항목 추가 - 사이드바 하단 + 모바일 헤더 프로필 드롭다운 2곳 모두 적용 [프론트: POP -> PC 복귀] - DashboardHeader: "PC 모드" 버튼 추가 (router.push "/") - POP 개별 화면 page.tsx: 상단 네비게이션 바 추가 (POP 대시보드 / PC 모드 버튼) [프론트: POP 대시보드 동적 메뉴] - PopDashboard: 하드코딩 MENU_ITEMS -> menuApi.getPopMenus() API 조회 - API 실패 시 하드코딩 fallback 유지 [프론트: POP 기본 화면 설정 (MenuFormModal)] - L2 POP 화면 수정 시 "POP 기본 화면으로 설정" 체크박스 추가 - 체크 시 menu_desc에 [POP_LANDING] 태그 자동 추가/제거 - 회사당 1개만 설정 가능 (다른 메뉴에 이미 설정 시 비활성화) [API 타입] - PopMenuItem, PopMenuResponse(landingMenu 포함) 인터페이스 추가 - menuApi.getPopMenus() 함수 추가
This commit is contained in:
SeongHyun Kim
@@ -80,12 +80,19 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
});
|
||||
|
||||
// 화면 할당 관련 상태
|
||||
const [urlType, setUrlType] = useState<"direct" | "screen" | "dashboard">("screen"); // URL 직접 입력 or 화면 할당 or 대시보드 할당 (기본값: 화면 할당)
|
||||
const [urlType, setUrlType] = useState<"direct" | "screen" | "dashboard" | "pop">("screen");
|
||||
const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
|
||||
const [screens, setScreens] = useState<ScreenDefinition[]>([]);
|
||||
const [screenSearchText, setScreenSearchText] = useState("");
|
||||
const [isScreenDropdownOpen, setIsScreenDropdownOpen] = useState(false);
|
||||
|
||||
// POP 화면 할당 관련 상태
|
||||
const [selectedPopScreen, setSelectedPopScreen] = useState<ScreenDefinition | null>(null);
|
||||
const [popScreenSearchText, setPopScreenSearchText] = useState("");
|
||||
const [isPopScreenDropdownOpen, setIsPopScreenDropdownOpen] = useState(false);
|
||||
const [isPopLanding, setIsPopLanding] = useState(false);
|
||||
const [hasOtherPopLanding, setHasOtherPopLanding] = useState(false);
|
||||
|
||||
// 대시보드 할당 관련 상태
|
||||
const [selectedDashboard, setSelectedDashboard] = useState<any | null>(null);
|
||||
const [dashboards, setDashboards] = useState<any[]>([]);
|
||||
@@ -194,8 +201,27 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
toast.success(`대시보드가 선택되었습니다: ${dashboard.title}`);
|
||||
};
|
||||
|
||||
// POP 화면 선택 시 URL 자동 설정
|
||||
const handlePopScreenSelect = (screen: ScreenDefinition) => {
|
||||
const actualScreenId = screen.screenId || screen.id;
|
||||
if (!actualScreenId) {
|
||||
toast.error("화면 ID를 찾을 수 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedPopScreen(screen);
|
||||
setIsPopScreenDropdownOpen(false);
|
||||
|
||||
const popUrl = `/pop/screens/${actualScreenId}`;
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
menuUrl: popUrl,
|
||||
}));
|
||||
};
|
||||
|
||||
// URL 타입 변경 시 처리
|
||||
const handleUrlTypeChange = (type: "direct" | "screen" | "dashboard") => {
|
||||
const handleUrlTypeChange = (type: "direct" | "screen" | "dashboard" | "pop") => {
|
||||
// console.log("🔄 URL 타입 변경:", {
|
||||
// from: urlType,
|
||||
// to: type,
|
||||
@@ -206,36 +232,53 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
setUrlType(type);
|
||||
|
||||
if (type === "direct") {
|
||||
// 직접 입력 모드로 변경 시 선택된 화면 초기화
|
||||
setSelectedScreen(null);
|
||||
// URL 필드와 screenCode 초기화 (사용자가 직접 입력할 수 있도록)
|
||||
setSelectedPopScreen(null);
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
menuUrl: "",
|
||||
screenCode: undefined, // 화면 코드도 함께 초기화
|
||||
screenCode: undefined,
|
||||
}));
|
||||
} else {
|
||||
// 화면 할당 모드로 변경 시
|
||||
// 기존에 선택된 화면이 있고, 해당 화면의 URL이 있다면 유지
|
||||
} else if (type === "pop") {
|
||||
setSelectedScreen(null);
|
||||
if (selectedPopScreen) {
|
||||
const actualScreenId = selectedPopScreen.screenId || selectedPopScreen.id;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
menuUrl: `/pop/screens/${actualScreenId}`,
|
||||
}));
|
||||
} else {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
menuUrl: "",
|
||||
}));
|
||||
}
|
||||
} else if (type === "screen") {
|
||||
setSelectedPopScreen(null);
|
||||
if (selectedScreen) {
|
||||
console.log("📋 기존 선택된 화면 유지:", selectedScreen.screenName);
|
||||
// 현재 선택된 화면으로 URL 재생성
|
||||
const actualScreenId = selectedScreen.screenId || selectedScreen.id;
|
||||
let screenUrl = `/screens/${actualScreenId}`;
|
||||
|
||||
// 관리자 메뉴인 경우 mode=admin 파라미터 추가
|
||||
const isAdminMenu = menuType === "0" || menuType === "admin" || formData.menuType === "0";
|
||||
if (isAdminMenu) {
|
||||
screenUrl += "?mode=admin";
|
||||
}
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
menuUrl: screenUrl,
|
||||
screenCode: selectedScreen.screenCode, // 화면 코드도 함께 유지
|
||||
screenCode: selectedScreen.screenCode,
|
||||
}));
|
||||
} else {
|
||||
// 선택된 화면이 없으면 URL과 screenCode 초기화
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
menuUrl: "",
|
||||
screenCode: undefined,
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
// dashboard
|
||||
setSelectedScreen(null);
|
||||
setSelectedPopScreen(null);
|
||||
if (!selectedDashboard) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
menuUrl: "",
|
||||
@@ -294,8 +337,8 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
|
||||
const menuUrl = menu.menu_url || menu.MENU_URL || "";
|
||||
|
||||
// URL이 "/screens/"로 시작하면 화면 할당으로 판단 (실제 라우팅 패턴에 맞게 수정)
|
||||
const isScreenUrl = menuUrl.startsWith("/screens/");
|
||||
const isPopScreenUrl = menuUrl.startsWith("/pop/screens/");
|
||||
const isScreenUrl = !isPopScreenUrl && menuUrl.startsWith("/screens/");
|
||||
|
||||
setFormData({
|
||||
objid: menu.objid || menu.OBJID,
|
||||
@@ -356,10 +399,31 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
} else if (isPopScreenUrl) {
|
||||
setUrlType("pop");
|
||||
setSelectedScreen(null);
|
||||
|
||||
// [POP_LANDING] 태그 감지
|
||||
const menuDesc = menu.menu_desc || menu.MENU_DESC || "";
|
||||
setIsPopLanding(menuDesc.includes("[POP_LANDING]"));
|
||||
|
||||
const popScreenId = menuUrl.match(/\/pop\/screens\/(\d+)/)?.[1];
|
||||
if (popScreenId) {
|
||||
const setPopScreenFromId = () => {
|
||||
const screen = screens.find((s) => s.screenId.toString() === popScreenId || s.id?.toString() === popScreenId);
|
||||
if (screen) {
|
||||
setSelectedPopScreen(screen);
|
||||
}
|
||||
};
|
||||
if (screens.length > 0) {
|
||||
setPopScreenFromId();
|
||||
} else {
|
||||
setTimeout(setPopScreenFromId, 500);
|
||||
}
|
||||
}
|
||||
} else if (menuUrl.startsWith("/dashboard/")) {
|
||||
setUrlType("dashboard");
|
||||
setSelectedScreen(null);
|
||||
// 대시보드 ID 추출 및 선택은 useEffect에서 처리됨
|
||||
} else {
|
||||
setUrlType("direct");
|
||||
setSelectedScreen(null);
|
||||
@@ -404,6 +468,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
} else {
|
||||
console.log("메뉴 등록 모드 - parentId:", parentId, "menuType:", menuType);
|
||||
setIsEdit(false);
|
||||
setIsPopLanding(false);
|
||||
|
||||
// 메뉴 타입 변환 (0 -> 0, 1 -> 1, admin -> 0, user -> 1)
|
||||
let defaultMenuType = "1"; // 기본값은 사용자
|
||||
@@ -420,9 +485,9 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
menuDesc: "",
|
||||
seq: 1,
|
||||
menuType: defaultMenuType,
|
||||
status: "ACTIVE", // 기본값은 활성화
|
||||
companyCode: parentCompanyCode || "none", // 상위 메뉴의 회사 코드를 기본값으로 설정
|
||||
langKey: "", // 다국어 키 초기화
|
||||
status: "ACTIVE",
|
||||
companyCode: parentCompanyCode || "none",
|
||||
langKey: "",
|
||||
});
|
||||
|
||||
// console.log("메뉴 등록 기본값 설정:", {
|
||||
@@ -465,6 +530,31 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
}
|
||||
}, [isOpen, formData.companyCode]);
|
||||
|
||||
// POP 기본 화면 중복 체크: 같은 부모 하위에 이미 [POP_LANDING]이 있는 다른 메뉴가 있는지 확인
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const checkOtherPopLanding = async () => {
|
||||
try {
|
||||
const res = await menuApi.getPopMenus();
|
||||
if (res.success && res.data?.landingMenu) {
|
||||
const landingObjId = res.data.landingMenu.objid?.toString();
|
||||
const currentObjId = formData.objid?.toString();
|
||||
// 현재 수정 중인 메뉴가 아닌 다른 메뉴에 [POP_LANDING]이 있으면 중복
|
||||
setHasOtherPopLanding(!!landingObjId && landingObjId !== currentObjId);
|
||||
} else {
|
||||
setHasOtherPopLanding(false);
|
||||
}
|
||||
} catch {
|
||||
setHasOtherPopLanding(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (urlType === "pop") {
|
||||
checkOtherPopLanding();
|
||||
}
|
||||
}, [isOpen, urlType, formData.objid]);
|
||||
|
||||
// 화면 목록 및 대시보드 목록 로드
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
@@ -512,6 +602,22 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
}
|
||||
}, [dashboards, isEdit, formData.menuUrl, urlType, selectedDashboard]);
|
||||
|
||||
// POP 화면 목록 로드 완료 후 기존 할당 설정
|
||||
useEffect(() => {
|
||||
if (screens.length > 0 && isEdit && formData.menuUrl && urlType === "pop") {
|
||||
const menuUrl = formData.menuUrl;
|
||||
if (menuUrl.startsWith("/pop/screens/")) {
|
||||
const popScreenId = menuUrl.match(/\/pop\/screens\/(\d+)/)?.[1];
|
||||
if (popScreenId && !selectedPopScreen) {
|
||||
const screen = screens.find((s) => s.screenId.toString() === popScreenId || s.id?.toString() === popScreenId);
|
||||
if (screen) {
|
||||
setSelectedPopScreen(screen);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [screens, isEdit, formData.menuUrl, urlType, selectedPopScreen]);
|
||||
|
||||
// 드롭다운 외부 클릭 시 닫기
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
@@ -528,16 +634,20 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
setIsDashboardDropdownOpen(false);
|
||||
setDashboardSearchText("");
|
||||
}
|
||||
if (!target.closest(".pop-screen-dropdown")) {
|
||||
setIsPopScreenDropdownOpen(false);
|
||||
setPopScreenSearchText("");
|
||||
}
|
||||
};
|
||||
|
||||
if (isLangKeyDropdownOpen || isScreenDropdownOpen || isDashboardDropdownOpen) {
|
||||
if (isLangKeyDropdownOpen || isScreenDropdownOpen || isDashboardDropdownOpen || isPopScreenDropdownOpen) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, [isLangKeyDropdownOpen, isScreenDropdownOpen]);
|
||||
}, [isLangKeyDropdownOpen, isScreenDropdownOpen, isDashboardDropdownOpen, isPopScreenDropdownOpen]);
|
||||
|
||||
const loadCompanies = async () => {
|
||||
try {
|
||||
@@ -585,10 +695,17 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// POP 기본 화면 태그 처리
|
||||
let finalMenuDesc = formData.menuDesc;
|
||||
if (urlType === "pop") {
|
||||
const descWithoutTag = finalMenuDesc.replace(/\[POP_LANDING\]/g, "").trim();
|
||||
finalMenuDesc = isPopLanding ? `${descWithoutTag} [POP_LANDING]`.trim() : descWithoutTag;
|
||||
}
|
||||
|
||||
// 백엔드에 전송할 데이터 변환
|
||||
const submitData = {
|
||||
...formData,
|
||||
// 상태를 소문자로 변환 (백엔드에서 소문자 기대)
|
||||
menuDesc: finalMenuDesc,
|
||||
status: formData.status.toLowerCase(),
|
||||
};
|
||||
|
||||
@@ -843,7 +960,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
<Label htmlFor="menuUrl">{getText(MENU_MANAGEMENT_KEYS.FORM_MENU_URL)}</Label>
|
||||
|
||||
{/* URL 타입 선택 */}
|
||||
<RadioGroup value={urlType} onValueChange={handleUrlTypeChange} className="mb-3 flex space-x-6">
|
||||
<RadioGroup value={urlType} onValueChange={handleUrlTypeChange} className="mb-3 flex flex-wrap gap-x-6 gap-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="screen" id="screen" />
|
||||
<Label htmlFor="screen" className="cursor-pointer">
|
||||
@@ -856,6 +973,12 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
대시보드 할당
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="pop" id="pop" />
|
||||
<Label htmlFor="pop" className="cursor-pointer">
|
||||
POP 화면 할당
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="direct" id="direct" />
|
||||
<Label htmlFor="direct" className="cursor-pointer">
|
||||
@@ -1021,6 +1144,106 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* POP 화면 할당 */}
|
||||
{urlType === "pop" && (
|
||||
<div className="space-y-2">
|
||||
<div className="relative">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setIsPopScreenDropdownOpen(!isPopScreenDropdownOpen)}
|
||||
className="w-full justify-between"
|
||||
>
|
||||
<span className="text-left">
|
||||
{selectedPopScreen ? selectedPopScreen.screenName : "POP 화면을 선택하세요"}
|
||||
</span>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{isPopScreenDropdownOpen && (
|
||||
<div className="pop-screen-dropdown absolute top-full right-0 left-0 z-50 mt-1 max-h-60 overflow-y-auto rounded-md border bg-white shadow-lg">
|
||||
<div className="sticky top-0 border-b bg-white p-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
||||
<Input
|
||||
placeholder="POP 화면 검색..."
|
||||
value={popScreenSearchText}
|
||||
onChange={(e) => setPopScreenSearchText(e.target.value)}
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{screens
|
||||
.filter(
|
||||
(screen) =>
|
||||
screen.screenName.toLowerCase().includes(popScreenSearchText.toLowerCase()) ||
|
||||
screen.screenCode.toLowerCase().includes(popScreenSearchText.toLowerCase()),
|
||||
)
|
||||
.map((screen, index) => (
|
||||
<div
|
||||
key={`pop-screen-${screen.screenId || screen.id || index}-${screen.screenCode || index}`}
|
||||
onClick={() => handlePopScreenSelect(screen)}
|
||||
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">{screen.screenName}</div>
|
||||
<div className="text-xs text-gray-500">{screen.screenCode}</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">ID: {screen.screenId || screen.id || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{screens.filter(
|
||||
(screen) =>
|
||||
screen.screenName.toLowerCase().includes(popScreenSearchText.toLowerCase()) ||
|
||||
screen.screenCode.toLowerCase().includes(popScreenSearchText.toLowerCase()),
|
||||
).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedPopScreen && (
|
||||
<div className="bg-accent rounded-md border p-3">
|
||||
<div className="text-sm font-medium text-blue-900">{selectedPopScreen.screenName}</div>
|
||||
<div className="text-primary text-xs">코드: {selectedPopScreen.screenCode}</div>
|
||||
<div className="text-primary text-xs">생성된 URL: {formData.menuUrl}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* POP 기본 화면 설정 */}
|
||||
<div className="flex items-center space-x-2 rounded-md border p-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="popLanding"
|
||||
checked={isPopLanding}
|
||||
disabled={!isPopLanding && hasOtherPopLanding}
|
||||
onChange={(e) => setIsPopLanding(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-gray-300 accent-primary disabled:cursor-not-allowed disabled:opacity-50"
|
||||
/>
|
||||
<label
|
||||
htmlFor="popLanding"
|
||||
className={`text-sm font-medium ${!isPopLanding && hasOtherPopLanding ? "text-muted-foreground" : ""}`}
|
||||
>
|
||||
POP 기본 화면으로 설정
|
||||
</label>
|
||||
{!isPopLanding && hasOtherPopLanding && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
(이미 다른 메뉴가 기본 화면으로 설정되어 있습니다)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isPopLanding && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
프로필에서 POP 모드 전환 시 이 화면으로 바로 이동합니다.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* URL 직접 입력 */}
|
||||
{urlType === "direct" && (
|
||||
<Input
|
||||
|
||||
Reference in New Issue
Block a user