diff --git a/__tests__/services/__snapshots__/get-isa-portfolio.test.ts.snap b/__tests__/services/__snapshots__/get-isa-portfolio.test.ts.snap deleted file mode 100644 index 8d294a2..0000000 --- a/__tests__/services/__snapshots__/get-isa-portfolio.test.ts.snap +++ /dev/null @@ -1,36 +0,0 @@ -// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing - -exports[`getISAPortfolio matches snapshot for consistent portfolio structure 1`] = ` -[ - { - "category": "채권", - "percentage": 4.8, - "value": 1000000, - }, - { - "category": "펀드", - "percentage": 9.5, - "value": 2000000, - }, - { - "category": "ELS", - "percentage": 14.3, - "value": 3000000, - }, - { - "category": "국내 ETF", - "percentage": 19, - "value": 4000000, - }, - { - "category": "해외 ETF", - "percentage": 23.8, - "value": 5000000, - }, - { - "category": "국내&해외 ETF", - "percentage": 28.6, - "value": 6000000, - }, -] -`; diff --git a/app/(routes)/guide/_components/slider-wrapper.tsx b/app/(routes)/guide/_components/slider-wrapper.tsx index 1d808da..2d4a360 100644 --- a/app/(routes)/guide/_components/slider-wrapper.tsx +++ b/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) => ( { videoUrl={video.videoUrl} category={video.category} investType={investType} + idx={idx} /> ))} diff --git a/app/(routes)/guide/shorts-viewer/[category]/[id]/page.tsx b/app/(routes)/guide/shorts-viewer/[category]/[id]/page.tsx index a755949..34ef264 100644 --- a/app/(routes)/guide/shorts-viewer/[category]/[id]/page.tsx +++ b/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 ( - - ); +export default function Page() { + return ; } diff --git a/app/(routes)/guide/shorts-viewer/[category]/_components/shorts-scroll-viewer.tsx b/app/(routes)/guide/shorts-viewer/[category]/_components/shorts-scroll-viewer.tsx index 56a8ba5..1930fa3 100644 --- a/app/(routes)/guide/shorts-viewer/[category]/_components/shorts-scroll-viewer.tsx +++ b/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 = ({ - session, - initialIndex = 0, -}) => { +const ShortsScrollViewer = () => { const { setHeader } = useHeader(); const [filteredVideo, setFilteredVideo] = useState([]); - const [pageTitle, setPageTitle] = useState(''); 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(null); @@ -53,14 +43,6 @@ const ShortsScrollViewer: React.FC = ({ } 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 = ({ ); } }); - return () => observer.disconnect(); }, [filteredVideo]); diff --git a/app/(routes)/guide/shorts-viewer/[category]/_components/shorts-viewer-container.tsx b/app/(routes)/guide/shorts-viewer/[category]/_components/shorts-viewer-container.tsx index 68e699a..5eee196 100644 --- a/app/(routes)/guide/shorts-viewer/[category]/_components/shorts-viewer-container.tsx +++ b/app/(routes)/guide/shorts-viewer/[category]/_components/shorts-viewer-container.tsx @@ -61,14 +61,12 @@ export const ShortsViewerContainer = ({ session }: Props) => { } }, [category, investType]); - useEffect(() => {}, []); - return (

{pageTitle}

{filteredVideo.map( - ({ id, title, duration, views, videoUrl, category }) => ( + ({ id, title, duration, views, videoUrl, category }, idx) => ( { videoUrl={videoUrl} category={category} investType={investType} + idx={idx} /> ) )} diff --git a/components/guide/video-preview.tsx b/components/guide/video-preview.tsx index c424ae9..d05c2f1 100644 --- a/components/guide/video-preview.tsx +++ b/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}`); } };