FE: [feat] 홈 페이지 API 연결 #148

CSID-DGU · Dec 7, 2024 · 4589088 · 4589088
1 parent a035fb7
commit 4589088
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 19 deletions.
diff --git a/src/frontend/src/apis/crew.ts b/src/frontend/src/apis/crew.ts
@@ -61,7 +61,7 @@ export const CreateCrew = async ({
 };
 
 // 다른 크루 조회 api
-export const getCrew = async (): Promise<CrewResponse> => {
+export const getCrew = async (): Promise<CrewResponse[]> => {
   const response = await api.get(`/crew`);
   return response.data;
 };

diff --git a/src/frontend/src/components/home/DistanceRanking.tsx b/src/frontend/src/components/home/DistanceRanking.tsx
@@ -4,15 +4,20 @@ import { ReactComponent as RightArrowIcon } from "@/assets/icons/RightArrowIcon.
 import { useEffect, useState } from "react";
 import { dummyDistanceCrew } from "@/constants/dummy";
 import { homeRankingResponse } from "@/types/home";
+import { useUserInfoPost } from "@/hooks/useMypage";
 
 const DistanceRanking = () => {
   const navigate = useNavigate();
   const [distanceData, setDistanceData] =
     useState<homeRankingResponse[]>(dummyDistanceCrew);
 
+  const { data } = useUserInfoPost();
+
   useEffect(() => {
-    // TODO: DistanceCrew API
-    setDistanceData(dummyDistanceCrew);
+    if (data) {
+      // TODO: 실제 데이터로 변경
+      setDistanceData(dummyDistanceCrew);
+    }
   }, []);
 
   return (

diff --git a/src/frontend/src/components/home/FaceRanking.tsx b/src/frontend/src/components/home/FaceRanking.tsx
@@ -4,15 +4,20 @@ import { ReactComponent as RightArrowIcon } from "@/assets/icons/RightArrowIcon.
 import { homeFaceRankingResponse } from "@/types/home";
 import { dummyFaceCrew } from "@/constants/dummy";
 import { useEffect, useState } from "react";
+import { useUserInfoPost } from "@/hooks/useMypage";
 
 const FaceRanking = () => {
   const navigate = useNavigate();
   const [faceData, setFaceData] =
     useState<homeFaceRankingResponse[]>(dummyFaceCrew);
 
+  const { data } = useUserInfoPost();
+
   useEffect(() => {
-    // TODO: DistanceCrew API
-    setFaceData(dummyFaceCrew);
+    if (data) {
+      // TODO: 실제 데이터로 변경
+      setFaceData(dummyFaceCrew);
+    }
   }, []);
 
   return (

diff --git a/src/frontend/src/components/home/HomeRecord.tsx b/src/frontend/src/components/home/HomeRecord.tsx
@@ -1,6 +1,9 @@
 import { ReactComponent as HomeBgImg } from "@/assets/images/HomeBgImg.svg";
+import { useUserInfoPost } from "@/hooks/useMypage";
 
 const HomeRecord = () => {
+  const { data } = useUserInfoPost();
+
   return (
     <div className="py-5 flex flex-col justify-center items-center relative border-b-4 border-[#F3F3F3]">
       <HomeBgImg className="absolute top-0 left-0" />

diff --git a/src/frontend/src/components/otherCrew/OtherCrewCard.tsx b/src/frontend/src/components/otherCrew/OtherCrewCard.tsx
@@ -1,22 +1,27 @@
 import { ReactComponent as CTOIcon } from "@/assets/icons/CTOIcon.svg";
 import { ReactComponent as CrewPeopleIcon } from "@/assets/icons/CrewPeopleIcon.svg";
+import { CrewResponse } from "@/types/crew";
 
-const OtherCrewCard = () => {
+type OtherCrewCardPrps = {
+  crew: CrewResponse;
+};
+const OtherCrewCard = ({ crew }: OtherCrewCardPrps) => {
   return (
     <div className="flex justify-between items-center px-8 py-6">
       <div className="flex gap-2">
         <div className="w-[60px] h-[60px] rounded-full overflow-hidden">
           <img
             className="w-full h-full object-cover"
-            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTr2fqdlFDppEAoCuV34aZIe61WnpTwVygxuNMM3szqDMMZRF-dL7jxDKQFBRrXIppNoZ0&usqp=CAU"
-            alt=""
+            src={crew.profileImageUrl}
+            // src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTr2fqdlFDppEAoCuV34aZIe61WnpTwVygxuNMM3szqDMMZRF-dL7jxDKQFBRrXIppNoZ0&usqp=CAU"
+            alt="프로필"
           />
         </div>
         <div className="flex flex-col justify-center gap-1">
-          <div className="text-[18px]">크루명</div>
+          <div className="text-[18px]">{crew.title}</div>
           <div className="text-[12px] flex items-center gap-1.5">
             <CrewPeopleIcon />
-            가입인원
+            가입인원 {crew.memberCount}
           </div>
         </div>
       </div>

diff --git a/src/frontend/src/hooks/useCrew.ts b/src/frontend/src/hooks/useCrew.ts
@@ -1,5 +1,6 @@
 import {
   CreateCrew,
+  getCrew,
   getCrewGallery,
   getCrewGalleryDetail,
   getCrewGalleryDetailComments,
@@ -92,7 +93,7 @@ export const useCreateCrew = ({
 export const useCrewGet = () => {
   return useQuery({
     queryKey: ["crew"],
-    queryFn: () => getCrewNotice,
+    queryFn: () => getCrew(),
   });
 };
 

diff --git a/src/frontend/src/pages/OtherCrew/OtherCrewPage.tsx b/src/frontend/src/pages/OtherCrew/OtherCrewPage.tsx
@@ -1,22 +1,25 @@
 import OtherCrewCard from "@/components/otherCrew/OtherCrewCard";
 import { ReactComponent as BackIcon } from "@/assets/icons/BackIcon.svg";
 import { useNavigate } from "react-router-dom";
+import { useCrewGet } from "@/hooks/useCrew";
 
 const OtherCrewPage = () => {
   const navigate = useNavigate();
+  const { data, isLoading, error } = useCrewGet();
+
+  // 데이터가 없거나 로딩 중일 때의 처리
+  if (isLoading) return <div>로딩 중</div>;
+  if (error) return <div>에러 발생</div>;
 
   return (
     <div>
       <div className="shadow-sm w-full flex justify-start p-4">
-        <BackIcon onClick={() => navigate(-1)} />
+        <BackIcon onClick={() => navigate(-1)} className="cursor-pointer" />
       </div>
-      <OtherCrewCard />
-      <OtherCrewCard />
-      <OtherCrewCard />
-      <OtherCrewCard />
-      <OtherCrewCard />
-      <OtherCrewCard />
-      <OtherCrewCard />
+
+      {data &&
+        data.length > 0 &&
+        data.map((crew) => <OtherCrewCard key={crew.crewId} crew={crew} />)}
     </div>
   );
 };