[Dev] API 구현한 것 기반으로 페이지에 적용

src/app/class/[id]/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Lecture, LecturePayload } from "@/entities/lecture/model/lecture";
 import {
   LectureDetail,
   LectureFooter,
@@ -8,23 +9,59 @@ import {
 } from "@/entities/lecture/ui";
 import { useEffect, useState } from "react";
 
-import { Lecture } from "@/entities/lecture/model/lecture";
+import { useGeoLocation } from "@/shared/lib/useGeolocation";
 import useLectureInfo from "@/entities/lecture/api/useLectureInfo";
 import { useParams } from "next/navigation";
 
 export const runtime = "edge";
 
 const LectureInfoPage = () => {
   const [lectureInfo, setLectureInfo] = useState<Lecture>();
+  const [user, setUser] = useState<LecturePayload>();
 
   const { id } = useParams();
-  const { data, isLoading, isSuccess } = useLectureInfo(Number(id));
+
+  const getLectureInfo = useLectureInfo(Number(id));
+  const isLoading = getLectureInfo.isIdle || getLectureInfo.isPending;
+
+  const geolocation = useGeoLocation();
+
+  useEffect(() => {
+    if (user) {
+      getLectureInfo.mutate(
+        {
+          lectureId: Number(id),
+          payload: { latitude: user.latitude, longitude: user.longitude },
+        },
+        {
+          onSuccess: (data) => {
+            setLectureInfo(data.data.data);
+          },
+        },
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user, id]);
 
   useEffect(() => {
-    if (isSuccess) {
-      setLectureInfo(data);
+    if (
+      geolocation.curLocation &&
+      geolocation.curLocation.latitude &&
+      geolocation.curLocation.longitude
+    ) {
+      setUser((prev) => {
+        return {
+          ...prev,
+          latitude: geolocation.curLocation
+            ? geolocation.curLocation.latitude
+            : 0,
+          longitude: geolocation.curLocation
+            ? geolocation.curLocation.longitude
+            : 0,
+        };
+      });
     }
-  }, [data, isSuccess]);
+  }, [geolocation.curLocation]);
 
   return (
     <div className="flex flex-col w-full h-full justify-start items-start gap-[60px]">

src/app/entire/page.tsx

@@ -1,22 +1,73 @@
 "use client";
 
+import {
+  LectureInfo,
+  LecturePayload,
+  LectureSize,
+} from "@/entities/lecture/model/lecture";
 import { LectureList, SkeletonCard } from "@/entities/lecture/ui";
 import { useEffect, useState } from "react";
 
-import { Lecture } from "@/entities/lecture/model/lecture";
-import useEntireLecture from "@/entities/lecture/api/useEntireLecture";
+import { useGeoLocation } from "@/shared/lib/useGeolocation";
+import useLectureList from "@/entities/lecture/api/useLectureList";
+import useLoginedUserStore from "@/shared/store/user";
 
 const EntirePage = () => {
-  const [lectureListData, setLectureListData] = useState<Lecture[]>();
+  const [lectureListData, setLectureListData] = useState<LectureInfo[]>();
+  const [user, setUser] = useState<LecturePayload>();
+  const [lectureSize, setLectureSize] = useState<LectureSize>({
+    page: 0,
+    size: 9,
+    dist: 500,
+  });
 
-  // TODO: 전체 클래스 가져오는 API로 수정 필요
-  const { data, isLoading, isSuccess } = useEntireLecture();
+  const getLectureList = useLectureList();
+  const isLoading = getLectureList.isIdle || getLectureList.isPending;
+
+  const geolocation = useGeoLocation();
+
+  useEffect(() => {
+    if (user && user.latitude && user.longitude) {
+      getLectureList.mutate(
+        {
+          params: {
+            page: lectureSize.page,
+            size: lectureSize.size,
+            dist: lectureSize.dist,
+          },
+          payload: { latitude: user.latitude, longitude: user.longitude },
+        },
+        {
+          onSuccess: (data) => {
+            const lectureListData = data.data.data.data;
+            setLectureListData(lectureListData);
+          },
+          onError: () => {},
+        },
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lectureSize.page, lectureSize.size, user]);
 
   useEffect(() => {
-    if (isSuccess) {
-      setLectureListData(data.data.data);
+    if (
+      geolocation.curLocation &&
+      geolocation.curLocation.latitude &&
+      geolocation.curLocation.longitude
+    ) {
+      setUser((prev) => {
+        return {
+          ...prev,
+          latitude: geolocation.curLocation
+            ? geolocation.curLocation.latitude
+            : 0,
+          longitude: geolocation.curLocation
+            ? geolocation.curLocation.longitude
+            : 0,
+        };
+      });
     }
-  }, [data, isSuccess]);
+  }, [geolocation.curLocation]);
 
   const renderEntireCardContent = () => {
     if (isLoading) {
@@ -36,6 +87,8 @@ const EntirePage = () => {
     return <div>클래스가 존재하지 않습니다</div>;
   };
 
+  // TODO: 무한 스크롤
+
   return (
     <div className="flex flex-col w-full h-screen justify-start items-center p-4 min-h-[336px] pt-20 bg-custom-entireLikeBackground">
       <div className="flex flex-row w-full h-12 items-start justify-center">

src/app/like/page.tsx

@@ -3,16 +3,28 @@
 import { LectureList, SkeletonCard } from "@/entities/lecture/ui";
 import { useEffect, useState } from "react";
 
-import { Lecture } from "@/entities/lecture/model/lecture";
+import { HeartsLectureListResDataInfo } from "@/features/like/model/like";
+import { LectureSize } from "@/entities/lecture/model/lecture";
 import useLikeLectureList from "@/features/like/api/useLikeLectureList";
 
 const LikePage = () => {
-  const [lectureListData, setLectureListData] = useState<Lecture[]>();
-  const { data, isLoading, isSuccess } = useLikeLectureList();
+  const [lectureListData, setLectureListData] =
+    useState<HeartsLectureListResDataInfo[]>();
+  const [lectureSize, setLectureSize] = useState<LectureSize>({
+    page: 1,
+    size: 2,
+    dist: 500,
+  });
+
+  const { data, isLoading, isSuccess } = useLikeLectureList({
+    page: lectureSize.page,
+    size: lectureSize.size,
+    dist: lectureSize.dist,
+  });
 
   useEffect(() => {
     if (isSuccess) {
-      setLectureListData(data);
+      setLectureListData(data.data.data);
     }
   }, [data, isSuccess]);