Merge pull request #138 from Podo-Store/dev

Dev

Author: game240

src/assets/image/button/circleInfoBlackBtn.svg

@@ -55,7 +55,10 @@ const FileInputBox = ({ title, infoText = "", onFileUpload, style, titleStyle })
 
   return (
     <div className="file-input-box">
-      <div className="title j-content-start a-items-center">
+      <div
+        className="title j-content-start a-items-center"
+        style={!title ? { marginTop: "0" } : {}}
+      >
         {title ? <p style={{ ...titleStyle }}>{title}</p> : null}{" "}
         {infoText ? (
           <>
@@ -70,7 +73,7 @@ const FileInputBox = ({ title, infoText = "", onFileUpload, style, titleStyle })
             />
             {showPopup ? (
               <InfoPopup
-                message={"작품 설명은 5페이지 이내의\n PDF 형식 파일만 가능해요."}
+                message={infoText}
                 onClose={() => {
                   setShowPopup(!showPopup);
                 }}

src/assets/image/post/postingProcess2.png

@@ -12,15 +12,18 @@
 .delete-complete .delete-complete-box {
   padding: 2.69rem 1.69rem;
 
+  width: 100%;
+
+  box-sizing: border-box;
   border-radius: 1.25rem;
   border: 2px dashed var(--Main, #9591f2);
 }
 
 .delete-complete .delete-complete-wrap img {
   position: absolute;
   top: 0;
-  left: 0;
-  transform: translate(-50%, -50%);
+  left: 27px;
+  transform: translate(0, -50%);
   background: #ffffff;
 }
 
@@ -41,7 +44,7 @@
 
   margin-top: 2.5rem;
 
-  width: 27rem;
+  width: 414px;
   height: 3rem;
 
   border: none;

src/components/file/FileInputBox.jsx

@@ -7,6 +7,8 @@ import EnterForm from "../../../components/EnterForm";
 
 import { SERVER_URL } from "../../../constants/ServerURL";
 
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+
 import "./ChangeEnter.scss";
 import "./../../../styles/text.css";
 
@@ -15,6 +17,10 @@ const AccountInfoChangeEnter = ({ setChangeShowPermission }) => {
   const [pwValid, setPwValid] = useState(false);
   const [showPwValid, setShowPwValid] = useState(false);
 
+  const {
+    widthConditions: { isMobile },
+  } = useWindowDimensions();
+
   const onClickInputBtn = async () => {
     try {
       const response = await axios.post(
@@ -60,6 +66,7 @@ const AccountInfoChangeEnter = ({ setChangeShowPermission }) => {
             }}
             errorFlag={showPwValid && !pwValid}
             errorMessage="비밀번호가 일치하지 않습니다."
+            style={isMobile ? { width: "332px" } : {}}
           ></AuthPwInputField>
           <button
             className="p-small-bold c-white t-align-center c-pointer"

src/pages/myPage/AccountDelete/AccountDeleteSuccess.scss

@@ -1,7 +1,7 @@
 import { Dialog, DialogContent } from "@mui/material";
 import axios from "axios";
 import Cookies from "js-cookie";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import FileInputBox from "../../components/file/FileInputBox";
@@ -10,7 +10,9 @@ import PartialLoading from "@/components/loading/PartialLoading";
 
 import { SERVER_URL } from "../../constants/ServerURL";
 
+import infoBtn from "@/assets/image/button/circleInfoBlackBtn.svg";
 import postingProcess from "../../assets/image/post/postingProcess.png";
+import postingProcess2 from "../../assets/image/post/postingProcess2.png";
 
 import "./PostWork.scss";
 
@@ -21,6 +23,24 @@ const PostWork = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [uploadSuccess, setUploadSuccess] = useState(false);
 
+  // Image popup
+  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 () => {
@@ -94,17 +114,21 @@ const PostWork = () => {
               <div className="upload-title">
                 <h6>작품 등록 신청</h6>
                 {/* 팝업 메뉴 */}
-                {/*
-                <img
-                  src={infoBtn}
-                  alt="infoBtn"
-                  onClick={(event) => {
-                    setShowPopup(true);
-                    const rect = event.target.getBoundingClientRect();
-                    setPopupPosition({ x: rect.left, y: rect.bottom });
-                  }}
-                />
-                */}
+
+                <div className="p-relative" style={{ height: "20px" }} ref={popupRef}>
+                  <img
+                    src={infoBtn}
+                    alt="i"
+                    onClick={(event) => {
+                      setShowPopup(!showPopup);
+                    }}
+                  />
+                  {showPopup && (
+                    <div className="image-popup f-center">
+                      <img src={postingProcess2} alt="" />
+                    </div>
+                  )}
+                </div>
               </div>
 
               <FileInputBox

src/pages/myPage/AccountInfoChange/ChangeEnter.jsx

@@ -1,4 +1,5 @@
 @use "./../../components/button/mixins.scss" as m;
+@use "./../../styles/_responsive.scss" as r;
 
 .post-work {
   width: 100vw;
@@ -18,6 +19,17 @@
 
 .post-work .left-side {
   flex: 0.85;
+
+  @include r.media-laptop {
+    margin-left: 90px;
+  }
+  @include r.media-tablet {
+    flex: 1;
+    margin-right: 90px;
+  }
+  @include r.media-mobile {
+    margin: 0 50px;
+  }
 }
 
 .post-work .right-side {
@@ -26,6 +38,10 @@
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
+
+  @include r.media-tablet {
+    display: none;
+  }
 }
 
 .post-work .inside-field {
@@ -69,9 +85,44 @@
   line-height: 1.75rem; /* 140% */
 }
 
-.post-work .upload-title img {
+.post-work .upload-title > img {
+  display: none;
+
   width: 1.75rem;
   cursor: pointer;
+  @include r.media-tablet {
+    display: block;
+  }
+}
+
+.post-work .upload-title .image-popup {
+  position: absolute;
+  top: 20px;
+  left: 25px;
+  z-index: 1;
+
+  width: 345px;
+  height: 553px;
+
+  background: #f5f5f5;
+  border: 1px solid #dadada;
+  border-radius: 0.625rem;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
+
+  transform: translateY(-100%);
+  @include r.media-mobile {
+    width: 268px;
+    height: 430px;
+  }
+}
+
+.post-work .upload-title .image-popup > img {
+  width: 315px;
+  height: 523px;
+  @include r.media-mobile {
+    width: 242px;
+    height: 402px;
+  }
 }
 
 .post-work .inside-field button#upload-btn {