From e3d2e37a97c190fa490a0344fbc05a296d7db493 Mon Sep 17 00:00:00 2001
From: kcwww <cwkim0321@gmail.com>
Date: Tue, 12 Dec 2023 15:32:36 +0900
Subject: [PATCH] feat: add introduce at mainPage

---
 front/src/pages/Main/MainButtonBox.tsx |  8 ++++++--
 front/src/pages/Main/MenuModal.tsx     | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx
index 0acbc62..a96fdff 100644
--- a/front/src/pages/Main/MainButtonBox.tsx
+++ b/front/src/pages/Main/MainButtonBox.tsx
@@ -6,7 +6,7 @@ import MenuModal from './MenuModal';
 import ListMsgs from './ListMsgs';
 import LockModal from './LockModal';
 import { SnowBallContext } from '@pages/Visit/SnowBallProvider';
-
+import Introduce from '@pages/Intro/Introduce';
 interface MainButtonBoxProps {
   leftArrow: React.RefObject<HTMLImageElement>;
   rightArrow: React.RefObject<HTMLImageElement>;
@@ -157,6 +157,9 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
     }
   };
 
+  const [setIntro, setShowIntro] = useState(false);
+
+
   const privateClick = () => {
     setIsModalOpened(true);
     document.getElementById('lock')!.style.animation = 'fadeOut 1s forwards';
@@ -209,7 +212,8 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
             />
           )}
 
-          {menuModal ? <MenuModal set={setMenuModal} list={setList} /> : null}
+          {menuModal ? <MenuModal intro={[setIntro, setShowIntro]} set={setMenuModal} list={setList} /> : null}
+          {setIntro ? <><Introduce view={[setIntro, setShowIntro]}/></> : null }
 
           <StyledScreen
             ref={screenRef}
diff --git a/front/src/pages/Main/MenuModal.tsx b/front/src/pages/Main/MenuModal.tsx
index 8f0db0a..e0370dc 100644
--- a/front/src/pages/Main/MenuModal.tsx
+++ b/front/src/pages/Main/MenuModal.tsx
@@ -4,9 +4,11 @@ import styled from 'styled-components';
 import { useLogout } from '@hooks';
 import { SnowBallContext } from '@pages/Visit/SnowBallProvider';
 
+
 interface ModalProps {
   set: React.Dispatch<React.SetStateAction<boolean>>;
   list: React.Dispatch<React.SetStateAction<boolean>>;
+  intro: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 }
 
 const StyledModal = styled.div`
@@ -75,12 +77,20 @@ const MenuModal = (props: ModalProps) => {
     navigate('/make/snowball');
   };
 
+  const showIntro = () => {
+    props.set(false);
+    props.intro[1](true);
+  };
+
+
   return (
     <>
       {toast ? (
         <ToastMsg>스노우볼은 최대 5개까지 만들 수 있습니다.</ToastMsg>
       ) : null}
 
+      
+
       <StyledModal>
         <StyledUser>{userData.nickname}님</StyledUser>
         <hr />
@@ -98,6 +108,10 @@ const MenuModal = (props: ModalProps) => {
           새로운 스노우볼 만들러 가기
         </StyledSection>
 
+        <StyledSection onClick={showIntro}>
+          소개글 보기
+        </StyledSection>
+
         <StyledLogout onClick={logout}>로그아웃</StyledLogout>
         <hr />