Skip to content

Commit f340302

Browse files
goodsmellgoodsmell
authored
feat: 작품 등록하기 - 스테이지 시스템 안내 추가 (#143)
1 parent f60f3ca commit f340302

File tree

6 files changed

+172
-5
lines changed

6 files changed

+172
-5
lines changed

‎src/assets/image/post/Wine.png‎

1.85 KB
Loading

‎src/assets/image/post/ic_double_right.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/image/post/ic_podoal.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/image/post/ic_podosongi.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/pages/work/PostWork.jsx‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ import { SERVER_URL } from "../../constants/ServerURL";
1313
import infoBtn from "@/assets/image/button/circleInfoBlackBtn.svg";
1414
import postingProcess from "../../assets/image/post/postingProcess.png";
1515
import postingProcess2 from "../../assets/image/post/postingProcess2.png";
16+
import podoalIcon from "../../assets/image/post/ic_podoal.svg";
17+
import podoSongIIcon from "../../assets/image/post/ic_podosongi.svg";
18+
import wine from "../../assets/image/post/Wine.png";
19+
import doubleRiteIcon from "../../assets/image/post/ic_double_right.svg";
1620

1721
import "./PostWork.scss";
1822

@@ -110,12 +114,70 @@ const PostWork = () => {
110114
<h1>작품을</h1>
111115
<h1>등록해주세요!</h1>
112116
</div>
117+
118+
<div className="stage-info-container">
119+
<h5 className="title">스테이지 시스템 안내</h5>
120+
121+
<div className="contants">
122+
{/* 포도알 */}
123+
<div className="step">
124+
<div className="icon">
125+
<img src={podoalIcon} alt="podoal" />
126+
<p>포도알</p>
127+
</div>
128+
<div className="info">
129+
<p>
130+
• 대본 가격 <span>무료</span>만 설정 가능
131+
</p>
132+
<p> • 공연권 가격 설정 가능</p>
133+
</div>
134+
</div>
135+
136+
<div class="arrow-box">
137+
<img
138+
src={doubleRiteIcon}
139+
alt="doubleRite"
140+
style={{ width: "30px" }}
141+
/>
142+
<div class="divider"></div>
143+
</div>
144+
145+
{/* 포도송이 */}
146+
<div className="step">
147+
<div className="icon">
148+
<img src={podoSongIIcon} alt="podoSongI" />
149+
<p>포도송이</p>{" "}
150+
</div>
151+
<div className="info">
152+
<div className="TBD-info">
153+
<p>• 추후 업데이트 예정</p>
154+
</div>
155+
</div>
156+
</div>
157+
158+
<div class="arrow-box">
159+
<img src={doubleRiteIcon} alt="doubleRite" />
160+
</div>
161+
162+
{/*와인 */}
163+
<div className="step">
164+
<div className="icon">
165+
<img src={wine} alt="wine" style={{ height: "43px" }} />
166+
<p>와인</p>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
113171
<div>
114172
<div className="upload-title">
115173
<h6>작품 등록 신청</h6>
116174
{/* 팝업 메뉴 */}
117175

118-
<div className="p-relative" style={{ height: "20px" }} ref={popupRef}>
176+
<div
177+
className="p-relative"
178+
style={{ height: "20px" }}
179+
ref={popupRef}
180+
>
119181
<img
120182
src={infoBtn}
121183
alt="i"
@@ -140,7 +202,11 @@ const PostWork = () => {
140202
}}
141203
/>
142204

143-
<button id="upload-btn" onClick={onClickUpload} disabled={!fileSelected}>
205+
<button
206+
id="upload-btn"
207+
onClick={onClickUpload}
208+
disabled={!fileSelected}
209+
>
144210
작품 보내기
145211
</button>
146212
</div>

‎src/pages/work/PostWork.scss‎

Lines changed: 95 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
.post-work .post-work-wrap {
99
display: flex;
10-
height: 93vh;
10+
height: auto;
1111
}
1212

1313
.post-work .post-work-wrap .loading-dialog {
@@ -20,6 +20,8 @@
2020
.post-work .left-side {
2121
flex: 0.85;
2222

23+
padding-top: 16.111vh;
24+
2325
@include r.media-laptop {
2426
margin-left: 90px;
2527
}
@@ -38,7 +40,6 @@
3840
background-size: contain;
3941
background-repeat: no-repeat;
4042
background-position: center;
41-
4243
@include r.media-tablet {
4344
display: none;
4445
}
@@ -49,7 +50,6 @@
4950
flex-direction: column;
5051
justify-content: space-between;
5152

52-
margin-top: 16.111vh;
5353
margin-right: 3.5%;
5454

5555
height: 83.5%;
@@ -66,6 +66,98 @@
6666
line-height: 2.75rem; /* 122.222% */
6767
}
6868

69+
.stage-info-container {
70+
width: 100%;
71+
height: 25%;
72+
max-height: 251px;
73+
min-height: 251px;
74+
75+
margin-top: 8.0555vh;
76+
margin-bottom: 6.111vh;
77+
display: flex;
78+
flex-direction: column;
79+
80+
.title {
81+
color: #000;
82+
/* H5/Bold */
83+
font-family: Pretendard;
84+
font-size: 1.25rem;
85+
font-style: normal;
86+
font-weight: 700;
87+
line-height: 1.75rem; /* 140% */
88+
letter-spacing: -0.025rem;
89+
}
90+
91+
.contants {
92+
display: grid;
93+
94+
grid-template-columns: 37fr 5fr 30fr 5fr 25fr;
95+
height: 100%;
96+
}
97+
98+
.step {
99+
display: grid;
100+
grid-template-rows: 2fr 1fr;
101+
102+
.icon {
103+
display: flex;
104+
flex-direction: column;
105+
gap: 11px;
106+
107+
align-items: center;
108+
justify-content: center;
109+
}
110+
.info {
111+
color: var(--ect-black, #000);
112+
text-align: center;
113+
114+
font-family: Pretendard;
115+
font-size: 0.875rem;
116+
font-style: normal;
117+
font-weight: 500;
118+
line-height: 1.25rem; /* 142.857% */
119+
120+
span {
121+
text-decoration-line: underline;
122+
text-decoration-style: solid;
123+
text-decoration-skip-ink: none;
124+
text-decoration-thickness: auto;
125+
text-underline-offset: auto;
126+
text-underline-position: from-font;
127+
}
128+
}
129+
}
130+
}
131+
132+
.arrow-box {
133+
position: relative;
134+
135+
img {
136+
margin-top: 150%;
137+
}
138+
}
139+
140+
.divider {
141+
position: absolute;
142+
bottom: 0%; // 조정해서 화살표 바로 아래에 오게
143+
left: 50%;
144+
transform: translateX(-50%);
145+
height: 75px;
146+
border-left: 1px dashed #9e9e9e;
147+
}
148+
149+
.TBD-info {
150+
width: 200%;
151+
color: var(--ect-black, #000);
152+
153+
/* Paragraph/Small/Medium */
154+
font-family: Pretendard;
155+
font-size: 14px;
156+
font-style: normal;
157+
font-weight: 500;
158+
line-height: 20px; /* 142.857% */
159+
}
160+
69161
.post-work .upload-title {
70162
display: flex;
71163
align-items: center;

0 commit comments

Comments
 (0)