From d618087d0bf3ed5a5355dedc1b6050993b823b1c Mon Sep 17 00:00:00 2001
From: art <artbiit@naver.com>
Date: Tue, 30 Jun 2026 16:22:09 +0900
Subject: [PATCH] =?UTF-8?q?feat(redesign):=20=EC=97=90=EB=9F=AC=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20empty-state=20=EC=99=B8=ED=98=95=20+=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=B6=84=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/main/webapp/WEB-INF/views/errer.jsp | 193 ++++++++++++------------
 1 file changed, 96 insertions(+), 97 deletions(-)

diff --git a/src/main/webapp/WEB-INF/views/errer.jsp b/src/main/webapp/WEB-INF/views/errer.jsp
index 40718d4..9e18081 100644
--- a/src/main/webapp/WEB-INF/views/errer.jsp
+++ b/src/main/webapp/WEB-INF/views/errer.jsp
@@ -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>
-            <p class="error-panel__eyebrow">
-                <% if (statusCode != null) { %>
-                ERROR <%= statusCode %>
-                <% } else { %>
-                ERROR
-                <% } %>
-            </p>
-            <h1 class="error-panel__title" id="error-title">페이지를 불러오지 못했습니다</h1>
-            <p class="error-panel__description">
-                요청을 처리하는 중 문제가 발생했습니다. 잠시 후 다시 시도하거나 홈으로 돌아가 다른 메뉴를 이용해 주세요.
-            </p>
+            <% } 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>
+            <% } else { %>
+            <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>
+            <% } %>
             <% 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>
+        </div>
     </main>
     <jsp:include page="/WEB-INF/views/footer.jsp"/>
 </body>