From 7d97f676a7d4c439c07519dedb5503e43954144a Mon Sep 17 00:00:00 2001
From: JUHA KIM <88622675+hayamaster@users.noreply.github.com>
Date: Tue, 31 Oct 2023 15:47:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B0=95=EC=8A=A4=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20(#15)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: basicProfileIcon 추가

* feat: 프로필 컴포넌트 구현

* style: 이미지 크기 수정

* feat: UserList 컴포넌트 구현

* refactor: PR리뷰 반영
---
 src/components/Profile/index.tsx  |  1 -
 src/components/UserList/index.tsx | 47 +++++++++++++++++++++++++++++++
 src/components/index.ts           |  1 +
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/components/UserList/index.tsx

diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
index 666d4115..1a298c0b 100644
--- a/src/components/Profile/index.tsx
+++ b/src/components/Profile/index.tsx
@@ -1,4 +1,3 @@
-
 import { BasicProfileIcon } from '@/assets/icons'
 
 interface ProfileProps {
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
new file mode 100644
index 00000000..4917d5a2
--- /dev/null
+++ b/src/components/UserList/index.tsx
@@ -0,0 +1,47 @@
+import { Profile } from '..'
+
+interface User {
+  id: number
+  image?: string
+  name: string
+  updated_at?: string
+  responser_count?: number
+}
+
+interface UserListProps {
+  users: User[]
+}
+
+const UserList = ({ users }: UserListProps) => {
+  const convertDate = (dates: string) => {
+    let [date, time] = dates.split('Y')
+    const timeArr = time.split(':')
+
+    date = date.split('-').join('. ')
+    time = timeArr[0] + ':' + timeArr[1]
+
+    return date + ', ' + time
+  }
+
+  return (
+    <div className="flex flex-col">
+      {users.map((user, index) => (
+        <div
+          key={user.id}
+          className={`flex flex-row items-center justify-between border border-x-black p-2 ${
+            index === users.length - 1 ? 'border-y-black' : 'border-t-black'
+          }`}
+        >
+          <Profile name={user.name} />
+          <div className="text-gray-500">
+            {user.updated_at
+              ? `답변날짜: ${convertDate(user.updated_at)}`
+              : `응답자 수: ${user.responser_count}`}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default UserList
diff --git a/src/components/index.ts b/src/components/index.ts
index 5370a5b4..151141c0 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,5 @@
 export { default as Profile } from './Profile'
+export { default as UserList } from './UserList'
 export { default as PersonalAnswer } from './PersonalAnswer'
 export { default as PassWordInput } from './PasswordInput'
 export { default as StarRating } from './StarRating'