[feature] 소개페이지 임시 이미지로 대체 및 메뉴바 구현

frontend/.prettierrc

@@ -10,6 +10,5 @@
   "arrowParens": "always",
   "endOfLine": "auto",
   "prefer-const": true,
-  "singleAttributePerLine": false,
-  "bracketSameLine": true
-}
+  "singleAttributePerLine": false
+}

frontend/src/App.tsx

@@ -6,10 +6,11 @@ import { AdminClubProvider } from '@/context/AdminClubContext';
 import GlobalStyles from '@/styles/Global.styles';
 import MainPage from '@/pages/MainPage/MainPage';
 import ClubDetailPage from '@/pages/ClubDetailPage/ClubDetailPage';
-import AdminPage from './pages/AdminPage/AdminPage';
+import AdminPage from '@/pages/AdminPage/AdminPage';
+import IntroducePage from '@/pages/IntroducePage/IntroducePage';
 import ClubInfoEditTab from '@/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab';
-import RecruitEditTab from './pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab';
-import AccountEditTab from './pages/AdminPage/tabs/AccountEditTab/AccountEditTab';
+import RecruitEditTab from '@/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab';
+import AccountEditTab from '@/pages/AdminPage/tabs/AccountEditTab/AccountEditTab';
 import LoginTab from '@/pages/AdminPage/auth/LoginTab/LoginTab';
 import PrivateRoute from '@/pages/AdminPage/auth/PrivateRoute/PrivateRoute';
 import PhotoEditTab from '@/pages/AdminPage/tabs/PhotoEditTab/PhotoEditTab';
@@ -41,6 +42,7 @@ const App = () => {
                 </Suspense>
               }
             />
+            <Route path='/introduce' element={<IntroducePage />} />
             <Route path='/admin/login' element={<LoginTab />} />
             <Route
               path='/admin/*'

frontend/src/components/common/Header/Header.styles.ts

@@ -136,3 +136,58 @@ export const MobileMenu = styled.button`
     object-fit: cover;
   }
 `;
+
+export const DrawerContainer = styled.div<{ isOpen: boolean }>`
+  position: fixed;
+  top: ${({ isOpen }) => (isOpen ? '0' : '-175px')};
+  height: 175px;
+  left: 0;
+  right: 0;
+  border-radius: 0px 0px 20px 20px;
+  background: #fff;
+  box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.25);
+  transition: top 0.2s ease-in-out;
+  z-index: 2;
+  padding: 20px;
+
+  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
+`;
+
+export const DrawerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 34.75px;
+`;
+
+export const DrawerHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 150px;
+`;
+
+export const DrawerMainIcon = styled.img`
+  width: 158px;
+  height: 32.25px;
+  flex-shrink: 0;
+  cursor: pointer;
+`;
+
+export const DrawerDeleteIcon = styled.img`
+  width: 17px;
+  height: 17px;
+  flex-shrink: 0;
+`;
+
+export const MenubarIntroduceBox = styled.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 36px;
+  border-radius: 52px;
+  background: rgba(255, 84, 20, 0.08);
+  cursor: pointer;
+`;

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

@@ -3,10 +3,12 @@ import { useLocation } from 'react-router-dom';
 import * as Styled from './Header.styles';
 import SearchBox from '@/components/common/SearchBox/SearchBox';
 import useHeaderService from '@/services/header/useHeaderService';
+import useMobileMenu from '@/services/header/useMobileMenu';
 import useIsMobile from '@/hooks/useIsMobile';
 import DesktopMainIcon from '@/assets/images/moadong_name_logo.svg';
 import MobileMainIcon from '@/assets/images/logos/moadong_mobile_logo.svg';
 import MenuBar from '@/assets/images/icons/menu_button_icon.svg';
+import DeleteIcon from '@/assets/images/introduce/delete.png';
 
 interface MobileHeaderProps {
   handleHomeClick: (device: 'mobile' | 'desktop') => void;
@@ -19,6 +21,42 @@ interface DesktopHeaderProps {
   handleIntroduceClick: () => void;
 }
 
+interface MobileMenuProp {
+  isOpen: boolean;
+  onClose: () => void;
+  handleHomeClick: (device: 'mobile' | 'desktop') => void;
+  handleIntroduceClick: () => void;
+}
+
+const MobileMenuDrawer = ({
+  isOpen,
+  onClose,
+  handleHomeClick,
+  handleIntroduceClick,
+}: MobileMenuProp) => {
+  return (
+    <Styled.DrawerContainer isOpen={isOpen}>
+      <Styled.DrawerWrapper>
+        <Styled.DrawerHeader>
+          <Styled.DrawerMainIcon
+            src={DesktopMainIcon}
+            alt='홈 버튼'
+            onClick={() => handleHomeClick('mobile')}
+          />
+          <Styled.DrawerDeleteIcon
+            src={DeleteIcon}
+            alt='삭제 버튼'
+            onClick={onClose}
+          />
+        </Styled.DrawerHeader>
+        <Styled.MenubarIntroduceBox onClick={handleIntroduceClick}>
+          모아동 소개
+        </Styled.MenubarIntroduceBox>
+      </Styled.DrawerWrapper>
+    </Styled.DrawerContainer>
+  );
+};
+
 const MobileHeader = ({
   handleHomeClick,
   handleMenuClick,
@@ -56,11 +94,7 @@ const DesktopHeader = ({
           />
         </Styled.LogoButtonStyles>
         {!isAdminPage && (
-          <Styled.IntroduceButtonStyles
-            onClick={handleIntroduceClick}
-            href='https://valiant-schooner-12c.notion.site/1a64ac84bab3805287e0cef50b563370'
-            target='_blank'
-            rel='noopener noreferrer'>
+          <Styled.IntroduceButtonStyles onClick={handleIntroduceClick}>
             모아동 소개
           </Styled.IntroduceButtonStyles>
         )}
@@ -78,11 +112,23 @@ const Header = () => {
   const { handleHomeClick, handleIntroduceClick, handleMenuClick } =
     useHeaderService();
 
+  const { isMenuOpen, openMenu, closeMenu } = useMobileMenu({
+    handleMenuClick,
+  });
+
   return isMobile ? (
-    <MobileHeader
-      handleHomeClick={handleHomeClick}
-      handleMenuClick={handleMenuClick}
-    />
+    <>
+      <MobileHeader
+        handleHomeClick={handleHomeClick}
+        handleMenuClick={openMenu}
+      />
+      <MobileMenuDrawer
+        isOpen={isMenuOpen}
+        onClose={closeMenu}
+        handleHomeClick={handleHomeClick}
+        handleIntroduceClick={handleIntroduceClick}
+      />
+    </>
   ) : (
     <DesktopHeader
       isAdminPage={isAdminPage}

frontend/src/components/common/Spinner/Spinner.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const spin = keyframes`
+  0% { transform: rotate(0deg);}
+  100% { transform: rotate(360deg);}
+`;
+
+const SpinnerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 800px;
+`;
+
+const SpinnerCircle = styled.div`
+  border: 6px solid #eee;
+  border-top: 6px solid #ff5414;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  animation: ${spin} 1s linear infinite;
+`;
+
+const Spinner = () => (
+  <SpinnerWrapper>
+    <SpinnerCircle />
+  </SpinnerWrapper>
+);
+
+export default Spinner;

frontend/src/pages/IntroducePage/IntroducePage.styles.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { HeaderStyles } from '@/components/common/Header/Header.styles';
+import { FooterContainer } from '@/components/common/Footer/Footer.styles';
+
+export const IntroducePageHeader = styled(HeaderStyles)`
+  max-width: none;
+
+  @media (max-width: 500px) {
+    display: flex;
+  }
+`;
+
+export const IntroducePageFooter = styled(FooterContainer)`
+  margin-top: -50px;
+`;
+
+export const IntroduceImage = styled.img`
+  width: 100vw;
+  height: auto;
+  margin-top: 62px;
+`;

frontend/src/pages/IntroducePage/IntroducePage.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import * as Styled from './IntroducePage.styles';
+import Header from '@/components/common/Header/Header';
+import Footer from '@/components/common/Footer/Footer';
+import Spinner from '@/components/common/Spinner/Spinner';
+import IntroduceImage from '@/assets/images/introduce/Introduce.png';
+
+const IntroducePage = () => {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <>
+      <Styled.IntroducePageHeader>
+        <Header />
+      </Styled.IntroducePageHeader>
+      {loading && <Spinner />}
+      <Styled.IntroduceImage
+        src={IntroduceImage}
+        alt='소개 이미지'
+        style={{ display: loading ? 'none' : 'block' }}
+        onLoad={() => setLoading(false)}
+      />
+      <Styled.IntroducePageFooter>
+        <Footer />
+      </Styled.IntroducePageFooter>
+    </>
+  );
+};
+
+export default IntroducePage;

frontend/src/services/header/useHeaderService.ts

@@ -20,6 +20,7 @@ const useHeaderService = () => {
   };
 
   const goIntroducePage = () => {
+    navigate('/introduce');
     trackEvent('Introduce Button Clicked');
   };
 

frontend/src/services/header/useMobileMenu.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from 'react';
+import useMixpanelTrack from '@/hooks/useMixpanelTrack';
+
+interface MobileMenuProp {
+  handleMenuClick: () => void;
+}
+
+const useMobileMenu = ({ handleMenuClick }: MobileMenuProp) => {
+  const trackEvent = useMixpanelTrack();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const openMenu = () => {
+    handleMenuClick();
+    setIsMenuOpen((prev) => !prev);
+  };
+
+  const closeMenu = useCallback(() => {
+    setIsMenuOpen(false);
+    trackEvent('Mobile Menubar delete Button Clicked');
+  }, []);
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeMenu();
+    };
+    if (isMenuOpen) window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [isMenuOpen, closeMenu]);
+
+  return { isMenuOpen, openMenu, closeMenu };
+};
+
+export default useMobileMenu;