fix: render signup terms and privacy policy as Markdown

package.json

@@ -17,7 +17,9 @@
     "monaco-editor": "^0.56.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.18.0",
+    "remark-gfm": "^4.0.1",
     "socket.io-client": "^4.8.3",
     "tailwindcss": "^4.3.0",
     "vite": "^6.3.5"

src/pages/login/LoginPage.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState, type FormEvent } from 'react';
 import { CheckCircle2, Eye, EyeOff } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { BrandMark } from '../../components/BrandMark';
 import { loginInstructor } from '../../lib/auth';
 import type { AuthSession } from '../../types/auth';
@@ -325,7 +327,16 @@ function InstructorSignupForm({ onCancel, onComplete }: InstructorSignupFormProp
       {termModal ? <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#111827]/45 px-4 backdrop-blur-sm" role="dialog" aria-modal="true" aria-label={termModal.title}>
         <div className="flex max-h-[78vh] w-full max-w-2xl flex-col overflow-hidden rounded-lg border border-[#d8dde8] bg-white shadow-2xl">
           <div className="flex items-center justify-between border-b border-[#e3e7ef] px-5 py-4"><h3 className="text-[15px] font-extrabold text-[#303747]">{termModal.title}</h3><button className="text-[20px] leading-none text-[#64748b] hover:text-[#111827]" type="button" onClick={() => setTermModal(null)} aria-label="닫기">×</button></div>
-          <div className="overflow-y-auto whitespace-pre-wrap px-5 py-4 text-[13px] leading-6 text-[#4b5563]">{termModal.loading ? '불러오는 중...' : termModal.body}</div>
+          <div className="min-h-0 overflow-y-auto px-5 py-4 text-[13px] leading-6 text-[#4b5563]">
+            {termModal.loading ? '불러오는 중...' : (
+              <div className="break-words [overflow-wrap:anywhere] [&_h1]:mb-4 [&_h1]:text-xl [&_h1]:font-bold [&_h2]:mb-3 [&_h2]:mt-6 [&_h2]:text-lg [&_h2]:font-bold [&_h3]:mb-2 [&_h3]:mt-4 [&_h3]:text-base [&_h3]:font-bold [&_p]:my-3 [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-1 [&_blockquote]:border-l-4 [&_blockquote]:border-[#d8dde8] [&_blockquote]:pl-4 [&_hr]:my-5 [&_hr]:border-[#d8dde8] [&_a]:text-[#2563eb] [&_a]:underline [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-[#f1f5f9] [&_pre]:p-3 [&_th]:border [&_th]:border-[#d8dde8] [&_th]:bg-[#f1f5f9] [&_th]:px-3 [&_th]:py-2 [&_td]:border [&_td]:border-[#d8dde8] [&_td]:px-3 [&_td]:py-2">
+                <ReactMarkdown remarkPlugins={[remarkGfm]} skipHtml components={{
+                  a: ({ node: _node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
+                  table: ({ node: _node, ...props }) => <div className="my-3 overflow-x-auto"><table {...props} className="w-full border-collapse text-left" /></div>,
+                }}>{termModal.body}</ReactMarkdown>
+              </div>
+            )}
+          </div>
         </div>
       </div> : null}
     </>