add author info

main.js

@@ -12,6 +12,7 @@ class TypingPractice extends HTMLElement {
     async render() {
         const raw = await fetch('https://korean-advice-open-api.vercel.app/api/advice')
         const res = await raw.json()
+        const author = `- ${res['author']} (${res['authorProfile']})`
         const sentence = res["message"]
         const sentence_jamo = decompose(sentence)
         let progress = 0
@@ -41,6 +42,10 @@ class TypingPractice extends HTMLElement {
             sentence_display.append(span)
         })
 
+        const author_info = document.createElement('p')
+        author_info.className = 'author'
+        author_info.textContent = author
+
         const updateColors = (has_error) => {
             ;[...sentence].forEach((_, idx) => {
                 const span = sentence_display.children[idx]
@@ -104,6 +109,7 @@ class TypingPractice extends HTMLElement {
         })
 
         this.append(sentence_display)
+        this.append(author_info)
         this.append(input_box)
     }
 }

style.css

@@ -88,3 +88,11 @@ input:focus {
 .dict-count {
     color: #888888;
 }
+
+.author {
+    display: flex;
+    justify-content: end;
+    color: #888888;
+    font-size: 20px;
+    letter-spacing: 0.02em;
+}