From 708c2c9e8658e87a896cd19f0f349a1f47cfae02 Mon Sep 17 00:00:00 2001
From: Grayash <k_2684@naver.com>
Date: Mon, 2 Sep 2024 01:07:38 +0900
Subject: [PATCH] Remove dvh height for mobile fixed height and screen size

---
 src/app/components/Backdrop.tsx    |  2 +-
 src/app/components/Background.tsx  |  2 +-
 src/app/components/HeroSection.tsx |  2 +-
 tailwind.config.ts                 | 15 ---------------
 4 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/app/components/Backdrop.tsx b/src/app/components/Backdrop.tsx
index 4391ee5..714bf48 100644
--- a/src/app/components/Backdrop.tsx
+++ b/src/app/components/Backdrop.tsx
@@ -12,7 +12,7 @@ export default function Backdrop({ children }: { children: React.ReactNode }) {
     <>
       <div
         className={cn(
-          "bg-gray-4000/50 fixed left-0 top-0 -z-10 flex h-full w-full items-center justify-center transition-colors duration-500",
+          "bg-gray-4000/50 fixed left-0 top-0 -z-10 flex h-screen w-full items-center justify-center transition-colors duration-500",
           inView && "bg-gray-700/80"
         )}
       />
diff --git a/src/app/components/Background.tsx b/src/app/components/Background.tsx
index e3178e5..68e977f 100644
--- a/src/app/components/Background.tsx
+++ b/src/app/components/Background.tsx
@@ -2,7 +2,7 @@ import Spline from "@splinetool/react-spline/next";
 
 export default function Background() {
   return (
-    <div className="fixed left-0 top-0 -z-20 flex h-full w-full items-center justify-center bg-scene">
+    <div className="fixed left-0 top-0 -z-20 flex h-screen w-full items-center justify-center bg-scene">
       <Spline scene="/cloud.spline" />
     </div>
   );
diff --git a/src/app/components/HeroSection.tsx b/src/app/components/HeroSection.tsx
index 71513e3..be78c8c 100644
--- a/src/app/components/HeroSection.tsx
+++ b/src/app/components/HeroSection.tsx
@@ -21,7 +21,7 @@ export default function HeroSection() {
 
   return (
     <motion.section
-      className="relative h-screen-dvh"
+      className="relative h-screen"
       ref={heroRef}
       animate={heroInView && mounted ? "visible" : "hidden"}
       variants={{
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fe027ab..6f1d9ee 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -25,20 +25,5 @@ const config: Config = {
       },
     },
   },
-  plugins: [
-    plugin(function ({ addUtilities }) {
-      addUtilities({
-        ".h-screen-dvh": {
-          height: ["100vh", "100dvh"],
-        },
-        ".min-h-screen-dvh": {
-          minHeight: ["100vh", "100dvh"],
-        },
-        ".max-h-screen-dvh": {
-          maxHeight: ["100vh", "100dvh"],
-        },
-      });
-    }),
-  ],
 };
 export default config;