Merge pull request #25 from boostcampwm-snu-2026-1/feature/issue-21-app-ui-refresh

feat: 앱 화면 UI 리프레시 — 인증 2단 레이아웃·진행 스테퍼·빈 상태 (#21)

Author: trz-21

frontend/app/(auth)/login/page.tsx

@@ -31,7 +31,42 @@ export default function LoginPage() {
   }
 
   return (
-    <main className="flex min-h-screen items-center justify-center bg-brand-50/40 p-4">
+    <main className="min-h-screen lg:grid lg:grid-cols-2">
+      <section className="hidden flex-col justify-between bg-gradient-to-br from-brand-800 to-brand-950 p-12 text-white lg:flex">
+        <span className="inline-flex items-center gap-2">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="24" height="24" rx="6" className="fill-white/15" />
+            <path
+              d="M7 12.5L10.5 16L17 8.5"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span className="font-semibold text-white">Coupang Review AI</span>
+        </span>
+        <div className="max-w-md">
+          <h2 className="text-3xl font-bold leading-tight">리뷰 속에 답이 있습니다</h2>
+          <p className="mt-4 text-brand-100">
+            경쟁 상품의 쿠팡 리뷰를 AI가 분석해, 무엇을 고치면 이기는지 알려드립니다.
+          </p>
+          <ul className="mt-8 flex flex-col gap-3 text-brand-100">
+            <li>✓ 최근 리뷰 수백 건 자동 수집</li>
+            <li>✓ 불만·강점 패턴 자동 추출</li>
+            <li>✓ 실행 가능한 개선 우선순위 제시</li>
+          </ul>
+        </div>
+        <p className="text-sm text-brand-200">© Coupang Review AI</p>
+      </section>
+      <div className="flex min-h-screen items-center justify-center bg-brand-50/40 p-6 lg:min-h-0">
       <Card className="w-full max-w-sm p-8">
         <Wordmark className="mb-6" />
         <h1 className="mb-6 text-2xl font-bold text-gray-900">로그인</h1>
@@ -66,6 +101,7 @@ export default function LoginPage() {
           </Link>
         </p>
       </Card>
+      </div>
     </main>
   );
 }

frontend/app/(auth)/register/page.tsx

@@ -31,7 +31,42 @@ export default function RegisterPage() {
   }
 
   return (
-    <main className="flex min-h-screen items-center justify-center bg-brand-50/40 p-4">
+    <main className="min-h-screen lg:grid lg:grid-cols-2">
+      <section className="hidden flex-col justify-between bg-gradient-to-br from-brand-800 to-brand-950 p-12 text-white lg:flex">
+        <span className="inline-flex items-center gap-2">
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect width="24" height="24" rx="6" className="fill-white/15" />
+            <path
+              d="M7 12.5L10.5 16L17 8.5"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span className="font-semibold text-white">Coupang Review AI</span>
+        </span>
+        <div className="max-w-md">
+          <h2 className="text-3xl font-bold leading-tight">리뷰 속에 답이 있습니다</h2>
+          <p className="mt-4 text-brand-100">
+            경쟁 상품의 쿠팡 리뷰를 AI가 분석해, 무엇을 고치면 이기는지 알려드립니다.
+          </p>
+          <ul className="mt-8 flex flex-col gap-3 text-brand-100">
+            <li>✓ 최근 리뷰 수백 건 자동 수집</li>
+            <li>✓ 불만·강점 패턴 자동 추출</li>
+            <li>✓ 실행 가능한 개선 우선순위 제시</li>
+          </ul>
+        </div>
+        <p className="text-sm text-brand-200">© Coupang Review AI</p>
+      </section>
+      <div className="flex min-h-screen items-center justify-center bg-brand-50/40 p-6 lg:min-h-0">
       <Card className="w-full max-w-sm p-8">
         <Wordmark className="mb-6" />
         <h1 className="mb-6 text-2xl font-bold text-gray-900">회원가입</h1>
@@ -68,6 +103,7 @@ export default function RegisterPage() {
           </Link>
         </p>
       </Card>
+      </div>
     </main>
   );
 }

frontend/app/(dashboard)/analyses/[id]/page.tsx

@@ -4,16 +4,9 @@ import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useAnalysisPolling } from '@/src/features/analysis/hooks/useAnalysisPolling';
 import { InsightReport } from '@/src/features/analysis/components/InsightReport';
+import { AnalysisProgress } from '@/src/features/analysis/components/AnalysisProgress';
 import { Card } from '@/src/shared/components/ui';
-import type { AnalysisStatus } from '@/src/features/analysis/types';
-
-const PROGRESS_LABEL: Record<AnalysisStatus, string> = {
-  pending: '분석 대기 중',
-  crawling: '리뷰 수집 중',
-  analyzing: 'AI 분석 중',
-  completed: '완료',
-  failed: '실패',
-};
+import type { Analysis, AnalysisResult } from '@/src/features/analysis/types';
 
 function BackLink() {
   return (
@@ -23,19 +16,33 @@ function BackLink() {
   );
 }
 
-function ProgressView({ status }: { status: AnalysisStatus }) {
+function formatCompletedAt(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return date.toLocaleString('ko-KR');
+}
+
+function ResultHeader({
+  result,
+  completedAt,
+}: {
+  result: AnalysisResult;
+  completedAt: string | null;
+}) {
+  const totalReviews = result.products.reduce(
+    (sum, product) => sum + product.total_reviews,
+    0,
+  );
   return (
-    <Card className="p-8 text-center">
-      <div
-        className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-brand-600"
-        role="status"
-        aria-label="로딩 중"
-      />
-      <p className="font-medium text-gray-900">{PROGRESS_LABEL[status]}</p>
-      <p className="mt-1 text-sm text-gray-500">분석 중입니다. 잠시만 기다려 주세요.</p>
-      <div className="mx-auto mt-4 h-1.5 w-48 overflow-hidden rounded-full bg-gray-100">
-        <div className="h-full w-1/2 animate-pulse rounded-full bg-brand-500" />
-      </div>
+    <Card className="p-5">
+      <p className="font-semibold text-gray-900">
+        {result.products.length}개 상품 · 총 {totalReviews}개 리뷰 분석 완료
+      </p>
+      {completedAt && (
+        <p className="mt-1 text-sm text-gray-500">
+          {formatCompletedAt(completedAt)} 생성
+        </p>
+      )}
     </Card>
   );
 }
@@ -49,6 +56,16 @@ function ErrorView({ message }: { message: string }) {
   );
 }
 
+function CompletedView({ analysis }: { analysis: Analysis }) {
+  if (!analysis.result) return null;
+  return (
+    <div className="flex flex-col gap-6">
+      <ResultHeader result={analysis.result} completedAt={analysis.completed_at} />
+      <InsightReport result={analysis.result} />
+    </div>
+  );
+}
+
 export default function AnalysisResultPage() {
   const params = useParams<{ id: string }>();
   const id = params?.id ?? '';
@@ -58,13 +75,13 @@ export default function AnalysisResultPage() {
   if (isError) {
     content = <ErrorView message="분석 정보를 불러오지 못했습니다." />;
   } else if (isLoading || !analysis) {
-    content = <ProgressView status="pending" />;
+    content = <AnalysisProgress status="pending" />;
   } else if (analysis.status === 'failed') {
     content = <ErrorView message={analysis.error ?? '알 수 없는 오류가 발생했습니다.'} />;
   } else if (analysis.status === 'completed' && analysis.result) {
-    content = <InsightReport result={analysis.result} />;
+    content = <CompletedView analysis={analysis} />;
   } else {
-    content = <ProgressView status={analysis.status} />;
+    content = <AnalysisProgress status={analysis.status} />;
   }
 
   return (

frontend/app/(dashboard)/dashboard/page.tsx

@@ -7,6 +7,7 @@ import { createAnalysis, listAnalyses } from '@/src/features/analysis/api';
 import { UrlInput } from '@/src/features/analysis/components/UrlInput';
 import { AnalysisCard } from '@/src/features/analysis/components/AnalysisCard';
 import { Card } from '@/src/shared/components/ui';
+import { EmptyState } from '@/src/shared/components/EmptyState';
 
 export default function DashboardPage() {
   const router = useRouter();
@@ -44,11 +45,19 @@ export default function DashboardPage() {
       </Card>
 
       <section>
-        <h2 className="mb-3 text-lg font-semibold text-gray-900">최근 분석</h2>
+        <div className="mb-3 flex items-center justify-between gap-2">
+          <h2 className="text-lg font-semibold text-gray-900">최근 분석</h2>
+          {!isLoading && analyses.length > 0 && (
+            <span className="text-sm text-gray-500">총 {analyses.length}건</span>
+          )}
+        </div>
         {isLoading ? (
           <p className="text-sm text-gray-500">불러오는 중...</p>
         ) : analyses.length === 0 ? (
-          <p className="text-sm text-gray-500">아직 분석 기록이 없습니다.</p>
+          <EmptyState
+            title="아직 분석 기록이 없습니다."
+            description="위에서 경쟁 상품 URL을 입력해 첫 분석을 시작해 보세요."
+          />
         ) : (
           <div className="grid gap-3 sm:grid-cols-2">
             {analyses.map((analysis) => (

frontend/src/features/analysis/components/AnalysisProgress.test.tsx

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { AnalysisProgress } from './AnalysisProgress';
+
+describe('AnalysisProgress', () => {
+  it('renders the three stepper labels', () => {
+    render(<AnalysisProgress status="crawling" />);
+
+    expect(screen.getByText('리뷰 수집')).toBeInTheDocument();
+    expect(screen.getByText('AI 분석')).toBeInTheDocument();
+    expect(screen.getByText('분석 완료')).toBeInTheDocument();
+  });
+
+  it('shows the waiting label when pending', () => {
+    render(<AnalysisProgress status="pending" />);
+
+    expect(screen.getByText('분석 대기 중')).toBeInTheDocument();
+    expect(screen.getByText(/분석 중입니다/)).toBeInTheDocument();
+  });
+
+  it('shows the crawling label and guidance while crawling', () => {
+    render(<AnalysisProgress status="crawling" />);
+
+    expect(screen.getByText('리뷰 수집 중')).toBeInTheDocument();
+    expect(screen.getByText(/분석 중입니다/)).toBeInTheDocument();
+  });
+
+  it('shows the analyzing label while analyzing', () => {
+    render(<AnalysisProgress status="analyzing" />);
+
+    expect(screen.getByText('AI 분석 중')).toBeInTheDocument();
+    expect(screen.getByText(/분석 중입니다/)).toBeInTheDocument();
+  });
+});