Skip to content

Refactor/127 : 필터 사이드바 색상 수정 #128

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

Open
Han-wo wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Refactor/127 : 필터 사이드바 색상 수정 #128

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
79d0e27
feat: 사이드 필터 색상 변경
Han-wo Nov 21, 2024
a67dd3b
feat: 팝업/전시 필터 색상 변경
Han-wo Nov 21, 2024
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
2 changes: 1 addition & 1 deletion frontend/src/app/shows/_components/check-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function CheckboxList({
onCheckedChange={() => handleItemChange(item)}
className="mb-7 size-18 rounded-sm border-gray-300"
/>
<label htmlFor={item} className="mb-7 ml-5 text-16-400">
<label htmlFor={item} className="mb-7 ml-5 text-16-400 text-white">
{item}
</label>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/shows/_components/filter-acordian.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export default function FilterAccordion({
return (
<Accordion type="single" collapsible className="w-full">
<AccordionItem value={title} className="border-b border-gray-200">
<AccordionTrigger className="text-base flex size-40 justify-between p-4">
<div className="flex items-center gap-9">
<AccordionTrigger className="text-base flex size-40 justify-between p-4 text-white">
<div className="flex items-center gap-9 text-white">
{icon}
{title}
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/shows/_components/filter-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function FilterContainer() {
"absolute top-1/2 -translate-y-1/2",
"flex h-50 w-30 items-center justify-center rounded-r-md border",
isFilterOpen
? "border-gray-200 bg-white"
? "border-gray-1 bg-gray-1"
: "border-gray-1 bg-gray-1",
)}
animate={{
Expand All @@ -53,7 +53,7 @@ export default function FilterContainer() {
<HiOutlineAdjustmentsVertical
className={clsx(
"size-50",
isFilterOpen ? "text-gray-600" : "text-gray-3",
isFilterOpen ? "text-gray-3" : "text-gray-3",
)}
/>
</motion.button>
Expand Down
20 changes: 13 additions & 7 deletions frontend/src/app/shows/_components/filter-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,31 +99,37 @@ export default function FilterSidebar({ onClose }: FilterSidebarProps) {
};

return (
<aside className="flex size-full flex-col border-r border-gray-200 bg-white px-12 pt-40 md:h-screen lg:h-screen">
<aside className="flex size-full flex-col border-r border-gray-1 bg-gray-1 px-12 pt-40 md:h-screen lg:h-screen">
<div className="flex items-center justify-between border-b border-gray-200 px-4 py-3 md:px-5">
<div className="mb-8 flex items-center gap-9">
<BsFilterLeft className="size-20" />
<h2 className="text-18-400">필터</h2>
<BsFilterLeft className="size-20 text-white" />
<h2 className="text-18-400 text-white">필터</h2>
</div>
<button
type="button"
onClick={handleReset}
className="mb-8 size-18 text-gray-400 transition-colors hover:text-gray-600"
>
<FiRefreshCw className="size-20" />
<FiRefreshCw className="size-20 text-white" />
</button>
</div>

<div className="flex-1 overflow-y-auto">
<FilterAccordion title="태그" icon={<FiTag className="size-20" />}>
<FilterAccordion
title="태그"
icon={<FiTag className="size-20 text-white" />}
>
<TagButtonList
items={placeTypes}
selectedItems={selectedTags}
onChange={setSelectedTags}
/>
</FilterAccordion>

<FilterAccordion title="지역" icon={<FiMapPin className="size-22" />}>
<FilterAccordion
title="지역"
icon={<FiMapPin className="size-22 text-white" />}
>
<RegionSelector
selectedRegion={selectedRegion}
onChange={setSelectedRegion}
Expand All @@ -132,7 +138,7 @@ export default function FilterSidebar({ onClose }: FilterSidebarProps) {

<FilterAccordion
title="날짜"
icon={<LuCalendarDays className="size-20" />}
icon={<LuCalendarDays className="size-20 text-white" />}
>
<DateFilter
selectedDateRange={selectedDateRange}
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/app/shows/_components/shows-type-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,20 @@ export default function ShowTypeFilter() {

return (
<DropdownMenu>
<DropdownMenuTrigger className="mb-10 flex h-40 w-80 items-center justify-between rounded-10 border border-gray-300 bg-white px-10 text-16-600 transition-colors hover:bg-gray-50 focus:outline-none">
<DropdownMenuTrigger className="mb-10 flex h-40 w-80 items-center justify-between rounded-10 border border-gray-300 bg-white px-10 text-16-600 transition-colors ">
{selectedType === "popups" ? "팝업" : "전시"}
<ChevronDown className="ml-2 size-15" />
</DropdownMenuTrigger>
<DropdownMenuContent className="ml-30 mt-1 h-80 w-90 rounded-10 border border-gray-200 bg-white p-1 shadow-lg lg:ml-50">
<DropdownMenuContent className="ml-30 mt-1 h-80 w-90 rounded-10 border border-gray-300 bg-white p-1 shadow-lg lg:ml-50">
<DropdownMenuItem
onClick={() => handleTypeChange("popups")}
className="cursor-pointer rounded-5 p-10 text-16-600 transition-colors hover:bg-gray-100"
className="cursor-pointer rounded-5 p-10 text-16-600 transition-colors"
>
팝업
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleTypeChange("exhibition")}
className="cursor-pointer rounded-5 p-10 text-16-600 transition-colors hover:bg-gray-100"
className="cursor-pointer rounded-5 p-10 text-16-600 transition-colors "
>
전시
</DropdownMenuItem>
Expand Down