Feat modal 2

src/App.jsx

@@ -1,14 +1,35 @@
-import { EmptyView, Header } from '@/components';
+import { Card, EmptyView, Header } from '@/components';
 
 import styles from './App.module.scss';
 
+import MainView from './components/MainView/MainView';
+import ModalSign from './components/ModalSign/ModalSign';
+
 function App() {
+	const users = [
+		{ id: 1, name: '최민우', email: 'email' },
+		{ id: 2, name: '�����우', email: 'email' },
+		{ id: 3, name: '최민우', email: 'email' },
+		{ id: 4, name: '�����우', email: 'email' },
+		{ id: 5, name: '최민우', email: 'email' },
+		{ id: 6, name: '�����우', email: 'email' },
+		{ id: 7, name: '최민우' },
+		{ id: 8, name: '�����우', email: 'email' },
+		{ id: 9, name: '최민우', email: 'email' },
+		{ id: 10, name: '�����우', email: 'email' },
+		{ id: 11, name: '최민우', email: 'email' },
+		{ id: 12, name: '�����우', email: 'email' },
+	];
 	return (
 		<div className={styles.App}>
+			{/* <ModalSign /> */}
+
 			<Header />
 			<main className={styles.main}>
-				<EmptyView />
+				{users ? <MainView props={users} /> : <EmptyView />}
+
 			</main>
+
 		</div>
 	);
 }

src/App.module.css

@@ -0,0 +1,9 @@
+.App {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 50rem;
+}
+
+.main {
+  margin-top: 1rem;
+}/*# sourceMappingURL=App.module.css.map */

src/components/Card/Card.module.css

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+.card {
+  width: 100%;
+  border-radius: 0.5rem;
+  background: var(--white);
+  border: 1px solid var(--gray-300);
+  line-height: 22px;
+  /** collapse 내부 content card의 border-top을 제거 */
+}
+.card > * {
+  margin: 0;
+}
+.card + div .card_content {
+  border-top: 0;
+}
+.card ~ .card {
+  border-top: 0;
+}
+.card_content {
+  display: flex;
+  align-items: flex-start;
+  gap: 35px;
+}
+.card_content > * {
+  flex: 1;
+}
+
+.between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.title {
+  max-width: 80px;
+}
+
+.content {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+}
+
+.backgroundColor_white {
+  background-color: var(--white);
+}
+.backgroundColor_gray-50 {
+  background-color: var(--gray-50);
+}
+
+.flat_top {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.flat_bottom {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.flat_both {
+  border-radius: 0;
+}
+
+.center {
+  align-items: center;
+}
+
+.padding_md {
+  padding: 1rem 1.5rem;
+}
+
+.pointer {
+  cursor: pointer;
+}/*# sourceMappingURL=Card.module.css.map */

src/components/EmptyView/EmptyView.jsx

@@ -9,14 +9,23 @@ import styles from './EmptyView.module.scss';
 const EmptyView = () => {
 	return (
 		<Card center padding="none" className={cn(styles.emptyView)}>
-			<img
-				width={112}
-				src="https://statics.goorm.io/images/gds/empty_task.svg"
-				alt="empty view"
-			/>
-			<Typography color="hint" token="paragraph-sm">
-				응답한 참여자가 없습니다.
-			</Typography>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					alignItems: 'center',
+				}}
+			>
+				<img
+					width={112}
+					src="https://statics.goorm.io/images/gds/empty_task.svg"
+					alt="empty view"
+				/>
+				<Typography color="hint" token="paragraph-sm">
+					응답한 참여자가 없습니다.
+				</Typography>
+			</div>
 		</Card>
 	);
 };

src/components/EmptyView/EmptyView.module.css

@@ -0,0 +1,6 @@
+.emptyView {
+  padding-top: 4.5rem;
+  padding-bottom: 4.5rem;
+  gap: 0.5rem;
+  display: "flex";
+}/*# sourceMappingURL=EmptyView.module.css.map */

src/components/EmptyView/EmptyView.module.scss

@@ -2,4 +2,7 @@
     padding-top: 4.5rem /* 72px -> 4.5rem */;
     padding-bottom: 4.5rem /* 72px -> 4.5rem */;
     gap: .5rem /* 8px -> .5rem */;
-}
+    display: "flex";
+    justify-content: center; 
+    align-items: center;
+}

src/components/FeedBackModal/FeedBack.jsx

@@ -0,0 +1,58 @@
+import cn from 'classnames';
+
+import {
+	Button,
+	CarouselIndicators,
+	Modal,
+	TextArea,
+	Typography,
+} from '@goorm-dev/gds-challenge';
+
+import styles from './FeedBack.module.scss';
+
+const FeedBack = ({ isOpen,increment, toggle }) => {
+	return (
+		<Modal isOpen={isOpen} toggle={toggle}>
+			<Modal.Header toggle={toggle} centered />
+			<Modal.Body>
+				<div>
+					<Typography
+						token="h1"
+						className={cn(styles.expected_challenge)}
+					>
+						구름톤 챌린지에 <br /> 전하고 싶은 말을 적어주세요.
+					</Typography>
+
+					<Typography
+						weight={500}
+						token="caption"
+						color="info"
+						className={cn(styles.collect_data)}
+					>
+						더 좋은 챌린지가 될 수 있도록 데이터를 수집하려고 해요.
+					</Typography>
+				</div>
+
+				<TextArea
+					block
+					invalid={false}
+					rows={4}
+					resize="none"
+					className={cn(styles.feedback_area)}
+					placeholder="ex. 다음 번 챌린지에서는 더 어려운 문제가 출제되면 좋겠어요. 오프라인 과제가 다양했으면 좋겠어요."
+				/>
+			</Modal.Body>
+			<Modal.Footer between>
+				<CarouselIndicators length={4} activeIndex={3} />
+				<div className={cn(styles.back_forward_bt)}>
+					<Button color="basic">이전</Button>
+					<Button onClick={increment} disabled>
+						다음
+					</Button>
+				</div>
+			</Modal.Footer>
+		</Modal>
+	);
+};
+
+export default FeedBack;

src/components/FeedBackModal/FeedBack.module.scss

@@ -0,0 +1,34 @@
+.expected_challenge {
+    color: var(--light-gray-gray-900, #2B2D36);
+    font-feature-settings: 'clig' off, 'liga' off;
+
+    /* KOR/H4ㅣ1.25rem */
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 30px; /* 150% */
+    letter-spacing: -0.2px;
+}
+
+.feedback_area {
+    color: var(--semantic-color-text-text-hint, #858899);
+    font-feature-settings: 'clig' off, 'liga' off;
+
+    /* KOR/paragraph */
+    display: flex;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px; /* 157.143% */
+    letter-spacing: -0.1px;
+
+    &::placeholder {
+        content: "ex. 다음 번 챌린지에서는 더 어려운 문제가 출제되면 좋겠어요. 오프라인 과제가 다양했으면 좋겠어요.";
+        white-space: pre-line;
+    }
+}
+
+.back_forward_bt{
+    display: flex;
+    gap: 8px;
+}

src/components/Header/Header.jsx

@@ -1,17 +1,44 @@
+import { useState } from 'react';
 import cn from 'classnames';
 
+import { FeedBack, Info, ModalSign, Survey } from '@/components';
+
 import { Button, Typography } from '@goorm-dev/gds-challenge';
 
 import styles from './Header.module.scss';
 
 const Header = () => {
+	const [isOpen, setIsOpen] = useState(0);
+	const [toggle, setToggle] = useState(false);
+
+	const handleOpen = () => {
+		setIsOpen((prev) => {
+			return prev + 1;
+		});
+	};
+
+	const handleToggle = () => {
+		setToggle(true);
+		setIsOpen(0);
+	};
+
 	return (
 		<header className={cn(styles.header)}>
 			<div className={cn(styles.contents)}>
 				<Typography token="h5">
 					구름톤 챌린지 참여자 정보 수집
 				</Typography>
-				<Button size="lg">설문조사 참여하기</Button>
+				<Button size="lg" onClick={handleOpen}>
+					설문조사 참여하기
+				</Button>
+				{!toggle && isOpen === 1 && (
+					<ModalSign isOpen={isOpen} increment={handleOpen} toggle={handleToggle} />
+				)}
+				{!toggle && isOpen === 2 && (
+					<Info isOpen={isOpen} increment={handleOpen} toggle={handleToggle} />
+				)}
+				{!toggle && isOpen === 3 && (<Survey isOpen={isOpen} increment={handleOpen} toggle={handleOpen} />)}
+				{!toggle && isOpen === 4 && (<FeedBack isOpen={isOpen} increment={handleOpen} toggle={handleOpen} />)}
 			</div>
 		</header>
 	);

src/components/Header/Header.module.css

@@ -0,0 +1,16 @@
+.header {
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+  top: 0;
+  padding-top: 5rem;
+  padding-bottom: 1rem;
+  background-color: var(--white);
+}
+
+.contents {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}/*# sourceMappingURL=Header.module.css.map */