Fix : 프로모션 코드 UI UX 변경

Mallang-Trip · Jan 2, 2025 · b2c1b22 · b2c1b22
1 parent 691d2d0
commit b2c1b22
Showing 1 changed file with 25 additions and 17 deletions.
diff --git a/src/components/Promotion/index.tsx b/src/components/Promotion/index.tsx
@@ -7,7 +7,7 @@ import {
   memo,
 } from "react";
 import { POST } from "@/utils/axios";
-import { ConfirmModal } from "@/components";
+import { CheckModal, ConfirmModal } from "@/components";
 import clsx from "clsx";
 
 interface Props {
@@ -17,8 +17,9 @@ interface Props {
 
 function Promotion({ price, setPromotionId }: Props) {
   const [promotionCode, setPromotionCode] = useState("");
-  const [isApply, setIsApply] = useState(false);
+  const [showCheckModal, setShowCheckModal] = useState(false);
   const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [checkMsg, setCheckMsg] = useState("");
   const [confirmMsg, setConfirmMsg] = useState("");
 
   const disable = useMemo(() => promotionCode.length === 0, [promotionCode]);
@@ -30,9 +31,15 @@ function Promotion({ price, setPromotionId }: Props) {
         price: price,
       };
       const response = await POST("/promotion/check", body, true);
-      setConfirmMsg(response.payload ?? response.message);
-      setShowConfirmModal(true);
-      if (response.statusCode === 200) setIsApply(true);
+      if (response.payload) {
+        setCheckMsg(
+          `'${promotionCode}' 코드를 사용할 수 있어요. \n 프로모션 코드를 적용하시겠어요?`
+        );
+        setShowCheckModal(true);
+      } else {
+        setConfirmMsg(response.message);
+        setShowConfirmModal(true);
+      }
     } catch (e) {
       console.log(e);
     }
@@ -58,7 +65,7 @@ function Promotion({ price, setPromotionId }: Props) {
   }, [promotionCode]);
 
   return (
-    <div className="grid py-20 w-full sm:w-3/5 lg:w-2/5 mx-auto font-bold items-center gap-7">
+    <div className="grid py-20 w-full md:w-3/4 px-5 mx-auto font-bold items-center gap-7">
       <div className="flex gap-2">
         <p className="text-lg text-black">프로모션 코드</p>
         <p className="text-lg text-[#b4b4b4]">(선택)</p>
@@ -76,20 +83,21 @@ function Promotion({ price, setPromotionId }: Props) {
               disable ? "bg-[#cde5ff]" : "bg-primary"
             )}
           >
-            확인
-          </span>
-        </button>
-        <button onClick={handleApply} disabled={!isApply}>
-          <span
-            className={clsx(
-              "text-base text-white whitespace-nowrap rounded-[15px] px-5 py-[15px]",
-              isApply ? "bg-[#FE472E]" : "bg-[#FFD3CD]"
-            )}
-          >
-            적용
+            적용하기
           </span>
         </button>
       </div>
+      <CheckModal
+        showModal={showCheckModal}
+        setShowModal={setShowCheckModal}
+        message={checkMsg}
+        noText="취소"
+        yesText="적용하기"
+        yesHandler={() => {
+          setShowCheckModal(false);
+          handleApply();
+        }}
+      />
       <ConfirmModal
         showModal={showConfirmModal}
         setShowModal={setShowConfirmModal}