Fix: 유튜브 숏츠 순서 적용

app/(routes)/guide/_components/slider-wrapper.tsx

@@ -27,7 +27,7 @@ export const SliderWrapper = ({ videos, investType }: SliderWrapperProps) => {
           },
         }}
       >
-        {videos.map((video: VideoPreviewProps) => (
+        {videos.map((video: VideoPreviewProps, idx: number) => (
           <SwiperSlide
             key={video.id}
             className='!w-[240px] min-w-0 shrink-0 !p-2'
@@ -41,6 +41,7 @@ export const SliderWrapper = ({ videos, investType }: SliderWrapperProps) => {
               videoUrl={video.videoUrl}
               category={video.category}
               investType={investType}
+              idx={idx}
             />
           </SwiperSlide>
         ))}

app/(routes)/guide/shorts-viewer/[category]/[id]/page.tsx

@@ -1,30 +1,5 @@
-import { notFound, useSearchParams } from 'next/navigation';
 import ShortsScrollViewer from '../_components/shorts-scroll-viewer';
-import { shortVideos } from '../../../data/video-data';
-import ShortsViewer from './_components/shorts-viewer';
 
-type Params = Promise<{ category: string; id: string | string[] }>;
-
-export default async function Page({ params }: { params: Params }) {
-  const { id: raw, category } = await params;
-  const videoId = Array.isArray(raw) ? raw[0] : raw;
-
-  const searchParams = new URLSearchParams(
-    typeof window !== 'undefined' ? window.location.search : ''
-  );
-  const investType = searchParams.get('investType') ?? undefined;
-
-  const filteredVideos = shortVideos.filter(
-    (v) =>
-      v.category === category && (!investType || v.investType === investType)
-  );
-  const initialIndex = filteredVideos.findIndex(
-    (v) => String(v.id) === videoId
-  );
-
-  if (initialIndex === -1) notFound();
-
-  return (
-    <ShortsScrollViewer videos={filteredVideos} initialIndex={initialIndex} />
-  );
+export default function Page() {
+  return <ShortsScrollViewer />;
 }

app/(routes)/guide/shorts-viewer/[category]/_components/shorts-scroll-viewer.tsx

@@ -1,32 +1,22 @@
 'use client';
 
 import React, { useEffect, useRef, useState } from 'react';
-import { Session } from 'next-auth';
 import { useParams, useSearchParams } from 'next/navigation';
 import { useHeader } from '@/context/header-context';
-import { fetchTitle } from '@/utils/guide';
 import { convertToKorLabel } from '@/utils/my-page';
 import { InvestType } from '@prisma/client';
 import { shortVideos, VideoItem } from '../../../data/video-data';
 
-interface ShortsScrollViewerProps {
-  session?: Session | null;
-  videos: VideoItem[];
-  initialIndex?: number;
-}
-const ShortsScrollViewer: React.FC<ShortsScrollViewerProps> = ({
-  session,
-  initialIndex = 0,
-}) => {
+const ShortsScrollViewer = () => {
   const { setHeader } = useHeader();
   const [filteredVideo, setFilteredVideo] = useState<VideoItem[]>([]);
-  const [pageTitle, setPageTitle] = useState<string>('');
   const params = useParams();
 
+  const searchParams = useSearchParams();
   const raw = params['category'];
   const category = Array.isArray(raw) ? (raw[0] as string) : (raw as string);
-  const searchParams = useSearchParams();
   const investType = searchParams.get('investType') ?? undefined;
+  const initialIndex = Number(searchParams.get('selectedIdx') ?? 0);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -53,14 +43,6 @@ const ShortsScrollViewer: React.FC<ShortsScrollViewerProps> = ({
     }
 
     setFilteredVideo(filtered);
-
-    if (session?.user.name != null && investType) {
-      setPageTitle(fetchTitle(session?.user.name, investType));
-    } else {
-      setPageTitle(
-        category === 'hana' ? '투자 꿀팁? 하나면 충분!' : '숏츠 가이드'
-      );
-    }
   }, [category, investType]);
 
   useEffect(() => {
@@ -165,7 +147,6 @@ const ShortsScrollViewer: React.FC<ShortsScrollViewerProps> = ({
         );
       }
     });
-
     return () => observer.disconnect();
   }, [filteredVideo]);
 

app/(routes)/guide/shorts-viewer/[category]/_components/shorts-viewer-container.tsx

@@ -61,14 +61,12 @@ export const ShortsViewerContainer = ({ session }: Props) => {
     }
   }, [category, investType]);
 
-  useEffect(() => {}, []);
-
   return (
     <div className='flex flex-col py-5 px-4 gap-5'>
       <h2 className='text-lg font-semibold'>{pageTitle}</h2>
       <div className='grid grid-cols-3 gap-4'>
         {filteredVideo.map(
-          ({ id, title, duration, views, videoUrl, category }) => (
+          ({ id, title, duration, views, videoUrl, category }, idx) => (
             <VideoPreview
               key={id}
               id={id}
@@ -78,6 +76,7 @@ export const ShortsViewerContainer = ({ session }: Props) => {
               videoUrl={videoUrl}
               category={category}
               investType={investType}
+              idx={idx}
             />
           )
         )}

components/guide/video-preview.tsx

@@ -12,6 +12,7 @@ export interface VideoPreviewProps {
   videoUrl: string;
   category: string;
   investType?: string;
+  idx?: number;
 }
 
 const getYoutubeVideoId = (url: string): string | null => {
@@ -47,6 +48,7 @@ export const VideoPreview = ({
   videoUrl,
   category,
   investType,
+  idx,
 }: VideoPreviewProps) => {
   const router = useRouter();
   const videoId = getYoutubeVideoId(videoUrl);
@@ -56,10 +58,10 @@ export const VideoPreview = ({
   const handleClick = (id: string) => {
     if (investType) {
       router.push(
-        `/guide/shorts-viewer/${category}/${id}?investType=${investType}`
+        `/guide/shorts-viewer/${category}/${id}?investType=${investType}&selectedIdx=${idx}`
       );
     } else {
-      router.push(`/guide/shorts-viewer/${category}/${id}`);
+      router.push(`/guide/shorts-viewer/${category}/${id}?selectedIdx=${idx}`);
     }
   };