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/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};
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/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/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
new file mode 100644
index 00000000..733d661e
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/DrinkInfoTopSectionItem.tsx
@@ -0,0 +1,34 @@
+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 { useSearchChangeContext, useSearchValueContext } from '../context';
+
+function DrinkInfoTopSectionItem() {
+  const { drinkInfoSortOption } = useSearchValueContext();
+  const { onChangeDrinkInfoSortOption } = useSearchChangeContext();
+
+  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/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
new file mode 100644
index 00000000..1f456df0
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/DrinkVoteBottomSectionItem.tsx
@@ -0,0 +1,34 @@
+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 { useSearchChangeContext, useSearchValueContext } from '../context';
+
+function DrinkVoteBottomSectionItem() {
+  const { drinkVoteSortOption } = useSearchValueContext();
+  const { onChangeDrinkVoteSortOption } = useSearchChangeContext();
+
+  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/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/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;
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 c9494b70..00000000
--- a/apps/jurumarble/src/app/search/components/SearchContainer.tsx
+++ /dev/null
@@ -1,306 +0,0 @@
-'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 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 { 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()
- */
-
-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 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];
-
-  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 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;
-`;
-
-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
new file mode 100644
index 00000000..295b7c08
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/TotalBottomSectionItem.tsx
@@ -0,0 +1,42 @@
+import { Button } from 'components/button';
+import styled, { css } from 'styled-components';
+
+import DrinkVoteList from './DrinkVoteList';
+import { TabList } from '../constants';
+import { useSearchChangeContext } from '../context';
+
+function TotalBottomSectionItem() {
+  const { onClickSelectedTab } = useSearchChangeContext();
+  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..04338dcd
--- /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 { useSearchChangeContext } from '../context';
+
+function TotalTopSectionItem() {
+  const { onClickSelectedTab } = useSearchChangeContext();
+  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..31b6028e
--- /dev/null
+++ b/apps/jurumarble/src/app/search/components/index.ts
@@ -0,0 +1,16 @@
+export { default as ChipContainer } from './ChipContainer';
+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';
+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 '../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/constants/index.tsx b/apps/jurumarble/src/app/search/constants/index.tsx
new file mode 100644
index 00000000..1921e35b
--- /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/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
new file mode 100644
index 00000000..c4f7f633
--- /dev/null
+++ b/apps/jurumarble/src/app/search/context/SearchProvider.tsx
@@ -0,0 +1,163 @@
+'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 SearchValueContext = createContext<{
+  isReplaceLoginPageModal: boolean;
+  searchText: string;
+  selectedTab: TabList;
+  drinkInfoSortOption: DrinkInfoSortType;
+  drinkVoteSortOption: VoteSortType;
+  regionOption: RegionType;
+  isSelectedTab: (tabName: TabList) => boolean;
+  drinkList: DrinkInfo[];
+  voteDrinkList: Content[];
+}>({
+  drinkInfoSortOption: 'ByPopularity',
+  drinkList: [],
+  drinkVoteSortOption: 'ByPopularity',
+
+  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: () => {},
+});
+
+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 SearchValue = {
+    drinkInfoSortOption,
+    drinkList,
+    drinkVoteSortOption,
+    isReplaceLoginPageModal,
+    isSelectedTab,
+    regionOption,
+    searchText,
+    selectedTab,
+    voteDrinkList,
+  };
+
+  const SearchChangeValue = {
+    debouncedChange,
+    drinkSubscribe,
+    drinkVoteSubscribe,
+    onChangeDrinkInfoSortOption,
+    onChangeDrinkVoteSortOption,
+    onChangeRegionOption,
+    onClickSelectedTab,
+    onToggleReplaceLoginPageModal,
+  };
+
+  return (
+    <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
new file mode 100644
index 00000000..68e1f18b
--- /dev/null
+++ b/apps/jurumarble/src/app/search/context/index.ts
@@ -0,0 +1,3 @@
+export * from './SearchProvider';
+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/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 55e8f604..f83b240b 100644
--- a/apps/jurumarble/src/app/search/page.tsx
+++ b/apps/jurumarble/src/app/search/page.tsx
@@ -1,9 +1,21 @@
 'use client';
+/**
+ * @TODO tsconfig에서 paths 수정
+ */
+import BottomBar from 'components/BottomBar';
 
-import SearchContainer from './components/SearchContainer';
+import { SearchContainer } from './components';
+import { SearchProvider } from './context';
 
-function Search() {
-  return <SearchContainer />;
+function SearchPage() {
+  return (
+    <>
+      <SearchProvider>
+        <SearchContainer />
+      </SearchProvider>
+      <BottomBar />
+    </>
+  );
 }
 
-export default Search;
+export default SearchPage;
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';
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();
+// }