From e21e6cd8660427d34d7f119ac9f3365fa79e74b8 Mon Sep 17 00:00:00 2001 From: Kim Junhee <100200965+junheekim61@users.noreply.github.com> Date: Mon, 23 Dec 2024 02:46:38 +0900 Subject: [PATCH 1/5] =?UTF-8?q?#118=20[FEAT]=20Axios=20Header=20Content-Ty?= =?UTF-8?q?pe=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20"multipart/form-data"?= =?UTF-8?q?=EB=A1=9C=20=EC=84=A4=EC=A0=95=20+=20json=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=20form-data=EB=A1=9C=20=EB=B0=94=EA=BE=B8=EB=8A=94=20=ED=9B=85?= =?UTF-8?q?=20=EC=B6=94=EC=B0=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/axios/index.js | 4 ++-- src/hooks/useFormData.js | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 src/hooks/useFormData.js diff --git a/src/axios/index.js b/src/axios/index.js index f675705..8bd09c5 100644 --- a/src/axios/index.js +++ b/src/axios/index.js @@ -6,7 +6,7 @@ export const authAxios = axios.create({ baseURL: VITE_SERVER_DOMAIN, withCredentials: true, headers: { - 'Content-Type': 'application/json', + 'Content-Type': 'multipart/form-data', }, }); @@ -19,7 +19,7 @@ const getTokenFromCookie = () => { }; const dummyToken = - '여기에 로그인 링크 타고 들어갔을 때 쿠키에 뜨는 토큰값을 넣어주세요'; + 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIzNzk4MDE1MDMxIiwicm9sZSI6IlVTRVIiLCJuaWNrbmFtZSI6Iuq5gOykgO2drCIsImlkIjozNzk4MDE1MDMxLCJleHAiOjE3MzQ4ODIzODIsImlhdCI6MTczNDg3ODc4MiwidXNlcm5hbWUiOiJlMGM3ODQ0OS05OWU4LTQ4NzQtOGI4MC0wNmVlOWY0ZTEyYTgifQ.PbM4bNztpBMv6HVI8l1HR5WEdpfRa26l1JkUOQvteBAZtMzsvTir31iNFF0MvhiMLcaQooxB81zxzvrEP-Wz_w'; // 요청을 보낼 때 Bearer Token을 Authorization 헤더에 추가합니다. authAxios.interceptors.request.use( diff --git a/src/hooks/useFormData.js b/src/hooks/useFormData.js new file mode 100644 index 0000000..d7cbef7 --- /dev/null +++ b/src/hooks/useFormData.js @@ -0,0 +1,18 @@ +import { useCallback } from 'react'; + +function useFormData(data) { + return useCallback(() => { + const formData = new FormData(); + + // 객체의 모든 키-값 쌍을 FormData에 추가 + for (let key in data) { + if (data.hasOwnProperty(key) && data[key]) { + formData.append(key, data[key]); + } + } + + return formData; + }, [data]); +} + +export default useFormData; From fcd9e341bec11021c7c00a43a3de7f21dd88ffa9 Mon Sep 17 00:00:00 2001 From: Kim Junhee <100200965+junheekim61@users.noreply.github.com> Date: Mon, 23 Dec 2024 02:47:00 +0900 Subject: [PATCH 2/5] =?UTF-8?q?#118=20[FEAT]=20=EB=AA=85=ED=95=A8=20?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EC=B9=B4=EB=93=9C=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ViewCardPage/ViewCardPage.jsx | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/pages/ViewCardPage/ViewCardPage.jsx b/src/pages/ViewCardPage/ViewCardPage.jsx index b0b1f9e..1bc81a7 100644 --- a/src/pages/ViewCardPage/ViewCardPage.jsx +++ b/src/pages/ViewCardPage/ViewCardPage.jsx @@ -1,14 +1,15 @@ import * as S from './ViewCardPage.style'; import { Header, SearchBar, BlueBadge, CardInfo } from '../../components'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import Icon from '../../components/Icon/Icon'; -import CARDS_SAMPLE_DATA from '../../constants/cardsSampleData'; +import { getCards } from '../../apis/cards'; export default function ViewCardPage() { const [activeBadge, setActiveBadge] = useState('전체 보기'); const [isEditCompleteVisible, setIsEditCompleteVisible] = useState(false); const [isDeleteMode, setIsDeleteMode] = useState(false); const [selectedCards, setSelectedCards] = useState([]); + const [cardsData, setCardsData] = useState([]); const badges = [ { label: '전체 보기', value: '전체 보기' }, { label: '비즈니스', value: '비즈니스' }, @@ -17,10 +18,23 @@ export default function ViewCardPage() { { label: '대학교', value: '대학교' }, ]; + async function fetchCards() { + try { + const response = await getCards(); + setCardsData(response.data.cards); + } catch (error) { + console.error('카드 리스트를 불러오지 못했습니다.', error); + } + } + + useEffect(() => { + fetchCards(); + }, []); + let filteredData = activeBadge === '전체 보기' - ? CARDS_SAMPLE_DATA - : CARDS_SAMPLE_DATA.filter((data) => data.category === activeBadge); + ? cardsData + : cardsData.filter((data) => data.category === activeBadge); // 이름을 기준으로 오름차순 정렬 filteredData = filteredData.sort((a, b) => a.name.localeCompare(b.name)); From a82762253c8c33f922ab7d5e1ada11c92a9e9a2a Mon Sep 17 00:00:00 2001 From: Kim Junhee <100200965+junheekim61@users.noreply.github.com> Date: Mon, 23 Dec 2024 08:18:13 +0900 Subject: [PATCH 3/5] =?UTF-8?q?#118=20[FEAT]=20=EB=AA=85=ED=95=A8=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20-=20=EC=83=81=EC=84=B8=EB=B3=B4=EA=B8=B0=20-=20?= =?UTF-8?q?=ED=8E=B8=EC=A7=91=EC=97=90=20get=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/cards.js | 7 + src/apis/index.js | 2 + src/components/CardInfo/CardInfo.jsx | 7 +- src/pages/CardDetailPage/CardDetailPage.jsx | 77 ++-- src/pages/DetailEditPage/DetailEditPage.jsx | 381 +++++------------- .../DetailEditPage/DetailEditPage.style.jsx | 2 +- src/pages/HomePage/HomePage.jsx | 1 + src/pages/ViewCardPage/ViewCardPage.jsx | 1 + 8 files changed, 172 insertions(+), 306 deletions(-) diff --git a/src/apis/cards.js b/src/apis/cards.js index 64aa786..93fce5b 100644 --- a/src/apis/cards.js +++ b/src/apis/cards.js @@ -7,6 +7,13 @@ export const getCards = async () => { return response; }; +// 단건 명함 조회 +export const getCardDetail = async ({ card_id }) => { + const response = await authAxios.get(`/cards/${card_id}`); + console.log(response.data.result); + return response; +}; + // 명함 생성 export const postCards = async ({ data }) => { const response = await authAxios.post(`/cards`, data); diff --git a/src/apis/index.js b/src/apis/index.js index 4b48e61..827152d 100644 --- a/src/apis/index.js +++ b/src/apis/index.js @@ -1 +1,3 @@ export { getGroupList, postGroup, deleteGroup, putGroup } from './group'; +export { getCards, getCardDetail, postCards, deleteCards, putCards, searchCards } from './cards'; +export { getMyCard, postMyCard, deleteMyCard, putMyCard } from './myCard'; diff --git a/src/components/CardInfo/CardInfo.jsx b/src/components/CardInfo/CardInfo.jsx index 4b1debb..6dacc11 100644 --- a/src/components/CardInfo/CardInfo.jsx +++ b/src/components/CardInfo/CardInfo.jsx @@ -5,8 +5,9 @@ import Icon from '../../components/Icon/Icon'; import { Link } from 'react-router-dom'; export default function CardInfo({ + id, name, - role, + job, company, imageUrl, isDeleteMode = false, @@ -30,7 +31,7 @@ export default function CardInfo({ {name} - {role} / {company} + {job} / {company} @@ -50,7 +51,7 @@ export default function CardInfo({ return isDeleteMode ? ( cardContent ) : ( - {cardContent} + {cardContent} ); } diff --git a/src/pages/CardDetailPage/CardDetailPage.jsx b/src/pages/CardDetailPage/CardDetailPage.jsx index 9697404..e227f75 100644 --- a/src/pages/CardDetailPage/CardDetailPage.jsx +++ b/src/pages/CardDetailPage/CardDetailPage.jsx @@ -1,14 +1,29 @@ -import React, { useState } from 'react'; +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 ProfileImgDefault from '../../assets/images/profile-img-default.svg'; import CARDS_SAMPLE_DATA from '../../constants/cardsSampleData'; +import { getCardDetail } from '../../apis/cards'; +import { useQuery } from '@tanstack/react-query'; export default function CardDetailPage() { + const [info, setInfo] = useState({}); + console.log(info); const { id } = useParams(); + const { data: inputData } = useQuery({ + queryKey: ['cardDetail', id], + queryFn: () => getCardDetail({ card_id: id }), + }); + + useEffect(() => { + if (inputData) { + setInfo(inputData.data); + } + }, [inputData]); + const badges = [ { label: '비즈니스', value: '비즈니스' }, { label: '방송사', value: '방송사' }, @@ -24,22 +39,22 @@ export default function CardDetailPage() { ? badges.filter((badge) => badge.value === filteredData.category) : []; - const data = filteredData || { - imageUrl: '', - name: '이름없음', - job: '직책없음', - team: '팀없음', - company: '회사없음', - phone: '전화번호없음', - email: '이메일없음', - tel: '유선전화없음', - address: '주소없음', - memo: '메모없음', - pic1: '사진없음', - pic2: '사진없음', - }; + // const data = filteredData || { + // imageUrl: '', + // name: '이름없음', + // job: '직책없음', + // team: '팀없음', + // company: '회사없음', + // phone: '전화번호없음', + // email: '이메일없음', + // tel: '유선전화없음', + // address: '주소없음', + // memo: '메모없음', + // pic1: '사진없음', + // pic2: '사진없음', + // }; - const profileImageUrl = data.imageUrl || ProfileImgDefault; + const profileImageUrl = info.profImgUrl || ProfileImgDefault; const activeBadge = filteredData ? filteredData.category : ''; @@ -69,16 +84,16 @@ export default function CardDetailPage() { - + - {data.name} + {info.name} - {data.job} / {data.team} + {info.job} / {info.team} - {data.company} + {info.company} @@ -90,7 +105,7 @@ export default function CardDetailPage() { 휴대폰 - {data.phone} + {info.phone} @@ -100,40 +115,40 @@ export default function CardDetailPage() { 이메일 - {data.email} + {info.email} 유선전화 - {data.tel} + {info.tel} 주소 - {data.address} + {info.address} 메모 - {data.memo} + {info.memo} 그룹 - {(data.pic1 || data.pic2) && ( + {(info.pic1 || info.pic2) && ( - handleImageClick(data.pic1)}> - 사진 1 + handleImageClick(info.pic1)}> + 사진 1 - {data.pic2 ? ( - handleImageClick(data.pic2)}> - 사진 2 + {info.pic2 ? ( + handleImageClick(info.pic2)}> + 사진 2 ) : ( diff --git a/src/pages/DetailEditPage/DetailEditPage.jsx b/src/pages/DetailEditPage/DetailEditPage.jsx index 058ba8b..80c532b 100644 --- a/src/pages/DetailEditPage/DetailEditPage.jsx +++ b/src/pages/DetailEditPage/DetailEditPage.jsx @@ -3,10 +3,10 @@ import { useParams, Link, useNavigate } from 'react-router-dom'; import * as S from './DetailEditPage.style'; import Icon from '../../components/Icon/Icon'; import { BlueBadge, AddGroupModal } from '../../components'; -import CARDS_SAMPLE_DATA from '../../constants/cardsSampleData'; import ProfileImgDefault from '../../assets/images/profile-img-default.svg'; -import { getGroupList } from '../../apis'; +import { getGroupList, getCardDetail } from '../../apis'; import { useQuery } from '@tanstack/react-query'; +import useFormData from '../../hooks/useFormData'; const InputWrapper = memo( ({ @@ -47,58 +47,70 @@ const InputWrapper = memo( export default function DetailEditPage() { const { id } = useParams(); + const navigate = useNavigate(); + const [activeBadge, setActiveBadge] = useState(null); + const [badges, setBadges] = useState([]); + const [profileImage, setProfileImage] = useState(null); + const [modalVisible, setModalVisible] = useState(false); + const [selectedImage, setSelectedImage] = useState({ + pic1: null, + pic2: null, + }); + const [info, setInfo] = useState({}); - const { - data: groupListData, - isLoading, - isError, - } = useQuery({ + const profileImageInputRef = useRef(null); + const profileImageInputRef1 = useRef(null); + const profileImageInputRef2 = useRef(null); + + const handleInfoChange = (e) => { + const { name, value } = e.target; + setInfo((prevInfo) => ({ + ...prevInfo, + [name]: value, + })); + }; + + // 입력할 데이터 + const InputData = [ + { label: '회사명', type: 'text', name: 'company', value: info.company, onChange: handleInfoChange }, + { label: '직책', type: 'text', name: 'job', value: info.job, onChange: handleInfoChange }, + { label: '부서', type: 'text', name: 'team', value: info.team, onChange: handleInfoChange }, + { label: '휴대폰', type: 'tel', name: 'phone', value: info.phone, onChange: handleInfoChange }, + { label: '이메일', type: 'email', name: 'email', value: info.email, onChange: handleInfoChange }, + { label: '유선전화', type: 'tel', name: 'tel', value: info.tel, onChange: handleInfoChange }, + { label: '주소', type: 'text', name: 'address', value: info.address, onChange: handleInfoChange }, + { label: '메모', type: 'text', name: 'memo', value: info.memo, onChange: handleInfoChange }, + ]; + + // 카드 상세 데이터 + const { data: inputData } = useQuery({ + queryKey: ['cardDetail', id], + queryFn: () => getCardDetail({ card_id: id }), + }); + + const profileImageUrl = profileImage || ProfileImgDefault; + + const { data: groupListData } = useQuery({ queryKey: ['groupList'], queryFn: () => getGroupList(), - // enabled: !!member_id, }); - const [badges, setBadges] = useState([]); - useEffect(() => { if (groupListData) { - console.log('groupListData: ', groupListData.data); const initialBadges = groupListData.data.map((group) => ({ - label: group.id, // or whatever label makes sense + label: group.id, value: group.name, })); - setBadges(initialBadges); // Set badges to the fetched groups + setBadges(initialBadges); } }, [groupListData]); - const filteredData = CARDS_SAMPLE_DATA.find( - (data) => data.name === decodeURIComponent(id) - ); - - // const [filteredBadges, setFilteredBadges] = useState(() => { - // return filteredData ? groupListData : []; - // }); - - const data = filteredData || { - imageUrl: '', - }; - - const [profileImage, setProfileImage] = useState(null); - - const [selectedImage, setSelectedImage] = useState({ - pic1: null, - pic2: null, - }); - - const profileImageInputRef = useRef(null); - const profileImageInputRef1 = useRef(null); - const profileImageInputRef2 = useRef(null); - - const onUploadImage = (e) => { - const files = Array.from(e.target.files || e.dataTransfer.files); - setSelectedImage(files); - }; + useEffect(() => { + if (inputData) { + setInfo(inputData.data); // inputData로부터 info 상태 업데이트 + } + }, [inputData]); const onUploadProfileImage = (e) => { const file = e.target.files[0]; @@ -111,19 +123,10 @@ export default function DetailEditPage() { profileImageInputRef.current.click(); }; - const handleFirstImageClick = () => { - profileImageInputRef1.current.click(); - }; - - const handleSecondImageClick = () => { - profileImageInputRef2.current.click(); - }; - const handleImageUpload = (e, target) => { const file = e.target.files[0]; if (file) { const newImageUrl = URL.createObjectURL(file); // 업로드된 파일의 URL 생성 - setSelectedImage((prev) => ({ ...prev, [target]: newImageUrl, // target(pic1, pic2)에 따라 상태 업데이트 @@ -131,155 +134,22 @@ export default function DetailEditPage() { } }; - const [myInfo, setMyInfo] = useState({ - name: filteredData.name, - job: filteredData.job, - company: filteredData.company, - team: filteredData.team, - }); - - const [myContact, setMyContact] = useState({ - phone: filteredData.phone, - email: filteredData.email, - tel: filteredData.tel, - address: filteredData.address, - memo: filteredData.memo, - }); - - const handleInfoChange = (e) => { - const { name, value } = e.target; - setMyInfo((prevInfo) => ({ - ...prevInfo, - [name]: value, - })); - }; - - const handleContactChange = (e) => { - const { name, value } = e.target; - setMyContact((prevContact) => ({ - ...prevContact, - [name]: value, - })); - }; - - const InputData = [ - { - label: '회사명', - type: 'text', - name: 'company', - value: myInfo.company, - onChange: handleInfoChange, - }, - { - label: '직책', - type: 'text', - name: 'job', - value: myInfo.job, - onChange: handleInfoChange, - }, - { - label: '부서', - type: 'text', - name: 'team', - value: myInfo.team, - onChange: handleInfoChange, - }, - { - label: '휴대폰', - type: 'tel', - name: 'phone', - value: myContact.phone, - onChange: handleContactChange, - }, - { - label: '이메일', - type: 'email', - name: 'email', - value: myContact.email, - onChange: handleContactChange, - }, - { - label: '유선전화', - type: 'tel', - name: 'tel', - value: myContact.tel, - onChange: handleContactChange, - }, - { - label: '주소', - type: 'text', - name: 'address', - value: myContact.address, - onChange: handleContactChange, - }, - { - label: '메모', - type: 'text', - name: 'memo', - value: myContact.memo, - onChange: handleContactChange, - }, - ]; - - 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 [isEditing, setIsEditing] = useState({ - name: false, - job: false, - company: false, - phone: false, - email: false, - tel: false, - address: false, - }); - - const navigate = useNavigate(); - - const handleEditComplete = () => { + const handleEditComplete = async () => { const updatedData = { - ...myInfo, - ...myContact, + ...info, group: activeBadge, }; - - console.log('Data saved successfully:', updatedData); - setIsEditing({ - name: false, - job: false, - company: false, - phone: false, - email: false, - tel: false, - address: false, - }); - navigate(`/card/${id}`); + try { + await putCards({ card_id: id, data: useFormData(updatedData) }); + navigate(`/card/${id}`); // 편집 완료 후 해당 카드 페이지로 리디렉션 + } catch (error) { + console.error('데이터를 저장하는 중에 오류가 발생하였습니다.:', error); + } }; - const profileImageUrl = profileImage || data.imageUrl || ProfileImgDefault; - - const [modalVisible, setModalVisible] = useState(false); - - const openModal = () => { - setModalVisible(true); + const putCards = async ({ card_id, data }) => { + const response = await authAxios.put(`/cards/${card_id}`, data); + return response; }; return ( @@ -326,30 +196,12 @@ export default function DetailEditPage() { - {isEditing.name ? ( - handleBlur('name')} - onFocus={() => handleFocus('name')} - autoFocus - /> - ) : ( - <> - {myInfo.name} - handleEditClick('name')}> - - - - )} + {info.name} - - 사진 아이콘을 클릭하여 명함에 들어갈 프로필 사진을 수정하세요 - + 사진 아이콘을 클릭하여 명함에 들어갈 프로필 사진을 수정하세요 + {InputData.map((field, index) => ( @@ -358,16 +210,13 @@ export default function DetailEditPage() { label={field.label} type={field.type} name={field.name} - value={isEditing[field.name] ? field.value : ''} - placeholder={isEditing[field.name] ? '' : field.value} + value={field.value} onChange={field.onChange} - onBlur={() => handleBlur(field.name)} - onFocus={() => handleFocus(field.name)} - autoFocus={isEditing[field.name]} /> ))} + 그룹 @@ -376,63 +225,53 @@ export default function DetailEditPage() { activeBadge={activeBadge} setActiveBadge={setActiveBadge} /> - - 그룹 수정 - - - - - {(data.pic1 || data.pic2) && ( - - - 사진 1 - - - handleImageUpload(e, 'pic1')} - /> - - - {data.pic2 ? ( - - 사진 2 + {/* 이미지 업로드 */} + + + 사진 1 + + profileImageInputRef1.current.click()} + /> + handleImageUpload(e, 'pic1')} + /> + + - - - handleImageUpload(e, 'pic2')} - /> - - - ) : ( - - )} - - )} + + 사진 2 + + profileImageInputRef2.current.click()} + /> + handleImageUpload(e, 'pic2')} + /> + + + + ( ( Date: Mon, 23 Dec 2024 09:06:24 +0900 Subject: [PATCH 4/5] =?UTF-8?q?#118=20[FEAT]=20=EB=AA=85=ED=95=A8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20&=20job=EC=9D=80=20position,=20team?= =?UTF-8?q?=EC=9D=80=20department=EB=A1=9C=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CardInfo/CardInfo.jsx | 9 +- src/pages/CardDetailPage/CardDetailPage.jsx | 2 +- src/pages/DetailEditPage/DetailEditPage.jsx | 92 +++++++++++++++------ src/pages/HomePage/HomePage.jsx | 4 +- src/pages/ViewCardPage/ViewCardPage.jsx | 4 +- 5 files changed, 79 insertions(+), 32 deletions(-) diff --git a/src/components/CardInfo/CardInfo.jsx b/src/components/CardInfo/CardInfo.jsx index 6dacc11..c566fb9 100644 --- a/src/components/CardInfo/CardInfo.jsx +++ b/src/components/CardInfo/CardInfo.jsx @@ -7,8 +7,8 @@ import { Link } from 'react-router-dom'; export default function CardInfo({ id, name, - job, - company, + position, + department, imageUrl, isDeleteMode = false, isSelected = false, @@ -31,7 +31,7 @@ export default function CardInfo({ {name} - {job} / {company} + {position} / {department} @@ -57,8 +57,9 @@ export default function CardInfo({ CardInfo.propTypes = { name: PropTypes.string.isRequired, - role: PropTypes.string.isRequired, company: PropTypes.string.isRequired, + position: PropTypes.string.isRequired, + department: PropTypes.string.isRequired, imageUrl: PropTypes.string, isDeleteMode: PropTypes.bool, isSelected: PropTypes.bool, diff --git a/src/pages/CardDetailPage/CardDetailPage.jsx b/src/pages/CardDetailPage/CardDetailPage.jsx index e227f75..9a264de 100644 --- a/src/pages/CardDetailPage/CardDetailPage.jsx +++ b/src/pages/CardDetailPage/CardDetailPage.jsx @@ -91,7 +91,7 @@ export default function CardDetailPage() { {info.name} - {info.job} / {info.team} + {info.position} / {info.department} {info.company} diff --git a/src/pages/DetailEditPage/DetailEditPage.jsx b/src/pages/DetailEditPage/DetailEditPage.jsx index 80c532b..78899a8 100644 --- a/src/pages/DetailEditPage/DetailEditPage.jsx +++ b/src/pages/DetailEditPage/DetailEditPage.jsx @@ -4,7 +4,7 @@ import * as S from './DetailEditPage.style'; import Icon from '../../components/Icon/Icon'; import { BlueBadge, AddGroupModal } from '../../components'; import ProfileImgDefault from '../../assets/images/profile-img-default.svg'; -import { getGroupList, getCardDetail } from '../../apis'; +import { getGroupList, getCardDetail, putCards } from '../../apis'; import { useQuery } from '@tanstack/react-query'; import useFormData from '../../hooks/useFormData'; @@ -73,14 +73,62 @@ export default function DetailEditPage() { // 입력할 데이터 const InputData = [ - { label: '회사명', type: 'text', name: 'company', value: info.company, onChange: handleInfoChange }, - { label: '직책', type: 'text', name: 'job', value: info.job, onChange: handleInfoChange }, - { label: '부서', type: 'text', name: 'team', value: info.team, onChange: handleInfoChange }, - { label: '휴대폰', type: 'tel', name: 'phone', value: info.phone, onChange: handleInfoChange }, - { label: '이메일', type: 'email', name: 'email', value: info.email, onChange: handleInfoChange }, - { label: '유선전화', type: 'tel', name: 'tel', value: info.tel, onChange: handleInfoChange }, - { label: '주소', type: 'text', name: 'address', value: info.address, onChange: handleInfoChange }, - { label: '메모', type: 'text', name: 'memo', value: info.memo, onChange: handleInfoChange }, + { + label: '회사명', + type: 'text', + name: 'company', + value: info.company, + onChange: handleInfoChange, + }, + { + label: '직책', + type: 'text', + name: 'position', + value: info.position, + onChange: handleInfoChange, + }, + { + label: '부서', + type: 'text', + name: 'department', + value: info.department, + onChange: handleInfoChange, + }, + { + label: '휴대폰', + type: 'tel', + name: 'phone', + value: info.phone, + onChange: handleInfoChange, + }, + { + label: '이메일', + type: 'email', + name: 'email', + value: info.email, + onChange: handleInfoChange, + }, + { + label: '유선전화', + type: 'tel', + name: 'tel', + value: info.tel, + onChange: handleInfoChange, + }, + { + label: '주소', + type: 'text', + name: 'address', + value: info.address, + onChange: handleInfoChange, + }, + { + label: '메모', + type: 'text', + name: 'memo', + value: info.memo, + onChange: handleInfoChange, + }, ]; // 카드 상세 데이터 @@ -108,7 +156,7 @@ export default function DetailEditPage() { useEffect(() => { if (inputData) { - setInfo(inputData.data); // inputData로부터 info 상태 업데이트 + setInfo(inputData.data); // inputData로부터 info 상태 업데이트 } }, [inputData]); @@ -134,24 +182,20 @@ export default function DetailEditPage() { } }; + // useFormData 훅을 컴포넌트 내에서 호출 + const updatedDataForm = useFormData({ + ...info, + group: activeBadge, + }); + const handleEditComplete = async () => { - const updatedData = { - ...info, - group: activeBadge, - }; try { - await putCards({ card_id: id, data: useFormData(updatedData) }); - navigate(`/card/${id}`); // 편집 완료 후 해당 카드 페이지로 리디렉션 + await putCards({ card_id: id, data: updatedDataForm() }); // updatedDataForm() 호출 + navigate(`/card/${id}`); // 편집 완료 후 해당 카드 페이지로 리디렉션 } catch (error) { console.error('데이터를 저장하는 중에 오류가 발생하였습니다.:', error); } }; - - const putCards = async ({ card_id, data }) => { - const response = await authAxios.put(`/cards/${card_id}`, data); - return response; - }; - return ( <> @@ -198,7 +242,9 @@ export default function DetailEditPage() { {info.name} - 사진 아이콘을 클릭하여 명함에 들어갈 프로필 사진을 수정하세요 + + 사진 아이콘을 클릭하여 명함에 들어갈 프로필 사진을 수정하세요 + diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx index f680dd4..0097379 100644 --- a/src/pages/HomePage/HomePage.jsx +++ b/src/pages/HomePage/HomePage.jsx @@ -92,8 +92,8 @@ export default function HomePage() { key={index} id={data.id} name={data.name} - role={data.role} - company={data.company} + position={data.position} + department={data.department} imageUrl={data.imageUrl} /> ))} diff --git a/src/pages/ViewCardPage/ViewCardPage.jsx b/src/pages/ViewCardPage/ViewCardPage.jsx index 7457b8f..fb826a2 100644 --- a/src/pages/ViewCardPage/ViewCardPage.jsx +++ b/src/pages/ViewCardPage/ViewCardPage.jsx @@ -97,8 +97,8 @@ export default function ViewCardPage() { key={index} id={data.id} name={data.name} - job={data.job} - team={data.team} + position={data.position} + department={data.department} company={data.company} imageUrl={data.imageUrl} isDeleteMode={isDeleteMode} From 32e486fc81a6162ec1853307d387e672841ea104 Mon Sep 17 00:00:00 2001 From: Kim Junhee <100200965+junheekim61@users.noreply.github.com> Date: Mon, 23 Dec 2024 09:14:28 +0900 Subject: [PATCH 5/5] =?UTF-8?q?#118=20[FEAT]=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A0=95=EB=B3=B4=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/axios/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/axios/index.js b/src/axios/index.js index 8bd09c5..b19abb7 100644 --- a/src/axios/index.js +++ b/src/axios/index.js @@ -19,7 +19,7 @@ const getTokenFromCookie = () => { }; const dummyToken = - 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIzNzk4MDE1MDMxIiwicm9sZSI6IlVTRVIiLCJuaWNrbmFtZSI6Iuq5gOykgO2drCIsImlkIjozNzk4MDE1MDMxLCJleHAiOjE3MzQ4ODIzODIsImlhdCI6MTczNDg3ODc4MiwidXNlcm5hbWUiOiJlMGM3ODQ0OS05OWU4LTQ4NzQtOGI4MC0wNmVlOWY0ZTEyYTgifQ.PbM4bNztpBMv6HVI8l1HR5WEdpfRa26l1JkUOQvteBAZtMzsvTir31iNFF0MvhiMLcaQooxB81zxzvrEP-Wz_w'; + '여기에 로그인 링크 타고 들어갔을 때 쿠키에 뜨는 토큰값을 넣어주세요'; // 요청을 보낼 때 Bearer Token을 Authorization 헤더에 추가합니다. authAxios.interceptors.request.use(