Merge pull request #75 from URECA-PODONG/feat/#4

Feat/#4
URECA-PODONG · Nov 6, 2024 · ab843cd · ab843cd
2 parents 9f13a61 + 718ffb1
commit ab843cd
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 41 deletions.
diff --git a/src/components/common/SideNav.jsx b/src/components/common/SideNav.jsx
@@ -9,6 +9,7 @@ const SideNav = () => {
   const [isScrolled, setIsScrolled] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
+  const userId = localStorage.getItem('userId');
 
   useEffect(() => {
     const handleScroll = () => {
@@ -38,12 +39,10 @@ const SideNav = () => {
     { path: '/community', title: '커뮤니티' },
     { path: '/communityDetail', title: '상세 정보' },
     { path: '/communityWrite', title: '커뮤니티 작성' },
-    { path: '/myPage/editUserRegister', title: '회원 정보 수정' },
-    { path: '/myPage/editPetRegister', title: '응애 정보 수정' },
-    { path: '/myPage/missingRegister', title: '실종 등록' },
-    { path: '/myPage/missingSave', title: '실종 등록 완료' },
-    {path : '/petRegister', title: '우리응애 등록'},
-    {path : '/userRegister/:userId', title: '회원정보 등록'},
+    { path: `/myPage/${userId}/editUserRegister`, title: '회원 정보 수정' },
+    { path: `/myPage/${userId}/editPetRegister`, title: '응애 정보 수정' },
+    { path: `/myPage/${userId}/missingRegister`, title: '실종 등록' },
+    { path: `/myPage/${userId}/missingSave`, title: '실종 등록 완료' },
     { path: '/myPage', title: '마이 페이지' },
     { path: '/orderList/orderDetail/orderCancel', title: '주문 취소' },
     { path: '/orderList/orderDetail', title: '주문 상세' },

diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -62,6 +62,7 @@ const OrderBagImage = styled.img`
   margin-left: 5px;
   margin-bottom: 5px;
   margin-top: 10px;
+  cursor: pointer;
 `;
 
 const OrderReviewImage = styled.img`
@@ -299,18 +300,18 @@ const NoPetsMessage = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 50px 0; 
+  margin: 50px 0;
   text-align: center;
 
   p {
-    margin-bottom: 20px; 
+    margin-bottom: 20px;
     font-size: 16px;
     color: #555;
   }
 `;
 
 const PetAddButton = styled.button`
-  background-color: #D0D0D0;
+  background-color: #d0d0d0;
   color: #fff;
   border: none;
   border-radius: 10px;
@@ -321,7 +322,7 @@ const PetAddButton = styled.button`
   transition: background-color 0.3s ease, transform 0.2s ease;
 
   &:hover {
-    background-color: #B0B0B0;
+    background-color: #b0b0b0;
   }
 `;
 
@@ -389,9 +390,7 @@ function MyPage() {
           <StyledAvatar />
           <UserInfo>
             {userData ? userData.nickname : '조금만 기다려 주세요'}
-            <EditButton onClick={() => navigate(`/myPage/${userId}/editUserRegister/${userId}`)}>
-              수정
-          </EditButton>
+            <EditButton onClick={() => navigate(`/myPage/${userId}/editUserRegister/${userId}`)}>수정</EditButton>
           </UserInfo>
         </MainContainer>
 
@@ -411,7 +410,7 @@ function MyPage() {
                     </PetInfoFirstRow>
 
                     <PetInfoSecondRow>
-                      <FaCircleUser size={70}  />
+                      <FaCircleUser size={70} />
                       <PetDetailInfo>
                         <ActivePetName>{pet.petName}응애</ActivePetName>
                         <ActivePetType>
@@ -432,10 +431,10 @@ function MyPage() {
                   </PetProfile>
                 ))
               ) : (
-                  <NoPetsMessage>
-                    <p>등록된 펫이 없습니다</p>
-                    <PetAddButton onClick={() => navigate(`/myPage/${userId}/petRegister`)}>펫 등록하기</PetAddButton>
-                  </NoPetsMessage>
+                <NoPetsMessage>
+                  <p>등록된 펫이 없습니다</p>
+                  <PetAddButton onClick={() => navigate(`/myPage/${userId}/petRegister`)}>펫 등록하기</PetAddButton>
+                </NoPetsMessage>
               )}
             </CardContainer>
             <ArrowButton direction="right" onClick={() => scroll('right')}>
@@ -445,7 +444,7 @@ function MyPage() {
 
           <OrderContainer>
             <OrderIconContainer>
-              <OrderBagImage src={images.bag} alt="주문내역" />
+              <OrderBagImage src={images.bag} alt="주문내역" onClick={() => navigate('/orderList')} />
               <span>주문내역 </span>
             </OrderIconContainer>
             <OrderIconContainer>

diff --git a/src/pages/OrderPage/OrderList.jsx b/src/pages/OrderPage/OrderList.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { IoMdSearch } from 'react-icons/io';
 import axios from '../../apis/AxiosInstance';
+import { useNavigate } from 'react-router-dom';
 
 const statuses = {
   inTransit: '배송 중',
@@ -12,6 +13,7 @@ const statuses = {
 const OrderList = () => {
   const [products, setProducts] = useState([]);
   const [searchTerm, setSearchTerm] = useState('');
+  const navigate = useNavigate();
 
   const userId = localStorage.getItem('userId');
 
@@ -29,16 +31,6 @@ const OrderList = () => {
     }
   };
 
-  // 주문 상세 정보를 가져오는 함수
-  const handleOrderDetail = async orderId => {
-    try {
-      const response = await axios.get(`/order/detail/${orderId}`);
-      console.log('주문 상세 정보:', response.data);
-    } catch (error) {
-      console.error('주문 상세 정보 조회 실패:', error);
-    }
-  };
-
   useEffect(() => {
     fetchOrderList();
   }, []);
@@ -84,7 +76,7 @@ const OrderList = () => {
             <ButtonWrapper>
               <OrderButton>배송 조회</OrderButton>
               <OrderButton>재구매</OrderButton>
-              <OrderButton onClick={() => handleOrderDetail(product.orderId)}>주문 상세</OrderButton>
+              <OrderButton onClick={() => navigate('/orderList/orderDetail')}>주문 상세</OrderButton>
             </ButtonWrapper>
           </OrderCard>
         </OrderContainer>

diff --git a/src/pages/PaymentPage/PaymentHistory.jsx b/src/pages/PaymentPage/PaymentHistory.jsx
@@ -100,6 +100,17 @@ const CardItem = styled.div`
   align-items: center;
 `;
 
+const StyleStrong = styled.div`
+  white-space: nowrap;
+  width: 60px;
+`;
+
+const StyledSpan = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 const PaymentHistory = () => {
   const userId = localStorage.getItem('userId');
   const [payments, setPayments] = useState([]);
@@ -147,43 +158,43 @@ const PaymentHistory = () => {
         {payments.map((payment, index) => (
           <Card key={index}>
             <CardItem>
-              <strong>결제 상태 :</strong>
+              <StyleStrong>결제 상태 :</StyleStrong>
               <span>{payment.payStatus}</span>
             </CardItem>
             <CardItem>
-              <strong>주문 날짜 :</strong>
+              <StyleStrong>주문 날짜 :</StyleStrong>
               <span>{new Date(payment.createdAt).toLocaleString()}</span>
             </CardItem>
             <CardItem>
-              <strong>주문 번호 :</strong>
+              <StyleStrong>주문 번호 :</StyleStrong>
               <span>{payment.merchantId}</span>
             </CardItem>
             <CardItem>
-              <strong>상품명 :</strong>
-              <span>{payment.payName}</span>
+              <StyleStrong>상품명 :</StyleStrong>
+              <StyledSpan>{payment.payName.replace(/<[^>]*>/g, '')}</StyledSpan>
             </CardItem>
             <CardItem>
-              <strong>결제 수단 :</strong>
+              <StyleStrong>결제 수단 :</StyleStrong>
               <span>{payment.payMethod}</span>
             </CardItem>
             <CardItem>
-              <strong>금액 :</strong>
+              <StyleStrong>금액 :</StyleStrong>
               <span>{payment.payAmount.toLocaleString()} 원</span>
             </CardItem>
             <CardItem>
-              <strong>카드명 :</strong>
+              <StyleStrong>카드명 :</StyleStrong>
               <span>{payment.cardName}</span>
             </CardItem>
             <CardItem>
-              <strong>카드 번호 :</strong>
+              <StyleStrong>카드 번호 :</StyleStrong>
               <span>{payment.cardNumber}</span>
             </CardItem>
             <CardItem>
-              <strong>할부 개월 수:</strong>
+              <StyleStrong>할부 개월 수:</StyleStrong>
               <span>{payment.installmentMonths}</span>
             </CardItem>
             <CardItem>
-              <strong>PG사명:</strong>
+              <StyleStrong>PG사명:</StyleStrong>
               <span>{payment.pg}</span>
             </CardItem>
           </Card>