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}응애
@@ -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 사용