fix: prerender 관련 빈 로딩 추가

public/deployLoading.ts

@@ -0,0 +1,66 @@
+// deploy.ts
+
+// 1. 스타일을 추가하는 함수
+function addInlineStyle() {
+  const style = document.createElement("style");
+  style.textContent = `
+    .deploy-loading {
+      width: 100vw; /* 100% 너비 */
+      height: 100vh; /* 100% 높이 */
+      z-index: 1000;
+      position: fixed; /* 화면에 고정 */
+      top: 0;
+      left: 0;
+      background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: white; /* 텍스트 색상 */
+      font-size: 24px; /* 텍스트 크기 */
+    }
+
+    /* 숨겨질 때 사용할 CSS 클래스 */
+    .hidden {
+      display: none;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// 2. 특정 CSS 파일이 로드되면 요소를 숨기거나 제거하는 함수
+function hideOrRemoveElementOnCssLoad(
+  selector: string,
+  cssFileUrl: string,
+  shouldRemove: boolean = false
+) {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = cssFileUrl;
+
+  link.onload = () => {
+    const element = document.querySelector(selector);
+    if (element) {
+      if (shouldRemove) {
+        element.remove(); // 요소를 DOM에서 제거
+      } else {
+        element.classList.add("hidden"); // 요소를 숨기기
+      }
+    }
+  };
+
+  document.head.appendChild(link);
+}
+
+// 3. 실행 로직
+function initialize() {
+  addInlineStyle(); // 인라인 스타일 추가
+  const selector = ".deploy-loading";
+  const cssFileUrl = "/styles/main.css";
+
+  // 특정 CSS 파일이 로드되면 요소를 숨기거나 제거
+  hideOrRemoveElementOnCssLoad(selector, cssFileUrl, false); // 숨기기
+  // hideOrRemoveElementOnCssLoad(selector, cssFileUrl, true); // 제거하기
+}
+
+// 4. 초기화 함수 호출
+initialize();

src/pages/main/Main.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import * as S from "./Main.styled";
 
 import Loading from "@components/commons/loading/Loading";
@@ -59,25 +59,39 @@ const Main = () => {
     }
   };
 
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = `${import.meta.env.VITE_CLIENT_URL}/deployLoading.ts`;
+    script.async = true;
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script); // 컴포넌트 언마운트 시 스크립트 제거
+    };
+  }, []);
+
   if (isLoading) {
     return <Loading />;
   }
 
   return (
-    <S.MainWrapper>
-      {/* <button style={{ color: "white" }} onClick={onClickHi}>
+    <>
+      <div className="deploy-loading" />
+      <S.MainWrapper>
+        {/* <button style={{ color: "white" }} onClick={onClickHi}>
             하이 테스트
           </button>
           <button style={{ color: "white" }} onClick={onClickHello}>
             헬로 테스트
           </button> */}
-      <MainNavigation />
-      <Carousel promotionList={data?.promotionList ?? []} />
-      <Chips handleGenre={handleGenre} />
-      <Floating />
-      <Performance genre={genre} performanceList={data?.performanceList ?? []} />
-      <Footer />
-    </S.MainWrapper>
+        <MainNavigation />
+        <Carousel promotionList={data?.promotionList ?? []} />
+        <Chips handleGenre={handleGenre} />
+        <Floating />
+        <Performance genre={genre} performanceList={data?.performanceList ?? []} />
+        <Footer />
+      </S.MainWrapper>
+    </>
   );
 };
 

tsconfig.app.json

@@ -38,5 +38,5 @@
       "@utils/*": ["src/utils/*"]
     }
   },
-  "include": ["src", "global.d.ts", "api"]
+  "include": ["src", "global.d.ts", "api", "public/deployLoading.ts"]
 }