Merge pull request #100 from boostcampwm-2024/feat-fe-#98

RAG 답안 react-markdown 적용

Author: pkh0106

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",

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>
   );
 }