feat: view only layout 생성

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

@@ -1 +1,2 @@
+export * from "./client";
 export * from "./user";

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;
 };

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>

packages/common/components/src/ui/layout/index.ts

@@ -1 +1,2 @@
 export { BaseLayout } from "./base";
+export { VBaseLayout } from "./vbase";

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>
+  );
+}