diff --git a/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Complete.tsx b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Complete.tsx
new file mode 100644
index 00000000..d32f5436
--- /dev/null
+++ b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Complete.tsx
@@ -0,0 +1,16 @@
+import { AlertModalProps } from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert';
+import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert';
+
+const Complete = ({ handleClose, userEmail }: AlertModalProps) => (
+	<div className="flex flex-col rounded-[0.8rem] bg-gray-bg-04 p-[3rem]">
+		<div className="w-[47.2rem]">
+			<p className="subhead-bold-22 flex justify-center text-white">{userEmail} 계정이</p>
+			<p className="subhead-bold-22 mb-[3rem] flex justify-center text-white"> 삭제되었습니다.</p>
+			<ButtonAlert variant="primary" onClick={handleClose}>
+				확인
+			</ButtonAlert>
+		</div>
+	</div>
+);
+
+export default Complete;
diff --git a/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/DeleteAccount.tsx b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/DeleteAccount.tsx
new file mode 100644
index 00000000..b09a38cb
--- /dev/null
+++ b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/DeleteAccount.tsx
@@ -0,0 +1,62 @@
+import { FormEvent, useRef, useState } from 'react';
+
+import IconWarning from '@/shared/assets/svgs/ic_delete_alert.svg?react';
+
+import { AlertModalProps } from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert';
+import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert';
+
+const DeleteAccount = ({ handleClose, userEmail }: AlertModalProps) => {
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const [error, setError] = useState(false);
+	const handleSubmit = (e: FormEvent) => {
+		e.preventDefault();
+
+		if (String(inputRef.current?.value) !== userEmail) {
+			setError(true);
+		}
+	};
+
+	const handleInputChange = () => {
+		if (inputRef.current) {
+			setError(false);
+		}
+	};
+	return (
+		<div className="flex flex-col rounded-[0.8rem] bg-gray-bg-04 p-[3rem]">
+			<div className="w-[62rem]">
+				<div className="mb-[3rem] flex justify-center">
+					<IconWarning width="5.4rem" />
+				</div>
+				<p className="subhead-bold-22 flex justify-center text-white">{userEmail} 계정이</p>
+				<p className="subhead-bold-22 mb-[3rem] flex justify-center text-white">
+					영구적으로 삭제됩니다. 삭제하시겠습니까?
+				</p>
+				<p className="subhead-med-18 mb-[1rem] flex justify-center text-gray-05">이메일을 입력하여 확인해주세요.</p>
+				<form action="" onSubmit={handleSubmit}>
+					<input
+						ref={inputRef}
+						type="text"
+						placeholder={userEmail}
+						onChange={handleInputChange}
+						className={`${error ? 'border-[1px] border-error-01' : ''} 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]">
+							<p className="body-reg-16 mb-[3rem] text-error-01">계속하려면 “{userEmail}”을(를) 입력하세요.</p>
+						</div>
+					)}
+					<div className="mt-[5.7rem] flex gap-[1rem]">
+						<ButtonAlert variant="danger" onClick={handleClose} type="submit">
+							계정 영구 삭제
+						</ButtonAlert>
+						<ButtonAlert variant="primary" onClick={handleClose}>
+							취소하기
+						</ButtonAlert>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+};
+
+export default DeleteAccount;
diff --git a/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Logout.tsx b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Logout.tsx
new file mode 100644
index 00000000..472d5942
--- /dev/null
+++ b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Logout.tsx
@@ -0,0 +1,22 @@
+import { AlertModalProps } from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert';
+import ButtonAlert from '@/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert';
+
+const Logout = ({ handleClose, userEmail }: AlertModalProps) => (
+	<div className="flex flex-col rounded-[0.8rem] bg-gray-bg-04 p-[3rem]">
+		<p className="subhead-bold-22 flex justify-center text-white">{userEmail} 계정이</p>
+		<p className="subhead-bold-22 mb-[1rem] flex justify-center text-white">
+			본 기기를 포함한 모든 기기에서 로그아웃됩니다.
+		</p>
+		<p className="subhead-med-18 mb-[3rem] flex justify-center text-gray-05">로그아웃 하시겠습니까?</p>
+		<div className="flex gap-[1rem]">
+			<ButtonAlert variant="danger" onClick={handleClose}>
+				로그아웃
+			</ButtonAlert>
+			<ButtonAlert variant="primary" onClick={handleClose}>
+				취소하기
+			</ButtonAlert>
+		</div>
+	</div>
+);
+
+export default Logout;
diff --git a/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert.tsx b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert.tsx
new file mode 100644
index 00000000..2168ef11
--- /dev/null
+++ b/src/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/ModalContentsAlert.tsx
@@ -0,0 +1,16 @@
+import Complete from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Complete';
+import DeleteAccount from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/DeleteAccount';
+import Logout from '@/pages/HomePage/components/ModalContents/Setting/ModalContentsAlert/Logout';
+
+export interface AlertModalProps {
+	handleClose?: () => void;
+	userEmail?: string;
+}
+
+const ModalContentsAlert = {
+	Logout: Logout,
+	DeleteAccount: DeleteAccount,
+	Complete: Complete,
+};
+
+export default ModalContentsAlert;
diff --git a/src/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert.tsx b/src/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert.tsx
new file mode 100644
index 00000000..cb52cd87
--- /dev/null
+++ b/src/pages/HomePage/components/ModalContents/Setting/components/ButtonAlert.tsx
@@ -0,0 +1,23 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonAlertProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: 'primary' | 'danger';
+	children: ReactNode;
+	className?: string;
+}
+
+const ButtonAlert = ({ children, variant = 'primary', className = '', ...props }: ButtonAlertProps) => {
+	const primaryStyle = 'bg-gray-bg-06 hover:bg-gray-bg-04 active:bg-gray-bg-05';
+	const dangerStyle = 'bg-error-01 hover:bg-error-03 active:bg-error-03 active:text-gray-04';
+	const buttonStyle = variant === 'primary' ? primaryStyle : dangerStyle;
+	return (
+		<button
+			{...props}
+			className={`subhead-semibold-18 w-full rounded-[5px] px-[4.8rem] py-[1rem] text-center text-white ${buttonStyle} ${className}`}
+		>
+			{children}
+		</button>
+	);
+};
+
+export default ButtonAlert;
diff --git a/src/shared/assets/svgs/ic_delete_alert.svg b/src/shared/assets/svgs/ic_delete_alert.svg
new file mode 100644
index 00000000..7d5c6fe5
--- /dev/null
+++ b/src/shared/assets/svgs/ic_delete_alert.svg
@@ -0,0 +1,4 @@
+<svg width="54" height="42" viewBox="0 0 54 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0832 3.07326C26.0281 -0.357755 30.9715 -0.357752 32.9164 3.07326L50.16 33.4932C52.0785 36.8776 49.6337 41.0736 45.7434 41.0736H11.2561C7.36582 41.0736 4.9211 36.8776 6.83955 33.4932L24.0832 3.07326ZM30.3065 4.55267C29.5109 3.14911 27.4887 3.14911 26.693 4.55267L9.44941 34.9726C8.66461 36.3571 9.6647 38.0736 11.2561 38.0736H45.7434C47.3349 38.0736 48.335 36.3571 47.5502 34.9726L30.3065 4.55267Z" fill="#F84949"/>
+<path d="M29.6973 14.8711L29.5059 29.0898H27.209L27.0176 14.8711H29.6973ZM28.3574 34.832C27.4004 34.832 26.5801 34.0391 26.6074 33.0547C26.5801 32.0977 27.4004 31.3047 28.3574 31.3047C29.3145 31.3047 30.1074 32.0977 30.1074 33.0547C30.1074 34.0391 29.3145 34.832 28.3574 34.832Z" fill="#F84949"/>
+</svg>