#99 [FEAT] 내 명함 API 연동

APPS-sookmyung · Dec 24, 2024 · eb7cb42 · eb7cb42
1 parent 0303786
commit eb7cb42
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 109 deletions.
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/components/BadgeDetail/BadgeDetail.jsx b/src/components/BadgeDetail/BadgeDetail.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import * as S from './BadgeDetail.style';
 
-export default function BadgeDetail({ badges, activeBadge }) {
+export default function DetailBadge({ badges, activeBadge }) {
   return (
     <>
       {badges.map((badge) => (

diff --git a/src/components/BadgeDetail/index.js b/src/components/BadgeDetail/index.js
@@ -1 +1 @@
-export { default as BadgeDetail } from './BadgeDetail';
+export { default as DetailBadge } from './BadgeDetail';
diff --git a/src/components/index.js b/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 { BadgeDetail } from './BadgeDetail';
+export { DetailBadge } from './BadgeDetail';
diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { HiOutlineLink } from 'react-icons/hi';
 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); // QR 코드 모달 상태
@@ -26,7 +27,7 @@ export default function MyPage() {
 
     fetchMyCard();
   }, []);
-
+  const profileImageUrl = myInfo.profImgUrl || ProfileImgDefault;
   const handleShareClick = () => {
     setIsModalOpen(true); // QR 코드 모달 열기
   };
@@ -61,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
@@ -95,19 +100,21 @@ export default function MyPage() {
               <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} /{' '}
-                        <S.MyInfoValueNull>정보가 없습니다. </S.MyInfoValueNull>
+                        {myInfo.position} /{' '}
+                        <S.MyInfoValueNull>정보가 없습니다.</S.MyInfoValueNull>
                       </>
                     )
-                  ) : myInfo.team ? (
+                  ) : myInfo.department ? (
                     <>
                       <S.MyInfoValueNull>정보가 없습니다.</S.MyInfoValueNull> /{' '}
-                      {myInfo.team}
+                      {myInfo.department}
                     </>
                   ) : (
                     <S.MyInfoValueNull>

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;

diff --git a/src/pages/MyPageEditPage/MyPageEditPage.jsx b/src/pages/MyPageEditPage/MyPageEditPage.jsx
@@ -3,6 +3,8 @@ import * as S from './MyPageEditPage.style';
 import Icon from '../../components/Icon/Icon';
 import { Link, useNavigate } from 'react-router-dom';
 import { getMyCard, postMyCard, putMyCard } from '../../apis';
+import useFormData from '../../hooks/useFormData';
+import { useQuery } from '@tanstack/react-query';
 
 const InputWrapper = memo(
   ({
@@ -44,62 +46,35 @@ const InputWrapper = memo(
 export default function MyPageEditPage() {
   const [myInfo, setMyInfo] = useState({
     name: '',
-    job: '',
+    position: '',
     company: '',
     phone: '',
     email: '',
     tel: '',
     address: '',
-    team: '',
-  });
-  const [isEditing, setIsEditing] = useState({
-    name: false,
-    job: false,
-    company: false,
-    phone: false,
-    email: false,
-    tel: false,
-    address: false,
+    department: '',
+    profImgUrl: '',
   });
+  const [isEditing, setIsEditing] = useState({});
   const [profileImage, setProfileImage] = useState(null);
   const profileImageInputRef = useRef(null);
   const navigate = useNavigate();
 
+  const { data: inputData } = useQuery({
+    queryKey: ['myDetail'],
+    queryFn: getMyCard,
+  });
+
   useEffect(() => {
-    const fetchMyCard = async () => {
-      try {
-        const response = await getMyCard();
-        if (response.data) {
-          setMyInfo({
-            name: response.data.name || '',
-            job: response.data.position || '',
-            company: response.data.company || '',
-            phone: response.data.phone || '',
-            email: response.data.email || '',
-            tel: response.data.tel || '',
-            address: response.data.address || '',
-            team: response.data.department || '',
-            imageUrl: response.data.profImgUrl || '',
-          });
-        } else {
-          setMyInfo({
-            name: '',
-            job: '',
-            company: '',
-            phone: '',
-            email: '',
-            tel: '',
-            address: '',
-            team: '',
-          });
-        }
-      } catch (error) {
-        console.error('사용자 정보를 불러오는 데 실패했습니다.', error);
-      }
-    };
+    if (inputData) {
+      setMyInfo(inputData.data);
+    }
+  }, [inputData]);
 
-    fetchMyCard();
-  }, []);
+  const updatedDataForm = useFormData({
+    ...myInfo,
+    profImgUrl: profileImage, // 이미지 포함
+  });
 
   const handleInfoChange = (e) => {
     const { name, value } = e.target;
@@ -120,15 +95,15 @@ export default function MyPageEditPage() {
     {
       label: '직책',
       type: 'text',
-      name: 'job',
-      value: myInfo?.job || '',
+      name: 'position',
+      value: myInfo?.position || '',
       onChange: handleInfoChange,
     },
     {
       label: '부서',
       type: 'text',
-      name: 'team',
-      value: myInfo?.team || '',
+      name: 'department',
+      value: myInfo?.department || '',
       onChange: handleInfoChange,
     },
     {
@@ -161,56 +136,33 @@ export default function MyPageEditPage() {
     },
   ];
 
-  const saveCard = async () => {
-    const isCardCreated = Object.values(myInfo).some((value) => value);
-    const updatedData = isCardCreated
-      ? await putMyCard({ data: JSON.stringify(myInfo) })
-      : await postMyCard({ data: myInfo });
-    return updatedData;
-  };
-
   const handleEditComplete = async () => {
     try {
-      const updatedData = await saveCard();
-      console.log('Data saved successfully:', updatedData);
-      navigate('/mypage');
+      if (!myInfo?.id) {
+        console.log('POST 요청: 새 명함 생성');
+        await postMyCard({ data: updatedDataForm() });
+      } else {
+        console.log('PUT 요청: 명함 수정');
+        await putMyCard({ data: updatedDataForm() });
+      }
+      navigate('/mypage'); // 성공 시 페이지 이동
     } catch (error) {
-      console.error('사용자 정보를 저장하는 데 실패했습니다.', error);
+      console.error(
+        '데이터를 저장하는 중에 오류가 발생하였습니다.:',
+        error.response?.data || error.message
+      );
     }
   };
 
-  const handleEditClick = (field) => {
-    setIsEditing((prev) => ({
-      ...prev,
-      [field]: true,
-    }));
-  };
-
-  const handleBlur = (field) => {
-    setIsEditing((prev) => ({
-      ...prev,
-      [field]: false,
-    }));
-  };
-
-  const handleFocus = (field) => {
-    setIsEditing((prev) => ({
-      ...prev,
-      [field]: true,
-    }));
-  };
-
   const handleProfileImageClick = () => {
     profileImageInputRef.current.click();
   };
 
   const onUploadProfileImage = (event) => {
     const file = event.target.files[0];
-    setProfileImage(URL.createObjectURL(file));
+    setProfileImage(file);
   };
 
-  if (!myInfo) return <div>Loading...</div>;
-
   return (
     <S.MyEdit>
       <S.Header>
@@ -230,7 +182,7 @@ export default function MyPageEditPage() {
         <S.PicContainer>
           <S.ProfilePic
             style={{
-              backgroundImage: `url(${profileImage || myInfo.imageUrl})`,
+              backgroundImage: `url(${profileImage || myInfo.profImgUrl})`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
             }}
@@ -260,14 +212,16 @@ export default function MyPageEditPage() {
                 name='name'
                 value={myInfo.name}
                 onChange={handleInfoChange}
-                onBlur={() => handleBlur('name')}
-                onFocus={() => handleFocus('name')}
+                onBlur={() => setIsEditing({ ...isEditing, name: false })}
+                onFocus={() => setIsEditing({ ...isEditing, name: true })}
                 autoFocus
               />
             ) : (
               <>
                 <S.Name>{myInfo.name}</S.Name>
-                <S.PencilIcon onClick={() => handleEditClick('name')}>
+                <S.PencilIcon
+                  onClick={() => setIsEditing({ ...isEditing, name: true })}
+                >
                   <Icon id='pencil' fill='#FFF' />
                 </S.PencilIcon>
               </>
@@ -286,11 +240,11 @@ export default function MyPageEditPage() {
               label={field.label}
               type={field.type}
               name={field.name}
-              value={isEditing[field.name] ? field.value : ''}
-              placeholder={isEditing[field.name] ? '' : field.value}
+              value={field.value}
+              placeholder={field.value}
               onChange={field.onChange}
-              onBlur={() => handleBlur(field.name)}
-              onFocus={() => handleFocus(field.name)}
+              onBlur={() => setIsEditing({ ...isEditing, [field.name]: false })}
+              onFocus={() => setIsEditing({ ...isEditing, [field.name]: true })}
               autoFocus={isEditing[field.name]}
             />
           ))}

diff --git a/src/pages/ViewCardPage/ViewCardPage.jsx b/src/pages/ViewCardPage/ViewCardPage.jsx
@@ -96,7 +96,6 @@ export default function ViewCardPage() {
             <CardInfo
               id={data.id}
               key={index}
-              id={data.id}
               name={data.name}
               position={data.position}
               department={data.department}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as BadgeDetail } from './BadgeDetail';
		export { default as DetailBadge } from './BadgeDetail';