Merge pull request #84 from URECA-PODONG/feat/#39

Feat/#39
URECA-PODONG · Nov 6, 2024 · 72958fb · 72958fb
2 parents 0e2bd09 + 5728616
commit 72958fb
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 12 deletions.
diff --git 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
@@ -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 (
+    <Container>
+      <ImageContainer>
+        {imgPath instanceof File ? ( 
+          <StyledImage src={URL.createObjectURL(imgPath)} alt="애완동물 사진" />
+        ) : (
+          <CameraIcon />
+        )}
+      </ImageContainer>
+      <InputFile htmlFor="inputForm">
+        수정
+        <HiddenInput
+          type="file"
+          id="inputForm"
+          accept="image/*" 
+          onChange={addImage} 
+        />
+      </InputFile>
+    </Container>
+  );
+};
+
+export default UploadImg;
diff --git 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
@@ -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() {
                     </PetInfoFirstRow>
 
                     <PetInfoSecondRow>
-                      <FaCircleUser size={70} />
+                    <img
+                        src={pet.petPicture} 
+                        alt={`${pet.petName}의 사진`} 
+                        style={{ width: '70px', height: '70px', borderRadius: '50%' }} 
+                      />
                       <PetDetailInfo>
                         <ActivePetName>{pet.petName}응애</ActivePetName>
                         <ActivePetType>
@@ -423,6 +453,7 @@ function MyPage() {
                           <PetEditBtn onClick={() => navigate(`/myPage/${userId}/editPetRegister/${pet.petId}`)}>
                             수정
                           </PetEditBtn>
+                            <PetDeleteBtn onClick={() => handleDeletePet(pet.petId)}>삭제</PetDeleteBtn>
                         </PetButton>
                       </PetDetailInfo>
                     </PetInfoSecondRow>
@@ -439,7 +470,6 @@ function MyPage() {
               <MdOutlineArrowForward />
             </ArrowButton>
           </CardScrollableContainer>
-
           <OrderContainer>
             <OrderIconContainer>
               <OrderBagImage src={images.bag} alt="주문내역" onClick={() => navigate('/orderList')} />

diff --git 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 (
     <ScrollableContainer>
-      <Container>
-        <UploadImg imgPath={imgPath} setImgPath={setImgPath} />
+    <Container>
+        <ImageWrapper>
+          <DisplayImg imgPath={imgPath} />
+          <OverlayImage>
+            <EditImg imgPath={imgPath} setImgPath={setImgPath} />
+          </OverlayImage>
+        </ImageWrapper>
         <Label>어떤 반려동물과 함께하고 계신가요?</Label>
         <SelectButtonContainer>
           <SelectButton selected={selectedPetType === '강아지'} onClick={() => handlePetTypeClick('강아지')}>

diff --git 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 사용