Skip to content

컴포넌트 shadow 추가 #264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Taeil08 merged 2 commits into from
Aug 4, 2025
Merged

컴포넌트 shadow 추가 #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f13d75a
✨[#256] Feat: 그림자 넣기
Taeil08 Aug 4, 2025
30f81dc
✨[#256] Feat: shadow 추가
Taeil08 Aug 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion apps/what-today/src/components/activities/ActivitiesReview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ export default function ActivitiesReview({ review }: ActivitiesReviewProps) {
<RatingStars rating={rating} />
</div>
<p className='body-text whitespace-pre-wrap'>{content}</p>

</div>
</motion.div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/what-today/src/components/notification/NotificationPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export default function NotificationPopover({ isMobile }: NotificationPopoverPro
<BellIcon className='size-20' color={open ? 'var(--color-primary-500)' : 'var(--color-gray-600)'} />
</Button>
</Popover.Trigger>
<Popover.Content className='mt-8 rounded-2xl border border-gray-100 bg-white p-10 shadow-sm'>
<Popover.Content className='mt-8 rounded-2xl border border-gray-100 bg-white p-10 shadow-[0_4px_24px_rgba(156,180,202,0.2)]'>
<h1 className='my-8 ml-auto px-16 font-bold text-gray-950'>알림 {data?.pages[0].totalCount ?? 0}개</h1>

<section ref={scrollContainerRef} className='relative max-h-400 w-300 overflow-y-scroll'>
Expand Down
2 changes: 1 addition & 1 deletion apps/what-today/src/components/reservations-status/ReservationCalendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export default function ReservationCalendar({
onOpenChange={setIsReservationSheetOpen}
>
<Popover.Content
className='rounded-2xl border border-gray-50 bg-white px-24 py-30'
className='rounded-2xl border border-gray-50 bg-white px-24 py-30 shadow-[0_4px_24px_rgba(156,180,202,0.2)]'
style={reservationPopupPosition}
>
<div className='h-460 w-292'>
Expand Down
30 changes: 26 additions & 4 deletions apps/what-today/src/pages/main/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,10 @@ export default function MainPage() {

{/* 모든 체험 */}
<div className='flex flex-col gap-20'>
{/* 제목 + 가격 드롭다운 */}
<div className='flex flex-wrap items-center justify-between gap-12'>
{/* 제목 */}
<div className='flex flex-wrap items-center justify-between gap-12 md:hidden'>
<h2 className='title-text flex items-center gap-12'>🛼 모든 체험</h2>
{/* 모바일에서만 보이는 가격 드롭다운 */}
<Select.Root value={selectedValue} onChangeValue={handleSortChange}>
<Select.Trigger className='flex min-w-fit gap-6 rounded-lg border border-gray-300 bg-white px-8 text-sm'>
<Select.Value className='body-text text-gray-950' placeholder='가격' />
Expand All @@ -211,8 +212,11 @@ export default function MainPage() {
</Select.Root>
</div>

{/* 카테고리 */}
<div className='overflow-x-hidden'>
{/* 데스크톱/태블릿에서만 보이는 제목 */}
<h2 className='title-text hidden items-center gap-12 md:flex'>🛼 모든 체험</h2>

{/* 카테고리 + 가격 드롭다운 */}
<div className='flex items-center justify-between gap-12 overflow-x-hidden'>
<RadioGroup
radioGroupClassName='items-center min-w-0 max-w-full overflow-x-auto no-scrollbar'
selectedValue={selectedCategory}
Expand All @@ -237,6 +241,24 @@ export default function MainPage() {
<TourIcon className='size-12' /> 웰빙
</RadioGroup.Radio>
</RadioGroup>
{/* 데스크톱/태블릿에서만 보이는 가격 드롭다운 */}
<div className='hidden md:block'>
<Select.Root value={selectedValue} onChangeValue={handleSortChange}>
<Select.Trigger className='flex min-w-fit gap-6 rounded-lg border border-gray-300 bg-white px-8 text-sm'>
<Select.Value className='body-text text-gray-950' placeholder='가격' />
</Select.Trigger>
<Select.Content>
<Select.Group className='caption-text text-center whitespace-nowrap'>
<Select.Item className='flex justify-center' value='desc'>
높은순
</Select.Item>
<Select.Item className='flex justify-center' value='asc'>
낮은순
</Select.Item>
</Select.Group>
</Select.Content>
</Select.Root>
</div>
</div>

{/* 카드 리스트 */}
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/Carousel/NavigationButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function NavigationButton({ direction, onClick, disabled, classNa

return (
<button
className={`z-10 ${marginClass} hidden size-40 cursor-pointer items-center justify-center rounded-full border border-gray-50 bg-white text-xl hover:bg-gray-50 disabled:opacity-0 md:flex ${className}`}
className={`z-10 ${marginClass} hidden size-40 cursor-pointer items-center justify-center rounded-full border border-gray-50 bg-white text-xl shadow-[0_4px_24px_rgba(156,180,202,0.2)] hover:bg-gray-50 disabled:opacity-0 md:flex ${className}`}
disabled={disabled}
onClick={onClick}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function DatePicker({ value, onChange, disabled }: DatePickerProp
</div>
</Popover.Trigger>

<Popover.Content className='date-picker mt-8 flex justify-end'>
<Popover.Content className='date-picker mt-8 flex justify-end shadow-[0_4px_24px_rgba(156,180,202,0.2)]'>
<div className='w-300 rounded-xl border border-gray-100 bg-white p-12'>
<Calendar.Root initialDate={today} onDateChange={handleDateChange}>
<Calendar.Header headerClass='my-12' />
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/select/SelectContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function SelectContent({ className, children }: BaseProps) {
<Popover.Content
matchTriggerWidth
className={twMerge(
'select-content mt-4 max-h-300 overflow-y-scroll rounded-2xl border border-gray-100 bg-white p-10',
'select-content mt-4 max-h-300 overflow-y-scroll rounded-2xl border border-gray-100 bg-white p-10 shadow-[0_4px_24px_rgba(156,180,202,0.2)]',
className,
)}
>
Expand Down