refactor: 로고에 스켈레톤 적용

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>