[feat/MAT-272] content-renderer 패키지 개발

apps/native/.gitignore

@@ -47,4 +47,7 @@ app-example
 
 # Firebase Google Services
 google-services.json
-GoogleService-Info.plist
+GoogleService-Info.plist
+
+# Generated WebView bundle (see sync-webview-html)
+assets/webview/content.html

apps/native/metro.config.js

@@ -16,6 +16,21 @@ config.resolver.nodeModulesPaths = [
   path.resolve(monorepoRoot, 'node_modules'),
 ];
 
+// Force a single copy of React/RN so workspace packages (e.g. @repo/pointer-content-renderer)
+// resolve the same instance as the app. Prevents "Invalid hook call" in monorepo.
+const DEDUPE_MODULES = {
+  react: path.resolve(projectRoot, 'node_modules/react'),
+  'react-native': path.resolve(projectRoot, 'node_modules/react-native'),
+  'react-native-webview': path.resolve(projectRoot, 'node_modules/react-native-webview'),
+};
+config.resolver.extraNodeModules = {
+  ...(config.resolver.extraNodeModules ?? {}),
+  ...DEDUPE_MODULES,
+};
+
+// WebView 용 HTML을 asset으로 다루기 위해 등록
+config.resolver.assetExts = [...config.resolver.assetExts, 'html'];
+
 // blockList에서 /dist\/.*/ 제거!
 // node_modules 안의 dist 폴더는 필요하므로, 프로젝트의 dist만 차단
 config.resolver.blockList = [
@@ -40,6 +55,27 @@ config.resolver.resolveRequest = (context, moduleName, platform) => {
     };
   }
 
+  // Force-dedupe React/RN regardless of which workspace package requests them.
+  // Prevents multiple React instances when packages resolve from different
+  // node_modules roots (monorepo + pnpm symlinks).
+  if (DEDUPE_MODULES[moduleName]) {
+    return context.resolveRequest(
+      { ...context, originModulePath: path.join(projectRoot, 'package.json') },
+      moduleName,
+      platform
+    );
+  }
+  // Handle sub-path imports like 'react/jsx-runtime' by redirecting the base.
+  for (const baseName of Object.keys(DEDUPE_MODULES)) {
+    if (moduleName.startsWith(`${baseName}/`)) {
+      return context.resolveRequest(
+        { ...context, originModulePath: path.join(projectRoot, 'package.json') },
+        moduleName,
+        platform
+      );
+    }
+  }
+
   if (originalResolveRequest) {
     return originalResolveRequest(context, moduleName, platform);
   }

apps/native/package.json

@@ -4,15 +4,22 @@
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
+    "prestart": "pnpm sync-webview-html",
     "reset-project": "node ./scripts/reset-project.js",
     "android": "expo run:android",
+    "preandroid": "pnpm sync-webview-html",
     "ios": "expo run:ios",
+    "preios": "pnpm sync-webview-html",
     "web": "expo start --web --port 3000",
+    "preweb": "pnpm sync-webview-html",
     "lint": "expo lint",
     "typecheck": "tsc --noEmit",
+    "sync-webview-html": "pnpm --filter @repo/pointer-content-renderer build && mkdir -p ./assets/webview && cp ../../packages/pointer-content-renderer/dist/index.html ./assets/webview/content.html",
+    "eas-build-post-install": "pnpm sync-webview-html",
     "openapi": "pnpm dlx openapi-typescript https://dev.api.math-pointer.com/v3/api-docs --output ./src/types/api/schema.d.ts && prettier --write ./src/types/api/schema.d.ts"
   },
   "dependencies": {
+    "@repo/pointer-content-renderer": "workspace:*",
     "@expo/ngrok": "^4.1.3",
     "@expo/vector-icons": "^15.0.3",
     "@gorhom/bottom-sheet": "^5.2.7",

package.json

@@ -18,9 +18,9 @@
     "format": "prettier --write \"**/*.{js,ts,tsx,jsx,mjs,hbs,json,css,md}\"",
     "format:check": "prettier --check \"**/*.{js,ts,tsx,jsx,mjs,hbs,json,css,md}\"",
     "svgr:admin": "pnpm dlx @svgr/cli apps/admin/public/svg --out-dir apps/admin/src/assets/svg --no-prettier && prettier --write \"apps/admin/src/assets/svg/**/*.{ts,tsx}\"",
-    "ci:lint": "turbo lint --filter=admin --filter=@repo/pointer-editor-v2",
-    "ci:typecheck": "turbo run typecheck --filter=admin --filter=@repo/pointer-editor-v2",
-    "ci:build": "turbo build --filter=admin --filter=@repo/pointer-editor-v2"
+    "ci:lint": "turbo lint --filter=admin --filter=@repo/pointer-editor-v2 --filter=@repo/pointer-content-renderer",
+    "ci:typecheck": "turbo run typecheck",
+    "ci:build": "turbo build"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^8.23.0",

packages/pointer-content-renderer/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/pointer-content-renderer/dev/dev-panel.ts

@@ -0,0 +1,135 @@
+import { isRNWebView } from '../src/web/bridge';
+import type { RNToWebViewMessage } from '../src/types';
+
+import {
+  mockDocumentContent,
+  mockChatScenario,
+  mockOverviewSections,
+  mockAllLeftSections,
+  mockAllRightSections,
+  mockChatResumeAfterQuestion,
+  mockChatResumeAfterFirstPointing,
+  mockChatResumeMidSecond,
+  mockChatResumeAllComplete,
+} from './mock-data';
+
+function sendMockMessage(msg: RNToWebViewMessage): void {
+  window.dispatchEvent(new MessageEvent('message', { data: JSON.stringify(msg) }));
+}
+
+function createDevPanel(): void {
+  if (isRNWebView()) return;
+
+  const panel = document.createElement('div');
+  panel.style.cssText = 'position:fixed;bottom:8px;right:8px;z-index:9999;display:flex;gap:6px;';
+
+  const modes = [
+    {
+      label: '문제(document)',
+      action: () =>
+        sendMockMessage({
+          type: 'init',
+          mode: 'document',
+          content: mockDocumentContent,
+          backgroundColor: '#ffffff',
+        }),
+    },
+    {
+      label: '포인팅(chat)',
+      action: () =>
+        sendMockMessage({
+          type: 'init',
+          mode: 'chat',
+          scenario: mockChatScenario,
+        }),
+    },
+    {
+      label: 'chat resume: Q1 answered',
+      action: () =>
+        sendMockMessage({
+          type: 'init',
+          mode: 'chat',
+          scenario: mockChatScenario,
+          userAnswers: mockChatResumeAfterQuestion,
+        }),
+    },
+    {
+      label: 'chat resume: P1 done',
+      action: () =>
+        sendMockMessage({
+          type: 'init',
+          mode: 'chat',
+          scenario: mockChatScenario,
+          userAnswers: mockChatResumeAfterFirstPointing,
+        }),
+    },
+    {
+      label: 'chat resume: mid P2',
+      action: () =>
+        sendMockMessage({
+          type: 'init',
+          mode: 'chat',
+          scenario: mockChatScenario,
+          userAnswers: mockChatResumeMidSecond,
+        }),
+    },
+    {
+      label: 'chat resume: all done',
+      action: () =>
+        sendMockMessage({
+          type: 'init',
+          mode: 'chat',
+          scenario: mockChatScenario,
+          userAnswers: mockChatResumeAllComplete,
+        }),
+    },
+    {
+      label: '학습 마무리(overview)',
+      action: () =>
+        sendMockMessage({
+          type: 'init',
+          mode: 'overview',
+          variant: 'summary',
+          sections: mockOverviewSections,
+        }),
+    },
+    {
+      label: '포인팅 전체보기 L(overview)',
+      action: () =>
+        sendMockMessage({
+          type: 'init',
+          mode: 'overview',
+          variant: 'pointing',
+          sections: mockAllLeftSections,
+        }),
+    },
+    {
+      label: '포인팅 전체보기 R(overview)',
+      action: () =>
+        sendMockMessage({
+          type: 'init',
+          mode: 'overview',
+          variant: 'pointing',
+          sections: mockAllRightSections,
+        }),
+    },
+  ] as const;
+
+  for (const mode of modes) {
+    const btn = document.createElement('button');
+    btn.textContent = mode.label;
+    btn.style.cssText =
+      'padding:6px 12px;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;';
+    btn.addEventListener('click', () => {
+      const content = document.getElementById('content');
+      if (content) content.innerHTML = '';
+      document.body.className = '';
+      mode.action();
+    });
+    panel.appendChild(btn);
+  }
+
+  document.body.appendChild(panel);
+}
+
+createDevPanel();