Skip to content

Commit 392430d

Browse files
goodsmellgoodsmell
authored
feat: 후기 작성 - 320 적용 (#282)
1 parent dad09ba commit 392430d

File tree

3 files changed

+224
-48
lines changed

3 files changed

+224
-48
lines changed

‎src/pages/work/review/reviewWrite.scss‎

Lines changed: 76 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,97 @@
88
@include r.media-mobile {
99
width: 430px;
1010
}
11+
@include r.media-small-mobile {
12+
width: 87.5vw;
13+
min-width: 280px;
14+
}
15+
}
16+
17+
.review-write-div .review-write-banner {
18+
margin-top: 72px;
19+
20+
@include r.media-small-mobile {
21+
margin-top: 25px;
22+
}
23+
}
24+
25+
.review-write-div .review-write-banner .banner-body {
26+
gap: 75px;
27+
@include r.media-small-mobile {
28+
gap: 56px;
29+
}
1130
}
1231

13-
.content {
32+
.review-write-div .content {
1433
width: 630px;
34+
margin-top: 35px;
1535

1636
@include r.media-mobile {
1737
width: 430px;
38+
margin-top: 30px;
39+
}
40+
@include r.media-small-mobile {
41+
width: 87.5vw;
42+
min-width: 280px;
43+
margin-top: 15px;
44+
}
45+
}
46+
47+
.review-write-div .content .content-div {
48+
gap: 35px;
49+
50+
@include r.media-mobile {
51+
gap: 30px;
52+
}
53+
@include r.media-small-mobile {
54+
gap: 4.68vw;
55+
}
56+
}
57+
58+
.review-write-div .content .info {
59+
gap: 7px;
60+
61+
@include r.media-small-mobile {
62+
gap: 8px;
63+
}
64+
}
65+
66+
.review-write-div .content .evaluation {
67+
padding-top: 20px;
68+
69+
@include r.media-mobile {
70+
padding-top: 10px;
71+
}
72+
@include r.media-small-mobile {
73+
padding-top: 11px;
1874
}
1975
}
2076

21-
.content-img {
77+
.review-write-div .content-img {
2278
width: 197px;
79+
80+
@include r.media-small-mobile {
81+
width: 37.5vw;
82+
min-width: 120px;
83+
}
2384
}
2485

25-
.content .reason {
86+
.review-write-div .reason {
2687
row-gap: 15px;
2788
column-gap: 20px;
89+
2890
@include r.media-mobile {
2991
row-gap: 10px;
3092
}
93+
94+
@include r.media-small-mobile {
95+
column-gap: 10px;
96+
row-gap: 10px;
97+
98+
button {
99+
width: 40.625vw; // 87.5vw 중 두 개
100+
min-width: 130px;
101+
aspect-ratio: 130 / 32;
102+
}
103+
}
31104
}

‎src/pages/work/review/reviewWrite.tsx‎

Lines changed: 140 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
patchReviewProps,
1111
} from "@/api/user/review/reviewWriteApi";
1212

13+
import useWindowDimensions from "@/hooks/useWindowDimensions";
1314
import GoBack from "@/components/button/GoBack";
1415
import SmallOnOffBtn from "@/components/button/RoundBtn_135_40";
1516
import defaultThumbnail from "@/assets/image/defaultThumbnail.svg";
@@ -42,6 +43,10 @@ const reviewWrite = () => {
4243
const hasSelectedReason = Object.values(reason).some((value) => value);
4344
const navigate = useNavigate();
4445

46+
const { widthConditions } = useWindowDimensions();
47+
const { isSmallMobile, isMobile, isTablet, isLaptop, isDesktop } =
48+
widthConditions;
49+
4550
// 리뷰 내용 가져오기
4651
useEffect(() => {
4752
const fetchInfo = async () => {
@@ -166,35 +171,69 @@ const reviewWrite = () => {
166171
return (
167172
<div className="mx-auto review-write-div pb-[92px] ">
168173
{/* 배너 */}
169-
<div className="mt-[37px] flex flex-col gap-[14px]">
174+
<div className="review-write-banner flex flex-col gap-[14px] ">
170175
<GoBack url="-1" />
171-
<div className="flex flex-col gap-[75px] border-b-1 border-[#B489FF] ">
172-
<h1 className="h4-bold">후기를 작성해 주세요!</h1>
176+
<div className="banner-body flex flex-col border-b-1 border-[#B489FF] ">
177+
<h1 className={`${isSmallMobile ? "p-medium-bold" : "h4-bold"} `}>
178+
후기를 작성해 주세요!
179+
</h1>
173180
<span></span>
174181
</div>
175182
</div>
176183

177184
{/* top contents*/}
178-
<div className="mx-auto content mt-[35px]">
179-
<div className="flex flex-col gap-[35px] ">
180-
<div className="flex flex-row gap-[34px]">
185+
<div className="mx-auto content">
186+
<div
187+
className={`flex flex-col ${
188+
isSmallMobile ? "gap-[25px]" : "gap-[35px]"
189+
}`}
190+
>
191+
<div className="flex flex-row content-div">
181192
{/* 작품 내용 */}
182-
<div className={`flex flex-col gap-[7px]`}>
193+
<div className={`flex flex-col info content-img`}>
183194
<img
184195
src={thumbnail ? thumbnail : defaultThumbnail}
185-
className="border border-[var(--grey3)] box-border w-[197px] h-[197px] rounded-[20px] object-cover"
196+
className="content-img border border-[var(--grey3)] box-border rounded-[20px] object-cover aspect-square "
186197
/>
187198
<div className="flex flex-col gap-[3px]">
188-
<span className="w-full truncate p-large-bold">{title}</span>
189-
<span className="w-full truncate p-medium-bold">{writer}</span>
199+
<p
200+
className={`w-full truncate text-ellipsis whitespace-nowrap overflow-hidden ${
201+
isSmallMobile ? "p-small-bold" : " p-large-bold"
202+
} `}
203+
>
204+
{title}
205+
</p>
206+
<span
207+
className={`w-full truncate ${
208+
isSmallMobile ? "p-12-bold" : "p-medium-bold"
209+
}`}
210+
>
211+
{writer}
212+
</span>
190213
</div>
191214
</div>
192215

193-
<div className="flex flex-col w-full gap-[47px] pt-[20px] ">
216+
<div className="evaluation flex flex-col w-full gap-[47px] ">
194217
{/* 평점 */}
195-
<div>
196-
<span className="p-large-bold mb-[11px]">작품의 평점</span>
197-
<div className="flex flex-row gap-[15px]">
218+
<div className="">
219+
<span
220+
className={` flex flex-row gap-[1.6vw] ${
221+
isSmallMobile
222+
? "p-small-bold flex flex-row"
223+
: "p-large-bold "
224+
}`}
225+
>
226+
작품의 평점
227+
<div
228+
className={` ${isSmallMobile ? "p-12-regular" : "hidden"}`}
229+
>
230+
<div className="flex flex-row gap-[3px] items-center">
231+
(<p className=" p-small-bold">{selectedStar}</p>
232+
<p className="p-12-regular">/ 5</p>)
233+
</div>
234+
</div>
235+
</span>
236+
<div className="flex flex-row gap-[15px] mt-[10px]">
198237
<div className="flex flex-row gap-[2px]">
199238
{Array.from({ length: 5 }, (_, i) => (
200239
<div
@@ -211,8 +250,8 @@ const reviewWrite = () => {
211250
{i >= selectedStar ? (
212251
<svg
213252
xmlns="http://www.w3.org/2000/svg"
214-
width="25"
215-
height="25"
253+
width={` ${isSmallMobile ? "20" : "25"}`}
254+
height={` ${isSmallMobile ? "20" : "25"}`}
216255
viewBox="0 0 25 25"
217256
fill="none"
218257
>
@@ -224,8 +263,8 @@ const reviewWrite = () => {
224263
) : (
225264
<svg
226265
xmlns="http://www.w3.org/2000/svg"
227-
width="25"
228-
height="25"
266+
width={` ${isSmallMobile ? "20" : "25"}`}
267+
height={` ${isSmallMobile ? "20" : "25"}`}
229268
viewBox="0 0 25 25"
230269
fill="none"
231270
>
@@ -238,17 +277,21 @@ const reviewWrite = () => {
238277
</div>
239278
))}
240279
</div>
241-
<span className="flex flex-row gap-[9px]">
280+
<span
281+
className={`flex flex-row gap-[9px] ${
282+
isSmallMobile ? "hidden" : ""
283+
}`}
284+
>
242285
<p className="p-large-bold">{selectedStar}</p>
243286
<p className="p-medium-regular">/ 5</p>
244287
</span>
245288
</div>
246289
</div>
247290

248291
{/* 장점*/}
249-
<div>
250-
<span className=" p-large-bold mb-[10px]">작품의 장점</span>
251-
<span className="flex flex-wrap whitespace-nowrap reason">
292+
<div className={`${isSmallMobile ? "hidden" : ""} `}>
293+
<span className=" p-large-bold">작품의 장점</span>
294+
<span className="flex flex-wrap whitespace-nowrap reason mt-[10px]">
252295
<button
253296
className={`cursor-pointer py-[8px] bg-[var(--grey3)] w-[180px] rounded-[30px] hover:text-[var(--white)] hover:bg-[var(--purple5)] ${
254297
reason["CHARACTER"]
@@ -279,43 +322,91 @@ const reviewWrite = () => {
279322
>
280323
<p className="p-medium-bold"> 스토리가 좋아요</p>
281324
</button>
282-
283-
{/* {Object.entries(reason).map(([label, selected]) => (
284-
<button
285-
key={label}
286-
onClick={() =>
287-
setReason((prev) => ({
288-
...prev,
289-
[label]: !prev[label],
290-
}))
291-
}
292-
className={`cursor-pointer hover:text-[var(--purple5)] p-medium-medium ${
293-
selected ? "text-[var(--purple5)] " : ""
294-
}`}
295-
>
296-
{label}
297-
</button>
298-
))} */}
299325
</span>
300326
</div>
301327
</div>
302328
</div>
303329

330+
<div className={`${isSmallMobile ? "" : "hidden"} `}>
331+
<span
332+
className={` ${
333+
isSmallMobile ? "p-small-bold" : "p-large-bold"
334+
} `}
335+
>
336+
작품의 장점
337+
</span>
338+
<span className="flex flex-wrap whitespace-nowrap reason mt-[10px]">
339+
<button
340+
className={`cursor-pointer py-[8px] bg-[var(--grey3)] w-[180px] rounded-[30px] hover:text-[var(--white)] hover:bg-[var(--purple5)] ${
341+
reason["CHARACTER"]
342+
? "bg-[var(--purple5)] text-[var(--white)]"
343+
: ""
344+
}`}
345+
onClick={() => handleSelectReason("CHARACTER")}
346+
>
347+
<p className="p-xs-bold"> 캐릭터가 매력적이에요</p>
348+
</button>
349+
<button
350+
className={`cursor-pointer py-[8px] bg-[var(--grey3)] w-[180px] rounded-[30px] hover:text-[var(--white)] hover:bg-[var(--purple5)] ${
351+
reason["RELATION"]
352+
? "bg-[var(--purple5)] text-[var(--white)]"
353+
: ""
354+
}`}
355+
onClick={() => handleSelectReason("RELATION")}
356+
>
357+
<p className="p-xs-bold"> 관계성이 탄탄해요</p>
358+
</button>
359+
<button
360+
className={`cursor-pointer py-[8px] bg-[var(--grey3)] w-[180px] rounded-[30px] hover:text-[var(--white)] hover:bg-[var(--purple5)] ${
361+
reason["STORY"]
362+
? "bg-[var(--purple5)] text-[var(--white)]"
363+
: ""
364+
}`}
365+
onClick={() => handleSelectReason("STORY")}
366+
>
367+
<p className="p-xs-bold"> 스토리가 좋아요</p>
368+
</button>
369+
</span>
370+
</div>
371+
304372
{/* bottom contents */}
305373
<div className="flex flex-col">
306374
{/* 내용 작성 */}
307-
<span className="p-large-bold mb-[10px]"> 내용 작성</span>
308-
<div className="flex flex-col border-[0.5px] rounded-[5px] h-[250px] ">
375+
<span
376+
className={` mb-[10px] ${
377+
isSmallMobile ? "p-small-bold" : "p-large-bold"
378+
}`}
379+
>
380+
{" "}
381+
내용 작성
382+
</span>
383+
<div
384+
className={`flex flex-col border-[0.5px] rounded-[5px] ${
385+
isSmallMobile ? " h-[205px]" : "h-[250px]"
386+
}`}
387+
>
309388
<textarea
310-
className=" p-medeim-regular h-[203px] p-[20px] border-none box-border resize-none rounded-[5px] focus:outline-none focus:ring-0 "
389+
className={` h-[203px] border-none box-border resize-none rounded-[5px] focus:outline-none focus:ring-0 ${
390+
isSmallMobile
391+
? " p-xs-regular p-[6.25vw]"
392+
: "p-medium-regular p-[20px]"
393+
}`}
311394
onChange={handleChange}
312395
value={text}
313396
></textarea>
314397
<span className="h-[47px] bg-[var(--purple10)] w-full flex flex-row justify-between rounded-b-[5px] ">
315-
<p className="flex my-auto ml-[20px] w-fit p-medium-regular">
398+
<p
399+
className={`flex my-auto ml-[20px] w-fit ${
400+
isSmallMobile ? " p-xs-regular" : "p-medium-regular"
401+
}`}
402+
>
316403
EX) 내용이 재밌었어요!
317404
</p>
318-
<span className="my-auto mr-[13px]">
405+
<span
406+
className={`my-auto mr-[13px] ${
407+
isSmallMobile ? " p-xs-regular" : "p-small-regular"
408+
}`}
409+
>
319410
{text.length} / 50자 이상
320411
</span>
321412
</span>
@@ -324,7 +415,11 @@ const reviewWrite = () => {
324415
</div>
325416

326417
{/* 유의사항 */}
327-
<ul className="text-[var(--grey5)] p-small-bold p-[0] m-[0] list-none mt-[30px]">
418+
<ul
419+
className={`text-[var(--grey5)] p-[0] m-[0] list-none mt-[30px] ${
420+
isSmallMobile ? "p-xs-bold " : "p-small-bold "
421+
}`}
422+
>
328423
<li>• 후기 작성 시 유의사항</li>
329424
<li className="list-none">
330425
- 비속어 및 부적절한 내용은 별도의 고지 없이 삭제됩니다.

‎src/styles/text.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,14 @@
225225
line-height: 1rem; /* 133.333% */
226226
}
227227

228+
.p-12-regular {
229+
font-family: Pretendard;
230+
font-size: 12px;
231+
font-style: normal;
232+
font-weight: 400;
233+
line-height: 16px; /* 133.333% */
234+
}
235+
228236
.t-align-start,
229237
.t-start {
230238
text-align: start;

0 commit comments

Comments
 (0)