diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 7f01f825..23089b33 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -30,6 +30,7 @@ import LargePlusIcon from '@/shared/assets/svgs/large_plus.svg?react'; import { ROUTES_CONFIG } from '@/router/routesConfig'; import HomePageWrapper from '@/components/templates/HomePageWrapper'; +import ModalContentsAlerts from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert'; import ButtonSVG from '../../shared/components/ButtonSVG'; import BoxCategory from './components/BoxCategory'; @@ -268,7 +269,7 @@ const HomePage = () => { - + diff --git a/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert.tsx b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert.tsx index 9904126a..21a7d95c 100644 --- a/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert.tsx +++ b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert.tsx @@ -1,3 +1,5 @@ +import { FormEvent, useRef, useState } from 'react'; + import IconWarning from '@/shared/assets/svgs/ic_delete_alert.svg?react'; import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert'; @@ -8,6 +10,22 @@ interface AlertsProps { } const ModalContentsAlerts = ({ variant, handleClose }: AlertsProps) => { + const inputRef = useRef(null); + const [error, setError] = useState(false); + const handleSubmit = (e: FormEvent) => { + e.preventDefault(); + + if (String(inputRef.current?.value) !== 'abc1234@gmail.com') { + setError(true); + } + }; + + const handleInputChange = () => { + if (inputRef.current) { + setError(false); + } + }; + const errorStyle = 'border-error-01 border-[1px]'; return ( {variant === 'logout' && ( @@ -37,19 +55,28 @@ const ModalContentsAlerts = ({ variant, handleClose }: AlertsProps) => { 영구적으로 삭제됩니다. 삭제하시겠습니까? 이메일을 입력하여 확인해주세요. - - - - 계정 영구 삭제 - - - 취소하기 - - + + + {error && ( + + 계속하려면 “yuri_2024@gmail.com”을(를) 입력하세요. + + )} + + + 계정 영구 삭제 + + + 취소하기 + + + )} {variant === 'delete-account-complete' && (
이메일을 입력하여 확인해주세요.
계속하려면 “yuri_2024@gmail.com”을(를) 입력하세요.