From 5916d48e99ab510c84add9248414afb2c363d510 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 30 Jun 2025 15:53:16 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=A1=9C=EA=B3=A0=EC=97=90=20?=
 =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/components/src/ui/header/index.tsx     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 1b60b1c74..ce9419ef1 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -1,6 +1,6 @@
 import "./header.css";
 
-import { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { images } from "@common/assets";
 import { ENDPOINT } from "../../config";
@@ -20,10 +20,13 @@ import {
 } from "../dropdown-menu";
 import { Button } from "../button";
 import { SidebarTrigger } from "../sidebar";
+import { Skeleton } from "../skeleton";
 
 const siteId = getCookie("site-id-key") ?? "";
 
 export function Header({ viewOnly }: { viewOnly?: boolean }) {
+  const [mounted, setMounted] = useState(false);
+
   const { data: userInfo } = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.USERS],
     queryFn: () => getUserInfo(),
@@ -96,12 +99,20 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
     return () => clearTimeout(timer);
   }, [userPopupList, openPopup]);
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <header className="sticky top-0 z-30 box-border flex h-[5rem] w-full items-center justify-between border-b border-solid border-border bg-background">
       <div className="flex items-center px-6">
         <SidebarTrigger className="size-12 !bg-transparent p-2 hover:!bg-accent [&>svg]:!size-full [&>svg]:text-foreground" />
         <h1 className="flex items-center gap-4">
-          <img src={getLogoImage()} className="h-[3rem]" alt="logo" />
+          {mounted ? (
+            <img src={getLogoImage()} className="h-[3rem]" alt="logo" />
+          ) : (
+            <Skeleton className="h-[3rem] w-[15rem]" />
+          )}
           <span className="text-[1.8rem] font-semibold text-foreground">
             {siteInfo?.siteNm}
           </span>