From d2883021b845febaa968061fa8f0514e372d0881 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?=
 <jhl2619@naver.com>
Date: Tue, 2 Apr 2024 23:44:47 +0900
Subject: [PATCH 1/8] =?UTF-8?q?fix:=20RankingMark=20=EC=98=A4=ED=83=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/jurumarble/src/app/main/components/Carousel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/jurumarble/src/app/main/components/Carousel.tsx b/apps/jurumarble/src/app/main/components/Carousel.tsx
index 535cb0e8..b9c9b3d6 100644
--- a/apps/jurumarble/src/app/main/components/Carousel.tsx
+++ b/apps/jurumarble/src/app/main/components/Carousel.tsx
@@ -54,7 +54,7 @@ function Carousel({ hotDrinkList }: Props) {
               >
                 <Box>
                   <DrinkImageContainer>
-                    <RankginMark>{index + 1}</RankginMark>
+                    <RankingMark>{index + 1}</RankingMark>
                     <DrinkImageWrapper
                       alt={name}
                       src={image}
@@ -119,7 +119,7 @@ const DrinkImageContainer = styled.div`
   left: 20px;
 `;
 
-const RankginMark = styled.div`
+const RankingMark = styled.div`
   ${({ theme }) =>
     css`
       background-color: ${theme.colors.main_01};

From 0610c6cd95ac54045b270ded51f6111f57cb1e0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?=
 <jhl2619@naver.com>
Date: Thu, 4 Apr 2024 23:31:49 +0900
Subject: [PATCH 2/8] =?UTF-8?q?refactor:=20search=20tab=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EB=82=B4=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/jurumarble/src/app/search/constants/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 apps/jurumarble/src/app/search/constants/index.ts

diff --git a/apps/jurumarble/src/app/search/constants/index.ts b/apps/jurumarble/src/app/search/constants/index.ts
new file mode 100644
index 00000000..4b569576
--- /dev/null
+++ b/apps/jurumarble/src/app/search/constants/index.ts
@@ -0,0 +1,7 @@
+export const TAB_LIST = [
+  { id: 'total', name: '통합' },
+  { id: 'drinkInfo', name: '우리술 정보' },
+  { id: 'drinkVote', name: '우리술 투표' },
+] as const;
+
+export type TabList = (typeof TAB_LIST)[number]['id'];

From 3f21a25b792e1fe8c21e82c491ec20d08068e570 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?=
 <jhl2619@naver.com>
Date: Fri, 5 Apr 2024 23:59:57 +0900
Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20context=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/search/context/SearchProvider.tsx | 151 ++++++++++++++++++
 .../app/search/context/useSearchContext.ts    |  15 ++
 apps/jurumarble/src/app/search/page.tsx       |  13 +-
 3 files changed, 175 insertions(+), 4 deletions(-)
 create mode 100644 apps/jurumarble/src/app/search/context/SearchProvider.tsx
 create mode 100644 apps/jurumarble/src/app/search/context/useSearchContext.ts

diff --git a/apps/jurumarble/src/app/search/context/SearchProvider.tsx b/apps/jurumarble/src/app/search/context/SearchProvider.tsx
new file mode 100644
index 00000000..170822f6
--- /dev/null
+++ b/apps/jurumarble/src/app/search/context/SearchProvider.tsx
@@ -0,0 +1,151 @@
+'use client';
+/**
+ * @TODO react-hookz 제거
+ */
+import { createContext, PropsWithChildren } from 'react';
+
+import { useToggle } from '@monorepo/hooks';
+import { useDebouncedCallback } from '@react-hookz/web';
+import { useCreateQueryString } from 'hooks/useCreateQueryString';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { DrinkInfoSortType, RegionType, VoteSortType } from 'src/types/common';
+import { DrinkInfo } from 'src/types/drink';
+import { Content } from 'src/types/vote';
+
+import { TabList } from '../constants';
+import useGetDrinkList from '../services/useGetDrinkList';
+import useVoteDrinkService from '../services/useVoteDrinkService';
+
+export const SearchContext = createContext<{
+  isReplaceLoginPageModal: boolean;
+  onToggleReplaceLoginPageModal: () => void;
+  searchText: string;
+  debouncedChange: (keyword: string) => void;
+  selectedTab: TabList;
+  onClickSelectedTab: (tab: TabList) => void;
+  drinkInfoSortOption: DrinkInfoSortType;
+  onChangeDrinkInfoSortOption: (value: DrinkInfoSortType) => void;
+  drinkVoteSortOption: VoteSortType;
+  onChangeDrinkVoteSortOption: (value: VoteSortType) => void;
+  regionOption: RegionType;
+  onChangeRegionOption: (value: RegionType) => void;
+  isSelectedTab: (tabName: TabList) => boolean;
+  drinkList: DrinkInfo[];
+  drinkSubscribe: (node: HTMLElement | null) => void;
+  voteDrinkList: Content[];
+  drinkVoteSubscribe: (node: HTMLElement | null) => void;
+}>({
+  debouncedChange: () => {},
+  drinkInfoSortOption: 'ByPopularity',
+  drinkList: [],
+  drinkSubscribe: () => {},
+  drinkVoteSortOption: 'ByPopularity',
+  drinkVoteSubscribe: () => {},
+  isReplaceLoginPageModal: false,
+  isSelectedTab: () => false,
+  onChangeDrinkInfoSortOption: () => {},
+  onChangeDrinkVoteSortOption: () => {},
+  onChangeRegionOption: () => {},
+  onClickSelectedTab: () => {},
+  onToggleReplaceLoginPageModal: () => {},
+  regionOption: '',
+  searchText: '',
+  selectedTab: 'total',
+  voteDrinkList: [],
+});
+
+export const SearchProvider = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const [isReplaceLoginPageModal, onToggleReplaceLoginPageModal] = useToggle();
+
+  const createQueryString = useCreateQueryString(searchParams);
+
+  const searchText = (searchParams.get('searchText') as string) ?? '';
+
+  const onChangeSearchText = (keyword: string) => {
+    router.replace(`${pathname}?${createQueryString('searchText', keyword)}`, {
+      scroll: true,
+    });
+  };
+
+  const debouncedChange = useDebouncedCallback(
+    (keyword: string) => {
+      onChangeSearchText(keyword);
+    },
+    [onChangeSearchText],
+    500,
+  );
+
+  const selectedTab = (searchParams.get('selectedTab') as TabList) ?? 'total';
+  const onClickSelectedTab = (tab: TabList) => {
+    router.replace(`${pathname}?${createQueryString('selectedTab', tab)}`);
+  };
+
+  const drinkInfoSortOption =
+    searchParams.get('drinkInfoSortOption') ?? 'ByPopularity';
+  const onChangeDrinkInfoSortOption = (value: DrinkInfoSortType) => {
+    router.replace(
+      `${pathname}?${createQueryString('drinkInfoSortOption', value)}`,
+    );
+  };
+
+  const drinkVoteSortOption =
+    searchParams.get('drinkVoteSortOption') ?? 'ByPopularity';
+  const onChangeDrinkVoteSortOption = (value: VoteSortType) => {
+    router.replace(
+      `${pathname}?${createQueryString('drinkVoteSortOption', value)}`,
+    );
+  };
+
+  const regionOption = searchParams.get('regionOption') ?? '';
+  const onChangeRegionOption = (value: RegionType) => {
+    router.replace(`${pathname}?${createQueryString('regionOption', value)}`);
+  };
+
+  const isSelectedTab = (tabName: TabList) => {
+    return selectedTab === tabName;
+  };
+
+  const { drinkList, subscribe: drinkSubscribe } = useGetDrinkList({
+    page: 0,
+    size: selectedTab === 'drinkInfo' ? 10 : 3,
+    keyword: searchText,
+    region: regionOption,
+    sortBy: drinkInfoSortOption,
+  });
+
+  const { voteDrinkList, subscribe: drinkVoteSubscribe } = useVoteDrinkService({
+    page: 0,
+    size: 3,
+    keyword: searchText,
+    region: regionOption,
+    sortBy: drinkVoteSortOption,
+  });
+
+  const value = {
+    debouncedChange,
+    drinkInfoSortOption,
+    drinkList,
+    drinkSubscribe,
+    drinkVoteSortOption,
+    drinkVoteSubscribe,
+    isReplaceLoginPageModal,
+    isSelectedTab,
+    onChangeDrinkInfoSortOption,
+    onChangeDrinkVoteSortOption,
+    onChangeRegionOption,
+    onClickSelectedTab,
+    onToggleReplaceLoginPageModal,
+    regionOption,
+    searchText,
+    selectedTab,
+    voteDrinkList,
+  };
+
+  return (
+    <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
+  );
+};
diff --git a/apps/jurumarble/src/app/search/context/useSearchContext.ts b/apps/jurumarble/src/app/search/context/useSearchContext.ts
new file mode 100644
index 00000000..262378e1
--- /dev/null
+++ b/apps/jurumarble/src/app/search/context/useSearchContext.ts
@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import { SearchContext } from './SearchProvider';
+
+export const useSearchContext = () => {
+  const context = useContext(SearchContext);
+
+  if (!context) {
+    throw new Error(
+      'useSearchContext SearchProvider 내부에서만 사용할 수 있습니다.',
+    );
+  }
+
+  return context;
+};
diff --git a/apps/jurumarble/src/app/search/page.tsx b/apps/jurumarble/src/app/search/page.tsx
index 55e8f604..47a38f4e 100644
--- a/apps/jurumarble/src/app/search/page.tsx
+++ b/apps/jurumarble/src/app/search/page.tsx
@@ -1,9 +1,14 @@
 'use client';
 
-import SearchContainer from './components/SearchContainer';
+import { SearchContainer } from './components';
+import { SearchProvider } from './context';
 
-function Search() {
-  return <SearchContainer />;
+function SearchPage() {
+  return (
+    <SearchProvider>
+      <SearchContainer />
+    </SearchProvider>
+  );
 }
 
-export default Search;
+export default SearchPage;

From 789d9ce1b0348abb3b1923748ee6b2fda08fbc3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?=
 <jhl2619@naver.com>
Date: Sat, 6 Apr 2024 00:16:48 +0900
Subject: [PATCH 4/8] =?UTF-8?q?refactor:=20=EA=B0=81=20section=EB=B3=84?=
 =?UTF-8?q?=EB=A1=9C=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DrinkInfoTopSectionItem.tsx    |  33 +++
 .../components/DrinkVoteBottomSectionItem.tsx |  33 +++
 .../app/search/components/SearchContainer.tsx | 218 ++----------------
 .../components/TotalBottomSectionItem.tsx     |  41 ++++
 .../search/components/TotalTopSectionItem.tsx |  42 ++++
 .../src/app/search/components/index.ts        |  15 ++
 .../src/app/search/constants/index.ts         |   7 -
 .../src/app/search/constants/index.tsx        |  32 +++
 .../src/app/search/context/index.ts           |   2 +
 9 files changed, 211 insertions(+), 212 deletions(-)
 create mode 100644 apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx
 create mode 100644 apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx
 create mode 100644 apps/jurumarble/src/app/search/components/TotalBottomSectionItem.tsx
 create mode 100644 apps/jurumarble/src/app/search/components/TotalTopSectionItem.tsx
 create mode 100644 apps/jurumarble/src/app/search/components/index.ts
 delete mode 100644 apps/jurumarble/src/app/search/constants/index.ts
 create mode 100644 apps/jurumarble/src/app/search/constants/index.tsx
 create mode 100644 apps/jurumarble/src/app/search/context/index.ts

diff --git a/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx b/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx
new file mode 100644
index 00000000..b8a53377
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx
@@ -0,0 +1,33 @@
+import { DRINK_INFO_SORT_LIST } from 'lib/constants';
+import styled from 'styled-components';
+
+import DrinkInfoList from './DrinkInfoList';
+import RegionSmallSelect from './RegionSmallSelect';
+import SortSelect from './SortSelect';
+import { useSearchContext } from '../context';
+
+function DrinkInfoTopSectionItem() {
+  const { drinkInfoSortOption, onChangeDrinkInfoSortOption } =
+    useSearchContext();
+  return (
+    <>
+      <SelectContainer>
+        <SortSelect
+          defaultOption={drinkInfoSortOption}
+          onChangeSortOption={onChangeDrinkInfoSortOption}
+          options={DRINK_INFO_SORT_LIST}
+        />
+        <RegionSmallSelect />
+      </SelectContainer>
+      <DrinkInfoList />
+    </>
+  );
+}
+
+const SelectContainer = styled.div`
+  display: flex;
+  margin-top: 40px;
+  gap: 4px;
+`;
+
+export default DrinkInfoTopSectionItem;
diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx
new file mode 100644
index 00000000..f326720b
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx
@@ -0,0 +1,33 @@
+import { DRINK_VOTE_SORT_LIST } from 'lib/constants';
+import styled from 'styled-components';
+
+import DrinkVoteList from './DrinkVoteList';
+import RegionSmallSelect from './RegionSmallSelect';
+import SortSelect from './SortSelect';
+import { useSearchContext } from '../context';
+
+function DrinkVoteBottomSectionItem() {
+  const { drinkVoteSortOption, onChangeDrinkVoteSortOption } =
+    useSearchContext();
+  return (
+    <>
+      <SelectContainer>
+        <SortSelect
+          defaultOption={drinkVoteSortOption}
+          onChangeSortOption={onChangeDrinkVoteSortOption}
+          options={DRINK_VOTE_SORT_LIST}
+        />
+        <RegionSmallSelect />
+      </SelectContainer>
+      <DrinkVoteList />
+    </>
+  );
+}
+
+const SelectContainer = styled.div`
+  display: flex;
+  margin-top: 40px;
+  gap: 4px;
+`;
+
+export default DrinkVoteBottomSectionItem;
diff --git a/apps/jurumarble/src/app/search/components/SearchContainer.tsx b/apps/jurumarble/src/app/search/components/SearchContainer.tsx
index c9494b70..2673dc99 100644
--- a/apps/jurumarble/src/app/search/components/SearchContainer.tsx
+++ b/apps/jurumarble/src/app/search/components/SearchContainer.tsx
@@ -1,200 +1,29 @@
 'use client';
 
-import { useToggle } from '@monorepo/hooks';
-import { useDebouncedCallback } from '@react-hookz/web';
 import BottomBar from 'components/BottomBar';
 import DivideLine from 'components/DivideLine';
-import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
 import SearchInput from 'components/SearchInput';
-import { Button } from 'components/button';
-import { useCreateQueryString } from 'hooks/useCreateQueryString';
-import { DRINK_INFO_SORT_LIST, DRINK_VOTE_SORT_LIST } from 'lib/constants';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { SvgIcPrevious } from 'src/assets/icons/components';
-import { DrinkInfoSortType, RegionType, VoteSortType } from 'src/types/common';
 import styled, { css, DefaultTheme } from 'styled-components';
 
-import DrinkList from './DrinkList';
-import DrinkVoteList from './DrinkVoteList';
-import RegionSmallSelect from './RegionSmallSelect';
-import SortSelect from './SortSelect';
-
-const TAB_LIST = [
-  { id: 'total', name: '통합' },
-  { id: 'drinkInfo', name: '우리술 정보' },
-  { id: 'drinkVote', name: '우리술 투표' },
-] as const;
-
-type TabList = (typeof TAB_LIST)[number]['id'];
-
-/**
- * @TODO 아래와 같이 분리하기
- * <SeachProvider>
- * <SearchInputContainer />
- * <SearchVoteListContainer />
- * </SearchProvider>
- *
- * @TODO 검색 상태를 관리하는 Context를 만들기
- * const {textInput} = useSearchContext()
- */
+import { renderItem, TAB_LIST, TabList } from '../constants';
+import { useSearchContext } from '../context';
 
 function SearchContainer() {
-  const [isReplaceLoginPageModal, onToggleReplaceLoginPageModal] = useToggle();
-
   const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const createQueryString = useCreateQueryString(searchParams);
-
-  const searchText = (searchParams.get('searchText') as string) ?? '';
-
-  const onChangeSearchText = (keyword: string) => {
-    router.replace(`${pathname}?${createQueryString('searchText', keyword)}`, {
-      scroll: true,
-    });
-  };
-  const debouncedChange = useDebouncedCallback(
-    (keyword: string) => {
-      onChangeSearchText(keyword);
-    },
-    [onChangeSearchText],
-    500,
-  );
-
-  const selectedTab = searchParams.get('selectedTab') ?? 'total';
-  const onClickSelectedTab = (tab: TabList) => {
-    router.replace(`${pathname}?${createQueryString('selectedTab', tab)}`);
-  };
-
-  const drinkInfoSortOption =
-    searchParams.get('drinkInfoSortOption') ?? 'ByPopularity';
-  const onChangeDrinkInfoSortOption = (value: DrinkInfoSortType) => {
-    router.replace(
-      `${pathname}?${createQueryString('drinkInfoSortOption', value)}`,
-    );
-  };
-
-  const drinkVoteSortOption =
-    searchParams.get('drinkVoteSortOption') ?? 'ByPopularity';
-  const onChangeDrinkVoteSortOption = (value: VoteSortType) => {
-    router.replace(
-      `${pathname}?${createQueryString('drinkVoteSortOption', value)}`,
-    );
-  };
-
-  const regionOption = searchParams.get('regionOption') ?? '';
-  const onChangeRegionOption = (value: RegionType) => {
-    router.replace(`${pathname}?${createQueryString('regionOption', value)}`);
-  };
 
-  const isSelectedTab = (tabName: TabList) => {
-    return selectedTab === tabName;
-  };
+  const {
+    selectedTab,
+    isSelectedTab,
+    searchText,
+    isReplaceLoginPageModal,
+    debouncedChange,
+    onClickSelectedTab,
+    onToggleReplaceLoginPageModal,
+  } = useSearchContext();
 
-  const renderItem: Record<
-    TabList,
-    { topSectionItem: JSX.Element; bottomSectionItem: JSX.Element }
-  > = {
-    total: {
-      topSectionItem: (
-        <>
-          <H2>우리술 정보</H2>
-          <DrinkList
-            searchText={searchText}
-            sortOption={drinkInfoSortOption}
-            regionOption={regionOption}
-            isSelectedTab={isSelectedTab('total')}
-            onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
-          />
-          <MoreButton
-            variant="outline"
-            width="100%"
-            height="48px"
-            value="drinkInfo"
-            onClick={(e) =>
-              onClickSelectedTab(e.currentTarget.value as TabList)
-            }
-          >
-            우리술 정보 더보기
-          </MoreButton>
-        </>
-      ),
-      bottomSectionItem: (
-        <>
-          <H2>우리술 투표</H2>
-          <DrinkVoteList
-            searchText={searchText}
-            sortOption={drinkVoteSortOption}
-            regionOption={regionOption}
-            isSelectedTab={isSelectedTab('total')}
-            onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
-          />
-          <MoreButton
-            variant="outline"
-            width="100%"
-            height="48px"
-            value="drinkVote"
-            onClick={(e) =>
-              onClickSelectedTab(e.currentTarget.value as TabList)
-            }
-          >
-            우리술 투표 더보기
-          </MoreButton>
-        </>
-      ),
-    },
-    drinkInfo: {
-      topSectionItem: (
-        <>
-          <SelectContainer>
-            <SortSelect
-              defaultOption={drinkInfoSortOption}
-              onChangeSortOption={onChangeDrinkInfoSortOption}
-              options={DRINK_INFO_SORT_LIST}
-            />
-            <RegionSmallSelect
-              defaultOption={regionOption}
-              onChangeSortOption={onChangeRegionOption}
-            />
-          </SelectContainer>
-          <DrinkList
-            searchText={searchText}
-            sortOption={drinkInfoSortOption}
-            regionOption={regionOption}
-            isSelectedTab={false}
-            onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
-          />
-        </>
-      ),
-      bottomSectionItem: <></>,
-    },
-    drinkVote: {
-      topSectionItem: <></>,
-      bottomSectionItem: (
-        <>
-          <SelectContainer>
-            <SortSelect
-              defaultOption={drinkVoteSortOption}
-              onChangeSortOption={onChangeDrinkVoteSortOption}
-              options={DRINK_VOTE_SORT_LIST}
-            />
-            <RegionSmallSelect
-              defaultOption={regionOption}
-              onChangeSortOption={onChangeRegionOption}
-            />
-          </SelectContainer>
-          <DrinkVoteList
-            searchText={searchText}
-            sortOption={drinkVoteSortOption}
-            regionOption={regionOption}
-            isSelectedTab={isSelectedTab('total')}
-            onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
-          />
-        </>
-      ),
-    },
-  };
   const { topSectionItem, bottomSectionItem } =
     renderItem[selectedTab as TabList];
 
@@ -277,27 +106,6 @@ const SelectedButton = styled.button<{
     `}
 `;
 
-const SelectContainer = styled.div`
-  display: flex;
-  margin-top: 40px;
-  gap: 4px;
-`;
-
-const H2 = styled.h2`
-  ${({ theme }) => css`
-    ${theme.typography.headline02};
-    color: ${theme.colors.black_01};
-    margin-top: 40px;
-  `}
-`;
-
-const MoreButton = styled(Button)`
-  ${({ theme }) => css`
-    ${theme.typography.body01}
-    margin: 24px 0 40px 0;
-  `};
-`;
-
 const BottomSection = styled.section`
   padding: 0 20px 96px; // 64(BottomBar height) + 32(margin) = 96
   overflow: auto;
diff --git a/apps/jurumarble/src/app/search/components/TotalBottomSectionItem.tsx b/apps/jurumarble/src/app/search/components/TotalBottomSectionItem.tsx
new file mode 100644
index 00000000..73446581
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/TotalBottomSectionItem.tsx
@@ -0,0 +1,41 @@
+import { Button } from 'components/button';
+import styled, { css } from 'styled-components';
+
+import DrinkVoteList from './DrinkVoteList';
+import { useSearchContext } from '../context';
+
+function TotalBottomSectionItem() {
+  const { onClickSelectedTab } = useSearchContext();
+  return (
+    <>
+      <H2>우리술 투표</H2>
+      <DrinkVoteList />
+      <MoreButton
+        variant="outline"
+        width="100%"
+        height="48px"
+        value="drinkVote"
+        onClick={(e) => onClickSelectedTab(e.currentTarget.value as TabList)}
+      >
+        우리술 투표 더보기
+      </MoreButton>
+    </>
+  );
+}
+
+const H2 = styled.h2`
+  ${({ theme }) => css`
+    ${theme.typography.headline02};
+    color: ${theme.colors.black_01};
+    margin-top: 40px;
+  `}
+`;
+
+const MoreButton = styled(Button)`
+  ${({ theme }) => css`
+    ${theme.typography.body01}
+    margin: 24px 0 40px 0;
+  `};
+`;
+
+export default TotalBottomSectionItem;
diff --git a/apps/jurumarble/src/app/search/components/TotalTopSectionItem.tsx b/apps/jurumarble/src/app/search/components/TotalTopSectionItem.tsx
new file mode 100644
index 00000000..9c10584c
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/TotalTopSectionItem.tsx
@@ -0,0 +1,42 @@
+import { Button } from 'components/button';
+import styled, { css } from 'styled-components';
+
+import DrinkInfoList from './DrinkInfoList';
+import { TabList } from '../constants';
+import { useSearchContext } from '../context';
+
+function TotalTopSectionItem() {
+  const { onClickSelectedTab } = useSearchContext();
+  return (
+    <>
+      <H2>우리술 정보</H2>
+      <DrinkInfoList />
+      <MoreButton
+        variant="outline"
+        width="100%"
+        height="48px"
+        value="drinkInfo"
+        onClick={(e) => onClickSelectedTab(e.currentTarget.value as TabList)}
+      >
+        우리술 정보 더보기
+      </MoreButton>
+    </>
+  );
+}
+
+const H2 = styled.h2`
+  ${({ theme }) => css`
+    ${theme.typography.headline02};
+    color: ${theme.colors.black_01};
+    margin-top: 40px;
+  `}
+`;
+
+const MoreButton = styled(Button)`
+  ${({ theme }) => css`
+    ${theme.typography.body01}
+    margin: 24px 0 40px 0;
+  `};
+`;
+
+export default TotalTopSectionItem;
diff --git a/apps/jurumarble/src/app/search/components/index.ts b/apps/jurumarble/src/app/search/components/index.ts
new file mode 100644
index 00000000..2e74ea5e
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/index.ts
@@ -0,0 +1,15 @@
+export { default as ChipContainer } from './ChipContainer';
+export { default as Container } from './SearchContainer';
+export { default as DrinkInfoTopSectionItem } from './DrinkInfoTopSectionItem';
+export { default as DrinkItem } from './DrinkItem';
+export { default as DrinkInfoList } from './DrinkInfoList';
+export { default as DrinkVoteBottomSectionItem } from './DrinkVoteBottomSectionItem';
+export { default as DrinkVoteItem } from './DrinkVoteItem';
+export { default as DrinkVoteList } from './DrinkVoteList';
+export { default as NoSearchResult } from './NoSearchResult';
+export { default as RegionSmallSelect } from './RegionSmallSelect';
+export { default as SearchContainer } from './SearchContainer';
+export { default as SortSelect } from './SortSelect';
+export { default as TotalBottomSectionItem } from './TotalBottomSectionItem';
+export { default as TotalTopSectionItem } from './TotalTopSectionItem';
+export { default as VoteDescription } from './VoteDescription';
diff --git a/apps/jurumarble/src/app/search/constants/index.ts b/apps/jurumarble/src/app/search/constants/index.ts
deleted file mode 100644
index 4b569576..00000000
--- a/apps/jurumarble/src/app/search/constants/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const TAB_LIST = [
-  { id: 'total', name: '통합' },
-  { id: 'drinkInfo', name: '우리술 정보' },
-  { id: 'drinkVote', name: '우리술 투표' },
-] as const;
-
-export type TabList = (typeof TAB_LIST)[number]['id'];
diff --git a/apps/jurumarble/src/app/search/constants/index.tsx b/apps/jurumarble/src/app/search/constants/index.tsx
new file mode 100644
index 00000000..3e6b410f
--- /dev/null
+++ b/apps/jurumarble/src/app/search/constants/index.tsx
@@ -0,0 +1,32 @@
+import {
+  DrinkInfoTopSectionItem,
+  DrinkVoteBottomSectionItem,
+  TotalBottomSectionItem,
+  TotalTopSectionItem,
+} from '../components';
+
+export const TAB_LIST = [
+  { id: 'total', name: '통합' },
+  { id: 'drinkInfo', name: '우리술 정보' },
+  { id: 'drinkVote', name: '우리술 투표' },
+] as const;
+
+export type TabList = (typeof TAB_LIST)[number]['id'];
+
+export const renderItem: Record<
+  TabList,
+  { topSectionItem: JSX.Element; bottomSectionItem: JSX.Element }
+> = {
+  total: {
+    topSectionItem: <TotalTopSectionItem />,
+    bottomSectionItem: <TotalBottomSectionItem />,
+  },
+  drinkInfo: {
+    topSectionItem: <DrinkInfoTopSectionItem />,
+    bottomSectionItem: <></>,
+  },
+  drinkVote: {
+    topSectionItem: <></>,
+    bottomSectionItem: <DrinkVoteBottomSectionItem />,
+  },
+};
diff --git a/apps/jurumarble/src/app/search/context/index.ts b/apps/jurumarble/src/app/search/context/index.ts
new file mode 100644
index 00000000..b1c7500c
--- /dev/null
+++ b/apps/jurumarble/src/app/search/context/index.ts
@@ -0,0 +1,2 @@
+export * from './SearchProvider';
+export * from './useSearchContext';

From c483cb4ac17673316bef9091473579b4acd640a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?=
 <jhl2619@naver.com>
Date: Sun, 28 Jul 2024 16:37:30 +0900
Subject: [PATCH 5/8] refactor: Correct typo and Update import paths for
 ReplaceLoginPageModal

---
 .../src/app/drink-info/[id]/components/DrinkInfoContainer.tsx   | 2 +-
 apps/jurumarble/src/app/map/components/MapContainer.tsx         | 2 +-
 .../jurumarble/src/app/stamp/components/DrinkStampContainer.tsx | 2 +-
 apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx    | 2 +-
 apps/jurumarble/src/app/vote/[id]/page.tsx                      | 2 +-
 apps/jurumarble/src/app/vote/page.tsx                           | 2 +-
 apps/jurumarble/src/components/BottomBar.tsx                    | 2 +-
 .../ReplaceLoginPageModal.tsx                                   | 0
 apps/jurumarble/src/components/ReplaceLoginPageModal/index.ts   | 1 +
 .../styles.module.css                                           | 0
 apps/jurumarble/src/components/index.ts                         | 2 ++
 11 files changed, 10 insertions(+), 7 deletions(-)
 rename apps/jurumarble/src/components/{ReplaceLoginPagemModal => ReplaceLoginPageModal}/ReplaceLoginPageModal.tsx (100%)
 create mode 100644 apps/jurumarble/src/components/ReplaceLoginPageModal/index.ts
 rename apps/jurumarble/src/components/{ReplaceLoginPagemModal => ReplaceLoginPageModal}/styles.module.css (100%)

diff --git a/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx b/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx
index 21a5808e..3dc1e1b3 100644
--- a/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx
+++ b/apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx
@@ -1,7 +1,7 @@
 import { useToggle } from '@monorepo/hooks';
 import Chip from 'components/Chip';
 import Loading from 'components/Loading';
-import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
 import VoteHeader from 'components/VoteHeader';
 import { Button } from 'components/button';
 import Path from 'lib/Path';
diff --git a/apps/jurumarble/src/app/map/components/MapContainer.tsx b/apps/jurumarble/src/app/map/components/MapContainer.tsx
index 790321fb..78700645 100644
--- a/apps/jurumarble/src/app/map/components/MapContainer.tsx
+++ b/apps/jurumarble/src/app/map/components/MapContainer.tsx
@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useToggle } from '@react-hookz/web';
 import DrinkItem from 'app/stamp/components/DrinkItem';
 import Loading from 'components/Loading';
-import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
 import { Button } from 'components/button';
 import Path from 'lib/Path';
 import Image from 'next/image';
diff --git a/apps/jurumarble/src/app/stamp/components/DrinkStampContainer.tsx b/apps/jurumarble/src/app/stamp/components/DrinkStampContainer.tsx
index 6d81cc39..262553a9 100644
--- a/apps/jurumarble/src/app/stamp/components/DrinkStampContainer.tsx
+++ b/apps/jurumarble/src/app/stamp/components/DrinkStampContainer.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { useToggle } from '@monorepo/hooks';
-import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
 
 import MyEnjoiedDrinkInfoSection from './MyEnjoiedDrinkInfoSection';
 import StampedDrinkList from './StampedDrinkList';
diff --git a/apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx b/apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx
index 7db77107..a0784b06 100644
--- a/apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx
+++ b/apps/jurumarble/src/app/vote/[id]/components/CommentForm.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 
 import { useToggle } from '@monorepo/hooks';
-import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
 import { isLogin } from 'lib/utils/auth';
 import styled, { css } from 'styled-components';
 
diff --git a/apps/jurumarble/src/app/vote/[id]/page.tsx b/apps/jurumarble/src/app/vote/[id]/page.tsx
index 20a40d56..cf8d9f24 100644
--- a/apps/jurumarble/src/app/vote/[id]/page.tsx
+++ b/apps/jurumarble/src/app/vote/[id]/page.tsx
@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react';
 
 import { useToggle } from '@monorepo/hooks';
 import Loading from 'components/Loading';
-import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
 import {
   VOTE_AGE_FILTER_LIST,
   VOTE_ALCOHOL_FILTER_LIST,
diff --git a/apps/jurumarble/src/app/vote/page.tsx b/apps/jurumarble/src/app/vote/page.tsx
index 1946920c..8fa3fd54 100644
--- a/apps/jurumarble/src/app/vote/page.tsx
+++ b/apps/jurumarble/src/app/vote/page.tsx
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useToggle } from '@monorepo/hooks';
 import BottomBar from 'components/BottomBar';
 import Loading from 'components/Loading';
-import ReplaceLoginPageModal from 'components/ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
 import { Button } from 'components/button';
 import Path from 'lib/Path';
 import { media } from 'lib/styles';
diff --git a/apps/jurumarble/src/components/BottomBar.tsx b/apps/jurumarble/src/components/BottomBar.tsx
index af5d1a29..89898649 100644
--- a/apps/jurumarble/src/components/BottomBar.tsx
+++ b/apps/jurumarble/src/components/BottomBar.tsx
@@ -11,7 +11,7 @@ import SvgIcMark from 'src/assets/icons/components/IcMark';
 import SvgIcUser from 'src/assets/icons/components/IcUser';
 import styled from 'styled-components';
 
-import ReplaceLoginPageModal from './ReplaceLoginPagemModal/ReplaceLoginPageModal';
+import { ReplaceLoginPageModal } from './ReplaceLoginPageModal';
 
 type PathType = '/' | '/stamp' | '/vote' | '/map' | '/my';
 
diff --git a/apps/jurumarble/src/components/ReplaceLoginPagemModal/ReplaceLoginPageModal.tsx b/apps/jurumarble/src/components/ReplaceLoginPageModal/ReplaceLoginPageModal.tsx
similarity index 100%
rename from apps/jurumarble/src/components/ReplaceLoginPagemModal/ReplaceLoginPageModal.tsx
rename to apps/jurumarble/src/components/ReplaceLoginPageModal/ReplaceLoginPageModal.tsx
diff --git a/apps/jurumarble/src/components/ReplaceLoginPageModal/index.ts b/apps/jurumarble/src/components/ReplaceLoginPageModal/index.ts
new file mode 100644
index 00000000..da394b7d
--- /dev/null
+++ b/apps/jurumarble/src/components/ReplaceLoginPageModal/index.ts
@@ -0,0 +1 @@
+export { default as ReplaceLoginPageModal } from './ReplaceLoginPageModal';
diff --git a/apps/jurumarble/src/components/ReplaceLoginPagemModal/styles.module.css b/apps/jurumarble/src/components/ReplaceLoginPageModal/styles.module.css
similarity index 100%
rename from apps/jurumarble/src/components/ReplaceLoginPagemModal/styles.module.css
rename to apps/jurumarble/src/components/ReplaceLoginPageModal/styles.module.css
diff --git a/apps/jurumarble/src/components/index.ts b/apps/jurumarble/src/components/index.ts
index 8fd06a88..65f2506a 100644
--- a/apps/jurumarble/src/components/index.ts
+++ b/apps/jurumarble/src/components/index.ts
@@ -8,3 +8,5 @@ export { default as DivideLine } from './divide/DivideLine';
 export { default as ImageUploadButton } from './ImageUploadButton';
 export { default as LevelChip } from './LevelChip';
 export * from './layouts';
+export { default as BottomBar } from './BottomBar';
+export * from './ReplaceLoginPageModal';

From c866959fbe1f4847bf115c795629e99efdea6813 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?=
 <jhl2619@naver.com>
Date: Sun, 28 Jul 2024 16:50:04 +0900
Subject: [PATCH 6/8] refactor: Move tab list to each domain directory

---
 .../src/app/my/components/VoteCountContainer.tsx   |  4 ++--
 .../src/app/my/components/VoteListContainer.tsx    |  4 ++--
 .../src/{types/my.ts => app/my/constants/index.ts} |  2 +-
 apps/jurumarble/src/app/search/constants/index.tsx | 14 +++++++-------
 4 files changed, 12 insertions(+), 12 deletions(-)
 rename apps/jurumarble/src/{types/my.ts => app/my/constants/index.ts} (77%)

diff --git a/apps/jurumarble/src/app/my/components/VoteCountContainer.tsx b/apps/jurumarble/src/app/my/components/VoteCountContainer.tsx
index 46baebde..e5a63af6 100644
--- a/apps/jurumarble/src/app/my/components/VoteCountContainer.tsx
+++ b/apps/jurumarble/src/app/my/components/VoteCountContainer.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { TAB_LIST, TabList } from 'src/types/my';
 import styled, { css } from 'styled-components';
 
+import { TAB_LIST, TabList } from '../constants';
 import useGetTheNumberOfMyVoteService from '../services/useGetCountedVoteService';
 
 interface Props {
@@ -31,7 +31,7 @@ function VoteCountContainer({ selectedTab, onClickSelectedTab }: Props) {
             <VoteCount>
               {id === 'created-vote'
                 ? writtenVoteCnt
-                : id === 'paticipated-vote'
+                : id === 'participated-vote'
                 ? joinedVoteCnt
                 : id === 'bookmarked-vote'
                 ? bookmarkedVoteCnt
diff --git a/apps/jurumarble/src/app/my/components/VoteListContainer.tsx b/apps/jurumarble/src/app/my/components/VoteListContainer.tsx
index d8683ca3..46e989f8 100644
--- a/apps/jurumarble/src/app/my/components/VoteListContainer.tsx
+++ b/apps/jurumarble/src/app/my/components/VoteListContainer.tsx
@@ -2,11 +2,11 @@
 
 import { useCreateQueryString } from 'hooks/useCreateQueryString';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { TabList } from 'src/types/my';
 import styled, { css } from 'styled-components';
 
 import VoteCountContainer from './VoteCountContainer';
 import VoteItem from './VoteItem';
+import { TabList } from '../constants';
 import useGetMyBookmarkedVoteListService from '../services/useGetMyBookmarkedVoteListService';
 import useGetMyCreatedVoteListService from '../services/useGetMyCreatedVoteListService';
 import useGetMyParticipatedVoteListService from '../services/useGetMyParticipatedVoteListService';
@@ -18,7 +18,7 @@ import useGetMyParticipatedVoteListService from '../services/useGetMyParticipate
 const MY_VOTE_LIST_SERVICE = {
   'created-vote': useGetMyCreatedVoteListService,
   'bookmarked-vote': useGetMyBookmarkedVoteListService,
-  'paticipated-vote': useGetMyParticipatedVoteListService,
+  'participated-vote': useGetMyParticipatedVoteListService,
 };
 
 function VoteListContainer() {
diff --git a/apps/jurumarble/src/types/my.ts b/apps/jurumarble/src/app/my/constants/index.ts
similarity index 77%
rename from apps/jurumarble/src/types/my.ts
rename to apps/jurumarble/src/app/my/constants/index.ts
index 69d6d681..fffa9866 100644
--- a/apps/jurumarble/src/types/my.ts
+++ b/apps/jurumarble/src/app/my/constants/index.ts
@@ -1,6 +1,6 @@
 export const TAB_LIST = [
   { id: 'created-vote', name: '작성한 투표' },
-  { id: 'paticipated-vote', name: '참여한 투표' },
+  { id: 'participated-vote', name: '참여한 투표' },
   { id: 'bookmarked-vote', name: '북마크 투표' },
 ] as const;
 
diff --git a/apps/jurumarble/src/app/search/constants/index.tsx b/apps/jurumarble/src/app/search/constants/index.tsx
index 3e6b410f..1921e35b 100644
--- a/apps/jurumarble/src/app/search/constants/index.tsx
+++ b/apps/jurumarble/src/app/search/constants/index.tsx
@@ -15,18 +15,18 @@ export type TabList = (typeof TAB_LIST)[number]['id'];
 
 export const renderItem: Record<
   TabList,
-  { topSectionItem: JSX.Element; bottomSectionItem: JSX.Element }
+  { topSectionItem: () => JSX.Element; bottomSectionItem: () => JSX.Element }
 > = {
   total: {
-    topSectionItem: <TotalTopSectionItem />,
-    bottomSectionItem: <TotalBottomSectionItem />,
+    topSectionItem: () => <TotalTopSectionItem />,
+    bottomSectionItem: () => <TotalBottomSectionItem />,
   },
   drinkInfo: {
-    topSectionItem: <DrinkInfoTopSectionItem />,
-    bottomSectionItem: <></>,
+    topSectionItem: () => <DrinkInfoTopSectionItem />,
+    bottomSectionItem: () => <></>,
   },
   drinkVote: {
-    topSectionItem: <></>,
-    bottomSectionItem: <DrinkVoteBottomSectionItem />,
+    topSectionItem: () => <></>,
+    bottomSectionItem: () => <DrinkVoteBottomSectionItem />,
   },
 };

From 28919dc2cdb70be74f3d1c0aa5869b576116cfd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?=
 <jhl2619@naver.com>
Date: Sun, 28 Jul 2024 17:48:40 +0900
Subject: [PATCH 7/8] refactor: Refactor search page by separating context

---
 .../app/search/components/DrinkInfoList.tsx   |  42 +++++++
 .../components/DrinkInfoTopSectionItem.tsx    |   7 +-
 .../src/app/search/components/DrinkList.tsx   |  65 ----------
 .../components/DrinkVoteBottomSectionItem.tsx |   7 +-
 .../app/search/components/DrinkVoteList.tsx   |  32 ++---
 .../search/components/RegionSmallSelect.tsx   |  14 +--
 .../app/search/components/SearchContainer.tsx | 114 ------------------
 .../app/search/components/SearchHeader.tsx    |  35 ++++++
 .../src/app/search/components/Tabs.tsx        |  53 ++++++++
 .../components/TotalBottomSectionItem.tsx     |   5 +-
 .../search/components/TotalTopSectionItem.tsx |   4 +-
 .../src/app/search/components/index.ts        |   5 +-
 .../app/search/container/SearchContainer.tsx  |  47 ++++++++
 .../src/app/search/context/SearchProvider.tsx |  62 ++++++----
 .../src/app/search/context/index.ts           |   3 +-
 .../search/context/useSearchChangeContext.ts  |  15 +++
 .../app/search/context/useSearchContext.ts    |  15 ---
 .../search/context/useSearchValueContext.ts   |  15 +++
 apps/jurumarble/src/app/search/page.tsx       |  13 +-
 .../src/hooks/useCreateQueryString.ts         |  20 +++
 20 files changed, 306 insertions(+), 267 deletions(-)
 create mode 100644 apps/jurumarble/src/app/search/components/DrinkInfoList.tsx
 delete mode 100644 apps/jurumarble/src/app/search/components/DrinkList.tsx
 delete mode 100644 apps/jurumarble/src/app/search/components/SearchContainer.tsx
 create mode 100644 apps/jurumarble/src/app/search/components/SearchHeader.tsx
 create mode 100644 apps/jurumarble/src/app/search/components/Tabs.tsx
 create mode 100644 apps/jurumarble/src/app/search/container/SearchContainer.tsx
 create mode 100644 apps/jurumarble/src/app/search/context/useSearchChangeContext.ts
 delete mode 100644 apps/jurumarble/src/app/search/context/useSearchContext.ts
 create mode 100644 apps/jurumarble/src/app/search/context/useSearchValueContext.ts

diff --git a/apps/jurumarble/src/app/search/components/DrinkInfoList.tsx b/apps/jurumarble/src/app/search/components/DrinkInfoList.tsx
new file mode 100644
index 00000000..c73efe40
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/DrinkInfoList.tsx
@@ -0,0 +1,42 @@
+import Path from 'lib/Path';
+import { useRouter } from 'next/navigation';
+import styled from 'styled-components';
+
+import DrinkItem from './DrinkItem';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
+
+function DrinkInfoList() {
+  const router = useRouter();
+
+  const { drinkList, selectedTab } = useSearchValueContext();
+
+  const { onToggleReplaceLoginPageModal, drinkSubscribe } =
+    useSearchChangeContext();
+
+  const onClickDrinkItem = (id: number) => {
+    router.push(`${Path.DRINK_INFO_PAGE}/${id}`);
+  };
+
+  return (
+    <Container>
+      {drinkList.map((drinkInfo) => (
+        <DrinkItem
+          key={drinkInfo.id}
+          drinkInfo={drinkInfo}
+          onClickDrinkItem={() => onClickDrinkItem(drinkInfo.id)}
+          onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
+        />
+      ))}
+      {selectedTab === 'drinkInfo' && <div ref={drinkSubscribe} />}
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 24px;
+`;
+
+export default DrinkInfoList;
diff --git a/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx b/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx
index b8a53377..733d661e 100644
--- a/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx
+++ b/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx
@@ -4,11 +4,12 @@ import styled from 'styled-components';
 import DrinkInfoList from './DrinkInfoList';
 import RegionSmallSelect from './RegionSmallSelect';
 import SortSelect from './SortSelect';
-import { useSearchContext } from '../context';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
 
 function DrinkInfoTopSectionItem() {
-  const { drinkInfoSortOption, onChangeDrinkInfoSortOption } =
-    useSearchContext();
+  const { drinkInfoSortOption } = useSearchValueContext();
+  const { onChangeDrinkInfoSortOption } = useSearchChangeContext();
+
   return (
     <>
       <SelectContainer>
diff --git a/apps/jurumarble/src/app/search/components/DrinkList.tsx b/apps/jurumarble/src/app/search/components/DrinkList.tsx
deleted file mode 100644
index 73599b98..00000000
--- a/apps/jurumarble/src/app/search/components/DrinkList.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Path from 'lib/Path';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { DrinkInfoSortType } from 'src/types/common';
-import styled from 'styled-components';
-
-import DrinkItem from './DrinkItem';
-import useGetDrinkList from '../services/useGetDrinkList';
-
-interface Props {
-  searchText: string;
-  sortOption: DrinkInfoSortType;
-  regionOption: string;
-  isSelectedTab: boolean;
-  onToggleReplaceLoginPageModal: () => void;
-}
-
-function DrinkList({
-  searchText,
-  sortOption,
-  regionOption,
-  onToggleReplaceLoginPageModal,
-}: Props) {
-  const searchParams = useSearchParams();
-  const selectedTab = searchParams.get('selectedTab');
-
-  const { drinkList, subscribe } = useGetDrinkList({
-    page: 0,
-    size: selectedTab === 'drinkInfo' ? 10 : 3,
-    keyword: searchText,
-    region: regionOption,
-    sortBy: sortOption,
-  });
-
-  const router = useRouter();
-  const onClickDrinkItem = (id: number) => {
-    router.push(`${Path.DRINK_INFO_PAGE}/${id}`);
-  };
-
-  if (!drinkList) {
-    return <></>;
-  }
-
-  return (
-    <Container>
-      {drinkList.map((drinkInfo) => (
-        <DrinkItem
-          key={drinkInfo.id}
-          drinkInfo={drinkInfo}
-          onClickDrinkItem={() => onClickDrinkItem(drinkInfo.id)}
-          onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
-        />
-      ))}
-      {selectedTab === 'drinkInfo' && <div ref={subscribe} />}
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 24px;
-`;
-
-export default DrinkList;
diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx
index f326720b..1f456df0 100644
--- a/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx
+++ b/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx
@@ -4,11 +4,12 @@ import styled from 'styled-components';
 import DrinkVoteList from './DrinkVoteList';
 import RegionSmallSelect from './RegionSmallSelect';
 import SortSelect from './SortSelect';
-import { useSearchContext } from '../context';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
 
 function DrinkVoteBottomSectionItem() {
-  const { drinkVoteSortOption, onChangeDrinkVoteSortOption } =
-    useSearchContext();
+  const { drinkVoteSortOption } = useSearchValueContext();
+  const { onChangeDrinkVoteSortOption } = useSearchChangeContext();
+
   return (
     <>
       <SelectContainer>
diff --git a/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx b/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx
index 5eafee07..0239e302 100644
--- a/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx
+++ b/apps/jurumarble/src/app/search/components/DrinkVoteList.tsx
@@ -1,35 +1,17 @@
-import { useSearchParams } from 'next/navigation';
 import styled from 'styled-components';
 
 import DrinkVoteItem from './DrinkVoteItem';
-import useVoteDrinkService from '../services/useVoteDrinkService';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
 
-interface Props {
-  searchText: string;
-  sortOption: string;
-  regionOption: string;
-  isSelectedTab: boolean;
-  onToggleReplaceLoginPageModal: () => void;
-}
-function DrinkVoteList({
-  searchText,
-  sortOption,
-  regionOption,
-  onToggleReplaceLoginPageModal,
-}: Props) {
-  const searchParams = useSearchParams();
-  const selectedTab = searchParams.get('selectedTab');
+function DrinkVoteList() {
+  const { voteDrinkList, selectedTab } = useSearchValueContext();
+  const { onToggleReplaceLoginPageModal, drinkVoteSubscribe } =
+    useSearchChangeContext();
 
-  const { voteDrinkList, subscribe } = useVoteDrinkService({
-    page: 0,
-    size: 3,
-    keyword: searchText,
-    region: regionOption,
-    sortBy: sortOption,
-  });
   if (!voteDrinkList) {
     return <></>;
   }
+
   return (
     <Container>
       {voteDrinkList.map((voteDrink, index) => (
@@ -39,7 +21,7 @@ function DrinkVoteList({
           onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
         />
       ))}
-      {selectedTab === 'drinkVote' && <div ref={subscribe} />}
+      {selectedTab === 'drinkVote' && <div ref={drinkVoteSubscribe} />}
     </Container>
   );
 }
diff --git a/apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx b/apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx
index a35c5d06..dbb62f6f 100644
--- a/apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx
+++ b/apps/jurumarble/src/app/search/components/RegionSmallSelect.tsx
@@ -4,19 +4,19 @@ import { REGION_LIST } from 'lib/constants';
 import SvgIcExpandMore from 'src/assets/icons/components/IcExpandMore';
 import styled, { css } from 'styled-components';
 
-interface Props {
-  defaultOption: string;
-  onChangeSortOption: (id: string) => void;
-}
+import { useSearchChangeContext, useSearchValueContext } from '../context';
 
-function RegionSmallSelect({ defaultOption, onChangeSortOption }: Props) {
+function RegionSmallSelect() {
   const [isOpen, onToggleOpen] = useToggle();
 
+  const { regionOption } = useSearchValueContext();
+  const { onChangeRegionOption } = useSearchChangeContext();
+
   return (
     <SelectStyled isOpen={isOpen}>
       <Select
-        defaultValue={defaultOption}
-        onChangeSelectedOption={onChangeSortOption}
+        defaultValue={regionOption}
+        onChangeSelectedOption={onChangeRegionOption}
         options={[
           { value: '', label: '지역', lat: 0, long: 0 },
           ...REGION_LIST,
diff --git a/apps/jurumarble/src/app/search/components/SearchContainer.tsx b/apps/jurumarble/src/app/search/components/SearchContainer.tsx
deleted file mode 100644
index 2673dc99..00000000
--- a/apps/jurumarble/src/app/search/components/SearchContainer.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client';
-
-import BottomBar from 'components/BottomBar';
-import DivideLine from 'components/DivideLine';
-import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
-import SearchInput from 'components/SearchInput';
-import { useRouter } from 'next/navigation';
-import { SvgIcPrevious } from 'src/assets/icons/components';
-import styled, { css, DefaultTheme } from 'styled-components';
-
-import { renderItem, TAB_LIST, TabList } from '../constants';
-import { useSearchContext } from '../context';
-
-function SearchContainer() {
-  const router = useRouter();
-
-  const {
-    selectedTab,
-    isSelectedTab,
-    searchText,
-    isReplaceLoginPageModal,
-    debouncedChange,
-    onClickSelectedTab,
-    onToggleReplaceLoginPageModal,
-  } = useSearchContext();
-
-  const { topSectionItem, bottomSectionItem } =
-    renderItem[selectedTab as TabList];
-
-  return (
-    <>
-      <TopSection>
-        <SearchBox>
-          <button onClick={() => router.back()}>
-            <SvgIcPrevious width={24} height={24} />
-          </button>
-          <SearchInput
-            placeholder="관심있는 우리술을 찾아보세요."
-            value={searchText}
-            onChange={debouncedChange}
-          />
-        </SearchBox>
-        <TabBox>
-          {TAB_LIST.map(({ id, name }) => (
-            <SelectedButton
-              key={`tab_${id}`}
-              value={id}
-              selected={id === selectedTab}
-              onClick={(e) =>
-                onClickSelectedTab(e.currentTarget.value as TabList)
-              }
-            >
-              {name}
-            </SelectedButton>
-          ))}
-        </TabBox>
-        {topSectionItem}
-      </TopSection>
-      {isSelectedTab('total') && <DivideLine />}
-      <BottomSection>{bottomSectionItem}</BottomSection>
-      {isReplaceLoginPageModal && (
-        <ReplaceLoginPageModal
-          onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
-        />
-      )}
-      <BottomBar />
-    </>
-  );
-}
-
-const TopSection = styled.section`
-  padding: 0 20px;
-`;
-
-const SearchBox = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-top: 8px;
-`;
-
-const TabBox = styled.ul`
-  display: flex;
-  margin-top: 8px;
-`;
-
-const SelectedButton = styled.button<{
-  theme: DefaultTheme;
-  selected: boolean;
-}>`
-  ${({ theme, selected }) =>
-    css`
-      ${theme.typography.body02};
-      color: ${theme.colors.black_03};
-      padding: 16.5px 12px;
-
-      ${selected
-        ? css`
-            ${theme.typography.body01};
-            color: ${theme.colors.black_01};
-            border-bottom: 3px solid ${theme.colors.black_01};
-          `
-        : css`
-            display: flex;
-          `}
-    `}
-`;
-
-const BottomSection = styled.section`
-  padding: 0 20px 96px; // 64(BottomBar height) + 32(margin) = 96
-  overflow: auto;
-`;
-
-export default SearchContainer;
diff --git a/apps/jurumarble/src/app/search/components/SearchHeader.tsx b/apps/jurumarble/src/app/search/components/SearchHeader.tsx
new file mode 100644
index 00000000..cbc4d7ec
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/SearchHeader.tsx
@@ -0,0 +1,35 @@
+import SearchInput from 'components/SearchInput';
+import { useRouter } from 'next/navigation';
+import { SvgIcPrevious } from 'src/assets/icons/components';
+import styled from 'styled-components';
+
+import { useSearchChangeContext, useSearchValueContext } from '../context';
+
+function SearchHeader() {
+  const router = useRouter();
+
+  const { searchText } = useSearchValueContext();
+  const { debouncedChange } = useSearchChangeContext();
+
+  return (
+    <Header>
+      <button onClick={() => router.back()}>
+        <SvgIcPrevious width={24} height={24} />
+      </button>
+      <SearchInput
+        placeholder="관심있는 우리술을 찾아보세요."
+        value={searchText}
+        onChange={debouncedChange}
+      />
+    </Header>
+  );
+}
+
+const Header = styled.header`
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-top: 8px;
+`;
+
+export default SearchHeader;
diff --git a/apps/jurumarble/src/app/search/components/Tabs.tsx b/apps/jurumarble/src/app/search/components/Tabs.tsx
new file mode 100644
index 00000000..65f3bf91
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/Tabs.tsx
@@ -0,0 +1,53 @@
+import styled, { css, DefaultTheme } from 'styled-components';
+
+import { TAB_LIST, TabList } from '../constants';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
+
+function Tabs() {
+  const { selectedTab } = useSearchValueContext();
+  const { onClickSelectedTab } = useSearchChangeContext();
+
+  return (
+    <TabBox>
+      {TAB_LIST.map(({ id, name }) => (
+        <SelectedButton
+          key={`tab_${id}`}
+          value={id}
+          selected={id === selectedTab}
+          onClick={(e) => onClickSelectedTab(e.currentTarget.value as TabList)}
+        >
+          {name}
+        </SelectedButton>
+      ))}
+    </TabBox>
+  );
+}
+
+const TabBox = styled.ul`
+  display: flex;
+  margin-top: 8px;
+`;
+
+const SelectedButton = styled.button<{
+  theme: DefaultTheme;
+  selected: boolean;
+}>`
+  ${({ theme, selected }) =>
+    css`
+      ${theme.typography.body02};
+      color: ${theme.colors.black_03};
+      padding: 16.5px 12px;
+
+      ${selected
+        ? css`
+            ${theme.typography.body01};
+            color: ${theme.colors.black_01};
+            border-bottom: 3px solid ${theme.colors.black_01};
+          `
+        : css`
+            display: flex;
+          `}
+    `}
+`;
+
+export default Tabs;
diff --git a/apps/jurumarble/src/app/search/components/TotalBottomSectionItem.tsx b/apps/jurumarble/src/app/search/components/TotalBottomSectionItem.tsx
index 73446581..295b7c08 100644
--- a/apps/jurumarble/src/app/search/components/TotalBottomSectionItem.tsx
+++ b/apps/jurumarble/src/app/search/components/TotalBottomSectionItem.tsx
@@ -2,10 +2,11 @@ import { Button } from 'components/button';
 import styled, { css } from 'styled-components';
 
 import DrinkVoteList from './DrinkVoteList';
-import { useSearchContext } from '../context';
+import { TabList } from '../constants';
+import { useSearchChangeContext } from '../context';
 
 function TotalBottomSectionItem() {
-  const { onClickSelectedTab } = useSearchContext();
+  const { onClickSelectedTab } = useSearchChangeContext();
   return (
     <>
       <H2>우리술 투표</H2>
diff --git a/apps/jurumarble/src/app/search/components/TotalTopSectionItem.tsx b/apps/jurumarble/src/app/search/components/TotalTopSectionItem.tsx
index 9c10584c..04338dcd 100644
--- a/apps/jurumarble/src/app/search/components/TotalTopSectionItem.tsx
+++ b/apps/jurumarble/src/app/search/components/TotalTopSectionItem.tsx
@@ -3,10 +3,10 @@ import styled, { css } from 'styled-components';
 
 import DrinkInfoList from './DrinkInfoList';
 import { TabList } from '../constants';
-import { useSearchContext } from '../context';
+import { useSearchChangeContext } from '../context';
 
 function TotalTopSectionItem() {
-  const { onClickSelectedTab } = useSearchContext();
+  const { onClickSelectedTab } = useSearchChangeContext();
   return (
     <>
       <H2>우리술 정보</H2>
diff --git a/apps/jurumarble/src/app/search/components/index.ts b/apps/jurumarble/src/app/search/components/index.ts
index 2e74ea5e..31b6028e 100644
--- a/apps/jurumarble/src/app/search/components/index.ts
+++ b/apps/jurumarble/src/app/search/components/index.ts
@@ -1,5 +1,5 @@
 export { default as ChipContainer } from './ChipContainer';
-export { default as Container } from './SearchContainer';
+export { default as Container } from '../container/SearchContainer';
 export { default as DrinkInfoTopSectionItem } from './DrinkInfoTopSectionItem';
 export { default as DrinkItem } from './DrinkItem';
 export { default as DrinkInfoList } from './DrinkInfoList';
@@ -8,8 +8,9 @@ export { default as DrinkVoteItem } from './DrinkVoteItem';
 export { default as DrinkVoteList } from './DrinkVoteList';
 export { default as NoSearchResult } from './NoSearchResult';
 export { default as RegionSmallSelect } from './RegionSmallSelect';
-export { default as SearchContainer } from './SearchContainer';
+export { default as SearchContainer } from '../container/SearchContainer';
 export { default as SortSelect } from './SortSelect';
 export { default as TotalBottomSectionItem } from './TotalBottomSectionItem';
 export { default as TotalTopSectionItem } from './TotalTopSectionItem';
 export { default as VoteDescription } from './VoteDescription';
+export { default as SearchHeader } from './SearchHeader';
diff --git a/apps/jurumarble/src/app/search/container/SearchContainer.tsx b/apps/jurumarble/src/app/search/container/SearchContainer.tsx
new file mode 100644
index 00000000..fb3fe628
--- /dev/null
+++ b/apps/jurumarble/src/app/search/container/SearchContainer.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import DivideLine from 'components/DivideLine';
+import { ReplaceLoginPageModal } from 'components/ReplaceLoginPageModal';
+import styled from 'styled-components';
+
+import { SearchHeader } from '../components';
+import Tabs from '../components/Tabs';
+import { renderItem, TabList } from '../constants';
+import { useSearchChangeContext, useSearchValueContext } from '../context';
+
+function SearchContainer() {
+  const { selectedTab, isSelectedTab, isReplaceLoginPageModal } =
+    useSearchValueContext();
+  const { onToggleReplaceLoginPageModal } = useSearchChangeContext();
+
+  const { topSectionItem, bottomSectionItem } =
+    renderItem[selectedTab as TabList];
+
+  return (
+    <>
+      <TopSection>
+        <SearchHeader />
+        <Tabs />
+        {topSectionItem()}
+      </TopSection>
+      {isSelectedTab('total') && <DivideLine />}
+      <BottomSection>{bottomSectionItem()}</BottomSection>
+      {isReplaceLoginPageModal && (
+        <ReplaceLoginPageModal
+          onToggleReplaceLoginPageModal={onToggleReplaceLoginPageModal}
+        />
+      )}
+    </>
+  );
+}
+
+const TopSection = styled.section`
+  padding: 0 20px;
+`;
+
+const BottomSection = styled.section`
+  padding: 0 20px 96px; // 64(BottomBar height) + 32(margin) = 96
+  overflow: auto;
+`;
+
+export default SearchContainer;
diff --git a/apps/jurumarble/src/app/search/context/SearchProvider.tsx b/apps/jurumarble/src/app/search/context/SearchProvider.tsx
index 170822f6..c4f7f633 100644
--- a/apps/jurumarble/src/app/search/context/SearchProvider.tsx
+++ b/apps/jurumarble/src/app/search/context/SearchProvider.tsx
@@ -16,42 +16,47 @@ import { TabList } from '../constants';
 import useGetDrinkList from '../services/useGetDrinkList';
 import useVoteDrinkService from '../services/useVoteDrinkService';
 
-export const SearchContext = createContext<{
+export const SearchValueContext = createContext<{
   isReplaceLoginPageModal: boolean;
-  onToggleReplaceLoginPageModal: () => void;
   searchText: string;
-  debouncedChange: (keyword: string) => void;
   selectedTab: TabList;
-  onClickSelectedTab: (tab: TabList) => void;
   drinkInfoSortOption: DrinkInfoSortType;
-  onChangeDrinkInfoSortOption: (value: DrinkInfoSortType) => void;
   drinkVoteSortOption: VoteSortType;
-  onChangeDrinkVoteSortOption: (value: VoteSortType) => void;
   regionOption: RegionType;
-  onChangeRegionOption: (value: RegionType) => void;
   isSelectedTab: (tabName: TabList) => boolean;
   drinkList: DrinkInfo[];
-  drinkSubscribe: (node: HTMLElement | null) => void;
   voteDrinkList: Content[];
-  drinkVoteSubscribe: (node: HTMLElement | null) => void;
 }>({
-  debouncedChange: () => {},
   drinkInfoSortOption: 'ByPopularity',
   drinkList: [],
-  drinkSubscribe: () => {},
   drinkVoteSortOption: 'ByPopularity',
-  drinkVoteSubscribe: () => {},
+
   isReplaceLoginPageModal: false,
   isSelectedTab: () => false,
+  regionOption: '',
+  searchText: '',
+  selectedTab: 'total',
+  voteDrinkList: [],
+});
+
+export const SearchChangeContext = createContext<{
+  onToggleReplaceLoginPageModal: () => void;
+  debouncedChange: (keyword: string) => void;
+  onClickSelectedTab: (tab: TabList) => void;
+  onChangeDrinkInfoSortOption: (value: DrinkInfoSortType) => void;
+  onChangeDrinkVoteSortOption: (value: VoteSortType) => void;
+  onChangeRegionOption: (value: RegionType) => void;
+  drinkSubscribe: (node: HTMLElement | null) => void;
+  drinkVoteSubscribe: (node: HTMLElement | null) => void;
+}>({
+  debouncedChange: () => {},
+  drinkSubscribe: () => {},
+  drinkVoteSubscribe: () => {},
   onChangeDrinkInfoSortOption: () => {},
   onChangeDrinkVoteSortOption: () => {},
   onChangeRegionOption: () => {},
   onClickSelectedTab: () => {},
   onToggleReplaceLoginPageModal: () => {},
-  regionOption: '',
-  searchText: '',
-  selectedTab: 'total',
-  voteDrinkList: [],
 });
 
 export const SearchProvider = ({ children }: PropsWithChildren) => {
@@ -125,27 +130,34 @@ export const SearchProvider = ({ children }: PropsWithChildren) => {
     sortBy: drinkVoteSortOption,
   });
 
-  const value = {
-    debouncedChange,
+  const SearchValue = {
     drinkInfoSortOption,
     drinkList,
-    drinkSubscribe,
     drinkVoteSortOption,
-    drinkVoteSubscribe,
     isReplaceLoginPageModal,
     isSelectedTab,
+    regionOption,
+    searchText,
+    selectedTab,
+    voteDrinkList,
+  };
+
+  const SearchChangeValue = {
+    debouncedChange,
+    drinkSubscribe,
+    drinkVoteSubscribe,
     onChangeDrinkInfoSortOption,
     onChangeDrinkVoteSortOption,
     onChangeRegionOption,
     onClickSelectedTab,
     onToggleReplaceLoginPageModal,
-    regionOption,
-    searchText,
-    selectedTab,
-    voteDrinkList,
   };
 
   return (
-    <SearchContext.Provider value={value}>{children}</SearchContext.Provider>
+    <SearchChangeContext.Provider value={SearchChangeValue}>
+      <SearchValueContext.Provider value={SearchValue}>
+        {children}
+      </SearchValueContext.Provider>
+    </SearchChangeContext.Provider>
   );
 };
diff --git a/apps/jurumarble/src/app/search/context/index.ts b/apps/jurumarble/src/app/search/context/index.ts
index b1c7500c..68e1f18b 100644
--- a/apps/jurumarble/src/app/search/context/index.ts
+++ b/apps/jurumarble/src/app/search/context/index.ts
@@ -1,2 +1,3 @@
 export * from './SearchProvider';
-export * from './useSearchContext';
+export * from './useSearchValueContext';
+export * from './useSearchChangeContext';
diff --git a/apps/jurumarble/src/app/search/context/useSearchChangeContext.ts b/apps/jurumarble/src/app/search/context/useSearchChangeContext.ts
new file mode 100644
index 00000000..b1c2b6eb
--- /dev/null
+++ b/apps/jurumarble/src/app/search/context/useSearchChangeContext.ts
@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import { SearchChangeContext } from './SearchProvider';
+
+export const useSearchChangeContext = () => {
+  const context = useContext(SearchChangeContext);
+
+  if (!context) {
+    throw new Error(
+      'useSearchChangeContext SearchChangeProvider 내부에서만 사용할 수 있습니다.',
+    );
+  }
+
+  return context;
+};
diff --git a/apps/jurumarble/src/app/search/context/useSearchContext.ts b/apps/jurumarble/src/app/search/context/useSearchContext.ts
deleted file mode 100644
index 262378e1..00000000
--- a/apps/jurumarble/src/app/search/context/useSearchContext.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useContext } from 'react';
-
-import { SearchContext } from './SearchProvider';
-
-export const useSearchContext = () => {
-  const context = useContext(SearchContext);
-
-  if (!context) {
-    throw new Error(
-      'useSearchContext SearchProvider 내부에서만 사용할 수 있습니다.',
-    );
-  }
-
-  return context;
-};
diff --git a/apps/jurumarble/src/app/search/context/useSearchValueContext.ts b/apps/jurumarble/src/app/search/context/useSearchValueContext.ts
new file mode 100644
index 00000000..605f6a83
--- /dev/null
+++ b/apps/jurumarble/src/app/search/context/useSearchValueContext.ts
@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import { SearchValueContext } from './SearchProvider';
+
+export const useSearchValueContext = () => {
+  const context = useContext(SearchValueContext);
+
+  if (!context) {
+    throw new Error(
+      'useSearchValueContext는 SearchValueProvider 내부에서만 사용할 수 있습니다.',
+    );
+  }
+
+  return context;
+};
diff --git a/apps/jurumarble/src/app/search/page.tsx b/apps/jurumarble/src/app/search/page.tsx
index 47a38f4e..f83b240b 100644
--- a/apps/jurumarble/src/app/search/page.tsx
+++ b/apps/jurumarble/src/app/search/page.tsx
@@ -1,13 +1,20 @@
 'use client';
+/**
+ * @TODO tsconfig에서 paths 수정
+ */
+import BottomBar from 'components/BottomBar';
 
 import { SearchContainer } from './components';
 import { SearchProvider } from './context';
 
 function SearchPage() {
   return (
-    <SearchProvider>
-      <SearchContainer />
-    </SearchProvider>
+    <>
+      <SearchProvider>
+        <SearchContainer />
+      </SearchProvider>
+      <BottomBar />
+    </>
   );
 }
 
diff --git a/apps/jurumarble/src/hooks/useCreateQueryString.ts b/apps/jurumarble/src/hooks/useCreateQueryString.ts
index 68ddcbee..04490000 100644
--- a/apps/jurumarble/src/hooks/useCreateQueryString.ts
+++ b/apps/jurumarble/src/hooks/useCreateQueryString.ts
@@ -23,3 +23,23 @@ export function useCreateQueryString(searchParams: ReadonlyURLSearchParams) {
   );
   return createQueryString;
 }
+
+// export function createQueryString(
+//   name: string,
+//   value: string,
+//   searchParams: ReadonlyURLSearchParams,
+// ) {
+//   const params = new URLSearchParams(searchParams.toString());
+//   /**
+//        * @NOTE 추후 필요시 사용
+//       for (const [key, value] of Object.entries(params)) {
+//         if (value === null) {
+//           params.delete(key)
+//         } else {
+//           params.set(key, String(value))
+//         }
+//       }
+//       */
+//   params.set(name, value);
+//   return params.toString();
+// }

From 883741ad591ea3fa1f87184d1cdc2ded7e15b574 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=8C=E1=85=A2=E1=84=92=E1=85=A1?=
 <jhl2619@naver.com>
Date: Mon, 29 Jul 2024 00:14:27 +0900
Subject: [PATCH 8/8] feat: Add component displaying when search results are
 empty

---
 .../app/search/components/NoSearchResult.tsx  | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 apps/jurumarble/src/app/search/components/NoSearchResult.tsx

diff --git a/apps/jurumarble/src/app/search/components/NoSearchResult.tsx b/apps/jurumarble/src/app/search/components/NoSearchResult.tsx
new file mode 100644
index 00000000..1c94ca10
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/NoSearchResult.tsx
@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import { noSearchResult } from 'public/images';
+import styled from 'styled-components';
+
+function NoSearchResult() {
+  return (
+    <Container>
+      <Image
+        alt="검색 결과가 없습니다."
+        src={noSearchResult}
+        width={140}
+        height={140}
+      />
+      <Text>검색 결과가 없어요. 다른 검색어를 입력해보세요.</Text>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+`;
+
+const Text = styled.p``;
+
+export default NoSearchResult;