Merge pull request #94 from hhhhyelim/test

Feat: 쿠폰 발급 구현
readyvery · Nov 25, 2023 · d32a053 · d32a053
2 parents ff965fc + 64c08fe
commit d32a053
Show file tree

Hide file tree

Showing 10 changed files with 251 additions and 79 deletions.
diff --git a/public/images/event/dream_event_promotion.svg b/public/images/event/dream_event_promotion.svg
diff --git a/public/images/event/harang_event_promotion.svg b/public/images/event/harang_event_promotion.svg
diff --git a/public/images/event/home_event_banner.svg b/public/images/event/home_event_banner.svg
diff --git a/public/images/event/orda_event_promotion.svg b/public/images/event/orda_event_promotion.svg
diff --git a/public/images/event_banner.svg b/public/images/event_banner.svg
diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
@@ -15,7 +15,7 @@ const Header = ({ headerProps }) => {
               <div>
                 <Link
                   to={headerProps.linkTo}
-                  style={{ textDecoration: "none" }}
+                  style={{ textDecoration: "none", marginLeft: "10px" }}
                 >
                   <img src={arrow} alt="arrow" />
                 </Link>

diff --git a/src/pages/HomePage/Homepage.jsx b/src/pages/HomePage/Homepage.jsx
@@ -141,6 +141,7 @@ function Homepage() {
   }, []);
 
   const handleCouponClick = (couponCode, couponId) => {
+    console.log(couponCode, couponId);
     const config = {
       withCredentials: true,
     };
@@ -198,15 +199,24 @@ function Homepage() {
 
       {/* 이벤트 div */}
       <div className="event">
-        {eventBanner.map((item) => (
-          <img
-            key={item.idx}
-            src={item.bannerImg}
-            alt="eventBanner"
-            className="event-icon"
-            onClick={() => handleCouponClick(item.couponCode, item.couponId)}
-          />
-        ))}
+        {isLoggedIn
+          ? eventBanner.map((item) => (
+              <img
+                key={item.idx}
+                src={item.bannerImg}
+                alt="eventBanner"
+                className="event-icon"
+                onClick={() => handleCouponClick(item.couponCode, item.idx)}
+              />
+            ))
+          : eventBanner.map((item) => (
+              <img
+                key={item.idx}
+                src={item.bannerImg}
+                alt="eventBanner"
+                className="event-icon"
+              />
+            ))}
 
         {/* {eventCase[0].events.map((event) => (
           <img src={event.imgUrl} alt="event" className="event-icon" />

diff --git a/src/pages/MyPage/CouponPage/CouponPage.jsx b/src/pages/MyPage/CouponPage/CouponPage.jsx
@@ -52,7 +52,7 @@ function CouponPage() {
       <div className="coupon-list">
         <div className="coupon-list-box">
           {couponCheck.map((item) => (
-            <div className="coupon-item" key={item.idx}>
+            <div className="coupon-item">
               <div className="coupon-item-name">{item.couponName}</div>
               <div className="coupon-item-content">{item.publisher}</div>
               <div className="coupon-item-date">{item.expirationDate}</div>

diff --git a/src/pages/MyPage/EventingPage/EventingPage.jsx b/src/pages/MyPage/EventingPage/EventingPage.jsx
@@ -1,13 +1,13 @@
-// import React, { useEffect,useState } from "react";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick-theme.css";
 import "slick-carousel/slick/slick.css";
 import styled from "styled-components";
-import eventing1 from "../../../assets/images/eventing1.svg";
+//import eventing1 from "../../../assets/images/eventing1.svg";
+import axios from "axios";
 import Header from "../../../components/views/Header/Header";
 import "./EventingPage.css";
-//import axios from "axios";
 
 const StyleSlider = styled(Slider)`
   width: 100%;
@@ -23,31 +23,31 @@ const StyleSlider = styled(Slider)`
 `;
 
 const EventingImg = styled.img`
-  width: 284px;
-  height: 449px;
+  width: 17.75rem;
+  margin: 0 auto;
 `;
 
 function EventingPage() {
-  //const apiRoot = process.env.REACT_APP_API_ROOT;
+  const apiRoot = process.env.REACT_APP_API_ROOT;
 
-  const dummyEventingItems = [
-    {
-      events: [
-        {
-          idx: 1,
-          imgUrl: eventing1,
-        },
-        {
-          idx: 2,
-          imgUrl: eventing1,
-        },
-        {
-          idx: 3,
-          imgUrl: eventing1,
-        },
-      ],
-    },
-  ];
+  // const dummyEventingItems = [
+  //   {
+  //     events: [
+  //       {
+  //         idx: 1,
+  //         imgUrl: eventing1,
+  //       },
+  //       {
+  //         idx: 2,
+  //         imgUrl: eventing1,
+  //       },
+  //       {
+  //         idx: 3,
+  //         imgUrl: eventing1,
+  //       },
+  //     ],
+  //   },
+  // ];
 
   const settings = {
     dots: true,
@@ -58,21 +58,21 @@ function EventingPage() {
     centerMode: true,
   };
 
-  //const [mypageEventing, setMypageEventing] = useState([]);
-  // useEffect(() => {
-  //    const config = {
-  //     withCredentials: true,
-  //    };
-  //   axios
-  //   .get(`${apiRoot}/api/v1/event/main`, config)
-  //   .then((response) => {
-  //     setMypageEventing(response.data.events);
-  //   })
-  //   .catch((error) => {
-  //     console.log("Error fetching data:", error);
-  //   });
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, []);
+  const [mypageEventing, setMypageEventing] = useState([]);
+  useEffect(() => {
+    const config = {
+      withCredentials: true,
+    };
+    axios
+      .get(`${apiRoot}/api/v1/event/main`, config)
+      .then((response) => {
+        setMypageEventing(response.data.mainEvents);
+      })
+      .catch((error) => {
+        console.log("Error fetching data:", error);
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <div className="event-div">
@@ -84,16 +84,18 @@ function EventingPage() {
         }}
       />
       <div className="eventing-img">
-        <StyleSlider {...settings}>
+        {/* <StyleSlider {...settings}>
           {dummyEventingItems[0].events.map((event) => (
             <EventingImg src={event.imgUrl} alt="eventing" />
           ))}
+        </StyleSlider> */}
+        <StyleSlider {...settings}>
+          {mypageEventing.map((item) => (
+            <Link to={item.redirectUrl}>
+              <EventingImg src={item.imgUrl} alt="eventing" />
+            </Link>
+          ))}
         </StyleSlider>
-        {/* <StyleSlider {...settings}>
-        {mypageEventing.map((item) => (
-          <EventingImg key={item.idx} src={item.imgUrl} alt="eventing" />
-        ))}
-      </StyleSlider> */}
       </div>
     </div>
   );

diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
+import menuDelete from "../../assets/images/menu_delete.svg";
 import noImageMenu from "../../assets/images/no_image_menu.svg";
 import Header from "../../components/views/Header/Header";
 import "./PaymentPage.css";
-import menuDelete from "../../assets/images/menu_delete.svg";
 // import takeIn from "../../assets/images/take_in.svg";
 // import takeOut from "../../assets/images/take_out.svg";
 import { loadPaymentWidget } from "@tosspayments/payment-widget-sdk";