fix: 사건 생성 플로우 개선 및 UI/성능 수정

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

@@ -186,7 +186,6 @@
 .statementCardEditable {
   cursor: pointer;
 
-  &:hover,
   &:focus {
     border-color: v.$color-primary-500;
     outline: none;

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

@@ -87,7 +87,15 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
     '진술 내용을 정리하고 있어요',
     '거의 다 됐어요, 잠시만요',
   ];
+  const JUDGING_MESSAGES = [
+    '작성한 진술서를 바탕으로\n분석중이에요',
+    'AI가 양측 진술을\n검토하고 있어요',
+    '핵심 쟁점을\n파악하고 있어요',
+    '공정한 판결을\n준비하고 있어요',
+    '거의 다 됐어요,\n잠시만요',
+  ];
   const [metaMsgIdx, setMetaMsgIdx] = React.useState(0);
+  const [judgingMsgIdx, setJudgingMsgIdx] = React.useState(0);
   React.useEffect(() => {
     if (!isExtractingMeta) return;
     const timer = setInterval(() => {
@@ -96,13 +104,23 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
     return () => clearInterval(timer);
   }, [isExtractingMeta]);
 
+  React.useEffect(() => {
+    if (!isJudging) return;
+    const timer = setInterval(() => {
+      setJudgingMsgIdx((i) => (i + 1) % JUDGING_MESSAGES.length);
+    }, 2500);
+    return () => clearInterval(timer);
+  }, [isJudging]);
+
   // 판결 완료/종료 상태일 때만 fetch — 불필요한 API 호출 방지
+  const isJudged = !!dispute && dispute.status === 'judged';
+
   const {
     data: judgment,
     isLoading: judgmentLoading,
     isError: judgmentError,
     error: judgmentErrorData,
-  } = useJudgment(id, isCompleted);
+  } = useJudgment(id, isJudged);
 
   const showToast = useToastStore((s) => s.show);
 
@@ -187,7 +205,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
       <div className={styles.judgingScreen}>
         <div className={styles.judgingContent}>
           <Spinner />
-          <p className={styles.judgingText}>{'작성한 진술서를 바탕으로\n분석중이에요'}</p>
+          <p className={styles.judgingText}>{JUDGING_MESSAGES[judgingMsgIdx]}</p>
         </div>
       </div>
     );
@@ -347,10 +365,14 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
               <div className={styles.judgementPlaceholder}>
                 <p className={styles.empty}>판결 결과를 불러올 수 없습니다.</p>
               </div>
+            ) : !judgment ? (
+              <div className={styles.judgementPlaceholder}>
+                <p className={styles.empty}>판결 결과를 불러올 수 없습니다.</p>
+              </div>
             ) : judgmentSubTab === 'verdict' ? (
-              <JudgmentResult disputeId={id} />
+              <JudgmentResult judgment={judgment} participants={dispute.participants} />
             ) : (
-              <JudgmentTypeResult disputeId={id} />
+              <JudgmentTypeResult judgment={judgment} participants={dispute.participants} />
             )}
           </>
         )}

src/app/(page)/rooms/[roomId]/statement/StatementPage.module.scss

@@ -0,0 +1,155 @@
+@use '@/styles/abstracts/variables' as v;
+@use '@/styles/abstracts/functions' as fn;
+@use '@/styles/abstracts/mixins' as m;
+
+.page {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-page);
+}
+
+.content {
+  padding: fn.r(16) fn.r(20) fn.r(100);
+  display: flex;
+  flex-direction: column;
+  gap: fn.r(16);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: fn.r(16);
+}
+
+.label {
+  @include m.text-body-s;
+
+  color: v.$color-black;
+  margin: 0;
+}
+
+.categories {
+  display: flex;
+  flex-direction: row;
+}
+
+.categoryItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: fn.r(4);
+  width: fn.r(44);
+}
+
+.categoryIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fn.r(44);
+  height: fn.r(44);
+  border-radius: fn.r(8);
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border-brand);
+}
+
+.categoryLabel {
+  @include m.text-caption;
+  font-weight: v.$font-weight-bold;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.statementGroup {
+  display: flex;
+  flex-direction: column;
+  gap: fn.r(8);
+}
+
+.textarea {
+  min-height: fn.r(350);
+}
+
+.footer {
+  padding: 0 fn.r(20) fn.r(40);
+  background-color: var(--bg-page);
+}
+
+.footerRow {
+  display: flex;
+  gap: fn.r(8);
+}
+
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  padding: fn.r(20);
+}
+
+.modal {
+  background-color: var(--bg-page);
+  border-radius: fn.r(16);
+  padding: fn.r(24) fn.r(20);
+  width: 100%;
+  max-width: fn.r(320);
+  display: flex;
+  flex-direction: column;
+  gap: fn.r(20);
+}
+
+.modalText {
+  @include m.text-body-m;
+  color: var(--text-primary);
+  margin: 0;
+  text-align: center;
+}
+
+.modalSubText {
+  @include m.text-body-s;
+
+  color: var(--text-secondary);
+  margin: fn.r(-12) 0 0;
+  text-align: center;
+}
+
+.modalActions {
+  display: flex;
+  flex-direction: column;
+  gap: fn.r(8);
+}
+
+// ===========================
+// Saving (로딩 화면)
+// ===========================
+
+.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;
+  z-index: 200;
+}
+
+.savingContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: fn.r(24);
+  width: fn.r(362);
+}
+
+.savingText {
+  font-family: v.$font-family-base;
+  font-size: v.$font-size-title-m;
+  font-weight: v.$font-weight-semibold;
+  color: v.$color-black;
+  text-align: center;
+  white-space: pre-line;
+  line-height: 1.5;
+}