Skip to content

Commit b24877f

Browse files
author
jyn
committed
Merge branch 'dev'
2 parents e463670 + 65eb1e0 commit b24877f

File tree

5 files changed

+160
-75
lines changed

5 files changed

+160
-75
lines changed

‎src/features/activities/components/all-activities.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ const AllActivities = ({ keyword }: AllActivitiesProps) => {
142142
onClick={() => handleCategoryChange(name)}
143143
>
144144
<Icon
145-
className={`size-[1.7rem] ${active === name ? 'text-white' : 'text-gray-950'}`}
145+
className={`size-[1.7rem] ${active === name ? 'text-white' : 'group-hover:text-main text-gray-950'} `}
146146
/>
147147
{name}
148148
</Button>

‎src/features/activities/components/notification-button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
import Image from 'next/image';
44
import { useEffect, useRef } from 'react';
55

6+
import NotificationModal from '@/features/activities/components/notification-modal';
67
import { useNotifications } from '@/features/activities/libs/hooks/useNotifications';
7-
import NotificationModal from '@/shared/components/modal/components/notification-modal';
88
import { useNotificationStore } from '@/shared/libs/stores/useNotificationStore';
99

1010
const NotificationButton = () => {

src/shared/components/modal/components/notification-modal.tsx renamed to src/features/activities/components/notification-modal.tsx

File renamed without changes.

‎src/features/activities/components/search.tsx‎

Lines changed: 155 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const Search: React.FC<SearchProps> = ({
7272
const style = searchVariant.main;
7373

7474
const dropdownBtnClass =
75-
'flex w-[20rem] items-center justify-between rounded txt-14-medium text-gray-700 bg-transparent hover:bg-gray-50 cursor-pointer';
75+
'flex lg:w-[20rem] md:w-[6rem] items-center justify-between rounded txt-14-medium text-gray-700 bg-transparent hover:bg-gray-50 cursor-pointer';
7676

7777
const dropdownMenuClass =
7878
'mt-2 w-full bg-white rounded-xl shadow-lg border border-gray-100 p-2 space-y-2 txt-14-medium';
@@ -83,7 +83,7 @@ const Search: React.FC<SearchProps> = ({
8383
return (
8484
<div className={style.wrapper}>
8585
<p className={style.title}>무엇을 체험하고 싶으신가요?</p>
86-
<div className={style.inputBox}>
86+
<div className={style.inputBox + 'flex gap-2'}>
8787
<input
8888
type="text"
8989
value={keyword}
@@ -92,94 +92,179 @@ const Search: React.FC<SearchProps> = ({
9292
onFocus={() => setIsFocused(true)}
9393
onBlur={() => setIsFocused(false)}
9494
placeholder={isFocused ? '' : placeholder}
95-
className={style.input}
95+
className={` ${style.input} `}
9696
/>
9797

98-
<div className="mx-5 h-12 border-r border-gray-300"></div>
98+
<div className="mr-5 h-12 border-r border-gray-300"></div>
9999

100-
{/* 지역 */}
101-
<div className="flex items-center gap-2">
102-
<Dropdown
103-
trigger={
104-
<button type="button" className={dropdownBtnClass}>
105-
<span>{region || '지역'}</span>
100+
{/* PC/Tablet 전용 */}
101+
<div className="hidden gap-4 md:flex">
102+
{/* 지역 */}
103+
<div className="flex min-w-[8rem] items-center">
104+
<Dropdown
105+
trigger={
106+
<button type="button" className={dropdownBtnClass}>
107+
<span>{region || '지역'}</span>
108+
</button>
109+
}
110+
dropdownClassName={dropdownMenuClass}
111+
>
112+
{(close) =>
113+
regionOptions.map((option) => (
114+
<button
115+
key={option}
116+
type="button"
117+
className={optionBtnClass}
118+
onClick={() => {
119+
setRegion(option);
120+
close();
121+
}}
122+
>
123+
{option}
124+
</button>
125+
))
126+
}
127+
</Dropdown>
128+
{region && (
129+
<button
130+
type="button"
131+
onClick={() => setRegion('')}
132+
className="text-gray-400 hover:text-gray-600"
133+
>
134+
<X className="size-6" />
106135
</button>
107-
}
108-
dropdownClassName={dropdownMenuClass}
109-
>
110-
{(close) =>
111-
regionOptions.map((option) => (
112-
<button
113-
key={option}
114-
type="button"
115-
className={optionBtnClass}
116-
onClick={() => {
117-
setRegion(option);
118-
close();
119-
}}
120-
>
121-
{option}
136+
)}
137+
</div>
138+
139+
<div className="mr-5 h-12 border-r border-gray-300"></div>
140+
141+
{/* 카테고리 */}
142+
<div className="flex min-w-[8rem] items-center">
143+
<Dropdown
144+
trigger={
145+
<button type="button" className={dropdownBtnClass}>
146+
<span>{category || '카테고리'}</span>
122147
</button>
123-
))
124-
}
125-
</Dropdown>
126-
{region && (
127-
<button
128-
type="button"
129-
onClick={() => setRegion('')}
130-
className="text-gray-400 hover:text-gray-600"
148+
}
149+
dropdownClassName={dropdownMenuClass}
131150
>
132-
<X className="size-6" />
133-
</button>
134-
)}
135-
</div>
151+
{(close) =>
152+
categoryOptions.map((option) => (
153+
<button
154+
key={option}
155+
type="button"
156+
className={optionBtnClass}
157+
onClick={() => {
158+
setCategory(option);
159+
close();
160+
}}
161+
>
162+
{option}
163+
</button>
164+
))
165+
}
166+
</Dropdown>
167+
{category && (
168+
<button
169+
type="button"
170+
onClick={() => setCategory('')}
171+
className="text-gray-400 hover:text-gray-600"
172+
>
173+
<X className="size-6" />
174+
</button>
175+
)}
176+
</div>
136177

137-
<div className="mx-5 h-12 border-r border-gray-300"></div>
178+
<div className="h-12 border-r border-gray-300"></div>
179+
</div>
138180

139-
{/* 카테고리 */}
140-
<div className="flex items-center gap-2">
181+
{/* Mobile 전용 */}
182+
<div className="flex md:hidden">
141183
<Dropdown
142184
trigger={
143-
<button type="button" className={dropdownBtnClass}>
144-
<span>{category || '카테고리'}</span>
185+
<button
186+
className={`${dropdownBtnClass} flex max-w-[20rem] items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap`}
187+
>
188+
{/* 지역 */}
189+
<span className="flex items-center gap-1">
190+
{region || '지역'}
191+
{region && (
192+
<X
193+
className="size-4 text-gray-400 hover:text-gray-600"
194+
onClick={(e) => {
195+
e.stopPropagation();
196+
setRegion('');
197+
}}
198+
/>
199+
)}
200+
</span>
201+
<span>/</span>
202+
{/* 카테고리 */}
203+
<span className="flex items-center gap-1">
204+
{category || '카테고리'}
205+
{category && (
206+
<X
207+
className="size-4 text-gray-400 hover:text-gray-600"
208+
onClick={(e) => {
209+
e.stopPropagation();
210+
setCategory('');
211+
}}
212+
/>
213+
)}
214+
</span>
145215
</button>
146216
}
147-
dropdownClassName={dropdownMenuClass}
217+
dropdownClassName="fixed top-[38rem] right-[4rem] mt-2 w-[30rem] bg-white rounded-xl shadow-lg border border-gray-100 p-4 grid grid-cols-2 gap-4 txt-14-medium"
148218
>
149-
{(close) =>
150-
categoryOptions.map((option) => (
151-
<button
152-
key={option}
153-
type="button"
154-
className={optionBtnClass}
155-
onClick={() => {
156-
setCategory(option);
157-
close();
158-
}}
159-
>
160-
{option}
161-
</button>
162-
))
163-
}
219+
{(close) => (
220+
<>
221+
<div>
222+
<p className="txt-14-medium px-1 py-2 text-gray-600">지역</p>
223+
<div className="flex flex-col space-y-1">
224+
{regionOptions.map((option) => (
225+
<button
226+
key={option}
227+
className={optionBtnClass}
228+
onClick={() => {
229+
setRegion(option);
230+
close();
231+
}}
232+
>
233+
{option}
234+
</button>
235+
))}
236+
</div>
237+
</div>
238+
239+
<div>
240+
<p className="txt-14-medium px-1 py-2 text-gray-600">
241+
카테고리
242+
</p>
243+
<div className="flex flex-col space-y-1">
244+
{categoryOptions.map((option) => (
245+
<button
246+
key={option}
247+
className={optionBtnClass}
248+
onClick={() => {
249+
setCategory(option);
250+
close();
251+
}}
252+
>
253+
{option}
254+
</button>
255+
))}
256+
</div>
257+
</div>
258+
</>
259+
)}
164260
</Dropdown>
165-
{category && (
166-
<button
167-
type="button"
168-
onClick={() => setCategory('')}
169-
className="text-gray-400 hover:text-gray-600"
170-
>
171-
<X className="size-6" />
172-
</button>
173-
)}
174261
</div>
175262

176-
<div className="mx-5 h-12 border-r border-gray-300"></div>
177-
178263
<Button
179264
color="blue"
180265
ariaLabel="검색하기"
181266
onClick={handleSearch}
182-
extraClassName={`${style.button} mx-7 flex items-center justify-center !w-[5rem] !h-[5rem] rounded-full`}
267+
extraClassName={`${style.button} mx-7 flex items-center justify-center !w-[3rem] !h-[3rem] md:!w-[5rem] md:!h-[5rem] rounded-full`}
183268
>
184269
<SearchIcon className="h-8 w-8" />
185270
</Button>

‎src/shared/libs/constants/searchVariant.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
export const searchVariant = {
22
main: {
33
wrapper:
4-
'flex-center flex-col gap-[1.2rem] py-[1.6rem] md:py-[3.2rem] md:px-[4rem] md:gap-[3.6rem] mt-[1.2rem] lg:mt-[3rem]',
4+
'flex-center flex-col gap-[1.2rem] py-[1.6rem] px-[2.4rem] md:py-[3.2rem] md:px-[4rem] md:gap-[3.6rem] mt-[1.2rem] lg:mt-[3rem]',
55
title: 'font-bold text-[1.6rem] text-gray-950 md:text-[3.2rem] pb-[1rem]',
66
inputBox:
7-
'flex w-[32.7rem] h-[4.9rem] md:w-[62.8rem] items-center rounded-full bg-white border focus-within:border-[#3D9EF2] py-[0.6rem] pr-[0.8rem] pl-[2rem] shadow-experience-card md:h-[7rem] md:w-[62.8rem] lg:w-[104rem] md:py-[1rem] md:pr-[1.2rem] md:pl-[3.2rem]',
7+
'flex w-full sm:min-w-[32.7rem] sm:max-w-[70.4rem] md:min-w-[69.3rem] md:max-w-[92.9rem] lg:min-w-[92.9rem] lg:max-w-[104rem] h-[4.9rem] items-center rounded-full bg-white border focus-within:border-[#3D9EF2] py-[0.6rem] pr-[0.8rem] pl-[2rem] shadow-experience-card md:h-[7rem] md:py-[1rem] md:pr-[1.2rem] md:pl-[3.2rem]',
88
input:
9-
'text-medium flex-1 px-4 text-[1.4rem] text-black outline-none placeholder:text-gray-500 md:text-[1.8rem] caret-[#0094FF]',
9+
'txt-16-medium flex-1 px-5 text-black outline-none placeholder:text-gray-500 md:text-[1.8rem] caret-[#0094FF]',
1010
button:
1111
'font-bold bg-main h-[3.7rem] w-[8.5rem] rounded-full text-[1.4rem] text-white md:h-[5rem] md:w-[12rem] md:text-[1.6rem]',
1212
},

0 commit comments

Comments
 (0)