🎨 Design: Add Filter Component UI

package.json

@@ -14,6 +14,7 @@
     "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-query-devtools": "^5.91.1",
     "axios": "^1.13.2",
+    "clsx": "^2.1.1",
     "framer-motion": "^12.23.26",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

src/mocks/filterData.ts

@@ -0,0 +1,22 @@
+export const filterData = [
+  {
+    id: 1,
+    label: 'ALL',
+    value: 'ALL',
+  },
+  {
+    id: 2,
+    label: 'Subject1',
+    value: 'Subject1',
+  },
+  {
+    id: 3,
+    label: 'Subject2',
+    value: 'Subject2',
+  },
+  {
+    id: 4,
+    label: 'Subject3',
+    value: 'Subject3',
+  },
+];

src/pages/home/Home.tsx

@@ -1,4 +1,5 @@
 import Navbar from '../../components/Navbar/Navbar';
+import ListFilter from './components/Filter/ListFilter';
 import Alert from './components/Alert/Alert';
 import Banner from './components/Banner/Banner';
 import Chart from './components/Chart/Chart';
@@ -8,6 +9,7 @@ const Home = () => {
     <>
       <Banner />
       <Navbar />
+      <ListFilter />
       <Chart />
       <Alert />
     </>

src/pages/home/components/Filter/ItemFilter.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import type { FilterItem } from '../../../../types/filter.type';
+import { useFilterStore } from '../../../../stores/filterStore';
+
+interface ItemFilterProps {
+  item: FilterItem;
+}
+
+const ItemFilter = ({ item }: ItemFilterProps) => {
+  const { selectedFilter, setFilter } = useFilterStore();
+  const active = selectedFilter === item.value;
+
+  return (
+    <button
+      onClick={() => setFilter(item.value)}
+      className={clsx(
+        'px-[1.6rem] py-[0.6rem] rounded-[11.7rem] cursor-pointer text-[1.4rem] transition-colors',
+        active ? 'bg-main text-white' : 'bg-white text-font',
+      )}
+    >
+      {item.label}
+    </button>
+  );
+};
+
+export default ItemFilter;

src/pages/home/components/Filter/ListFilter.tsx

@@ -0,0 +1,14 @@
+import { filterData } from '../../../../mocks/filterData';
+import ItemFilter from './ItemFilter';
+
+const ListFilter = () => {
+  return (
+    <div className="w-full flex items-center gap-[0.6rem] px-4 mt-8 mb-[0.4rem]">
+      {filterData.map((item) => (
+        <ItemFilter key={item.id} item={item} />
+      ))}
+    </div>
+  );
+};
+
+export default ListFilter;

src/stores/filterStore.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+export type FilterValue = string;
+
+interface FilterState {
+  selectedFilter: FilterValue;
+  setFilter: (filter: FilterValue) => void;
+}
+
+export const useFilterStore = create<FilterState>((set) => ({
+  selectedFilter: 'ALL',
+  setFilter: (filter) => set({ selectedFilter: filter }),
+}));

src/types/filter.type.ts

@@ -0,0 +1,5 @@
+export interface FilterItem {
+  id: number;
+  label: string;
+  value: string;
+}