main 페이지

src/App.jsx

@@ -2,13 +2,33 @@ import { 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/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 */

src/components/MainView/MainView.jsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import cn from 'classnames';
+
+import { Card } from '@/components';
+
+import { Button, Collapse, Typography } from '@goorm-dev/gds-challenge';
+import { ChevronDownIcon, EditIcon, TrashIcon } from '@goorm-dev/gds-icons';
+
+const MainView = ({ props }) => {
+	const [toggle, setToggle] = useState(false);
+	const handleToggleClick = () => {
+		setToggle(!toggle);
+	};
+
+	return (
+		<Card center padding="none">
+			<Card flat="bottom" center padding="md">
+				<div>
+					<span>응답한 참여자: </span>
+					<span style={{ color: '#5094FA' }}>{props.length}</span>
+				</div>
+			</Card>
+			<div
+				style={{
+					overflowY: 'auto',
+					maxHeight: '400px',
+					scrollbarWidth: 'none',
+				}}
+			>
+				{props.map((item, index) => {
+					return (
+						<Collapse
+							isOpen
+							style={{
+								padding: '10px',
+								paddingLeft: '25px',
+								border: '1px solid rgba(0, 0, 0, 0.1)',
+								display: 'flex',
+								alignItems: 'center',
+								justifyContent: 'space-between',
+							}}
+						>
+							참여자 {`${index + 1}. ${item.name}`}
+							<div style={{ display: 'flex', gap: '5px' }}>
+								<Button
+									color="basic"
+									iconSide="left"
+									icon={<EditIcon />}
+								>
+									수정하기
+								</Button>
+								<Button
+									color="basic"
+									iconSide="left"
+									icon={<TrashIcon />}
+								>
+									수정하기
+								</Button>
+
+								<Button
+									onClick={handleToggleClick}
+									block={false}
+									outline
+									disabled={false}
+									active={false}
+									color="link"
+									icon={<ChevronDownIcon />}
+								/>
+							</div>
+						</Collapse>
+					);
+				})}
+			</div>
+		</Card>
+	);
+};
+
+export default MainView;