From f91e7b8173a4beeddd49cad5e728b8035811b4c1 Mon Sep 17 00:00:00 2001
From: ChanLee_KR <cl700120@gmail.com>
Date: Sat, 20 Jul 2024 22:56:06 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=95=84=ED=84=B0=20UI=20=EA=B8=B0?=
 =?UTF-8?q?=EB=B3=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9=20(#ATR-571)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../filter-article/ui/FilterButton.tsx        | 30 +++++++++++++++++++
 .../filter-article/ui/FilterDropdownBtn.tsx   | 14 +++------
 .../filter-article/ui/HideReadToggleBtn.tsx   | 14 ++++-----
 .../features/filter-article/ui/SearchBar.tsx  | 10 ++-----
 4 files changed, 42 insertions(+), 26 deletions(-)
 create mode 100644 apps/service/src/features/filter-article/ui/FilterButton.tsx

diff --git a/apps/service/src/features/filter-article/ui/FilterButton.tsx b/apps/service/src/features/filter-article/ui/FilterButton.tsx
new file mode 100644
index 00000000..b43ddd75
--- /dev/null
+++ 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
index a21784df..75cb0ffc 100644
--- 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
index 4362c2c6..44bacd4e 100644
--- 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
index 647d052d..6e23a6de 100644
--- 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"