diff --git a/src/app/account-deletion/page.tsx b/src/app/account-deletion/page.tsx new file mode 100644 index 0000000..f918bc8 --- /dev/null +++ b/src/app/account-deletion/page.tsx @@ -0,0 +1,7 @@ +'use client' + +import AccountDeletionPage from '@/components/pages/account-deletion/accountDeletionPage' + +export default function Page() { + return +} diff --git a/src/components/pages/account-deletion/accountDeletionPage.tsx b/src/components/pages/account-deletion/accountDeletionPage.tsx new file mode 100644 index 0000000..e4d3790 --- /dev/null +++ b/src/components/pages/account-deletion/accountDeletionPage.tsx @@ -0,0 +1,173 @@ +'use client' + +import { useState } from 'react' +import { useRouter } from 'next/navigation' +import { useAppDispatch } from '@/hooks/utils/useAppDispatch' +import { signoutThunk } from '@/store/thunks/authThunks' +import { Checkbox } from '@/components/ui/checkbox' + +const AccountDeletionPage = () => { + const router = useRouter() + const dispatch = useAppDispatch() + const [isAgreed, setIsAgreed] = useState(false) + const [isDeleting, setIsDeleting] = useState(false) + + const handleDelete = async () => { + if (!isAgreed) { + alert('계정 삭제에 동의해주세요.') + return + } + + if ( + !confirm('정말로 계정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.') + ) { + return + } + + try { + setIsDeleting(true) + await dispatch(signoutThunk()) + alert('계정이 성공적으로 삭제되었습니다.') + router.push('/entry') + } catch (error) { + console.error('계정 삭제 실패:', error) + alert('계정 삭제 중 오류가 발생했습니다. 다시 시도해주세요.') + setIsDeleting(false) + } + } + + return ( +
+ {/* 앱 이름 및 헤더 */} +
+

ValanSe

+

계정 및 데이터 삭제

+
+ + {/* 계정 삭제 단계 안내 */} +
+

+ 계정 삭제를 요청하려면 다음 단계를 따라주세요: +

+
+
+
+ 1 +
+
+

+ 아래의 데이터 삭제 정책을 확인해주세요. +

+
+
+
+
+ 2 +
+
+

+ 계정 삭제에 동의하시면 체크박스를 선택해주세요. +

+
+
+
+
+ 3 +
+
+

+ "계정 삭제하기" 버튼을 클릭하여 삭제를 완료해주세요. +

+
+
+
+
+ + {/* 데이터 삭제 정책 */} +
+

데이터 삭제 정책

+ +
+
+

삭제되는 데이터:

+
    +
  • 프로필 정보 (닉네임, 성별, 나이, MBTI 등)
    • +
  • 작성한 투표 게시글
    • +
  • 작성한 댓글
    • +
  • 투표 기록
    • +
  • 계정 인증 정보
    • +
+
+ +
+

보관되는 데이터:

+
    +
  • + 법적 의무 준수를 위해 필요한 경우, 관련 법령에 따라 일정 기간 + 보관될 수 있습니다. +
    • +
  • + 서비스 이용 중 발생한 분쟁 해결을 위해 필요한 최소한의 정보는 + 보관될 수 있습니다. +
    • +
+
+ +
+

보관 기간:

+

+ 법적 의무에 따라 필요한 경우 최대 5년간 보관될 수 있으며, 이후 + 자동으로 삭제됩니다. +

+
+ +
+

+ * 계정 삭제 후 복구가 불가능합니다. +

+
+
+
+ + {/* 동의 체크박스 */} +
+
+ { + setIsAgreed(checked === true) + }} + className="w-5 h-5 data-[state=checked]:bg-[#839DB7] data-[state=checked]:border-[#839DB7] border-[#C6C6C6]" + /> + +
+
+ + {/* 삭제 버튼 */} +
+ + +
+
+ ) +} + +export default AccountDeletionPage diff --git a/src/components/pages/my/accountControlSection.tsx b/src/components/pages/my/accountControlSection.tsx index fd21f9f..4519de0 100644 --- a/src/components/pages/my/accountControlSection.tsx +++ b/src/components/pages/my/accountControlSection.tsx @@ -1,15 +1,17 @@ import { useAppDispatch } from '@/hooks/utils/useAppDispatch' -import { logoutThunk, signoutThunk } from '@/store/thunks/authThunks' +import { logoutThunk } from '@/store/thunks/authThunks' +import { useRouter } from 'next/navigation' export default function AccountControlSection() { const dispatch = useAppDispatch() + const router = useRouter() const handleLogout = () => { dispatch(logoutThunk()) } const handleSignout = () => { - dispatch(signoutThunk()) + router.push('/account-deletion') } return (