diff --git a/src/apis/AxiosInstance.js b/src/apis/AxiosInstance.js index b011ba1..34f3701 100644 --- a/src/apis/AxiosInstance.js +++ b/src/apis/AxiosInstance.js @@ -4,9 +4,11 @@ const tokenString = sessionStorage.getItem("token"); const token = tokenString ? JSON.parse(tokenString) : null; const Axios = axios.create({ + // eslint-disable-next-line no-undef baseURL: import.meta.env.VITE_BASE_URL, withCredentials: true, + 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 fd7929a..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; diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx index 1e22a67..91efa7d 100644 --- a/src/pages/MyPage/MyPage.jsx +++ b/src/pages/MyPage/MyPage.jsx @@ -171,6 +171,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; @@ -314,8 +321,7 @@ const NoPetsMessage = styled.div` const PetAddButton = styled.button` background-color: #D0D0D0; transform: translateY(-2px); - } - + &:active { background-color: #D0D0D0; transform: translateY(0); @@ -324,6 +330,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(); @@ -364,6 +378,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: '보관 게시글' }, @@ -408,7 +434,11 @@ function MyPage() { - + {`${pet.petName}의 {pet.petName}응애 @@ -423,6 +453,7 @@ function MyPage() { navigate(`/myPage/${userId}/editPetRegister/${pet.petId}`)}> 수정 + handleDeletePet(pet.petId)}>삭제 @@ -439,7 +470,6 @@ function MyPage() { - navigate('/orderList')} /> diff --git a/src/pages/MyPage/PetEditPage.jsx b/src/pages/MyPage/PetEditPage.jsx index b1a011b..86ce21c 100644 --- a/src/pages/MyPage/PetEditPage.jsx +++ b/src/pages/MyPage/PetEditPage.jsx @@ -3,9 +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%; @@ -20,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; @@ -81,6 +101,7 @@ const RegisterButton = styled.button` `; // 등록 버튼 const PetEditPage = () => { + const navigate = useNavigate(); const { petId } = useParams(); const [imgPath, setImgPath] = useState(''); @@ -121,10 +142,7 @@ const PetEditPage = () => { const petData = response.data; if (petData) { - // S3 버킷 URL을 imgPath로 설정 - const imageURL = `https://sole-paradise.s3.ap-northeast-2.amazonaws.com/${petData.petPicture}`; - setImgPath(imageURL); - + setImgPath(petData.petPicture); setPetName(petData.petName); setBirthdate(petData.birthdate); setAge(calculateAge(petData.birthdate)); @@ -183,7 +201,7 @@ const PetEditPage = () => { if (response.status === 200) { alert('반려동물 수정이 완료되었습니다.'); - navigate('/userRegister'); + navigate('/myPage/:userId'); } else { alert('등록 중 오류가 발생했습니다. 다시 시도해주세요.'); } @@ -215,8 +233,13 @@ const PetEditPage = () => { return ( - - + + + + + + + handlePetTypeClick('강아지')}> diff --git a/src/pages/MyPage/RegisterMissing.jsx b/src/pages/MyPage/RegisterMissing.jsx index 70a84a5..eb5aead 100644 --- a/src/pages/MyPage/RegisterMissing.jsx +++ b/src/pages/MyPage/RegisterMissing.jsx @@ -173,6 +173,10 @@ const RegisterMissing = () => { }; const handleSubmit = async () => { const formData = new FormData(); + + + const walkrouteId = 2; + formData.append('petId', petId); formData.append('userId', userId); formData.append('walkroute', walkrouteId); // 가져온 walkrouteId 사용