refactor(ui): 경로 오류를 텍스트 상태로 단순화

공통 EmptyState 대신 콘텐츠 열에 맞는 상태 표식과 텍스트 재시도 행동을 사용합니다.

Author: dev-wooyeon

ui/RouteError.test.tsx

@@ -3,14 +3,18 @@ import { render, screen } from '@testing-library/react';
 import RouteError from './RouteState/RouteError';
 
 describe('RouteError', () => {
-  it('renders default error copy', () => {
+  it('renders a route-aligned textual status without an illustration', () => {
     render(<RouteError />);
 
-    expect(screen.getByText('문제가 발생했습니다')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('UNAVAILABLE');
+    expect(
+      screen.getByRole('heading', { name: '이 페이지를 표시할 수 없습니다' })
+    ).toHaveClass('ark-route-error-title');
     expect(screen.getByText('잠시 후 다시 시도해 주세요.')).toBeInTheDocument();
+    expect(screen.queryByText('⚠️')).not.toBeInTheDocument();
   });
 
-  it('calls retry callback when action is clicked', async () => {
+  it('calls retry callback from the text action', async () => {
     const onRetry = vi.fn();
     const { getByRole } = render(
       <RouteError
@@ -22,6 +26,8 @@ describe('RouteError', () => {
 
     await getByRole('button', { name: '다시 시도' }).click();
     expect(onRetry).toHaveBeenCalledTimes(1);
+    expect(getByRole('button', { name: '다시 시도' })).toHaveClass(
+      'ark-route-error-retry'
+    );
   });
 });
-

ui/RouteState/RouteError.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { EmptyState } from '@/ui/EmptyState';
 
 interface RouteErrorProps {
   title?: string;
@@ -11,30 +10,37 @@ interface RouteErrorProps {
 }
 
 export default function RouteError({
-  title = '문제가 발생했습니다',
+  title = '이 페이지를 표시할 수 없습니다',
   description = '잠시 후 다시 시도해 주세요.',
   onRetry,
   className,
 }: RouteErrorProps) {
   return (
-    <div
-      className={clsx('flex min-h-96 items-center justify-center', className)}
-    >
-      <EmptyState
-        icon={<span className="tossface">⚠️</span>}
-        title={title}
-        description={description}
-        variant="error"
-        action={
-          onRetry
-            ? {
-                label: '다시 시도',
-                onClick: onRetry,
-              }
-            : undefined
-        }
-      />
-    </div>
+    <main className={clsx('ark-route-error', className)}>
+      <section
+        aria-live="polite"
+        aria-labelledby="route-error-title"
+        className="ark-route-error-content"
+        role="status"
+      >
+        <p className="ark-route-error-label">UNAVAILABLE</p>
+        <h1 id="route-error-title" className="ark-route-error-title">
+          {title}
+        </h1>
+        {description ? (
+          <p className="ark-route-error-description">{description}</p>
+        ) : null}
+        {onRetry ? (
+          <button
+            className="ark-route-error-retry"
+            onClick={onRetry}
+            type="button"
+          >
+            다시 시도
+          </button>
+        ) : null}
+      </section>
+    </main>
   );
 }