feat: fetch spent time

Author: choibumsu

src/components/PoemList/PoemItem/index.tsx

@@ -2,16 +2,19 @@ import './style.scss'
 
 type PoemItemProps = {
   username: string
+  time: number
   word: string
   poem: string[]
 }
 
 const PoemItem: React.FC<PoemItemProps> = (props) => {
-  const { username, word, poem } = props
+  const { username, time, word, poem } = props
 
   return (
     <div className="poem-item" data-component="">
-      <div className="username">{username}</div>
+      <div className="username">
+        {username} {time}
+      </div>
       {word.split('').map((letter, index) => {
         return (
           <div key={index} className="poem">

src/components/PoemList/index.tsx

@@ -10,6 +10,7 @@ type PoemListProps = unknown
 type PoemType = {
   id: number
   username: string
+  time: number
   word: string
   poem: string[]
 }
@@ -22,6 +23,7 @@ const fetchPoemList = async (): Promise<PoemType[]> => {
   type OriginPoemType = {
     id: number
     content: string
+    timeSpent: number
     word: {
       text: string
     }
@@ -34,6 +36,7 @@ const fetchPoemList = async (): Promise<PoemType[]> => {
       {
         poems {
           id
+          timeSpent
           content
           word {
             text
@@ -46,6 +49,7 @@ const fetchPoemList = async (): Promise<PoemType[]> => {
   const poemList: PoemType[] = poems.map((poem: OriginPoemType) => ({
     id: poem.id,
     username: '김정빈지노',
+    time: poem.timeSpent,
     word: poem.word.text,
     poem: poem.content.split('@'),
   }))