Skip to content

Commit 2346133

Browse files
dkslel1225dkslel1225
authored
Merge pull request #53 from codeit-maso/feature/jeon
🎨 style: 반응형 구현 및 스타일 추가
2 parents 809900b + 29389ad commit 2346133

File tree

9 files changed

+189
-54
lines changed

9 files changed

+189
-54
lines changed

‎src/components/common/Button.module.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@
3434
}
3535

3636
&--primary {
37+
display: block;
3738
width: 28rem;
3839
height: 5.6rem;
40+
margin: 0 auto;
3941
}
4042

4143
&--create {
@@ -58,4 +60,17 @@
5860
border-radius: 6px;
5961
@include font-16-regular;
6062
}
63+
64+
@media (min-width: 361px) and (max-width: 768px) {
65+
&--primary {
66+
width: 93.75vw;
67+
margin: 24px;
68+
}
69+
}
70+
@media (min-width: 0px) and (max-width: 768px) {
71+
&--primary {
72+
width: 88.9vw;
73+
margin: 24px 20px;
74+
}
75+
}
6176
}

‎src/components/layout/Header/Header.module.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
width: 100%;
88
max-width: 1207px;
99
margin: 0 auto;
10+
padding: 0 12px;
1011
}
1112

1213
.underline {
@@ -26,3 +27,14 @@
2627
border-radius: 6px;
2728
white-space: nowrap;
2829
}
30+
31+
@media (min-width: 361px) and (max-width: 768px) {
32+
.header {
33+
padding: 0 24px;
34+
}
35+
}
36+
@media (min-width: 0px) and (max-width: 360px) {
37+
.header {
38+
padding: 0 16px;
39+
}
40+
}

‎src/pages/RecipientList/Carousel.jsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,6 @@ export default function Carousel({ recipients }) {
2121
}
2222
}
2323

24-
//shadow.....
25-
function makeShadow() {
26-
const shadows = [];
27-
for (let i = 0; i < 7; i++) {
28-
shadows.push(<div key={i} className={styles.shadow}></div>);
29-
}
30-
return shadows;
31-
}
32-
3324
return (
3425
<div className={styles.carousel}>
3526
<div className={styles['carousel__cardset-wrapper']}>
@@ -45,12 +36,13 @@ export default function Carousel({ recipients }) {
4536
className={`${styles['carousel__direction-button']} ${styles.back}`}
4637
></button>
4738
)}
48-
{index !== 4 && ( // 캐러셀 끝에 도달하기 전까지
49-
<button
50-
onClick={() => settingIndex('next')}
51-
className={`${styles['carousel__direction-button']}`}
52-
></button>
53-
)}
39+
{recipients.length > 4 &&
40+
index !== 4 && ( // 캐러셀 끝에 도달하기 전까지
41+
<button
42+
onClick={() => settingIndex('next')}
43+
className={`${styles['carousel__direction-button']}`}
44+
></button>
45+
)}
5446
</div>
5547
);
5648
}

‎src/pages/RecipientList/Carousel.module.scss‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
@use '../../assets/styles/variables.scss' as *;
22

3-
//캐러셀 레이아웃
43
.carousel {
54
position: relative;
65
}
76
.carousel__cardset-wrapper {
87
overflow: hidden;
98
width: 1200px;
10-
padding: 16px 20px;
9+
padding: 0 20px;
1110
}
1211
.carousel__cardset {
1312
display: flex;
@@ -76,8 +75,35 @@
7675
}
7776
}
7877

79-
//<<태블릿, 모바일에서: 스크롤 스타일 None 적용하기>>
80-
// -ms-overflow-style: none;
81-
// .carousel__cardset::-webkit-scrollbar {
82-
// display: none;
83-
// }
78+
// 반응형
79+
@media (min-width: 0px) and (max-width: 768px) {
80+
.carousel__cardset-wrapper {
81+
overflow: scroll;
82+
width: 100vw;
83+
-ms-overflow-style: none;
84+
}
85+
.carousel__cardset-wrapper::-webkit-scrollbar {
86+
display: none;
87+
}
88+
.carousel__direction-button {
89+
display: none;
90+
}
91+
}
92+
@media (min-width: 361px) and (max-width: 768px) {
93+
.carousel::before,
94+
.carousel::after {
95+
display: none;
96+
}
97+
}
98+
@media (min-width: 0px) and (max-width: 360px) {
99+
h2 {
100+
margin-bottom: 12px;
101+
}
102+
section {
103+
margin-left: 40px 20px 0px 20px;
104+
}
105+
.carousel::after,
106+
.carousel::before {
107+
display: none;
108+
}
109+
}

‎src/pages/RecipientList/RecipientCard.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import styles from './RecipientCard.module.scss';
22
import RecentMessages from './RecentMessages';
33
import TopReactions from './TopReactions';
4+
import { useNavigate } from 'react-router-dom';
45

56
//캐러셀 내부 요소 - 카드 컴포넌트
67
export default function RecipientCard({ Recipient }) {
78
const {
9+
id,
810
name,
911
recentMessages,
1012
messageCount,
1113
topReactions,
1214
backgroundColor,
1315
backgroundImageURL,
14-
createdAt,
1516
} = Recipient;
17+
const navigate = useNavigate();
1618

1719
return (
1820
<div
@@ -21,17 +23,20 @@ export default function RecipientCard({ Recipient }) {
2123
backgroundImageURL
2224
? {
2325
backgroundImage: `linear-gradient(#00000073, #00000073), url(${backgroundImageURL})`,
24-
color: 'white',
2526
}
2627
: {}
2728
}
29+
onClick={() => navigate(`{/post/${id}`)}
2830
>
29-
<h3>{`To. ${name}`}</h3>
31+
{backgroundColor === 'blue' && <div className={styles.triangle} />}
32+
<h3 className={backgroundImageURL && styles.white}>{`To. ${name}`}</h3>
3033
<RecentMessages
3134
messages={recentMessages}
3235
count={messageCount}
3336
></RecentMessages>
34-
<div className={styles['writer-count']}>
37+
<div
38+
className={`${styles['writer-count']} ${backgroundImageURL && styles.white}`}
39+
>
3540
<span className={styles.count}>{messageCount}</span>
3641
<span>명이 작성했어요!</span>
3742
</div>

‎src/pages/RecipientList/RecipientCard.module.scss‎

Lines changed: 71 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use '../../assets/styles/variables.scss' as *;
22

3-
//아직 작업중
43
h3 {
54
@include font-24-bold;
65
color: $gray-900;
@@ -17,17 +16,17 @@ h3 {
1716
margin: 43px 0px 16px 0px;
1817
background-color: rgba(0, 0, 0, 0.12);
1918
}
19+
.white {
20+
color: white;
21+
}
2022

2123
.card {
22-
// position: relative;
23-
overflow: hidden; // 넘치는 도형 잘리게
24-
// 카드 기본 스타일
24+
overflow: hidden; // ::after 도형 잘리게
2525
min-width: 275px;
2626
height: 260px;
2727
padding: 30px 24px 20px 24px;
2828
border: solid 1px rgba(0, 0, 0, 0.1);
2929
border-radius: 16px;
30-
background-color: $purple-200; //디폴트 배경색으로 가정
3130
background-size: cover;
3231
background-repeat: no-repeat;
3332
-webkit-filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 1));
@@ -36,40 +35,94 @@ h3 {
3635
&::after {
3736
content: '';
3837
position: absolute;
39-
bottom: 0;
40-
right: 0;
41-
width: 150px;
42-
height: 150px;
43-
border-radius: 50%;
44-
transform: translate(30%, 30%);
4538
}
4639
&.purple {
4740
background: $purple-200;
4841
}
4942
&.purple::after {
43+
top: 124px;
44+
left: 133px;
45+
width: 336px;
46+
height: 169px;
47+
border-radius: 90.5px;
5048
background: #dcb9ff66;
51-
width: 150px;
52-
height: 150px;
53-
border-radius: 50%;
5449
}
5550
&.beige {
5651
background-color: $beige-200;
5752
}
5853
&.beige::after {
54+
top: 124px;
55+
left: 154px;
56+
width: 332px;
57+
height: 318px;
58+
border-radius: 51px;
5959
background: #ffd382b2;
6060
}
6161
&.blue {
6262
background-color: $blue-200;
6363
}
64-
&.blue::after {
65-
background: #9dddff;
66-
transform: translate(20%, 40%) scale(1.2);
64+
.triangle {
65+
position: absolute;
66+
top: 82px;
67+
left: 110px;
68+
width: 250px;
69+
background-color: #9dddff;
70+
z-index: -1;
71+
--r: 35px; //border radius
72+
aspect-ratio: 1 / cos(30deg);
73+
--_g: calc(tan(60deg) * var(--r)) bottom var(--r), #000 98%, #0000 101%;
74+
-webkit-mask: //conic gradient: 중앙 영역 채움, radial gradients: 세 꼭짓점
75+
conic-gradient(
76+
from -30deg at 50% calc(200% - 3 * var(--r) / 2),
77+
#000 60deg,
78+
#0000 0
79+
)
80+
0 100%/100% calc(100% - 3 * var(--r) / 2) no-repeat,
81+
radial-gradient(var(--r) at 50% calc(2 * var(--r)), #000 98%, #0000 101%),
82+
radial-gradient(var(--r) at left var(--_g)),
83+
radial-gradient(var(--r) at right var(--_g));
84+
mask:
85+
conic-gradient(
86+
from -30deg at 50% calc(200% - 3 * var(--r) / 2),
87+
#000 60deg,
88+
#0000 0
89+
)
90+
0 100%/100% calc(100% - 3 * var(--r) / 2) no-repeat,
91+
radial-gradient(var(--r) at 50% calc(2 * var(--r)), #000 98%, #0000 101%),
92+
radial-gradient(var(--r) at left var(--_g)),
93+
radial-gradient(var(--r) at right var(--_g));
94+
// 3포인트 폴리곤
95+
-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
96+
clip-path: polygon(50% 0, 100% 100%, 0 100%);
6797
}
6898
&.green {
6999
background-color: $green-200;
70100
}
71101
&.green::after {
102+
top: 124px;
103+
left: 133px;
104+
width: 336px;
105+
height: 169px;
106+
border-radius: 90.5px;
72107
background: #9be2824d;
73-
transform: translate(20%, 40%) scale(1.2);
108+
}
109+
}
110+
111+
@media (min-width: 0px) and (max-width: 360px) {
112+
.card {
113+
min-width: 208px;
114+
height: 232px;
115+
}
116+
.card__centerline {
117+
margin-top: 33px;
118+
}
119+
h3 {
120+
@include font-18-bold;
121+
}
122+
.writer-count {
123+
@include font-14-regular;
124+
}
125+
.count {
126+
font-size: 1.4rem;
74127
}
75128
}

‎src/pages/RecipientList/RecipientList.jsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { useState, useEffect } from 'react';
2-
import './RecipientList.module.scss';
2+
import { useNavigate } from 'react-router-dom';
3+
import styles from './RecipientList.module.scss';
34
import Carousel from './Carousel';
45
import getRecipients from '../../api/getRecipients';
6+
import Button from '../../components/common/Button';
57

68
//인기순 정렬
79
function sortByPopularity(array) {
@@ -13,6 +15,7 @@ function sortByPopularity(array) {
1315
export default function RecipientList() {
1416
const [popularity, setPopularity] = useState([]);
1517
const [recently, setRecently] = useState([]);
18+
const navigate = useNavigate();
1619

1720
//데이터 받아옴, 상태 업데이트
1821
useEffect(() => {
@@ -31,14 +34,17 @@ export default function RecipientList() {
3134

3235
return (
3336
<>
34-
<section>
35-
<h2>인기 롤링 페이퍼 🔥</h2>
36-
<Carousel recipients={popularity} />
37-
</section>
38-
<section>
39-
<h2>최근에 만든 롤링 페이퍼 ⭐️</h2>
40-
<Carousel recipients={recently} />
41-
</section>
37+
<div className={styles['section-group']}>
38+
<section>
39+
<h2>인기 롤링 페이퍼 🔥</h2>
40+
<Carousel recipients={popularity} />
41+
</section>
42+
<section>
43+
<h2>최근에 만든 롤링 페이퍼 ⭐️</h2>
44+
<Carousel recipients={recently} />
45+
</section>
46+
</div>
47+
<Button children="나도 만들어보기" onClick={() => navigate('/post')} />
4248
</>
4349
);
4450
}

0 commit comments

Comments
 (0)