From 05f3e48ed690a6583bf31bfd2956c7fdac5e0fe0 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 17 Mar 2025 11:03:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20view=20only=20layout=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/components/src/api/index.ts   |  1 +
 packages/common/components/src/api/user.ts    | 12 ++++----
 .../common/components/src/ui/header/index.tsx | 18 +++++++-----
 .../common/components/src/ui/layout/index.ts  |  1 +
 .../common/components/src/ui/layout/vbase.tsx | 28 +++++++++++++++++++
 5 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 packages/common/components/src/ui/layout/vbase.tsx

diff --git a/packages/common/components/src/api/index.ts b/packages/common/components/src/api/index.ts
index 7616f9e53..6674d19fa 100644
--- a/packages/common/components/src/api/index.ts
+++ b/packages/common/components/src/api/index.ts
@@ -1 +1,2 @@
+export * from "./client";
 export * from "./user";
diff --git a/packages/common/components/src/api/user.ts b/packages/common/components/src/api/user.ts
index 478143e09..36e39461d 100644
--- a/packages/common/components/src/api/user.ts
+++ b/packages/common/components/src/api/user.ts
@@ -1,4 +1,3 @@
-import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "../config";
 import { client } from "./client";
 
@@ -36,10 +35,9 @@ export interface IUser {
   hasPassword: boolean;
 }
 
-export const useUsersQuery = ({ userUniqId }: { userUniqId: string }) => {
-  return useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS],
-    queryFn: () =>
-      client.get<IUser>(`${ENDPOINT.USER_SERVICE.USERS}/${userUniqId}`),
-  });
+export const getUserInfo = async (userUniqId: string) => {
+  const response = await client.get<IUser>(
+    `${ENDPOINT.USER_SERVICE.USERS}/${userUniqId}`,
+  );
+  return response.data;
 };
diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 5baceda02..55bca0be6 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -1,6 +1,7 @@
+import { useQuery } from "@tanstack/react-query";
 import { images } from "@common/assets";
-import { useUsersQuery } from "../../api";
-import { AUTH_USER_ID } from "../../config";
+import { getUserInfo } from "../../api";
+import { AUTH_USER_ID, ENDPOINT } from "../../config";
 import { getToken } from "../../lib";
 import {
   DropdownMenu,
@@ -10,9 +11,12 @@ import {
 } from "../dropdown-menu";
 import { Button } from "../button";
 
-export function Header() {
-  const { data: userInfo } = useUsersQuery({
-    userUniqId: getToken(AUTH_USER_ID) ?? "",
+export function Header({ viewOnly }: { viewOnly?: boolean }) {
+  const userUniqId = getToken(AUTH_USER_ID) ?? "";
+  const { data: userInfo } = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.USERS],
+    queryFn: () => getUserInfo(userUniqId),
+    enabled: !viewOnly,
   });
 
   return (
@@ -32,7 +36,7 @@ export function Header() {
         <DropdownMenuTrigger asChild>
           <Button className="group m-0 flex h-[3rem] items-center !bg-background px-4 py-0 text-label">
             <i className="diveicon di-account-circle static translate-y-0.5 pr-2 text-3xl" />
-            {userInfo?.data.userName}
+            {userInfo?.userName}
             <i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
           </Button>
         </DropdownMenuTrigger>
@@ -40,7 +44,7 @@ export function Header() {
           <DropdownMenuItem>프로필 설정</DropdownMenuItem>
           <div className="flex flex-col items-start gap-0 px-4 py-3">
             <p className="text-base text-label">최종접속일</p>
-            <p>{userInfo?.data.lastLoginDate}</p>
+            <p>{userInfo?.lastLoginDate}</p>
           </div>
           <div className="flex flex-col items-start gap-0 px-4 py-3">
             <p className="text-base text-label">접속 IP</p>
diff --git a/packages/common/components/src/ui/layout/index.ts b/packages/common/components/src/ui/layout/index.ts
index 96148b44a..30c069b90 100644
--- a/packages/common/components/src/ui/layout/index.ts
+++ b/packages/common/components/src/ui/layout/index.ts
@@ -1 +1,2 @@
 export { BaseLayout } from "./base";
+export { VBaseLayout } from "./vbase";
diff --git a/packages/common/components/src/ui/layout/vbase.tsx b/packages/common/components/src/ui/layout/vbase.tsx
new file mode 100644
index 000000000..5a4ca8df4
--- /dev/null
+++ b/packages/common/components/src/ui/layout/vbase.tsx
@@ -0,0 +1,28 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { LNB } from "./lnb";
+import { Header } from "../header";
+import { Footer } from "./footer";
+
+import "./common.css";
+
+const queryClient = new QueryClient();
+
+export function VBaseLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div>
+        <Header viewOnly />
+        <div className="flex h-[calc(100vh-50px)]">
+          <LNB />
+          <div className="flex flex-1 flex-col">
+            <div className="max-h-[calc(100%-50px)] flex-1 overflow-auto">
+              {children}
+            </div>
+            <Footer />
+          </div>
+        </div>
+      </div>
+    </QueryClientProvider>
+  );
+}