106 lines
2.9 KiB
Vue
106 lines
2.9 KiB
Vue
|
<script setup>
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import { SERVICE_NAME, CONTACT_EMAIL } from '@/constants/terms'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
function goBack() {
|
||
|
|
if (window.history.length > 1) router.back()
|
||
|
|
else router.push('/')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<main class="legal">
|
||
|
|
<header class="legal-head">
|
||
|
|
<div class="brand">{{ SERVICE_NAME }}</div>
|
||
|
|
<h1>계정 및 데이터 삭제</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="legal-body">
|
||
|
|
<p>{{ SERVICE_NAME }}는 이용자가 본인의 계정과 모든 데이터를 직접 삭제할 수 있도록 제공합니다.</p>
|
||
|
|
|
||
|
|
<h2>앱에서 삭제하기</h2>
|
||
|
|
<ol>
|
||
|
|
<li>앱(또는 PC 클라이언트)에 로그인합니다.</li>
|
||
|
|
<li><b>설정 → 계정정보</b> 화면으로 이동합니다.</li>
|
||
|
|
<li>맨 아래 <b>회원 탈퇴</b>를 눌러 안내에 따라 진행합니다.</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>삭제되는 데이터</h2>
|
||
|
|
<p>탈퇴 시 아래 데이터가 <b>지체 없이 영구 삭제</b>되며 복구할 수 없습니다.</p>
|
||
|
|
<ul>
|
||
|
|
<li>계정 정보(아이디·이메일·프로필 등)</li>
|
||
|
|
<li>가계부·계좌·자산·예산·거래 내역 등 모든 가계부 데이터</li>
|
||
|
|
<li>게시판 글·댓글·추천 기록</li>
|
||
|
|
<li>포인트 및 결제(구독) 기록</li>
|
||
|
|
</ul>
|
||
|
|
<p class="muted">단, 관련 법령에 따라 보존이 필요한 정보는 해당 기간 동안 보관 후 파기합니다.</p>
|
||
|
|
|
||
|
|
<h2>앱 없이 삭제를 요청하려면</h2>
|
||
|
|
<p>앱에 접근할 수 없는 경우, 아래 이메일로 가입 계정 정보와 함께 삭제를 요청하시면 처리해 드립니다.</p>
|
||
|
|
<p><b>문의:</b> {{ CONTACT_EMAIL }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="legal-foot">
|
||
|
|
<button type="button" class="legal-back" @click="goBack">돌아가기</button>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.legal {
|
||
|
|
max-width: 760px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 1.5rem;
|
||
|
|
}
|
||
|
|
.legal-head {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 1.25rem;
|
||
|
|
}
|
||
|
|
.brand {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: hsla(160, 100%, 37%, 1);
|
||
|
|
}
|
||
|
|
.legal-head h1 {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
margin-top: 0.3rem;
|
||
|
|
}
|
||
|
|
.legal-body {
|
||
|
|
font-size: 0.92rem;
|
||
|
|
line-height: 1.75;
|
||
|
|
color: var(--color-text);
|
||
|
|
background: var(--color-background-soft);
|
||
|
|
border: 1px solid var(--color-border);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 1.2rem 1.3rem;
|
||
|
|
}
|
||
|
|
.legal-body h2 {
|
||
|
|
font-size: 1.02rem;
|
||
|
|
margin: 1.2rem 0 0.4rem;
|
||
|
|
color: var(--color-heading);
|
||
|
|
}
|
||
|
|
.legal-body ol,
|
||
|
|
.legal-body ul {
|
||
|
|
padding-left: 1.2rem;
|
||
|
|
}
|
||
|
|
.legal-body .muted {
|
||
|
|
font-size: 0.85rem;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
.legal-foot {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
margin-top: 1.25rem;
|
||
|
|
}
|
||
|
|
.legal-back {
|
||
|
|
padding: 0.5rem 1.3rem;
|
||
|
|
border: 1px solid var(--color-border);
|
||
|
|
border-radius: 8px;
|
||
|
|
background: var(--color-background);
|
||
|
|
color: var(--color-text);
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
</style>
|