Merge pull request #121 from APPS-sookmyung/feat/#99-mypage-api

#99 [FEAT] 내 명함 API 연동
APPS-sookmyung · Dec 24, 2024 · 14149c4 · 14149c4
2 parents 5f9cc8c + eb7cb42
commit 14149c4
Show file tree

Hide file tree

Showing 10 changed files with 4,898 additions and 226 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/apis/index.js b/src/apis/index.js
@@ -1,3 +1,10 @@
 export { getGroupList, postGroup, deleteGroup, putGroup } from './group';
-export { getCards, getCardDetail, postCards, deleteCards, putCards, searchCards } from './cards';
+export {
+  getCards,
+  getCardDetail,
+  postCards,
+  deleteCards,
+  putCards,
+  searchCards,
+} from './cards';
 export { getMyCard, postMyCard, deleteMyCard, putMyCard } from './myCard';
diff --git a/src/apis/myCard.js b/src/apis/myCard.js
@@ -2,14 +2,23 @@ import { authAxios } from '../axios';
 
 // 내 명함 가져오기
 export const getMyCard = async () => {
-  const response = await authAxios.get(`/me`);
-  console.log(response);
-  return response;
+  try {
+    console.log('요청 시작: /me');
+    const response = await authAxios.get(`/me`);
+    console.log('요청 성공:', response.data);
+    return response;
+  } catch (error) {
+    console.error(
+      '명함 데이터를 가져오는 중 오류 발생:',
+      error.response || error
+    );
+    throw error;
+  }
 };
 
 // 내 명함 생성
 export const postMyCard = async ({ data }) => {
-  const response = await authAxios.post(`/categories`, data);
+  const response = await authAxios.post(`/me`, data);
   console.log(response);
   return response;
 };

diff --git a/src/axios/index.js b/src/axios/index.js
@@ -19,8 +19,7 @@ const getTokenFromCookie = () => {
 };
 
 const dummyToken =
-  '여기에 로그인 링크 타고 들어갔을 때 쿠키에 뜨는 토큰값을 넣어주세요';
-
+  'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIzODQ1Njk3MjEwIiwicm9sZSI6IlVTRVIiLCJuaWNrbmFtZSI6Iuq5gO2YnOumvCIsImlkIjozODQ1Njk3MjEwLCJleHAiOjE3MzQ4Nzk5ODIsImlhdCI6MTczNDg3NjM4MiwidXNlcm5hbWUiOiIwMTVmZDUwNy0zNWJiLTQxNmYtYjQ4OC03Y2JiN2NjYTQ0NjQifQ.Glv2-tcXLiqhI3TasBvC9WmS9P7YE7-AC1RnS9gzl_x0hfBxW5jfcTvsqBS7D6o40rbBKUPU8Iscvs1PsDiB2g';
 // 요청을 보낼 때 Bearer Token을 Authorization 헤더에 추가합니다.
 authAxios.interceptors.request.use(
   (config) => {

diff --git a/src/components/CardInfo/CardInfo.jsx b/src/components/CardInfo/CardInfo.jsx
@@ -56,6 +56,7 @@ export default function CardInfo({
 }
 
 CardInfo.propTypes = {
+  id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   company: PropTypes.string.isRequired,
   position: PropTypes.string.isRequired,

diff --git a/src/constants/cardsSampleData.js b/src/constants/cardsSampleData.js
diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -1,43 +1,51 @@
 import * as S from './MyPage.style';
 import Icon from '../../components/Icon/Icon';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { HiOutlineLink } from 'react-icons/hi';
-
-// 더미 데이터
-const myInfo = {
-  name: '김은지',
-  job: 'Web Engineer',
-  team: '개발팀',
-  company: null,
-  phone: '010-1234-5678',
-  email: '[email protected]',
-  tel: '81-2-222-3456',
-  address: '서울시 강남구 테헤란로 134, 5-6층 (역삼동, 포스크타워 역삼)',
-};
+import MY_CARD_SAMPLE_DATA from '../../constants/myCardSampleData';
+import { getMyCard } from '../../apis'; // API 함수 불러오기
+import ProfileImgDefault from '../../assets/images/profile-img-default.svg';
 
 export default function MyPage() {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isToastVisible, setIsToastVisible] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false); // QR 코드 모달 상태
+  const [isToastVisible, setIsToastVisible] = useState(false); // 토스트 메시지 상태
+  const [myInfo, setMyInfo] = useState(MY_CARD_SAMPLE_DATA); // 명함 정보 상태
+
+  // 마이페이지의 명함 정보를 API에서 받아오기
+  useEffect(() => {
+    const fetchMyCard = async () => {
+      try {
+        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 profileImageUrl = myInfo.profImgUrl || ProfileImgDefault;
   const handleShareClick = () => {
-    setIsModalOpen(true);
+    setIsModalOpen(true); // QR 코드 모달 열기
   };
 
   const handleCloseModal = () => {
-    setIsModalOpen(false);
+    setIsModalOpen(false); // QR 코드 모달 닫기
   };
 
   const handleCopyLinkClick = () => {
-    setIsToastVisible(true);
+    setIsToastVisible(true); // 링크 복사 시 토스트 메시지 보이기
     setTimeout(() => {
-      setIsToastVisible(false);
+      setIsToastVisible(false); // 3초 후 토스트 메시지 숨기기
     }, 3000);
   };
 
   const navigate = useNavigate();
   const handleEditButtonClick = () => {
-    navigate('/mypage/edit');
+    navigate('/mypage/edit'); // 편집 페이지로 이동
   };
 
   return (
@@ -54,7 +62,11 @@ export default function MyPage() {
           <S.MidBar>
             <S.LeftContainer2 />
             <S.MyInfoSummaryWrapper>
-              <S.ProfileImageWrapper>프로필 사진</S.ProfileImageWrapper>
+              <S.ProfileImageWrapper>
+                <S.PicContainer>
+                  <S.ProfilePic src={profileImageUrl} alt={`나의 프로필`} />
+                </S.PicContainer>
+              </S.ProfileImageWrapper>
             </S.MyInfoSummaryWrapper>
             <S.ShareIconWrapper>
               <Icon
@@ -81,24 +93,32 @@ export default function MyPage() {
                   <S.MyInfoValue>{myInfo.company}</S.MyInfoValue>
                 ) : (
                   <S.MyInfoValueNull>
-                    (정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.)
+                    정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.
                   </S.MyInfoValueNull>
                 )}
               </S.MyInfoItem>
               <S.MyInfoItem>
                 <S.MyInfoLabel>직책 / 부서</S.MyInfoLabel>
                 <S.MyInfoValue>
-                  {myInfo.job ? (
-                    myInfo.team ? (
-                      `${myInfo.job} / ${myInfo.team}`
+                  {myInfo.position ? (
+                    myInfo.department ? (
+                      <>
+                        {myInfo.position} / {myInfo.department}
+                      </>
                     ) : (
-                      <>{myInfo.job}</>
+                      <>
+                        {myInfo.position} /{' '}
+                        <S.MyInfoValueNull>정보가 없습니다.</S.MyInfoValueNull>
+                      </>
                     )
-                  ) : myInfo.team ? (
-                    <>{myInfo.team}</>
+                  ) : myInfo.department ? (
+                    <>
+                      <S.MyInfoValueNull>정보가 없습니다.</S.MyInfoValueNull> /{' '}
+                      {myInfo.department}
+                    </>
                   ) : (
                     <S.MyInfoValueNull>
-                      (정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.)
+                      정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.
                     </S.MyInfoValueNull>
                   )}
                 </S.MyInfoValue>
@@ -116,7 +136,7 @@ export default function MyPage() {
                     <S.MyInfoValue>{myInfo.phone}</S.MyInfoValue>
                   ) : (
                     <S.MyInfoValueNull>
-                      (정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.)
+                      정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.
                     </S.MyInfoValueNull>
                   )}
                   <S.IconBox>
@@ -132,7 +152,7 @@ export default function MyPage() {
                     <S.MyInfoValue>{myInfo.email}</S.MyInfoValue>
                   ) : (
                     <S.MyInfoValueNull>
-                      (정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.)
+                      정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.
                     </S.MyInfoValueNull>
                   )}
                   <Icon id='mail' width='20' height='14' />
@@ -145,7 +165,7 @@ export default function MyPage() {
                     <S.MyInfoValue>{myInfo.tel}</S.MyInfoValue>
                   ) : (
                     <S.MyInfoValueNull>
-                      (정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.)
+                      정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.
                     </S.MyInfoValueNull>
                   )}
                   <Icon id='call' width='20' height='14' />
@@ -157,7 +177,7 @@ export default function MyPage() {
                   <S.MyInfoValue>{myInfo.address}</S.MyInfoValue>
                 ) : (
                   <S.MyInfoValueNull>
-                    (정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.)
+                    정보가 없습니다. 편집하기를 눌러 명함을 완성하세요.
                   </S.MyInfoValueNull>
                 )}
               </S.MyInfoItem>

diff --git a/src/pages/MyPage/MyPage.style.jsx b/src/pages/MyPage/MyPage.style.jsx
@@ -94,6 +94,23 @@ export const ProfileImageWrapper = styled.div`
   background-color: white;
 `;
 
+export const PicContainer = styled.div`
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ProfilePic = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 100px;
+  background: #ffffff;
+  position: relative;
+`;
+
 export const BotBar = styled.div`
   width: 100%;
   padding: 6px;