refactor: 필터 UI 기본 스타일 버튼 적용 (#ATR-571)

Atractorrr · Jul 20, 2024 · f91e7b8 · f91e7b8
1 parent fdb9d96
commit f91e7b8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 26 deletions.
diff --git a/apps/service/src/features/filter-article/ui/FilterButton.tsx b/apps/service/src/features/filter-article/ui/FilterButton.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import React, {
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  LegacyRef,
+  forwardRef,
+} from 'react'
+
+const FilterButton = forwardRef<
+  HTMLInputElement,
+  DetailedHTMLProps<
+    InputHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > & { active?: boolean }
+>(({ type, className, active: isActive = false, ...props }, ref) => (
+  <button
+    ref={ref as LegacyRef<HTMLButtonElement> | undefined}
+    type="button"
+    className={`flex items-center justify-center gap-2 rounded-lg px-3 py-2 transition-colors ${
+      isActive
+        ? 'bg-gray-700 text-gray-50 dark:bg-gray-50 dark:text-gray-700'
+        : 'bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'
+    }`}
+    {...props}
+  />
+))
+FilterButton.displayName = 'DefaultFilterButton'
+
+export default FilterButton
diff --git a/apps/service/src/features/filter-article/ui/FilterDropdownBtn.tsx b/apps/service/src/features/filter-article/ui/FilterDropdownBtn.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -12,6 +11,7 @@ import {
 import { AdjustmentHorizontalOutline, RefreshOutline } from '@attraction/icons'
 import { SortType } from '@/entities/user-article'
 import CategoryDropdown, { CategoryDropdownProps } from './CategoryDropdown'
+import FilterButton from './FilterButton'
 
 type FilterDropdownProps = CategoryDropdownProps & {
   sortType: SortType
@@ -32,18 +32,12 @@ export default function FilterDropdownBtn({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
-          className={`flex items-center justify-center gap-2 rounded-lg px-3 py-2  text-lg transition-colors xs:text-xl ${
-            selectedCategory
-              ? 'bg-gray-700 text-gray-50 dark:bg-gray-50 dark:text-gray-700'
-              : 'bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'
-          }`}
-          title="필터 설정">
-          <AdjustmentHorizontalOutline />
+        <FilterButton active={!!selectedCategory} title="필터 설정">
+          <AdjustmentHorizontalOutline className="text-lg xs:text-xl" />
           <span className="whitespace-nowrap pr-1 text-sm xs:text-base">
             필터
           </span>
-        </Button>
+        </FilterButton>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-52">
         <DropdownMenuLabel>카테고리</DropdownMenuLabel>

diff --git a/apps/service/src/features/filter-article/ui/HideReadToggleBtn.tsx b/apps/service/src/features/filter-article/ui/HideReadToggleBtn.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { Button } from '@attraction/design-system/dist'
 import { CheckOutline } from '@attraction/icons'
+import FilterButton from './FilterButton'
 
 interface HideReadToggleBtnProps {
   isRead: boolean
@@ -13,18 +13,14 @@ export default function HideReadToggleBtn({
   toggleHideFn,
 }: HideReadToggleBtnProps) {
   return (
-    <Button
-      className={`flex items-center justify-center gap-2 rounded-lg py-2 pl-3 pr-4 transition-colors ${
-        isRead
-          ? 'bg-gray-700 text-gray-50 dark:bg-gray-50 dark:text-gray-700'
-          : 'bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'
-      }`}
+    <FilterButton
+      active={isRead}
       title={`읽은 아티클 ${isRead ? '보기' : '숨김'}`}
       onClick={toggleHideFn}>
       <CheckOutline />
-      <span className="whitespace-nowrap text-sm xs:text-base">
+      <span className="whitespace-nowrap pr-1 text-sm xs:text-base">
         읽은 아티클 숨김
       </span>
-    </Button>
+    </FilterButton>
   )
 }
diff --git a/apps/service/src/features/filter-article/ui/SearchBar.tsx b/apps/service/src/features/filter-article/ui/SearchBar.tsx
@@ -1,9 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Input } from '@attraction/design-system/dist'
 import { BackspaceOutline, MagnifyingGlassOutline } from '@attraction/icons'
-
 import { useDebounce } from '@/shared/lib'
 
 interface SearchBarProps {
@@ -17,11 +15,9 @@ export default function SearchBar({ setValue }: SearchBarProps) {
   useEffect(() => setValue(debouncedValue), [debouncedValue, setValue])
 
   return (
-    <div className="relative min-w-52 xs:min-w-72">
-      <span className="absolute inset-y-0 left-0 my-auto inline-flex size-8 items-center justify-center text-base text-gray-500 xs:size-10 xs:text-lg dark:text-gray-400">
-        <MagnifyingGlassOutline />
-      </span>
-      <Input
+    <div className="relative block">
+      <MagnifyingGlassOutline className="absolute inset-y-0 left-2 my-auto ml-0.5 inline-flex size-4 items-center justify-center text-base text-gray-500 xs:size-5 dark:text-gray-400" />
+      <input
         className="block h-9 w-full rounded-lg border border-gray-100 bg-gray-50 px-8 py-1 text-sm outline-none transition-colors placeholder:text-gray-500 focus:border-blue-400 focus:bg-white xs:h-10 xs:px-10 xs:text-base dark:border-gray-700 dark:bg-gray-700 dark:placeholder:text-gray-400 dark:focus:bg-gray-800"
         placeholder="검색어를 입력해 주세요"
         type="search"