From 7ae5239f533b8681f426ce181541bea06e728895 Mon Sep 17 00:00:00 2001 From: subinsong01 Date: Thu, 7 Nov 2024 04:33:18 +0900 Subject: [PATCH] =?UTF-8?q?feat(#39):=20=EC=8B=A4=EC=A2=85=EB=93=B1?= =?UTF-8?q?=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/AxiosInstance.js | 3 +- src/components/Register/EditImg.jsx | 90 +++++++++++++++++++++++++++ src/components/Register/UploadImg.jsx | 3 +- src/pages/MyPage/MyPage.jsx | 35 ++++++++++- src/pages/MyPage/PetEditPage.jsx | 38 +++++++++-- src/pages/MyPage/RegisterMissing.jsx | 2 + 6 files changed, 161 insertions(+), 10 deletions(-) create mode 100644 src/components/Register/EditImg.jsx diff --git a/src/apis/AxiosInstance.js b/src/apis/AxiosInstance.js index 011972f..694717d 100644 --- a/src/apis/AxiosInstance.js +++ b/src/apis/AxiosInstance.js @@ -5,8 +5,9 @@ const token = tokenString ? JSON.parse(tokenString) : null; const Axios = axios.create({ - // eslint-disable-next-line no-undef + //eslint-disable-next-line no-undef baseURL: import.meta.env.VITE_BASE_URL, + headers: { Authorization: `Bearer ${token?.loginState?.data?.accessToken}`, "Content-Type": "application/json", diff --git a/src/components/Register/EditImg.jsx b/src/components/Register/EditImg.jsx new file mode 100644 index 0000000..cffbb77 --- /dev/null +++ b/src/components/Register/EditImg.jsx @@ -0,0 +1,90 @@ +import React from 'react'; +import styled from 'styled-components'; +import { TbCameraHeart } from "react-icons/tb"; + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 10px; +`; + +const InputFile = styled.label` + display: inline-block; + padding: 10px 20px; + background-color: #FFEFEF; + color: #FF6E00; + border-radius: 20px; + cursor: pointer; + font-size: 10px; + font-weight: bold; + transition: background-color 0.3s; + margin-top: -80px; + margin-left: 30px; +`; + +const HiddenInput = styled.input` + display: none; +`; +const ImageContainer = styled.div` + width: 150px; + height: 150px; + border-radius: 50%; + overflow: hidden; + background-color: #FFD3D3; + display: flex; + margin-left: 160px; + justify-content: center; + align-items: center; +`; +const StyledImage = styled.img` + width: 100%; + height: 110%; + border-radius: 50%; + object-fit: cover; +`; + +const CameraIcon = styled(TbCameraHeart)` + color: white; + font-size: 50px; +`; + +const UploadImg = ({ imgPath, setImgPath }) => { + const addImage = (e) => { + const files = e.target.files; + if (files.length > 0) { + const file = files[0]; + const fileType = file.type.split('/')[0]; + + if (fileType === 'image') { + setImgPath(file); + } else { + alert('이미지 파일만 업로드 가능합니다.'); + } + } + }; + + return ( + + + {imgPath instanceof File ? ( + + ) : ( + + )} + + + 수정 + + + + ); +}; + +export default UploadImg; \ No newline at end of file diff --git a/src/components/Register/UploadImg.jsx b/src/components/Register/UploadImg.jsx index a5a268d..4f49bb1 100644 --- a/src/components/Register/UploadImg.jsx +++ b/src/components/Register/UploadImg.jsx @@ -36,6 +36,7 @@ const ImageBox = styled.div` width: 150px; height: 150px; border-radius: 50%; + margin-left: 30px; background-color: #FFD3D3; overflow: hidden; border: 1px solid #FFD3D3; @@ -99,4 +100,4 @@ const UploadImg = ({ imgPath, setImgPath }) => { ); }; -export default UploadImg; +export default UploadImg; \ No newline at end of file diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx index b46d079..630c3a7 100644 --- a/src/pages/MyPage/MyPage.jsx +++ b/src/pages/MyPage/MyPage.jsx @@ -173,6 +173,13 @@ const OrderContainer = styled.div` margin-top: 20px; `; +const MissingStatus = styled.span` + color: red; + font-weight: bold; + font-size: 12px; + margin-top: 8px; +`; + const UserActiveInfo = styled.div` background-color: white; border: 1px solid #ddd; @@ -326,6 +333,14 @@ const PetAddButton = styled.button` } `; +const PetDeleteBtn = styled.button` + background-color: #ff6e00; + color: #fff; + border: none; + border-radius: 10px; + padding: 5px 10px; + font-size: 11px; +` function MyPage() { const navigate = useNavigate(); @@ -366,6 +381,18 @@ function MyPage() { const userId = localStorage.getItem('userId'); + const handleDeletePet = async (petId) => { + try { + await axios.delete(`/pets/${petId}`); + setFilteredPets(filteredPets.filter(pet => pet.petId !== petId)); + alert('펫이 삭제되었습니다.'); + } catch (error) { + console.error('펫 삭제 중 오류 발생:', error); + alert('펫 삭제에 실패했습니다.'); + } + }; + + const userActivities = [ { src: images.myActivity, alt: '내 활동', text: '내 활동' }, { src: images.bogwan, alt: '보관 게시글', text: '보관 게시글' }, @@ -410,7 +437,11 @@ function MyPage() { - + {`${pet.petName}의 {pet.petName}응애 @@ -425,6 +456,7 @@ function MyPage() { navigate(`/myPage/${userId}/editPetRegister/${pet.petId}`)}> 수정 + handleDeletePet(pet.petId)}>삭제 @@ -441,7 +473,6 @@ function MyPage() { - navigate('/orderList')} /> diff --git a/src/pages/MyPage/PetEditPage.jsx b/src/pages/MyPage/PetEditPage.jsx index a756541..6cf38e0 100644 --- a/src/pages/MyPage/PetEditPage.jsx +++ b/src/pages/MyPage/PetEditPage.jsx @@ -3,8 +3,10 @@ import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; import { CatList, DogList } from '../../components/Register/PetData'; import SelectBox from '../../components/Register/SelectBox'; -import UploadImg from '../../components/Register/UploadImg'; +import DisplayImg from '../../components/Register/DisplayImg'; import axios from '../../apis/AxiosInstance'; +import { useParams } from 'react-router-dom'; +import EditImg from '../../components/Register/EditImg'; const ScrollableContainer = styled.div` max-height: 100%; @@ -19,6 +21,25 @@ const Container = styled.div` margin-left: 5%; `; +const ImageWrapper = styled.div` + position: relative; + width: 150px; /* 이미지 너비 */ + height: 150px; /* 이미지 높이 */ + margin-bottom: 20px; /* 간격 조정 */ +`; + +const OverlayImage = styled.div` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +`; + + const Label = styled.label` font-size: 10px; color: #b3b3b3; @@ -80,7 +101,7 @@ const RegisterButton = styled.button` `; // 등록 버튼 const PetEditPage = () => { - const petId = 1; + const { petId } = useParams(); // URL에서 petId 가져오기 const navigate = useNavigate(); const [imgPath, setImgPath] = useState(''); @@ -121,7 +142,7 @@ const PetEditPage = () => { const petData = response.data; if (petData) { - setImgPath(`http://localhost:8080/uploads/${petData.petPicture}`); + setImgPath(petData.petPicture); setPetName(petData.petName); setBirthdate(petData.birthdate); setAge(calculateAge(petData.birthdate)); @@ -178,7 +199,7 @@ const PetEditPage = () => { }); if (response.status === 200) { alert('반려동물 수정이 완료되었습니다.'); - navigate('/userRegister'); + navigate('/myPage/:userId'); } else { alert('등록 중 오류가 발생했습니다. 다시 시도해주세요.'); } @@ -210,8 +231,13 @@ const PetEditPage = () => { return ( - - + + + + + + + handlePetTypeClick('강아지')}> diff --git a/src/pages/MyPage/RegisterMissing.jsx b/src/pages/MyPage/RegisterMissing.jsx index 9216c2d..7f595f7 100644 --- a/src/pages/MyPage/RegisterMissing.jsx +++ b/src/pages/MyPage/RegisterMissing.jsx @@ -198,6 +198,8 @@ const RegisterMissing = () => { const handleSubmit = async () => { const formData = new FormData(); + + const walkrouteId = 2; formData.append('petId', petId); formData.append('userId', userId);