feat: input창 에러일 때 추가

morib-in · Dec 5, 2024 · 39c7df0 · 39c7df0
1 parent 0bffbdb
commit 39c7df0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 14 deletions.
diff --git 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 = () => {
 				</section>
 			</div>
 			<ModalWrapper ref={categoryModalRef} backdrop={true}>
-				<ModalContentsCategory handleCloseModal={handleCloseModal} />
+				<ModalContentsAlerts variant="delete-account" />
 			</ModalWrapper>
 
 			<ModalWrapper ref={friendsModalRef} backdrop={true}>

diff --git 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<HTMLInputElement | null>(null);
+	const [error, setError] = useState(false);
+	const handleSubmit = (e: FormEvent) => {
+		e.preventDefault();
+
+		if (String(inputRef.current?.value) !== '[email protected]') {
+			setError(true);
+		}
+	};
+
+	const handleInputChange = () => {
+		if (inputRef.current) {
+			setError(false);
+		}
+	};
+	const errorStyle = 'border-error-01 border-[1px]';
 	return (
 		<div className="flex flex-col rounded-[0.8rem] bg-gray-bg-04 p-[3rem]">
 			{variant === 'logout' && (
@@ -37,19 +55,28 @@ const ModalContentsAlerts = ({ variant, handleClose }: AlertsProps) => {
 						영구적으로 삭제됩니다. 삭제하시겠습니까?
 					</p>
 					<p className="subhead-med-18 mb-[1rem] flex justify-center text-gray-05">이메일을 입력하여 확인해주세요.</p>
-					<input
-						type="text"
-						placeholder="[email protected]"
-						className="subhead-med-18 w-full rounded-[5px] bg-gray-bg-02 p-[1rem] text-gray-03 outline-none"
-					/>
-					<div className="mt-[3rem] flex gap-[1rem]">
-						<ButtonAlert variant="danger" onClick={handleClose}>
-							계정 영구 삭제
-						</ButtonAlert>
-						<ButtonAlert variant="primary" onClick={handleClose}>
-							취소하기
-						</ButtonAlert>
-					</div>
+					<form action="" onSubmit={handleSubmit}>
+						<input
+							ref={inputRef}
+							type="text"
+							placeholder="[email protected]"
+							onChange={handleInputChange}
+							className={`${error ? errorStyle : ''} subhead-med-18 placeholder-text-gray-03 w-full rounded-[5px] bg-gray-bg-02 p-[1rem] text-white outline-none`}
+						/>
+						{error && (
+							<div className="absolute mt-[1rem] flex gap-[5px]">
+								<p className="body-reg-16 text-error-01">계속하려면 “[email protected]”을(를) 입력하세요.</p>
+							</div>
+						)}
+						<div className="mt-[5.8rem] flex gap-[1rem]">
+							<ButtonAlert variant="danger" onClick={handleClose} type="submit">
+								계정 영구 삭제
+							</ButtonAlert>
+							<ButtonAlert variant="primary" onClick={handleClose}>
+								취소하기
+							</ButtonAlert>
+						</div>
+					</form>
 				</div>
 			)}
 			{variant === 'delete-account-complete' && (