#102 [FEAT] 내 명함 API 연결 시도(2)

src/axios/index.js

@@ -19,8 +19,7 @@ const getTokenFromCookie = () => {
 };
 
 const dummyToken =
-  'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIzODQ1Njk3MjEwIiwicm9sZSI6IlVTRVIiLCJuaWNrbmFtZSI6Iuq5gO2YnOumvCIsImlkIjozODQ1Njk3MjEwLCJleHAiOjE3MzQ4NjQxODIsImlhdCI6MTczNDg2MDU4MiwidXNlcm5hbWUiOiJjMGVkZWQ0Ny00ZTdiLTQ4ZTAtYTY2OS00NTA4NjhiNmZlOWYifQ.KIS9XLDyKIgulQmxdk3_GKJAmD2j-16cYeoliQAMSrhmTZ9Zpu64TXkoPRM8On_qdUJ4UtyoNQUHNRi6rX1huA';
-
+  'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIzODQ1Njk3MjEwIiwicm9sZSI6IlVTRVIiLCJuaWNrbmFtZSI6Iuq5gO2YnOumvCIsImlkIjozODQ1Njk3MjEwLCJleHAiOjE3MzQ4Nzk5ODIsImlhdCI6MTczNDg3NjM4MiwidXNlcm5hbWUiOiIwMTVmZDUwNy0zNWJiLTQxNmYtYjQ4OC03Y2JiN2NjYTQ0NjQifQ.Glv2-tcXLiqhI3TasBvC9WmS9P7YE7-AC1RnS9gzl_x0hfBxW5jfcTvsqBS7D6o40rbBKUPU8Iscvs1PsDiB2g';
 // 요청을 보낼 때 Bearer Token을 Authorization 헤더에 추가합니다.
 authAxios.interceptors.request.use(
   (config) => {

src/components/BadgeDetail/BadgeDetail.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as S from './BadgeDetail.style';
 
-export default function DetailBadge({ badges, activeBadge }) {
+export default function BadgeDetail({ badges, activeBadge }) {
   return (
     <>
       {badges.map((badge) => (

src/components/BadgeDetail/index.js

@@ -1 +1 @@
-export { default as DetailBadge } from './BadgeDetail';
+export { default as BadgeDetail } from './BadgeDetail';

src/components/index.js

@@ -9,4 +9,4 @@ export { PrimaryButton, SecondaryButton } from './Button';
 export { BlueBadge } from './Badge';
 export { AddGroupModal } from './AddGroupModal';
 export { Layout } from './Layout';
-export { DetailBadge } from './BadgeDetail';
+export { BadgeDetail } from './BadgeDetail';

src/pages/CardDetailPage/CardDetailPage.jsx

@@ -2,13 +2,12 @@ import React, { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import * as S from './CardDetailPage.style';
 import Icon from '../../components/Icon/Icon';
-import { DetailBadge } from '../../components';
+import { BadgeDetail } from '../../components';
 import ProfileImgDefault from '../../assets/images/profile-img-default.svg';
-import { getCards } from '../../apis'; // getCards API 가져오기
-import CARDS_SAMPLE_DATA from '../../constants/cardsSampleData';
+import CARDS_SAMPLE_DATA from '../../constants/cardsSampleData'; // Import sample data
 
 export default function CardDetailPage() {
-  const { id } = useParams(); // URL 파라미터에서 id 가져오기
+  const { id } = useParams(); // URL parameter to get id
 
   const badges = [
     { label: '비즈니스', value: '비즈니스' },
@@ -17,28 +16,26 @@ export default function CardDetailPage() {
     { label: '대학교', value: '대학교' },
   ];
 
-  // 상태 변수 초기화
+  // Initialize state variables
   const [cardData, setCardData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await getCards({ member_id: id }); // getCards API 호출
-        setCardData(response); // API에서 가져온 데이터를 상태로 설정
-      } catch (err) {
-        setError(err.message); // 에러 발생 시 에러 메시지 상태로 설정
-      } finally {
-        setLoading(false); // 로딩 상태 종료
-      }
-    };
+    // Simulate fetching the card by id from CARDS_SAMPLE_DATA
+    const foundCard = CARDS_SAMPLE_DATA.find((card) => card.id === id); // Find card by id
 
-    fetchData(); // 함수 호출
-  }, [id]); // `id` 값이 변경될 때마다 다시 호출
+    if (foundCard) {
+      setCardData(foundCard);
+    } else {
+      setError('Card not found'); // If no card found
+    }
 
-  if (loading) return <S.Loading>Loading...</S.Loading>; // 로딩 중일 때 표시할 메시지
-  if (error) return <S.Error>{`Error: ${error}`}</S.Error>; // 에러 발생 시 표시할 메시지
+    setLoading(false); // End loading once data is found or error occurs
+  }, [id]); // Re-fetch if `id` changes
+
+  if (loading) return <S.Loading>Loading...</S.Loading>; // Display loading state
+  if (error) return <S.Error>{`Error: ${error}`}</S.Error>; // Display error if any
 
   const filteredBadges = cardData
     ? badges.filter((badge) => badge.value === cardData.category)
@@ -141,7 +138,7 @@ export default function CardDetailPage() {
           </S.ContactContainer>
           <S.GroupButtonBar>그룹</S.GroupButtonBar>
           <S.GroupButtonBox>
-            <DetailBadge badges={filteredBadges} activeBadge={activeBadge} />
+            <BadgeDetail badges={filteredBadges} activeBadge={activeBadge} />
           </S.GroupButtonBox>
           {(cardData?.pic1 || cardData?.pic2) && (
             <S.CardImageContainer>

src/pages/MyPage/MyPage.jsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { HiOutlineLink } from 'react-icons/hi';
 import MY_CARD_SAMPLE_DATA from '../../constants/myCardSampleData';
-import { getMyCard, putMyCard } from '../../apis'; // API 함수 불러오기
+import { getMyCard } from '../../apis'; // API 함수 불러오기
 
 export default function MyPage() {
   const [isModalOpen, setIsModalOpen] = useState(false); // QR 코드 모달 상태
@@ -15,15 +15,17 @@ export default function MyPage() {
   useEffect(() => {
     const fetchMyCard = async () => {
       try {
-        const response = await getMyCard(); // API로부터 명함 데이터 받아오기
-        setMyInfo(response.data); // 받아온 데이터로 상태 업데이트
+        const response = await getMyCard();
+        console.log(response); // Check the API response
+        setMyInfo(response.data); // Use sample data if API response is empty
       } catch (error) {
         console.error('명함 정보를 가져오는 데 실패했습니다.', error);
+        setMyInfo(MY_CARD_SAMPLE_DATA); // Use sample data on error
       }
     };
 
     fetchMyCard();
-  }, []); // 페이지 로딩 시 한 번만 호출
+  }, []);
 
   const handleShareClick = () => {
     setIsModalOpen(true); // QR 코드 모달 열기