djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

에러 페이지 디자인

Browse Source
This commit is contained in:
현성필
2025-11-25 11:10:41 +09:00
parent 125b19742d
commit f3be36a6cc
4 changed files with 224 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/views/common/error/error.html
-65
View File
@@ -1,65 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="utf-8">
<meta charset="UTF-8"/>
<title th:text="#{title.html}">개발자 포털</title>
<meta content="max-age=0, public" http-equiv="Cache-Control"/>
<meta content="index, follow" name="robots"/>
<meta content="https://www.eactive.co.kr/" property="og:url"/>
<link rel="icon" type="image/ico" th:href="@{/favicon.ico}">
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
</head>
<body>
<div id="wrap" class="wrap_top">
<section class="content pop">
<div class="sub_title2">
<p class="title2 add" style="display: none;">에러페이지</p>
</div>
<div class="content_wrap cp_box">
<div class="inner i_cs9">
<div class="tit_logo2 m-only">
<img th:src="@{/img/logo/img_logo4.png}" alt="Kbank API Portal">
</div>
<div class="tit_logo2 pc-only">
<img th:src="@{/img/logo/img_logo5.png}" alt="Kbank API Portal">
</div>
<div class="email_tit m-only">
<p>일시적인 장애로<br> 서비스가 중단되었습니다.</p>
</div>
<div class="email_tit pc-only">
<p>일시적인 장애로 서비스가 중단되었습니다.</p>
</div>
<div class="form_type top_m">
<div class="i_complete m-only">
<img th:src="@{/img/icon/icon_error.png}" alt="ERROR 이미지">
</div>
<div class="i_complete pc-only">
<img th:src="@{/img/icon/icon_error2.png}" alt="ERROR 이미지">
</div>
<div class="complete_txt" th:if="${errorMessage}">
<p th:text="${errorMessage}"></p>
</div>
<div class="cs_info">
<p>고객센터 : 1522-1000 / 해외 : +82-2-3778-9111</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
src/main/resources/templates/views/common/error/notFoundError.html
-66
View File
@@ -1,66 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="utf-8">
<meta charset="UTF-8"/>
<title th:text="#{title.html}">개발자 포털</title>
<meta content="max-age=0, public" http-equiv="Cache-Control"/>
<meta content="index, follow" name="robots"/>
<meta content="https://www.eactive.co.kr/" property="og:url"/>
<link rel="icon" type="image/ico" th:href="@{/favicon.ico}">
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
</head>
<body>
<div id="wrap" class="wrap_top">
<section class="content pop">
<div class="sub_title2">
<p class="title2 add" style="display: none;">에러페이지</p>
</div>
<div class="content_wrap cp_box">
<div class="inner i_cs9">
<div class="tit_logo2 m-only">
<img th:src="@{/img/logo/img_logo4.png}" alt="Kbank API Portal">
</div>
<div class="tit_logo2 pc-only">
<img th:src="@{/img/logo/img_logo5.png}" alt="Kbank API Portal">
</div>
<div class="email_tit m-only">
<p>찾을 수 없습니다.</p>
</div>
<div class="email_tit pc-only">
<p>찾을 수 없습니다.</p>
</div>
<div class="form_type top_m">
<div class="i_complete m-only">
<img th:src="@{/img/icon/icon_error.png}" alt="ERROR 이미지">
</div>
<div class="i_complete pc-only">
<img th:src="@{/img/icon/icon_error2.png}" alt="ERROR 이미지">
</div>
<div class="complete_txt">
<p>서비스 이용에 불편을 드려 죄송합니다.<br>
빠른 서비스를 제공할 수 있게 준비하겠습니다.</p>
</div>
<div class="cs_info">
<p>고객센터 : 1522-1000 / 해외 : +82-2-3778-9111</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
src/main/resources/templates/views/common/error/validationError.html
-66
View File
@@ -1,66 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="utf-8">
<meta charset="UTF-8"/>
<title th:text="#{title.html}">개발자 포털</title>
<meta content="max-age=0, public" http-equiv="Cache-Control"/>
<meta content="index, follow" name="robots"/>
<meta content="https://www.eactive.co.kr/" property="og:url"/>
<link rel="icon" type="image/ico" th:href="@{/favicon.ico}">
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
</head>
<body>
<div id="wrap" class="wrap_top">
<section class="content pop">
<div class="sub_title2">
<p class="title2 add" style="display: none;">에러페이지</p>
</div>
<div class="content_wrap cp_box">
<div class="inner i_cs9">
<div class="tit_logo2 m-only">
<img th:src="@{/img/logo/img_logo4.png}" alt="Kbank API Portal">
</div>
<div class="tit_logo2 pc-only">
<img th:src="@{/img/logo/img_logo5.png}" alt="Kbank API Portal">
</div>
<div class="email_tit m-only">
<p>알수 없는 오류가 발생했습니다.</p>
</div>
<div class="email_tit pc-only">
<p>알수 없는 오류가 발생했습니다.</p>
</div>
<div class="form_type top_m">
<div class="i_complete m-only">
<img th:src="@{/img/icon/icon_error.png}" alt="ERROR 이미지">
</div>
<div class="i_complete pc-only">
<img th:src="@{/img/icon/icon_error2.png}" alt="ERROR 이미지">
</div>
<div class="complete_txt">
<p>서비스 이용에 불편을 드려 죄송합니다.<br>
빠른 서비스를 제공할 수 있게 준비하겠습니다.</p>
</div>
<div class="cs_info">
<p>고객센터 : 1522-1000 / 해외 : +82-2-3778-9111</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
src/main/resources/templates/views/error.html
+224 -51
View File
@@ -1,67 +1,240 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="utf-8">
<title>서비스 오류 - API Portal</title>
<style>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<meta charset="UTF-8"/>
<title th:text="#{title.html}">개발자 포털</title>
<meta content="max-age=0, public" http-equiv="Cache-Control"/>
<meta content="index, follow" name="robots"/>
<meta content="https://www.eactive.co.kr/" property="og:url"/>
<link rel="icon" type="image/ico" th:href="@{/favicon.ico}">
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
<!-- <link rel="stylesheet" type="text/css" th:href="@{/css/common2.css}">-->
/* Font */
@font-face {
font-family: 'Noto Sans KR';
font-weight: 400;
src: local('Noto Sans KR Regular');
}
@font-face {
font-family: 'Noto Sans KR';
font-weight: 700;
src: local('Noto Sans KR Bold');
}
body {
font-family: 'Noto Sans KR', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: #f8f9fa;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.error-container {
background-color: #ebfbff;
border-radius: 12px;
padding: 70px 53px 60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
max-width: 700px;
width: 100%;
}
.error-icon {
width: 220px;
height: 220px;
}
.error-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.error-title {
font-size: 26px;
font-weight: 700;
color: #212529;
text-align: center;
line-height: 1.4;
}
.error-description {
font-size: 20px;
font-weight: 400;
color: #212529;
text-align: center;
line-height: 1.6;
}
.error-buttons {
display: flex;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
height: 50px;
padding: 10px 24px;
border-radius: 12px;
border: none;
cursor: pointer;
text-decoration: none;
font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
font-size: 22px;
font-weight: 700;
color: #ffffff;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
.btn-retry {
background-color: #d4a553;
}
.btn-home {
background-color: #00a1d7;
}
.btn-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* Error Message Box */
.error-message-box {
background-color: #fff5f5;
border: 1px solid #feb2b2;
border-radius: 8px;
padding: 16px 24px;
max-width: 100%;
width: 100%;
}
.error-message-label {
font-size: 14px;
font-weight: 700;
color: #c53030;
margin-bottom: 8px;
}
.error-message-text {
font-size: 14px;
color: #742a2a;
line-height: 1.5;
word-break: break-word;
white-space: pre-wrap;
}
/* Responsive */
@media screen and (max-width: 600px) {
.error-container {
padding: 50px 30px 40px;
gap: 35px;
}
.error-icon {
width: 160px;
height: 160px;
}
.error-title {
font-size: 20px;
}
.error-description {
font-size: 16px;
}
.error-buttons {
flex-direction: column;
gap: 16px;
width: 100%;
}
.btn {
font-size: 18px;
height: 46px;
width: 100%;
}
.btn-icon {
width: 20px;
height: 20px;
}
.error-message-box {
padding: 12px 16px;
}
.error-message-label {
font-size: 13px;
}
.error-message-text {
font-size: 13px;
}
}
</style>
</head>
<body>
<div id="wrap" class="wrap_top">
<section class="content pop">
<div class="sub_title2">
<p class="title2 add" style="display: none;">에러페이지</p>
</div>
<div class="error-container">
<!-- Error Icon -->
<div class="error-icon">
<!-- 3D Speech Bubble Error Icon - Base64 encoded or use th:src for server image -->
<img th:src="@{/img/error_3d.png}" alt="에러">
</div>
<div class="content_wrap cp_box">
<div class="inner i_cs9">
<div class="tit_logo2 m-only">
<img th:src="@{/img/logo/img_logo4.png}" alt="Kbank API Portal">
</div>
<div class="tit_logo2 pc-only">
<img th:src="@{/img/logo/img_logo5.png}" alt="Kbank API Portal">
</div>
<div class="email_tit m-only">
<p>일시적인 장애로<br> 서비스가 중단되었습니다.</p>
</div>
<div class="email_tit pc-only">
<p>일시적인 장애로 서비스가 중단되었습니다.</p>
</div>
<div class="form_type top_m">
<div class="i_complete m-only">
<img th:src="@{/img/icon/icon_error.png}" alt="ERROR 이미지">
</div>
<div class="i_complete pc-only">
<img th:src="@{/img/icon/icon_error2.png}" alt="ERROR 이미지">
</div>
<div class="complete_txt">
<p>서비스 이용에 불편을 드려 죄송합니다.<br>
빠른 서비스를 제공할 수 있게 준비하겠습니다.</p>
</div>
<div class="cs_info">
<p>고객센터 : 1522-1000 / 해외 : +82-2-3778-9111</p>
</div>
</div>
<!-- Error Title -->
<h1 class="error-title">일시적인 장애로 서비스가 중단되었습니다.</h1>
<!-- Error Description -->
<p class="error-description">
서비스 이용에 불편을 드려 죄송합니다.<br>
빠른 서비스를 제공할 수 있게 준비하겠습니다.
</p>
<!-- Error Message (서버에서 전달된 에러 메시지가 있을 경우 표시) -->
<div th:if="${errorMessage}" class="error-message-box">
<p class="error-message-label">오류 상세</p>
<p class="error-message-text" th:text="${errorMessage}"></p>
</div>
<!-- Action Buttons -->
<div class="error-buttons">
<!-- Home Button -->
<a th:href="@{/}" href="/" class="btn btn-home">
<svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
<span>홈으로 돌아가기</span>
</a>
</div>
</div>
</section>
</div>
</body>
</html>