fix: 클라이언트 빌드 에러 수정

app/hooks/useAnalytics.ts

@@ -1,13 +1,51 @@
-import { getAnalytics, logEvent as firebaseLogEvent } from "firebase/analytics";
+import {
+  getAnalytics,
+  logEvent as firebaseLogEvent,
+  isSupported,
+} from "firebase/analytics";
+import { useEffect, useState } from "react";
 
 import { isDevMode } from "@/consts/env";
 
 const useAnalytics = () => {
-  const analytics = getAnalytics();
+  const [analytics, setAnalytics] = useState<ReturnType<
+    typeof getAnalytics
+  > | null>(null);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      isSupported()
+        .then((supported) => {
+          if (supported) {
+            const analyticsInstance = getAnalytics();
+            setAnalytics(analyticsInstance);
+          } else {
+            console.warn(
+              "Firebase Analytics is not supported in this environment."
+            );
+          }
+        })
+        .catch((error) => {
+          console.error("Failed to check Firebase Analytics support:", error);
+        });
+    }
+  }, []);
 
   const logEvent = (eventName: string, eventParam: Record<string, any>) => {
     if (isDevMode) return;
-    firebaseLogEvent(analytics, eventName, eventParam);
+
+    if (analytics) {
+      try {
+        firebaseLogEvent(analytics, eventName, eventParam);
+      } catch (error) {
+        console.error("Failed to log event:", error);
+      }
+    } else {
+      console.warn(
+        "Analytics instance is not initialized. Event not logged:",
+        eventName
+      );
+    }
   };
 
   return { logEvent };

app/login/Login.tsx

@@ -8,7 +8,6 @@ import { ADMIN_EMAIL, ADMIN_PASSWORD } from "@/consts/components/login";
 import { useIsLoggedInValue } from "@/components/atoms/account.atom";
 import { usePostLogin } from "@/mutations/postLogin";
 import useCheckSignIn from "@/hooks/useCheckSignIn";
-import Loader from "@/components/Loader/Loader";
 import useChannelTalk from "@/hooks/useChannelTalk";
 import { setCookie } from "@/utils/cookie";
 
@@ -127,10 +126,6 @@ function Login() {
     contectProps,
   };
 
-  if (isLoggedIn) {
-    return <Loader />;
-  }
-
   return <LoginView {...LoginViewProps} />;
 }
 

app/signup/SignUpSuccess.tsx

@@ -17,7 +17,15 @@ import * as S from "./SignUpSuccess.styled";
 import "@/apis/firebase";
 
 function SignUpSuccess() {
-  const isWebView = /APP_NEXTROOM_ANDROID/.test(navigator.userAgent); // 웹뷰에서 실행 중인지 여부 확인
+  const [isWebView, setIsWebView] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const { userAgent } = window.navigator;
+      const mwebviewRegex = /APP_NEXTROOM_ANDROID/i;
+      setIsWebView(mwebviewRegex.test(userAgent));
+    }
+  }, []);
   const [isFinished, setIsFinished] = useState<boolean>(false);
   const [snackInfo, setSnackBarInfo] = useSnackBarInfo();
   const router = useRouter();

app/signup/StoreInfo.tsx

@@ -22,14 +22,27 @@ interface FormValues {
 function StoreInfo() {
   const isLoggedIn = useIsLoggedInValue();
   const [signUpState, setSignUpState] = useSignUpState();
-  const isWebView = /APP_NEXTROOM_ANDROID/.test(navigator.userAgent); // 웹뷰에서 실행 중인지 여부 확인
-  const isMobile =
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(
-      navigator.userAgent
-    );
+  const [isWebView, setIsWebView] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isChecked, setIsChecked] = useState(false);
+
   const { logEvent } = useAnalytics();
 
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const { userAgent } = window.navigator;
+
+      const mwebviewRegex = /APP_NEXTROOM_ANDROID/i;
+      setIsWebView(mwebviewRegex.test(userAgent));
+
+      const mobileRegex =
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i;
+      setIsMobile(mobileRegex.test(userAgent));
+    }
+  }, []);
+
   const type = isWebView ? 3 : isMobile ? 2 : 1;
+
   useEffect(() => {
     logEvent("screen_view", {
       firebase_screen: "sign_up_store_info",
@@ -43,7 +56,7 @@ function StoreInfo() {
     isError = false,
     error,
   } = usePostSignUp();
-  const [isChecked, setIsChecked] = useState(false);
+
   const {
     register,
     handleSubmit,
@@ -57,13 +70,14 @@ function StoreInfo() {
       reason: "",
     },
   });
+
   const formValue = watch();
 
   useEffect(() => {
     setTimeout(() => {
       setFocus("name");
     }, 1000);
-  }, []);
+  }, [setFocus]);
 
   useEffect(() => {
     if (isChecked) {
@@ -74,24 +88,24 @@ function StoreInfo() {
     setTimeout(() => {
       setFocus("reason");
     }, 10);
-  }, [isChecked]);
+  }, [isChecked, reset, setFocus]);
 
   const browserPreventEvent = () => {
     history.pushState(null, "", location.href);
     setSignUpState({ ...signUpState, level: 3 });
   };
 
   useEffect(() => {
-    history.pushState(null, "", location.href);
-    window.addEventListener("popstate", () => {
-      browserPreventEvent();
-    });
+    if (typeof window !== "undefined") {
+      history.pushState(null, "", location.href);
+      window.addEventListener("popstate", browserPreventEvent);
+    }
     return () => {
-      window.removeEventListener("popstate", () => {
-        browserPreventEvent();
-      });
+      if (typeof window !== "undefined") {
+        window.removeEventListener("popstate", browserPreventEvent);
+      }
     };
-  }, []);
+  }, [browserPreventEvent]);
 
   const onSubmit: SubmitHandler<FormValues> = (data) => {
     postSignUp({
@@ -106,6 +120,7 @@ function StoreInfo() {
       btn_position: "top",
     });
   };
+
   const formProps = {
     component: "form",
     noValidate: true,
@@ -118,7 +133,6 @@ function StoreInfo() {
     id: "filled-adminCode",
     type: "text",
     helperText: errors?.name && errors?.name.message,
-
     error: Boolean(errors?.name) || isError,
     variant: "filled",
     label: "매장명",
@@ -140,12 +154,15 @@ function StoreInfo() {
     style: { marginTop: "26px" },
     value: formValue.reason,
   };
+
   const checkBoxProps = {
     label: "매장명이 없습니다.",
     checked: isChecked,
     onChange: () => {
       setIsChecked(!isChecked);
-      window.scrollTo(0, document.body.scrollHeight);
+      if (typeof window !== "undefined" && typeof document !== "undefined") {
+        window.scrollTo(0, document.body.scrollHeight);
+      }
     },
     onClick: () => {
       logEvent("btn_click", {

app/signup/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 
@@ -14,7 +14,15 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const isWebView = /APP_NEXTROOM_ANDROID/.test(navigator.userAgent); // 웹뷰에서 실행 중인지 여부 확인
+  const [isWebView, setIsWebView] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const { userAgent } = window.navigator;
+      const mwebviewRegex = /APP_NEXTROOM_ANDROID/i;
+      setIsWebView(mwebviewRegex.test(userAgent));
+    }
+  }, []);
   const router = useRouter();
   const pathName = getCookie();
 

app/utils/cookie.ts

@@ -1,7 +1,11 @@
 export const setCookie = (value: string, days?: number): void => {
+  if (typeof document === "undefined") {
+    console.warn("Cookies are not supported in the current environment.");
+    return;
+  }
+
   const exdate = new Date();
-  exdate.setDate(exdate.getDate() + (days || 0));
-  // 설정 일수만큼 현재시간에 만료값으로 지정
+  exdate.setDate(exdate.getDate() + (days || 0)); // 설정 일수만큼 현재 시간에 만료값 지정
 
   const cookieValue =
     encodeURIComponent(value) +
@@ -10,6 +14,11 @@ export const setCookie = (value: string, days?: number): void => {
 };
 
 export const getCookie = (): string => {
+  if (typeof document === "undefined") {
+    console.warn("Cookies are not supported in the current environment.");
+    return "";
+  }
+
   const nameOfCookie = `pathName=`;
   let x = 0;