From f99e1c20d1f6f9e1901a66d805e3b13637b2362b Mon Sep 17 00:00:00 2001
From: taejun0 <xownswns@naver.com>
Date: Tue, 25 Feb 2025 17:50:00 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=80=EB=93=9C=20=EC=97=B4=EB=9E=8C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/selectpage/SelectPage.jsx | 20 +++++----
 src/services/SelectService.js       | 68 ++++++++++++++++++-----------
 2 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/pages/selectpage/SelectPage.jsx b/src/pages/selectpage/SelectPage.jsx
index 142805e..12c18e9 100644
--- a/src/pages/selectpage/SelectPage.jsx
+++ b/src/pages/selectpage/SelectPage.jsx
@@ -42,7 +42,9 @@ export const SelectPage = () => {
     prevArrow: <CustomPrevArrow />,
     nextArrow: <CustomNextArrow />,
     initialSlide: 1,
-    afterChange: (index) => SelectData.setSelectedCard(SelectData.cards[index]),
+    afterChange: (index) => {
+      SelectData.setSelectedCard(SelectData.cards[index]);
+    },
   };
 
 
@@ -57,13 +59,13 @@ export const SelectPage = () => {
 
           <S.StyledSlider {...sliderSettings}>
             {SelectData.cards.map((card, index) => (
-              <S.CardContainer key={card.id}>
+              <S.CardContainer key={card.id || index}>
                 <S.CardInner $isFlipped={SelectData.flipped[index]} onClick={() => SelectHandlers.handleFlip(index)}>
                   {/* 카드 앞면 */}
                   <S.CardFace className="front">
                     <S.ImageContainer>
                       <S.Image src={default_image} />
-                      <S.IconBox $background={card.backgroundColor}>
+                      <S.IconBox $background={card.cover}>
                         <S.SelectEmoji>{card.emoji}</S.SelectEmoji>
                       </S.IconBox>
                     </S.ImageContainer>
@@ -74,7 +76,7 @@ export const SelectPage = () => {
                     <S.ImageContainer>
                       <S.Image src={default_image} />
                       <S.BackTitle $background={card.backgroundColor}>{card.title}</S.BackTitle>
-                      <S.BackDescription>{card.description}</S.BackDescription>
+                      <S.BackDescription>{card.content}</S.BackDescription>
                     </S.ImageContainer>
                   </S.CardFace>
                 </S.CardInner>
@@ -111,24 +113,24 @@ export const SelectPage = () => {
             subTitle={["경험 선배는 이랬어요."]}
           />
           <S.UserCard
-            $Color = {SelectData.selectedCard.backgroundColor}
+            $Color = {SelectData.selectedCard.cover}
           >
             <S.Icon46>{SelectData.selectedCard.emoji}</S.Icon46>
             <UserExplain 
               titleValue={SelectData.selectedCard.title}
-              contentValue={SelectData.selectedCard.description}            
+              contentValue={SelectData.selectedCard.content}            
             />
 
-           {SelectData.selectedCard?.extra.map((item) => (
+           {/* {SelectData.selectedCard?.extra.map((item) => (
               <UserExplain 
                 key={item.id} // ✅ React의 key 설정
                 titleValue={item.title} // ✅ extra의 title
                 contentValue={item.content} // ✅ extra의 content
               />
-            ))}
+            ))} */}
           </S.UserCard>
           <Footer 
-            content="선택하기"
+            content="계속하기"
             isSignupEnabled={true}
             onSignupClick={SelectHandlers.goToNextStep}
           />
diff --git a/src/services/SelectService.js b/src/services/SelectService.js
index 604eb39..044280a 100644
--- a/src/services/SelectService.js
+++ b/src/services/SelectService.js
@@ -1,33 +1,51 @@
 import { instance } from "./instance";
 
 export const SelectService = {
-  submitExperience: async ({ emoji, title, description, startDate, endDate, extra, backgroundColor }) => {
-    // try {
-    //   const response = await instance.post("/apply", {
-    //     emoji,
-    //     title,
-    //     description,
-    //     startDate,
-    //     endDate,
-    //     extra,
-    //     backgroundColor
-    //   });
+  getRandomCards: async () => {
+    try {
+      const response = await instance.get("/cards/random");
+      return response.data;
+    } catch (error) {
+      console.error("🚨 랜덤 카드 조회 실패:", error.response?.data || error.message);
+      throw error;
+    }
+  },
 
-    //   return response.data;
-    // } catch (error) {
-    //   console.error("🚨 경험 카드 등록 실패:", error.response?.data || error.message);
-    //   throw error;
-    // }
+  // 특정 카드 ID로 카드 조회
+  getCardById: async (cardId) => {
+    try {
+      const response = await instance.get(`/cards/${cardId}`);
+      return response.data;
+    } catch (error) {
+      console.error(`🚨 카드 조회 실패 (ID: ${cardId}):`, error.response?.data || error.message);
+      throw error;
+    }
+  },
 
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({
-          success: true,
-          message: "무조건 성공! 🎉",
-          data: { emoji, title, description, startDate, endDate, extra, backgroundColor }
-        });
-      }, 1000); // 1초 딜레이 후 성공 응답
-    });
+  submitExperience: async ({ cardId, cover, startDate, endDate }) => {
+    try {
+      const response = await instance.post("/cards/experience", {
+        cardId,
+        cover,
+        startDate,
+        endDate
+      });
 
+      return response.data;
+    } catch (error) {
+      console.error("🚨 경험 등록 실패:", error.response?.data || error.message);
+      throw error;
+    }
   }
+
+  // return new Promise((resolve) => {
+  //   setTimeout(() => {
+  //     resolve({
+  //       success: true,
+  //       message: "무조건 성공! 🎉",
+  //       data: { emoji, title, description, startDate, endDate, extra, backgroundColor }
+  //     });
+  //   }, 1000); // 1초 딜레이 후 성공 응답
+  // });
+
 };
\ No newline at end of file