From 390de40ff70e976a5442349c42f477b3fb182542 Mon Sep 17 00:00:00 2001
From: ChoiSangwon <fdsa200@naver.com>
Date: Thu, 13 Jun 2024 13:59:11 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=ED=8A=B9=EC=A0=95=20=EB=B6=84?=
 =?UTF-8?q?=EC=95=BC=EC=9D=98=20=EB=A9=98=ED=86=A0=20=EB=B6=88=EB=9F=AC?=
 =?UTF-8?q?=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/main.tsx | 45 +++++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
index 725bdbe..92e1509 100644
--- a/src/pages/main/main.tsx
+++ b/src/pages/main/main.tsx
@@ -6,6 +6,20 @@ import { useRecoilValue } from "recoil";
 import LeftButton from "../../assets/LeftButton.svg";
 import RightButton from "../../assets/RightButton.svg";
 
+type MentorCategory = {
+  "기획": 'PM',
+  "FE": 'FE', 
+  "BE": 'BE',
+  "디자인": 'DE',
+};
+
+const mentorCategory: MentorCategory = {
+  "기획": 'PM',
+  "FE": 'FE', 
+  "BE": 'BE',
+  "디자인": 'DE',
+};
+
 interface MentorData {
   picture: string;
   mentorName: string;
@@ -15,7 +29,7 @@ interface MentorData {
 }
 
 function Main() {
-  const [activeButtons, setActiveButtons] = useState<string[]>([]);
+  const [activeButtons, setActiveButtons] = useState<keyof MentorCategory>('기획');
   const [mentorData, setMentorData] = useState<MentorData[] | null>(null);
   const navigate = useNavigate();
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -28,8 +42,8 @@ function Main() {
     }
   }, [navigate]);
 
-  useEffect(() => {
-    const url = `https://cogo.life/api/v1/mentor/BE`;
+  const getMentorData=()=>{
+    const url = `https://cogo.life/api/v1/mentor/${mentorCategory[activeButtons]}`;
 
     fetch(url, {
       method: "GET",
@@ -46,17 +60,18 @@ function Main() {
       .catch((error) => {
         console.error("Error:", error);
       });
+  }
+
+  useEffect(() => {
+    getMentorData();
   }, []);
 
-  const handleButtonClick = (buttonName: string) => {
-    setActiveButtons((prev) => {
-      const isActive = prev.includes(buttonName);
-      if (isActive) {
-        return prev.filter((name) => name !== buttonName);
-      } else {
-        return [...prev, buttonName];
-      }
-    });
+  useEffect(()=>{
+    getMentorData()
+  },[activeButtons]);
+
+  const handleButtonClick = (buttonName:keyof MentorCategory) => {
+    setActiveButtons(buttonName)
   };
 
   const handleProfileButtonClick = (buttonName: string) => {
@@ -93,11 +108,11 @@ function Main() {
         </styles.HeaderTitle>
         <styles.HeaderText>동아리별 COGO 선배 알아보기</styles.HeaderText>
         <styles.HeaderButtonContainer>
-          {["기획", "FE", "BE", "디자인"].map((buttonName) => (
+          {["기획","BE",'FE',"디자인"].map((buttonName) => (
             <styles.HeaderButton
               key={buttonName}
               active={activeButtons.includes(buttonName)}
-              onClick={() => handleButtonClick(buttonName)}>
+              onClick={() => {handleButtonClick(buttonName as keyof MentorCategory)}}>
               {buttonName}
             </styles.HeaderButton>
           ))}
@@ -126,7 +141,7 @@ function Main() {
           </styles.ProfileTopContainer>
           <styles.ProfileBottomContainer>
             <styles.ProfileIcon>동아리</styles.ProfileIcon>
-            <styles.ProfileIcon>FE</styles.ProfileIcon>
+            <styles.ProfileIcon>{activeButtons}</styles.ProfileIcon>
             <styles.ProfileIcon>Lead</styles.ProfileIcon>
           </styles.ProfileBottomContainer>
         </styles.BodyProfile>