step2,3

src/App.jsx

@@ -1,6 +1,8 @@
 import { EmptyView, Header } from '@/components';
 
 import styles from './App.module.scss';
+import Step2_1 from './components/Survey/Step2_1/Step2_1';
+import Step3 from './components/Survey/Step3/Step3';
 
 function App() {
 	return (

src/components/Header/Header.jsx

@@ -1,17 +1,47 @@
 import cn from 'classnames';
+import Step1 from '../Survey/Step1/Step1';
+import Step4 from '../Survey/Step4/Step4';
 
-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 initialSurvey = {
+	username: "",
+	phone: "",
+	email: "",
+	survey1: "",
+	survey2: "",
+	survey2_1: "",
+	survey2_2: "",
+	survey3: "",
+	survey4: ""
+  };
+
 
 const Header = () => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [currentScreen, setCurrentScreen] = useState(1);
+	const [survey, setSurvey] = useState({ ...initialSurvey });
+
+	function toggle(){
+		setIsOpen(isOpen==true?(false, setCurrentScreen(1)):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}>
+						{currentScreen == 1 && <Step1 survey={survey} setSurvey={setSurvey} setCurrentScreen={setCurrentScreen}></Step1>}
+						{currentScreen == 4 && <Step4 survey={survey} setSurvey={setSurvey} setCurrentScreen={setCurrentScreen}></Step4>}
+					</Modal>
+				</>
 			</div>
 		</header>
 	);

src/components/Survey/Font.module.css

@@ -0,0 +1,38 @@
+.font1{
+	font-family: Pretendard;
+	font-size: 20px;
+	font-weight: 500;
+	line-height: 22px;
+}
+
+.font2{
+	font-family: Pretendard;
+	font-size: 18px;
+	font-weight: 500;
+	line-height: 22px;
+}
+
+.font3{
+	font-family: Pretendard;
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 22px;
+}
+
+.font4{
+	font-family: Pretendard;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 22px;
+}
+
+.font5{
+	font-family: Pretendard;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 18px;
+}
+
+.ex{
+	color: #5094FA;
+}

src/components/Survey/Step1/Step1.jsx

@@ -0,0 +1,144 @@
+import {
+	Button,
+	Modal,
+	Input,
+	Label,
+	CarouselIndicators,
+} from '@goorm-dev/gds-challenge';
+import { useState } from 'react';
+
+import styles from '../Font.module.css';
+
+export default function Step1(props) {
+	const { survey, setSurvey, setCurrentScreen } = props;
+	const [showStep2, setShowStep2] = useState(false);
+
+	const handleNext = () => {
+		setCurrentScreen(4);
+		console.log(showStep2);
+	};
+
+
+
+	const handleNameChange = (e) => {
+		const value = e.target.value;
+		setSurvey((prevSurvey) => ({ ...prevSurvey, username: value }));
+		console.log(survey.username);
+	};
+
+	const handlePhoneChange = (e) => {
+		const value = e.target.value;
+		setSurvey((prevSurvey) => ({ ...prevSurvey, phone: value }));
+		console.log(survey.phone);
+	};
+
+	const handleEmailChange = (e) => {
+		const value = e.target.value;
+		setSurvey((prevSurvey) => ({ ...prevSurvey, email: value }));
+		console.log(survey.email);
+	};
+
+	return (
+		<>
+			<Modal.Header>
+				<span className={styles.font1}>
+					참여자 정보를 입력해주세요.
+				</span>
+			</Modal.Header>
+			<Modal.Body>
+				오프라인 팀 챌린지 참여자의 정보를 수집하려고 해요.
+				<div>
+					<div>
+						<Label>이름</Label>
+						<Input
+							type="text"
+							block
+							invalid={false}
+							checked={false}
+							value={survey.username}
+							onChange={handleNameChange}
+							placeholder="이름을 입력해주세요."
+						></Input>
+					</div>
+					<div>
+						<Label>전화번호</Label>
+						<Input
+							type="tel"
+							block
+							placeholder="ex. 01012345678"
+							onChange={handlePhoneChange}
+							value={survey.phone}
+						></Input>
+					</div>
+					<div>
+						<Label>이메일</Label>
+						<Input
+							width="100%"
+							type="email"
+							block
+							placeholder="[email protected]"
+							value={survey.email}
+							onChange={handleEmailChange}
+						></Input>
+					</div>
+				</div>
+				<div>
+					<Input
+						type="checkbox"
+						block
+						label="전체 동의"
+						size="sm"
+						checked
+					></Input>
+					<hr />
+					<Input
+						type="checkbox"
+						block
+						label="(필수) 개인정보처리방침"
+						size="sm"
+						checked
+					></Input>
+					<Input
+						type="checkbox"
+						block
+						label="(선택) 마케팅 목적의 개인 정보 수집 및 이용"
+						size="sm"
+						checked
+					></Input>
+					<Input
+						type="checkbox"
+						block
+						label="(선택) 광고성 정보 수신"
+						size="sm"
+						checked
+					></Input>
+					<div>
+						<Input
+							type="checkbox"
+							label="이메일"
+							size="sm"
+							checked={true}
+						></Input>
+						<Input
+							type="checkbox"
+							label="SMS"
+							size="sm"
+							checked={true}
+						></Input>
+					</div>
+					<p className={styles.font5 && styles.ex}>
+						※ 광고성 정보 수신에 동의하시면 챌린지에 꾸준히 참여하실
+						수 있도록 리마인드 알림을 보내드려요.
+					</p>
+				</div>
+			</Modal.Body>
+			<Modal.Footer>
+				<CarouselIndicators
+					length={4}
+					onClickWithIndex={alert}
+				></CarouselIndicators>
+				<Button onClick={handleNext}>다음</Button>
+			</Modal.Footer>
+		</>
+	);
+}

src/components/Survey/Step2_1/Header.module.scss

@@ -0,0 +1,15 @@
+.header {
+    position: sticky;
+    left: 0;
+    top: 0;
+    padding-top: 5rem /* 80px -> 5rem */;
+    padding-bottom: 1rem /* 16px -> 1rem */;
+    background-color: var(--white);
+}
+
+.contents {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+}

src/components/Survey/Step2_1/Step2_1.jsx

@@ -0,0 +1,111 @@
+import cn from 'classnames';
+
+import { Button, Typography, Modal, Form, CarouselIndicators, Label, Input } from '@goorm-dev/gds-challenge';
+
+import styles from './Header.module.scss';
+import { useState } from 'react';
+
+const Step2_1 = () => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [sw, setSw] = useState(false);
+	const [notSw, setNotSw] = useState(false);
+	const [goormYActive, setGoormYActive] = useState(false)
+	const [goormNActive, setGoormNActive] = useState(false)
+
+	function toggle() {
+		setIsOpen(isOpen == true ? false : true);
+	};
+
+	const info = {
+		marginLeft: "20px"
+	}
+
+	const footer = {
+		marginLeft: "20px",
+		marginBottom: "20px"
+	}
+
+	const swClick = () => {
+		if (notSw) {
+			setSw(!sw);
+			setNotSw(!notSw)
+		} else {
+			setSw(!sw);
+		}
+
+	};
+
+	const notSwClick = () => {
+		if (sw) {
+			setNotSw(!notSw)
+			setSw(!sw);
+		} else {
+			setNotSw(!notSw)
+		}
+	}
+
+	const goormY = () => {
+		if (goormNActive) {
+			setGoormYActive(!goormYActive)
+			setGoormNActive(!goormNActive)
+		} else {
+			setGoormYActive(!goormYActive)
+		}
+	}
+
+	const goormN = () => {
+		if (goormYActive) {
+			setGoormNActive(!goormNActive)
+			setGoormYActive(!goormYActive)
+		} else {
+			setGoormNActive(!goormNActive)
+		}
+	}
+
+	return (
+		<header className={cn(styles.header)}>
+			<div className={cn(styles.contents)}>
+				<Typography token="h5">
+					구름톤 챌린지 참여자 정보 수집
+				</Typography>
+				<Button size="lg" onClick={toggle} >설문조사 참여하기</Button>
+				<>
+					<Modal isOpen={isOpen} toggle={toggle}>
+						<Modal.Header toggle={toggle}>
+							<Typography color="dark" weight={900} >구름 서비스 이용 경험을 알려주세요.</Typography>
+						</Modal.Header>
+						<div style={info}>
+							<Typography content="center" color="info" weight={400} block >텍스트를 입력하세요.</Typography>
+						</div>
+						<Modal.Body>
+							<Form.Group>
+								<Label required pointer={false} >1. SW 관련 학과를 전공하셨나요?</Label>
+								<div>
+									<Button onClick={swClick} color="basic" active={sw}>전공</Button>
+									<Button onClick={notSwClick} color="basic" active={notSw}>비전공</Button>
+								</div>
+							</Form.Group>
+							<Form.Group>
+								<Label required pointer={false} >2. 구름 서비스를 사용해보신 적이 있나요?</Label>
+								<div>
+									<Button onClick={goormY} color="basic" active={goormYActive} >예</Button>
+									<Button onClick={goormN} color="basic" active={goormNActive} >아니요</Button>
+								</div>
+							</Form.Group>
+						</Modal.Body>
+						<Modal.Footer>
+							<Button size="lg" color="link">이전</Button>
+							<Button size="lg">다음</Button>
+						</Modal.Footer>
+						<div style={footer}>
+							<CarouselIndicators length={4} activeIndex={1} ></CarouselIndicators>
+						</div>
+					</Modal>
+
+				</>
+			</div>
+		</header>
+	);
+};
+
+export default Step2_1;