Feat/ayeon

src/App.jsx

@@ -1,15 +1,41 @@
-import { EmptyView, Header } from '@/components';
+import { createContext, useState } from 'react';
+
+import { EmptyView, Header, ListView } from '@/components';
+import useModalContext from '@/components/Context/formProvider';
 
 import styles from './App.module.scss';
 
+export const modalContext = createContext();
+
 function App() {
+	const { form, updateForm, modalIndex, updateModalIndex, resetForm } =
+		useModalContext();
+
+	const users = localStorage.getItem('goormUsers')
+		? JSON.parse(localStorage.getItem('goormUsers'))
+		: [];
+
 	return (
-		<div className={styles.App}>
-			<Header />
-			<main className={styles.main}>
-				<EmptyView />
-			</main>
-		</div>
+		<modalContext.Provider
+			value={{
+				form,
+				updateForm,
+				modalIndex,
+				updateModalIndex,
+				resetForm,
+			}}
+		>
+			<div className={styles.App}>
+				<Header />
+				<main className={styles.main}>
+					{users.length > 0 ? (
+						<ListView users={users} />
+					) : (
+						<EmptyView />
+					)}
+				</main>
+			</div>
+		</modalContext.Provider>
 	);
 }
 

src/components/Context/formProvider.jsx

@@ -0,0 +1,74 @@
+import { createContext, useEffect, useState } from 'react';
+
+const intialState = {
+	// 1번
+	name: '이름',
+	phone: '01012345678',
+	email: 'test@email.com',
+	permissions: {
+		privacyApproval: false,
+		marketingApproval: false,
+		marketingMediaApproval: {
+			email: false,
+			sms: false,
+		},
+
+		// 2번
+
+		swMajored: true,
+		groomUsed: true,
+		groomService: {
+			edu: false,
+			level: false,
+			devth: false,
+			ide: false,
+			exp: false,
+		},
+		groomWhy: '',
+
+		// 3번
+
+		expect: -1 /* 0번 ~ 3번 중 택 1 선택 */,
+
+		// 4번
+
+		freeMessage: '파이팅~~',
+	},
+};
+
+const useModalContext = () => {
+	const [form, setFormState] = useState(intialState);
+
+	const [modalIndex, setModalIndex] = useState(0);
+
+	const updateForm = (key, value) => {
+		setFormState((prev) => {
+			return {
+				...prev,
+				[key]: value,
+			};
+		});
+
+		console.log('update Form', form);
+	};
+
+	const updateModalIndex = (value) => {
+		setModalIndex(value);
+	};
+
+	const resetForm = () => {
+		setFormState(intialState);
+	};
+
+	const api = {
+		form,
+		updateForm,
+		modalIndex,
+		updateModalIndex,
+		resetForm,
+	};
+
+	return api;
+};
+
+export default useModalContext;

src/components/EmptyView/EmptyView.jsx

@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import cn from 'classnames';
 
 import { Card } from '@/components';

src/components/EmptyView/EmptyView.module.scss

@@ -1,4 +1,6 @@
 .emptyView {
+    display: flex;
+    flex-direction: column;
     padding-top: 4.5rem /* 72px -> 4.5rem */;
     padding-bottom: 4.5rem /* 72px -> 4.5rem */;
     gap: .5rem /* 8px -> .5rem */;

src/components/Header/Header.jsx

@@ -1,18 +1,46 @@
+import React, { useContext, useState } from 'react';
 import cn from 'classnames';
 
 import { Button, Typography } from '@goorm-dev/gds-challenge';
 
+import useModalContext from '../Context/formProvider';
+import CustomModal from '../Modal';
+
 import styles from './Header.module.scss';
 
 const Header = () => {
+	const { form, updateForm, modalIndex, updateModalIndex, resetForm } =
+		useModalContext();
+	const [modalOpen, setModalOpen] = useState(false);
+
+	const toggle = () => {
+		setModalOpen((prevModalOpen) => {
+			return !prevModalOpen;
+		});
+	};
+
+	const handleCloseModal = () => {
+		toggle();
+		resetForm();
+	};
+
+	const handleModalOpen = () => {
+		updateModalIndex(0);
+		toggle();
+	};
+
 	return (
 		<header className={cn(styles.header)}>
 			<div className={cn(styles.contents)}>
 				<Typography token="h5">
 					구름톤 챌린지 참여자 정보 수집
 				</Typography>
-				<Button size="lg">설문조사 참여하기</Button>
+				<Button onClick={handleModalOpen} size="lg">
+					설문조사 참여하기
+				</Button>
 			</div>
+
+			<CustomModal isOpen={modalOpen} onClose={handleCloseModal} />
 		</header>
 	);
 };

src/components/ListView/ListView.jsx

@@ -0,0 +1,24 @@
+import UserDetails from '../UserDetail/UserDetails';
+import { Typography } from '@goorm-dev/gds-challenge';
+
+import { Card } from '@/components';
+import React from 'react';
+
+const ListView = ({ users }) => {
+
+    return (
+        <>
+            <Card title='title' flat='bottom'>
+                <Typography>응답한 참여자</Typography>{" "}
+                <Typography color='primary'>{users.length}</Typography>
+            </Card>
+            {users.map((user, idx) => (
+                <React.Fragment key={user.name}>
+                    <UserDetails user={user} idx={idx} total={users.length} />
+                </React.Fragment>
+            ))}
+        </>
+    )
+};
+
+export default ListView;