Skip to content

Commit 8fcc7c0

Browse files
authored
Merge pull request #166 from Podo-Store/fix/file-input-box-bug
fix: 작품 등록하기, 작품 관리 상세 페이지 FileInputBox 관련 버그 수정
2 parents 6f1433d + abbd99b commit 8fcc7c0

File tree

4 files changed

+27
-28
lines changed

4 files changed

+27
-28
lines changed

src/components/file/FileInputBox.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.file-input-box {
22
width: 100%;
3-
height: 16.5741vh;
3+
min-height: 16.5741vh;
44
}
55
.file-input-box .title {
66
gap: 10px;
@@ -27,8 +27,7 @@
2727
height: 20px;
2828

2929
/* #BABABA */
30-
filter: invert(74%) sepia(13%) saturate(0%) hue-rotate(220deg) brightness(99%)
31-
contrast(91%);
30+
filter: invert(74%) sepia(13%) saturate(0%) hue-rotate(220deg) brightness(99%) contrast(91%);
3231
}
3332

3433
.file-input-box .input-box-content {

src/components/file/FileInputBox.jsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,25 @@ import { useCallback, useState } from "react";
33
import { useDropzone } from "react-dropzone";
44
import { useNavigate } from "react-router-dom";
55

6+
import InfoPopup from "../popup/InfoPopup";
7+
68
import download from "./../../assets/image/fileInput/download.svg";
79
import inputCheck from "./../../assets/image/fileInput/inputCheck.svg";
810
import circleInfoBtn from "./../../assets/image/button/circleInfoBtn.svg";
911

1012
import "./FileInputBox.css";
11-
import InfoPopup from "../popup/InfoPopup";
1213

14+
/**
15+
* 파일 입력 드래그 앤 드롭 기능 구현 component
16+
* 주의: 'style' props로 입력 박스 높이 정해주어야 함.
17+
* e.g. style={ height: "180px" }
18+
* @param {string} title - 좌측 상단 제목
19+
* @param {React.CSSProperties} titleStyle - 좌측 상단 제목 스타일
20+
* @param {string} infoText - info 안내 텍스트
21+
* @param {function} onFileUpload - 파일 업로드 시 callback function
22+
* @param {React.CSSProperties} style - 입력 박스 스타일, 높이 정의 필수 - e.g. style={ height: "180px"}
23+
* @returns
24+
*/
1325
const FileInputBox = ({ title, infoText = "", onFileUpload, style, titleStyle }) => {
1426
const [uploadedFile, setUploadedFile] = useState(null);
1527

@@ -55,10 +67,7 @@ const FileInputBox = ({ title, infoText = "", onFileUpload, style, titleStyle })
5567

5668
return (
5769
<div className="file-input-box">
58-
<div
59-
className="title"
60-
style={!title ? { marginTop: "0" } : {}}
61-
>
70+
<div className="flex items-center title" style={!title ? { marginTop: "0" } : {}}>
6271
{title ? <p style={{ ...titleStyle }}>{title}</p> : null}{" "}
6372
{infoText ? (
6473
<>

src/pages/myPage/ScriptManageDetail.jsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -318,15 +318,19 @@ const ScriptManageDetail = () => {
318318
</div>
319319
</div>
320320
</div>
321-
<div className="description-wrap">
321+
<div className="flex flex-col">
322322
<div className="a-items-center">
323323
<FileInputBox
324324
title="작품 설명"
325325
infoText={"작품 설명은 5페이지 이내의\n PDF 형식 파일만 가능해요."}
326326
onFileUpload={(file) => {
327327
setUploadedFile(file);
328328
}}
329-
style={!isMobile ? { width: "39.3125rem" } : { width: "430px" }}
329+
style={
330+
!isMobile
331+
? { width: "39.3125rem", height: "180px" }
332+
: { width: "430px", height: "180px" }
333+
}
330334
titleStyle={{
331335
fontSize: "1rem",
332336
fontStyle: "normal",

src/pages/work/PostWork.jsx

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,7 @@ const PostWork = () => {
134134
</div>
135135

136136
<div class="arrow-box">
137-
<img
138-
src={doubleRiteIcon}
139-
alt="doubleRite"
140-
style={{ width: "30px" }}
141-
/>
137+
<img src={doubleRiteIcon} alt="doubleRite" style={{ width: "30px" }} />
142138
<div class="divider"></div>
143139
</div>
144140

@@ -159,7 +155,7 @@ const PostWork = () => {
159155
<img src={doubleRiteIcon} alt="doubleRite" />
160156
</div>
161157

162-
{/*와인 */}
158+
{/* 와인 */}
163159
<div className="step">
164160
<div className="icon">
165161
<img src={wine} alt="wine" style={{ height: "43px" }} />
@@ -172,8 +168,6 @@ const PostWork = () => {
172168
<div className="upload-title">
173169
<h6>작품 등록 신청</h6>
174170
{/* 팝업 메뉴 */}
175-
176-
177171
</div>
178172

179173
<FileInputBox
@@ -183,23 +177,16 @@ const PostWork = () => {
183177
setFileSelected(true);
184178
}
185179
}}
180+
style={{ height: "180px" }}
186181
/>
187182

188-
<button
189-
id="upload-btn"
190-
onClick={onClickUpload}
191-
disabled={!fileSelected}
192-
>
183+
<button id="upload-btn" onClick={onClickUpload} disabled={!fileSelected}>
193184
작품 보내기
194185
</button>
195186
</div>
196187
</div>
197188
</div>
198-
<img
199-
className="right-side"
200-
src={postingProcess}
201-
alt="작품 등록 도식화"
202-
></img>
189+
<img className="right-side" src={postingProcess} alt="작품 등록 도식화"></img>
203190
</div>
204191
</div>
205192
);

0 commit comments

Comments
 (0)