[apps/cs] feat: 신규 푸터 레이아웃 작업

packages/common/components/package.json

@@ -58,6 +58,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.13",
+    "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",

packages/common/components/src/api/site.ts

@@ -36,5 +36,5 @@ export const getSiteInfo = async (siteId: string) => {
       },
     },
   );
-  return response.json();
+  return response.json() as Promise<SiteInfo>;
 };

packages/common/components/src/ui/footer/index.tsx

@@ -0,0 +1,68 @@
+import { useQuery } from "@tanstack/react-query";
+import Autoplay from "embla-carousel-autoplay";
+import { getConfig } from "@common/config";
+import { ENDPOINT } from "../../config";
+import { getSiteInfo } from "../../api";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "../carousel";
+import { useRef } from "react";
+
+const appConfig = getConfig();
+const siteId = appConfig.SITE_ID ?? "";
+
+export function Footer() {
+  const { data: siteInfo } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITES, siteId],
+    queryFn: () => getSiteInfo(siteId),
+  });
+
+  const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
+
+  return (
+    <footer className="flex w-full shrink-0 items-start border-t border-solid border-border bg-background px-6 py-8">
+      <div className="w-1/2">
+        <h6 className="mb-4 text-2xl font-bold">{siteInfo?.siteExpln ?? ""}</h6>
+        <p className="my-1 text-xl opacity-60">
+          전화: {siteInfo?.telNo ?? ""} / 팩스: {siteInfo?.faxNumber ?? ""}
+        </p>
+        <p className="my-1 text-xl opacity-60">{siteInfo?.lwndCn ?? ""}</p>
+        <p className="my-1 text-xl opacity-60">
+          본 시스템은 Chrome, Firefox, Safari, Edge 브라우저에 최적화되어
+          있습니다.
+        </p>
+      </div>
+      <div className="flex w-1/2 flex-col">
+        <div className="flex justify-end gap-4">
+          <span className="text-xl">개인정보처리방침</span>
+          <span className="text-xl">이용약관</span>
+          <span className="text-xl">사이트맵</span>
+          <span className="text-xl">고객센터</span>
+        </div>
+        <Carousel
+          plugins={[plugin.current]}
+          opts={{ loop: true }}
+          className="relative my-8 h-32"
+        >
+          <CarouselContent>
+            {Array.from({ length: 10 }).map((_, i) => (
+              <CarouselItem key={`banner-${i}`} className="basis-1/3">
+                <div className="relative flex h-32 items-center justify-center">
+                  <div className="flex h-full w-full items-center justify-center bg-accent">
+                    {`${i + 1}번째 배너`}
+                  </div>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious className="absolute left-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
+          <CarouselNext className="absolute right-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
+        </Carousel>
+      </div>
+    </footer>
+  );
+}

packages/common/components/src/ui/layout/base.tsx

@@ -6,7 +6,7 @@ import type { MenuItem } from "../../api";
 import { SidebarProvider } from "../sidebar";
 import { LNB } from "../lnb";
 import { Header } from "../header";
-import { Footer } from "./footer";
+import { Footer } from "../footer";
 import "./common.css";
 
 export function BaseLayout({
@@ -27,15 +27,13 @@ export function BaseLayout({
           <SidebarProvider>
             <div className="flex-1">
               <Header />
-              <div className="flex h-[calc(100vh-50px)]">
+              <div className="flex">
                 <LNB
                   currentPath={currentPath}
                   handleMenuClick={handleMenuClick}
                 />
-                <div className="flex flex-1 flex-col">
-                  <div className="max-h-[calc(100%-50px)] flex-1 overflow-auto">
-                    {children}
-                  </div>
+                <div className="flex min-h-[calc(100vh-50px)] flex-1 flex-col overflow-auto">
+                  <div className="flex-1">{children}</div>
                   <Footer />
                 </div>
               </div>

packages/common/components/src/ui/layout/footer.tsx

@@ -1,9 +0,0 @@
-export function Footer() {
-  return (
-    <footer className="flex h-[5rem] w-full shrink-0 items-center border-t border-solid border-border bg-background p-4">
-      <p className="text-foreground">
-        © 2025 Ona And All. All Rights Reserved.
-      </p>
-    </footer>
-  );
-}

packages/common/components/src/ui/layout/vbase.tsx

@@ -2,7 +2,7 @@ import { QueryProvider } from "../../provider/query-provider";
 import { SidebarProvider } from "../sidebar";
 import { LNB } from "../lnb";
 import { Header } from "../header";
-import { Footer } from "./footer";
+import { Footer } from "../footer";
 
 import "./common.css";
 import type { QueryClient } from "@tanstack/react-query";

packages/common/components/src/ui/lnb/index.tsx

@@ -247,7 +247,7 @@ export function LNB({
     <Sidebar
       collapsible="icon"
       className={cn(
-        "border-border bg-background px-4 py-[6rem]",
+        "border-border bg-background px-4 pt-[6rem]",
         classNames?.wrapper,
       )}
     >