From eb7cb420d014de3c46cfa91ebccb8cd32e887268 Mon Sep 17 00:00:00 2001 From: kimhyerims Date: Tue, 24 Dec 2024 21:49:00 +0900 Subject: [PATCH] =?UTF-8?q?#99=20[FEAT]=20=EB=82=B4=20=EB=AA=85=ED=95=A8?= =?UTF-8?q?=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/myCard.js | 17 ++- src/components/BadgeDetail/BadgeDetail.jsx | 2 +- src/components/BadgeDetail/index.js | 2 +- src/components/index.js | 2 +- src/pages/MyPage/MyPage.jsx | 25 ++-- src/pages/MyPage/MyPage.style.jsx | 17 +++ src/pages/MyPageEditPage/MyPageEditPage.jsx | 138 +++++++------------- src/pages/ViewCardPage/ViewCardPage.jsx | 1 - 8 files changed, 95 insertions(+), 109 deletions(-) diff --git a/src/apis/myCard.js b/src/apis/myCard.js index 3d0e86f..f064bba 100644 --- 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 index 96edc33..57f8347 100644 --- 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 index 640c2b1..94b5db3 100644 --- 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 index 1ec8dbf..1e0a75c 100644 --- 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 index 319e0c9..a5c36a6 100644 --- 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() { - 프로필 사진 + + + + + 직책 / 부서 - {myInfo.job ? ( - myInfo.team ? ( - `${myInfo.job} / ${myInfo.team}` + {myInfo.position ? ( + myInfo.department ? ( + <> + {myInfo.position} / {myInfo.department} + ) : ( <> - {myInfo.job} /{' '} - 정보가 없습니다. + {myInfo.position} /{' '} + 정보가 없습니다. ) - ) : myInfo.team ? ( + ) : myInfo.department ? ( <> 정보가 없습니다. /{' '} - {myInfo.team} + {myInfo.department} ) : ( diff --git a/src/pages/MyPage/MyPage.style.jsx b/src/pages/MyPage/MyPage.style.jsx index 5ea222b..2738020 100644 --- 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 index afc00b6..9d93678 100644 --- 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
Loading...
; - return ( @@ -230,7 +182,7 @@ export default function MyPageEditPage() { handleBlur('name')} - onFocus={() => handleFocus('name')} + onBlur={() => setIsEditing({ ...isEditing, name: false })} + onFocus={() => setIsEditing({ ...isEditing, name: true })} autoFocus /> ) : ( <> {myInfo.name} - handleEditClick('name')}> + setIsEditing({ ...isEditing, name: true })} + > @@ -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 index f675f01..f09ee74 100644 --- a/src/pages/ViewCardPage/ViewCardPage.jsx +++ b/src/pages/ViewCardPage/ViewCardPage.jsx @@ -96,7 +96,6 @@ export default function ViewCardPage() {