feat(login): POP 모드 토글 추가 - 로그인 시 POP/PC 진입 선택

로그인 폼에 POP 모드 Switch 토글을 추가하여 현장 작업자가 로그인 시점에서 POP 화면으로 직접 진입할 수 있도록 한다. 토글 상태는 localStorage에 저장되어 다음 로그인 시 유지된다. [백엔드] - 로그인 응답에 popLandingPath 추가 (getPopMenuList 재사용) - AdminService/paramMap 변수 스코프 버그 수정 (try 블록 내부 선언 -> 외부로 이동) [프론트엔드] - useLogin: isPopMode 상태 + localStorage 연동 + POP 분기 라우팅 - LoginForm: POP 모드 Switch 토글 UI (Monitor 아이콘) - POP 미설정 시 에러 메시지 표시 후 로그인 중단 - LoginResponse 타입에 popLandingPath 필드 추가
2026-03-09 15:15:15 +09:00 · 2026-03-09 15:15:15 +09:00 · 48e9ece4f7
parent 4176fed07f
commit 48e9ece4f7
5 changed files with 93 additions and 29 deletions
--- a/backend-node/src/controllers/authController.ts
+++ b/backend-node/src/controllers/authController.ts
@ -50,29 +50,24 @@ export class AuthController {

        logger.debug(`로그인 사용자 정보: ${userInfo.userId} (${userInfo.companyCode})`);

+        // 메뉴 조회를 위한 공통 파라미터
+        const { AdminService } = await import("../services/adminService");
+        const paramMap = {
+          userId: loginResult.userInfo.userId,
+          userCompanyCode: loginResult.userInfo.companyCode || "ILSHIN",
+          userType: loginResult.userInfo.userType,
+          userLang: "ko",
+        };
+
        // 사용자의 첫 번째 접근 가능한 메뉴 조회
        let firstMenuPath: string | null = null;
        try {
-          const { AdminService } = await import("../services/adminService");
-          const paramMap = {
-            userId: loginResult.userInfo.userId,
-            userCompanyCode: loginResult.userInfo.companyCode || "ILSHIN",
-            userType: loginResult.userInfo.userType,
-            userLang: "ko",
-          };
-
          const menuList = await AdminService.getUserMenuList(paramMap);
          logger.debug(`로그인 후 메뉴 조회: 총 ${menuList.length}개 메뉴`);

-          // 접근 가능한 첫 번째 메뉴 찾기
-          // 조건:
-          // 1. LEV (레벨)이 2 이상 (최상위 폴더 제외)
-          // 2. MENU_URL이 있고 비어있지 않음
-          // 3. 이미 PATH, SEQ로 정렬되어 있으므로 첫 번째로 찾은 것이 첫 번째 메뉴
          const firstMenu = menuList.find((menu: any) => {
            const level = menu.lev || menu.level;
            const url = menu.menu_url || menu.url;
-
            return level >= 2 && url && url.trim() !== "" && url !== "#";
          });

@ -86,13 +81,30 @@ export class AuthController {
          logger.warn("메뉴 조회 중 오류 발생 (무시하고 계속):", menuError);
        }

+        // POP 랜딩 경로 조회
+        let popLandingPath: string | null = null;
+        try {
+          const popResult = await AdminService.getPopMenuList(paramMap);
+          if (popResult.landingMenu?.menu_url) {
+            popLandingPath = popResult.landingMenu.menu_url;
+          } else if (popResult.childMenus.length === 1) {
+            popLandingPath = popResult.childMenus[0].menu_url;
+          } else if (popResult.childMenus.length > 1) {
+            popLandingPath = "/pop";
+          }
+          logger.debug(`POP 랜딩 경로: ${popLandingPath}`);
+        } catch (popError) {
+          logger.warn("POP 메뉴 조회 중 오류 (무시):", popError);
+        }
+
        res.status(200).json({
          success: true,
          message: "로그인 성공",
          data: {
            userInfo,
            token: loginResult.token,
-            firstMenuPath, // 첫 번째 접근 가능한 메뉴 경로 추가
+            firstMenuPath,
+            popLandingPath,
          },
        });
      } else {
--- a/frontend/app/(auth)/login/page.tsx
+++ b/frontend/app/(auth)/login/page.tsx
@ -10,8 +10,17 @@ import { LoginFooter } from "@/components/auth/LoginFooter";
 * 비즈니스 로직은 useLogin 훅에서 처리하고, UI 컴포넌트들을 조합하여 구성
 */
 export default function LoginPage() {
-  const { formData, isLoading, error, showPassword, handleInputChange, handleLogin, togglePasswordVisibility } =
-    useLogin();
+  const {
+    formData,
+    isLoading,
+    error,
+    showPassword,
+    isPopMode,
+    handleInputChange,
+    handleLogin,
+    togglePasswordVisibility,
+    togglePopMode,
+  } = useLogin();

  return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
@ -23,9 +32,11 @@ export default function LoginPage() {
          isLoading={isLoading}
          error={error}
          showPassword={showPassword}
+          isPopMode={isPopMode}
          onInputChange={handleInputChange}
          onSubmit={handleLogin}
          onTogglePassword={togglePasswordVisibility}
+          onTogglePop={togglePopMode}
        />

        <LoginFooter />
--- a/frontend/components/auth/LoginForm.tsx
+++ b/frontend/components/auth/LoginForm.tsx
@ -2,7 +2,8 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Eye, EyeOff, Loader2 } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import { Eye, EyeOff, Loader2, Monitor } from "lucide-react";
 import { LoginFormData } from "@/types/auth";
 import { ErrorMessage } from "./ErrorMessage";

@ -11,9 +12,11 @@ interface LoginFormProps {
  isLoading: boolean;
  error: string;
  showPassword: boolean;
+  isPopMode: boolean;
  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSubmit: (e: React.FormEvent) => void;
  onTogglePassword: () => void;
+  onTogglePop: () => void;
 }

 /**
@ -24,9 +27,11 @@ export function LoginForm({
  isLoading,
  error,
  showPassword,
+  isPopMode,
  onInputChange,
  onSubmit,
  onTogglePassword,
+  onTogglePop,
 }: LoginFormProps) {
  return (
    <Card className="border-0 shadow-xl">
@ -82,6 +87,19 @@ export function LoginForm({
            </div>
          </div>

+          {/* POP 모드 토글 */}
+          <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5">
+            <div className="flex items-center gap-2">
+              <Monitor className="h-4 w-4 text-slate-500" />
+              <span className="text-sm text-slate-600">POP 모드</span>
+            </div>
+            <Switch
+              checked={isPopMode}
+              onCheckedChange={onTogglePop}
+              disabled={isLoading}
+            />
+          </div>
+
          {/* 로그인 버튼 */}
          <Button
            type="submit"
--- a/frontend/hooks/useLogin.ts
+++ b/frontend/hooks/useLogin.ts
@ -20,6 +20,21 @@ export const useLogin = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [showPassword, setShowPassword] = useState(false);
+  const [isPopMode, setIsPopMode] = useState(false);
+
+  // localStorage에서 POP 모드 상태 복원
+  useEffect(() => {
+    const saved = localStorage.getItem("popLoginMode");
+    if (saved === "true") setIsPopMode(true);
+  }, []);
+
+  const togglePopMode = useCallback(() => {
+    setIsPopMode((prev) => {
+      const next = !prev;
+      localStorage.setItem("popLoginMode", String(next));
+      return next;
+    });
+  }, []);

  /**
   * 폼 입력값 변경 처리
@ -141,17 +156,22 @@ export const useLogin = () => {
          // 쿠키에도 저장 (미들웨어에서 사용)
          document.cookie = `authToken=${result.data.token}; path=/; max-age=86400; SameSite=Lax`;

-          // 로그인 성공 - 첫 번째 접근 가능한 메뉴로 리다이렉트
-          const firstMenuPath = result.data?.firstMenuPath;
-
-          if (firstMenuPath) {
-            // 접근 가능한 메뉴가 있으면 해당 메뉴로 이동
-            console.log("첫 번째 접근 가능한 메뉴로 이동:", firstMenuPath);
-            router.push(firstMenuPath);
+          if (isPopMode) {
+            const popPath = result.data?.popLandingPath;
+            if (popPath) {
+              router.push(popPath);
+            } else {
+              setError("POP 화면이 설정되어 있지 않습니다. 관리자에게 메뉴 관리에서 POP 화면을 설정해달라고 요청하세요.");
+              setIsLoading(false);
+              return;
+            }
          } else {
-            // 접근 가능한 메뉴가 없으면 메인 페이지로 이동
-            console.log("접근 가능한 메뉴가 없어 메인 페이지로 이동");
-            router.push(AUTH_CONFIG.ROUTES.MAIN);
+            const firstMenuPath = result.data?.firstMenuPath;
+            if (firstMenuPath) {
+              router.push(firstMenuPath);
+            } else {
+              router.push(AUTH_CONFIG.ROUTES.MAIN);
+            }
          }
        } else {
          // 로그인 실패
@ -165,7 +185,7 @@ export const useLogin = () => {
        setIsLoading(false);
      }
    },
-    [formData, validateForm, apiCall, router],
+    [formData, validateForm, apiCall, router, isPopMode],
  );

  // 컴포넌트 마운트 시 기존 인증 상태 확인
@ -179,10 +199,12 @@ export const useLogin = () => {
    isLoading,
    error,
    showPassword,
+    isPopMode,

    // 액션
    handleInputChange,
    handleLogin,
    togglePasswordVisibility,
+    togglePopMode,
  };
 };
--- a/frontend/types/auth.ts
+++ b/frontend/types/auth.ts
@ -14,6 +14,7 @@ export interface LoginResponse {
    token?: string;
    userInfo?: any;
    firstMenuPath?: string | null;
+    popLandingPath?: string | null;
  };
  errorCode?: string;
 }