diff --git a/src/hooks/useFetchCoupons.jsx b/src/hooks/useFetchCoupons.jsx index 7fb9b0b..6ccf801 100644 --- a/src/hooks/useFetchCoupons.jsx +++ b/src/hooks/useFetchCoupons.jsx @@ -4,7 +4,7 @@ import commonApis from "../utils/commonApis"; const apiUrl = `/coupon`; const useFetchCoupons = () => { - const [coupons, setCoupons] = useState([]); + const [coupons, setCoupons] = useState(null); // null || [] const token = localStorage.getItem("accessToken"); useEffect(() => { @@ -12,8 +12,8 @@ const useFetchCoupons = () => { try { const response = await commonApis.get(apiUrl, { headers: { - Authorization: `Bearer ${token}` - } + Authorization: `Bearer ${token}`, + }, }); setCoupons(response.data.coupons); } catch (error) { diff --git a/src/pages/CouponPage/CouponPage.css b/src/pages/CouponPage/CouponPage.css index 25ba887..e89c609 100644 --- a/src/pages/CouponPage/CouponPage.css +++ b/src/pages/CouponPage/CouponPage.css @@ -51,28 +51,28 @@ line-height: 130%; /* 1.1375rem */ text-align: left; margin-left: 1.25rem; - margin-top: 0.81rem; + margin-top: 0.44rem; } - -.coupon-page__coupon-item__expirationDate { - color: #838383; +.coupon-page__coupon-item__Box { + margin-top: 0.44rem; + margin-left: 1.25rem; + margin-right: 1.25rem; font-family: "Pretendard Variable"; + text-align: left; font-weight: 600; font-size: 0.6875rem; + color: #838383; line-height: 130%; /* 0.89375rem */ - text-align: left; - margin-left: 1.25rem; - margin-top: 0.31rem; } - -.coupon-page__coupon-item__description { +.coupon-page__coupon-item__expirationDate { color: #838383; - font-family: "Pretendard Variable"; - font-weight: 600; - font-size: 0.6875rem; line-height: 130%; /* 0.89375rem */ - text-align: left; - margin-left: 1.25rem; +} + +.coupon-page__coupon-item__description { + width: 100%; + display: flex; + justify-content: space-between; } .coupon-page__empty { diff --git a/src/pages/CouponPage/CouponPage.jsx b/src/pages/CouponPage/CouponPage.jsx index 5ec73da..36b0e5c 100644 --- a/src/pages/CouponPage/CouponPage.jsx +++ b/src/pages/CouponPage/CouponPage.jsx @@ -1,9 +1,9 @@ import { useLocation, useNavigate } from "react-router-dom"; import Header from "../../components/views/Header/Header"; import Empty from "../../components/views/PageComponent/Empty"; +import Loading from "../../components/views/PageComponent/Loading"; import useFetchCoupons from "../../hooks/useFetchCoupons"; import "./CouponPage.css"; - const CouponPage = () => { const navigate = useNavigate(); const location = useLocation(); @@ -21,13 +21,17 @@ const CouponPage = () => { linkTo: storeId && inout && cartId ? `/payment?storeId=${storeId}&inout=${inout}&cartId=${cartId}` - // 쿠폰함은 멤버십페이지, 메인 페이지에서 접근 가능, 뒤로가기 시, window.history.back()을 하기 위해서 - : null, + : // 쿠폰함은 멤버십페이지, 메인 페이지에서 접근 가능, 뒤로가기 시, window.history.back()을 하기 위해서 + null, }} />
- {coupons && coupons.length > 0 ? ( + {coupons === null ? ( +
+ +
+ ) : coupons && coupons.length > 0 ? (
{coupons.map((item) => (
{ {item.couponName}
- {item.publisher} -
-
- 유효기간: {item.expirationDate?.split("T")[0]} + {item.publisher} 제공
-
- {item.description} + {/* 쿠폰 하단부 */} +
+
+ 유효기간: {item.expirationDate?.split("T")[0]} +
+
+ {item.description} + {item.leftCoupon &&
잔여 개수: {item.leftCoupon}
} +
))} diff --git a/src/pages/HomePage/Homepage.css b/src/pages/HomePage/Homepage.css index aed2a73..4ddfd8b 100644 --- a/src/pages/HomePage/Homepage.css +++ b/src/pages/HomePage/Homepage.css @@ -48,8 +48,16 @@ line-height: normal; margin-top: 1.06rem; margin-left: 2.19rem; + margin-right: 2.19rem; + justify-content: flex-end; + white-space: nowrap; } +.home_individual_point_margin{ + display: flex; + justify-content: flex-end; + width: 7.5rem; +} .home_individual_coupon_box { display: flex; justify-content: center; @@ -66,7 +74,6 @@ line-height: 130%; /* 0.975rem */ letter-spacing: -0.0075rem; margin-left: auto; - margin-right: 2.19rem; } .home_individual_quick_order { diff --git a/src/pages/HomePage/Homepage.jsx b/src/pages/HomePage/Homepage.jsx index e418aef..2249df8 100644 --- a/src/pages/HomePage/Homepage.jsx +++ b/src/pages/HomePage/Homepage.jsx @@ -49,7 +49,14 @@ const HomePage = () => { 님
- navigate(`/membership`)}> + navigate(`/membership`)} + > {point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} P