refactor: 모바일페이지 컴포넌트 분리

frontend/src/App.tsx

@@ -1,30 +1,7 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-
-import Toast from '~/components/@common/Toast';
-import MainPage from '~/pages/MainPage';
-import RestaurantDetail from './pages/RestaurantDetail';
-import WishListPage from '~/pages/WishListPage';
-import SignUpPage from '~/pages/SignUpPage';
-import WithdrawalPage from '~/pages/WithdrawalPage';
-import PrivacyPolicy from './pages/PrivacyPolicyPage';
-import OauthRedirectPage from '~/pages/OauthRedirectPage';
+import Router from './router/Router';
 
 function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<MainPage />} />
-        <Route path="/policy" element={<PrivacyPolicy />} />
-        <Route path="/restaurants/:id" element={<RestaurantDetail />} />
-        <Route path="/signUp" element={<SignUpPage />} />
-        <Route path="/restaurants/like" element={<WishListPage />} />
-        <Route path="/withdrawal" element={<WithdrawalPage />} />
-        <Route path="/oauth/redirect/kakao" element={<OauthRedirectPage type="kakao" />} />
-        <Route path="/oauth/redirect/google" element={<OauthRedirectPage type="google" />} />
-      </Routes>
-      <Toast />
-    </BrowserRouter>
-  );
+  return <Router />;
 }
 
 export default App;

frontend/src/components/@common/Header/MobileHeader.tsx

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+import { Link, useLocation } from 'react-router-dom';
+import { Wrapper } from '@googlemaps/react-wrapper';
+import { FONT_SIZE } from '~/styles/common';
+import SearchBar from '~/components/SearchBar';
+import Logo from '~/assets/icons/logo-icon.svg';
+
+function MobileHeader() {
+  const { pathname } = useLocation();
+
+  const isHome = pathname === '/';
+
+  return (
+    <StyledTopNavBar isHome={isHome}>
+      <header>
+        <Link aria-label="셀럽잇 홈페이지" role="button" to="/">
+          <Logo width={32} />
+        </Link>
+        <h5>celuveat</h5>
+        <div />
+      </header>
+      {isHome && (
+        <Wrapper apiKey={process.env.GOOGLE_MAP_API_KEY} language="ko" libraries={['places']}>
+          <SearchBar />
+        </Wrapper>
+      )}
+    </StyledTopNavBar>
+  );
+}
+
+export default MobileHeader;
+
+const StyledTopNavBar = styled.nav<{ isHome: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  position: fixed;
+  z-index: 100;
+
+  width: 100%;
+  height: ${({ isHome }) => (isHome ? '88px' : '44px')};
+
+  padding: 0 0.8rem;
+
+  background-color: var(--white);
+  box-shadow: var(--map-shadow);
+
+  & > header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+    height: 44px;
+
+    & > div {
+      width: 32px;
+
+      font-size: ${FONT_SIZE.lg};
+    }
+  }
+`;

frontend/src/components/@common/Header/index.tsx

@@ -1,3 +1,4 @@
 import Header from './Header';
+import MobileHeader from './MobileHeader';
 
-export default Header;
+export { Header, MobileHeader };

frontend/src/components/BottomNavBar/BottomNavBar.tsx

@@ -0,0 +1,62 @@
+import { useRef } from 'react';
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+import NavItem from '../@common/NavItem';
+import LoveIcon from '~/assets/icons/love.svg';
+import UserButton from './UserButton';
+import FilterButton from './FilterButton';
+import useScrollBlock from '~/hooks/useScrollBlock';
+
+interface BottomNavBarProps {
+  isHide: boolean;
+}
+
+function BottomNavBar({ isHide }: BottomNavBarProps) {
+  const ref = useRef();
+  const navigator = useNavigate();
+
+  const clickWishList = () => navigator('/restaurants/like');
+
+  useScrollBlock(ref);
+
+  return (
+    <StyledBottomNavBar isHide={isHide} ref={ref}>
+      <StyledNavBarButton type="button" onClick={clickWishList}>
+        <NavItem label="위시리스트" icon={<LoveIcon width={24} />} />
+      </StyledNavBarButton>
+
+      <FilterButton />
+      <UserButton />
+    </StyledBottomNavBar>
+  );
+}
+
+export default BottomNavBar;
+
+const StyledBottomNavBar = styled.nav<{ isHide: boolean }>`
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+
+  position: fixed;
+  bottom: 0;
+  z-index: 20;
+
+  width: 100vw;
+  height: 64px;
+
+  background-color: var(--white);
+
+  border-top: 1px solid var(--gray-1);
+
+  ${({ isHide }) => isHide && 'transform: translateY(64px)'};
+
+  transition: 0.4s ease-in-out;
+`;
+
+const StyledNavBarButton = styled.button`
+  border: none;
+  outline: none;
+
+  background: none;
+`;

frontend/src/components/BottomNavBar/FilterButton.tsx

@@ -0,0 +1,53 @@
+import { useQuery } from '@tanstack/react-query';
+import styled from 'styled-components';
+import NavItem from '../@common/NavItem';
+import ProfileImage from '../@common/ProfileImage';
+import CelebIcon from '~/assets/icons/celeb.svg';
+import { getCelebs } from '~/api/celeb';
+import useRestaurantsQueryStringState from '~/hooks/store/useRestaurantsQueryStringState';
+import FilterOptionsModal from './FilterOptionsModal';
+import useBooleanState from '~/hooks/useBooleanState';
+
+function FilterButton() {
+  const celebId = useRestaurantsQueryStringState(state => state.celebId);
+  const { value: isModalOpen, setTrue: openModal, setFalse: closeModal } = useBooleanState(false);
+
+  const { data: celebOptions } = useQuery({
+    queryKey: ['celebOptions'],
+    queryFn: () => getCelebs(),
+    suspense: true,
+  });
+
+  const selectedCeleb = celebOptions.find(({ id }) => id === celebId);
+
+  return (
+    <>
+      <StyledFilterButton type="button" onClick={openModal}>
+        {selectedCeleb ? (
+          <NavItem
+            label={selectedCeleb.youtubeChannelName.replace('@', '')}
+            icon={<ProfileImage name={selectedCeleb.name} imageUrl={selectedCeleb.profileImageUrl} size="32px" />}
+          />
+        ) : (
+          <NavItem label="필터" icon={<CelebIcon width={24} />} />
+        )}
+      </StyledFilterButton>
+
+      {isModalOpen && (
+        <FilterOptionsModal
+          isModalOpen={isModalOpen}
+          openModal={openModal}
+          closeModal={closeModal}
+          celebOptions={celebOptions}
+        />
+      )}
+    </>
+  );
+}
+
+export default FilterButton;
+
+const StyledFilterButton = styled.button`
+  border: none;
+  background: none;
+`;