diff --git a/src/app/(protected)/_components/todo-modal/_components/mobile/MobileDialogLayout.tsx b/src/app/(protected)/_components/todo-modal/_components/mobile/MobileDialogLayout.tsx index cd2b2ca..164f623 100644 --- a/src/app/(protected)/_components/todo-modal/_components/mobile/MobileDialogLayout.tsx +++ b/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 (
({}); - 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 ( diff --git a/src/components/common/input/auth-input/AuthInput.tsx b/src/components/common/input/auth-input/AuthInput.tsx index ab7c6d9..959556c 100644 --- a/src/components/common/input/auth-input/AuthInput.tsx +++ b/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 && ( - - ) + ); return ( -
+
); -} \ No newline at end of file +}