feat: RAG 답안 react-markdown 적용

boostcampwm-2024 · Feb 20, 2025 · 1a48d49 · 1a48d49
1 parent cbcf320
commit 1a48d49
Show file tree

Hide file tree

Showing 3 changed files with 557 additions and 31 deletions.
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -44,6 +44,7 @@
     "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.3",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",

diff --git a/apps/frontend/src/features/AI/ui/QnA/index.tsx b/apps/frontend/src/features/AI/ui/QnA/index.tsx
@@ -1,3 +1,5 @@
+import ReactMarkdown from "react-markdown";
+
 interface QnAType {
   question: string;
   answer: string;
@@ -9,7 +11,9 @@ export function QnA({ question, answer }: QnAType) {
       <div className="mb-1 w-full rounded-md border-[1px] border-[#d0d9e0] bg-[#f5f6fa] px-3 py-2 font-bold">
         {question}
       </div>
-      <div className="min-h-[100px] p-2 font-light">{answer}</div>
+      <div className="min-h-[100px] p-2">
+        <ReactMarkdown>{answer}</ReactMarkdown>
+      </div>
     </div>
   );
 }