feat: add serach service on roster page

backend/app/src/roster/roster.controller.ts

@@ -29,10 +29,16 @@ export class RosterController {
   async getRosters(
     @Query('page', ParseIntPipe) page: number,
     @Query('limit', new ParseIntPipe({ optional: true })) limit?: number,
-    @Query('filter') filter?: string
+    @Query('filter') filter?: string,
+    @Query('searchTerm') searchTerm?: string
   ): Promise<{ total: number; rosters: Roster[] }> {
     try {
-      return await this.rosterService.getRosters(page, limit, filter)
+      return await this.rosterService.getRosters(
+        page,
+        limit,
+        searchTerm,
+        filter
+      )
     } catch (error) {
       BusinessExceptionHandler(error)
     }

backend/app/src/roster/roster.service.ts

@@ -71,14 +71,18 @@ export class RosterService {
   async getRosters(
     page: number,
     limit = 10,
+    searchTerm = '',
     filter?: string
   ): Promise<{ total: number; rosters: Roster[] }> {
     try {
       const status = this.checkRosterStatus(filter)
 
       const rosters = await this.prisma.roster.findMany({
         where: {
-          status
+          status,
+          name: {
+            contains: searchTerm
+          }
         },
         take: limit,
         skip: calculatePaginationOffset(page, limit),
@@ -100,7 +104,10 @@ export class RosterService {
 
       const total = await this.prisma.roster.count({
         where: {
-          status
+          status,
+          name: {
+            contains: searchTerm
+          }
         }
       })
 

frontend/src/app/console/roster/page.tsx

@@ -1,8 +1,10 @@
 import Pagination from '@/components/Pagination'
+import Search from '@/components/Search'
 import { Button } from '@/components/ui/button'
 import { getRosters } from '@/lib/actions'
 import { calculateTotalPages } from '@/lib/utils'
 import { PAGINATION_LIMIT_DEFAULT } from '@/lib/vars'
+import { SearchIcon } from 'lucide-react'
 import Link from 'next/link'
 import RosterListTable from './_components/RosterListTable'
 
@@ -11,10 +13,12 @@ export default async function RosterPage({
 }: {
   searchParams?: {
     page?: string
+    searchTerm?: string
   }
 }) {
   const currentPage = Number(searchParams?.page) || 1
-  const rosterList = await getRosters(currentPage)
+  const searchTerm = searchParams?.searchTerm || ''
+  const rosterList = await getRosters(currentPage, searchTerm)
 
   return (
     <main className="mx-auto flex w-full flex-grow flex-col items-center justify-start">
@@ -25,6 +29,10 @@ export default async function RosterPage({
         </Link>
       </div>
       <div className="flex w-full flex-grow flex-col gap-5 py-4 sm:px-6">
+        <div className="flex max-w-[340px] items-center space-x-2">
+          <SearchIcon className="h-6 w-6" />
+          <Search placeholder="이름 검색" />
+        </div>
         <RosterListTable rosters={rosterList.rosters} />
         <Pagination
           totalPages={calculateTotalPages(

frontend/src/lib/actions.ts

@@ -28,9 +28,12 @@ export const getRoster = async (rosterId: number): Promise<Roster> => {
   return await fetcher.get<Roster>(`/rosters/${rosterId}`)
 }
 
-export const getRosters = async (page: number): Promise<RosterList> => {
+export const getRosters = async (
+  page: number,
+  searchTerm: string
+): Promise<RosterList> => {
   return await fetcher.get<RosterList>(
-    `/rosters?page=${page}&limit=${PAGINATION_LIMIT_DEFAULT}&filter=Enable`
+    `/rosters?page=${page}&limit=${PAGINATION_LIMIT_DEFAULT}&filter=Enable&searchTerm=${searchTerm}`
   )
 }