chore: dayjs 세팅 (#16)

* chore: dayjs 라이브러리 설치

* refactor: UserList props 네이밍 변경

* refactor: UserList 컴포넌트 dayjs 적용

* refactor: split, join 함수를 replace로 변경

* refactor: [리뷰 반영] flex-row 제거

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^1.5.1",
+    "dayjs": "^1.11.10",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/UserList/index.tsx

@@ -1,45 +1,42 @@
+import dayjs from 'dayjs'
 import { Profile } from '..'
 
 interface User {
+  surveyResultId: number
   id: number
-  image?: string
   name: string
-  updated_at?: string
-  responser_count?: number
+  updatedAt?: string
+  responserCount?: 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}`}
+      {users.map((user, index) => {
+        const date = dayjs(user.updatedAt?.replace('Y', ' ')).format(
+          'YYYY. MM. DD, HH:mm',
+        )
+
+        return (
+          <div
+            key={user.id}
+            className={`flex 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.updatedAt
+                ? `답변날짜: ${date}`
+                : `응답자 수: ${user.responserCount}`}
+            </div>
           </div>
-        </div>
-      ))}
+        )
+      })}
     </div>
   )
 }