feat: 유저 리스트 박스 컴포넌트 (#15)

* feat: basicProfileIcon 추가

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

* style: 이미지 크기 수정

* feat: UserList 컴포넌트 구현

* refactor: PR리뷰 반영

src/components/Profile/index.tsx

@@ -1,4 +1,3 @@
-
 import { BasicProfileIcon } from '@/assets/icons'
 
 interface ProfileProps {

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

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'