Merge pull request #154 from Team-Muffin/feature/profile-page-challenge

feat: user's challenge
Team-Muffin · Jun 26, 2024 · ccfa4ee · ccfa4ee
2 parents 1a321de + 9e7a883
commit ccfa4ee
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 10 deletions.
diff --git a/src/components/profile/Challenge.tsx b/src/components/profile/Challenge.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Challenge } from "../../libs/apis/user";
+import ChallengeCardHorizontal from "../common/ChallengeCardHorizontal";
+import { getChallengeBgColor } from "../../utils/challengeUtil";
+
+interface ChallengeListProps {
+  challenges: Challenge[];
+}
+
+const ChallengeList: React.FC<ChallengeListProps> = ({ challenges }) => {
+    return (
+        <div className="mt-[2vh] overflow-y-scroll">
+        {challenges.map((challenge, index) => (
+          <div key={index}>
+            <ChallengeCardHorizontal
+              key={challenge.challengeId}
+              title={challenge.name}
+              description={challenge.description}
+              participants={challenge.participants}
+              bgColor={getChallengeBgColor(challenge.challengeId)}
+              ChallengeLogo={challenge.logoUrl}
+              reward={30}
+              id={challenge.challengeId}
+            />
+          </div>
+        ))}
+      </div>
+    );
+};
+
+
+
+
+export default ChallengeList;
diff --git a/src/libs/apis/user.tsx b/src/libs/apis/user.tsx
@@ -448,3 +448,53 @@ export async function getBirth(): Promise<string> {
     throw err;
   }
 }
+
+
+export interface Challenge {
+  myChallengeId: number;
+  challengeId: number;
+  challengeType: number;
+  name: string;
+  participants: number;
+  description: string;
+  logoUrl: string;
+  challengeUrl: string;
+  corpName: string;
+  endAt: string;
+  status: string;
+  progress: number;
+  term: number;
+}
+
+export interface ChallengeResponse {
+  success: boolean;
+  message: string;
+  data: [Challenge];
+}
+
+//참여중인 챌린지 조회
+export async function getMyChallenge(id:number):Promise<ChallengeResponse>{
+  try {
+    console.log("유저!!!!!!!!!",id);
+    const response = await instance.get(`/challenge-service/my-challenges?isDone=0&userId=${id}`);
+    console.log("참여중인 챌린지 조회 API 호출 성공:", response.data); // 성공 로그 출력
+    return response.data;
+  } catch (error) {
+    console.error("참여중인 챌린지 조회 중 오류 발생", error);
+    throw error;
+  }
+
+}
+
+//참여했던 챌린지 조회
+export async function getMyEndChallenge(id:number):Promise<ChallengeResponse>{
+  try {
+    const response = await instance.get(`/challenge-service/my-challenges?isDone=1&userId=${id}`);
+    console.log("참여중인 챌린지 조회 API 호출 성공:", response.data); // 성공 로그 출력
+    return response.data;
+  } catch (error) {
+    console.error("참여중인 챌린지 조회 중 오류 발생", error);
+    throw error;
+  }
+
+}
diff --git a/src/routes/profile/ProfilePage.tsx b/src/routes/profile/ProfilePage.tsx
@@ -9,15 +9,13 @@ import Portfolio from "../../components/profile/Portfolio";
 import Credit from "../../components/profile/Credit";
 import PurpleBtn from "../../components/common/PurpleBtn";
 import Modal from "../../components/common/Modal";
-import useAuth2Store from "../../store/useAuth2Store";
-import {
-  getUserDetails,
-  UserDetailsResponse,
-  getFollowers,
-  FollowersReq,
-} from "../../libs/apis/user";
-import { getPortfolio, PortfolioResponse } from "../../libs/apis/user";
-import { subscribePortfolio } from "../../libs/apis/user"; // 포트폴리오 구독 API import
+
+
+import { getUserDetails, UserDetailsResponse, getFollowers, FollowersReq, getMyChallenge, getMyEndChallenge } from "../../libs/apis/user";
+import { getPortfolio, PortfolioResponse, Challenge } from "../../libs/apis/user";
+import { subscribePortfolio } from "../../libs/apis/user";// 포트폴리오 구독 API import
+import ChallengeList from "../../components/profile/Challenge";
+
 
 const ProfilePage: React.FC = () => {
   const [userCategory, setUserCategory] = useState<string>("나의 핀");
@@ -40,7 +38,9 @@ const ProfilePage: React.FC = () => {
   const [portfolioAbstracts, setPortfolioAbstracts] = useState<PortfolioResponse["data"]["abstracts"] | null>(null);
 
   const [portfolioError, setPortfolioError] = useState<string | null>(null); // State to track portfolio fetch error
-  const [isSubscribed, setIsSubscribed] = useState<boolean>(false); // State to track if the portfolio is subscribed
+  const [challengeList, setChallengeList] = useState<Challenge[]>([]);
+  const[endChallengeList, setEndChallengeList] = useState<Challenge[]>([]);
+
 
   useEffect(() => {
     if (userId) {
@@ -54,6 +54,8 @@ const ProfilePage: React.FC = () => {
 
       fetchFollowers(parseInt(userId));
       fetchPortfolioData(otherId);
+      fetchMyChallenge(parseInt(userId));
+      fetchMyEndChallenge(parseInt(userId));
     }
   }, [userId, otherId]);
 
@@ -122,6 +124,38 @@ const ProfilePage: React.FC = () => {
     }
   };
 
+  const fetchMyChallenge = async(userId: number)=>{
+    try {
+      const response = await getMyChallenge(userId);
+      console.log("데이터당!!!!!", response)
+      if (response.message) {
+        console.log("성공이욤")
+        setChallengeList(response.data);
+        console.log("저장된 데이터!!", challengeList);
+      } else {
+        console.error("참여중인 챌린지 조회 실패:", response.message);
+      }
+    } catch (error) {
+      console.error("참여중인 챌린지 조회 중 오류 발생", error);
+    }
+  }
+
+  const fetchMyEndChallenge = async(userId: number)=>{
+    try {
+      const response = await getMyEndChallenge(userId);
+      console.log("데이터당!!!!!", response)
+      if (response.message) {
+        console.log("성공이욤")
+        setEndChallengeList(response.data);
+        console.log("저장된 데이터!!", challengeList);
+      } else {
+        console.error("참여중인 챌린지 조회 실패:", response.message);
+      }
+    } catch (error) {
+      console.error("참여중인 챌린지 조회 중 오류 발생", error);
+    }
+  }
+
   const openFollowerModal = (followerId: number) => {
     setSelectedFollowerId(followerId);
   };
@@ -160,6 +194,40 @@ const ProfilePage: React.FC = () => {
         userCategory={userCategory}
         handleUserCategoryClick={handleUserCategoryClick}
       />
+      {userCategory === "챌린지" && (
+        <>
+        <div className="relative px-[8vw] py-[3vh] bg-white">
+        <div className="flex justify-between">
+          <p className="text-base font-bold text-black-900">참여중인 챌린지</p>
+        </div>
+        {challengeList.length>0?(
+          <ChallengeList challenges={challengeList}/>
+        ):(
+          <div className="flex flex-col items-center py-[8vh] px-[6vw] bg-white rounded">
+          <p className="text-lg font-semibold mb-[3vh]">
+            아직 참여한 챌린지가 없어요 <br /> &nbsp; 챌린지에 참여해보세요!
+          </p>
+        </div>
+        )}
+        </div>
+
+        <div className="relative px-[8vw] py-[3vh] bg-white">
+        <div className="flex justify-between">
+          <p className="text-base font-bold text-black-900">참여했던 챌린지</p>
+        </div>
+        {challengeList.length>0?(
+          <ChallengeList challenges={endChallengeList}/>
+        ):(
+          <div className="flex flex-col items-center py-[8vh] px-[6vw] bg-white rounded">
+          <p className="text-lg font-semibold mb-[3vh]">
+            아직 완료한 챌린지가 없어요!
+          </p>
+        </div>
+        )}
+        </div>
+        </>
+      )}
+      {userCategory === "포트폴리오" && (
       {userCategory === "포트폴리오" && userData?.role === "FINFLUENCER" && (
         <>
           {(portfolioDetails || portfolioAbstracts) ? (