[fix] 응답 내역을 마크 다운으로 정상적으로 볼 수 있게 처리, 화면 크기에 따른 영역 처리

AIIA-GCU · Sep 20, 2024 · f818eeb · f818eeb
1 parent 4c40eaa
commit f818eeb
Showing 1 changed file with 41 additions and 2 deletions.
diff --git a/src/main/resources/templates/history/view.html b/src/main/resources/templates/history/view.html
@@ -28,6 +28,11 @@
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             max-width: 600px;
             width: 100%;
+            max-height: 90vh; /* 화면 크기에 따른 최대 높이 제한 */
+            overflow-y: auto;  /* 내용이 많으면 스크롤 */
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
         }
 
         .time {
@@ -45,19 +50,53 @@
             padding-bottom: 10px;
         }
 
-        p {
+        .answer {
             font-size: 16px;
             color: #555;
             line-height: 1.6;
             white-space: pre-line;
+            overflow-wrap: break-word;
+        }
+
+        .answer ul {
+            list-style-type: disc;
+            padding-left: 20px;
+        }
+
+        .answer ol {
+            list-style-type: decimal;
+            padding-left: 20px;
+        }
+
+        .answer code {
+            background-color: #f5f5f5;
+            padding: 2px 4px;
+            border-radius: 4px;
+        }
+
+        .answer pre {
+            background-color: #f5f5f5;
+            padding: 10px;
+            border-radius: 4px;
+            overflow-x: auto;
         }
     </style>
+    <!-- marked.js를 사용하여 마크다운 변환 -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 </head>
 <body>
     <div class="container">
         <div class="time" th:text="${history.talkedTime}"></div>
         <h1 th:text="${history.question}"></h1>
-        <p th:utext="${#strings.replace(history.answer, '\n', '<br/>')}"></p>
+        <div class="answer" id="answer"></div>
     </div>
+
+    <script>
+        // 서버에서 받아온 마크다운 답변 데이터
+        const answerMarkdown = /*[[${history.answer}]]*/ 'default answer';
+
+        // marked.js로 마크다운을 HTML로 변환
+        document.getElementById('answer').innerHTML = marked(answerMarkdown);
+    </script>
 </body>
 </html>