[Fix/dropdown-250] 🚨 Fix : 대시보드 모바일 환경에서 드롭다운 안 나타나는 에러

src/app/(protected)/_components/todo-modal/_components/mobile/MobileDialogLayout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 
 interface MobileDialogLayoutProps {
   children: ReactNode;
@@ -11,6 +11,13 @@ export default function MobileDialogLayout({
   children,
   onClose,
 }: MobileDialogLayoutProps) {
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
   return (
     <div
       className="fixed inset-0 flex flex-col justify-end bg-black/40"

src/app/(protected)/todos/_components/TodosContent.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import GoalSelect from "./GoalSelect";
 import ListItem from "@/components/common/list/list-item/ListItem";

src/components/common/dropdown/dropdown-portal/DropdownPortal.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useDeviceSize } from "@/hooks/useDeviceSize";
 
-import Portal from "../../../../components/common/dropdown/dropdown-portal/Portal";
+import Portal from "@/components/common/dropdown/dropdown-portal/Portal";
 import Dropdown, { DropdownItem } from "@/components/common/dropdown";
 
 interface DropdownPortalProps {
@@ -15,27 +15,27 @@ export default function DropdownPortal({
   onClose,
 }: DropdownPortalProps) {
   const [style, setStyle] = useState<React.CSSProperties>({});
-  const { isMobile } = useDeviceSize();
+  const { isDesktop } = useDeviceSize();
 
   useEffect(() => {
     if (!anchorRect) return;
 
-    if (isMobile) {
+    if (isDesktop) {
       setStyle({
-        position: "fixed",
-        top: anchorRect.bottom + window.scrollY + 4,
-        left: anchorRect.right + window.scrollX - 90,
+        position: "absolute",
+        top: anchorRect.bottom + window.scrollY + 5,
+        left: anchorRect.right + window.scrollX - 20,
         zIndex: 1000,
       });
     } else {
       setStyle({
         position: "absolute",
-        top: anchorRect.bottom + window.scrollY + 4,
-        left: anchorRect.right + window.scrollX - 20,
+        top: anchorRect.bottom + window.scrollY + 5,
+        left: anchorRect.right + window.scrollX - 90,
         zIndex: 1000,
       });
     }
-  }, [anchorRect, isMobile]);
+  }, [anchorRect, isDesktop]);
 
   return (
     <Portal>

src/components/common/input/auth-input/AuthInput.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import BaseInput, { InputType as BaseInputType } from "../base-input/BaseInput";
+import BaseInput, {
+  InputType as BaseInputType,
+} from "@/components/common/input/base-input/BaseInput";
 import clsx from "clsx";
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/outline";
 
@@ -41,7 +43,6 @@ export default function AuthInput({
   onChangeInput,
   onClickTogglePassword,
 }: InputProps) {
-
   const isPasswordField = type === "password";
 
   let inputType: BaseInputType;
@@ -60,23 +61,30 @@ export default function AuthInput({
       "border-gray-100": status === "default",
       "border-gray-200": status === "filled",
       "border-red-500": status === "error",
-    }
-  )
+    },
+  );
 
   const rightIcon = isPasswordField && (
-    <button 
-    className="pt-1.5 cursor-pointer"
-    type="button" onClick={onClickTogglePassword}>
+    <button
+      className="cursor-pointer pt-1.5"
+      type="button"
+      onClick={onClickTogglePassword}>
       {isPasswordVisible ? (
-        <EyeIcon className=" w-5 h-5 text-gray-400" strokeWidth={2} />
+        <EyeIcon
+          className="h-5 w-5 text-gray-400"
+          strokeWidth={2}
+        />
       ) : (
-        <EyeSlashIcon className="w-5 h-5 text-gray-400" strokeWidth={2} />
+        <EyeSlashIcon
+          className="h-5 w-5 text-gray-400"
+          strokeWidth={2}
+        />
       )}
     </button>
-  )
+  );
 
   return (
-    <div className="flex flex-col gap-1 w-full">
+    <div className="flex w-full flex-col gap-1">
       <BaseInput
         id={id}
         name={name}
@@ -89,4 +97,4 @@ export default function AuthInput({
       />
     </div>
   );
-}
+}