feat: 약속 회고 AI 요약 결과 UI 구현

src/features/retrospectives/components/AiGradientIcon.tsx

@@ -0,0 +1,59 @@
+import { useId } from 'react'
+
+type AiGradientIconProps = {
+  className?: string
+}
+
+export default function AiGradientIcon({ className = 'size-6' }: AiGradientIconProps) {
+  const gradientId = `${useId()}-ai-gradient`
+
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="22"
+          y1="12"
+          x2="2"
+          y2="12"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#56CDAF" />
+          <stop offset="1" stopColor="#A372CD" />
+        </linearGradient>
+      </defs>
+      {/* 큰 별 */}
+      <path
+        d="M11.0194 2.81639C11.0622 2.587 11.184 2.37981 11.3635 2.23071C11.543 2.08162 11.769 2 12.0024 2C12.2358 2 12.4618 2.08162 12.6413 2.23071C12.8208 2.37981 12.9425 2.587 12.9854 2.81639L14.0364 8.37439C14.111 8.76954 14.3031 9.13301 14.5874 9.41737C14.8718 9.70172 15.2352 9.89375 15.6304 9.96839L21.1884 11.0194C21.4178 11.0622 21.625 11.184 21.7741 11.3635C21.9232 11.543 22.0048 11.769 22.0048 12.0024C22.0048 12.2358 21.9232 12.4618 21.7741 12.6413C21.625 12.8208 21.4178 12.9425 21.1884 12.9854L15.6304 14.0364C15.2352 14.111 14.8718 14.3031 14.5874 14.5874C14.3031 14.8718 14.111 15.2352 14.0364 15.6304L12.9854 21.1884C12.9425 21.4178 12.8208 21.625 12.6413 21.7741C12.4618 21.9232 12.2358 22.0048 12.0024 22.0048C11.769 22.0048 11.543 21.9232 11.3635 21.7741C11.184 21.625 11.0622 21.4178 11.0194 21.1884L9.96839 15.6304C9.89375 15.2352 9.70172 14.8718 9.41737 14.5874C9.13301 14.3031 8.76954 14.111 8.37439 14.0364L2.81639 12.9854C2.587 12.9425 2.37981 12.8208 2.23071 12.6413C2.08162 12.4618 2 12.2358 2 12.0024C2 11.769 2.08162 11.543 2.23071 11.3635C2.37981 11.184 2.587 11.0622 2.81639 11.0194L8.37439 9.96839C8.76954 9.89375 9.13301 9.70172 9.41737 9.41737C9.70172 9.13301 9.89375 8.76954 9.96839 8.37439L11.0194 2.81639Z"
+        stroke={`url(#${gradientId})`}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* 우상단 세로 선 */}
+      <path
+        d="M21 2V6"
+        stroke={`url(#${gradientId})`}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* 우상단 가로 선 */}
+      <path
+        d="M23 4H19"
+        stroke={`url(#${gradientId})`}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* 좌하단 작은 원 */}
+      <path
+        d="M4 20C5.10457 20 6 19.1046 6 18C6 16.8954 5.10457 16 4 16C2.89543 16 2 16.8954 2 18C2 19.1046 2.89543 20 4 20Z"
+        stroke={`url(#${gradientId})`}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

src/features/retrospectives/components/AiLoadingOverlay.tsx

@@ -0,0 +1,36 @@
+import { createPortal } from 'react-dom'
+
+import { Button } from '@/shared/ui'
+
+import AiGradientIcon from './AiGradientIcon'
+
+type AiLoadingOverlayProps = {
+  isOpen: boolean
+  message?: string
+  onCancel?: () => void
+}
+
+export default function AiLoadingOverlay({
+  isOpen,
+  message = 'AI가 사전 의견을 요약 중이에요',
+  onCancel,
+}: AiLoadingOverlayProps) {
+  if (!isOpen) return null
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
+      <div className="flex w-lg flex-col items-center justify-center gap-small rounded-small bg-grey-100 p-medium shadow-drop">
+        <div className="flex animate-pulse flex-col items-center justify-center gap-tiny">
+          <AiGradientIcon />
+          <p className="text-blue-200 typo-subtitle2">{message}</p>
+        </div>
+        {onCancel && (
+          <Button variant="secondary" outline size="small" onClick={onCancel}>
+            취소
+          </Button>
+        )}
+      </div>
+    </div>,
+    document.body
+  )
+}

src/features/retrospectives/components/AiSummaryToast.tsx

@@ -0,0 +1,67 @@
+import { Check } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+type AiSummaryToastProps = {
+  isVisible: boolean
+  message?: string
+  onDismiss: () => void
+  duration?: number
+}
+
+export default function AiSummaryToast({
+  isVisible,
+  message = '독서 모임 내용 요약이 완료됐어요',
+  onDismiss,
+  duration = 3000,
+}: AiSummaryToastProps) {
+  const [opacity, setOpacity] = useState(false)
+  const onDismissRef = useRef(onDismiss)
+  const fadeOutTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss
+  })
+
+  useEffect(() => {
+    if (!isVisible) return
+
+    const fadeInTimer = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setOpacity(true)
+      })
+    })
+
+    const dismissTimer = setTimeout(() => {
+      setOpacity(false)
+      fadeOutTimerRef.current = setTimeout(() => onDismissRef.current(), 300)
+    }, duration)
+
+    return () => {
+      cancelAnimationFrame(fadeInTimer)
+      clearTimeout(dismissTimer)
+      if (fadeOutTimerRef.current) clearTimeout(fadeOutTimerRef.current)
+      setOpacity(false)
+    }
+  }, [isVisible, duration])
+
+  if (!isVisible) return null
+
+  return createPortal(
+    <div
+      className={[
+        'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
+        'transition-opacity duration-300',
+        opacity ? 'opacity-100' : 'opacity-0',
+      ].join(' ')}
+    >
+      <div className="flex w-lg flex-col items-center justify-center gap-small rounded-small bg-grey-100 p-medium shadow-drop">
+        <div className="flex flex-col items-center justify-center gap-tiny">
+          <Check className="size-6 text-primary-300" />
+          <p className="text-blue-200 typo-subtitle2">{message}</p>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

src/features/retrospectives/components/RetrospectiveCardButtons.tsx

@@ -0,0 +1,53 @@
+import { useNavigate } from 'react-router-dom'
+
+import { ROUTES } from '@/shared/constants'
+
+interface RetrospectiveCardButtonsProps {
+  gatheringId: number
+  meetingId: number
+}
+
+export default function RetrospectiveCardButtons({
+  gatheringId,
+  meetingId,
+}: RetrospectiveCardButtonsProps) {
+  const navigate = useNavigate()
+
+  return (
+    <div className="flex gap-small w-full">
+      {/* 약속 회고 카드 */}
+      <button
+        type="button"
+        className="flex flex-1 items-center gap-base rounded-base bg-white p-large shadow-drop cursor-pointer"
+        onClick={() => navigate(ROUTES.MEETING_RETROSPECTIVE(gatheringId, meetingId))}
+      >
+        {/* TODO: GraphicIc meeting review 아이콘 */}
+        <div className="flex flex-col gap-xsmall items-start">
+          <div className="flex items-center gap-xsmall">
+            <span className="text-black typo-subtitle2">약속 회고</span>
+          </div>
+          <span className="text-grey-600 typo-body4">
+            약속에서 나눈 대화를 다같이 정리해 남겨보세요
+          </span>
+        </div>
+      </button>
+
+      {/* 개인 회고 카드 */}
+      <button
+        type="button"
+        className="flex flex-1 items-center gap-base rounded-base bg-white p-large shadow-drop cursor-pointer"
+        onClick={() => {
+          /* TODO: 개인 회고 라우트 연결 */
+        }}
+      >
+        {/* TODO: GraphicIc personal review 아이콘 */}
+        <div className="flex flex-col gap-xsmall items-start">
+          <div className="flex items-center gap-xsmall">
+            <span className="text-black typo-subtitle2">개인 회고</span>
+          </div>
+          <span className="text-grey-600 typo-body4">약속 후 느낀 나만의 생각을 정리해보세요</span>
+        </div>
+      </button>
+    </div>
+  )
+}

src/features/retrospectives/components/RetrospectiveSummarySkeleton.tsx

@@ -0,0 +1,37 @@
+import { Card } from '@/shared/ui'
+
+type RetrospectiveSummarySkeletonProps = {
+  count?: number
+}
+
+export default function RetrospectiveSummarySkeleton({
+  count = 3,
+}: RetrospectiveSummarySkeletonProps) {
+  return (
+    <div className="flex flex-col gap-medium">
+      {[...Array(count).keys()].map((i) => (
+        <Card key={i} className="p-large">
+          <div className="flex flex-col gap-base">
+            {/* 토픽 헤더 */}
+            <div className="flex items-center gap-xsmall">
+              <div className="h-5 w-8 bg-grey-200 rounded animate-pulse" />
+              <div className="h-5 w-1/3 bg-grey-200 rounded animate-pulse" />
+            </div>
+            {/* 요약 텍스트 */}
+            <div className="flex flex-col gap-xsmall">
+              <div className="h-4 w-full bg-grey-200 rounded animate-pulse" />
+              <div className="h-4 w-4/5 bg-grey-200 rounded animate-pulse" />
+              <div className="h-4 w-3/5 bg-grey-200 rounded animate-pulse" />
+            </div>
+            {/* 키포인트 */}
+            <div className="flex flex-col gap-xsmall mt-xsmall">
+              <div className="h-4 w-1/4 bg-grey-200 rounded animate-pulse" />
+              <div className="h-3 w-full bg-grey-200 rounded animate-pulse" />
+              <div className="h-3 w-5/6 bg-grey-200 rounded animate-pulse" />
+            </div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}

src/features/retrospectives/components/index.ts

@@ -0,0 +1,4 @@
+export { default as AiLoadingOverlay } from './AiLoadingOverlay'
+export { default as AiSummaryToast } from './AiSummaryToast'
+export { default as RetrospectiveCardButtons } from './RetrospectiveCardButtons'
+export { default as RetrospectiveSummarySkeleton } from './RetrospectiveSummarySkeleton'

src/features/retrospectives/index.ts

@@ -0,0 +1,2 @@
+// Components
+export * from './components'

src/pages/Meetings/MeetingDetailPage.tsx

@@ -8,6 +8,7 @@ import {
   MeetingDetailInfo,
   useMeetingDetail,
 } from '@/features/meetings'
+import { RetrospectiveCardButtons } from '@/features/retrospectives'
 import type {
   GetConfirmedTopicsResponse,
   GetProposedTopicsResponse,
@@ -115,6 +116,13 @@ export default function MeetingDetailPage() {
         {/* 약속 로딩 적용 */}
 
         <div className="flex flex-col flex-1 gap-base pb-base">
+          {meeting?.progressStatus === 'POST' && (
+            <RetrospectiveCardButtons
+              gatheringId={Number(gatheringId)}
+              meetingId={Number(meetingId)}
+            />
+          )}
+
           <p className="text-black typo-heading3">주제</p>
 
           <Tabs

src/pages/Retrospectives/MeetingRetrospectiveCreatePage.tsx

@@ -0,0 +1,65 @@
+import { useNavigate, useParams } from 'react-router-dom'
+
+import SubPageHeader from '@/shared/components/SubPageHeader'
+import { ROUTES } from '@/shared/constants'
+import { Button } from '@/shared/ui'
+
+export default function MeetingRetrospectiveCreatePage() {
+  const navigate = useNavigate()
+  const { gatheringId, meetingId } = useParams<{
+    gatheringId: string
+    meetingId: string
+  }>()
+
+  if (!gatheringId || !meetingId) return null
+
+  return (
+    <>
+      <SubPageHeader label="뒤로가기" to={ROUTES.MEETING_RETROSPECTIVE(gatheringId, meetingId)} />
+
+      {/* 헤더: 타이틀 + 설명 + AI 요약 시작하기 버튼 */}
+      <div className="sticky top-[calc(var(--gnb-height)+59px)] z-30 flex items-center justify-between bg-white pb-small">
+        <div className="flex flex-col gap-xtiny">
+          <h3 className="text-black typo-heading3">약속 회고</h3>
+          <p className="text-grey-600 typo-caption1">
+            사전 의견과 녹음 파일을 분석하여 약속 회고를 자동 생성해요
+          </p>
+        </div>
+        <Button
+          variant="ai"
+          size="small"
+          onClick={() =>
+            navigate(ROUTES.MEETING_RETROSPECTIVE(gatheringId, meetingId), {
+              state: { fromAiSummary: true },
+            })
+          }
+        >
+          AI 요약 시작하기
+        </Button>
+      </div>
+
+      {/* 두 패널 영역 */}
+      <div className="flex gap-medium mt-base">
+        {/* 왼쪽: 수집된 사전 의견 */}
+        <div className="flex flex-1 flex-col gap-medium rounded-base border border-grey-300 bg-white p-large shadow-drop">
+          <div className="flex flex-col gap-xtiny">
+            <h4 className="text-black typo-heading3">수집된 사전 의견</h4>
+            <p className="text-grey-600 typo-body4">{/* TODO: 사전 의견 카운트 */}0개</p>
+          </div>
+          {/* TODO: 사전 의견 멤버 리스트 + 의견 내용 */}
+        </div>
+
+        {/* 오른쪽: 녹음 파일 업로드 */}
+        <div className="flex flex-1 flex-col gap-medium rounded-base border border-grey-300 bg-white p-large shadow-drop">
+          <div className="flex flex-col gap-xtiny">
+            <h4 className="text-black typo-heading3">녹음 파일 업로드</h4>
+            <p className="text-grey-600 typo-body4">AI가 음성을 텍스트로 변환하여 분석해요</p>
+          </div>
+          {/* TODO: 파일 업로드 드롭존 + 파일 리스트 테이블 */}
+        </div>
+      </div>
+
+      {/* TODO: AI 요약 중 모달 */}
+    </>
+  )
+}