From 2664d5f8bff9738d395344c9aa7e7c80d2f7797c Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Mon, 11 Aug 2025 21:09:36 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20library=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=97=90=20=EB=8C=80=ED=95=9C=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=9C=A0=EB=8B=9B=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../library/_components/GenreBadge.test.tsx   |  35 +++++
 src/app/library/_components/GenreBadge.tsx    |   1 +
 .../_components/LibraryListContainer.test.tsx | 138 ++++++++++++++++++
 .../library/_components/SearchInput.test.tsx  |  85 +++++++++++
 4 files changed, 259 insertions(+)
 create mode 100644 src/app/library/_components/GenreBadge.test.tsx
 create mode 100644 src/app/library/_components/LibraryListContainer.test.tsx
 create mode 100644 src/app/library/_components/SearchInput.test.tsx

diff --git a/src/app/library/_components/GenreBadge.test.tsx b/src/app/library/_components/GenreBadge.test.tsx
new file mode 100644
index 00000000..92e5b0f6
--- /dev/null
+++ b/src/app/library/_components/GenreBadge.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import GenreBadge from '@/app/library/_components/GenreBadge';
+
+describe('GenreBadge 테스트', () => {
+  const mockDispatch = jest.fn();
+
+  const setup = (selectedGenres: string[] = []) => {
+    mockDispatch.mockClear();
+    render(
+      <GenreBadge
+        dispatchSelectedGenres={mockDispatch}
+        selectedGenres={selectedGenres}
+      />
+    );
+  };
+  it('모든 장르 버튼이 렌더링됨', () => {
+    setup();
+    ['전체', '판타지', '로맨스', '스릴러/미스터리', '무협'].forEach((genre) => {
+      expect(screen.getByRole('button', { name: genre })).toBeInTheDocument();
+    });
+  });
+
+  it('"판타지" 배지를 클릭하면 ["판타지"]로 dispatch', () => {
+    setup();
+    const fantasyBadge = screen.getByRole('button', { name: '판타지' });
+    fantasyBadge.click();
+    expect(mockDispatch).toHaveBeenCalledWith(['판타지']);
+  });
+
+  it('선택된 장르는 active 스타일이 적용됨', () => {
+    setup(['판타지']);
+    const fantasyBadge = screen.getByRole('button', { name: '판타지' });
+    expect(fantasyBadge).toHaveClass('bg-black', 'text-white');
+  });
+});
diff --git a/src/app/library/_components/GenreBadge.tsx b/src/app/library/_components/GenreBadge.tsx
index b9e8956f..ef6f95ac 100644
--- a/src/app/library/_components/GenreBadge.tsx
+++ b/src/app/library/_components/GenreBadge.tsx
@@ -30,6 +30,7 @@ const GenreBadge = ({
           <button
             type="button"
             key={genre}
+            name={genre}
             onClick={() => updateSelectedGenre(genre)}
             className={`flex-center rounded-md px-2 py-1 text-xs transition-all sm:text-sm ${
               isActive ? 'bg-black text-white' : 'bg-gray-200 text-black'
diff --git a/src/app/library/_components/LibraryListContainer.test.tsx b/src/app/library/_components/LibraryListContainer.test.tsx
new file mode 100644
index 00000000..91ef8ac1
--- /dev/null
+++ b/src/app/library/_components/LibraryListContainer.test.tsx
@@ -0,0 +1,138 @@
+import { render, screen } from '@testing-library/react';
+import LibraryListContainer from '@/app/library/_components/LibraryListContainer';
+
+interface Story {
+  id: number;
+  title: string;
+}
+
+jest.mock('@/hooks/api/library/useInfiniteStories', () => ({
+  useInfiniteStories: jest.fn(),
+}));
+jest.mock('@/hooks/useCurrentViewPort', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+jest.mock('@/app/library/_components/LibraryListGrid', () => ({
+  __esModule: true,
+  default: ({ stories }: { stories: Story[] }) => (
+    <div data-testid="library-list-grid">
+      {stories.map((s) => (
+        <div key={s.id}>{s.title}</div>
+      ))}
+    </div>
+  ),
+}));
+jest.mock('@/app/library/_components/LibraryListSkeleton', () => ({
+  __esModule: true,
+  default: () => <div data-testid="skeleton">로딩중...</div>,
+}));
+jest.mock('@/components/common/Observer/Observer', () => ({
+  __esModule: true,
+  default: ({ enabled }: { enabled: boolean }) => (
+    <div data-testid="observer">{enabled ? 'enabled' : 'disabled'}</div>
+  ),
+}));
+
+import { useInfiniteStories } from '@/hooks/api/library/useInfiniteStories';
+import useCurrentViewPort from '@/hooks/useCurrentViewPort';
+
+describe('LibraryListContainer', () => {
+  const mockUseInfiniteStories = useInfiniteStories as jest.Mock;
+  const mockUseCurrentViewPort = useCurrentViewPort as jest.Mock;
+
+  const defaultProps = {
+    keyword: '',
+    searchType: '제목',
+    genres: [],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseCurrentViewPort.mockReturnValue({ viewportWidth: 1200 });
+  });
+
+  it('로딩 상태일 때 Skeleton을 렌더링한다', () => {
+    mockUseInfiniteStories.mockReturnValue({
+      data: undefined,
+      fetchNextPage: jest.fn(),
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      isLoading: true,
+    });
+
+    render(
+      <LibraryListContainer {...defaultProps} searchType={'제목' as const} />
+    );
+
+    expect(screen.getByTestId('skeleton')).toBeInTheDocument();
+  });
+
+  it('스토리가 없고 keyword가 빈 문자열이면 "아직 스토리가 없어요" 메시지를 표시한다', () => {
+    mockUseInfiniteStories.mockReturnValue({
+      data: { pages: [[]] },
+      fetchNextPage: jest.fn(),
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      isLoading: false,
+    });
+
+    render(
+      <LibraryListContainer {...defaultProps} searchType={'제목' as const} />
+    );
+
+    expect(screen.getByText('아직 스토리가 없어요')).toBeInTheDocument();
+  });
+
+  it('스토리가 없고 keyword가 있으면 "검색된 스토리가 없어요" 메시지를 표시한다', () => {
+    mockUseInfiniteStories.mockReturnValue({
+      data: { pages: [[]] },
+      fetchNextPage: jest.fn(),
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      isLoading: false,
+    });
+
+    render(
+      <LibraryListContainer keyword="테스트" searchType="제목" genres={[]} />
+    );
+
+    expect(screen.getByText('검색된 스토리가 없어요')).toBeInTheDocument();
+  });
+
+  it('스토리가 있으면 LibraryListGrid와 Observer를 렌더링한다', () => {
+    const stories = [{ id: 1, title: 'Story 1' }];
+    mockUseInfiniteStories.mockReturnValue({
+      data: { pages: [stories] },
+      fetchNextPage: jest.fn(),
+      hasNextPage: true,
+      isFetchingNextPage: false,
+      isLoading: false,
+    });
+
+    render(
+      <LibraryListContainer {...defaultProps} searchType={'제목' as const} />
+    );
+
+    expect(screen.getByTestId('library-list-grid')).toBeInTheDocument();
+    expect(screen.getByTestId('observer')).toHaveTextContent('enabled');
+    expect(screen.getByText('Story 1')).toBeInTheDocument();
+  });
+
+  it('hasNextPage가 false이면 Observer가 disabled 상태로 렌더링된다', () => {
+    const stories = [{ id: 1, title: 'Story 1' }];
+    mockUseInfiniteStories.mockReturnValue({
+      data: { pages: [stories] },
+      fetchNextPage: jest.fn(),
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      isLoading: false,
+    });
+
+    render(
+      <LibraryListContainer {...defaultProps} searchType={'제목' as const} />
+    );
+
+    expect(screen.getByTestId('observer')).toHaveTextContent('disabled');
+  });
+});
diff --git a/src/app/library/_components/SearchInput.test.tsx b/src/app/library/_components/SearchInput.test.tsx
new file mode 100644
index 00000000..4de2108e
--- /dev/null
+++ b/src/app/library/_components/SearchInput.test.tsx
@@ -0,0 +1,85 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import SearchInput from '@/app/library/_components/SearchInput';
+
+describe('SearchInput 테스트', () => {
+  const mockSetKeyword = jest.fn();
+  const mockOnSearch = jest.fn();
+
+  const setup = (keyword = '') => {
+    mockSetKeyword.mockClear();
+    mockOnSearch.mockClear();
+    render(
+      <SearchInput
+        keyword={keyword}
+        setKeyword={mockSetKeyword}
+        onSearch={mockOnSearch}
+      />
+    );
+  };
+
+  it('초기 렌더링 시 입력창에 keyword 값이 반영된다', () => {
+    setup('초기값');
+    const input = screen.getByLabelText(
+      '스토리 제목으로 검색'
+    ) as HTMLInputElement;
+    expect(input.value).toBe('초기값');
+  });
+
+  it('검색어를 입력하면 setKeyword가 호출된다', () => {
+    setup();
+    const input = screen.getByLabelText('스토리 제목으로 검색');
+    fireEvent.change(input, { target: { value: '천마재림' } });
+
+    expect(mockSetKeyword).toHaveBeenCalledWith('천마재림');
+  });
+
+  it('검색어 입력 시 초기화 버튼이 나타난다', () => {
+    setup();
+    const input = screen.getByLabelText('스토리 제목으로 검색');
+    fireEvent.change(input, { target: { value: '천마재림' } });
+
+    expect(screen.getByLabelText('검색어 초기화')).toBeInTheDocument();
+  });
+
+  it('검색어를 입력하고 엔터키를 눌렀을 때 onSearch가 호출된다', () => {
+    setup();
+    const input = screen.getByLabelText('스토리 제목으로 검색');
+
+    fireEvent.change(input, { target: { value: '천마재림' } });
+    // typescript Non-null 처리
+    fireEvent.submit(input.closest('form')!);
+
+    expect(mockOnSearch).toHaveBeenCalled();
+  });
+
+  it('검색어를 입력하고 검색 버튼을 클릭했을 때 onSearch가 호출된다', () => {
+    setup();
+    const input = screen.getByLabelText('스토리 제목으로 검색');
+    const searchButton = screen.getByLabelText('검색');
+
+    fireEvent.change(input, { target: { value: '천마재림' } });
+    fireEvent.click(searchButton);
+
+    expect(mockOnSearch).toHaveBeenCalled();
+  });
+
+  it('초기화 버튼 클릭 시 setKeyword가 빈 문자열로 호출되고 입력값이 비워진다', () => {
+    setup('천마재림');
+    const clearButton = screen.getByLabelText('검색어 초기화');
+    fireEvent.click(clearButton);
+
+    expect(mockSetKeyword).toHaveBeenCalledWith('');
+    const input = screen.getByLabelText(
+      '스토리 제목으로 검색'
+    ) as HTMLInputElement;
+    expect(input.value).toBe('');
+  });
+
+  it('검색어가 비워질 때 onSearch가 자동 호출된다', () => {
+    setup('천마재림');
+    const input = screen.getByLabelText('스토리 제목으로 검색');
+    fireEvent.change(input, { target: { value: '' } });
+
+    expect(mockOnSearch).toHaveBeenCalled();
+  });
+});

From 6ef81dbc83fc95d34ea71173cfa2775f8f93f3c8 Mon Sep 17 00:00:00 2001
From: hoxey2react <hoxey2react@gmail.com>
Date: Fri, 15 Aug 2025 18:48:36 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EC=86=8D=EB=8F=84=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../library/_components/GenreBadge.test.tsx   | 25 ++++---
 src/app/library/_components/GenreBadge.tsx    |  3 +-
 .../_components/LibraryListContainer.test.tsx | 73 ++++++-------------
 .../library/_components/SearchInput.test.tsx  | 65 ++++++++---------
 4 files changed, 69 insertions(+), 97 deletions(-)

diff --git a/src/app/library/_components/GenreBadge.test.tsx b/src/app/library/_components/GenreBadge.test.tsx
index 92e5b0f6..753f296c 100644
--- a/src/app/library/_components/GenreBadge.test.tsx
+++ b/src/app/library/_components/GenreBadge.test.tsx
@@ -1,35 +1,40 @@
-import { render, screen } from '@testing-library/react';
-import GenreBadge from '@/app/library/_components/GenreBadge';
+import { render, screen, fireEvent } from '@testing-library/react';
+import GenreBadge, { GENRES } from '@/app/library/_components/GenreBadge';
 
 describe('GenreBadge 테스트', () => {
   const mockDispatch = jest.fn();
+  let buttons: HTMLElement[];
 
   const setup = (selectedGenres: string[] = []) => {
-    mockDispatch.mockClear();
     render(
       <GenreBadge
         dispatchSelectedGenres={mockDispatch}
         selectedGenres={selectedGenres}
       />
     );
+    buttons = screen.getAllByRole('button');
   };
+
+  beforeEach(() => {
+    mockDispatch.mockClear();
+  });
+
   it('모든 장르 버튼이 렌더링됨', () => {
     setup();
-    ['전체', '판타지', '로맨스', '스릴러/미스터리', '무협'].forEach((genre) => {
-      expect(screen.getByRole('button', { name: genre })).toBeInTheDocument();
-    });
+    const buttonLabels = buttons.map((btn) => btn.textContent);
+    expect(buttonLabels).toEqual(GENRES);
   });
 
   it('"판타지" 배지를 클릭하면 ["판타지"]로 dispatch', () => {
     setup();
-    const fantasyBadge = screen.getByRole('button', { name: '판타지' });
-    fantasyBadge.click();
+    const fantasyBadge = buttons.find((btn) => btn.textContent === '판타지')!;
+    fireEvent.click(fantasyBadge);
     expect(mockDispatch).toHaveBeenCalledWith(['판타지']);
   });
 
-  it('선택된 장르는 active 스타일이 적용됨', () => {
+  it('선택된 장르는 aria-pressed=true', () => {
     setup(['판타지']);
     const fantasyBadge = screen.getByRole('button', { name: '판타지' });
-    expect(fantasyBadge).toHaveClass('bg-black', 'text-white');
+    expect(fantasyBadge).toHaveAttribute('aria-pressed', 'true');
   });
 });
diff --git a/src/app/library/_components/GenreBadge.tsx b/src/app/library/_components/GenreBadge.tsx
index ef6f95ac..6536013b 100644
--- a/src/app/library/_components/GenreBadge.tsx
+++ b/src/app/library/_components/GenreBadge.tsx
@@ -3,7 +3,7 @@ import { GenreBadgeProps, GenreTypeWithAll } from './type';
 
 export const GENRE_ALL = '전체';
 
-const GENRES = [
+export const GENRES = [
   GENRE_ALL,
   ...Object.keys(GENRE_LOCATION_MAP),
 ] as GenreTypeWithAll[];
@@ -31,6 +31,7 @@ const GenreBadge = ({
             type="button"
             key={genre}
             name={genre}
+            aria-pressed={selectedGenres.includes(genre)}
             onClick={() => updateSelectedGenre(genre)}
             className={`flex-center rounded-md px-2 py-1 text-xs transition-all sm:text-sm ${
               isActive ? 'bg-black text-white' : 'bg-gray-200 text-black'
diff --git a/src/app/library/_components/LibraryListContainer.test.tsx b/src/app/library/_components/LibraryListContainer.test.tsx
index 91ef8ac1..836f8edb 100644
--- a/src/app/library/_components/LibraryListContainer.test.tsx
+++ b/src/app/library/_components/LibraryListContainer.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import LibraryListContainer from '@/app/library/_components/LibraryListContainer';
+import { LibraryListContainerProps } from '@/app/library/_components/type';
 
 interface Story {
   id: number;
@@ -36,12 +37,13 @@ jest.mock('@/components/common/Observer/Observer', () => ({
 
 import { useInfiniteStories } from '@/hooks/api/library/useInfiniteStories';
 import useCurrentViewPort from '@/hooks/useCurrentViewPort';
+import { VIEWPORT_BREAK_POINT } from '@/constants/viewportBreakPoint';
 
 describe('LibraryListContainer', () => {
   const mockUseInfiniteStories = useInfiniteStories as jest.Mock;
   const mockUseCurrentViewPort = useCurrentViewPort as jest.Mock;
 
-  const defaultProps = {
+  const defaultProps: LibraryListContainerProps = {
     keyword: '',
     searchType: '제목',
     genres: [],
@@ -49,42 +51,41 @@ describe('LibraryListContainer', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    mockUseCurrentViewPort.mockReturnValue({ viewportWidth: 1200 });
+    mockUseCurrentViewPort.mockReturnValue({
+      viewportWidth: (VIEWPORT_BREAK_POINT.LG + VIEWPORT_BREAK_POINT.XL) / 2,
+    });
   });
 
-  it('로딩 상태일 때 Skeleton을 렌더링한다', () => {
+  const setup = (
+    storyData?: Story[],
+    options?: Partial<ReturnType<typeof useInfiniteStories>>
+  ) => {
     mockUseInfiniteStories.mockReturnValue({
-      data: undefined,
+      data: storyData ? { pages: [storyData] } : { pages: [[]] },
       fetchNextPage: jest.fn(),
       hasNextPage: false,
       isFetchingNextPage: false,
-      isLoading: true,
+      isLoading: !storyData,
+      ...options,
     });
 
-    render(
-      <LibraryListContainer {...defaultProps} searchType={'제목' as const} />
-    );
+    return render(<LibraryListContainer {...defaultProps} />);
+  };
 
+  it('로딩 상태일 때 Skeleton을 렌더링한다', () => {
+    setup(undefined, { isLoading: true });
     expect(screen.getByTestId('skeleton')).toBeInTheDocument();
   });
 
   it('스토리가 없고 keyword가 빈 문자열이면 "아직 스토리가 없어요" 메시지를 표시한다', () => {
-    mockUseInfiniteStories.mockReturnValue({
-      data: { pages: [[]] },
-      fetchNextPage: jest.fn(),
-      hasNextPage: false,
-      isFetchingNextPage: false,
-      isLoading: false,
-    });
-
-    render(
-      <LibraryListContainer {...defaultProps} searchType={'제목' as const} />
-    );
-
+    setup([]);
     expect(screen.getByText('아직 스토리가 없어요')).toBeInTheDocument();
   });
 
   it('스토리가 없고 keyword가 있으면 "검색된 스토리가 없어요" 메시지를 표시한다', () => {
+    render(
+      <LibraryListContainer keyword="테스트" searchType="제목" genres={[]} />
+    );
     mockUseInfiniteStories.mockReturnValue({
       data: { pages: [[]] },
       fetchNextPage: jest.fn(),
@@ -93,46 +94,18 @@ describe('LibraryListContainer', () => {
       isLoading: false,
     });
 
-    render(
-      <LibraryListContainer keyword="테스트" searchType="제목" genres={[]} />
-    );
-
     expect(screen.getByText('검색된 스토리가 없어요')).toBeInTheDocument();
   });
 
   it('스토리가 있으면 LibraryListGrid와 Observer를 렌더링한다', () => {
-    const stories = [{ id: 1, title: 'Story 1' }];
-    mockUseInfiniteStories.mockReturnValue({
-      data: { pages: [stories] },
-      fetchNextPage: jest.fn(),
-      hasNextPage: true,
-      isFetchingNextPage: false,
-      isLoading: false,
-    });
-
-    render(
-      <LibraryListContainer {...defaultProps} searchType={'제목' as const} />
-    );
-
+    setup([{ id: 1, title: 'Story 1' }], { hasNextPage: true });
     expect(screen.getByTestId('library-list-grid')).toBeInTheDocument();
     expect(screen.getByTestId('observer')).toHaveTextContent('enabled');
     expect(screen.getByText('Story 1')).toBeInTheDocument();
   });
 
   it('hasNextPage가 false이면 Observer가 disabled 상태로 렌더링된다', () => {
-    const stories = [{ id: 1, title: 'Story 1' }];
-    mockUseInfiniteStories.mockReturnValue({
-      data: { pages: [stories] },
-      fetchNextPage: jest.fn(),
-      hasNextPage: false,
-      isFetchingNextPage: false,
-      isLoading: false,
-    });
-
-    render(
-      <LibraryListContainer {...defaultProps} searchType={'제목' as const} />
-    );
-
+    setup([{ id: 1, title: 'Story 1' }], { hasNextPage: false });
     expect(screen.getByTestId('observer')).toHaveTextContent('disabled');
   });
 });
diff --git a/src/app/library/_components/SearchInput.test.tsx b/src/app/library/_components/SearchInput.test.tsx
index 4de2108e..bf58b0f0 100644
--- a/src/app/library/_components/SearchInput.test.tsx
+++ b/src/app/library/_components/SearchInput.test.tsx
@@ -5,9 +5,7 @@ describe('SearchInput 테스트', () => {
   const mockSetKeyword = jest.fn();
   const mockOnSearch = jest.fn();
 
-  const setup = (keyword = '') => {
-    mockSetKeyword.mockClear();
-    mockOnSearch.mockClear();
+  const renderSearchInput = (keyword = '') =>
     render(
       <SearchInput
         keyword={keyword}
@@ -15,10 +13,13 @@ describe('SearchInput 테스트', () => {
         onSearch={mockOnSearch}
       />
     );
-  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
   it('초기 렌더링 시 입력창에 keyword 값이 반영된다', () => {
-    setup('초기값');
+    renderSearchInput('초기값');
     const input = screen.getByLabelText(
       '스토리 제목으로 검색'
     ) as HTMLInputElement;
@@ -26,60 +27,52 @@ describe('SearchInput 테스트', () => {
   });
 
   it('검색어를 입력하면 setKeyword가 호출된다', () => {
-    setup();
-    const input = screen.getByLabelText('스토리 제목으로 검색');
-    fireEvent.change(input, { target: { value: '천마재림' } });
-
+    renderSearchInput();
+    fireEvent.change(screen.getByLabelText('스토리 제목으로 검색'), {
+      target: { value: '천마재림' },
+    });
     expect(mockSetKeyword).toHaveBeenCalledWith('천마재림');
   });
 
   it('검색어 입력 시 초기화 버튼이 나타난다', () => {
-    setup();
-    const input = screen.getByLabelText('스토리 제목으로 검색');
-    fireEvent.change(input, { target: { value: '천마재림' } });
-
+    renderSearchInput();
+    fireEvent.change(screen.getByLabelText('스토리 제목으로 검색'), {
+      target: { value: '천마재림' },
+    });
     expect(screen.getByLabelText('검색어 초기화')).toBeInTheDocument();
   });
 
   it('검색어를 입력하고 엔터키를 눌렀을 때 onSearch가 호출된다', () => {
-    setup();
+    renderSearchInput();
     const input = screen.getByLabelText('스토리 제목으로 검색');
-
     fireEvent.change(input, { target: { value: '천마재림' } });
-    // typescript Non-null 처리
     fireEvent.submit(input.closest('form')!);
-
     expect(mockOnSearch).toHaveBeenCalled();
   });
 
   it('검색어를 입력하고 검색 버튼을 클릭했을 때 onSearch가 호출된다', () => {
-    setup();
-    const input = screen.getByLabelText('스토리 제목으로 검색');
-    const searchButton = screen.getByLabelText('검색');
-
-    fireEvent.change(input, { target: { value: '천마재림' } });
-    fireEvent.click(searchButton);
-
+    renderSearchInput();
+    fireEvent.change(screen.getByLabelText('스토리 제목으로 검색'), {
+      target: { value: '천마재림' },
+    });
+    fireEvent.click(screen.getByLabelText('검색'));
     expect(mockOnSearch).toHaveBeenCalled();
   });
 
   it('초기화 버튼 클릭 시 setKeyword가 빈 문자열로 호출되고 입력값이 비워진다', () => {
-    setup('천마재림');
-    const clearButton = screen.getByLabelText('검색어 초기화');
-    fireEvent.click(clearButton);
-
+    renderSearchInput('천마재림');
+    fireEvent.click(screen.getByLabelText('검색어 초기화'));
     expect(mockSetKeyword).toHaveBeenCalledWith('');
-    const input = screen.getByLabelText(
-      '스토리 제목으로 검색'
-    ) as HTMLInputElement;
-    expect(input.value).toBe('');
+    expect(
+      (screen.getByLabelText('스토리 제목으로 검색') as HTMLInputElement).value
+    ).toBe('');
   });
 
   it('검색어가 비워질 때 onSearch가 자동 호출된다', () => {
-    setup('천마재림');
-    const input = screen.getByLabelText('스토리 제목으로 검색');
-    fireEvent.change(input, { target: { value: '' } });
-
+    renderSearchInput('천마재림');
+    fireEvent.change(screen.getByLabelText('스토리 제목으로 검색'), {
+      target: { value: '' },
+    });
     expect(mockOnSearch).toHaveBeenCalled();
   });
 });