♻️ Refactor: API 함수 적용 및 react-query data fetching (#2, #5, #12)

Co-authored-by: bogyeong.lee <dlqhrud303@naver.com>
Co-authored-by: 신은수 <ShinEun9@users.noreply.github.com>

src/components/detail/RelatedSection.tsx

@@ -1,19 +1,33 @@
 import React from "react";
+import { useSearchParams } from "react-router-dom";
 import RelatedCard from "./RelatedCard";
-import { ChannelData, ChannelItem } from "types/detailItem";
+import { ChannelItem } from "types/detailItem";
+import { useQuery } from "@tanstack/react-query";
+import { getChannelDataAPI } from "api/detail";
 import styles from "styles/detail/RelatedSection.module.css";
 
-interface PropsType {
-  channelData: ChannelData;
-  videoId: string;
-}
+const RelatedSection: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const videoId = searchParams.get("id")!;
+  const channelId = searchParams.get("channelId")!;
+
+  const {
+    isLoading,
+    error,
+    data: channelData,
+  } = useQuery({
+    queryKey: ["channelData"],
+    queryFn: () => getChannelDataAPI(channelId),
+  });
+
+  if (isLoading) return <div>loading...axios</div>;
+  if (error) return <>{"An error has occurred: " + error.message}</>;
 
-const RelatedSection: React.FC<PropsType> = ({ channelData, videoId }) => {
   return (
     <>
       <h2 className={styles["related-title"]}>관련된 영상</h2>
       <ul>
-        {channelData.items.map((item: ChannelItem) => {
+        {channelData!.items.map((item: ChannelItem) => {
           if (item.id.videoId === videoId) return;
           return (
             <li key={item.id.videoId}>

src/components/detail/Video.tsx

@@ -1,17 +1,27 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { useItemStore } from "stores/useItemStore";
-import styles from "styles/detail/Video.module.css";
+import { Link, useSearchParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import decodeHTMLEntities from "utils/setDecodeHTMLEntities";
+import styles from "styles/detail/Video.module.css";
+import { getVideoAPI } from "api/detail";
 
-interface VideoPropsType {
-  videoId: string;
-  channelId: string;
-}
-
-const Video: React.FC<VideoPropsType> = ({ videoId, channelId }) => {
+const Video: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const videoId = searchParams.get("id")!;
+  const channelId = searchParams.get("channelId")!;
   const [isOpen, setIsOpen] = useState(false);
-  const { itemInfo } = useItemStore();
+
+  const {
+    isLoading,
+    error,
+    data: videoData,
+  } = useQuery({
+    queryKey: ["videoData", videoId],
+    queryFn: () => getVideoAPI(videoId, channelId),
+  });
+
+  if (isLoading) return <div>loading ...</div>;
+  if (error) return <div>{error.message}</div>;
 
   return (
     <div className={styles["video-container"]}>
@@ -23,11 +33,11 @@ const Video: React.FC<VideoPropsType> = ({ videoId, channelId }) => {
         ></iframe>
       </div>
       <h3 className={styles["video-title"]}>
-        {decodeHTMLEntities(itemInfo.title)}
+        {decodeHTMLEntities(videoData.title)}
       </h3>
-      <Link to={`/channel/${channelId}`}>
+      <Link to={`/channel/${videoData.snippet.channelId}`}>
         <p className={styles["video-channel-title"]}>
-          {decodeHTMLEntities(itemInfo.channelTitle)}
+          {decodeHTMLEntities(videoData.snippet.channelTitle)}
         </p>
       </Link>
       <div
@@ -43,7 +53,7 @@ const Video: React.FC<VideoPropsType> = ({ videoId, channelId }) => {
             !isOpen && "ellipsis-multi"
           }`}
         >
-          {decodeHTMLEntities(itemInfo.description)}
+          {decodeHTMLEntities(videoData.snippet.description)}
         </p>
         <button type="button" onClick={() => setIsOpen(!isOpen)}>
           {!isOpen ? "더보기" : "간략히"}

src/components/detail/VideoSection.tsx

@@ -1,18 +1,13 @@
 import React from "react";
 import Video from "components/detail/Video";
 
-interface VideoPropsType {
-  videoId: string;
-  channelId: string;
-}
-
-const VideoSection: React.FC<VideoPropsType> = ({ videoId, channelId }) => {
+const VideoSection: React.FC = () => {
   return (
     <>
       <h2 className={"a11y-hidden"}>영상 & 댓글</h2>
       <section>
         <h3 className={"a11y-hidden"}>영상</h3>
-        <Video videoId={videoId} channelId={channelId} />
+        <Video />
       </section>
     </>
   );

src/pages/DetailPage.tsx

@@ -10,38 +10,18 @@ import DetailSkeleton from "components/detail/DetailSkeleton";
 import { ChannelData } from "types/detailItem";
 import styles from "styles/detail/DetailPage.module.css";
 
-const getChannelData = async (channelId: string) => {
-  const { data } = await axios<ChannelData>(
-    `/videos/searchByChannels/search-by-channel-id-${channelId}.json`
-  );
-  return data;
-};
-
 const DetailPage: React.FC = () => {
   const [searchParams] = useSearchParams();
   const videoId = searchParams.get("id")!;
-  const channelId = searchParams.get("channelId")!;
-
-  const {
-    isLoading,
-    error,
-    data: channelData,
-  } = useQuery({
-    queryKey: ["channelData"],
-    queryFn: () => getChannelData(channelId),
-  });
-
-  if (isLoading) return <DetailSkeleton />;
-  if (error) return <>{"An error has occurred: " + error.message}</>;
 
   return (
     <main className={styles["detail-main"]}>
       <section className={styles["left-section"]}>
-        <VideoSection videoId={videoId} channelId={channelId} />
+        <VideoSection />
         <CommentSection videoId={videoId} />
       </section>
       <section className={styles["right-section"]}>
-        <RelatedSection channelData={channelData!} videoId={videoId} />
+        <RelatedSection />
       </section>
     </main>
   );

src/pages/MainPage.tsx

@@ -1,28 +1,22 @@
 import React from "react";
-import Card from "components/main/Card";
-import styles from "styles/main/MainPage.module.css";
 import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
-import { YoutubeItem } from "types/mainItem";
+import Card from "components/main/Card";
 import MainSkeleton from "components/main/MainSkeleton";
+import { getVideoListAPI } from "api/main";
+import { YoutubeItem } from "types/mainItem";
+import styles from "styles/main/MainPage.module.css";
 
 const MainPage: React.FC = () => {
-  const getYoutubeList = async () => {
-    const { data } = await axios.get("/videos/popular.json");
-    return data;
-  };
-
   const {
     isLoading,
     error,
     data: youtubeData,
   } = useQuery({
     queryKey: ["youtubeData"],
-    queryFn: getYoutubeList,
+    queryFn: getVideoListAPI,
   });
 
   if (isLoading) return <MainSkeleton />;
-
   if (error) return <>{"An error has occurred: " + error.message}</>;
 
   return (

src/pages/SearchPage.tsx

@@ -1,20 +1,11 @@
 import React, { useEffect } from "react";
-import axios from "axios";
+import { useSearchParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import SearchCard from "components/search/SearchCard";
+import SearchSkeleton from "components/search/SearchSkeleton";
 import { YoutubeItem } from "types/mainItem";
+import { getSearchVideoListAPI } from "api/search";
 import styles from "styles/search/SearchPage.module.css";
-import { useSearchParams } from "react-router-dom";
-import SearchSkeleton from "components/search/SearchSkeleton";
-
-const getYoutubeList = async (title: string) => {
-  const { data } = await axios.get("/videos/popular.json");
-  const titleToLowerCase = title.toLowerCase();
-  const filteredItems = data.items.filter((i: YoutubeItem) =>
-    i.snippet.title.toLowerCase().includes(titleToLowerCase)
-  );
-  return filteredItems;
-};
 
 const SearchPage = () => {
   const [searchParams] = useSearchParams();
@@ -26,7 +17,7 @@ const SearchPage = () => {
     refetch,
   } = useQuery({
     queryKey: ["youtubeSearch"],
-    queryFn: () => getYoutubeList(searchParams.get("title")!),
+    queryFn: () => getSearchVideoListAPI(searchParams.get("title")!),
   });
 
   useEffect(() => {