Feat: 쿠폰함 잔여 개수, 로딩 중 추가

src/hooks/useFetchCoupons.jsx

@@ -4,16 +4,16 @@ 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(() => {
     const fetchCoupons = async () => {
       try {
         const response = await commonApis.get(apiUrl, {
           headers: {
-              Authorization: `Bearer ${token}`
-          }
+            Authorization: `Bearer ${token}`,
+          },
         });
         setCoupons(response.data.coupons);
       } catch (error) {

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 {

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,
         }}
       />
 
       <div className="coupon-page__coupon">
-        {coupons && coupons.length > 0 ? (
+        {coupons === null ? (
+          <div className="coupon-page__coupon-list">
+            <Loading />
+          </div>
+        ) : coupons && coupons.length > 0 ? (
           <div className="coupon-page__coupon-list">
             {coupons.map((item) => (
               <div
@@ -51,13 +55,17 @@ const CouponPage = () => {
                   {item.couponName}
                 </div>
                 <div className="coupon-page__coupon-item__publisher">
-                  {item.publisher}
-                </div>
-                <div className="coupon-page__coupon-item__expirationDate">
-                  유효기간: {item.expirationDate?.split("T")[0]}
+                  {item.publisher} 제공
                 </div>
-                <div className="coupon-page__coupon-item__description">
-                  {item.description}
+                {/* 쿠폰 하단부 */}
+                <div className="coupon-page__coupon-item__Box">
+                  <div className="coupon-page__coupon-item__expirationDate">
+                    유효기간: {item.expirationDate?.split("T")[0]}
+                  </div>
+                  <div className="coupon-page__coupon-item__description">
+                    {item.description}
+                    {item.leftCoupon && <div>잔여 개수: {item.leftCoupon}</div>}
+                  </div>
                 </div>
               </div>
             ))}

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 {

src/pages/HomePage/Homepage.jsx

@@ -49,7 +49,14 @@ const HomePage = () => {
                 님
               </div>
               <div className="home_individual_point">
-                <span onClick={() => navigate(`/membership`)}>
+                <span
+                  className={`${
+                    point.toString().length < 5
+                      ? `home_individual_point_margin`
+                      : ``
+                  }`}
+                  onClick={() => navigate(`/membership`)}
+                >
                   {point.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} P
                 </span>
                 <span