From 45890889fa7419567bb091faa484b37afdeb6d87 Mon Sep 17 00:00:00 2001
From: Hyeona01 <sha0209@dgu.ac.kr>
Date: Sat, 7 Dec 2024 10:29:53 +0900
Subject: [PATCH] =?UTF-8?q?FE:=20[feat]=20=ED=99=88=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20API=20=EC=97=B0=EA=B2=B0=20#148?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/apis/crew.ts                 |  2 +-
 .../src/components/home/DistanceRanking.tsx   |  9 +++++++--
 .../src/components/home/FaceRanking.tsx       |  9 +++++++--
 .../src/components/home/HomeRecord.tsx        |  3 +++
 .../components/otherCrew/OtherCrewCard.tsx    | 15 ++++++++++-----
 src/frontend/src/hooks/useCrew.ts             |  3 ++-
 .../src/pages/OtherCrew/OtherCrewPage.tsx     | 19 +++++++++++--------
 7 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/apis/crew.ts b/src/frontend/src/apis/crew.ts
index c8431e49..1c106f21 100644
--- 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
index 759f3a56..fc9dc920 100644
--- 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
index a5e5a870..18bb7115 100644
--- 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
index 6a2aef23..206758bf 100644
--- 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
index 75d2e5f4..13ca0d86 100644
--- 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
index a250453d..05b57c69 100644
--- 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
index b9b81cfc..423ba52a 100644
--- 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>
   );
 };