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

Feat/#39
URECA-PODONG · Nov 7, 2024 · f214c56 · f214c56
2 parents c751b7b + 35276a8
commit f214c56
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 104 deletions.
diff --git a/src/components/Register/EditImg.jsx b/src/components/Register/EditImg.jsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
-import { TbCameraHeart } from "react-icons/tb";
 
 const Container = styled.div`
   display: flex;
@@ -10,47 +9,33 @@ const Container = styled.div`
   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;
+  overflow: hidden;
   display: flex;
-  margin-left: 160px;
+  margin-left: 78px;
+  margin-top: 50px;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 `;
+
 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 fileInputRef = useRef(null);
+
   const addImage = (e) => {
     const files = e.target.files;
     if (files.length > 0) {
@@ -65,26 +50,25 @@ const UploadImg = ({ imgPath, setImgPath }) => {
     }
   };
 
+  const handleClick = () => {
+    fileInputRef.current.click();
+  };
+
   return (
     <Container>
-      <ImageContainer>
-        {imgPath instanceof File ? ( 
+      <ImageContainer onClick={handleClick}>
+        {imgPath instanceof File && (
           <StyledImage src={URL.createObjectURL(imgPath)} alt="애완동물 사진" />
-        ) : (
-          <CameraIcon />
         )}
       </ImageContainer>
-      <InputFile htmlFor="inputForm">
-        수정
-        <HiddenInput
-          type="file"
-          id="inputForm"
-          accept="image/*" 
-          onChange={addImage} 
-        />
-      </InputFile>
+      <HiddenInput
+        type="file"
+        ref={fileInputRef}
+        accept="image/*" 
+        onChange={addImage} 
+      />
     </Container>
   );
 };
 
-export default UploadImg;
+export default UploadImg;
diff --git a/src/components/Register/UploadImg.jsx b/src/components/Register/UploadImg.jsx
@@ -19,6 +19,7 @@ const InputFile = styled.label`
   cursor: pointer;
   font-size: 10px;
   font-weight: bold;
+  margin-left: 15px;
   transition: background-color 0.3s;
   margin-top: -20px;
 `;
@@ -36,7 +37,7 @@ const ImageBox = styled.div`
   width: 150px;
   height: 150px;
   border-radius: 50%;
-  margin-left: 30px;
+  margin-left: 10px;
   background-color: #FFD3D3;
   overflow: hidden;
   border: 1px solid #FFD3D3;

diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -1,23 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { RxAvatar } from 'react-icons/rx';
-import { FaCircleUser } from 'react-icons/fa6';
 import { MdOutlineKeyboardArrowRight, MdOutlineArrowBack, MdOutlineArrowForward } from 'react-icons/md';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import axios from '../../apis/AxiosInstance';
 import { images } from '../../components/Images';
+import user from './user.png'
 import { ScrollableContainer, Container, MainContainer, UserInfo, EditButton } from './Sytles/MyPage';
 
-const StyledAvatar = styled(RxAvatar)`
-  font-size: 24px;
-  color: #ff6e00;
-  width: 64px;
-  height: 64px;
-  margin-top: 36px;
-  margin-left: 60px;
-  margin-bottom: 21px;
-`; //여기에 사용자 프로필 사진 불러와야함
-
 const SubContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -27,6 +17,14 @@ const SubContainer = styled.div`
   background-color: #f5f5f5;
 `;
 
+const Image = styled.img`
+  width: 120px;
+  height: auto;
+  margin-top: 30px;
+  margin-left: 50px;
+  margin-bottom: 20px;
+`;
+
 const PetProfile = styled.div`
   min-width: 290px;
   height: 180px;
@@ -41,7 +39,6 @@ const PetProfile = styled.div`
 
 const PetInfoFirstRow = styled.div`
   display: flex;
-  justify-content: space-between;
 `;
 
 const PetInfoSecondRow = styled.div`
@@ -70,6 +67,7 @@ const OrderReviewImage = styled.img`
   margin-left: 5px;
   margin-bottom: 5px;
   margin-top: 10px;
+  cursor: pointer;
 `;
 
 const OrderPointImage = styled.img`
@@ -97,14 +95,15 @@ const Coupon = styled.span`
 `;
 
 const ActivePetName = styled.p`
+  margin-top:10px;
   font-size: 15px;
   font-weight: bold;
   color: #ff6e00;
   margin-bottom: 7px;
 `;
 
 const ActivePetType = styled.p`
-  font-size: 10px;
+  font-size: 11px;
   color: #a9a9a9;
 `;
 
@@ -171,13 +170,6 @@ 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;
@@ -189,10 +181,11 @@ const UserActiveInfo = styled.div`
 const PetNameComment = styled.p`
   font-size: 15px;
   font-weight: bold;
+  margin-left: 7px;
 `;
 
 const ActivityText = styled.p`
-  font-size: 9px;
+  font-size: 10px;
   font-weight: normal;
   color: #000;
   margin-left: 6px;
@@ -215,7 +208,7 @@ const MissingHeader = styled.div`
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: bold;
 `;
 
@@ -228,7 +221,7 @@ const StyledArrowRight = styled(MdOutlineKeyboardArrowRight)`
 const MissingDetail = styled.div`
   display: flex;
   flex-direction: row;
-  font-size: 9px;
+  font-size: 10px;
   margin-top: 13px;
 `;
 
@@ -252,9 +245,8 @@ const MissingRegisterBtn = styled.button`
   color: black;
   border: none;
   border-radius: 5px;
-  font-size: 8px;
+  font-size: 10px;
   cursor: pointer;
-  margin-right: 20px;
   font-weight: normal;
 
   &:hover {
@@ -269,8 +261,8 @@ const PetEditBtn = styled.button`
   border: none;
   border-radius: 20px;
   cursor: pointer;
-  font-size: 8px;
-  margin-left: 10%;
+  font-size: 10px;
+  margin-left: 15%;
   font-weight: normal;
   transition: background-color 0.3s;
 
@@ -299,6 +291,7 @@ const LastComment = styled.span`
     font-weight: bold;
   }
 `;
+
 const NoPetsMessage = styled.div`
   font-size: 14px;
   font-weight: bold;
@@ -320,9 +313,14 @@ const NoPetsMessage = styled.div`
 
 const PetAddButton = styled.button`
     background-color: #D0D0D0;
-    transform: translateY(-2px); 
+    margin-left: 100px;
+    padding: 5px 10px;
+    margin-right:8px;
+    font-size: 11px;
+    border-radius: 10px;
+    color: #fff;
   
-  &:active {
+  &:hover {
     background-color: #D0D0D0;
     transform: translateY(0); 
 
@@ -331,13 +329,21 @@ const PetAddButton = styled.button`
 `;
 
 const PetDeleteBtn = styled.button`
-  background-color: #ff6e00;
+  background-color: #D0D0D0;
   color: #fff;
   border: none;
   border-radius: 10px;
   padding: 5px 10px;
   font-size: 11px;
-`
+  
+  &:hover {
+    background-color: #D0D0D0;
+    transform: translateY(0); 
+
+    background-color: #b0b0b0;
+  }
+`;
+
 function MyPage() {
   const navigate = useNavigate();
 
@@ -388,8 +394,7 @@ function MyPage() {
       alert('펫 삭제에 실패했습니다.');
     }
   };
-
-
+
   const userActivities = [
     { src: images.myActivity, alt: '내 활동', text: '내 활동' },
     { src: images.bogwan, alt: '보관 게시글', text: '보관 게시글' },
@@ -411,7 +416,7 @@ function MyPage() {
     <ScrollableContainer>
       <Container>
         <MainContainer>
-          <StyledAvatar />
+          <Image src={user} alt="사용자 아바타" />
           <UserInfo>
             {userData ? userData.nickname : '불러오는 중...'}
             <EditButton onClick={() => navigate(`/myPage/${userId}/editUserRegister/${userId}`)}>수정</EditButton>
@@ -431,13 +436,14 @@ function MyPage() {
                     <PetInfoFirstRow>
                       <PetNameComment>우리응애</PetNameComment>
                       <PetAddButton onClick={() => navigate(`/myPage/${userId}/petRegister`)}>추가</PetAddButton>
+                      <PetDeleteBtn onClick={() => handleDeletePet(pet.petId)}>삭제</PetDeleteBtn>
                     </PetInfoFirstRow>
 
                     <PetInfoSecondRow>
                     <img
                         src={pet.petPicture} 
                         alt={`${pet.petName}의 사진`} 
-                        style={{ width: '70px', height: '70px', borderRadius: '50%' }} 
+                        style={{ width: '80px', height: '80px', borderRadius: '50%', marginTop: '10px' }} 
                       />
                       <PetDetailInfo>
                         <ActivePetName>{pet.petName}응애</ActivePetName>
@@ -453,7 +459,6 @@ function MyPage() {
                           <PetEditBtn onClick={() => navigate(`/myPage/${userId}/editPetRegister/${pet.petId}`)}>
                             수정
                           </PetEditBtn>
-                            <PetDeleteBtn onClick={() => handleDeletePet(pet.petId)}>삭제</PetDeleteBtn>
                         </PetButton>
                       </PetDetailInfo>
                     </PetInfoSecondRow>
@@ -476,7 +481,7 @@ function MyPage() {
               <span>주문내역 </span>
             </OrderIconContainer>
             <OrderIconContainer>
-              <OrderReviewImage src={images.review} alt="결제내역" />
+              <OrderReviewImage src={images.review} alt="결제내역" onClick={()=> navigate('/paymentHistory')}/>
               <span>결제내역</span>
             </OrderIconContainer>
             <OrderIconContainer>