전체적인 스타일 수정

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

@@ -1,59 +1,49 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CodeCategoryPanel } from "@/components/admin/CodeCategoryPanel";
 import { CodeDetailPanel } from "@/components/admin/CodeDetailPanel";
 import { useSelectedCategory } from "@/hooks/useSelectedCategory";
-// import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거
+import { ScrollToTop } from "@/components/common/ScrollToTop";
 
 export default function CommonCodeManagementPage() {
-  // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
   const { selectedCategoryCode, selectCategory } = useSelectedCategory();
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="w-full max-w-none px-4 py-8 space-y-8">
-        {/* 페이지 제목 */}
-        <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">공통코드 관리</h1>
-            <p className="mt-2 text-gray-600">시스템에서 사용하는 공통코드를 관리합니다</p>
+    <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>
+
+        {/* 메인 콘텐츠 - 좌우 레이아웃 */}
+        <div className="flex flex-col gap-6 lg:flex-row lg:gap-6">
+          {/* 좌측: 카테고리 패널 */}
+          <div className="w-full lg:w-80 lg:border-r lg:pr-6">
+            <div className="space-y-4">
+              <h2 className="text-lg font-semibold">코드 카테고리</h2>
+              <CodeCategoryPanel selectedCategoryCode={selectedCategoryCode} onSelectCategory={selectCategory} />
+            </div>
+          </div>
+
+          {/* 우측: 코드 상세 패널 */}
+          <div className="min-w-0 flex-1 lg:pl-0">
+            <div className="space-y-4">
+              <h2 className="text-lg font-semibold">
+                코드 상세 정보
+                {selectedCategoryCode && (
+                  <span className="ml-2 text-sm font-normal text-muted-foreground">({selectedCategoryCode})</span>
+                )}
+              </h2>
+              <CodeDetailPanel categoryCode={selectedCategoryCode} />
+            </div>
           </div>
         </div>
-
-      {/* 메인 콘텐츠 */}
-      {/* 반응형 레이아웃: PC는 가로, 모바일은 세로 */}
-      <div className="flex flex-col gap-6 lg:flex-row lg:gap-8">
-        {/* 카테고리 패널 - PC에서 좌측 고정 너비, 모바일에서 전체 너비 */}
-        <div className="w-full lg:w-80 lg:flex-shrink-0">
-          <Card className="h-full shadow-sm">
-            <CardHeader className="bg-gray-50/50">
-              <CardTitle className="flex items-center gap-2">📂 코드 카테고리</CardTitle>
-            </CardHeader>
-            <CardContent className="p-0">
-              <CodeCategoryPanel selectedCategoryCode={selectedCategoryCode} onSelectCategory={selectCategory} />
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* 코드 상세 패널 - PC에서 나머지 공간, 모바일에서 전체 너비 */}
-        <div className="min-w-0 flex-1">
-          <Card className="h-fit shadow-sm">
-            <CardHeader className="bg-gray-50/50">
-              <CardTitle className="flex items-center gap-2">
-                📋 코드 상세 정보
-                {selectedCategoryCode && (
-                  <span className="text-muted-foreground text-sm font-normal">({selectedCategoryCode})</span>
-                )}
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="p-0">
-              <CodeDetailPanel categoryCode={selectedCategoryCode} />
-            </CardContent>
-          </Card>
-        </div>
-      </div>
       </div>
+
+      {/* Scroll to Top 버튼 */}
+      <ScrollToTop />
     </div>
   );
 }