FE: [feat] 크루멤버 프로필 조회 api 연결 #148

CSID-DGU · Dec 9, 2024 · a74cf40 · a74cf40
1 parent 72d5f6b
commit a74cf40
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 82 deletions.
diff --git a/src/frontend/src/apis/crew.ts b/src/frontend/src/apis/crew.ts
@@ -4,6 +4,7 @@ import {
   CrewGalleryRequest,
   CrewGalleryResponse,
   CrewJoinResponse,
+  CrewMemberDetailResponse,
   CrewMemberResponse,
   CrewNoticeDetailResponse,
   CrewNoticeRequest,
@@ -72,6 +73,19 @@ export const getCrewMember = async (
   return response.data;
 };
 
+// 크루 멤버 프로필 조회 api
+export const getCrewMemberDetail = async (
+  crewId: number,
+  memberId: number,
+  year: number,
+  month: number
+): Promise<CrewMemberDetailResponse> => {
+  const response = await api.get(
+    `/crew/${crewId}/member/${memberId}/${year}/${month}`
+  );
+  return response.data;
+};
+
 export const getCrewGallery = async (
   crewId: number
 ): Promise<CrewGalleryResponse> => {

diff --git a/src/frontend/src/assets/images/calendar.png b/src/frontend/src/assets/images/calendar.png
diff --git a/src/frontend/src/components/common/RecentRunningCard.tsx b/src/frontend/src/components/common/RecentRunningCard.tsx
diff --git a/src/frontend/src/components/community/CommunityCard.tsx b/src/frontend/src/components/community/CommunityCard.tsx
@@ -26,11 +26,13 @@ const CommunityCard = ({ board, boardName }: CommunityCardProps) => {
         <div className="text-[14px] text-[#515151]">{board.contentPreview}</div>
       </div>
       <div className="w-[70px] h-[4.375rem] overflow-hidden">
-        <img
-          className="w-full h-full object-cover"
-          src={board.postImages[0]}
-          alt="사진"
-        />
+        {board.postImages[0] && (
+          <img
+            className="w-full h-full object-cover"
+            src={board.postImages[0]}
+            alt="사진"
+          />
+        )}
       </div>
     </div>
   );

diff --git a/src/frontend/src/components/crewMemberDetail/CrewMemberDetailTitle.tsx b/src/frontend/src/components/crewMemberDetail/CrewMemberDetailTitle.tsx
@@ -1,24 +1,37 @@
-const CrewMemberDetailTitle = () => {
+import { Member } from "@/types/crew";
+
+type CrewMemberDetailTitleProps = {
+  user: Member | undefined;
+};
+
+const CrewMemberDetailTitle = ({ user }: CrewMemberDetailTitleProps) => {
   return (
-    <div className="bg-[#f3f3f3] flex items-center justify-between gap-5 px-10 py-5">
-      <div>
-        <div className="text-[12px] text-[#515151]">
-          가입기간 <span className="bg-[#DBF2FF] rounded-md px-[12px]">9m</span>
-        </div>
-        <div className="flex flex-col justify-center">
-          <div className="text-[26px] text-[#444] font-semibold">
-            머신머신 님의 러닝 기록
+    <>
+      {user && (
+        <div className="bg-[#f3f3f3] flex items-center justify-between gap-5 px-8 py-10 mb-10">
+          <div>
+            <div className="text-[12px] text-[#515151]">
+              가입기간{" "}
+              <span className="bg-[#DBF2FF] rounded-md px-[12px]">
+                {user.membershipDuration}
+              </span>
+            </div>
+            <div className="flex flex-col justify-center">
+              <div className="text-[22px] text-[#444] font-bold">
+                {user.name} 님의 러닝 기록
+              </div>
+            </div>
+          </div>
+          <div className="w-[64px] h-[64px] rounded-full overflow-hidden">
+            <img
+              className="w-full h-full object-cover"
+              src={user.profileUrl}
+              alt="profile"
+            />
           </div>
         </div>
-      </div>
-      <div className="w-[64px] h-[64px] rounded-full overflow-hidden">
-        <img
-          className="w-full h-full object-cover"
-          src="https://blog.malcang.com/wp-content/uploads/2024/03/1-1.png"
-          alt="profile"
-        />
-      </div>
-    </div>
+      )}
+    </>
   );
 };
 

diff --git a/src/frontend/src/components/crewMembers/CrewMemberCard.tsx b/src/frontend/src/components/crewMembers/CrewMemberCard.tsx
@@ -1,4 +1,5 @@
 import { Member } from "@/types/crew";
+import { ReactComponent as CourseCTA } from "@/assets/icons/CourseCTA.svg";
 import { useNavigate } from "react-router-dom";
 
 type CrewMemberCardProps = {
@@ -9,28 +10,28 @@ const CrewMemberCard = ({ member }: CrewMemberCardProps) => {
   const naavigate = useNavigate();
 
   return (
-    <div
-      onClick={() => naavigate(`/crew/members/${member.userId}`)}
-      className="flex items-center gap-5 px-8 py-5"
-    >
-      <div className="w-[64px] h-[64px] rounded-full overflow-hidden">
-        <img
-          className="w-full h-full object-cover"
-          src={member.profileUrl}
-          alt="profile"
-        />
-      </div>
-      <div className="flex flex-col justify-center">
-        <div className="text-[16px] text-[#444] font-semibold">
-          {member.name}
+    <div className="flex justify-between items-center gap-5 px-6 py-5">
+      <div className="flex items-center gap-4">
+        <div className="w-[64px] h-[64px] rounded-full overflow-hidden">
+          <img
+            className="w-full h-full object-cover"
+            src={member.profileUrl}
+            alt="profile"
+          />
         </div>
-        <div className="text-[12px] text-[#515151]">
-          가입기간{" "}
-          <span className="bg-[#DBF2FF] rounded-md px-[12px]">
-            {member.membershipDuration}
-          </span>
+        <div className="flex flex-col justify-center">
+          <div className="text-[16px] text-[#444] font-semibold">
+            {member.name}
+          </div>
+          <div className="text-[12px] text-[#515151]">
+            가입기간{" "}
+            <span className="bg-[#DBF2FF] rounded-md px-[12px]">
+              {member.membershipDuration}
+            </span>
+          </div>
         </div>
       </div>
+      <CourseCTA onClick={() => naavigate(`/crew/members/${member.userId}`)} />
     </div>
   );
 };

diff --git a/src/frontend/src/components/mypage/RecentRecord.tsx b/src/frontend/src/components/mypage/RecentRecord.tsx
@@ -1,4 +1,3 @@
-import Spinner from "../common/Spinner";
 import { MypageRecentResponse } from "@/types/mypage";
 
 type RecentRecordProps = {

diff --git a/src/frontend/src/hooks/useCrew.ts b/src/frontend/src/hooks/useCrew.ts
@@ -5,6 +5,7 @@ import {
   getCrewGalleryDetail,
   getCrewGalleryDetailComments,
   getCrewMember,
+  getCrewMemberDetail,
   getCrewNotice,
   getCrewNoticeDetail,
   JoinCrew,
@@ -98,6 +99,19 @@ export const useCrewMemberGet = (crewId: number) => {
   });
 };
 
+// 크루 멤버 프로필 조회 api
+export const useCrewMemberDetailGet = (
+  crewId: number,
+  memberId: number,
+  year: number,
+  month: number
+) => {
+  return useQuery({
+    queryKey: ["crewMember", memberId],
+    queryFn: () => getCrewMemberDetail(crewId, memberId, year, month),
+  });
+};
+
 // 크루 갤러리 조회
 export const useCrewGalleryGet = (crewId: number) => {
   return useQuery({

diff --git a/src/frontend/src/pages/CrewMemberDetail/CrewMemberDetailPage.tsx b/src/frontend/src/pages/CrewMemberDetail/CrewMemberDetailPage.tsx
@@ -1,16 +1,46 @@
 import Calendar from "@/components/common/Calendar";
-import RecentRunningCard from "@/components/common/RecentRunningCard";
+import Spinner from "@/components/common/Spinner";
 import CrewMemberDetailTitle from "@/components/crewMemberDetail/CrewMemberDetailTitle";
 import CrewMemberTitle from "@/components/crewMembers/CrewMemberTitle";
+import RecentRecord from "@/components/mypage/RecentRecord";
+import { useCrewMemberDetailGet } from "@/hooks/useCrew";
+import { Member } from "@/types/crew";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 
 const CrewMemberDetailPage = () => {
+  const { id } = useParams();
+  const { data, isLoading } = useCrewMemberDetailGet(1, Number(id), 2024, 12);
+  const [currentUser, setCurrentUser] = useState<Member>();
+
+  useEffect(() => {
+    if (data?.members) {
+      const member = data.members.find(
+        (member) => member.userId === Number(id)
+      );
+      if (member) {
+        setCurrentUser(member);
+      }
+    }
+  }, [data, id]);
+
   return (
-    <div className="mb-24">
-      <CrewMemberTitle />
-      <CrewMemberDetailTitle />
-      <Calendar />
-      <RecentRunningCard />
-    </div>
+    <>
+      {isLoading ? (
+        <Spinner />
+      ) : (
+        data && (
+          <div className="mb-24">
+            <CrewMemberTitle />
+            <CrewMemberDetailTitle user={currentUser} />
+            <Calendar />
+            {data.recentRuns.map((record) => (
+              <RecentRecord record={record} />
+            ))}
+          </div>
+        )
+      )}
+    </>
   );
 };
 

diff --git a/src/frontend/src/types/crew.ts b/src/frontend/src/types/crew.ts
@@ -57,6 +57,28 @@ export type CrewMemberResponse = {
   members: Member[];
 };
 
+export type userDistanceType = {
+  date: string;
+  totalDistance: number;
+};
+
+export type recentRunsType = {
+  distance: number;
+  duration: number;
+  pace: number;
+  tags: string[];
+  createdAt: string;
+};
+
+export type CrewMemberDetailResponse = {
+  crewTitle: string;
+  postCount: number;
+  memberCount: number;
+  members: Member[];
+  userDistance: userDistanceType[];
+  recentRuns: recentRunsType[];
+};
+
 export type Post = {
   postId: number;
   imageUrl: string;