89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
|
<script setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { RouterLink, useRoute, useRouter } from 'vue-router'
|
||
|
|
import { TERMS_OF_SERVICE, PRIVACY_POLICY, SERVICE_NAME } from '@/constants/terms'
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
const isPrivacy = computed(() => route.meta.doc === 'privacy')
|
||
|
|
const title = computed(() => (isPrivacy.value ? '개인정보처리방침' : '이용약관'))
|
||
|
|
const body = computed(() => (isPrivacy.value ? PRIVACY_POLICY : TERMS_OF_SERVICE))
|
||
|
|
|
||
|
|
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>{{ title }}</h1>
|
||
|
|
</header>
|
||
|
|
<pre class="legal-body">{{ body }}</pre>
|
||
|
|
<div class="legal-foot">
|
||
|
|
<RouterLink :to="isPrivacy ? '/terms' : '/privacy'" class="legal-link">
|
||
|
|
{{ isPrivacy ? '이용약관' : '개인정보처리방침' }} 보기
|
||
|
|
</RouterLink>
|
||
|
|
<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 {
|
||
|
|
white-space: pre-wrap;
|
||
|
|
word-break: break-word;
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
line-height: 1.7;
|
||
|
|
color: var(--color-text);
|
||
|
|
background: var(--color-background-soft);
|
||
|
|
border: 1px solid var(--color-border);
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 1.2rem 1.3rem;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.legal-foot {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 0.75rem;
|
||
|
|
margin-top: 1.25rem;
|
||
|
|
}
|
||
|
|
.legal-link {
|
||
|
|
color: hsla(160, 100%, 37%, 1);
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
.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>
|