Merge pull request #161 from imi21123/test

Feat: 최종 결제 금액, 결제 완료 페이지 레이아웃
readyvery · Dec 5, 2023 · 9cbe1f3 · 9cbe1f3
2 parents 321a3e8 + 5ec3e0c
commit 9cbe1f3
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx
@@ -98,7 +98,6 @@ const PaymentPage = () => {
         withCredentials: true,
       })
       .then((res) => {
-
         const paymentWidget = paymentWidgetRef.current;
 
         // ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
@@ -264,7 +263,6 @@ const PaymentPage = () => {
           <span className="payment-page__title">총 결제 금액</span>
           <span className="payment-page__total-price">
             {paymentData?.totalPrice &&
-              salePrice &&
               (paymentData.totalPrice - salePrice)
                 .toString()
                 .replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "원"}

diff --git a/src/pages/PaymentPage/Redirect/PaymentRedirectPage.css b/src/pages/PaymentPage/Redirect/PaymentRedirectPage.css
@@ -8,7 +8,7 @@
 
 .payment-redirect-page__berry {
   display: flex;
-  margin-top: 16.75rem;
+  margin-top: 10.75rem;
   margin-left: auto;
   margin-right: auto;
 }

diff --git a/src/pages/StoreDetailPage/StoreDetailPage.jsx b/src/pages/StoreDetailPage/StoreDetailPage.jsx
@@ -12,6 +12,8 @@ const StoreDetailPage = () => {
   const storeId = params.get("storeId");
   const inout = params.get("inout");
   const apiRoot = process.env.REACT_APP_API_ROOT;
+  // const scrollRef = useRef();
+  // const [isScrollable, setIsScrollable] = useState(false);
   const [caffeeInfo, setCaffeeInfo] = useState(null);
   const [selectedCategory, setSelectedCategory] = useState([]);
   const [menu, setMenu] = useState(null);
@@ -94,6 +96,41 @@ const StoreDetailPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // useEffect(() => {
+  //   const currentRef = scrollRef.current;
+
+  //   if (currentRef) {
+  //     const handleScroll = () => {
+  //       const scrollWidth = currentRef.scrollWidth;
+  //       const clientWidth = currentRef.clientWidth;
+  //       setIsScrollable(scrollWidth > clientWidth);
+  //     };
+
+  //     currentRef.addEventListener("scroll", handleScroll);
+
+  //     // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
+  //     return () => {
+  //       if (currentRef) {
+  //         currentRef.removeEventListener("scroll", handleScroll);
+  //       }
+  //     };
+  //   }
+  // }, []);
+
+  // const handleGoLeft = () => {
+  //   if (scrollRef.current) {
+  //     // 스크롤을 왼쪽으로 100px 이동
+  //     scrollRef.current.scrollLeft -= 100;
+  //   }
+  // };
+
+  // const handleGoRight = () => {
+  //   if (scrollRef.current) {
+  //     // 스크롤을 오른쪽으로 100px 이동
+  //     scrollRef.current.scrollLeft += 100;
+  //   }
+  // };
+
   return (
     <div className="store-detail-page">
       <Header
@@ -160,7 +197,9 @@ const StoreDetailPage = () => {
             src={goLeft}
             alt="L"
             className="store-detail-page__menuCategory__go-left"
+            // onClick={handleGoLeft}
           />
+
           <div className="store-detail-page__menuCategory-scroll">
             {menu && menu.menu && Array.isArray(menu.menu) ? (
               menu.menu.map((category, index) => (
@@ -180,10 +219,12 @@ const StoreDetailPage = () => {
               <p>Loading category...</p>
             )}
           </div>
+
           <img
             src={goRight}
             alt="R"
             className="store-detail-page__menuCategory__go-right"
+            // onClick={handleGoRight}
           />
         </div>