From 837f7645360df54c504d3fe82c3ed6127c3ef816 Mon Sep 17 00:00:00 2001
From: StopSoo <jpy1030@naver.com>
Date: Sat, 9 Mar 2024 23:14:13 +0900
Subject: [PATCH] =?UTF-8?q?<feat>:=20=ED=94=8C=EB=9E=AB=ED=8F=BC=20?=
 =?UTF-8?q?=EC=86=8C=EA=B0=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20-=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20=EB=82=B4=EC=9A=A9=20=EB=B3=80=EA=B2=BD=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/intro/IntroTemplate.jsx | 59 +++++++++++++++++++++------
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/component/intro/IntroTemplate.jsx b/src/component/intro/IntroTemplate.jsx
index d41768c..d20a673 100644
--- a/src/component/intro/IntroTemplate.jsx
+++ b/src/component/intro/IntroTemplate.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import MenuBar from '../common/MenuBar.jsx';
 import AlertBar from '../common/Alert.jsx';
@@ -8,15 +8,42 @@ import logoRoot from '../resource/unisphere_logo.png';
 import handiconRoot from '../resource/unisphere_logo_hand.png';
 
 function IntroTemplate() {
-    return (
-      <HomepagePosition>
-        <MenuBar/>
-        <AlertBar/>
-        <LogoPart>
-          <img src={logoRoot} alt="logo"/>
-        </LogoPart>
-        <ButtonOne>플랫폼 소개</ButtonOne>
-        <ButtonTwo>공지사항</ButtonTwo>
+  const [showFirstpage, setShowFirstpage] = useState(true);
+  const [buttonOneZIndex, setButtonOneZIndex] = useState(2);  // 기본 버튼은 플랫폼 소개 버튼
+  const [buttonTwoZIndex, setButtonTwoZIndex] = useState(0);
+
+  return (
+    <HomepagePosition>
+      <MenuBar/>
+      <AlertBar/>
+      <LogoPart>
+        <img src={logoRoot} alt="logo"/>
+      </LogoPart>
+      <ButtonOne 
+        onClick={() => {
+          setShowFirstpage(true);
+          setButtonOneZIndex(2);
+          setButtonTwoZIndex(0);
+        }}
+        style={{
+          zIndex: buttonOneZIndex
+        }}
+      >
+        플랫폼 소개
+      </ButtonOne>
+      <ButtonTwo 
+        onClick={() => {
+          setShowFirstpage(false);
+          setButtonOneZIndex(0);
+          setButtonTwoZIndex(2);
+        }}
+        style={{
+          zIndex: buttonTwoZIndex
+        }}
+      >
+        공지사항
+      </ButtonTwo>
+      {showFirstpage && (
         <WhiteBox>
           <BubblePart>
             <text>
@@ -44,9 +71,15 @@ function IntroTemplate() {
             <main>청년 단체들의 교류 활성화를 촉진시키고, 국제 개발 협력에 관련한 정보들을 취합하여 한 눈에 볼 수 있게 하는 웹 플랫폼 제공.</main>
           </TextPart>
         </WhiteBox>
-      </HomepagePosition>
-    );
-  }
+      )}
+      {!showFirstpage && (
+        <WhiteBox>
+          {/* 채워야 함 */}
+        </WhiteBox>
+      )}
+    </HomepagePosition>
+  );
+}
   
   const HomepagePosition = styled.div`
       display: flex;