Merge pull request #168 from Podo-Store/fix/upload-script

fix: 작품 등록하기 레이아웃 수정

Author: game240

src/App.css

@@ -25,3 +25,11 @@ textarea {
   /* 전역 설정 */
   font-family: "pretendard", "Apple SD Gothic Neo", Sans-serif !important;
 }
+
+button {
+  padding: 0;
+
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+}

src/assets/image/post/postingProcess.png

@@ -7,10 +7,9 @@ import "./../../styles/text.css";
  * 사용 시, 부모 요소 및 자매(sibling) 요소에 position: relative;를 설정해야 함.
  * @param {Object} props - Component properties
  * @param {function} props.onClose: 팝업을 닫을 때 호출할 함수
- * @param props.style - padding, left 사용 권장.
+ * @param {React.CSSProperties} props.style - padding, left 사용 권장.
  * @param {string} props.buttonId: 팝업을 띄우는 버튼의 id (e.g. "popup-btn2")
- *
- * @param {string} message - 팝업 메시지
+ * @param {React.ReactNode} message - 팝업 메시지 등의 React Node
  * @param {string} message2 - 두 번째 팝업 메시지 (존재 시 상단 구분 바 (---) 생성 및 아래에 출력)
  * @returns
  */
@@ -41,24 +40,24 @@ const InfoPopup = ({ message, onClose, style, buttonId, message2 }) => {
 
   return (
     <div className="info-popup" style={{ ...style }} ref={popupRef}>
-      {
-        // \n으로 구분된 문자열을 줄바꿈으로 나누어 출력
-        message.split("\n").map((line, index) => (
-          <p key={index} className="p-xs-regular c-black">
-            {/* PerformanceInfo 한정 사용 요소 */}
-            {line.includes("변경이 어려우니") ? (
-              <span>
-                {line.split("변경이 어려우니")[0]}
-                <span style={{ textDecoration: "underline" }}>변경이 어려우니</span>
-                {line.split("변경이 어려우니")[1]}
-              </span>
-            ) : (
-              line
-            )}
-            <br />
-          </p>
-        ))
-      }
+      {typeof message !== "string"
+        ? message
+        : // \n으로 구분된 문자열을 줄바꿈으로 나누어 출력
+          message.split("\n").map((line, index) => (
+            <p key={index} className="p-xs-regular c-black">
+              {/* PerformanceInfo 한정 사용 요소 */}
+              {line.includes("변경이 어려우니") ? (
+                <span>
+                  {line.split("변경이 어려우니")[0]}
+                  <span style={{ textDecoration: "underline" }}>변경이 어려우니</span>
+                  {line.split("변경이 어려우니")[1]}
+                </span>
+              ) : (
+                line
+              )}
+              <br />
+            </p>
+          ))}
       {message2 ? (
         <>
           <hr />

src/components/popup/InfoPopup.jsx

@@ -1,12 +1,13 @@
 import { Dialog, DialogContent } from "@mui/material";
 import axios from "axios";
 import Cookies from "js-cookie";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import FileInputBox from "../../components/file/FileInputBox";
 import AnimatedCheckedSvg from "@/components/loading/AnimatedCheckedSvg";
 import PartialLoading from "@/components/loading/PartialLoading";
+import InfoPopup from "@/components/popup/InfoPopup";
 
 import { SERVER_URL } from "../../constants/ServerURL";
 
@@ -31,20 +32,6 @@ const PostWork = () => {
   const [showPopup, setShowPopup] = useState(false);
   const popupRef = useRef(null);
 
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      // event.target이 popupRef.current의 child가 아닐 때
-      if (popupRef.current && !popupRef.current.contains(event.target)) {
-        setShowPopup(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
   const navigate = useNavigate();
 
   const onClickUpload = async () => {
@@ -133,9 +120,9 @@ const PostWork = () => {
                   </div>
                 </div>
 
-                <div class="arrow-box">
+                <div className="arrow-box">
                   <img src={doubleRiteIcon} alt="doubleRite" style={{ width: "30px" }} />
-                  <div class="divider"></div>
+                  <div className="divider"></div>
                 </div>
 
                 {/* 포도송이 */}
@@ -164,10 +151,39 @@ const PostWork = () => {
                 </div>
               </div>
             </div>
+
             <div>
-              <div className="upload-title">
+              <div className="upload-title items-center gap-[8px] relative">
                 <h6>작품 등록 신청</h6>
                 {/* 팝업 메뉴 */}
+                <button
+                  id="info-btn"
+                  className="w-fit h-[20px] box-border"
+                  onClick={() => setShowPopup(!showPopup)}
+                >
+                  <img src={infoBtn} alt="infoBtn" />
+                </button>
+                {showPopup && (
+                  <div ref={popupRef}>
+                    <InfoPopup
+                      message={
+                        <img
+                          className="popup-process"
+                          src={postingProcess2}
+                          alt="작품 등록 도식화"
+                        />
+                      }
+                      onClose={() => setShowPopup(!showPopup)}
+                      style={{
+                        top: "unset",
+                        bottom: "0",
+                        padding: "11px",
+                        transform: "translate(calc(113.75px + 8px + 20px + 5px), 0)",
+                      }}
+                      buttonId="info-btn"
+                    />
+                  </div>
+                )}
               </div>
 
               <FileInputBox
@@ -186,7 +202,9 @@ const PostWork = () => {
             </div>
           </div>
         </div>
-        <img className="right-side" src={postingProcess} alt="작품 등록 도식화"></img>
+        <div className="right-side">
+          <img src={postingProcess} alt="작품 등록 도식화"></img>
+        </div>
       </div>
     </div>
   );

src/pages/work/PostWork.jsx

@@ -3,7 +3,14 @@
 
 .post-work {
   width: 100vw;
-  height: 100vh;
+  // 이미지를 absolute로 설정하여 높이 직접 입력 필요
+  // height: fit-content;
+  @include r.media-desktop {
+    height: calc(58px + 938px);
+  }
+  @include r.media-laptop {
+    height: calc(75px + 869px);
+  }
 }
 
 .post-work .post-work-wrap {
@@ -20,7 +27,10 @@
 }
 
 .post-work .left-side {
+  flex: 1;
   @include r.media-laptop {
+    margin-left: 77px;
+    margin-right: 55px;
   }
   @include r.media-tablet {
     flex: 1;
@@ -32,13 +42,27 @@
 }
 
 .post-work .right-side {
-  width: 59.804%;
-  height: 100vh;
+  flex: 1;
+
+  position: relative;
   @include r.media-tablet {
     display: none;
   }
 }
 
+.post-work .right-side img {
+  position: absolute;
+  top: 58px;
+  right: 0;
+
+  @include r.media-laptop {
+    top: 75px;
+
+    width: 517px;
+    height: 869px;
+  }
+}
+
 .post-work .inside-field {
   display: flex;
   flex-direction: column;
@@ -50,7 +74,13 @@
 }
 
 .post-work .inside-field-title {
-  margin-top: 16.111vh;
+  margin-top: 174px;
+  @include r.media-laptop {
+    margin-top: 90px;
+  }
+  @include r.media-mobile {
+    margin-top: 50px;
+  }
 }
 
 .post-work .title h1 {
@@ -64,14 +94,18 @@
   line-height: 2.75rem; /* 122.222% */
 }
 
-.stage-info-container {
+.post-work .stage-info-container {
   width: 100%;
   height: auto;
 
   display: flex;
   flex-direction: column;
-  margin-top: 8.05556vh;
-  margin-bottom: 8.42592593vh;
+  margin-top: 87px;
+  margin-bottom: 66px;
+
+  @include r.media-mobile {
+    margin-top: 58px;
+  }
 
   .title {
     color: #000;
@@ -86,9 +120,18 @@
 
   .contants {
     display: grid;
-    margin-top: 4.907vh;
     grid-template-columns: 37fr 5fr 30fr 5fr 25fr;
+
+    margin-top: 4.907vh;
+
     height: 100%;
+
+    @include r.media-mobile {
+      grid-template-columns: 120px 30px 104px 30px 110px;
+    }
+    p {
+      white-space: nowrap;
+    }
   }
 
   .step {
@@ -104,6 +147,8 @@
       justify-content: center;
       margin-bottom: 1.9444vh;
 
+      box-sizing: border-box;
+
       p {
         color: #000;
 
@@ -116,11 +161,12 @@
       }
     }
     .info {
-      color: var(--ect-black, #000);
-      text-align: center;
       display: flex;
       flex-direction: column;
       gap: 2px;
+
+      color: var(--ect-black, #000);
+
       font-family: Pretendard;
       font-size: 0.875rem;
       font-style: normal;
@@ -139,24 +185,38 @@
   }
 }
 
-.arrow-box {
+/*
+ * 두 번째 .step .icon: 왼쪽에 있는 첫 번째 .step 하단의 text 길이에 의해 중앙 왜곡
+ * -> 대략 10px, ∴ 대략 절반 정도 좌측으로 translate.
+ */
+.post-work .contants .step:nth-child(3) .icon {
+  transform: translateX(-5px);
+}
+
+.post-work .arrow-box {
   position: relative;
 
+  @include r.media-mobile {
+    height: fit-content;
+  }
   img {
     margin-top: 50%;
   }
 }
 
-.divider {
+.post-work .divider {
   position: absolute;
   top: 60%;
   left: 50%;
   transform: translateX(-50%);
   height: 6.9444vh;
   border-left: 1px dashed #9e9e9e;
+  @include r.media-laptop {
+    display: none;
+  }
 }
 
-.TBD-info {
+.post-work .TBD-info {
   width: 200%;
   color: var(--ect-black, #000);
 
@@ -166,13 +226,20 @@
   font-style: normal;
   font-weight: 500;
   line-height: 20px; /* 142.857% */
+  text-align: center;
+  @include r.media-mobile {
+    width: fit-content;
+
+    transform: translateX(50%);
+  }
 }
 
 .post-work .upload-title {
   display: flex;
   align-items: center;
 
-  margin-bottom: 1.4815vh;
+  // FileInputBox에 상단 margin 존재 - 제거 예정, 0.63rem만큼의 차 필요
+  margin-bottom: calc(16px - 0.63rem);
 }
 
 .post-work .upload-title h6 {
@@ -196,7 +263,7 @@
   }
 }
 
-.post-work .upload-title .image-popup {
+.post-work .upload-title .post-work .upload-title .image-popup {
   position: absolute;
   top: 20px;
   left: 25px;
@@ -230,7 +297,7 @@
   @include m.purple-btn;
 
   width: 100%;
-  height: 4.444vh;
+  height: 48px;
 
   margin-top: 2.593vh;
 
@@ -255,3 +322,10 @@
   background: var(--Sub-2, #dadada);
   cursor: default;
 }
+
+.post-work .popup-process {
+  @include r.media-mobile {
+    width: 242px;
+    height: 402px;
+  }
+}