121 lines
4.3 KiB
Vue
121 lines
4.3 KiB
Vue
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
<template>
|
|
<!--
|
|
This example requires updating your template:
|
|
|
|
```
|
|
<html class="h-full">
|
|
<body class="h-full">
|
|
```
|
|
-->
|
|
|
|
<div class="flex items-center justify-center h-screen">
|
|
<main class="sm:flex">
|
|
<p class="text-4xl font-extrabold text-indigo-600 sm:text-5xl">
|
|
{{ filteredCode }}
|
|
</p>
|
|
<div class="sm:ml-6">
|
|
<div class="sm:border-l sm:border-gray-200 sm:pl-6">
|
|
<h1
|
|
class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl"
|
|
>
|
|
{{ filteredTitle }}
|
|
</h1>
|
|
<p class="mt-1 text-base text-gray-500">
|
|
{{ filteredMessage }}
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6"
|
|
>
|
|
<a
|
|
href="javascript:void(0)"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
@click="handleError('/')"
|
|
>
|
|
Go back home
|
|
</a>
|
|
<a
|
|
v-if="isAuthenticated"
|
|
href="javascript:void(0)"
|
|
class="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
@click="handleError('/support/inquiry')"
|
|
>
|
|
Contact support
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
error: Object,
|
|
});
|
|
|
|
const filteredCode = ref(0);
|
|
const filteredTitle = ref('');
|
|
const filteredMessage = ref('');
|
|
|
|
const isAuthenticated = ref(_crossCtl.isAuthenticated);
|
|
|
|
switch (props.error.toString()) {
|
|
case 'Error: $400':
|
|
filteredCode.value = 400;
|
|
filteredTitle.value = 'Bad Request';
|
|
filteredMessage.value =
|
|
'조건을 만족하지 않아 처리할 수 없습니다. 잠시 후 다시 시도해 주세요.';
|
|
break;
|
|
|
|
case 'Error: #401':
|
|
case 'Error: $401':
|
|
filteredCode.value = 401;
|
|
filteredTitle.value = 'Unauthorized';
|
|
filteredMessage.value = '로그인이 필요합니다.';
|
|
break;
|
|
case 'Error: #403':
|
|
case 'Error: $403':
|
|
filteredCode.value = 403;
|
|
filteredTitle.value = 'Forbidden';
|
|
filteredMessage.value = '권한이 필요 합니다.';
|
|
break;
|
|
case 'Error: #404':
|
|
case 'Error: $404':
|
|
filteredCode.value = 404;
|
|
filteredTitle.value = 'Not Found';
|
|
filteredMessage.value =
|
|
'없는 페이지 주소입니다. 잠시 후 다시 시도해 주세요.';
|
|
break;
|
|
|
|
case 'Error: #503':
|
|
filteredCode.value = 503;
|
|
filteredTitle.value = 'Network Error';
|
|
filteredMessage.value =
|
|
'서버와 통신할 수 없습니다. 인터넷 연결을 확인하시고 잠시 후 다시 시도해 주세요.';
|
|
break;
|
|
}
|
|
|
|
if (props.error.message.startsWith('Page not found: ')) {
|
|
filteredCode.value = 404;
|
|
filteredTitle.value = 'Not Found';
|
|
filteredMessage.value =
|
|
'없는 페이지 주소입니다. 잠시 후 다시 시도해 주세요.';
|
|
} else if (props.error.toString().startsWith('FetchError: ')) {
|
|
filteredCode.value = 503;
|
|
filteredTitle.value = 'Network Error';
|
|
filteredMessage.value =
|
|
'서버와 통신할 수 없습니다. 인터넷 연결을 확인하시고 잠시 후 다시 시도해 주세요.';
|
|
}
|
|
|
|
if (filteredTitle.value == '' && props.error.errorCode == undefined) {
|
|
console.log('unhandled error=', props.error);
|
|
|
|
filteredCode.value = 0;
|
|
filteredTitle.value = 'Unhandled Error';
|
|
filteredMessage.value = props.error.toString();
|
|
}
|
|
|
|
const handleError = (nextPath) => clearError({ redirect: nextPath });
|
|
</script>
|