fix: disputes/[id] 페이지 UI 및 판결 플로우 수정

next.config.ts

@@ -16,6 +16,10 @@ const nextConfig: NextConfig = {
         protocol: 'https',
         hostname: 'k.kakaocdn.net',
       },
+      {
+        protocol: 'https',
+        hostname: '*.kakaocdn.net',
+      },
     ],
   },
 };

src/app/(page)/disputes/[id]/DisputePage.module.scss

@@ -114,6 +114,7 @@
 }
 
 .avatar {
+  position: relative;
   width: fn.r(20);
   height: fn.r(20);
   border-radius: 50%;
@@ -240,12 +241,11 @@
   align-items: center;
   justify-content: space-between;
   padding: fn.r(16) fn.r(20);
-  margin: 0 fn.r(20) fn.r(12);
   background: #{v.$color-primary-100};
   border-radius: fn.r(8);
   border: none;
   cursor: pointer;
-  width: calc(100% - fn.r(40));
+  width: 100%;
   text-align: left;
 }
 
@@ -289,7 +289,6 @@
   right: 0;
   padding: fn.r(16) fn.r(20);
   background: var(--bg-page);
-  border-top: 1px solid var(--border-default);
 }
 
 .footerRow {

src/app/(page)/disputes/[id]/page.tsx

@@ -1,20 +1,23 @@
 'use client'
 
 import React from 'react'
+import Image from 'next/image'
 import { useRouter } from 'next/navigation'
+import { useQueryClient } from '@tanstack/react-query'
 import AutorenewRoundedIcon from '@mui/icons-material/AutorenewRounded'
 import Header from '@/components/layout/Header'
 import Button from '@/components/ui/Button'
 import Tabs from '@/components/ui/Tabs'
+import Tab from '@/components/ui/Tab'
 import Spinner from '@/components/ui/Spinner'
 import StatusBadge from '@/components/ui/StatusBadge'
 import CategoryIcon from '@/components/ui/CategoryIcon'
 import InviteChoiceModal from '@/components/room/InviteChoiceModal'
-import { useDispute, useRequestJudgment } from '@/domains/dispute/dispute.hooks'
-import { useJudgment } from '@/domains/judgement/judgement.hooks'
 import JudgmentResult from '@/components/judgement/JudgmentResult'
 import JudgmentTypeResult from '@/components/judgement/JudgmentTypeResult'
-import Tab from '@/components/ui/Tab'
+import { useDispute, useRequestJudgment, useCloseDispute, disputeKeys } from '@/domains/dispute/dispute.hooks'
+import { useJudgment } from '@/domains/judgement/judgement.hooks'
+import { useUserMe } from '@/domains/user/hooks'
 import { useToastStore } from '@/stores/toastStore'
 import styles from './DisputePage.module.scss'
 
@@ -23,24 +26,22 @@ const TABS = [
   { id: 'statement', label: '진술' },
   { id: 'judgement', label: '판결' },
 ]
-const CATEGORY_BG: Record<string, string> = {
-  romance: 'var(--category-love-bg)',
-  work:    'var(--category-work-bg)',
-  friend:  'var(--category-friend-bg)',
-  family:  'var(--category-family-bg)',
-}
 
 export default function DisputePage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = React.use(params)
   const router = useRouter()
+  const queryClient = useQueryClient()
 
   const { data: dispute, isLoading: fetchLoading } = useDispute(id)
   const { mutate: requestJudgment, isPending: isJudging } = useRequestJudgment(id)
+  const { mutate: closeDispute, isPending: isClosing } = useCloseDispute(id)
+  const { data: userMe } = useUserMe()
 
   // judged(판결완료) + closed(종료) 모두 판결 결과 탭 노출
   const isCompleted = !!dispute && (COMPLETED_STATUSES as readonly string[]).includes(dispute.status)
   // 판결 완료/종료 상태일 때만 fetch — 불필요한 API 호출 방지
   const { data: judgment, isLoading: judgmentLoading, isError: judgmentError } = useJudgment(id, isCompleted)
+
   const showToast = useToastStore((s) => s.show)
 
   const [activeTab, setActiveTab] = React.useState('statement')
@@ -76,13 +77,12 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
     setShowSoloModal(false)
     requestJudgment(undefined, {
       onError: (error) => showToast(error instanceof Error ? error.message : 'AI 판결 요청에 실패했습니다.'),
-      onSuccess: () => router.refresh(),
     })
   }
 
   if (fetchLoading) return null
 
-  if (isJudging || dispute?.status === 'judging') {
+  if (isJudging) {
     return (
       <div className={styles.judgingScreen}>
         <div className={styles.judgingContent}>
@@ -112,15 +112,15 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
       <section className={styles.infoCard}>
         <div className={styles.infoRow}>
           <div className={styles.infoTitleGroup}>
-            <div
-              className={styles.categoryChip}
-              style={{ backgroundColor: CATEGORY_BG[dispute.categoryGroup] }}
-            >
+            <div className={styles.categoryChip}>
               <CategoryIcon category={dispute.categoryGroup} />
             </div>
             <span className={styles.infoTitle}>{dispute.title}</span>
           </div>
-          <AutorenewRoundedIcon sx={{ fontSize: 24, color: 'var(--icon-secondary)', flexShrink: 0 }} />
+          <AutorenewRoundedIcon
+            sx={{ fontSize: 24, color: 'var(--icon-secondary)', flexShrink: 0, cursor: 'pointer' }}
+            onClick={() => queryClient.invalidateQueries({ queryKey: disputeKeys.detail(id) })}
+          />
         </div>
 
         {dispute.description && (
@@ -130,15 +130,16 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
         <div className={styles.infoMeta}>
           <div className={styles.infoDateGroup}>
             <div className={styles.avatarStack}>
-              {dispute.participants.slice(0, 2).map((p) => (
-                <div key={p.id} className={styles.avatar}>
-                  {p.profileImageUrl ? (
-                    <img src={p.profileImageUrl} alt="" className={styles.avatarImg} />
-                  ) : (
-                    <div className={styles.avatarFallback} />
-                  )}
-                </div>
-              ))}
+              {dispute.participants.slice(0, 2).map((p) => {
+                const imgSrc = p.profileImageUrl
+                  ?? (p.userId === userMe?.id ? userMe?.profileImageUrl : null)
+                  ?? '/images/common/thumbnail-default.png'
+                return (
+                  <div key={p.id} className={styles.avatar}>
+                    <Image src={imgSrc} alt="" fill className={styles.avatarImg} />
+                  </div>
+                )
+              })}
             </div>
             <span className={styles.infoDate}>{formattedDate}</span>
           </div>
@@ -189,7 +190,6 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
 
         {isCompleted && activeTab === 'judgement' && (
           <>
-            {/* 판결 / 유형 서브탭 — 공통 Tab 컴포넌트 사용 */}
             <div className={styles.judgmentSubTabs}>
               <Tab
                 items={[
@@ -222,7 +222,15 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
       {!isCompleted && (
         <div className={styles.footer}>
           <div className={styles.footerRow}>
-            <Button variant="outline">사건종료</Button>
+            <Button
+              variant="outline"
+              disabled={isClosing}
+              onClick={() => closeDispute(undefined, {
+                onError: (error) => showToast(error instanceof Error ? error.message : '사건 종료에 실패했습니다.'),
+              })}
+            >
+              {isClosing ? '종료 중...' : '사건종료'}
+            </Button>
             <Button
               disabled={!canJudge}
               onClick={() => isSolo ? setShowSoloModal(true) : void runJudge()}

src/app/(page)/disputes/[id]/statement/StatementPage.module.scss

@@ -122,3 +122,32 @@
   flex-direction: column;
   gap: fn.r(8);
 }
+
+.savingScreen {
+  position: fixed;
+  inset: 0;
+  background: linear-gradient(180deg, #{v.$color-primary-200} 0%, #{v.$color-white} 50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.savingContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: fn.r(20);
+  width: min(100%, fn.r(362));
+  padding: 0 fn.r(16);
+}
+
+.savingText {
+  font-family: v.$font-family-base;
+  font-size: v.$font-size-title-m;
+  font-weight: v.$font-weight-semibold;
+  line-height: v.$line-height-title-m;
+  color: var(--text-primary);
+  text-align: center;
+  white-space: pre-line;
+}
+

src/app/(page)/disputes/[id]/statement/page.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
 import Header from '@/components/layout/Header'
 import Button from '@/components/ui/Button'
 import Select from '@/components/ui/Select'
+import Spinner from '@/components/ui/Spinner'
 import Textarea from '@/components/ui/Textarea'
 import { CATEGORY_ICON_MAP, CATEGORY_LABEL_MAP } from '@/components/ui/CategoryIcon'
 import type { CategoryGroup } from '@/types/common'
@@ -71,6 +72,17 @@ export default function StatementPage({
     }
   }
 
+  if (isLoading) {
+    return (
+      <div className={styles.savingScreen}>
+        <div className={styles.savingContent}>
+          <Spinner />
+          <p className={styles.savingText}>{'사건 정보를 분석하고 있어요\n잠시만 기다려주세요'}</p>
+        </div>
+      </div>
+    )
+  }
+
   if (!category) {
     return (
       <div className={styles.page}>

src/app/api/disputes/[id]/statements/route.ts

@@ -313,14 +313,21 @@ export async function POST(
 
     // AI 2: title/description 추출 — ROLE_A 최초 저장 시에만 실행 (ROLE_B가 덮어쓰지 않도록)
     if (participant.role === 'ROLE_A' && isNew) {
-      extractDisputeMeta(content)
-        .then((meta) =>
-          prisma.dispute.update({
-            where: { id: disputeId },
-            data: { title: meta.title, description: meta.summary },
-          }),
-        )
-        .catch((err) => console.error('[statements] extractDisputeMeta failed:', err))
+      const META_TIMEOUT_MS = 10000
+      try {
+        const meta = await Promise.race([
+          extractDisputeMeta(content),
+          new Promise<never>((_, reject) =>
+            setTimeout(() => reject(new Error('extractDisputeMeta timeout')), META_TIMEOUT_MS),
+          ),
+        ])
+        await prisma.dispute.update({
+          where: { id: disputeId },
+          data: { title: meta.title, description: meta.summary },
+        })
+      } catch (err) {
+        console.error('[statements] extractDisputeMeta failed:', err)
+      }
     }
 
     return NextResponse.json<ApiResponse<StatementData>>(

src/app/api/disputes/[id]/status/route.ts

@@ -0,0 +1,106 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { z } from 'zod'
+import { authOptions } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+import { getSessionUserId } from '@/lib/auth/session'
+import type { ApiResponse } from '@/types/common'
+import type { DisputeStatus } from '@/types/dispute'
+
+const ALLOWED_STATUSES = ['closed', 'waiting_opponent', 'both_submitted'] as const
+
+const statusSchema = z.object({
+  status: z.enum(ALLOWED_STATUSES, {
+    errorMap: () => ({ message: '허용되지 않는 상태값입니다.' }),
+  }),
+})
+
+// PATCH /api/disputes/:id/status
+// dispute status 변경. 참여자만 가능.
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const session = await getServerSession(authOptions)
+  const userId = getSessionUserId(session)
+  if (!userId) {
+    return NextResponse.json<ApiResponse>(
+      { success: false, error: { code: 'UNAUTHORIZED', message: '로그인이 필요합니다.' } },
+      { status: 401 },
+    )
+  }
+
+  const { id } = await params
+
+  let body: unknown
+  try {
+    body = await request.json()
+  } catch {
+    return NextResponse.json<ApiResponse>(
+      { success: false, error: { code: 'INVALID_REQUEST', message: '요청 본문을 파싱할 수 없습니다.' } },
+      { status: 400 },
+    )
+  }
+
+  const parsed = statusSchema.safeParse(body)
+  if (!parsed.success) {
+    return NextResponse.json<ApiResponse>(
+      { success: false, error: { code: 'VALIDATION_ERROR', message: parsed.error.errors[0]?.message ?? '입력값이 올바르지 않습니다.' } },
+      { status: 400 },
+    )
+  }
+
+  const { status: newStatus } = parsed.data
+
+  try {
+    const [participant, dispute] = await Promise.all([
+      prisma.disputeParticipant.findFirst({ where: { disputeId: id, userId } }),
+      prisma.dispute.findFirst({ where: { id, deletedAt: null } }),
+    ])
+
+    if (!dispute) {
+      return NextResponse.json<ApiResponse>(
+        { success: false, error: { code: 'DISPUTE_NOT_FOUND', message: '사건을 찾을 수 없습니다.' } },
+        { status: 404 },
+      )
+    }
+
+    if (!participant) {
+      return NextResponse.json<ApiResponse>(
+        { success: false, error: { code: 'FORBIDDEN', message: '해당 사건의 참여자가 아닙니다.' } },
+        { status: 403 },
+      )
+    }
+
+    // 이미 목표 상태면 멱등 성공 반환
+    if (dispute.status === newStatus.toUpperCase()) {
+      return NextResponse.json<ApiResponse<{ status: DisputeStatus }>>({
+        success: true,
+        data: { status: dispute.status.toLowerCase() as DisputeStatus },
+      })
+    }
+
+    const terminalStatuses = ['JUDGED', 'CLOSED', 'DELETED', 'EXPIRED']
+    if (terminalStatuses.includes(dispute.status)) {
+      return NextResponse.json<ApiResponse>(
+        { success: false, error: { code: 'DISPUTE_NOT_MODIFIABLE', message: '이미 종료된 사건입니다.' } },
+        { status: 409 },
+      )
+    }
+
+    const updated = await prisma.dispute.update({
+      where: { id },
+      data: { status: newStatus.toUpperCase() as Uppercase<typeof newStatus> },
+    })
+
+    return NextResponse.json<ApiResponse<{ status: DisputeStatus }>>({
+      success: true,
+      data: { status: updated.status.toLowerCase() as DisputeStatus },
+    })
+  } catch {
+    return NextResponse.json<ApiResponse>(
+      { success: false, error: { code: 'INTERNAL_SERVER_ERROR', message: '서버 오류가 발생했습니다.' } },
+      { status: 500 },
+    )
+  }
+}

src/domains/dispute/dispute.api.ts

@@ -47,3 +47,13 @@ export async function requestJudgment(disputeId: string): Promise<void> {
   const json = await parseJson(res, 'AI 판결 요청 실패')
   if (!json.success) throw new Error(json.error?.message ?? 'AI 판결 요청 실패')
 }
+
+export async function closeDispute(disputeId: string): Promise<void> {
+  const res = await fetch(`/api/disputes/${disputeId}/status`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ status: 'closed' }),
+  })
+  const json = await parseJson(res, '사건 종료 실패')
+  if (!json.success) throw new Error(json.error?.message ?? '사건 종료 실패')
+}