177 lines
3.5 KiB
Vue
177 lines
3.5 KiB
Vue
<template>
|
|
<div class="auth-error-container">
|
|
<div class="auth-error-card">
|
|
<div class="auth-error-icon">
|
|
<Icon name="mdi:alert-circle" size="64" color="#ef4444" />
|
|
</div>
|
|
|
|
<h1 class="auth-error-title">인증 오류</h1>
|
|
|
|
<div class="auth-error-message">
|
|
<p v-if="errorType === 'JWT_TOKEN_EXPIRED'">
|
|
세션이 만료되었습니다.<br />
|
|
보안을 위해 다시 로그인해 주세요.
|
|
</p>
|
|
<p v-else-if="errorType === 'INVALID_CLIENT_IP'">
|
|
접근 권한이 없습니다.<br />
|
|
허용된 IP에서 접근해 주세요.
|
|
</p>
|
|
<p v-else-if="errorType === 'JWT_TOKEN_NULL'">
|
|
인증 정보가 없습니다.<br />
|
|
다시 로그인해 주세요.
|
|
</p>
|
|
<p v-else>
|
|
인증에 문제가 발생했습니다.<br />
|
|
다시 로그인해 주세요.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="auth-error-actions">
|
|
<button
|
|
class="auth-error-btn primary"
|
|
:disabled="isLoading"
|
|
@click="goToLogin"
|
|
>
|
|
<Icon name="mdi:login" size="20" />
|
|
로그인하기
|
|
</button>
|
|
</div>
|
|
|
|
<div class="auth-error-help">
|
|
<p>문제가 지속되면 관리자에게 문의해 주세요.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// auth 레이아웃 사용
|
|
definePageMeta({
|
|
layout: "auth",
|
|
});
|
|
|
|
const route = useRoute();
|
|
const isLoading = ref(false);
|
|
|
|
// 쿼리 파라미터에서 에러 타입 가져오기
|
|
const errorType = computed(() => (route.query.type as string) || "UNKNOWN");
|
|
|
|
const goToLogin = async () => {
|
|
isLoading.value = true;
|
|
try {
|
|
await navigateTo("/login");
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// 페이지 진입 시 사용자 세션 정리
|
|
onMounted(() => {
|
|
const userStore = useUserStore();
|
|
userStore.user = null;
|
|
userStore.isLoggedIn = false;
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.auth-error-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.auth-error-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 48px;
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
text-align: center;
|
|
max-width: 480px;
|
|
width: 100%;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.auth-error-icon {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.auth-error-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.auth-error-message {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.auth-error-message p {
|
|
font-size: 16px;
|
|
color: #64748b;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.auth-error-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.auth-error-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 32px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
justify-content: center;
|
|
}
|
|
|
|
.auth-error-btn.primary {
|
|
background: #0f172a;
|
|
color: white;
|
|
}
|
|
|
|
.auth-error-btn.primary:hover:not(:disabled) {
|
|
background: #1e293b;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.auth-error-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.auth-error-help {
|
|
padding-top: 16px;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.auth-error-help p {
|
|
font-size: 14px;
|
|
color: #94a3b8;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.auth-error-card {
|
|
padding: 32px 24px;
|
|
}
|
|
|
|
.auth-error-btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|