[feat] 약속회고 생성 전 플로우 UI 및 기능 개발

package.json

@@ -39,6 +39,7 @@
     "vite": "^7.2.4"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",

src/features/meetings/hooks/useMeetingDetail.ts

@@ -23,20 +23,11 @@ import { meetingQueryKeys } from './meetingQueryKeys'
  *
  */
 export const useMeetingDetail = (meetingId: number) => {
-  const isValidMeetingId = !Number.isNaN(meetingId) && meetingId > 0
-
-  // 유효하지 않은 meetingId는 detail 키 대신 details 키 사용
-  // NaN이 null로 직렬화되어 캐시 충돌하는 것을 방지
-  const queryKey = isValidMeetingId
-    ? meetingQueryKeys.detail(meetingId)
-    : meetingQueryKeys.details()
-
   return useQuery<GetMeetingDetailResponse, ApiError>({
-    // eslint-disable-next-line @tanstack/query/exhaustive-deps
-    queryKey,
+    queryKey: meetingQueryKeys.detail(meetingId),
     queryFn: () => getMeetingDetail(meetingId),
     // meetingId가 유효할 때만 쿼리 실행
-    enabled: isValidMeetingId,
+    enabled: meetingId > 0,
     // 캐시 데이터 10분간 유지 (전역 설정 staleTime: 5분 사용)
     gcTime: 10 * 60 * 1000,
   })

src/features/meetings/index.ts

@@ -30,6 +30,7 @@ export type {
   MyMeetingRole,
   MyMeetingTabCountsResponse,
   RejectMeetingResponse,
+  RetrospectiveStatus,
   UpdateMeetingRequest,
   UpdateMeetingResponse,
 } from './meetings.types'

src/features/meetings/meetings.mock.ts

@@ -210,6 +210,10 @@ const mockMeetingDetails: Record<number, GetMeetingDetailResponse> = {
     meetingName: '1차 독서모임',
     meetingStatus: 'PENDING',
     progressStatus: 'POST',
+    confirmedTopic: true,
+    confirmedTopicDate: '2026-01-20T14:00:00',
+    retrospectiveStatus: 'AI_SUMMARY_COMPLETED',
+    personalRetrospectiveWritten: false,
     gathering: {
       gatheringId: 101,
       gatheringName: '클린 코드 스터디',
@@ -261,16 +265,16 @@ const mockMeetingDetails: Record<number, GetMeetingDetailResponse> = {
       buttonLabel: '약속이 끝났어요',
       enabled: false,
     },
-    confirmedTopic: true,
-    confirmedTopicDate: '2026-01-20T14:00:00',
   },
   11: {
     meetingId: 11,
-    progressStatus: 'PRE',
     meetingName: '킥오프 모임',
     meetingStatus: 'CONFIRMED',
+    progressStatus: 'PRE',
     confirmedTopic: false,
     confirmedTopicDate: null,
+    retrospectiveStatus: 'NOT_CREATED',
+    personalRetrospectiveWritten: false,
     gathering: {
       gatheringId: 102,
       gatheringName: '실용주의 프로그래머 독서모임',

src/features/meetings/meetings.types.ts

@@ -202,6 +202,12 @@ export type MeetingDetailActionStateType =
   | 'JOIN_TIME_EXPIRED'
 
 export type MeetingProgressStatus = 'PRE' | 'ONGOING' | 'POST'
+
+/**
+ * 약속 회고 작성 상태 타입
+ */
+export type RetrospectiveStatus = 'NOT_CREATED' | 'AI_SUMMARY_COMPLETED' | 'FINAL_PUBLISHED'
+
 /**
  * 약속 상세 조회 응답 타입
  */
@@ -218,6 +224,10 @@ export type GetMeetingDetailResponse = {
   confirmedTopic: boolean
   /** 주제 확정 일시 */
   confirmedTopicDate: string | null
+  /** 약속 회고 작성 상태 */
+  retrospectiveStatus: RetrospectiveStatus
+  /** 개인 회고 작성 여부 */
+  personalRetrospectiveWritten: boolean
   /** 모임 정보 */
   gathering: {
     gatheringId: number

src/features/retrospectives/components/RetrospectiveCardButtons.tsx

@@ -1,34 +1,68 @@
 import { useNavigate } from 'react-router-dom'
 
+import type { RetrospectiveStatus } from '@/features/meetings'
+import meetingRetroIcon from '@/shared/assets/icon/meeting-retro.svg'
+import personalRetroIcon from '@/shared/assets/icon/personal-retro.svg'
 import { ROUTES } from '@/shared/constants'
 
 interface RetrospectiveCardButtonsProps {
   gatheringId: number
   meetingId: number
+  retrospectiveStatus: RetrospectiveStatus
+  personalRetrospectiveWritten: boolean
 }
 
 export default function RetrospectiveCardButtons({
   gatheringId,
   meetingId,
+  retrospectiveStatus,
+  personalRetrospectiveWritten,
 }: RetrospectiveCardButtonsProps) {
   const navigate = useNavigate()
 
+  // 약속 회고 라우트 결정
+  const getMeetingRetrospectiveRoute = () => {
+    switch (retrospectiveStatus) {
+      case 'NOT_CREATED':
+        return ROUTES.MEETING_RETROSPECTIVE_CREATE(gatheringId, meetingId)
+      case 'FINAL_PUBLISHED':
+        return ROUTES.MEETING_RETROSPECTIVE_DETAIL(gatheringId, meetingId)
+      case 'AI_SUMMARY_COMPLETED':
+        return ROUTES.MEETING_RETROSPECTIVE(gatheringId, meetingId)
+      default:
+        return ROUTES.MEETING_RETROSPECTIVE_CREATE(gatheringId, meetingId)
+    }
+  }
+
+  // 개인 회고 라우트 결정 (추후 라우트 반영 예정)
+  const getPersonalRetrospectiveRoute = () => {
+    // TODO: ROUTES.PERSONAL_RETROSPECTIVE, ROUTES.PERSONAL_RETROSPECTIVE_VIEW 추가 후 활성화
+    if (personalRetrospectiveWritten) {
+      // return ROUTES.PERSONAL_RETROSPECTIVE_VIEW(gatheringId, meetingId)
+      return '#'
+    }
+    // return ROUTES.PERSONAL_RETROSPECTIVE(gatheringId, meetingId)
+    return '#'
+  }
+
   return (
-    <div className="flex gap-small w-full">
+    <div className="flex gap-small w-full pb-large">
       {/* 약속 회고 카드 */}
       <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))}
+        onClick={() => navigate(getMeetingRetrospectiveRoute())}
       >
-        {/* 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 className="flex gap-base">
+          <img src={meetingRetroIcon} alt="약속 회고" className="shrink-0" />
+          <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>
-          <span className="text-grey-600 typo-body4">
-            약속에서 나눈 대화를 다같이 정리해 남겨보세요
-          </span>
         </div>
       </button>
 
@@ -37,15 +71,23 @@ export default function RetrospectiveCardButtons({
         type="button"
         className="flex flex-1 items-center gap-base rounded-base bg-white p-large shadow-drop cursor-pointer"
         onClick={() => {
-          /* TODO: 개인 회고 라우트 연결 */
+          // TODO: ROUTES.PERSONAL_RETROSPECTIVE, ROUTES.PERSONAL_RETROSPECTIVE_VIEW 추가 후 실제 navigate 활성화
+          const route = getPersonalRetrospectiveRoute()
+          console.log('개인 회고 라우트:', route)
+          // navigate(route)
         }}
       >
-        {/* 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 className="flex gap-base">
+          <img src={personalRetroIcon} alt="개인 회고" className="shrink-0" />
+
+          <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>
-          <span className="text-grey-600 typo-body4">약속 후 느낀 나만의 생각을 정리해보세요</span>
         </div>
       </button>
     </div>

src/features/retrospectives/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './retrospectiveQueryKeys'
+export * from './useCollectedAnswers'
 export * from './useCreateSttJob'
 export * from './usePublishSummary'
 export * from './useSummary'

src/features/retrospectives/hooks/retrospectiveQueryKeys.ts

@@ -1,6 +1,24 @@
+/**
+ * @file retrospectiveQueryKeys.ts
+ * @description 회고 관련 Query Key Factory
+ */
+
+import type { GetCollectedAnswersParams } from '../retrospectives.types'
+
+/**
+ * Query Key Factory
+ *
+ * @description
+ * 회고 관련 Query Key를 일관되게 관리하기 위한 팩토리 함수
+ */
 export const retrospectiveQueryKeys = {
   all: ['retrospectives'] as const,
 
+  // 수집된 사전 의견 리스트
+  collectedAnswersList: (params: Omit<GetCollectedAnswersParams, 'cursorUserId'>) =>
+    [...retrospectiveQueryKeys.all, 'collectedAnswers', params] as const,
+
+  // 회고 요약
   summaries: () => [...retrospectiveQueryKeys.all, 'summary'] as const,
   summary: (meetingId: number) => [...retrospectiveQueryKeys.summaries(), meetingId] as const,
 }

src/features/retrospectives/hooks/useCollectedAnswers.ts

@@ -0,0 +1,61 @@
+/**
+ * @file useCollectedAnswers.ts
+ * @description 수집된 사전 의견 조회 훅 (무한 스크롤)
+ */
+
+import { type InfiniteData, useInfiniteQuery } from '@tanstack/react-query'
+
+import type { ApiError } from '@/api'
+import { PAGE_SIZES } from '@/shared/constants/pagination'
+
+import { getCollectedAnswers } from '../retrospectives.api'
+import type {
+  CollectedAnswerCursor,
+  GetCollectedAnswersParams,
+  GetCollectedAnswersResponse,
+} from '../retrospectives.types'
+import { retrospectiveQueryKeys } from './retrospectiveQueryKeys'
+
+/**
+ * 수집된 사전 의견 조회 훅 (무한 스크롤)
+ *
+ * @description
+ * TanStack Query의 useInfiniteQuery를 사용하여 약속의 수집된 사전 의견 목록을 무한 스크롤로 조회합니다.
+ * 사용자별로 각 주제에 대한 답변을 확인할 수 있습니다.
+ *
+ * @param params - 조회 파라미터
+ * @param params.meetingId - 약속 식별자
+ * @param params.pageSize - 페이지 크기 (기본값: 10)
+ *
+ * @returns TanStack Query 무한 스크롤 결과 객체
+ */
+export const useCollectedAnswers = (params: Omit<GetCollectedAnswersParams, 'cursorUserId'>) => {
+  const { meetingId, pageSize = PAGE_SIZES.COLLECTED_ANSWERS } = params
+
+  return useInfiniteQuery<
+    GetCollectedAnswersResponse,
+    ApiError,
+    InfiniteData<GetCollectedAnswersResponse>,
+    ReturnType<typeof retrospectiveQueryKeys.collectedAnswersList>,
+    CollectedAnswerCursor | null
+  >({
+    queryKey: retrospectiveQueryKeys.collectedAnswersList({ meetingId, pageSize }),
+    queryFn: ({ pageParam }: { pageParam: CollectedAnswerCursor | null }) =>
+      getCollectedAnswers({
+        meetingId,
+        pageSize,
+        // 첫 페이지: 커서 없이 요청 (pageParam = null), 다음 페이지: nextCursor 사용
+        cursorUserId: pageParam?.userId,
+      }),
+    // meetingId가 유효할 때만 쿼리 실행
+    enabled: meetingId > 0,
+    // 초기 페이지 파라미터 (첫 페이지는 커서 파라미터 없이 요청)
+    initialPageParam: null,
+    // 다음 페이지 파라미터 가져오기
+    getNextPageParam: (lastPage) => {
+      return lastPage.hasNext ? lastPage.nextCursor : null
+    },
+    // 캐시 데이터 10분간 유지
+    gcTime: 10 * 60 * 1000,
+  })
+}