fix: PolicyPopup 안뜨는 현상 수정 (#384)

Author: goodsmell

src/components/popup/PolicyPopup.css

@@ -1,10 +1,15 @@
 .popup-overlay {
-  position: fixed;
   inset: 0;
-  
+
   z-index: 999; /* 팝업보다 작게, 팝업은 1000이라 위에 옴 */
 }
 
+.popup-overlay-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+}
+
 .popup {
   padding: 22px;
 
@@ -44,6 +49,7 @@
 }
 
 .popup img#close-btn {
+  z-index: 1000;
   transform: translate(0, -0.7rem);
 }
 

src/components/popup/PolicyPopup.jsx

@@ -9,9 +9,16 @@ import "./../../styles/text.css";
 import "./../../styles/utilities.css";
 
 /**
- * @param {object} props
- * @param {number} props.page - 0: "회원가입 페이지", 1: "구매 페이지 中 구매 조건", 2: "구매 페이지 中 환불 유의사항"
- * @param {string} props.isPerformSelected - 구매 페이지에서 공연권 선택 여부
+ * PolicyPopup 컴포넌트 Props 설명
+ * @param {string} title - 팝업 상단에 표시될 제목
+ * @param {string} detail - 본문 내용 (줄바꿈은 \n 기준으로 나눔)
+ * @param {function} setShowPopup - 팝업 표시/숨김을 제어하는 state setter
+ * @param {number} page - 팝업이 어떤 페이지에서 쓰이는지 구분하기 위한 값
+ *   0: "회원가입 페이지"
+ *   1: "구매 페이지 中 구매 조건"
+ *   2: "구매 페이지 中 환불 유의사항"
+ *   3: (추가로 정의한 다른 페이지 용도)
+ * @param {boolean} isPerformSelected - 구매 페이지에서 공연권 선택 여부
  */
 const PolicyPopup = ({
   title,
@@ -23,9 +30,12 @@ const PolicyPopup = ({
   const { isTablet, isMobile, isSmallMobile } =
     useWindowDimensions().widthConditions;
 
+  const isFullScreenMobile = isSmallMobile || isMobile;
+  // ✅ page 상관 없이 모바일이면 fullscreen
+
   useEffect(() => {
     // ✅ 모바일 + 회원가입 약관 페이지(page 0)일 때만 body 스크롤 막기
-    if (!(page === 0 && isSmallMobile)) return;
+    if (!isFullScreenMobile) return;
 
     const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -43,46 +53,37 @@ const PolicyPopup = ({
   const getPopupSize = (page, isPerformSelected) => {
     const width = window.innerWidth;
 
+    if (isFullScreenMobile) {
+      return {
+        width: "100vw",
+        height: "100vh",
+        top: "0",
+        left: "0",
+      };
+    }
+
     if (page === 0) {
-      if (isSmallMobile) {
-        return {
-          width: "100vw",
-          height: "100vh",
-          top: "0",
-          left: "0",
-        };
-      } else {
-        return {
-          width: "500px",
-          height: "735px",
-          top: "80px",
-          left: "calc(50% - 250px)",
-        };
-      }
+      return {
+        width: "500px",
+        height: "735px",
+        top: "80px",
+        left: "calc(50% - 250px)",
+      };
     }
 
     if (page === 1) {
       let size;
-      // 공연권 선택 X (= 구매자 정보 입력 란 X)일 경우
       if (!isPerformSelected) {
-        if (!(isTablet || isMobile || isSmallMobile)) {
+        if (!isTablet) {
           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" };
+          size = { width: "100%", height: "214px" };
         }
       } else {
-        if (!(isTablet || isMobile || isSmallMobile)) {
+        if (!isTablet) {
           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" };
+          size = { width: "100%", height: "319px" };
         }
       }
       return { ...size, top: "0", left: "0" };
@@ -140,7 +141,7 @@ const PolicyPopup = ({
     const width = window.innerWidth;
 
     if (page === 0) {
-      if (isSmallMobile) {
+      if (isFullScreenMobile) {
         return { width: "100%", height: "calc(100% - 49px)" };
       }
       return { width: "447.137px", height: "642px" };
@@ -197,22 +198,27 @@ const PolicyPopup = ({
     return null;
   };
 
-  const isFullScreenMobile = page === 0 && isSmallMobile;
-
   return (
-    <div className="popup-overlay">
+    <div
+      className={`popup-overlay ${
+        isFullScreenMobile ? "popup-overlay-fullscreen" : ""
+      }`}
+    >
       <Draggable
         handle=".popup"
         disabled={isFullScreenMobile}
+        cancel="#close-btn"
         // translate 값
         positionOffset={
-          page === 1 || page === 2
-            ? { x: 0, y: "calc(-100% - 10px)" }
+          isFullScreenMobile
+            ? { x: 0, y: 0 } // ✅ 풀스크린일 때는 절대 안 밀어내기
+            : page === 1 || page === 2
+            ? { x: 0, y: "calc(-100% - 10px)" } // ✅ 데스크톱에서만 위로 띄우는 용도
             : { x: 0, y: 0 }
         }
       >
         <div
-          className={`popup ${isFullScreenMobile ? "popup-fullscreen" : ""}`}
+          className={`popup ${isFullScreenMobile ? "popup-fullscreen " : ""}`}
           style={getPopupSize(page, isPerformSelected)}
         >
           <div className="j-content-between">
@@ -225,6 +231,7 @@ const PolicyPopup = ({
               src={CloseBtn}
               alt="close"
               onClick={() => {
+                console.log("close");
                 setShowPopup(false);
               }}
             ></img>