Merge pull request #166 from Podo-Store/fix/file-input-box-bug

fix: 작품 등록하기, 작품 관리 상세 페이지 FileInputBox 관련 버그 수정

Author: game240

src/components/file/FileInputBox.css

@@ -1,6 +1,6 @@
 .file-input-box {
   width: 100%;
-  height: 16.5741vh;
+  min-height: 16.5741vh;
 }
 .file-input-box .title {
   gap: 10px;
@@ -27,8 +27,7 @@
   height: 20px;
 
   /* #BABABA */
-  filter: invert(74%) sepia(13%) saturate(0%) hue-rotate(220deg) brightness(99%)
-    contrast(91%);
+  filter: invert(74%) sepia(13%) saturate(0%) hue-rotate(220deg) brightness(99%) contrast(91%);
 }
 
 .file-input-box .input-box-content {

src/components/file/FileInputBox.jsx

@@ -3,13 +3,25 @@ import { useCallback, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { useNavigate } from "react-router-dom";
 
+import InfoPopup from "../popup/InfoPopup";
+
 import download from "./../../assets/image/fileInput/download.svg";
 import inputCheck from "./../../assets/image/fileInput/inputCheck.svg";
 import circleInfoBtn from "./../../assets/image/button/circleInfoBtn.svg";
 
 import "./FileInputBox.css";
-import InfoPopup from "../popup/InfoPopup";
 
+/**
+ * 파일 입력 드래그 앤 드롭 기능 구현 component
+ * 주의: 'style' props로 입력 박스 높이 정해주어야 함.
+ * e.g. style={ height: "180px" }
+ * @param {string} title - 좌측 상단 제목
+ * @param {React.CSSProperties} titleStyle - 좌측 상단 제목 스타일
+ * @param {string} infoText - info 안내 텍스트
+ * @param {function} onFileUpload - 파일 업로드 시 callback function
+ * @param {React.CSSProperties} style - 입력 박스 스타일, 높이 정의 필수 - e.g. style={ height: "180px"}
+ * @returns
+ */
 const FileInputBox = ({ title, infoText = "", onFileUpload, style, titleStyle }) => {
   const [uploadedFile, setUploadedFile] = useState(null);
 
@@ -55,10 +67,7 @@ const FileInputBox = ({ title, infoText = "", onFileUpload, style, titleStyle })
 
   return (
     <div className="file-input-box">
-      <div
-        className="title"
-        style={!title ? { marginTop: "0" } : {}}
-      >
+      <div className="flex items-center title" style={!title ? { marginTop: "0" } : {}}>
         {title ? <p style={{ ...titleStyle }}>{title}</p> : null}{" "}
         {infoText ? (
           <>

src/pages/myPage/ScriptManageDetail.jsx

@@ -318,15 +318,19 @@ const ScriptManageDetail = () => {
                 </div>
               </div>
             </div>
-            <div className="description-wrap">
+            <div className="flex flex-col">
               <div className="a-items-center">
                 <FileInputBox
                   title="작품 설명"
                   infoText={"작품 설명은 5페이지 이내의\n PDF 형식 파일만 가능해요."}
                   onFileUpload={(file) => {
                     setUploadedFile(file);
                   }}
-                  style={!isMobile ? { width: "39.3125rem" } : { width: "430px" }}
+                  style={
+                    !isMobile
+                      ? { width: "39.3125rem", height: "180px" }
+                      : { width: "430px", height: "180px" }
+                  }
                   titleStyle={{
                     fontSize: "1rem",
                     fontStyle: "normal",

src/pages/work/PostWork.jsx

@@ -134,11 +134,7 @@ const PostWork = () => {
                 </div>
 
                 <div class="arrow-box">
-                  <img
-                    src={doubleRiteIcon}
-                    alt="doubleRite"
-                    style={{ width: "30px" }}
-                  />
+                  <img src={doubleRiteIcon} alt="doubleRite" style={{ width: "30px" }} />
                   <div class="divider"></div>
                 </div>
 
@@ -159,7 +155,7 @@ const PostWork = () => {
                   <img src={doubleRiteIcon} alt="doubleRite" />
                 </div>
 
-                {/*와인 */}
+                {/* 와인 */}
                 <div className="step">
                   <div className="icon">
                     <img src={wine} alt="wine" style={{ height: "43px" }} />
@@ -172,8 +168,6 @@ const PostWork = () => {
               <div className="upload-title">
                 <h6>작품 등록 신청</h6>
                 {/* 팝업 메뉴 */}
-
-                
               </div>
 
               <FileInputBox
@@ -183,23 +177,16 @@ const PostWork = () => {
                     setFileSelected(true);
                   }
                 }}
+                style={{ height: "180px" }}
               />
 
-              <button
-                id="upload-btn"
-                onClick={onClickUpload}
-                disabled={!fileSelected}
-              >
+              <button id="upload-btn" onClick={onClickUpload} disabled={!fileSelected}>
                 작품 보내기
               </button>
             </div>
           </div>
         </div>
-        <img
-          className="right-side"
-          src={postingProcess}
-          alt="작품 등록 도식화"
-        ></img>
+        <img className="right-side" src={postingProcess} alt="작품 등록 도식화"></img>
       </div>
     </div>
   );