Skip to content

Commit 5429b7b

Browse files
h-seo-nh-seo-n
authored
Merge pull request #70 from wafflestudio/seoyeon
모바일 뷰 추가 최적화
2 parents 78ded6e + f21ed2f commit 5429b7b

14 files changed

Lines changed: 544 additions & 200 deletions

‎src/pages/search/Search.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,16 @@ const SearchView = () => {
3737
fetchData();
3838
}, [fetchSearchResult, query, page, size]);
3939

40+
useEffect(() => {
41+
const mq = window.matchMedia("(max-width: 576px)");
42+
const apply = () => {
43+
if (mq.matches) setViewMode("Grid");
44+
};
45+
apply();
46+
mq.addEventListener("change", apply);
47+
return () => mq.removeEventListener("change", apply);
48+
}, []);
49+
4050
const events: CalendarEvent[] = useMemo(() => {
4151
if (!searchResults) return [];
4252

‎src/pages/search/SearchToolbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ const SearchToolbar = ({ viewMode, setViewMode }: SearchToolbarProps) => {
2222
return (
2323
<div className={styles.toolbarContainer}>
2424
<div className={styles.headerRow}>
25-
<h2 className={styles.search}>
25+
<span>
2626
{query.trim() ? `'${query}' 검색 결과` : "검색"}
27-
</h2>
27+
</span>
2828
<div className={styles.btnGroup}>
2929
<button type="button" className={styles.calendarBtn}>
3030
<FaCalendarAlt

‎src/styles/Calendar.module.css‎

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
}
9191

9292
:global(.rbc-off-range-bg) {
93-
background-color: #fafafa !important; /* Slightly different for off-range */
93+
background-color: #fafafa; /* Slightly different for off-range */
9494
}
9595

9696
/* Content layer (dates + events) */
@@ -111,6 +111,10 @@
111111
width: 100%;
112112
}
113113

114+
:global(.rbc-row-content > .rbc-row):has(:global(.rbc-show-more)) {
115+
margin-top: auto;
116+
}
117+
114118
:global(.rbc-event-content) {
115119
padding: 1px 1px;
116120
}
@@ -133,6 +137,10 @@
133137
font: inherit;
134138
}
135139

140+
:global(.rbc-date-cell):first-child:not(.rbc-now) :global(.rbc-button-link) {
141+
color: #ef4444;
142+
}
143+
136144
/* Today's date styling */
137145
:global(.rbc-today) {
138146
background-color: transparent !important;
@@ -168,8 +176,17 @@
168176

169177
:global(.rbc-row-segment) {
170178
position: relative;
179+
box-sizing: border-box;
180+
padding: 0;
171181
}
172182

183+
/* :global(.rbc-row-segment):not(:first-child) {
184+
padding-left: 5px;
185+
} */
186+
/* :global(.rbc-row-segment):first-child {
187+
padding-left: 0;
188+
} */
189+
173190
/* Show more link */
174191
:global(.rbc-show-more) {
175192
background-color: transparent;
@@ -189,21 +206,55 @@
189206
}
190207

191208
@media (max-width: 576px) {
209+
:global(.rbc-row-bg) {
210+
gap: 2px;
211+
}
212+
:global(.rbc-off-range-bg) {
213+
background-color: #ffffff;
214+
}
192215
:global(.rbc-day-bg) {
193-
border: 1px solid #ffffff;
194-
border-radius: 3px;
216+
background-color: #ffffff;
217+
/* border: 1px solid #ffffff; */
218+
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);
219+
border-radius: 5px;
220+
}
221+
:global(.rbc-button-link) {
222+
opacity: 50%;
223+
}
224+
:global(.rbc-now .rbc-button-link) {
225+
background-color: transparent;
226+
color: inherit;
227+
width: auto;
228+
height: auto;
229+
display: inline;
230+
border-radius: 0;
231+
opacity: 100%;
232+
}
233+
:global(.rbc-date-cell.rbc-off-range .rbc-button-link) {
234+
display: none;
235+
}
236+
:global(.rbc-event) {
237+
padding: 0;
195238
}
196239
:global(.rbc-event-content) {
197240
padding: 0;
198241
}
199242
:global(.rbc-month-row) {
200243
min-height: 110px;
201-
border: 0.5px solid #ffffff;
244+
/* border: 0.5px solid #ffffff; */
245+
gap: 2px;
246+
}
247+
:global(.rbc-show-more) {
248+
opacity: 100%;
249+
}
250+
251+
:global(.rbc-day-bg) {
252+
border-left: 0px;
202253
}
203254

204255
.main {
205-
padding-left: 0px;
206-
padding-right: 0px;
256+
padding-left: 10px;
257+
padding-right: 10px;
207258
padding-bottom: calc(2rem + env(safe-area-inset-bottom));
208259
touch-action: pan-y; /* drop horizontal finger drag */
209260
overscroll-behavior-x: none; /* block horizontal overscroll chaining */

‎src/styles/CardView.module.css‎

Lines changed: 178 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,18 @@
1313
Roboto, "Noto Sans KR", sans-serif;
1414
text-align: left;
1515
}
16+
.mobileDateOrg,
17+
.mobileRow {
18+
padding: 0px;
19+
margin: 0px;
20+
display: flex;
21+
flex-direction: row;
22+
}
23+
24+
.ddayTargetDate,
25+
.categoryCircle {
26+
display: none;
27+
}
1628

1729
.cardWrapper button {
1830
background: none;
@@ -46,14 +58,18 @@
4658
word-break: keep-all;
4759
}
4860

61+
.mobileChipsList,
4962
.chipsList {
5063
display: flex;
5164
flex-direction: row;
5265
align-items: center;
5366
gap: 8px;
5467
list-style: none;
5568
padding: 0;
56-
margin: 0 0 12px 0;
69+
margin: 8px 0 12px 0;
70+
}
71+
.mobileChipsList {
72+
display: none;
5773
}
5874

5975
.deadlineChip {
@@ -82,3 +98,164 @@
8298
color: #767676;
8399
margin-top: auto;
84100
}
101+
102+
.mobileDateOrg .orgText {
103+
display: none;
104+
}
105+
106+
/* ---- GalleryCard -------*/
107+
.galleryCardWrapper {
108+
display: flex;
109+
flex-direction: column;
110+
align-items: center;
111+
justify-content: center;
112+
}
113+
114+
.thumbnail {
115+
width: 100%;
116+
aspect-ratio: 16 / 9;
117+
border-radius: 12px;
118+
margin-bottom: 16px;
119+
overflow: hidden;
120+
border: 1px solid #f0f0f0;
121+
background-color: #f9f9f9;
122+
position: relative;
123+
}
124+
125+
.thumbnailImage {
126+
width: 100%;
127+
height: 100%;
128+
object-fit: cover;
129+
position: absolute;
130+
top: 0;
131+
left: 0;
132+
}
133+
134+
@media (max-width: 576px) {
135+
.galleryCardWrapper {
136+
padding: 0 20px;
137+
}
138+
139+
.cardWrapper {
140+
max-width: 100%;
141+
}
142+
143+
.thumbnail {
144+
margin-bottom: 12px;
145+
border-radius: 8px;
146+
}
147+
148+
.eventTitle {
149+
font-size: 16px;
150+
margin-bottom: 6px;
151+
}
152+
153+
.chipsList {
154+
gap: 6px;
155+
margin-top: 8px;
156+
margin-bottom: 8px;
157+
}
158+
159+
.deadlineChip,
160+
.categoryChip {
161+
font-size: 12px;
162+
padding: 3px 8px;
163+
}
164+
165+
.mobileRow {
166+
width: 100%;
167+
align-items: center;
168+
gap: 8px;
169+
}
170+
.mobileDateOrg {
171+
align-items: center;
172+
justify-content: center;
173+
gap: 12px;
174+
}
175+
.mobileChipsList .categoryCircle {
176+
display: inline-flex;
177+
align-items: center;
178+
justify-content: center;
179+
height: 26.5px;
180+
min-width: 26.5px;
181+
max-width: 26.5px;
182+
border-radius: 100px;
183+
flex-shrink: 0;
184+
padding: 0;
185+
margin: 0;
186+
border: none;
187+
cursor: pointer;
188+
user-select: none;
189+
-webkit-touch-callout: none;
190+
overflow: hidden;
191+
white-space: nowrap;
192+
font-size: 13px;
193+
font-weight: 500;
194+
color: #111111;
195+
transition:
196+
max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
197+
padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
198+
border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
199+
}
200+
.mobileChipsList .categoryCircleLabel {
201+
opacity: 0;
202+
transform: translateX(-4px);
203+
transition:
204+
opacity 0.2s ease,
205+
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
206+
}
207+
.mobileChipsList .categoryCircleExpanded {
208+
max-width: 200px;
209+
border-radius: 15px;
210+
padding: 0 10px;
211+
}
212+
.mobileChipsList .categoryCircleExpanded .categoryCircleLabel {
213+
opacity: 1;
214+
transform: translateX(0);
215+
transition:
216+
opacity 0.25s ease 0.12s,
217+
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
218+
}
219+
.ddayTargetDate {
220+
display: inline;
221+
font-size: 14px;
222+
color: #111111;
223+
}
224+
.bookmarkBtn {
225+
margin-left: auto;
226+
margin-right: 10px;
227+
margin-bottom: 0;
228+
}
229+
.chipsList {
230+
display: none;
231+
}
232+
.mobileChipsList {
233+
display: flex;
234+
gap: 12px;
235+
}
236+
237+
/* .categoryChip {
238+
border-radius: 10px;
239+
font-size: 13px;
240+
}
241+
.deadlineChip {
242+
border: none;
243+
font-size: 13px;
244+
font-weight: 500;
245+
} */
246+
247+
.orgText {
248+
display: none;
249+
margin-top: 0;
250+
}
251+
252+
.mobileDateOrg > .orgText {
253+
display: inline-block;
254+
font-size: 13px;
255+
color: #555555;
256+
font-weight: 500;
257+
}
258+
.mobileDateOrg {
259+
margin-bottom: 0;
260+
}
261+
}

‎src/styles/MonthSideView.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,4 +158,9 @@
158158
width: 24px;
159159
height: 24px;
160160
}
161+
.cardButton {
162+
padding: 0px;
163+
padding-top: 0px;
164+
box-shadow: none;
165+
}
161166
}

‎src/styles/Navigationbar.module.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.navbar {
2+
display: flex;
3+
width: 80%;
4+
padding: 20px 80px;
5+
justify-content: center;
6+
align-content: start;
7+
z-index: 20;
8+
outline: none;
9+
}
10+
11+
.logoButton {
12+
background: none;
13+
border-width: 0;
14+
display: flex;
15+
flex-direction: row;
16+
gap: 5px;
17+
align-content: center;
18+
cursor: pointer;
19+
outline: none;
20+
}
21+
22+
.logoImg {
23+
width: 35px;
24+
aspect-ratio: 1;
25+
}
26+
27+
.logoText {
28+
font-size: 25px;
29+
font-weight: 500;
30+
}

0 commit comments

Comments
 (0)