컴포넌트 리뉴얼 1.0

frontend/app/(main)/admin/screenMng/page.tsx

@@ -2,15 +2,16 @@
 
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, TestTube2 } from "lucide-react";
 import ScreenList from "@/components/screen/ScreenList";
 import ScreenDesigner from "@/components/screen/ScreenDesigner";
 import TemplateManager from "@/components/screen/TemplateManager";
+import { UnifiedComponentsDemo } from "@/components/unified";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 import { ScreenDefinition } from "@/types/screen";
 
 // 단계별 진행을 위한 타입 정의
-type Step = "list" | "design" | "template";
+type Step = "list" | "design" | "template" | "unified-test";
 
 export default function ScreenManagementPage() {
   const [currentStep, setCurrentStep] = useState<Step>("list");
@@ -34,6 +35,10 @@ export default function ScreenManagementPage() {
       title: "템플릿 관리",
       description: "화면 템플릿을 관리하고 재사용하세요",
     },
+    "unified-test": {
+      title: "Unified 컴포넌트 테스트",
+      description: "10개의 통합 컴포넌트를 테스트합니다",
+    },
   };
 
   // 다음 단계로 이동
@@ -71,13 +76,32 @@ export default function ScreenManagementPage() {
     );
   }
 
+  // Unified 컴포넌트 테스트 모드
+  if (currentStep === "unified-test") {
+    return (
+      <div className="fixed inset-0 z-50 bg-background">
+        <UnifiedComponentsDemo onBack={() => goToStep("list")} />
+      </div>
+    );
+  }
+
   return (
     <div className="flex min-h-screen flex-col bg-background">
       <div className="space-y-6 p-6">
         {/* 페이지 헤더 */}
-        <div className="space-y-2 border-b pb-4">
-          <h1 className="text-3xl font-bold tracking-tight">화면 관리</h1>
-          <p className="text-sm text-muted-foreground">화면을 설계하고 템플릿을 관리합니다</p>
+        <div className="flex items-center justify-between border-b pb-4">
+          <div className="space-y-2">
+            <h1 className="text-3xl font-bold tracking-tight">화면 관리</h1>
+            <p className="text-sm text-muted-foreground">화면을 설계하고 템플릿을 관리합니다</p>
+          </div>
+          <Button
+            variant="outline"
+            onClick={() => goToNextStep("unified-test")}
+            className="h-10 gap-2 text-sm font-medium"
+          >
+            <TestTube2 className="h-4 w-4" />
+            Unified 컴포넌트 테스트
+          </Button>
         </div>
 
         {/* 단계별 내용 */}