콜만오가닉 로고 수정, 굿즈페이지 팝업 레이아웃 수정

Author: wowalswjd

public/img/sponserBox.png

@@ -55,7 +55,7 @@
 }
 
 /* 민정 팝업 수정 */
-#goodsModalBox {
+#goodsModalBox, #goodsModalBox_long {
     /* 모달 박스 */
     position: fixed;
     top: 50%;
@@ -143,7 +143,7 @@
 
 
 
-#goodsModalDetailDiv {
+#goodsModalDetailDiv, #goodsModalDetailDiv_long {
     /* 상세 이미지들 큰 묶음 */
     margin-top: 8vh;
 
@@ -181,6 +181,12 @@
         width: 90vw;
     }
 
+    #goodsModalBox_long {
+        /* 1, 2, 3번 굿즈의 경우 box높이를 길게 해줌 */
+        width: 90vw;
+        height: 85vh;
+    }
+
     #goodsModalInfo {
         display: flex;
         align-items: center;
@@ -221,12 +227,22 @@
         display: inline-block;
         width: 80vw;
         margin-bottom: 0;
+        margin-top: 6vh;
 
         /* 모바일 스크롤 */
         height: 70vw;
         overflow-y: scroll;
     }
 
+    #goodsModalDetailDiv_long {
+        display: inline-block;
+        width: 80vw;
+        margin-bottom: 0;
+        margin-top: 6vh;
+        height: 49vh;
+        overflow-y: scroll;
+    }
+
     #goodsModalDetailImg {
         width: 30vw;
         margin: 2vw;
@@ -235,4 +251,17 @@
     #goodsFloatingBtn {
         display: none;
     }
+}
+
+/* iphone SE 버전 */
+@media screen and (device-width: 375px) and (device-height: 667px) {
+    #goodsModalDetailDiv_long {
+        height: 40vh;
+    }
+}
+
+@media screen and (device-width: 360px) and (device-height: 740px) {
+    #goodsModalDetailDiv_long {
+        height: 52vh;
+    }
 }

src/views/goods/goodsDetailLayout.css

@@ -138,7 +138,7 @@ function GoodsLayout() {
     function GoodsModal() {
         return (
             // 모달창박스
-            <div id='goodsModalBox'>
+            <div id={pickedModalNum <=2 ? "goodsModalBox_long": "goodsModalBox"}>
                 {/* x 버튼 */}
                 <h1 id="goodsModalCloseBtn" onClick={() => { setIsOpenModal(false); }}>X</h1>
                 {/* 굿즈 설명 부분 */}
@@ -160,7 +160,7 @@ function GoodsLayout() {
                         </div>
                     </div>
                     {/* 상세 이미지 */}
-                    <div id="goodsModalDetailDiv">
+                    <div id={pickedModalNum <=2 ? "goodsModalDetailDiv_long": "goodsModalDetailDiv"}>
                         {(detailData[pickedModalNum].detailImg).map(data => (
                             <img id="goodsModalDetailImg" src={data} alt="" />
                         ))}