User container

.gitignore

@@ -1,4 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+/.idea
 
 # dependencies
 /node_modules

src/App.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { EmptyView, Header } from '@/components';
+import UserAnswer from '@/components/UserAnswer/UserAnswer';
 
 import styles from './App.module.scss';
 
@@ -61,10 +62,14 @@ function App() {
 				modalId={modalId}
 			/>
 			<main className={styles.main}>
-				<EmptyView />
+				{/* <EmptyView /> */}
+				<UserAnswer />
 			</main>
 		</div>
 	);
 }
 
 export default App;
+
+// https://www.figma.com/file/ihvdLEzT5Q8ivyJjnOv2h0/%EC%98%A4%ED%94%84%EB%9D%BC%EC%9D%B8-%ED%8C%80-%EC%B1%8C%EB%A6%B0%EC%A7%80-%EA%B3%BC%EC%A0%9C?type=design&node-id=0-1&mode=design&t=b3yT8aE2EwWvlT8h-0
+

src/components/DeleteButton/DeleteButton.jsx

@@ -0,0 +1,13 @@
+// EditButton.jsx
+import React from "react";
+import {Button} from "@goorm-dev/gds-challenge";
+import {TrashIcon} from "@goorm-dev/gds-icons";
+import styles from "./DeleteButton.module.scss";
+
+const DeleteButton = ({ onClick }) => {
+    return (
+        <Button icon={<TrashIcon/>} onClick={onClick} iconSide="left" size="sm" color="basic" content="start" outline>삭제하기</Button>
+    );
+};
+
+export default DeleteButton;

src/components/DeleteButton/DeleteButton.module.scss

@@ -0,0 +1,8 @@
+.editButton {
+  width: 78px;  // Hug (78px)
+  height: 24px;  // Fixed (24px)
+  padding: 3px 8px;
+  border-radius: 8px;
+  border: 1px solid;
+  gap: 4px;
+}

src/components/EditButton/EditButton.jsx

@@ -0,0 +1,14 @@
+// EditButton.jsx
+import React from "react";
+import { Button } from "@goorm-dev/gds-challenge";
+import { EditIcon } from "@goorm-dev/gds-icons";
+import styles from "./EditButton.module.scss";
+
+const EditButton = () => {
+  return (
+    <Button icon={<EditIcon />} iconSide="left" size="sm" color="basic" content="start" outline>수정하기</Button>
+)
+  ;
+};
+
+export default EditButton;

src/components/EditButton/EditButton.module.scss

@@ -0,0 +1,8 @@
+.editButton {
+  width: 78px;  // Hug (78px)
+  height: 24px;  // Fixed (24px)
+  padding: 3px 8px;
+  border-radius: 8px;
+  border: 1px solid;
+  gap: 4px;
+}

src/components/EmptyView/EmptyView.jsx

@@ -1,24 +1,26 @@
-import cn from 'classnames';
+import cn from "classnames";
 
 import { Card } from '@/components';
 
-import { Typography } from '@goorm-dev/gds-challenge';
+import { Typography } from "@goorm-dev/gds-challenge";
 
-import styles from './EmptyView.module.scss';
+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>
-		</Card>
-	);
+  return (
+    <Card center padding="none" className={cn(styles.emptyView, styles.centerContent)}>
+      <div className={styles.innerContent}>
+        <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>
+  );
 };
 
 export default EmptyView;

src/components/EmptyView/EmptyView.module.scss

@@ -2,4 +2,20 @@
     padding-top: 4.5rem /* 72px -> 4.5rem */;
     padding-bottom: 4.5rem /* 72px -> 4.5rem */;
     gap: .5rem /* 8px -> .5rem */;
-}
+}
+
+.centerContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.innerContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}

src/components/UserAnswer/UserAnswer.jsx

@@ -0,0 +1,28 @@
+// UserAnswer.jsx
+import React, { useState } from 'react';
+import cn from "classnames";
+import { Card } from "@/components";
+import { Typography } from "@goorm-dev/gds-challenge";
+import styles from "./UserAnswer.module.scss";
+import EditButton from "@/components/EditButton/EditButton";
+import Users from "@/components/Users/Users"
+
+const UserAnswer = () => {
+    const [userCount, setUserCount] = useState(0);  // Initialize userCount state
+
+    return (
+        <Card center padding="none" className={cn(styles.emptyView, styles.centerContent)}>
+            <div className={styles.listHeader}>
+                <Typography weight={500} color="dark">
+                    {`응답한 참여자`}
+                </Typography>
+                <Typography color="primary" weight={500} >{userCount}</Typography>
+            </div>
+            <div className={styles.list}>
+                <Users setUserCount={setUserCount} />
+            </div>
+        </Card>
+    );
+};
+
+export default UserAnswer;

src/components/UserAnswer/UserAnswer.module.scss

@@ -0,0 +1,41 @@
+.listHeader {
+  position: sticky;
+  top: 0;
+  width: 780px;  // Fill (800px)
+  height: 56px;  // Hug (56px)
+  padding: 16px 24px;
+  gap: 10px;
+  background-color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  z-index: 1;
+  box-shadow: 0px -1px 0px 0px #E8E8EE inset;
+  border-bottom: 1px solid #E1E1E8;
+  margin-top: 5px;
+}
+
+.list {
+  overflow: scroll;
+  max-height: 700px;
+  &::-webkit-scrollbar {
+    width: 12px;  // Adjust to your preference
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.5);  // Adjust color and opacity to your preference
+    border: none;  // Remove border
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;  // Make track background transparent
+  }
+
+  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;  // Adjust color and opacity to your preference
+  scrollbar-width: thin;
+}
+
+.listItem {
+  padding: 10px;
+  border-bottom: 1px solid #E1E1E8;
+}