위젯에서 유저사이트 iframe으로 렌더링하도록 변경 (#1465)

번들 사이즈 10MB -> 7KB로 14배 감소
penxle · Nov 17, 2024 · 3ca447e · 3ca447e
1 parent 549f665
commit 3ca447e
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 80 deletions.
diff --git a/apps/usersite/src/routes/r/[id]/+page.svelte b/apps/usersite/src/routes/r/[id]/+page.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { css } from '@readable/styled-system/css';
+  import { TiptapRenderer } from '@readable/ui/tiptap';
+  import { graphql } from '$graphql';
+
+  const query = graphql(`
+    query RenderPage_Query($pageId: ID!) {
+      publicSite {
+        id
+        themeColor
+      }
+
+      publicPageById(pageId: $pageId) {
+        id
+
+        content {
+          id
+          content
+        }
+      }
+    }
+  `);
+</script>
+
+<div style:--usersite-theme-color={$query.publicSite.themeColor} class={css({ display: 'contents' })}>
+  <TiptapRenderer content={$query.publicPageById.content.content} />
+</div>
diff --git a/apps/usersite/src/routes/r/[id]/+page.ts b/apps/usersite/src/routes/r/[id]/+page.ts
@@ -0,0 +1,7 @@
+import type { RenderPage_Query_Variables } from './$graphql';
+
+export const _RenderPage_Query_Variables: RenderPage_Query_Variables = ({ params }) => ({
+  pageId: params.id,
+});
+
+export const _RenderPage_Query_Extensions = { cache: true };
diff --git a/sdks/browser-sdk/src/Widget.svelte b/sdks/browser-sdk/src/Widget.svelte
@@ -221,8 +221,11 @@
 
   let currentPageId = $state<string | null>(null);
   const openPage = (pageId: string) => {
-    // currentPageId = pageId;
-    window.open(`${site.url}/go/${pageId}`, '_blank');
+    if (import.meta.env.PROD) {
+      window.open(`${site.url}/go/${pageId}`, '_blank');
+    } else {
+      currentPageId = pageId;
+    }
   };
 
   onMount(() => {
@@ -395,7 +398,7 @@
         </div>
 
         {#if currentPageId}
-          <PageContent pageId={currentPageId} siteId={site.id} />
+          <PageContent pageId={currentPageId} siteUrl={site.url} />
         {:else if chatHistory.length > 0}
           <div
             bind:this={chatHistoryEl}
@@ -547,76 +550,80 @@
               {/if}
             {/if}
           </div>
-        {/if}
-        <div
-          class={css({
-            marginTop: '-20px',
-            height: '20px',
-            background: '[linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)]',
-          })}
-        ></div>
-        <div
-          class={flex({
-            flexDirection: 'column',
-            paddingX: '16px',
-            pointerEvents: 'none',
-          })}
-        >
-          <FormProvider context={chatFormContext} form={chatForm}>
-            <label
-              class={flex({
-                width: 'full',
-                align: 'center',
-                gap: '8px',
-                borderWidth: '1px',
-                borderRadius: '10px',
-                borderColor: 'transparent',
-                pointerEvents: 'auto',
-                backgroundImage:
-                  '[linear-gradient(#fff, #fff), linear-gradient(to right, var(--widget-theme-color-2) 0%, var(--widget-theme-color) 100%)]',
-                backgroundOrigin: 'border-box',
-                backgroundClip: '[content-box, border-box]',
-              })}
-            >
-              <textarea
-                bind:this={chatFormTextareaEl}
-                name="question"
-                style:max-height={`${textareaLineHeightPx * 5}px`}
-                class={css({
-                  flexGrow: '1',
-                  paddingLeft: '14px',
-                  paddingY: '10px',
-                  textStyle: '14r',
-                  height: 'auto',
-                  resize: 'none',
-                })}
-                onkeydown={onKeydownInTextarea}
-                placeholder="AI를 통해 무엇이든 물어보고, 쓰고, 검색하세요"
-                rows="1"
-                bind:value={questionDraft}
-              ></textarea>
-              <button
-                class={css({
-                  alignSelf: 'flex-end',
-                  borderRadius: 'full',
-                  padding: '3px',
-                  marginY: '8px',
-                  marginRight: '10px',
-                  size: '22px',
-                  color: 'white',
-                  backgroundColor: {
-                    base: '[var(--widget-theme-color)]',
-                    _disabled: 'neutral.40',
-                  },
+
+          <div
+            class={css({
+              marginTop: '-20px',
+              height: '20px',
+              background: '[linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)]',
+            })}
+          ></div>
+
+          <div
+            class={flex({
+              flexDirection: 'column',
+              paddingX: '16px',
+              pointerEvents: 'none',
+            })}
+          >
+            <FormProvider context={chatFormContext} form={chatForm}>
+              <label
+                class={flex({
+                  width: 'full',
+                  align: 'center',
+                  gap: '8px',
+                  borderWidth: '1px',
+                  borderRadius: '10px',
+                  borderColor: 'transparent',
+                  pointerEvents: 'auto',
+                  backgroundImage:
+                    '[linear-gradient(#fff, #fff), linear-gradient(to right, var(--widget-theme-color-2) 0%, var(--widget-theme-color) 100%)]',
+                  backgroundOrigin: 'border-box',
+                  backgroundClip: '[content-box, border-box]',
                 })}
-                disabled={!questionDraft.trim() || $chatFormIsSubmitting || (lastChat && lastChat.answer === undefined)}
-                type="submit"
               >
-                <Icon icon={ArrowUpIcon} size={16} />
-              </button>
-            </label>
-          </FormProvider>
-        </div>
+                <textarea
+                  bind:this={chatFormTextareaEl}
+                  name="question"
+                  style:max-height={`${textareaLineHeightPx * 5}px`}
+                  class={css({
+                    flexGrow: '1',
+                    paddingLeft: '14px',
+                    paddingY: '10px',
+                    textStyle: '14r',
+                    height: 'auto',
+                    resize: 'none',
+                  })}
+                  onkeydown={onKeydownInTextarea}
+                  placeholder="AI를 통해 무엇이든 물어보고, 쓰고, 검색하세요"
+                  rows="1"
+                  bind:value={questionDraft}
+                ></textarea>
+                <button
+                  class={css({
+                    alignSelf: 'flex-end',
+                    borderRadius: 'full',
+                    padding: '3px',
+                    marginY: '8px',
+                    marginRight: '10px',
+                    size: '22px',
+                    color: 'white',
+                    backgroundColor: {
+                      base: '[var(--widget-theme-color)]',
+                      _disabled: 'neutral.40',
+                    },
+                  })}
+                  disabled={!questionDraft.trim() ||
+                    $chatFormIsSubmitting ||
+                    (lastChat && lastChat.answer === undefined)}
+                  type="submit"
+                >
+                  <Icon icon={ArrowUpIcon} size={16} />
+                </button>
+              </label>
+            </FormProvider>
+          </div>
+        {/if}
 
         <div class={center({ paddingTop: '8px', paddingBottom: '16px' })}>
           <a href="https://rdbl.io" rel="noopener noreferrer" target="_blank">

diff --git a/sdks/browser-sdk/src/components/PageContent.svelte b/sdks/browser-sdk/src/components/PageContent.svelte
@@ -1,18 +1,15 @@
 <script lang="ts">
   import { css } from '@readable/styled-system/css';
-  import { TiptapRenderer } from '@readable/ui/tiptap';
-  import { trpc } from '../trpc';
+  import { flex } from '@readable/styled-system/patterns';
 
   type Props = {
-    siteId: string;
+    siteUrl: string;
     pageId: string;
   };
 
-  let { siteId, pageId }: Props = $props();
+  let { siteUrl, pageId }: Props = $props();
 </script>
 
-{#await trpc.widget.page.get.query({ siteId, pageId }) then page}
-  <div class={css({ paddingX: '16px' })}>
-    <TiptapRenderer content={page.content} />
-  </div>
-{/await}
+<div class={flex({ flexGrow: '1', paddingX: '16px' })}>
+  <iframe class={css({ flexGrow: '1', width: 'full' })} src={`${siteUrl}/r/${pageId}`} title=""></iframe>
+</div>