From b9e440232c9030c225cdb5fa48a310c593dac8d9 Mon Sep 17 00:00:00 2001 From: ramong26 Date: Tue, 1 Jul 2025 15:19:21 +0900 Subject: [PATCH 01/16] feat/interview and chart component --- src/app/charts/page.tsx | 13 ++- src/app/homepage/page.tsx | 6 +- .../chart/components/ChartComponent.tsx | 47 ++++++++++- src/features/chart/components/ChartTop.tsx | 36 +++++--- .../homepage/components/InterviewList.tsx | 20 +++-- .../tracks/hooks/getTrackIdInterview.ts | 34 ++++---- src/features/tracks/hooks/getYoutube.ts | 82 ++++++++++--------- src/shared/hooks/useTrackList.ts | 8 +- 8 files changed, 163 insertions(+), 83 deletions(-) diff --git a/src/app/charts/page.tsx b/src/app/charts/page.tsx index e03c541..a3ec997 100644 --- a/src/app/charts/page.tsx +++ b/src/app/charts/page.tsx @@ -8,15 +8,22 @@ export default async function Charts() { // const playlistId = "2fmFoUa7WNxIfvUg2jghxD"; const tracksList = await useTrackList(); + const koraTracksList = await useTrackList({ + playlistId: "1Gg5BI7b5xljyHnGXXrX0E", + }); + const usaTracksList = await useTrackList({ + playlistId: "0TyhU3nPbWY8BNObcPXt4u", + }); + console.log("koraTracksList", koraTracksList); return (
-
- - +
+ +
diff --git a/src/app/homepage/page.tsx b/src/app/homepage/page.tsx index 1be9518..d23419a 100644 --- a/src/app/homepage/page.tsx +++ b/src/app/homepage/page.tsx @@ -15,7 +15,7 @@ export default async function HomePage() {
-
+
- +
-
+
diff --git a/src/features/chart/components/ChartComponent.tsx b/src/features/chart/components/ChartComponent.tsx index 0f199e5..c8cb35f 100644 --- a/src/features/chart/components/ChartComponent.tsx +++ b/src/features/chart/components/ChartComponent.tsx @@ -1,7 +1,48 @@ -export default function ChartComponent(tracksList: any) { +import Image from "next/image"; +import { TrackItem } from "@/shared/types/SpotifyTrack"; + +interface ChartComponentProps { + tracksList: TrackItem[]; + title: string; + className?: string; +} + +export default function ChartComponent({ + tracksList, + title, + className = "", +}: ChartComponentProps) { return ( -
-
차트 컴포넌트
+
+
+ {title} +
+ {tracksList.map((item, index) => ( +
+
+
{index + 1}
+ {item.track.name} +
+
+
+ {item.track.name} +
+
+ {item.track.artists.map((artist) => artist.name).join(", ")} +
+
+
+ ))}
); } diff --git a/src/features/chart/components/ChartTop.tsx b/src/features/chart/components/ChartTop.tsx index 3c2236d..21460ef 100644 --- a/src/features/chart/components/ChartTop.tsx +++ b/src/features/chart/components/ChartTop.tsx @@ -1,6 +1,8 @@ import Image from "next/image"; import Miniplayer from "@/features/chart/components/Miniplayer"; +import InterviewList from "@/features/homepage/components/InterviewList"; + import { getYoutubeTrackIdVideo } from "@/features/tracks/hooks/getYoutube"; import { TrackItem } from "@/shared/types/SpotifyTrack"; @@ -20,22 +22,26 @@ export default async function ChartTop({ return
트랙이 없습니다.
; } return ( -
+
- Top 1 + Global Top 1
-