Skip to content

Commit 1d24604

Browse files
game240game240
authored
feat: 작품 상세 페이지, 작품 등록하기 320 유연화 (#331)
* feat: Detail 320 유연화 * feat: 작품 등록하기 320 유연환
1 parent 4e8a681 commit 1d24604

File tree

4 files changed

+84
-81
lines changed

4 files changed

+84
-81
lines changed

‎src/pages/work/Detail.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
width: 440px;
1313
}
1414
@include r.media-small-mobile {
15-
width: 290px;
15+
width: 87.5%;
1616
}
1717
}
1818
.detail .detail-wrap {
@@ -106,7 +106,7 @@
106106
width: 430px;
107107
}
108108
@include r.media-small-mobile {
109-
width: 280px;
109+
width: 100%;
110110
}
111111
}
112112

@@ -171,7 +171,7 @@
171171
width: 386px;
172172
}
173173
@include r.media-small-mobile {
174-
width: 280px;
174+
width: 100%;
175175
}
176176
}
177177

‎src/pages/work/Detail.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -499,22 +499,24 @@ const Detail = () => {
499499
{(isTablet || isMobile || isSmallMobile) && (
500500
<section className="flex flex-col justify-between h-full">
501501
<div>
502-
<h1 className={!isSmallMobile ? "h1-bold" : "p-large-bold"}>
503-
{width > 769
504-
? script?.title
505-
: truncateText({
506-
text: script?.title || "",
507-
maxLength: 6,
508-
})}
502+
<h1
503+
className={clsx(
504+
"line-clamp-1 overflow-ellipsis",
505+
!isSmallMobile ? "h1-bold" : "p-large-bold"
506+
)}
507+
>
508+
{script?.title}
509509
</h1>
510510
<h3 className={!isSmallMobile ? "h3-bold" : "p-small-bold"}>
511511
{script?.writer}
512512
</h3>
513513
</div>
514-
<LikeViewCount
515-
likes={script?.likeCount ?? 0}
516-
views={script?.viewCount ?? 0}
517-
/>
514+
<div className="flex justify-end">
515+
<LikeViewCount
516+
likes={script?.likeCount ?? 0}
517+
views={script?.viewCount ?? 0}
518+
/>
519+
</div>
518520
</section>
519521
)}
520522
</div>

‎src/pages/work/PostWork.jsx‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -111,69 +111,81 @@ const PostWork = () => {
111111
)}
112112
<div className=" left-side">
113113
<div className=" inside-field">
114-
<div className="inside-field-title h1-bold">
114+
<div className="inside-field-title h4-bold sm:h1-bold">
115115
<p>자신만의</p>
116116
<p>작품을</p>
117117
<p>등록해주세요!</p>
118118
</div>
119119

120120
<div className=" stage-info-container">
121-
<h5 className="title h5-bold">스테이지 시스템 안내</h5>
121+
<h5 className="title p-medium-bold sm:h5-bold">
122+
스테이지 시스템 안내
123+
</h5>
122124

123125
<div className=" contants">
124126
{/* 포도알 */}
125127
<div className=" step">
126128
<div className="icon">
127-
<img src={podoalIcon} alt="podoal" />
128-
<p className="p-large-medium">포도알</p>
129+
<img
130+
src={podoalIcon}
131+
alt="podoal"
132+
className="h-[26px] sm:h-[32px]"
133+
/>
134+
<p className="p-12-400 sm:p-large-medium">포도알</p>
129135
</div>
130-
<div className="p-small-medium info">
136+
<div className="info p-xs-medium sm:p-small-medium">
131137
<p>
132138
• 대본 가격 <span>무료</span>만 설정 가능
133139
</p>
134140
<p> • 공연권 가격 설정 가능</p>
135141
</div>
136142
</div>
137143

138-
<div className="arrow-box">
139-
<img
140-
src={doubleRiteIcon}
141-
alt="doubleRite"
142-
style={{ width: "30px" }}
143-
/>
144+
<div className="arrow-box w-[20px] sm:w-[30px]">
145+
<img src={doubleRiteIcon} alt="doubleRite" />
144146
<div className="divider"></div>
145147
</div>
146148

147149
{/* 포도송이 */}
148150
<div className="step ">
149151
<div className="icon">
150-
<img src={podoSongIIcon} alt="podoSongI" />
151-
<p className="p-large-medium">포도송이</p>{" "}
152+
<img
153+
src={podoSongIIcon}
154+
alt="podoSongI"
155+
className="h-[26px] sm:h-[32px]"
156+
/>
157+
<p className="p-12-400 sm:p-large-medium">포도송이</p>
152158
</div>
153159
<div className="info">
154160
<div className="TBD-info">
155-
<p>• 추후 업데이트 예정</p>
161+
<p className="p-xs-medium sm:p-small-medium">
162+
• 추후 업데이트 예정
163+
</p>
156164
</div>
157165
</div>
158166
</div>
159167

160-
<div className="arrow-box">
168+
<div className="arrow-box w-[20px] sm:w-[30px]">
161169
<img src={doubleRiteIcon} alt="doubleRite" />
162170
</div>
163171

164172
{/* 와인 */}
165173
<div className="step">
166174
<div className="icon">
167-
<img src={wine} alt="wine" style={{ height: "43px" }} />
168-
<p className="p-large-medium">와인</p>
175+
<img
176+
src={wine}
177+
alt="wine"
178+
className="h-[26px] sm:h-[43px]"
179+
/>
180+
<p className="p-12-400 sm:p-large-medium">와인</p>
169181
</div>
170182
</div>
171183
</div>
172184
</div>
173185

174186
<div>
175187
<div className="upload-title items-center gap-[8px] relative ">
176-
<h6>작품 등록 신청</h6>
188+
<h6 className="p-medium-bold sm:h6-bold">작품 등록 신청</h6>
177189
{/* 팝업 메뉴 */}
178190
<button
179191
id="info-btn"
@@ -189,7 +201,7 @@ const PostWork = () => {
189201
<img
190202
className="popup-process w-[315px]"
191203
src={postingProcess2}
192-
alt="작품 등록 도식화"
204+
alt="작품 등록 도식화"
193205
/>
194206
}
195207
onClose={() => setShowPopup(!showPopup)}
@@ -218,7 +230,7 @@ const PostWork = () => {
218230

219231
<div className="flex flex-row mt-[14px] gap-[9px] items-center relative">
220232
<label className=" flex gap-[5px] items-center cursor-pointer hover:text-[#6A39C0]">
221-
<div className="relative w-[20px] h-[20px]">
233+
<div className="relative w-[14px] sm:w-[20px] h-[14px] sm:h-[20px]">
222234
<input
223235
type="checkbox"
224236
checked={isChecked}
@@ -240,7 +252,7 @@ const PostWork = () => {
240252
<p
241253
className={` ${
242254
isChecked ? "text-[#6A39C0]" : ""
243-
} p-small-medium `}
255+
} p-xs-medium sm:p-small-medium `}
244256
>
245257
작가 대상 이용약관 동의
246258
</p>

‎src/pages/work/PostWork.scss‎

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
margin: 0 auto;
4545
}
4646
@include r.media-mobile {
47-
width: 380px;
47+
width: 87.5%;
4848

4949
margin: 0 auto;
5050
}
@@ -118,57 +118,57 @@
118118

119119
.contants {
120120
display: grid;
121-
grid-template-columns: 37fr 5fr 30fr 5fr 25fr;
121+
grid-template-columns: 168px 5fr 30fr 5fr 25fr;
122122

123123
margin-top: 53px;
124124

125125
height: 100%;
126126

127+
@include r.media-small-mobile {
128+
grid-template-columns: 120px 5fr 82px 5fr 25fr;
129+
max-width: 350px;
130+
}
131+
127132
p {
128133
white-space: nowrap;
129134
}
130-
}
131135

132-
.step {
133-
display: grid;
134-
grid-template-rows: 20fr 9fr;
136+
.step {
137+
display: grid;
138+
grid-template-rows: 20fr 9fr;
139+
width: 100%;
135140

136-
.icon {
137-
display: flex;
138-
flex-direction: column;
139-
gap: 11px;
141+
.icon {
142+
display: flex;
143+
flex-direction: column;
144+
align-items: center;
145+
justify-content: center;
146+
gap: 11px;
140147

141-
align-items: center;
142-
justify-content: center;
143-
margin-bottom: 21px;
148+
margin-bottom: 21px;
144149

145-
box-sizing: border-box;
146-
}
147-
.info {
148-
display: flex;
149-
flex-direction: column;
150-
gap: 2px;
151-
152-
span {
153-
text-decoration-line: underline;
154-
text-decoration-style: solid;
155-
text-decoration-skip-ink: none;
156-
text-decoration-thickness: auto;
157-
text-underline-offset: auto;
158-
text-underline-position: from-font;
150+
width: 100%;
151+
152+
box-sizing: border-box;
153+
}
154+
.info {
155+
display: flex;
156+
flex-direction: column;
157+
gap: 2px;
158+
159+
span {
160+
text-decoration-line: underline;
161+
text-decoration-style: solid;
162+
text-decoration-skip-ink: none;
163+
text-decoration-thickness: auto;
164+
text-underline-offset: auto;
165+
text-underline-position: from-font;
166+
}
159167
}
160168
}
161169
}
162170
}
163171

164-
/*
165-
* 두 번째 .step .icon: 왼쪽에 있는 첫 번째 .step 하단의 text 길이에 의해 중앙 왜곡
166-
* -> 대략 10px, ∴ 대략 절반 정도 좌측으로 translate.
167-
*/
168-
.post-work .contants .step:nth-child(3) .icon {
169-
transform: translateX(-5px);
170-
}
171-
172172
.post-work .arrow-box {
173173
position: relative;
174174

@@ -217,17 +217,6 @@
217217
// FileInputBox에 상단 margin 존재 - 제거 예정, 0.63rem만큼의 차 필요
218218
}
219219

220-
.post-work .upload-title h6 {
221-
color: #000;
222-
223-
/* H5/Bold */
224-
font-family: "Noto Sans KR";
225-
font-size: 1.25rem;
226-
font-style: normal;
227-
font-weight: 700;
228-
line-height: 1.75rem; /* 140% */
229-
}
230-
231220
.post-work .upload-title > img {
232221
display: none;
233222

0 commit comments

Comments
 (0)