pandoli365
/
bibimbap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(redesign): 에러페이지 empty-state 외형 + 코드 분기 

errer.jsp에 디자인 SVG 아이콘·.empty-state 외형 이식,
403/404/기타 3분기 확장. status_code scriptlet 코드읽기 방식과
isErrorPage·requestUri/message 상세 블록 보존(errorData EL 미채택).
뷰명 errer 유지.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
이정수 2026-06-30 16:22:09 +09:00
parent 29182a3124
commit d618087d0b
1 changed files with 96 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
src/main/webapp/WEB-INF/views/errer.jsp
View File

@ -1,4 +1,5 @@
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" isErrorPage="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%!
private String htmlEscape(Object value) {
if (value == null) {
@ -67,81 +68,42 @@
align-items: center;
justify-content: center;
}
.error-panel {
width: min(100%, 38rem);
padding: 2rem;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--card-bg);
box-shadow: 0 2px 8px var(--card-shadow);
/* empty-state */
.empty-state {
text-align: center;
padding: 48px 24px;
max-width: 480px;
margin: 0 auto;
}
.error-panel__media {
width: 8rem;
height: 8rem;
margin: 0 auto 1.5rem;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, var(--card-media-1) 0%, var(--card-media-2) 45%, var(--card-media-3) 100%);
}
.error-panel__logo {
width: 5rem;
height: auto;
object-fit: contain;
opacity: 0.9;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
}
html[data-theme="dark"] .error-panel__logo {
opacity: 0.94;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
.error-panel__eyebrow {
margin: 0 0 0.5rem;
font-size: 0.8125rem;
.empty-state svg { display: block; margin: 0 auto; }
.empty-state .code {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
color: var(--accent);
letter-spacing: 0.02em;
margin-top: 16px;
}
.error-panel__title {
margin: 0;
font-size: clamp(1.75rem, 4vw, 2.5rem);
line-height: 1.2;
letter-spacing: 0;
.empty-state h3 {
font-size: 1.35rem;
font-weight: 800;
color: var(--text);
margin: 8px 0 0;
}
.error-panel__description {
max-width: 28rem;
margin: 1rem auto 0;
.empty-state p {
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.65;
color: var(--text-muted);
margin: 12px 0 0;
}
.error-panel__meta {
margin: 1rem auto 0;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-muted);
background: rgba(0, 0, 0, 0.025);
font-size: 0.8125rem;
line-height: 1.5;
text-align: left;
word-break: break-word;
}
html[data-theme="dark"] .error-panel__meta {
background: rgba(255, 255, 255, 0.04);
}
.error-panel__actions {
.empty-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.625rem;
margin-top: 1.5rem;
gap: 10px;
margin-top: 24px;
}
.error-panel__button {
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
@ -157,29 +119,42 @@
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.error-panel__button--primary {
.btn:hover {
border-color: rgba(232, 165, 75, 0.45);
box-shadow: 0 4px 12px var(--card-shadow);
}
.btn:active { transform: scale(0.98); }
.btn-primary {
border-color: transparent;
color: var(--button-text);
background: var(--accent);
}
.error-panel__button:hover {
border-color: rgba(232, 165, 75, 0.45);
box-shadow: 0 4px 12px var(--card-shadow);
.btn-ghost {
border-color: var(--border);
background: transparent;
}
.error-panel__button:active {
transform: scale(0.98);
/* error meta detail */
.error-meta {
margin: 1rem auto 0;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-muted);
background: rgba(0, 0, 0, 0.025);
font-size: 0.8125rem;
line-height: 1.5;
text-align: left;
word-break: break-word;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
html[data-theme="dark"] .error-meta {
background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 480px) {
.page-main {
align-items: flex-start;
padding-top: 1.5rem;
}
.error-panel {
padding: 1.5rem 1rem;
}
.error-panel__button {
width: 100%;
}
.page-main { align-items: flex-start; padding-top: 1.5rem; }
.btn { width: 100%; }
}
</style>
</head>
@ -193,25 +168,53 @@
if (message == null || String.valueOf(message).isBlank()) {
message = exception != null ? exception.getMessage() : null;
}
int code = (statusCode != null) ? (Integer) statusCode : 0;
%>
<main class="page-main">
<section class="error-panel" aria-labelledby="error-title">
<div class="error-panel__media" aria-hidden="true">
<img class="error-panel__logo" src="<%= ctx %>/images/logo.png" alt="" width="120" height="120" />
<div class="empty-state">
<% if (code == 403) { %>
<svg width="86" height="86" viewBox="0 0 86 86" fill="none" aria-hidden="true">
<rect x="24" y="38" width="38" height="30" rx="6" fill="#FBEFD6" stroke="#D4A853" stroke-width="2.5"/>
<path d="M31 38v-7a12 12 0 0 1 24 0v7" fill="none" stroke="#D4A853" stroke-width="2.5"/>
<circle cx="43" cy="50" r="4" fill="#D4A853"/>
<line x1="43" y1="54" x2="43" y2="60" stroke="#D4A853" stroke-width="2.5" stroke-linecap="round"/>
</svg>
<span class="code">ERROR 403</span>
<h3>로그인이 필요한 페이지예요</h3>
<p>이 작업은 로그인한 회원만 가능합니다. 로그인 후 다시 시도해 주세요.</p>
<div class="empty-actions">
<a class="btn btn-primary" href="<%= ctx %>/login">로그인</a>
<a class="btn btn-ghost" href="<%= ctx %>/">홈으로</a>
</div>
<% } else if (code == 404) { %>
<svg width="86" height="86" viewBox="0 0 86 86" fill="none" aria-hidden="true">
<circle cx="40" cy="40" r="20" fill="#FBEFD6" stroke="#D4A853" stroke-width="2.5"/>
<line x1="54" y1="54" x2="68" y2="68" stroke="#D4A853" stroke-width="3" stroke-linecap="round"/>
<line x1="33" y1="40" x2="47" y2="40" stroke="#D4A853" stroke-width="2.5" stroke-linecap="round"/>
</svg>
<span class="code">ERROR 404</span>
<h3>페이지를 찾을 수 없어요</h3>
<p>주소가 바뀌었거나 삭제된 페이지일 수 있어요. 주소를 확인하거나 홈으로 돌아가 주세요.</p>
<div class="empty-actions">
<a class="btn btn-primary" href="<%= ctx %>/">홈으로</a>
<a class="btn btn-ghost" href="javascript:history.back()">이전 페이지</a>
</div>
<p class="error-panel__eyebrow">
<% if (statusCode != null) { %>
ERROR <%= statusCode %>
<% } else { %>
ERROR
<svg width="86" height="86" viewBox="0 0 86 86" fill="none" aria-hidden="true">
<circle cx="43" cy="43" r="24" fill="#FBEFD6" stroke="#D4A853" stroke-width="2.5"/>
<line x1="43" y1="32" x2="43" y2="46" stroke="#D4A853" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="43" cy="53" r="2" fill="#D4A853"/>
</svg>
<span class="code"><% if (statusCode != null) { %>ERROR <%= statusCode %><% } else { %>ERROR<% } %></span>
<h3>페이지를 불러오지 못했습니다</h3>
<p>요청을 처리하는 중 문제가 발생했습니다. 잠시 후 다시 시도하거나 홈으로 돌아가 다른 메뉴를 이용해 주세요.</p>
<div class="empty-actions">
<a class="btn btn-primary" href="<%= ctx %>/">홈으로 이동</a>
<a class="btn btn-ghost" href="javascript:history.back()">이전 페이지</a>
</div>
<% } %>
</p>
<h1 class="error-panel__title" id="error-title">페이지를 불러오지 못했습니다</h1>
<p class="error-panel__description">
요청을 처리하는 중 문제가 발생했습니다. 잠시 후 다시 시도하거나 홈으로 돌아가 다른 메뉴를 이용해 주세요.
</p>
<% if (requestUri != null || message != null) { %>
<div class="error-panel__meta" aria-label="오류 상세 정보">
<div class="error-meta" aria-label="오류 상세 정보">
<% if (requestUri != null) { %>
<div>요청 경로: <%= htmlEscape(requestUri) %></div>
<% } %>
@ -220,11 +223,7 @@
<% } %>
</div>
<% } %>
<div class="error-panel__actions">
<a class="error-panel__button error-panel__button--primary" href="<%= ctx %>/">홈으로 이동</a>
<a class="error-panel__button" href="javascript:history.back()">이전 페이지</a>
</div>
</section>
</main>
<jsp:include page="/WEB-INF/views/footer.jsp"/>
</body>