Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into jskim-node

2026-03-12 14:23:34 +09:00
parent df47c27b77 710d9fe212
commit cada8cd4b0
99 changed files with 14205 additions and 1442 deletions
--- a/frontend/components/admin/MenuFormModal.tsx
+++ b/frontend/components/admin/MenuFormModal.tsx
@@ -82,12 +82,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[]>([]);
@@ -196,8 +203,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,
@@ -208,36 +234,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: "",
@@ -297,8 +340,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,
@@ -360,10 +403,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);
@@ -408,6 +472,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"; // 기본값은 사용자
@@ -470,6 +535,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) {
@@ -517,6 +607,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) => {
@@ -533,16 +639,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 {
@@ -590,10 +700,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(),
      };

@@ -853,7 +970,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">
@@ -866,6 +983,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">
@@ -1031,6 +1154,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
--- 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 shadow-lg">
@@ -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/components/common/BarcodeScanModal.tsx
+++ b/frontend/components/common/BarcodeScanModal.tsx
@@ -42,9 +42,12 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
  const codeReaderRef = useRef<BrowserMultiFormatReader | null>(null);
  const scanIntervalRef = useRef<NodeJS.Timeout | null>(null);

-  // 바코드 리더 초기화
+  // 바코드 리더 초기화 + 모달 열릴 때 상태 리셋
  useEffect(() => {
    if (open) {
+      setScannedCode("");
+      setError("");
+      setIsScanning(false);
      codeReaderRef.current = new BrowserMultiFormatReader();
    }

@@ -276,7 +279,7 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
              {/* 스캔 가이드 오버레이 */}
              {isScanning && (
                <div className="absolute inset-0 flex items-center justify-center">
-                  <div className="h-32 w-32 border-4 border-primary animate-pulse rounded-lg" />
+                  <div className="h-3/5 w-4/5 rounded-lg border-4 border-primary/70 animate-pulse" />
                  <div className="absolute bottom-4 left-0 right-0 text-center">
                    <div className="inline-flex items-center gap-2 rounded-full bg-background/80 px-4 py-2 text-xs font-medium">
                      <Scan className="h-4 w-4 animate-pulse text-primary" />
@@ -355,6 +358,20 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
            </Button>
          )}

+          {scannedCode && (
+            <Button
+              variant="outline"
+              onClick={() => {
+                setScannedCode("");
+                startScanning();
+              }}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <Camera className="mr-2 h-4 w-4" />
+              다시 스캔
+            </Button>
+          )}
+
          {scannedCode && !autoSubmit && (
            <Button
              onClick={handleConfirm}
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -19,11 +19,12 @@ import {
  User,
  Building2,
  FileCheck,
+  Monitor,
 } from "lucide-react";
 import { useMenu } from "@/contexts/MenuContext";
 import { useAuth } from "@/hooks/useAuth";
 import { useProfile } from "@/hooks/useProfile";
-import { MenuItem } from "@/lib/api/menu";
+import { MenuItem, menuApi } from "@/lib/api/menu";
 import { menuScreenApi } from "@/lib/api/screen";
 import { apiClient } from "@/lib/api/client";
 import { toast } from "sonner";
@@ -453,6 +454,31 @@ function AppLayoutInner({ children }: AppLayoutProps) {
    e.dataTransfer.setData("text/plain", menuName);
  };

+  // POP 모드 진입 핸들러
+  const handlePopModeClick = async () => {
+    try {
+      const response = await menuApi.getPopMenus();
+      if (response.success && response.data) {
+        const { childMenus, landingMenu } = response.data;
+
+        if (landingMenu?.menu_url) {
+          router.push(landingMenu.menu_url);
+        } else if (childMenus.length === 0) {
+          toast.info("설정된 POP 화면이 없습니다");
+        } else if (childMenus.length === 1) {
+          router.push(childMenus[0].menu_url);
+        } else {
+          router.push("/pop");
+        }
+      } else {
+        toast.info("설정된 POP 화면이 없습니다");
+      }
+    } catch (error) {
+      toast.error("POP 메뉴 조회 중 오류가 발생했습니다");
+    }
+  };
+
+  // 메뉴 트리 렌더링 (기존 MainLayout 스타일 적용)
  const renderMenu = (menu: any, level: number = 0) => {
    const isExpanded = expandedMenus.has(menu.id);
    const isLeaf = !menu.hasChildren;
@@ -576,6 +602,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                <FileCheck className="mr-2 h-4 w-4" />
                <span>결재함</span>
              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handlePopModeClick}>
+                <Monitor className="mr-2 h-4 w-4" />
+                <span>POP 모드</span>
+              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <div className="px-1 py-0.5">
                <ThemeToggle />
@@ -748,6 +778,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                  <FileCheck className="mr-2 h-4 w-4" />
                  <span>결재함</span>
                </DropdownMenuItem>
+                <DropdownMenuItem onClick={handlePopModeClick}>
+                  <Monitor className="mr-2 h-4 w-4" />
+                  <span>POP 모드</span>
+                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={handleLogout}>
                  <LogOut className="mr-2 h-4 w-4" />
--- a/frontend/components/layout/MainHeader.tsx
+++ b/frontend/components/layout/MainHeader.tsx
@@ -6,13 +6,14 @@ interface MainHeaderProps {
  user: any;
  onSidebarToggle: () => void;
  onProfileClick: () => void;
+  onPopModeClick?: () => void;
  onLogout: () => void;
 }

 /**
 * 메인 헤더 컴포넌트
 */
-export function MainHeader({ user, onSidebarToggle, onProfileClick, onLogout }: MainHeaderProps) {
+export function MainHeader({ user, onSidebarToggle, onProfileClick, onPopModeClick, onLogout }: MainHeaderProps) {
  return (
    <header className="bg-background/95 fixed top-0 z-50 h-14 min-h-14 w-full flex-shrink-0 border-b backdrop-blur">
      <div className="flex h-full w-full items-center justify-between px-6">
@@ -27,7 +28,7 @@ export function MainHeader({ user, onSidebarToggle, onProfileClick, onLogout }:

        {/* Right side - Admin Button + User Menu */}
        <div className="flex h-8 items-center gap-2">
-          <UserDropdown user={user} onProfileClick={onProfileClick} onLogout={onLogout} />
+          <UserDropdown user={user} onProfileClick={onProfileClick} onPopModeClick={onPopModeClick} onLogout={onLogout} />
        </div>
      </div>
    </header>
--- a/frontend/components/layout/TabContent.tsx
+++ b/frontend/components/layout/TabContent.tsx
@@ -19,6 +19,11 @@ import {
  clearTabCache,
 } from "@/lib/tabStateCache";

+// 페이지 로드(F5 새로고침) 감지용 모듈 레벨 플래그.
+// 전체 페이지 로드 시 모듈이 재실행되어 false로 리셋된다.
+// SPA 내비게이션에서는 모듈이 유지되므로 true로 남는다.
+let hasHandledPageLoad = false;
+
 export function TabContent() {
  const tabs = useTabStore(selectTabs);
  const activeTabId = useTabStore(selectActiveTabId);
@@ -39,6 +44,13 @@ export function TabContent() {
  // 요소 → 경로 캐시 (매 스크롤 이벤트마다 경로를 재계산하지 않기 위함)
  const pathCacheRef = useRef<WeakMap<HTMLElement, string | null>>(new WeakMap());

+  // 페이지 로드(F5) 시 활성 탭 캐시만 삭제 → fresh API 호출 유도
+  // 비활성 탭 캐시는 유지하여 탭 전환 시 복원
+  if (!hasHandledPageLoad && activeTabId) {
+    hasHandledPageLoad = true;
+    clearTabCache(activeTabId);
+  }
+
  if (activeTabId) {
    mountedTabIdsRef.current.add(activeTabId);
  }
--- a/frontend/components/layout/UserDropdown.tsx
+++ b/frontend/components/layout/UserDropdown.tsx
@@ -8,19 +8,20 @@ import {
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LogOut, User, FileCheck } from "lucide-react";
+import { LogOut, FileCheck, Monitor, User } from "lucide-react";
 import { useRouter } from "next/navigation";

 interface UserDropdownProps {
  user: any;
  onProfileClick: () => void;
+  onPopModeClick?: () => void;
  onLogout: () => void;
 }

 /**
 * 사용자 드롭다운 메뉴 컴포넌트
 */
-export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownProps) {
+export function UserDropdown({ user, onProfileClick, onPopModeClick, onLogout }: UserDropdownProps) {
  const router = useRouter();

  if (!user) return null;
@@ -73,7 +74,6 @@ export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownPro
                  ? `${user.deptName}, ${user.positionName}`
                  : user.deptName || user.positionName || "부서 정보 없음"}
              </p>
-              {/* 사진 상태 표시 */}
            </div>
          </div>
        </DropdownMenuLabel>
@@ -86,6 +86,12 @@ export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownPro
          <FileCheck className="mr-2 h-4 w-4" />
          <span>결재함</span>
        </DropdownMenuItem>
+        {onPopModeClick && (
+          <DropdownMenuItem onClick={onPopModeClick}>
+            <Monitor className="mr-2 h-4 w-4" />
+            <span>POP 모드</span>
+          </DropdownMenuItem>
+        )}
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={onLogout}>
          <LogOut className="mr-2 h-4 w-4" />
--- a/frontend/components/pop/dashboard/DashboardHeader.tsx
+++ b/frontend/components/pop/dashboard/DashboardHeader.tsx
@@ -1,7 +1,7 @@
 "use client";

 import React, { useState, useEffect } from "react";
-import { Moon, Sun } from "lucide-react";
+import { Moon, Sun, Monitor } from "lucide-react";
 import { WeatherInfo, UserInfo, CompanyInfo } from "./types";

 interface DashboardHeaderProps {
@@ -11,6 +11,7 @@ interface DashboardHeaderProps {
  company: CompanyInfo;
  onThemeToggle: () => void;
  onUserClick: () => void;
+  onPcModeClick?: () => void;
 }

 export function DashboardHeader({
@@ -20,6 +21,7 @@ export function DashboardHeader({
  company,
  onThemeToggle,
  onUserClick,
+  onPcModeClick,
 }: DashboardHeaderProps) {
  const [mounted, setMounted] = useState(false);
  const [currentTime, setCurrentTime] = useState(new Date());
@@ -81,6 +83,17 @@ export function DashboardHeader({
          <div className="pop-dashboard-company-sub">{company.subTitle}</div>
        </div>

+        {/* PC 모드 복귀 */}
+        {onPcModeClick && (
+          <button
+            className="pop-dashboard-theme-toggle"
+            onClick={onPcModeClick}
+            title="PC 모드로 돌아가기"
+          >
+            <Monitor size={16} />
+          </button>
+        )}
+
        {/* 사용자 배지 */}
        <button className="pop-dashboard-user-badge" onClick={onUserClick}>
          <div className="pop-dashboard-user-avatar">{user.avatar}</div>
--- a/frontend/components/pop/dashboard/PopDashboard.tsx
+++ b/frontend/components/pop/dashboard/PopDashboard.tsx
@@ -1,6 +1,7 @@
 "use client";

 import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
 import { DashboardHeader } from "./DashboardHeader";
 import { NoticeBanner } from "./NoticeBanner";
 import { KpiBar } from "./KpiBar";
@@ -8,6 +9,8 @@ import { MenuGrid } from "./MenuGrid";
 import { ActivityList } from "./ActivityList";
 import { NoticeList } from "./NoticeList";
 import { DashboardFooter } from "./DashboardFooter";
+import { MenuItem as DashboardMenuItem } from "./types";
+import { menuApi, PopMenuItem } from "@/lib/api/menu";
 import {
  KPI_ITEMS,
  MENU_ITEMS,
@@ -17,10 +20,31 @@ import {
 } from "./data";
 import "./dashboard.css";

-export function PopDashboard() {
-  const [theme, setTheme] = useState<"dark" | "light">("dark");
+const CATEGORY_COLORS: DashboardMenuItem["category"][] = [
+  "production",
+  "material",
+  "quality",
+  "equipment",
+  "safety",
+];
+
+function convertPopMenuToMenuItem(item: PopMenuItem, index: number): DashboardMenuItem {
+  return {
+    id: item.objid,
+    title: item.menu_name_kor,
+    count: 0,
+    description: item.menu_desc?.replace("[POP]", "").trim() || "",
+    status: "",
+    category: CATEGORY_COLORS[index % CATEGORY_COLORS.length],
+    href: item.menu_url || "#",
+  };
+}
+
+export function PopDashboard() {
+  const router = useRouter();
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
+  const [menuItems, setMenuItems] = useState<DashboardMenuItem[]>(MENU_ITEMS);

-  // 로컬 스토리지에서 테마 로드
  useEffect(() => {
    const savedTheme = localStorage.getItem("popTheme") as "dark" | "light" | null;
    if (savedTheme) {
@@ -28,6 +52,22 @@ export function PopDashboard() {
    }
  }, []);

+  // API에서 POP 메뉴 로드
+  useEffect(() => {
+    const loadPopMenus = async () => {
+      try {
+        const response = await menuApi.getPopMenus();
+        if (response.success && response.data && response.data.childMenus.length > 0) {
+          const converted = response.data.childMenus.map(convertPopMenuToMenuItem);
+          setMenuItems(converted);
+        }
+      } catch {
+        // API 실패 시 기존 하드코딩 데이터 유지
+      }
+    };
+    loadPopMenus();
+  }, []);
+
  const handleThemeToggle = () => {
    const newTheme = theme === "dark" ? "light" : "dark";
    setTheme(newTheme);
@@ -40,6 +80,10 @@ export function PopDashboard() {
    }
  };

+  const handlePcModeClick = () => {
+    router.push("/");
+  };
+
  const handleActivityMore = () => {
    alert("전체 활동 내역 화면으로 이동합니다.");
  };
@@ -58,13 +102,14 @@ export function PopDashboard() {
          company={{ name: "탑씰", subTitle: "현장 관리 시스템" }}
          onThemeToggle={handleThemeToggle}
          onUserClick={handleUserClick}
+          onPcModeClick={handlePcModeClick}
        />

        <NoticeBanner text={NOTICE_MARQUEE_TEXT} />

        <KpiBar items={KPI_ITEMS} />

-        <MenuGrid items={MENU_ITEMS} />
+        <MenuGrid items={menuItems} />

        <div className="pop-dashboard-bottom-section">
          <ActivityList items={ACTIVITY_ITEMS} onMoreClick={handleActivityMore} />
--- a/frontend/components/pop/designer/PopDesigner.tsx
+++ b/frontend/components/pop/designer/PopDesigner.tsx
@@ -150,7 +150,7 @@ export default function PopDesigner({
      try {
        const loadedLayout = await screenApi.getLayoutPop(selectedScreen.screenId);
        
-        if (loadedLayout && isV5Layout(loadedLayout) && Object.keys(loadedLayout.components).length > 0) {
+        if (loadedLayout && isV5Layout(loadedLayout) && loadedLayout.components && Object.keys(loadedLayout.components).length > 0) {
          // v5 레이아웃 로드
          // 기존 레이아웃 호환성: gapPreset이 없으면 기본값 추가
          if (!loadedLayout.settings.gapPreset) {
--- a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
+++ b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
@@ -69,10 +69,12 @@ const COMPONENT_TYPE_LABELS: Record<string, string> = {
  "pop-icon": "아이콘",
  "pop-dashboard": "대시보드",
  "pop-card-list": "카드 목록",
+  "pop-card-list-v2": "카드 목록 V2",
  "pop-field": "필드",
  "pop-button": "버튼",
  "pop-string-list": "리스트 목록",
  "pop-search": "검색",
+  "pop-status-bar": "상태 바",
  "pop-list": "리스트",
  "pop-indicator": "인디케이터",
  "pop-scanner": "스캐너",
@@ -169,9 +171,7 @@ export default function ComponentEditorPanel({
              </div>
              <div className="space-y-1">
                {allComponents.map((comp) => {
-                  const label = comp.label
-                    || COMPONENT_TYPE_LABELS[comp.type]
-                    || comp.type;
+                  const label = comp.label || comp.id;
                  const isActive = comp.id === selectedComponentId;
                  return (
                    <button
--- a/frontend/components/pop/designer/panels/ComponentPalette.tsx
+++ b/frontend/components/pop/designer/panels/ComponentPalette.tsx
@@ -3,7 +3,7 @@
 import { useDrag } from "react-dnd";
 import { cn } from "@/lib/utils";
 import { PopComponentType } from "../types/pop-layout";
-import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search, TextCursorInput } from "lucide-react";
+import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search, TextCursorInput, ScanLine, UserCircle, BarChart2 } from "lucide-react";
 import { DND_ITEM_TYPES } from "../constants";

 // 컴포넌트 정의
@@ -45,6 +45,12 @@ const PALETTE_ITEMS: PaletteItem[] = [
    icon: LayoutGrid,
    description: "테이블 데이터를 카드 형태로 표시",
  },
+  {
+    type: "pop-card-list-v2",
+    label: "카드 목록 V2",
+    icon: LayoutGrid,
+    description: "슬롯 기반 카드 (CSS Grid + 셀 타입별 렌더링)",
+  },
  {
    type: "pop-button",
    label: "버튼",
@@ -63,12 +69,30 @@ const PALETTE_ITEMS: PaletteItem[] = [
    icon: Search,
    description: "조건 입력 (텍스트/날짜/선택/모달)",
  },
+  {
+    type: "pop-status-bar",
+    label: "상태 바",
+    icon: BarChart2,
+    description: "상태별 건수 대시보드 + 필터",
+  },
  {
    type: "pop-field",
    label: "입력 필드",
    icon: TextCursorInput,
    description: "저장용 값 입력 (섹션별 멀티필드)",
  },
+  {
+    type: "pop-scanner",
+    label: "스캐너",
+    icon: ScanLine,
+    description: "바코드/QR 카메라 스캔",
+  },
+  {
+    type: "pop-profile",
+    label: "프로필",
+    icon: UserCircle,
+    description: "사용자 프로필 / PC 전환 / 로그아웃",
+  },
 ];

 // 드래그 가능한 컴포넌트 아이템
--- a/frontend/components/pop/designer/panels/ConnectionEditor.tsx
+++ b/frontend/components/pop/designer/panels/ConnectionEditor.tsx
@@ -4,7 +4,6 @@ import React from "react";
 import { ArrowRight, Link2, Unlink2, Plus, Trash2, Pencil, X, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
  Select,
@@ -19,7 +18,6 @@ import {
 } from "../types/pop-layout";
 import {
  PopComponentRegistry,
-  type ComponentConnectionMeta,
 } from "@/lib/registry/PopComponentRegistry";
 import { getTableColumns } from "@/lib/api/tableManagement";

@@ -36,15 +34,6 @@ interface ConnectionEditorProps {
  onRemoveConnection?: (connectionId: string) => void;
 }

-// ========================================
-// 소스 컴포넌트에 filter 타입 sendable이 있는지 판단
-// ========================================
-
-function hasFilterSendable(meta: ComponentConnectionMeta | undefined): boolean {
-  if (!meta?.sendable) return false;
-  return meta.sendable.some((s) => s.category === "filter" || s.type === "filter_value");
-}
-
 // ========================================
 // ConnectionEditor
 // ========================================
@@ -84,17 +73,13 @@ export default function ConnectionEditor({
    );
  }

-  const isFilterSource = hasFilterSendable(meta);
-
  return (
    <div className="space-y-6">
      {hasSendable && (
        <SendSection
          component={component}
-          meta={meta!}
          allComponents={allComponents}
          outgoing={outgoing}
-          isFilterSource={isFilterSource}
          onAddConnection={onAddConnection}
          onUpdateConnection={onUpdateConnection}
          onRemoveConnection={onRemoveConnection}
@@ -112,47 +97,14 @@ export default function ConnectionEditor({
  );
 }

-// ========================================
-// 대상 컴포넌트에서 정보 추출
-// ========================================
-
-function extractDisplayColumns(comp: PopComponentDefinitionV5 | undefined): string[] {
-  if (!comp?.config) return [];
-  const cfg = comp.config as Record<string, unknown>;
-  const cols: string[] = [];
-
-  if (Array.isArray(cfg.listColumns)) {
-    (cfg.listColumns as Array<{ columnName?: string }>).forEach((c) => {
-      if (c.columnName && !cols.includes(c.columnName)) cols.push(c.columnName);
-    });
-  }
-
-  if (Array.isArray(cfg.selectedColumns)) {
-    (cfg.selectedColumns as string[]).forEach((c) => {
-      if (!cols.includes(c)) cols.push(c);
-    });
-  }
-
-  return cols;
-}
-
-function extractTableName(comp: PopComponentDefinitionV5 | undefined): string {
-  if (!comp?.config) return "";
-  const cfg = comp.config as Record<string, unknown>;
-  const ds = cfg.dataSource as { tableName?: string } | undefined;
-  return ds?.tableName || "";
-}
-
 // ========================================
 // 보내기 섹션
 // ========================================

 interface SendSectionProps {
  component: PopComponentDefinitionV5;
-  meta: ComponentConnectionMeta;
  allComponents: PopComponentDefinitionV5[];
  outgoing: PopDataConnection[];
-  isFilterSource: boolean;
  onAddConnection?: (conn: Omit<PopDataConnection, "id">) => void;
  onUpdateConnection?: (connectionId: string, conn: Omit<PopDataConnection, "id">) => void;
  onRemoveConnection?: (connectionId: string) => void;
@@ -160,10 +112,8 @@ interface SendSectionProps {

 function SendSection({
  component,
-  meta,
  allComponents,
  outgoing,
-  isFilterSource,
  onAddConnection,
  onUpdateConnection,
  onRemoveConnection,
@@ -180,34 +130,20 @@ function SendSection({
      {outgoing.map((conn) => (
        <div key={conn.id}>
          {editingId === conn.id ? (
-            isFilterSource ? (
-              <FilterConnectionForm
-                component={component}
-                meta={meta}
-                allComponents={allComponents}
-                initial={conn}
-                onSubmit={(data) => {
-                  onUpdateConnection?.(conn.id, data);
-                  setEditingId(null);
-                }}
-                onCancel={() => setEditingId(null)}
-                submitLabel="수정"
-              />
-            ) : (
-              <SimpleConnectionForm
-                component={component}
-                allComponents={allComponents}
-                initial={conn}
-                onSubmit={(data) => {
-                  onUpdateConnection?.(conn.id, data);
-                  setEditingId(null);
-                }}
-                onCancel={() => setEditingId(null)}
-                submitLabel="수정"
-              />
-            )
+            <SimpleConnectionForm
+              component={component}
+              allComponents={allComponents}
+              initial={conn}
+              onSubmit={(data) => {
+                onUpdateConnection?.(conn.id, data);
+                setEditingId(null);
+              }}
+              onCancel={() => setEditingId(null)}
+              submitLabel="수정"
+            />
          ) : (
-            <div className="flex items-center gap-1 rounded border bg-primary/10/50 px-3 py-2">
+            <div className="space-y-1 rounded border bg-primary/10 px-3 py-2">
+              <div className="flex items-center gap-1">
              <span className="flex-1 truncate text-xs">
                {conn.label || `→ ${allComponents.find((c) => c.id === conn.targetComponent)?.label || conn.targetComponent}`}
              </span>
@@ -225,27 +161,33 @@ function SendSection({
                  <Trash2 className="h-3 w-3" />
                </button>
              )}
+              </div>
+              {conn.filterConfig?.targetColumn && (
+                <div className="flex flex-wrap gap-1">
+                  <span className="rounded bg-white px-1.5 py-0.5 text-[9px] text-muted-foreground">
+                    {conn.filterConfig.targetColumn}
+                  </span>
+                  <span className="rounded bg-white px-1.5 py-0.5 text-[9px] text-muted-foreground">
+                    {conn.filterConfig.filterMode}
+                  </span>
+                  {conn.filterConfig.isSubTable && (
+                    <span className="rounded bg-amber-100 px-1.5 py-0.5 text-[9px] text-amber-700">
+                      하위 테이블
+                    </span>
+                  )}
+                </div>
+              )}
            </div>
          )}
        </div>
      ))}

-      {isFilterSource ? (
-        <FilterConnectionForm
-          component={component}
-          meta={meta}
-          allComponents={allComponents}
-          onSubmit={(data) => onAddConnection?.(data)}
-          submitLabel="연결 추가"
-        />
-      ) : (
-        <SimpleConnectionForm
-          component={component}
-          allComponents={allComponents}
-          onSubmit={(data) => onAddConnection?.(data)}
-          submitLabel="연결 추가"
-        />
-      )}
+      <SimpleConnectionForm
+        component={component}
+        allComponents={allComponents}
+        onSubmit={(data) => onAddConnection?.(data)}
+        submitLabel="연결 추가"
+      />
    </div>
  );
 }
@@ -263,6 +205,19 @@ interface SimpleConnectionFormProps {
  submitLabel: string;
 }

+function extractSubTableName(comp: PopComponentDefinitionV5): string | null {
+  const cfg = comp.config as Record<string, unknown> | undefined;
+  if (!cfg) return null;
+
+  const grid = cfg.cardGrid as { cells?: Array<{ timelineSource?: { processTable?: string } }> } | undefined;
+  if (grid?.cells) {
+    for (const cell of grid.cells) {
+      if (cell.timelineSource?.processTable) return cell.timelineSource.processTable;
+    }
+  }
+  return null;
+}
+
 function SimpleConnectionForm({
  component,
  allComponents,
@@ -274,6 +229,18 @@ function SimpleConnectionForm({
  const [selectedTargetId, setSelectedTargetId] = React.useState(
    initial?.targetComponent || ""
  );
+  const [isSubTable, setIsSubTable] = React.useState(
+    initial?.filterConfig?.isSubTable || false
+  );
+  const [targetColumn, setTargetColumn] = React.useState(
+    initial?.filterConfig?.targetColumn || ""
+  );
+  const [filterMode, setFilterMode] = React.useState<string>(
+    initial?.filterConfig?.filterMode || "equals"
+  );
+
+  const [subColumns, setSubColumns] = React.useState<string[]>([]);
+  const [loadingColumns, setLoadingColumns] = React.useState(false);

  const targetCandidates = allComponents.filter((c) => {
    if (c.id === component.id) return false;
@@ -281,14 +248,39 @@ function SimpleConnectionForm({
    return reg?.connectionMeta?.receivable && reg.connectionMeta.receivable.length > 0;
  });

+  const sourceReg = PopComponentRegistry.getComponent(component.type);
+  const targetComp = allComponents.find((c) => c.id === selectedTargetId);
+  const targetReg = targetComp ? PopComponentRegistry.getComponent(targetComp.type) : null;
+  const isFilterConnection = sourceReg?.connectionMeta?.sendable?.some((s) => s.type === "filter_value")
+    && targetReg?.connectionMeta?.receivable?.some((r) => r.type === "filter_value");
+
+  const subTableName = targetComp ? extractSubTableName(targetComp) : null;
+
+  React.useEffect(() => {
+    if (!isSubTable || !subTableName) {
+      setSubColumns([]);
+      return;
+    }
+    setLoadingColumns(true);
+    getTableColumns(subTableName)
+      .then((res) => {
+        const cols = res.success && res.data?.columns;
+        if (Array.isArray(cols)) {
+          setSubColumns(cols.map((c) => c.columnName || "").filter(Boolean));
+        }
+      })
+      .catch(() => setSubColumns([]))
+      .finally(() => setLoadingColumns(false));
+  }, [isSubTable, subTableName]);
+
  const handleSubmit = () => {
    if (!selectedTargetId) return;

-    const targetComp = allComponents.find((c) => c.id === selectedTargetId);
+    const tComp = allComponents.find((c) => c.id === selectedTargetId);
    const srcLabel = component.label || component.id;
-    const tgtLabel = targetComp?.label || targetComp?.id || "?";
+    const tgtLabel = tComp?.label || tComp?.id || "?";

-    onSubmit({
+    const conn: Omit<PopDataConnection, "id"> = {
      sourceComponent: component.id,
      sourceField: "",
      sourceOutput: "_auto",
@@ -296,10 +288,23 @@ function SimpleConnectionForm({
      targetField: "",
      targetInput: "_auto",
      label: `${srcLabel} → ${tgtLabel}`,
-    });
+    };
+
+    if (isFilterConnection && isSubTable && targetColumn) {
+      conn.filterConfig = {
+        targetColumn,
+        filterMode: filterMode as "equals" | "contains" | "starts_with" | "range",
+        isSubTable: true,
+      };
+    }
+
+    onSubmit(conn);

    if (!initial) {
      setSelectedTargetId("");
+      setIsSubTable(false);
+      setTargetColumn("");
+      setFilterMode("equals");
    }
  };

@@ -319,224 +324,12 @@ function SimpleConnectionForm({

      <div className="space-y-1">
        <span className="text-[10px] text-muted-foreground">어디로?</span>
-        <Select
-          value={selectedTargetId}
-          onValueChange={setSelectedTargetId}
-        >
-          <SelectTrigger className="h-7 text-xs">
-            <SelectValue placeholder="컴포넌트 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            {targetCandidates.map((c) => (
-              <SelectItem key={c.id} value={c.id} className="text-xs">
-                {c.label || c.id}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <Button
-        size="sm"
-        variant="outline"
-        className="h-7 w-full text-xs"
-        disabled={!selectedTargetId}
-        onClick={handleSubmit}
-      >
-        {!initial && <Plus className="mr-1 h-3 w-3" />}
-        {submitLabel}
-      </Button>
-    </div>
-  );
-}
-
-// ========================================
-// 필터 연결 폼 (검색 컴포넌트용: 기존 UI 유지)
-// ========================================
-
-interface FilterConnectionFormProps {
-  component: PopComponentDefinitionV5;
-  meta: ComponentConnectionMeta;
-  allComponents: PopComponentDefinitionV5[];
-  initial?: PopDataConnection;
-  onSubmit: (data: Omit<PopDataConnection, "id">) => void;
-  onCancel?: () => void;
-  submitLabel: string;
-}
-
-function FilterConnectionForm({
-  component,
-  meta,
-  allComponents,
-  initial,
-  onSubmit,
-  onCancel,
-  submitLabel,
-}: FilterConnectionFormProps) {
-  const [selectedOutput, setSelectedOutput] = React.useState(
-    initial?.sourceOutput || meta.sendable[0]?.key || ""
-  );
-  const [selectedTargetId, setSelectedTargetId] = React.useState(
-    initial?.targetComponent || ""
-  );
-  const [selectedTargetInput, setSelectedTargetInput] = React.useState(
-    initial?.targetInput || ""
-  );
-  const [filterColumns, setFilterColumns] = React.useState<string[]>(
-    initial?.filterConfig?.targetColumns ||
-    (initial?.filterConfig?.targetColumn ? [initial.filterConfig.targetColumn] : [])
-  );
-  const [filterMode, setFilterMode] = React.useState<
-    "equals" | "contains" | "starts_with" | "range"
-  >(initial?.filterConfig?.filterMode || "contains");
-
-  const targetCandidates = allComponents.filter((c) => {
-    if (c.id === component.id) return false;
-    const reg = PopComponentRegistry.getComponent(c.type);
-    return reg?.connectionMeta?.receivable && reg.connectionMeta.receivable.length > 0;
-  });
-
-  const targetComp = selectedTargetId
-    ? allComponents.find((c) => c.id === selectedTargetId)
-    : null;
-
-  const targetMeta = targetComp
-    ? PopComponentRegistry.getComponent(targetComp.type)?.connectionMeta
-    : null;
-
-  React.useEffect(() => {
-    if (!selectedOutput || !targetMeta?.receivable?.length) return;
-    if (selectedTargetInput) return;
-
-    const receivables = targetMeta.receivable;
-    const exactMatch = receivables.find((r) => r.key === selectedOutput);
-    if (exactMatch) {
-      setSelectedTargetInput(exactMatch.key);
-      return;
-    }
-    if (receivables.length === 1) {
-      setSelectedTargetInput(receivables[0].key);
-    }
-  }, [selectedOutput, targetMeta, selectedTargetInput]);
-
-  const displayColumns = React.useMemo(
-    () => extractDisplayColumns(targetComp || undefined),
-    [targetComp]
-  );
-
-  const tableName = React.useMemo(
-    () => extractTableName(targetComp || undefined),
-    [targetComp]
-  );
-  const [allDbColumns, setAllDbColumns] = React.useState<string[]>([]);
-  const [dbColumnsLoading, setDbColumnsLoading] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!tableName) {
-      setAllDbColumns([]);
-      return;
-    }
-    let cancelled = false;
-    setDbColumnsLoading(true);
-    getTableColumns(tableName).then((res) => {
-      if (cancelled) return;
-      if (res.success && res.data?.columns) {
-        setAllDbColumns(res.data.columns.map((c) => c.columnName));
-      } else {
-        setAllDbColumns([]);
-      }
-      setDbColumnsLoading(false);
-    });
-    return () => { cancelled = true; };
-  }, [tableName]);
-
-  const displaySet = React.useMemo(() => new Set(displayColumns), [displayColumns]);
-  const dataOnlyColumns = React.useMemo(
-    () => allDbColumns.filter((c) => !displaySet.has(c)),
-    [allDbColumns, displaySet]
-  );
-  const hasAnyColumns = displayColumns.length > 0 || dataOnlyColumns.length > 0;
-
-  const toggleColumn = (col: string) => {
-    setFilterColumns((prev) =>
-      prev.includes(col) ? prev.filter((c) => c !== col) : [...prev, col]
-    );
-  };
-
-  const handleSubmit = () => {
-    if (!selectedOutput || !selectedTargetId || !selectedTargetInput) return;
-
-    const isEvent = isEventTypeConnection(meta, selectedOutput, targetMeta, selectedTargetInput);
-
-    onSubmit({
-      sourceComponent: component.id,
-      sourceField: "",
-      sourceOutput: selectedOutput,
-      targetComponent: selectedTargetId,
-      targetField: "",
-      targetInput: selectedTargetInput,
-      filterConfig:
-        !isEvent && filterColumns.length > 0
-          ? {
-              targetColumn: filterColumns[0],
-              targetColumns: filterColumns,
-              filterMode,
-            }
-          : undefined,
-      label: buildConnectionLabel(
-        component,
-        selectedOutput,
-        allComponents.find((c) => c.id === selectedTargetId),
-        selectedTargetInput,
-        filterColumns
-      ),
-    });
-
-    if (!initial) {
-      setSelectedTargetId("");
-      setSelectedTargetInput("");
-      setFilterColumns([]);
-    }
-  };
-
-  return (
-    <div className="space-y-2 rounded border border-dashed p-3">
-      {onCancel && (
-        <div className="flex items-center justify-between">
-          <p className="text-[10px] font-medium text-muted-foreground">연결 수정</p>
-          <button onClick={onCancel} className="text-muted-foreground hover:text-foreground">
-            <X className="h-3 w-3" />
-          </button>
-        </div>
-      )}
-      {!onCancel && (
-        <p className="text-[10px] font-medium text-muted-foreground">새 연결 추가</p>
-      )}
-
-      <div className="space-y-1">
-        <span className="text-[10px] text-muted-foreground">보내는 값</span>
-        <Select value={selectedOutput} onValueChange={setSelectedOutput}>
-          <SelectTrigger className="h-7 text-xs">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {meta.sendable.map((s) => (
-              <SelectItem key={s.key} value={s.key} className="text-xs">
-                {s.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="space-y-1">
-        <span className="text-[10px] text-muted-foreground">받는 컴포넌트</span>
        <Select
          value={selectedTargetId}
          onValueChange={(v) => {
            setSelectedTargetId(v);
-            setSelectedTargetInput("");
-            setFilterColumns([]);
+            setIsSubTable(false);
+            setTargetColumn("");
          }}
        >
          <SelectTrigger className="h-7 text-xs">
@@ -552,109 +345,62 @@ function FilterConnectionForm({
        </Select>
      </div>

-      {targetMeta && (
-        <div className="space-y-1">
-          <span className="text-[10px] text-muted-foreground">받는 방식</span>
-          <Select value={selectedTargetInput} onValueChange={setSelectedTargetInput}>
-            <SelectTrigger className="h-7 text-xs">
-              <SelectValue placeholder="선택" />
-            </SelectTrigger>
-            <SelectContent>
-              {targetMeta.receivable.map((r) => (
-                <SelectItem key={r.key} value={r.key} className="text-xs">
-                  {r.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      )}
-
-      {selectedTargetInput && !isEventTypeConnection(meta, selectedOutput, targetMeta, selectedTargetInput) && (
-        <div className="space-y-2 rounded bg-muted p-2">
-          <p className="text-[10px] font-medium text-muted-foreground">필터할 컬럼</p>
-
-          {dbColumnsLoading ? (
-            <div className="flex items-center gap-2 py-2">
-              <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
-              <span className="text-[10px] text-muted-foreground">컬럼 조회 중...</span>
-            </div>
-          ) : hasAnyColumns ? (
-            <div className="space-y-2">
-              {displayColumns.length > 0 && (
-                <div className="space-y-1">
-                  <p className="text-[9px] font-medium text-emerald-600">화면 표시 컬럼</p>
-                  {displayColumns.map((col) => (
-                    <div key={col} className="flex items-center gap-2">
-                      <Checkbox
-                        id={`col-${col}-${initial?.id || "new"}`}
-                        checked={filterColumns.includes(col)}
-                        onCheckedChange={() => toggleColumn(col)}
-                      />
-                      <label
-                        htmlFor={`col-${col}-${initial?.id || "new"}`}
-                        className="cursor-pointer text-xs"
-                      >
-                        {col}
-                      </label>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {dataOnlyColumns.length > 0 && (
-                <div className="space-y-1">
-                  {displayColumns.length > 0 && (
-                    <div className="my-1 h-px bg-muted/80" />
-                  )}
-                  <p className="text-[9px] font-medium text-amber-600">데이터 전용 컬럼</p>
-                  {dataOnlyColumns.map((col) => (
-                    <div key={col} className="flex items-center gap-2">
-                      <Checkbox
-                        id={`col-${col}-${initial?.id || "new"}`}
-                        checked={filterColumns.includes(col)}
-                        onCheckedChange={() => toggleColumn(col)}
-                      />
-                      <label
-                        htmlFor={`col-${col}-${initial?.id || "new"}`}
-                        className="cursor-pointer text-xs text-muted-foreground"
-                      >
-                        {col}
-                      </label>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          ) : (
-            <Input
-              value={filterColumns[0] || ""}
-              onChange={(e) => setFilterColumns(e.target.value ? [e.target.value] : [])}
-              placeholder="컬럼명 입력"
-              className="h-7 text-xs"
+      {isFilterConnection && selectedTargetId && subTableName && (
+        <div className="space-y-2 rounded bg-muted/50 p-2">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id={`isSubTable_${component.id}`}
+              checked={isSubTable}
+              onCheckedChange={(v) => {
+                setIsSubTable(v === true);
+                if (!v) setTargetColumn("");
+              }}
            />
-          )}
-
-          {filterColumns.length > 0 && (
-            <p className="text-[10px] text-primary">
-              {filterColumns.length}개 컬럼 중 하나라도 일치하면 표시
-            </p>
-          )}
-
-          <div className="space-y-1">
-            <p className="text-[10px] text-muted-foreground">필터 방식</p>
-            <Select value={filterMode} onValueChange={(v: any) => setFilterMode(v)}>
-              <SelectTrigger className="h-7 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="contains" className="text-xs">포함</SelectItem>
-                <SelectItem value="equals" className="text-xs">일치</SelectItem>
-                <SelectItem value="starts_with" className="text-xs">시작</SelectItem>
-                <SelectItem value="range" className="text-xs">범위</SelectItem>
-              </SelectContent>
-            </Select>
+            <label htmlFor={`isSubTable_${component.id}`} className="text-[10px] text-muted-foreground cursor-pointer">
+              하위 테이블 기준으로 필터 ({subTableName})
+            </label>
          </div>
+
+          {isSubTable && (
+            <div className="space-y-2 pl-5">
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">대상 컬럼</span>
+                {loadingColumns ? (
+                  <div className="flex items-center gap-1 py-1">
+                    <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+                    <span className="text-[10px] text-muted-foreground">컬럼 로딩 중...</span>
+                  </div>
+                ) : (
+                  <Select value={targetColumn} onValueChange={setTargetColumn}>
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue placeholder="컬럼 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {subColumns.filter(Boolean).map((col) => (
+                        <SelectItem key={col} value={col} className="text-xs">
+                          {col}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">비교 방식</span>
+                <Select value={filterMode} onValueChange={setFilterMode}>
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="equals" className="text-xs">일치 (equals)</SelectItem>
+                    <SelectItem value="contains" className="text-xs">포함 (contains)</SelectItem>
+                    <SelectItem value="starts_with" className="text-xs">시작 (starts_with)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
        </div>
      )}

@@ -662,7 +408,7 @@ function FilterConnectionForm({
        size="sm"
        variant="outline"
        className="h-7 w-full text-xs"
-        disabled={!selectedOutput || !selectedTargetId || !selectedTargetInput}
+        disabled={!selectedTargetId}
        onClick={handleSubmit}
      >
        {!initial && <Plus className="mr-1 h-3 w-3" />}
@@ -722,32 +468,3 @@ function ReceiveSection({
  );
 }

-// ========================================
-// 유틸
-// ========================================
-
-function isEventTypeConnection(
-  sourceMeta: ComponentConnectionMeta | undefined,
-  outputKey: string,
-  targetMeta: ComponentConnectionMeta | null | undefined,
-  inputKey: string,
-): boolean {
-  const sourceItem = sourceMeta?.sendable?.find((s) => s.key === outputKey);
-  const targetItem = targetMeta?.receivable?.find((r) => r.key === inputKey);
-  return sourceItem?.type === "event" || targetItem?.type === "event";
-}
-
-function buildConnectionLabel(
-  source: PopComponentDefinitionV5,
-  _outputKey: string,
-  target: PopComponentDefinitionV5 | undefined,
-  _inputKey: string,
-  columns?: string[]
-): string {
-  const srcLabel = source.label || source.id;
-  const tgtLabel = target?.label || target?.id || "?";
-  const colInfo = columns && columns.length > 0
-    ? ` [${columns.join(", ")}]`
-    : "";
-  return `${srcLabel} → ${tgtLabel}${colInfo}`;
-}
--- a/frontend/components/pop/designer/renderers/PopRenderer.tsx
+++ b/frontend/components/pop/designer/renderers/PopRenderer.tsx
@@ -72,10 +72,14 @@ const COMPONENT_TYPE_LABELS: Record<PopComponentType, string> = {
  "pop-icon": "아이콘",
  "pop-dashboard": "대시보드",
  "pop-card-list": "카드 목록",
+  "pop-card-list-v2": "카드 목록 V2",
  "pop-button": "버튼",
  "pop-string-list": "리스트 목록",
  "pop-search": "검색",
+  "pop-status-bar": "상태 바",
  "pop-field": "입력",
+  "pop-scanner": "스캐너",
+  "pop-profile": "프로필",
 };

 // ========================================
@@ -554,7 +558,7 @@ function ComponentContent({ component, effectivePosition, isDesignMode, isSelect
    if (ActualComp) {
      // 아이콘 컴포넌트는 클릭 이벤트가 필요하므로 pointer-events 허용
      // CardList 컴포넌트도 버튼 클릭이 필요하므로 pointer-events 허용
-      const needsPointerEvents = component.type === "pop-icon" || component.type === "pop-card-list";
+      const needsPointerEvents = component.type === "pop-icon" || component.type === "pop-card-list" || component.type === "pop-card-list-v2";
      
      return (
        <div className={cn(
--- a/frontend/components/pop/designer/types/pop-layout.ts
+++ b/frontend/components/pop/designer/types/pop-layout.ts
@@ -9,7 +9,7 @@
 /**
 * POP 컴포넌트 타입
 */
-export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-button" | "pop-string-list" | "pop-search" | "pop-field";
+export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-card-list-v2" | "pop-button" | "pop-string-list" | "pop-search" | "pop-status-bar" | "pop-field" | "pop-scanner" | "pop-profile";

 /**
 * 데이터 흐름 정의
@@ -33,6 +33,7 @@ export interface PopDataConnection {
    targetColumn: string;
    targetColumns?: string[];
    filterMode: "equals" | "contains" | "starts_with" | "range";
+    isSubTable?: boolean;
  };
  label?: string;
 }
@@ -358,10 +359,14 @@ export const DEFAULT_COMPONENT_GRID_SIZE: Record<PopComponentType, { colSpan: nu
  "pop-icon": { colSpan: 1, rowSpan: 2 },
  "pop-dashboard": { colSpan: 6, rowSpan: 3 },
  "pop-card-list": { colSpan: 4, rowSpan: 3 },
+  "pop-card-list-v2": { colSpan: 4, rowSpan: 3 },
  "pop-button": { colSpan: 2, rowSpan: 1 },
  "pop-string-list": { colSpan: 4, rowSpan: 3 },
-  "pop-search": { colSpan: 4, rowSpan: 2 },
+  "pop-search": { colSpan: 2, rowSpan: 1 },
+  "pop-status-bar": { colSpan: 6, rowSpan: 1 },
  "pop-field": { colSpan: 6, rowSpan: 2 },
+  "pop-scanner": { colSpan: 1, rowSpan: 1 },
+  "pop-profile": { colSpan: 1, rowSpan: 1 },
 };

 /**
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -605,6 +605,23 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
    }
  }, [relatedButtonFilter]);

+  // TableOptionsContext 필터 변경 시 데이터 재조회 (TableSearchWidget 연동)
+  const filtersAppliedRef = useRef(false);
+  useEffect(() => {
+    // 초기 렌더 시 빈 배열은 무시 (불필요한 재조회 방지)
+    if (!filtersAppliedRef.current && filters.length === 0) return;
+    filtersAppliedRef.current = true;
+
+    const filterSearchParams: Record<string, any> = {};
+    filters.forEach((f) => {
+      if (f.value !== "" && f.value !== undefined && f.value !== null) {
+        filterSearchParams[f.columnName] = f.value;
+      }
+    });
+    loadData(1, { ...searchValues, ...filterSearchParams });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters]);
+
  // 카테고리 타입 컬럼의 값 매핑 로드
  useEffect(() => {
    const loadCategoryMappings = async () => {
--- a/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
@@ -541,8 +541,31 @@ export function DataFilterConfigPanel({
                        {/* 카테고리 타입이고 값 타입이 category인 경우 셀렉트박스 */}
                        {filter.valueType === "category" && categoryValues[filter.columnName] ? (
                          <Select
-                            value={Array.isArray(filter.value) ? filter.value[0] : filter.value}
-                            onValueChange={(value) => handleFilterChange(filter.id, "value", value)}
+                            value={
+                              filter.operator === "in" || filter.operator === "not_in"
+                                ? Array.isArray(filter.value) && filter.value.length > 0
+                                  ? filter.value[0]
+                                  : ""
+                                : Array.isArray(filter.value)
+                                  ? filter.value[0]
+                                  : filter.value
+                            }
+                            onValueChange={(selectedValue) => {
+                              if (filter.operator === "in" || filter.operator === "not_in") {
+                                const currentValues = Array.isArray(filter.value) ? filter.value : [];
+                                if (currentValues.includes(selectedValue)) {
+                                  handleFilterChange(
+                                    filter.id,
+                                    "value",
+                                    currentValues.filter((v) => v !== selectedValue),
+                                  );
+                                } else {
+                                  handleFilterChange(filter.id, "value", [...currentValues, selectedValue]);
+                                }
+                              } else {
+                                handleFilterChange(filter.id, "value", selectedValue);
+                              }
+                            }}
                          >
                            <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
                              <SelectValue
--- a/frontend/components/screen/table-options/TableOptionsToolbar.tsx
+++ b/frontend/components/screen/table-options/TableOptionsToolbar.tsx
@@ -109,9 +109,8 @@ export const TableOptionsToolbar: React.FC = () => {
            onOpenChange={setColumnPanelOpen}
          />
          <FilterPanel
-            tableId={selectedTableId}
-            open={filterPanelOpen}
-            onOpenChange={setFilterPanelOpen}
+            isOpen={filterPanelOpen}
+            onClose={() => setFilterPanelOpen(false)}
          />
          <GroupingPanel
            tableId={selectedTableId}
--- a/frontend/components/table-category/CategoryValueManagerTree.tsx
+++ b/frontend/components/table-category/CategoryValueManagerTree.tsx
@@ -288,6 +288,7 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
  const [parentValue, setParentValue] = useState<CategoryValue | null>(null);
+  const [continuousAdd, setContinuousAdd] = useState(false);
  const [editingValue, setEditingValue] = useState<CategoryValue | null>(null);
  const [deletingValue, setDeletingValue] = useState<CategoryValue | null>(null);

@@ -512,21 +513,24 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
      const response = await createCategoryValue(input);
      if (response.success) {
        toast.success("카테고리가 추가되었습니다");
-        // 폼 초기화 (모달은 닫지 않고 연속 입력)
-        setFormData((prev) => ({
-          ...prev,
-          valueCode: "",
-          valueLabel: "",
-          description: "",
-          color: "",
-        }));
-        setTimeout(() => addNameRef.current?.focus(), 50);
-        // 기존 펼침 상태 유지하면서 데이터 새로고침
        await loadTree(true);
-        // 부모 노드만 펼치기 (하위 추가 시)
        if (parentValue) {
          setExpandedNodes((prev) => new Set([...prev, parentValue.valueId]));
        }
+
+        if (continuousAdd) {
+          setFormData((prev) => ({
+            ...prev,
+            valueCode: "",
+            valueLabel: "",
+            description: "",
+            color: "",
+          }));
+          setTimeout(() => addNameRef.current?.focus(), 50);
+        } else {
+          setFormData({ valueCode: "", valueLabel: "", description: "", color: "", isActive: true });
+          setIsAddModalOpen(false);
+        }
      } else {
        toast.error(response.error || "추가 실패");
      }
@@ -818,6 +822,19 @@ export const CategoryValueManagerTree: React.FC<CategoryValueManagerTreeProps> =
              추가
            </Button>
          </DialogFooter>
+
+          <div className="border-t px-4 py-3">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="tree-continuous-add"
+                checked={continuousAdd}
+                onCheckedChange={(checked) => setContinuousAdd(checked as boolean)}
+              />
+              <Label htmlFor="tree-continuous-add" className="cursor-pointer text-sm font-normal select-none">
+                저장 후 계속 입력 (연속 등록 모드)
+              </Label>
+            </div>
+          </div>
        </DialogContent>
      </Dialog>

--- a/frontend/components/unified/UnifiedSelect.tsx
+++ b/frontend/components/unified/UnifiedSelect.tsx
@@ -629,7 +629,7 @@ export const UnifiedSelect = forwardRef<HTMLDivElement, UnifiedSelectProps>((pro
              ): SelectOption[] => {
                const result: SelectOption[] = [];
                for (const item of items) {
-                  const prefix = depth > 0 ? "  ".repeat(depth) + "└ " : "";
+                  const prefix = depth > 0 ? "\u00A0\u00A0\u00A0".repeat(depth) + "└ " : "";
                  result.push({
                    value: String(item.valueId), // valueId를 value로 사용 (채번 매핑과 일치)
                    label: prefix + item.valueLabel,
--- a/frontend/components/v2/V2Input.tsx
+++ b/frontend/components/v2/V2Input.tsx
@@ -909,10 +909,10 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
        const templateSuffix = templateParts.length > 1 ? templateParts.slice(1).join("") : "";

        return (
-          <div className="flex h-full items-center rounded-md border">
+          <div className="numbering-segment border-input flex h-full items-center rounded-md border outline-none transition-[color,box-shadow]">
            {/* 고정 접두어 */}
            {templatePrefix && (
-              <span className="text-muted-foreground bg-muted flex h-full items-center px-2 text-sm">
+              <span className="text-muted-foreground bg-muted flex h-full items-center rounded-l-[5px] px-2 text-sm">
                {templatePrefix}
              </span>
            )}
@@ -945,13 +945,13 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
                }
              }}
              placeholder="입력"
-              className="h-full min-w-[60px] flex-1 bg-transparent px-2 text-sm focus-visible:outline-none"
+              className="h-full min-w-[60px] flex-1 border-0 bg-transparent px-2 text-sm ring-0"
              disabled={disabled || isGeneratingNumbering}
-              style={inputTextStyle}
+              style={{ ...inputTextStyle, outline: 'none' }}
            />
            {/* 고정 접미어 */}
            {templateSuffix && (
-              <span className="text-muted-foreground bg-muted flex h-full items-center px-2 text-sm">
+              <span className="text-muted-foreground bg-muted flex h-full items-center rounded-r-[5px] px-2 text-sm">
                {templateSuffix}
              </span>
            )}
--- a/frontend/components/v2/V2Select.tsx
+++ b/frontend/components/v2/V2Select.tsx
@@ -901,7 +901,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>((props, ref) =
              ): SelectOption[] => {
                const result: SelectOption[] = [];
                for (const item of items) {
-                  const prefix = depth > 0 ? "  ".repeat(depth) + "└ " : "";
+                  const prefix = depth > 0 ? "\u00A0\u00A0\u00A0".repeat(depth) + "└ " : "";
                  result.push({
                    value: item.valueCode, // 🔧 valueCode를 value로 사용
                    label: prefix + item.valueLabel,
--- a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
@@ -375,12 +375,15 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({

  // Entity 조인 컬럼 토글 (추가/제거)
  const toggleEntityJoinColumn = useCallback(
-    (joinTableName: string, sourceColumn: string, refColumnName: string, refColumnLabel: string, displayField: string) => {
+    (joinTableName: string, sourceColumn: string, refColumnName: string, refColumnLabel: string, displayField: string, columnType?: string) => {
      const currentJoins = config.entityJoins || [];
      const existingJoinIdx = currentJoins.findIndex(
        (j) => j.sourceColumn === sourceColumn && j.referenceTable === joinTableName,
      );

+      let newEntityJoins = [...currentJoins];
+      let newColumns = [...config.columns];
+
      if (existingJoinIdx >= 0) {
        const existingJoin = currentJoins[existingJoinIdx];
        const existingColIdx = existingJoin.columns.findIndex((c) => c.referenceField === refColumnName);
@@ -388,34 +391,49 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
        if (existingColIdx >= 0) {
          const updatedColumns = existingJoin.columns.filter((_, i) => i !== existingColIdx);
          if (updatedColumns.length === 0) {
-            updateConfig({ entityJoins: currentJoins.filter((_, i) => i !== existingJoinIdx) });
+            newEntityJoins = newEntityJoins.filter((_, i) => i !== existingJoinIdx);
          } else {
-            const updated = [...currentJoins];
-            updated[existingJoinIdx] = { ...existingJoin, columns: updatedColumns };
-            updateConfig({ entityJoins: updated });
+            newEntityJoins[existingJoinIdx] = { ...existingJoin, columns: updatedColumns };
          }
+          // config.columns에서도 제거
+          newColumns = newColumns.filter(c => !(c.key === displayField && c.isJoinColumn));
        } else {
-          const updated = [...currentJoins];
-          updated[existingJoinIdx] = {
+          newEntityJoins[existingJoinIdx] = {
            ...existingJoin,
            columns: [...existingJoin.columns, { referenceField: refColumnName, displayField }],
          };
-          updateConfig({ entityJoins: updated });
+          // config.columns에 추가
+          newColumns.push({
+            key: displayField,
+            title: refColumnLabel,
+            width: "auto",
+            visible: true,
+            editable: false,
+            isJoinColumn: true,
+            inputType: columnType || "text",
+          });
        }
      } else {
-        updateConfig({
-          entityJoins: [
-            ...currentJoins,
-            {
-              sourceColumn,
-              referenceTable: joinTableName,
-              columns: [{ referenceField: refColumnName, displayField }],
-            },
-          ],
+        newEntityJoins.push({
+          sourceColumn,
+          referenceTable: joinTableName,
+          columns: [{ referenceField: refColumnName, displayField }],
+        });
+        // config.columns에 추가
+        newColumns.push({
+          key: displayField,
+          title: refColumnLabel,
+          width: "auto",
+          visible: true,
+          editable: false,
+          isJoinColumn: true,
+          inputType: columnType || "text",
        });
      }
+
+      updateConfig({ entityJoins: newEntityJoins, columns: newColumns });
    },
-    [config.entityJoins, updateConfig],
+    [config.entityJoins, config.columns, updateConfig],
  );

  // Entity 조인에 특정 컬럼이 설정되어 있는지 확인
@@ -604,9 +622,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({

  // 컬럼 토글 (현재 테이블 컬럼 - 입력용)
  const toggleInputColumn = (column: ColumnOption) => {
-    const existingIndex = config.columns.findIndex((c) => c.key === column.columnName);
+    const existingIndex = config.columns.findIndex((c) => c.key === column.columnName && !c.isJoinColumn && !c.isSourceDisplay);
    if (existingIndex >= 0) {
-      const newColumns = config.columns.filter((c) => c.key !== column.columnName);
+      const newColumns = config.columns.filter((_, i) => i !== existingIndex);
      updateConfig({ columns: newColumns });
    } else {
      // 컬럼의 inputType과 detailSettings 정보 포함
@@ -651,7 +669,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
  };

  const isColumnAdded = (columnName: string) => {
-    return config.columns.some((c) => c.key === columnName && !c.isSourceDisplay);
+    return config.columns.some((c) => c.key === columnName && !c.isSourceDisplay && !c.isJoinColumn);
  };

  const isSourceColumnSelected = (columnName: string) => {
@@ -761,10 +779,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
  return (
    <div className="space-y-4">
      <Tabs defaultValue="basic" className="w-full">
-        <TabsList className="grid w-full grid-cols-3">
+        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="basic" className="text-xs">기본</TabsTrigger>
          <TabsTrigger value="columns" className="text-xs">컬럼</TabsTrigger>
-          <TabsTrigger value="entityJoin" className="text-xs">Entity 조인</TabsTrigger>
        </TabsList>

        {/* 기본 설정 탭 */}
@@ -1365,6 +1382,84 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
            )}
          </div>

+          {/* ===== 🆕 Entity 조인 컬럼 (표시용) ===== */}
+          <div className="space-y-2 mt-4">
+            <div className="flex items-center gap-2">
+              <Link2 className="h-4 w-4 text-primary" />
+              <Label className="text-xs font-medium text-primary">Entity 조인 컬럼 (읽기전용)</Label>
+            </div>
+            <p className="text-[10px] text-muted-foreground">
+              FK 컬럼을 기반으로 참조 테이블의 데이터를 자동으로 조회하여 표시합니다.
+            </p>
+            
+            {loadingEntityJoins ? (
+              <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
+            ) : entityJoinData.joinTables.length === 0 ? (
+              <p className="text-muted-foreground py-2 text-xs">
+                {entityJoinTargetTable
+                  ? `${entityJoinTargetTable} 테이블에 Entity 조인 가능한 컬럼이 없습니다`
+                  : "저장 테이블을 먼저 설정해주세요"}
+              </p>
+            ) : (
+              <div className="space-y-3">
+                {entityJoinData.joinTables.map((joinTable, tableIndex) => {
+                  const sourceColumn = (joinTable as any).joinConfig?.sourceColumn || "";
+
+                  return (
+                    <div key={tableIndex} className="space-y-1">
+                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
+                        <Link2 className="h-3 w-3" />
+                        <span>{joinTable.tableName}</span>
+                        <span className="text-muted-foreground">({sourceColumn})</span>
+                      </div>
+                      <div className="max-h-40 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
+                        {joinTable.availableColumns.map((column, colIndex) => {
+                          const isActive = isEntityJoinColumnActive(
+                            joinTable.tableName,
+                            sourceColumn,
+                            column.columnName,
+                          );
+                          const matchingCol = config.columns.find((c) => c.key === column.columnName && c.isJoinColumn);
+                          const displayField = matchingCol?.key || column.columnName;
+
+                          return (
+                            <div
+                              key={colIndex}
+                              className={cn(
+                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                                isActive && "bg-primary/10",
+                              )}
+                              onClick={() =>
+                                toggleEntityJoinColumn(
+                                  joinTable.tableName,
+                                  sourceColumn,
+                                  column.columnName,
+                                  column.columnLabel,
+                                  displayField,
+                                  column.inputType || column.dataType
+                                )
+                              }
+                            >
+                              <Checkbox
+                                checked={isActive}
+                                className="pointer-events-none h-3.5 w-3.5"
+                              />
+                              <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
+                              <span className="truncate text-xs">{column.columnLabel}</span>
+                              <span className="ml-auto text-[10px] text-primary/80">
+                                {column.inputType || column.dataType}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
          {/* 선택된 컬럼 상세 설정 - 🆕 모든 컬럼 통합, 순서 변경 가능 */}
          {config.columns.length > 0 && (
            <>
@@ -1381,7 +1476,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                      <div
                        className={cn(
                          "flex items-center gap-2 rounded-md border p-2",
-                          col.isSourceDisplay ? "border-primary/20 bg-primary/10/50" : "border-border bg-muted/30",
+                          (col.isSourceDisplay || col.isJoinColumn) ? "border-primary/20 bg-primary/10/50" : "border-border bg-muted/30",
                          col.hidden && "opacity-50",
                        )}
                        draggable
@@ -1403,7 +1498,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                        <GripVertical className="text-muted-foreground h-3 w-3 cursor-grab flex-shrink-0" />
                        
                        {/* 확장/축소 버튼 (입력 컬럼만) */}
-                        {!col.isSourceDisplay && (
+                        {(!col.isSourceDisplay && !col.isJoinColumn) && (
                          <button
                            type="button"
                            onClick={() => setExpandedColumn(expandedColumn === col.key ? null : col.key)}
@@ -1419,8 +1514,10 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                        
                        {col.isSourceDisplay ? (
                          <Link2 className="text-primary h-3 w-3 flex-shrink-0" title="소스 표시 (읽기 전용)" />
+                        ) : col.isJoinColumn ? (
+                          <Link2 className="text-amber-500 h-3 w-3 flex-shrink-0" title="Entity 조인 (읽기 전용)" />
                        ) : (
-                      <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                          <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                        )}
                        
                      <Input
@@ -1431,7 +1528,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                      />
                        
                        {/* 히든 토글 (입력 컬럼만) */}
-                        {!col.isSourceDisplay && (
+                        {(!col.isSourceDisplay && !col.isJoinColumn) && (
                          <button
                            type="button"
                            onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
@@ -1446,12 +1543,12 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                        )}
                        
                        {/* 자동입력 표시 아이콘 */}
-                        {!col.isSourceDisplay && col.autoFill?.type && col.autoFill.type !== "none" && (
+                        {(!col.isSourceDisplay && !col.isJoinColumn) && col.autoFill?.type && col.autoFill.type !== "none" && (
                          <Wand2 className="h-3 w-3 text-purple-500 flex-shrink-0" title="자동 입력" />
                        )}
                        
                        {/* 편집 가능 토글 */}
-                        {!col.isSourceDisplay && (
+                        {(!col.isSourceDisplay && !col.isJoinColumn) && (
                          <button
                            type="button"
                            onClick={() => updateColumnProp(col.key, "editable", !(col.editable ?? true))}
@@ -1474,6 +1571,13 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                          onClick={() => {
                            if (col.isSourceDisplay) {
                              toggleSourceDisplayColumn({ columnName: col.key, displayName: col.title });
+                            } else if (col.isJoinColumn) {
+                              const newColumns = config.columns.filter(c => c.key !== col.key);
+                              const newEntityJoins = config.entityJoins?.map(join => ({
+                                ...join,
+                                columns: join.columns.filter(c => c.displayField !== col.key)
+                              })).filter(join => join.columns.length > 0);
+                              updateConfig({ columns: newColumns, entityJoins: newEntityJoins });
                            } else {
                              toggleInputColumn({ columnName: col.key, displayName: col.title });
                            }
@@ -1485,7 +1589,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                    </div>
                      
                      {/* 확장된 상세 설정 (입력 컬럼만) */}
-                      {!col.isSourceDisplay && expandedColumn === col.key && (
+                      {(!col.isSourceDisplay && !col.isJoinColumn) && expandedColumn === col.key && (
                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
                          {/* 자동 입력 설정 */}
                          <div className="space-y-1">
@@ -1812,120 +1916,6 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
          )}
        </TabsContent>

-        {/* Entity 조인 설정 탭 */}
-        <TabsContent value="entityJoin" className="mt-4 space-y-4">
-          <div className="space-y-2">
-            <div>
-              <h3 className="text-sm font-semibold">Entity 조인 연결</h3>
-              <p className="text-muted-foreground text-[10px]">
-                FK 컬럼을 기반으로 참조 테이블의 데이터를 자동으로 조회하여 표시합니다
-              </p>
-            </div>
-            <hr className="border-border" />
-
-            {loadingEntityJoins ? (
-              <p className="text-muted-foreground py-2 text-center text-xs">로딩 중...</p>
-            ) : entityJoinData.joinTables.length === 0 ? (
-              <div className="rounded-md border border-dashed p-4 text-center">
-                <p className="text-muted-foreground text-xs">
-                  {entityJoinTargetTable
-                    ? `${entityJoinTargetTable} 테이블에 Entity 조인 가능한 컬럼이 없습니다`
-                    : "저장 테이블을 먼저 설정해주세요"}
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-3">
-                {entityJoinData.joinTables.map((joinTable, tableIndex) => {
-                  const sourceColumn = (joinTable as any).joinConfig?.sourceColumn || "";
-
-                  return (
-                    <div key={tableIndex} className="space-y-1">
-                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
-                        <Link2 className="h-3 w-3" />
-                        <span>{joinTable.tableName}</span>
-                        <span className="text-muted-foreground">({sourceColumn})</span>
-                      </div>
-                      <div className="max-h-40 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
-                        {joinTable.availableColumns.map((column, colIndex) => {
-                          const isActive = isEntityJoinColumnActive(
-                            joinTable.tableName,
-                            sourceColumn,
-                            column.columnName,
-                          );
-                          const matchingCol = config.columns.find((c) => c.key === column.columnName);
-                          const displayField = matchingCol?.key || column.columnName;
-
-                          return (
-                            <div
-                              key={colIndex}
-                              className={cn(
-                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
-                                isActive && "bg-primary/10",
-                              )}
-                              onClick={() =>
-                                toggleEntityJoinColumn(
-                                  joinTable.tableName,
-                                  sourceColumn,
-                                  column.columnName,
-                                  column.columnLabel,
-                                  displayField,
-                                )
-                              }
-                            >
-                              <Checkbox
-                                checked={isActive}
-                                className="pointer-events-none h-3.5 w-3.5"
-                              />
-                              <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
-                              <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="ml-auto text-[10px] text-primary/80">
-                                {column.inputType || column.dataType}
-                              </span>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-
-            {/* 현재 설정된 Entity 조인 목록 */}
-            {config.entityJoins && config.entityJoins.length > 0 && (
-              <div className="space-y-2">
-                <h4 className="text-xs font-medium">설정된 조인</h4>
-                <div className="space-y-1">
-                  {config.entityJoins.map((join, idx) => (
-                    <div key={idx} className="flex items-center gap-1 rounded border bg-muted/30 px-2 py-1 text-[10px]">
-                      <Database className="h-3 w-3 text-primary" />
-                      <span className="font-medium">{join.sourceColumn}</span>
-                      <ArrowRight className="h-3 w-3 text-muted-foreground" />
-                      <span>{join.referenceTable}</span>
-                      <span className="text-muted-foreground">
-                        ({join.columns.map((c) => c.referenceField).join(", ")})
-                      </span>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => {
-                          updateConfig({
-                            entityJoins: config.entityJoins!.filter((_, i) => i !== idx),
-                          });
-                        }}
-                        className="ml-auto h-4 w-4 p-0 text-destructive"
-                      >
-                        <Trash2 className="h-3 w-3" />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        </TabsContent>
-
      </Tabs>
    </div>
  );