first commit

app/components/MilkdownViewer.tsx

@@ -0,0 +1,59 @@
+'use client';
+import { useEffect } from 'react';
+import type { FC } from 'react';
+import { Crepe as CrepeClass } from '@milkdown/crepe';
+import { Milkdown, useEditor } from '@milkdown/react';
+import { Editor, rootCtx, defaultValueCtx, editorViewOptionsCtx } from '@milkdown/core';
+import { replaceAll } from '@milkdown/utils';
+// (선택) UI 스타일
+import '@milkdown/crepe/theme/common/style.css';
+import '@milkdown/crepe/theme/frame.css';
+
+type Props = {
+  /** 부모에서 내려주는 마크다운 */
+  value: string;
+  /** 필요 시 외부에서 Crepe 인스턴스 접근 */
+  editorRef?: React.RefObject<CrepeClass>;
+};
+
+export const MilkdownViewer: FC<Props> = ({ value, editorRef }) => {
+  const { get } = useEditor((root) => {
+    // 1) Crepe 생성 (초기 값은 parent value)
+    const crepe = new CrepeClass({
+      root,
+      defaultValue: value,
+      featureConfigs: {
+        // 필요 시 다른 기능 설정은 유지 가능
+      },
+    });
+
+    if (editorRef) editorRef.current = crepe;
+
+    // 2) 항상 읽기 전용
+    crepe.editor.config((ctx) => {
+      // 최초 값 보장
+      ctx.set(defaultValueCtx, value);
+      // 편집 불가
+      ctx.update(editorViewOptionsCtx, (prev) => ({
+        ...prev,
+        editable: () => false,
+      }));
+    });
+
+    // ✅ 읽기 전용이라 업로드 플러그인은 제거 (원하면 .use(upload) 복구)
+    return crepe.editor;
+  }, []); // 팩토리 고정: 리마운트/루프 방지
+
+  // 3) 부모 value 변경 시 문서 전체 교체
+  useEffect(() => {
+    const editor = get();
+    if (!editor) return;
+    editor.action(replaceAll(value));
+  }, [get, value]);
+
+  return (
+    <div className="milkviewer">
+      <Milkdown />
+    </div>
+  )
+};