refactor: 검색하는 로직 분리

Author: ldhldh07

src/advanced/App.tsx

@@ -15,6 +15,11 @@ const App = () => {
   const { notifications, removeNotification } = useNotifications();
   const { cart, cartItemCount } = useCart();
 
+  // 검색 핸들러 - presenter layer
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  };
+
   return (
     <>
       <ToastContainer
@@ -32,7 +37,7 @@ const App = () => {
                   <input
                     type="text"
                     value={searchTerm}
-                    onChange={(event) => setSearchTerm(event.target.value)}
+                    onChange={handleSearchChange}
                     placeholder="상품 검색..."
                     className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                   />

src/advanced/components/cart/ProductList.tsx

@@ -1,4 +1,5 @@
 import { formatPriceForUser } from "../../models/product";
+import { filterProductsBySearchTerm } from "../../models/search";
 import { ImageIcon } from "../icons";
 import { getStockStatus } from "../../utils/validators";
 import { useCart } from "../../hooks/useCart";
@@ -14,18 +15,7 @@ export const ProductList = () => {
   const { products } = useProducts();
   const { addToCart, getStockForProduct } = useCart();
 
-  const filteredProducts = debouncedSearchTerm
-    ? products.filter(
-        (product) =>
-          product.name
-            .toLowerCase()
-            .includes(debouncedSearchTerm.toLowerCase()) ||
-          (product.description &&
-            product.description
-              .toLowerCase()
-              .includes(debouncedSearchTerm.toLowerCase()))
-      )
-    : products;
+  const filteredProducts = filterProductsBySearchTerm(products, debouncedSearchTerm);
   return (
     <section>
       <div className="mb-6 flex justify-between items-center">

src/advanced/models/search.ts

@@ -0,0 +1,49 @@
+import { ProductWithUI } from "./product";
+
+/**
+ * 상품 검색 필터링 함수
+ * 상품명과 설명에서 검색어를 찾아 필터링
+ */
+export const filterProductsBySearchTerm = (
+  products: ProductWithUI[],
+  searchTerm: string
+): ProductWithUI[] => {
+  if (!searchTerm.trim()) {
+    return products;
+  }
+
+  const normalizedSearchTerm = searchTerm.toLowerCase().trim();
+
+  return products.filter((product) => {
+    const matchesName = product.name
+      .toLowerCase()
+      .includes(normalizedSearchTerm);
+
+    const matchesDescription = product.description
+      ? product.description.toLowerCase().includes(normalizedSearchTerm)
+      : false;
+
+    return matchesName || matchesDescription;
+  });
+};
+
+/**
+ * 검색어 정규화 함수
+ */
+export const normalizeSearchTerm = (searchTerm: string): string => {
+  return searchTerm.toLowerCase().trim();
+};
+
+/**
+ * 검색 결과가 있는지 확인하는 함수
+ */
+export const hasSearchResults = (
+  products: ProductWithUI[],
+  searchTerm: string
+): boolean => {
+  if (!searchTerm.trim()) {
+    return true;
+  }
+
+  return filterProductsBySearchTerm(products, searchTerm).length > 0;
+};

src/basic/App.tsx

@@ -10,6 +10,7 @@ import { useNotifications } from "./hooks/useNotifications";
 import { createEmptyCouponForm } from "./models/coupon";
 import { useLocalStorage } from "./utils/hooks/useLocalStorage";
 import { useDebounce } from "./utils/hooks/useDebounce";
+
 import { CartIcon } from "./components/icons";
 import { ToastContainer } from "./components/ui";
 
@@ -73,6 +74,10 @@ const App = () => {
     handleDiscountRateChange,
   } = useProducts(initialProducts, onSuccess);
 
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  };
+
   return (
     <>
       <ToastContainer
@@ -90,7 +95,7 @@ const App = () => {
                   <input
                     type="text"
                     value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
+                    onChange={handleSearchChange}
                     placeholder="상품 검색..."
                     className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
                   />

src/basic/components/CartPage.tsx

@@ -3,7 +3,7 @@ import Cart from "./cart/Cart";
 import { calculateItemTotal } from "../models/cart";
 import { ProductList } from "./cart/ProductList";
 import { ProductWithUI } from "../models/product";
-import { NotificationType } from "../App";
+import { filterProductsBySearchTerm } from "../models/search";
 
 interface CartPageProps {
   products: ProductWithUI[];
@@ -57,18 +57,10 @@ export const CartPage = ({
 }: CartPageProps) => {
   const totals = calculateTotal(cart, selectedCoupon);
 
-  const filteredProducts = debouncedSearchTerm
-    ? products.filter(
-        (product) =>
-          product.name
-            .toLowerCase()
-            .includes(debouncedSearchTerm.toLowerCase()) ||
-          (product.description &&
-            product.description
-              .toLowerCase()
-              .includes(debouncedSearchTerm.toLowerCase()))
-      )
-    : products;
+  const filteredProducts = filterProductsBySearchTerm(
+    products,
+    debouncedSearchTerm
+  );
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">

src/basic/models/search.ts

@@ -0,0 +1,49 @@
+import { ProductWithUI } from "./product";
+
+/**
+ * 상품 검색 필터링 함수
+ * 상품명과 설명에서 검색어를 찾아 필터링
+ */
+export const filterProductsBySearchTerm = (
+  products: ProductWithUI[],
+  searchTerm: string
+): ProductWithUI[] => {
+  if (!searchTerm.trim()) {
+    return products;
+  }
+
+  const normalizedSearchTerm = searchTerm.toLowerCase().trim();
+
+  return products.filter((product) => {
+    const matchesName = product.name
+      .toLowerCase()
+      .includes(normalizedSearchTerm);
+
+    const matchesDescription = product.description
+      ? product.description.toLowerCase().includes(normalizedSearchTerm)
+      : false;
+
+    return matchesName || matchesDescription;
+  });
+};
+
+/**
+ * 검색어 정규화 함수
+ */
+export const normalizeSearchTerm = (searchTerm: string): string => {
+  return searchTerm.toLowerCase().trim();
+};
+
+/**
+ * 검색 결과가 있는지 확인하는 함수
+ */
+export const hasSearchResults = (
+  products: ProductWithUI[],
+  searchTerm: string
+): boolean => {
+  if (!searchTerm.trim()) {
+    return true;
+  }
+
+  return filterProductsBySearchTerm(products, searchTerm).length > 0;
+};