[Refactor] 사파리 세로스크롤 방지 위해 window inner h 기준 계산 추가, h-screen -> h-[calc(var(--vh)_*_100)] 교체

Author: MINJI121

src/components/Layouts/DashboardLayout.tsx

@@ -16,7 +16,7 @@ const DashboardLayout = ({
   dashboardId,
 }: DashboardLayoutProps) => {
   return (
-    <div className="flex h-screen overflow-hidden">
+    <div className="flex h-[calc(var(--vh)_*_100)] overflow-hidden">
       <SideMenu teamId={TEAM_ID} dashboardList={dashboardList} />
       <div className="flex flex-col flex-1">
         <HeaderDashboard variant="dashboard" dashboardId={dashboardId} />

src/components/sideMenu/SideMenu.tsx

@@ -65,7 +65,7 @@ export default function SideMenu({
   return (
     <aside
       className={clsx(
-        "z-20 flex flex-col h-screen overflow-y-auto lg:overflow-y-hidden overflow-x-hidden transition-all duration-200",
+        "z-20 flex flex-col h-[calc(var(--vh)_*_100)] overflow-y-auto lg:overflow-y-hidden overflow-x-hidden transition-all duration-200",
         "bg-white border-r border-[var(--color-gray3)] py-5",
         isCollapsed
           ? "w-[67px] items-center px-0"

src/pages/404.tsx

@@ -17,7 +17,7 @@ export default function Custom404() {
   }, [router]);
 
   return (
-    <div className="flex flex-col items-center justify-center text-center h-screen bg-[var(--color-gray5)] gap-2">
+    <div className="flex flex-col items-center justify-center text-center h-[calc(var(--vh)_*_100)] bg-[var(--color-gray5)] gap-2">
       <h1 className="font-24b text-[var(--primary)]">404 Not Found</h1>
       <p className="font-16r text-black3">페이지를 찾을 수 없습니다.</p>
       <p className="font-16r text-black3">5초 후 홈페이지로 이동합니다.</p>

src/pages/_app.tsx

@@ -47,6 +47,21 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
     initializeUser();
   }, []);
 
+  // 윈도우 기준 높이 사용
+  useEffect(() => {
+    const setVH = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+    };
+
+    setVH();
+    window.addEventListener("resize", setVH);
+
+    return () => {
+      window.removeEventListener("resize", setVH);
+    };
+  }, []);
+
   const router = useRouter();
   const pathname = router.pathname;
 

src/pages/dashboard/[dashboardId]/edit.tsx

@@ -53,7 +53,7 @@ export default function EditDashboard() {
   }
 
   return (
-    <div className="flex h-screen overflow-hidden">
+    <div className="flex h-[calc(var(--vh)_*_100)] overflow-hidden">
       <SideMenu
         teamId={TEAM_ID}
         dashboardList={dashboardList}

src/pages/dashboard/[dashboardId]/index.tsx

@@ -106,7 +106,7 @@ export default function Dashboard() {
   }
 
   return (
-    <div className="flex h-screen min-h-screen">
+    <div className="flex h-[calc(var(--vh)_*_100)]">
       <SideMenu
         teamId={TEAM_ID}
         dashboardList={dashboardList}

src/pages/login.tsx

@@ -44,7 +44,7 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen bg-white py-10">
+    <div className="flex flex-col items-center justify-center h-[calc(var(--vh)_*_100)] bg-white py-10">
       <div className="flex flex-col items-center justify-center mb-[30px]">
         <Image
           src="/svgs/main-logo.svg"

src/pages/mydashboard.tsx

@@ -138,7 +138,7 @@ export default function MyDashboardPage() {
   }
 
   return (
-    <div className="flex h-screen overflow-hidden bg-[var(--color-violet5)]">
+    <div className="flex h-[calc(var(--vh)_*_100)] overflow-hidden bg-[var(--color-violet5)]">
       <SideMenu
         teamId={TEAM_ID}
         dashboardList={dashboardList}

src/pages/mypage.tsx

@@ -36,7 +36,7 @@ export default function MyPage() {
   }, [isInitialized, user]);
 
   return (
-    <div className="flex h-screen overflow-hidden">
+    <div className="flex h-[calc(var(--vh)_*_100)] overflow-hidden">
       <SideMenu
         teamId={TEAM_ID}
         dashboardList={dashboards}

src/pages/signup.tsx

@@ -57,7 +57,7 @@ export default function SignUpPage() {
 
   return (
     <div
-      className="flex flex-col min-h-screen
+      className="flex flex-col min-h-[calc(var(--vh)_*_100)]
     items-center justify-center
     bg-white py-10"
     >