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 && (
-