From ecfa036cba32889709f7d095d6faab4d3aff55ab Mon Sep 17 00:00:00 2001
From: ppparkta <pppppark2@gmail.com>
Date: Sat, 23 Sep 2023 14:18:42 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20modal=20=EC=B6=94=EA=B0=80=E3=85=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/Header.jsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index cb03179..40d74fd 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,17 +1,39 @@
 import cn from 'classnames';
 
-import { Button, Typography } from '@goorm-dev/gds-challenge';
+import { Button, Typography, Modal } from '@goorm-dev/gds-challenge';
 
 import styles from './Header.module.scss';
+import { useState } from 'react';
 
 const Header = () => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	function toggle(){
+		setIsOpen(isOpen==true?false:true);
+	};
+
 	return (
 		<header className={cn(styles.header)}>
 			<div className={cn(styles.contents)}>
 				<Typography token="h5">
 					구름톤 챌린지 참여자 정보 수집
 				</Typography>
-				<Button size="lg">설문조사 참여하기</Button>
+				<Button size="lg" onClick={toggle} >설문조사 참여하기</Button>
+				<>
+					<Modal isOpen={isOpen} toggle={toggle}>
+						<Modal.Header toggle={toggle}>
+							헤더
+						</Modal.Header>
+						<Modal.Body>
+							컨텐츠를 넣어주세요.
+						</Modal.Body>
+						<Modal.Footer>
+							<Button size="lg" color="link">이전</Button>
+							<Button size="lg">다음</Button>
+						</Modal.Footer>
+					</Modal>
+				
+				</>
 			</div>
 		</header>
 	);