fix : suspense 오류 해결 및 video check page video 응답 연동

Author: yyj0917

src/app/(pages)/(main)/mypage/(mypage)/info/page.tsx

@@ -1,22 +1,14 @@
 import { Suspense } from 'react';
 import { InfoContents } from '../../_components/info/info-contents';
 import { LoadingSpinner } from '@/components/loading-spinner';
-import { getStoreByUserClient } from '@/lib/api/store/store';
 import { getStoreByUserServer } from '@/lib/api/store/store-server';
-import { QueryClient } from '@tanstack/react-query';
 
 export default async function MyPageInfoPage() {
-  const queryClient = new QueryClient();
-
-  await queryClient.prefetchQuery({
-    queryKey: ['store-user'],
-    queryFn: () => getStoreByUserServer(),
-    staleTime: Infinity,
-  });
+  const storeData = await getStoreByUserServer();
 
   return (
     <Suspense fallback={<LoadingSpinner />}>
-      <InfoContents />
+      <InfoContents initialStoreData={storeData} />
     </Suspense>
   );
 }

src/app/(pages)/(main)/mypage/(mypage)/manage-video/[video_id]/page.tsx

@@ -1,18 +1,15 @@
 import { getVideo } from '@/lib/api/video/video';
 import { VideoPlayer } from '../../../_components/manage-video/video-player';
 
-export default async function VideoDetailPage({
-  params,
-}: {
-  params: Promise<{ video_id: string }>;
-}) {
-  const videoId = (await params).video_id;
-  console.log(videoId);
-  // const videoInfo = await getVideo(videoId);
-
+export default async function VideoDetailPage() {
+  const videoId = localStorage.getItem('generatedVideoId');
+  const videoInfo = await getVideo(videoId ?? '');
   return (
     <section className='py-6 w-full h-[calc(100vh-220px)] min-h-0'>
-      <VideoPlayer />
+      <VideoPlayer
+        videoUrl={videoInfo.videoUrl ?? ''}
+        videoId={videoId ?? ''}
+      />
     </section>
   );
 }

src/app/(pages)/(main)/mypage/(mypage)/manage-video/[video_id]/video-check/page.tsx

@@ -1,6 +1,7 @@
 import { VideoCheckDescription } from '../../../../_components/manage-video/video-check-description';
 import { cn } from '@/lib/utils/cn';
 import { VideoCheckButton } from '../../../../_components/manage-video/video-check-button';
+import { getVideo } from '@/lib/api/video/video';
 
 const VIDEO_URL =
   'https://f002.backblazeb2.com/file/creatomate-c8xg3hsxdu/6683c14f-7d35-45ea-9402-d87fd498f5a7.mp4';
@@ -12,25 +13,25 @@ export default async function VideoCheckPage({
   params: Promise<{ video_id: string }>;
 }) {
   const videoId = (await params).video_id;
-  console.log(videoId);
+  const response = await getVideo(videoId);
 
   return (
     <div className='pt-6 w-full h-full flex flex-col gap-6 min-h-0 overflow-y-auto custom-scrollbar'>
       <div className='w-full h-auto flex items-start gap-4'>
         <video
-          src={VIDEO_URL}
+          src={response.videoUrl}
           controls
           className='w-1/2 h-auto aspect-[160/284] rounded-[8px]'
         />
         <div className='flex-1 w-full h-auto flex flex-col gap-2 '>
-          <h4 className='text-headlineMedium text-gray500'>파일명</h4>
+          <h4 className='text-headlineMedium text-gray500'>가게명</h4>
           <p className={cn('text-bodySmall text-gray600 !font-normal ')}>
-            {VIDEO_FILE_NAME}
+            {response.storeName}
           </p>
         </div>
       </div>
-      <VideoCheckDescription />
-      <VideoCheckButton videoUrl={VIDEO_URL} />
+      <VideoCheckDescription video={response} />
+      <VideoCheckButton videoUrl={response.videoUrl ?? ''} />
     </div>
   );
 }

src/app/(pages)/(main)/mypage/_components/info/info-contents.tsx

@@ -10,11 +10,13 @@ import { InfoOwner } from './info-owner';
 import { type StoreResponse } from '@/types/api';
 import { LoadingSpinnerBasic } from '@/components/loading-spinner';
 
-export function InfoContents() {
+export function InfoContents({
+  initialStoreData,
+}: {
+  initialStoreData: StoreResponse[];
+}) {
   const { tabLabel, storeAdd } = useStoreQuery();
-  const { data: storeData, isLoading } = useStoreByUser();
-
-  if (isLoading) return <LoadingSpinnerBasic />;
+  const { data: storeData } = useStoreByUser(initialStoreData);
 
   if (!storeData?.[0]) {
     return (

src/app/(pages)/(main)/mypage/_components/manage-video/video-check-description.tsx

@@ -1,29 +1,28 @@
 import { FieldContainer } from '@/components/store-info';
+import { VideoResponse } from '@/types/api';
 
-const VideoDescription = [
-  {
-    label: '제목',
-    value: '추천 멘트',
-  },
-  {
-    label: '상세 설명',
-    value:
-      '📍 신촌에서 찾은 숨은 맛집, 가문의 우동!매일 직접 뽑는 쫄깃한 면발과 깊은 국물 맛이 일품이에요.\n따뜻한 우동 한 그릇으로 오늘 하루를 마무리해보세요🍲\n✅ 위치: 서울 서대문구 ○○로 ○○\n✅ 영업시간: 매일 11:00 ~ 21:00 (브레이크타임 15:00~17:00)\n✅ 전화: 02-000-0000\n#신촌맛집 #가문의우동 #우동맛집 #신촌데이트코스 #신촌점심추천 #신촌저녁추천 #신촌핫플 #서울맛집',
-  },
-  {
-    label: '메뉴',
-    value: '아메리카노\n라떼\n티\n커피라떼',
-  },
-];
-
-export function VideoCheckDescription() {
+export function VideoCheckDescription({ video }: { video: VideoResponse }) {
+  const VideoDescription = [
+    {
+      label: '주소',
+      value: video.address,
+    },
+    {
+      label: '상호명',
+      value: video.storeName,
+    },
+    {
+      label: '비디오 생성시간',
+      value: video.createdAt,
+    },
+  ];
   return (
     <div className='flex flex-col items-start gap-8'>
       {VideoDescription.map(item => (
         <FieldContainer
           key={item.label}
           label={item.label}
-          value={item.value}
+          value={item.value ?? ''}
         />
       ))}
     </div>

src/app/(pages)/(main)/mypage/_components/manage-video/video-player.tsx

@@ -3,12 +3,15 @@
 import { useState } from 'react';
 import { LoadingSpinner } from '@/components/loading-spinner';
 import { useRouter } from 'next/navigation';
-import type { VideoResponse } from '@/types/api';
 
-export function VideoPlayer() {
+export function VideoPlayer({
+  videoUrl,
+  videoId,
+}: {
+  videoUrl: string;
+  videoId: string;
+}) {
   const router = useRouter();
-  const videoUrl =
-    'https://f002.backblazeb2.com/file/creatomate-c8xg3hsxdu/6683c14f-7d35-45ea-9402-d87fd498f5a7.mp4';
 
   return (
     <>
@@ -40,7 +43,9 @@ export function VideoPlayer() {
             다시 만들기
           </button>
           <button
-            onClick={() => router.push(`/mypage/manage-video/1/video-check`)}
+            onClick={() =>
+              router.push(`/mypage/manage-video/${videoId}/video-check`)
+            }
             className='flex-1 w-full h-10 min-mobile:h-14 text-bodySmall rounded-[8px] bg-orange400 text-white000 cursor-pointer'
           >
             다음

src/app/(pages)/(main)/mypage/_components/manage-video/video-progress-header.tsx

@@ -10,8 +10,9 @@ export function VideoProgressHeader({
 }: {
   generationId: string;
 }) {
-  const { status, progress, generatedVideoUrl, generatedVideoId } =
+  const { status, progress, generatedVideoId } =
     useVideoGeneration(generationId);
+  console.log(generatedVideoId);
 
   return (
     <header className='mt-8 p-6 w-full h-auto flex flex-col items-start gap-1 bg-white000 border border-gray100 rounded-[15px] shadow-[0_4px_10px_0_rgba(154,159,160,0.15)]'>

src/hooks/use-video-generation.ts

@@ -5,7 +5,7 @@
 import { useState, useEffect } from 'react';
 import { getVideoGenerationStatus } from '@/lib/api/video/video';
 
-export function useVideoGeneration(initialGenerationId: string) {
+export function useVideoGeneration(initialGenerationId?: string) {
   const [generationId, setGenerationId] = useState<string | null>(null);
   const [generatedVideoUrl, setGeneratedVideoUrl] = useState<string | null>(
     null,
@@ -35,10 +35,11 @@ export function useVideoGeneration(initialGenerationId: string) {
     const poll = async () => {
       try {
         const result = await getVideoGenerationStatus(generationId);
-        console.log('result:', result);
+        console.log(result);
         setStatus(result.status ?? 'IDLE');
         setGeneratedVideoUrl(result.generatedVideoUrl ?? null);
-        setGeneratedVideoId(result.videoGenerationId ?? null);
+        setGeneratedVideoId(result.video?.id ?? null);
+        localStorage.setItem('generatedVideoId', result.video?.id ?? '');
 
         // 상태별 프로그레스
         const progressMap = {

src/types/api/videoGenerationStatusResponse.ts

@@ -6,6 +6,7 @@
  * OpenAPI spec version: 1.0
  */
 import type { VideoGenerationStatusResponseStatus } from './videoGenerationStatusResponseStatus';
+import { VideoResponse } from './videoResponse';
 
 /**
  * 영상 생성 상태 응답
@@ -21,4 +22,12 @@ export interface VideoGenerationStatusResponse {
   generatedVideoUrl?: string;
   /** 오류 메시지 */
   errorMessage?: string;
+  video?: {
+    id: string;
+    videoUrl: string;
+    address: string;
+    storeName: string;
+    views: number;
+    createdAt: string;
+  };
 }