Merge pull request #212 from part3-4team-Taskify/minji

[Refactor] 사파리 대응 세로스크롤 방지 목적 window innerHeight 기준 높이 계산식 추가

Author: ozen0718

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/button/GuestModeButton.tsx

@@ -24,6 +24,7 @@ export default function GuestModeButton() {
       router.push("/mydashboard");
       toast.success("게스트 모드로 로그인되었습니다.");
     } catch (error) {
+      console.error("게스트 로그인 실패:", error);
       toast.error("게스트 로그인에 실패했습니다.");
     }
   };

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

@@ -11,6 +11,7 @@ import { getDashboards } from "@/api/dashboards";
 import DeleteDashboardModal from "@/components/modal/DeleteDashboardModal";
 import { DashboardType } from "@/types/task";
 import { TEAM_ID } from "@/constants/team";
+import LoadingSpinner from "@/components/common/LoadingSpinner";
 
 export default function EditDashboard() {
   const router = useRouter();
@@ -47,8 +48,12 @@ export default function EditDashboard() {
     }
   }, [isInitialized, user]);
 
+  if (!isInitialized || !user) {
+    return <LoadingSpinner />;
+  }
+
   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

@@ -18,6 +18,7 @@ import ColumnsButton from "@/components/button/ColumnsButton";
 import AddColumnModal from "@/components/columnCard/AddColumnModal";
 import { TEAM_ID } from "@/constants/team";
 import { toast } from "react-toastify";
+import LoadingSpinner from "@/components/common/LoadingSpinner";
 
 export default function Dashboard() {
   const router = useRouter();
@@ -100,8 +101,12 @@ export default function Dashboard() {
     (db) => db.id === Number(dashboardId)
   );
 
+  if (!isInitialized || !user) {
+    return <LoadingSpinner />;
+  }
+
   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

@@ -13,6 +13,7 @@ import { DeleteModal } from "@/components/modal/DeleteModal";
 import { TEAM_ID } from "@/constants/team";
 import { Search } from "lucide-react";
 import { toast } from "react-toastify";
+import LoadingSpinner from "@/components/common/LoadingSpinner";
 
 import {
   DndContext,
@@ -132,8 +133,12 @@ export default function MyDashboardPage() {
     setDashboardList(newOrder);
   };
 
+  if (!isInitialized || !user) {
+    return <LoadingSpinner />;
+  }
+
   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

@@ -8,11 +8,16 @@ import BackButton from "@/components/button/BackButton";
 import { Dashboard, getDashboards } from "@/api/dashboards";
 import { TEAM_ID } from "@/constants/team";
 import { toast } from "react-toastify";
+import LoadingSpinner from "@/components/common/LoadingSpinner";
 
 export default function MyPage() {
   const { user, isInitialized } = useAuthGuard();
   const [dashboards, setDashboards] = useState<Dashboard[]>([]);
 
+  if (!isInitialized || !user) {
+    return <LoadingSpinner />;
+  }
+
   // 사이드메뉴 대시보드 목록 api 호출
   const fetchDashboards = async () => {
     try {
@@ -25,13 +30,13 @@ export default function MyPage() {
   };
 
   useEffect(() => {
-    if (isInitialized) {
+    if (isInitialized && user) {
       fetchDashboards();
     }
-  }, [isInitialized]);
+  }, [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}