feat: 결제 페이지 UI 수정사항 반영 (#341)

Author: game240

src/components/popup/PolicyPopup.css

@@ -1,6 +1,5 @@
 .popup {
-  padding-top: 1.5rem;
-  padding-left: 1.5rem;
+  padding: 22px;
 
   position: absolute;
 
@@ -27,7 +26,7 @@
 }
 
 .popup img#close-btn {
-  transform: translate(-1rem, -0.7rem);
+  transform: translate(0, -0.7rem);
 }
 
 .popup div#content-wrap {

src/components/popup/PolicyPopup.jsx

@@ -20,16 +20,17 @@ const PolicyPopup = ({
   page = 0,
   isPerformSelected = true,
 }) => {
-  const { isSmallMobile } = useWindowDimensions().widthConditions;
-
+  const { isTablet, isMobile, isSmallMobile } =
+    useWindowDimensions().widthConditions;
+
+  /*
+   * 팝업 크기 수정 가이드
+   * - 추후 크기 관련 수정이 필요할 경우, page === 1 || page === 2일 때를 참고하여 refactor하는 것을 권장.
+   * - 만약 표시되는 위치를 바꾸기 위해 translate 요소를 조정할 경우, return 문의 <Draggable> 요소의 props를 수정할 것.
+   */
   const getPopupSize = (page, isPerformSelected) => {
     const width = window.innerWidth;
 
-    // 공연권 미선택 && 구매 관련 페이지
-    if (!isPerformSelected && (page === 1 || page === 2)) {
-      return { width: "413px", height: "273px", top: "0", left: "0" };
-    }
-
     if (page === 0) {
       if (!isSmallMobile) {
         return {
@@ -49,19 +50,44 @@ const PolicyPopup = ({
     }
 
     if (page === 1) {
-      if (!isSmallMobile) {
-        return { width: "413px", height: "465px", top: "0", left: "0" };
+      let size;
+      // 공연권 선택 X (= 구매자 정보 입력 란 X)일 경우
+      if (!isPerformSelected) {
+        if (!(isTablet || isMobile || isSmallMobile)) {
+          size = { width: "414px", height: "369px" };
+        } else if (isTablet) {
+          size = { width: "100%", height: "214px" };
+        } else if (isMobile) {
+          size = { width: "100%", height: "392px" };
+        } else {
+          size = { width: "100%", height: "540px" };
+        }
       } else {
-        return { width: "280px", height: "540px", top: "0", left: "0" };
+        if (!(isTablet || isMobile || isSmallMobile)) {
+          size = { width: "414px", height: "468px" };
+        } else if (isTablet) {
+          size = { width: "100%", height: "319px" };
+        } else if (isMobile) {
+          size = { width: "100%", height: "468px" };
+        } else {
+          size = { width: "100%", height: "540px" };
+        }
       }
+      return { ...size, top: "0", left: "0" };
     }
 
     if (page === 2) {
-      if (!isSmallMobile) {
-        return { width: "413px", height: "288px", top: "0", left: "0" };
+      let size;
+      if (!(isTablet || isMobile || isSmallMobile)) {
+        size = { width: "414px", height: "288px" };
+      } else if (isTablet) {
+        size = { width: "100%", height: "229px" };
+      } else if (isMobile) {
+        size = { width: "100%", height: "288px" };
       } else {
-        return { width: "280px", height: "384px", top: "0", left: "0" };
+        size = { width: "100%", height: "384px" };
       }
+      return { ...size, top: "0", left: "0" };
     }
 
     if (page === 3) {
@@ -101,11 +127,6 @@ const PolicyPopup = ({
   const getPopupContentsSize = (page, isPerformSelected) => {
     const width = window.innerWidth;
 
-    // 공연권 미선택 && 구매 관련 페이지
-    if (!isPerformSelected && (page === 1 || page === 2)) {
-      return { width: "369px", height: "179px" };
-    }
-
     if (page === 0) {
       if (!isSmallMobile) {
         return { width: "447.137px", height: "642px" };
@@ -114,20 +135,8 @@ const PolicyPopup = ({
       }
     }
 
-    if (page === 1) {
-      if (!isSmallMobile) {
-        return { width: "369px", height: "375px" };
-      } else {
-        return { width: "236px", height: "447px" };
-      }
-    }
-
-    if (page === 2) {
-      if (!isSmallMobile) {
-        return { width: "369px", height: "195px" };
-      } else {
-        return { width: "236px", height: "291px" };
-      }
+    if (page === 1 || page === 2) {
+      return { width: "100%", height: "calc(100% - 49px)" };
     }
 
     if (page === 3) {
@@ -159,11 +168,6 @@ const PolicyPopup = ({
   const getPopupContentsMaxSize = (page, isPerformSelected) => {
     const width = window.innerWidth;
 
-    // 공연권 미선택 && 구매 관련 페이지
-    if (!isPerformSelected && (page === 1 || page === 2)) {
-      return { maxHeight: "159px" };
-    }
-
     if (page === 0) {
       if (!isSmallMobile) {
         return { maxHeight: "620px" };
@@ -172,20 +176,8 @@ const PolicyPopup = ({
       }
     }
 
-    if (page === 1) {
-      if (!isSmallMobile) {
-        return { maxHeight: "350px" };
-      } else {
-        return { maxHeight: "419px" };
-      }
-    }
-
-    if (page === 2) {
-      if (!isSmallMobile) {
-        return { maxHeight: "159px" };
-      } else {
-        return { maxHeight: "263px" };
-      }
+    if (page === 1 || page === 2) {
+      return { maxHeight: "100%" };
     }
 
     if (page === 3) {
@@ -196,7 +188,15 @@ const PolicyPopup = ({
   };
 
   return (
-    <Draggable handle=".popup">
+    <Draggable
+      handle=".popup"
+      // translate 값
+      positionOffset={
+        page === 1 || page === 2
+          ? { x: 0, y: "calc(-100% - 10px)" }
+          : { x: 0, y: 0 }
+      }
+    >
       <div className="popup" style={getPopupSize(page, isPerformSelected)}>
         <div className="j-content-between">
           <div className="j-content-center a-items-center" id="title">

src/components/purchase/PurchaseCheckBox.jsx

@@ -53,7 +53,7 @@ const PurchaseCheckBox = ({ setCheckBoxCondition, isPerformSelected }) => {
   };
 
   return (
-    <div className="f-dir-column purchase-checkbox">
+    <div className="purchase-checkbox flex flex-col relative">
       {/* 개별 항목 체크박스 */}
       {items.map((item) => (
         <div className="a-items-center" id="checkbox-content" key={item.id}>
@@ -64,12 +64,17 @@ const PurchaseCheckBox = ({ setCheckBoxCondition, isPerformSelected }) => {
             id="checkbox"
             onClick={() => onChangeCheckbox(item.id)}
           />
-          <label className="p-small-medium c-pointer" onClick={() => onChangeCheckbox(item.id)}>
+          <label
+            className="p-small-medium cursor-pointer whitespace-nowrap"
+            onClick={() => onChangeCheckbox(item.id)}
+          >
             {item.name}
           </label>
           <p
-            className="p-xs-under c-pointer"
-            onClick={() => setShowPopup({ ...showPopup, [item.key]: !showPopup[item.key] })}
+            className="p-xs-under cursor-pointer whitespace-nowrap"
+            onClick={() =>
+              setShowPopup({ ...showPopup, [item.key]: !showPopup[item.key] })
+            }
           >
             자세히 보기
           </p>
@@ -78,7 +83,8 @@ const PurchaseCheckBox = ({ setCheckBoxCondition, isPerformSelected }) => {
               {React.cloneElement(item.popup, {
                 title: item.name,
                 detail: item.detail,
-                setShowPopup: (state) => setShowPopup({ ...showPopup, [item.key]: state }),
+                setShowPopup: (state) =>
+                  setShowPopup({ ...showPopup, [item.key]: state }),
                 page: item.id === 1 ? 1 : 2,
                 isPerformSelected,
               })}

src/components/purchase/PurchaseMethodBtn.tsx

@@ -0,0 +1,31 @@
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import SmallOnOffBtn from "../button/RoundBtn_135_40";
+
+interface PurchaseMethodBtnProps {
+  children: string;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+const PurchaseMethodBtn = ({
+  children,
+  isSelected,
+  onClick,
+}: PurchaseMethodBtnProps) => {
+  const { isTablet } = useWindowDimensions().widthConditions;
+  return (
+    <SmallOnOffBtn
+      color={isSelected ? "purple" : "grey"}
+      onClick={onClick}
+      style={{
+        width: !isTablet ? "108px" : "128px",
+        height: "36px",
+        border: isSelected ? "3px solid var(--purple-purple-7, #B489FF)" : "",
+      }}
+    >
+      {children}
+    </SmallOnOffBtn>
+  );
+};
+
+export default PurchaseMethodBtn;

src/constants/PopupTexts/PurchaseDetailTexts.js

@@ -28,7 +28,7 @@ export const PURCHASE_AGREEMENT = `제1조(목적)
 ② 권리자는 대상저작물이 다른 제3자의 저작권 등 지식재산권 및 기타의 권리를 침해하지 않음을 진술 및 보증한다.
 
 제9조(약관의 해지)
-① 당사자는 상대방이 정당한 이유 없이 본 약관을 위반하는 경우, 상당한 기간을 정하여 상대방에게 그 시정을 촉구하고, 상대방이 그 기간이 지나도록 의무 위반을 시정하지 아니하는 경우에는 약관을 해지할 수 있다. 다만, 상대방이 명백한 시정 거부의사를 표시하였거나 위반 사항의 성격상 시정이 불가능하다는 것이 명백히 인정되는 경우에는 촉구없이 약관을 해지할 수 있다
+① 당사자는 상대방이 정당한 이유 없이 본 약관을 위반하는 경우, 상당한 기간을 정하여 상대방에게 그 시정을 촉구하고, 상대방이 그 기간이 지나도록 의무 위반을 시정하지 아니하는 경우에는 약관을 해지할 수 있다. 다만, 상대방이 명백한 시정 거부의사를 표시하였거나 위반 사항의 성격상 시정이 불가능하다는 것이 명백히 인정되는 경우에는 촉구없이 약관을 해지할 수 있다.
 ② 권리자는 다음 각 호의 경우 본 약관을 즉시 해지할 수 있다.
 1. 이용자의 회생절차의 개시 결정
 2. 이용자의 파산선고
@@ -46,8 +46,7 @@ export const PURCHASE_AGREEMENT = `제1조(목적)
 제11조(손해배상) 
 당사자가 정당한 이유 없이 본 약관을 위반하는 경우, 그로 인하여 다른 당사자에게 발생한 모든 손해를 배상할 책임이 있다.
 
-제12조(불가항력) 천재지변, 전쟁, 폭동, 감염병 등의 불가항력적 사유로 당사자가 본 약관상 의무를 이행하지 못하거나 지체하는 경우에는 서로의 책임을 면제하며, 상호 합의
-하여 약관 내용을 공평하게 변경한다.
+제12조(불가항력) 천재지변, 전쟁, 폭동, 감염병 등의 불가항력적 사유로 당사자가 본 약관상 의무를 이행하지 못하거나 지체하는 경우에는 서로의 책임을 면제하며, 상호 합의하여 약관 내용을 공평하게 변경한다.
 
 제13조(분쟁해결) 
 ① 본 약관과 관련하여 분쟁이 발생한 경우 당사자는 상호 협의하여 분쟁을 해결하기 위하여 노력한다.
@@ -61,11 +60,6 @@ export const PURCHASE_AGREEMENT = `제1조(목적)
 본 약관에 명시되지 않은 사항은 당사자가 성의를 갖고 상호 협의를 통해 결정하되, 이견이 있을 경우에는 저작권법 등 관련 법령, 일반적인 상관례 및 약관 해석의 원칙에 따른다.
 `;
 
-export const REFUND_POLICY = ` 대본은 구매 후 청약철회가 불가합니다. 구매 시점부터
-1년간 자유롭게 다운로드 가능합니다.
+export const REFUND_POLICY = ` 대본은 구매 후 청약철회가 불가합니다. 구매 시점부터 1년간 자유롭게 다운로드 가능합니다.
 
- 공연권은 구매 후 2주 이내, 미 공연시에만 환불이
-가능합니다. 2주가 지나지 않았더라도 공연이
-이루어졌다면 환불이 불가합니다. 또한, 공연권 행사
-기간은 구매일로부터 1년 안에만 가능합니다. 1년 이내 미공연 시 공연권의 행사가 불가하오니 유의하시기
-바랍니다. `;
+공연권은 구매 후 2주 이내, 미 공연시에만 환불이 가능합니다. 2주가 지나지 않았더라도 공연이 이루어졌다면 환불이 불가합니다. 또한, 공연권 행사 기간은 구매일로부터 1년 안에만 가능합니다. 1년 이내 미공연 시 공연권의 행사가 불가하오니 유의하시기 바랍니다. `;

src/pages/payment/Purchase.jsx

@@ -32,6 +32,7 @@ import performImg from "./../../assets/image/post/list/perform.svg";
 import "./Purchase.scss";
 import "./../../styles/utilities.css";
 import AmountChangePurchase from "@/components/detail/AmountChangePurchase";
+import PurchaseMethodBtn from "@/components/purchase/PurchaseMethodBtn";
 
 const Purchase = () => {
   const [thumbnailImg, setThumbnailImg] = useState("");
@@ -60,6 +61,7 @@ const Purchase = () => {
   const [address, setAddress] = useState("");
   const [addressValid, setAddressValid] = useState(false);
 
+  const [method, setMethod] = useState(0); // 0: 계좌 이체, 1: 신용카드, 2: 가상계좌
   const [checkBoxCondition, setCheckBoxCondition] = useState({
     purchaseAgreement: false,
     refundPolicy: false,
@@ -353,43 +355,34 @@ const Purchase = () => {
                     <p className="p-medium-bold sm:p-large-bold whitespace-nowrap">
                       결제 방법
                     </p>
-                    {768 < width && width <= 1280 && (
-                      <p className="p-small-bold c-grey4 whitespace-nowrap">
-                        계좌 이체 방법은 메일로 전송됩니다.
-                      </p>
-                    )}
                   </div>
-                  <div className="btn-wrap d-flex">
-                    <SmallOnOffBtn
-                      style={{
-                        width: "108px",
-                        height: "36px",
-                        border: "3px solid var(--purple-purple-7, #B489FF)",
+                  <div className="btn-wrap grid grid-cols-[repeat(2,max-content)] gap-x-[24px] gap-y-[15px] sm:grid-cols-[repeat(3,max-content)] sm:gap-[19px] md:grid-cols-[repeat(2,max-content)] md:gap-x-[14px] md:gap-y-[26px] xl:grid-cols-[repeat(3,max-content)] xl:gap-[19px]">
+                    <PurchaseMethodBtn
+                      isSelected={method === 0}
+                      onClick={() => {
+                        setMethod(0);
                       }}
                     >
                       계좌 이체
-                    </SmallOnOffBtn>
-                    <SmallOnOffBtn
-                      disabled={true}
-                      style={{ width: "108px", height: "36px" }}
+                    </PurchaseMethodBtn>
+                    <PurchaseMethodBtn
+                      isSelected={method === 1}
+                      onClick={() => {
+                        setMethod(1);
+                      }}
                     >
-                      -
-                    </SmallOnOffBtn>
-                    {!isSmallMobile && (
-                      <SmallOnOffBtn
-                        disabled={true}
-                        style={{ width: "108px", height: "36px" }}
-                      >
-                        -
-                      </SmallOnOffBtn>
-                    )}
+                      신용카드
+                    </PurchaseMethodBtn>
+                    <PurchaseMethodBtn
+                      isSelected={method === 2}
+                      onClick={() => {
+                        setMethod(2);
+                      }}
+                    >
+                      가상계좌
+                    </PurchaseMethodBtn>
                   </div>
                 </div>
-                {(width <= 768 || width > 1280) && (
-                  <p className="p-12-bold sm:p-small-bold c-grey4 t-align-center">
-                    계좌 이체 방법은 메일로 전송됩니다.
-                  </p>
-                )}
               </div>
             </div>