isWebView 함수로 변경 (#2837)

penxle · Oct 26, 2024 · af754ba · af754ba
1 parent d3772ea
commit af754ba
Show file tree

Hide file tree

Showing 30 changed files with 61 additions and 58 deletions.
diff --git a/apps/website/src/lib/flutter/index.ts b/apps/website/src/lib/flutter/index.ts
@@ -1,6 +1,6 @@
 import { fromBase64, toBase64 } from 'js-base64';
 import { onMount } from 'svelte';
-import { derived } from 'svelte/store';
+import { get } from 'svelte/store';
 import { page } from '$app/stores';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -30,4 +30,7 @@ export const postFlutterMessage = (message: unknown) => {
   window.flutter.postMessage(toBase64(JSON.stringify(message)));
 };
 
-export const isWebView = derived(page, ($page) => !!$page.data.__isWebView || $page.url.searchParams.has('__wb'));
+export const isWebView = () => {
+  const p = get(page);
+  return !!p.data.__isWebView || p.url.searchParams.has('__wb');
+};
diff --git a/apps/website/src/lib/tiptap/node-views/access-barrier/Component.svelte b/apps/website/src/lib/tiptap/node-views/access-barrier/Component.svelte
@@ -425,7 +425,7 @@
               style={css.raw({ width: 'full', maxWidth: '96px' })}
               size="md"
               on:click={() => {
-                if ($isWebView) {
+                if (isWebView()) {
                   postFlutterMessage({ type: 'purchase' });
                   return;
                 }

diff --git a/apps/website/src/lib/tiptap/node-views/gallery/Component.svelte b/apps/website/src/lib/tiptap/node-views/gallery/Component.svelte
@@ -71,7 +71,7 @@
         role="button"
         tabindex="-1"
         on:click={() => {
-          if (!editor?.isEditable && !$isWebView) {
+          if (!editor?.isEditable && !isWebView()) {
             viewerOpen = true;
           }
         }}
@@ -82,7 +82,7 @@
             role="button"
             tabindex="-1"
             on:click={() => {
-              if (!editor?.isEditable && $isWebView) {
+              if (!editor?.isEditable && isWebView()) {
                 postFlutterMessage({ type: 'image:view', id });
               }
             }}

diff --git a/apps/website/src/lib/tiptap/node-views/gallery/Slide.svelte b/apps/website/src/lib/tiptap/node-views/gallery/Slide.svelte
@@ -155,7 +155,7 @@
         tabindex="-1"
         on:click={() => {
           if (!editor?.isEditable) {
-            if ($isWebView) {
+            if (isWebView()) {
               postFlutterMessage({ type: 'image:view', id });
             } else {
               viewerOpen = true;

diff --git a/apps/website/src/lib/tiptap/node-views/image/Component.svelte b/apps/website/src/lib/tiptap/node-views/image/Component.svelte
@@ -79,7 +79,7 @@
     role={editor?.isEditable ? 'presentation' : 'button'}
     on:click={() => {
       if (!editor?.isEditable) {
-        if ($isWebView) {
+        if (isWebView()) {
           postFlutterMessage({ type: 'image:view', id: node.attrs.id });
         } else {
           viewerOpen = true;

diff --git a/apps/website/src/routes/(default)/+layout.svelte b/apps/website/src/routes/(default)/+layout.svelte
@@ -12,7 +12,7 @@
   `);
 </script>
 
-{#if !$isWebView}
+{#if !isWebView()}
   <Header {$query} />
 {/if}
 
@@ -30,6 +30,6 @@
   <slot />
 </main>
 
-{#if !$isWebView}
+{#if !isWebView()}
   <Footer />
 {/if}
diff --git a/apps/website/src/routes/(default)/[space]/dashboard/+layout.svelte b/apps/website/src/routes/(default)/[space]/dashboard/+layout.svelte
@@ -55,7 +55,7 @@
       smDown: {
         gap: '28px',
         position: 'sticky',
-        top: $isWebView ? '0' : '62px',
+        top: isWebView() ? '0' : '62px',
         borderBottomWidth: '1px',
         paddingX: '20px',
         paddingY: '14px',

diff --git a/.../src/routes/(default)/[space]/dashboard/collections/[collection]/+layout@(default).svelte b/.../src/routes/(default)/[space]/dashboard/collections/[collection]/+layout@(default).svelte
@@ -33,7 +33,7 @@
   <div
     class={css({
       position: 'sticky',
-      top: $isWebView ? '0' : '62px',
+      top: isWebView() ? '0' : '62px',
       paddingTop: { sm: '35px' },
       backgroundColor: 'gray.0',
       zIndex: '1',

diff --git a/...ebsite/src/routes/(default)/[space]/dashboard/collections/[collection]/posts/+page.svelte b/...ebsite/src/routes/(default)/[space]/dashboard/collections/[collection]/posts/+page.svelte
@@ -94,7 +94,7 @@
       scroll: true,
       handle: '.post',
       animation: 150,
-      delay: isMobile() || $isWebView ? 50 : 0,
+      delay: isMobile() || isWebView() ? 50 : 0,
       forceAutoScrollFallback: true,
       scrollSensitivity: 60,
       scrollSpeed: 10,
@@ -134,7 +134,7 @@
     align: { sm: 'center' },
     justify: 'space-between',
     position: 'sticky',
-    top: { base: $isWebView ? '99px' : '163px', sm: '186px' },
+    top: { base: isWebView() ? '99px' : '163px', sm: '186px' },
     zIndex: '1',
     smDown: { flexDirection: 'column', gap: '12px', padding: '20px', backgroundColor: 'gray.50' },
     sm: {

diff --git a/apps/website/src/routes/(default)/[space]/dashboard/posts/+page.svelte b/apps/website/src/routes/(default)/[space]/dashboard/posts/+page.svelte
@@ -94,7 +94,7 @@
     gap: '12px',
     wrap: 'wrap',
     position: 'sticky',
-    top: { base: $isWebView ? '54px' : '116px', sm: '62px' },
+    top: { base: isWebView() ? '54px' : '116px', sm: '62px' },
     paddingTop: '20px',
     paddingBottom: { base: '24px', sm: '20px' },
     backgroundColor: 'gray.0',

diff --git a/apps/website/src/routes/(default)/[space]/dashboard/posts/PostManageTable.svelte b/apps/website/src/routes/(default)/[space]/dashboard/posts/PostManageTable.svelte
@@ -141,7 +141,7 @@
 
 <Table>
   <TableHeader
-    style={css.raw({ position: 'sticky', top: { base: $isWebView ? '132px' : '194px', sm: '136px' }, zIndex: '1' })}
+    style={css.raw({ position: 'sticky', top: { base: isWebView() ? '132px' : '194px', sm: '136px' }, zIndex: '1' })}
   >
     <TableRow style={css.raw({ textAlign: 'left' })}>
       <TableHead style={css.raw({ width: '50px' })}>
@@ -249,12 +249,12 @@
         >
           <div class={css({ position: 'relative' })}>
             <svelte:element
-              this={$isWebView ? 'button' : 'a'}
+              this={isWebView() ? 'button' : 'a'}
               class={css({ textAlign: 'left', width: 'full' })}
-              href={$isWebView ? undefined : `/${post.space.slug}/${post.permalink}`}
-              role={$isWebView ? 'button' : 'a'}
+              href={isWebView() ? undefined : `/${post.space.slug}/${post.permalink}`}
+              role={isWebView() ? 'button' : 'a'}
               on:click={() => {
-                if ($isWebView) {
+                if (isWebView()) {
                   postFlutterMessage({ type: 'post:view', permalink: post.permalink });
                   return;
                 }
@@ -410,7 +410,7 @@
             <Menu style={css.raw({ position: 'absolute', bottom: '0', right: '-6px' })} placement="bottom-end">
               <Icon slot="value" style={css.raw({ color: 'gray.400' })} icon={IconDotsVertical} size={24} />
 
-              {#if $isWebView}
+              {#if isWebView()}
                 <MenuItem
                   on:click={() => {
                     postFlutterMessage({ type: 'post:edit', permalink: post.permalink });

diff --git a/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/RedeemCode.svelte b/apps/website/src/routes/(default)/[space]/dashboard/redeem/manage/[redeem]/RedeemCode.svelte
@@ -91,7 +91,7 @@
     </dl>
 
     {#if $redeem.state === 'AVAILABLE'}
-      {#if $isWebView}
+      {#if isWebView()}
         <Button
           style={flex.raw({ align: 'center', justify: 'center', gap: '4px', width: { base: 'full', sm: 'fit' } })}
           variant="gray-outline"

diff --git a/apps/website/src/routes/(default)/[space]/dashboard/settings/DeleteSpaceModal.svelte b/apps/website/src/routes/(default)/[space]/dashboard/settings/DeleteSpaceModal.svelte
@@ -40,7 +40,7 @@
       await _deleteSpace({ spaceId: $space.id });
       mixpanel.track('space:delete', { spaceId: $space.id });
 
-      if ($isWebView) {
+      if (isWebView()) {
         postFlutterMessage({ type: 'space:delete' });
       } else {
         location.href = '/';

diff --git a/apps/website/src/routes/(default)/me/+layout.svelte b/apps/website/src/routes/(default)/me/+layout.svelte
@@ -20,7 +20,7 @@
     maxWidth: '1280px',
   })}
 >
-  {#if !$isWebView}
+  {#if !isWebView()}
     <nav
       class={flex({
         direction: { base: 'row', sm: 'column' },

diff --git a/apps/website/src/routes/(default)/me/contentfilters/MutedSpaceModal.svelte b/apps/website/src/routes/(default)/me/contentfilters/MutedSpaceModal.svelte
@@ -74,7 +74,7 @@
           },
         })}
       >
-        {#if $isWebView}
+        {#if isWebView()}
           <button
             class={flex({
               align: 'center',

diff --git a/apps/website/src/routes/(default)/me/contentfilters/MutedTagModal.svelte b/apps/website/src/routes/(default)/me/contentfilters/MutedTagModal.svelte
@@ -58,7 +58,7 @@
           },
         })}
       >
-        {#if $isWebView}
+        {#if isWebView()}
           <button
             class={flex({ align: 'center', gap: '4px', grow: '1', paddingY: '16px', fontSize: '14px', truncate: true })}
             type="button"

diff --git a/apps/website/src/routes/(default)/me/redeem/complete/+page@(default).svelte b/apps/website/src/routes/(default)/me/redeem/complete/+page@(default).svelte
@@ -58,7 +58,7 @@
       width: 'full',
       smDown: { paddingX: '20px' },
     },
-    $isWebView && { minHeight: 'dvh' },
+    isWebView() && { minHeight: 'dvh' },
   )}
 >
   <div
@@ -148,7 +148,7 @@
       </dl>
     </div>
 
-    {#if $isWebView}
+    {#if isWebView()}
       <Button
         style={css.raw({ width: 'full' })}
         variant="gradation-fill"

diff --git a/apps/website/src/routes/(default)/me/redeem/history/+page.svelte b/apps/website/src/routes/(default)/me/redeem/history/+page.svelte
@@ -75,14 +75,14 @@
         })}
       >
         <svelte:element
-          this={$isWebView ? 'button' : 'a'}
+          this={isWebView() ? 'button' : 'a'}
           class={flex({ align: 'center', justify: 'space-between', width: 'full', truncate: true })}
-          href={$isWebView
+          href={isWebView()
             ? undefined
             : `/${redemption.postPurchase.post.space.slug}/${redemption.postPurchase.post.permalink}`}
-          role={$isWebView ? 'button' : 'a'}
+          role={isWebView() ? 'button' : 'a'}
           on:click={() => {
-            if ($isWebView) {
+            if (isWebView()) {
               postFlutterMessage({ type: 'post:view', permalink: redemption.postPurchase.post.permalink });
               return;
             }

diff --git a/apps/website/src/routes/(default)/me/revenue/(index)/+page.svelte b/apps/website/src/routes/(default)/me/revenue/(index)/+page.svelte
@@ -91,7 +91,7 @@
         })}
       >
         <svelte:element
-          this={$isWebView ? 'button' : revenue.post?.state === 'DELETED' ? 'div' : 'a'}
+          this={isWebView() ? 'button' : revenue.post?.state === 'DELETED' ? 'div' : 'a'}
           class={css(
             {
               display: 'flex',
@@ -103,12 +103,12 @@
             },
             revenue.post?.state === 'DELETED' && { color: 'gray.400' },
           )}
-          href={revenue.post?.state === 'DELETED' || $isWebView
+          href={revenue.post?.state === 'DELETED' || isWebView()
             ? undefined
             : `/${revenue.post?.space?.slug}/${revenue.post?.permalink}`}
-          role={$isWebView ? 'button' : revenue.post?.state === 'DELETED' ? 'div' : 'a'}
+          role={isWebView() ? 'button' : revenue.post?.state === 'DELETED' ? 'div' : 'a'}
           on:click={() => {
-            if ($isWebView) {
+            if (isWebView()) {
               postFlutterMessage({ type: 'post:view', permalink: revenue.post?.permalink });
             }
           }}

diff --git a/apps/website/src/routes/(default)/me/settings/+layout.svelte b/apps/website/src/routes/(default)/me/settings/+layout.svelte
@@ -7,7 +7,7 @@
 
 <h1 class={css({ marginBottom: '20px', fontSize: '24px', fontWeight: 'bold', hideBelow: 'sm' })}>계정설정</h1>
 
-{#if !$isWebView}
+{#if !isWebView()}
   <TabHead
     style={css.raw({
       gap: '28px',

diff --git a/apps/website/src/routes/(default)/me/settings/deactivate/+page@(default).svelte b/apps/website/src/routes/(default)/me/settings/deactivate/+page@(default).svelte
@@ -114,7 +114,7 @@
       >
         글리프 탈퇴하기
       </Button>
-      {#if $isWebView}
+      {#if isWebView()}
         <Button
           style={css.raw({ display: 'block', marginTop: '12px', width: 'full', backgroundColor: 'gray.0' })}
           size="lg"

diff --git a/apps/website/src/routes/(default)/me/settings/deactivate/ConfirmModal.svelte b/apps/website/src/routes/(default)/me/settings/deactivate/ConfirmModal.svelte
@@ -19,7 +19,7 @@
     `),
     schema: DeleteUserSchema,
     onSuccess: async () => {
-      if ($isWebView) {
+      if (isWebView()) {
         postFlutterMessage({ type: 'deactivate:done' });
       } else {
         toast.success('탈퇴가 완료되었어요');

diff --git a/apps/website/src/routes/(default)/me/subscribes/+page.svelte b/apps/website/src/routes/(default)/me/subscribes/+page.svelte
@@ -63,10 +63,10 @@
       {#each $query.me.followedTags as tag (tag.id)}
         <li class={css({ truncate: true })}>
           <Tag
-            as={$isWebView ? 'button' : 'a'}
-            href={$isWebView ? undefined : `/tag/${tag.name}`}
+            as={isWebView() ? 'button' : 'a'}
+            href={isWebView() ? undefined : `/tag/${tag.name}`}
             on:click={() => {
-              if ($isWebView) {
+              if (isWebView()) {
                 postFlutterMessage({ type: 'tag:view', name: tag.name });
               }
             }}

diff --git a/apps/website/src/routes/(default)/me/subscribes/FollowTagModal.svelte b/apps/website/src/routes/(default)/me/subscribes/FollowTagModal.svelte
@@ -47,7 +47,7 @@
       <li
         class={flex({ align: 'center', justify: 'space-between', gap: '24px', _hover: { backgroundColor: 'gray.50' } })}
       >
-        {#if $isWebView}
+        {#if isWebView()}
           <button
             class={css({
               display: 'inline-block',

diff --git a/apps/website/src/routes/(default)/me/subscribes/Space.svelte b/apps/website/src/routes/(default)/me/subscribes/Space.svelte
@@ -56,12 +56,12 @@
   })}
 >
   <svelte:element
-    this={$isWebView ? 'button' : 'a'}
+    this={isWebView() ? 'button' : 'a'}
     class={flex({ gap: '12px', paddingX: { sm: '16px' }, paddingTop: { base: '20px', sm: '16px' }, textAlign: 'left' })}
-    href={$isWebView ? undefined : `/${$space.slug}`}
-    role={$isWebView ? 'button' : undefined}
+    href={isWebView() ? undefined : `/${$space.slug}`}
+    role={isWebView() ? 'button' : undefined}
     on:click={() => {
-      if ($isWebView) {
+      if (isWebView()) {
         postFlutterMessage({ type: 'space:view', slug: $space.slug });
       }
     }}

diff --git a/apps/website/src/routes/+layout.svelte b/apps/website/src/routes/+layout.svelte
@@ -57,13 +57,13 @@
       toast.error($query.flash.message);
     }
 
-    if ($isWebView) {
+    if (isWebView()) {
       postFlutterMessage({ type: 'ready' });
     }
   });
 </script>
 
-<div class={$isWebView ? '' : flex({ direction: 'column', position: 'relative', minHeight: 'dvh' })}>
+<div class={isWebView() ? '' : flex({ direction: 'column', position: 'relative', minHeight: 'dvh' })}>
   <slot />
 </div>
 

diff --git a/apps/website/src/routes/StackIndicator.svelte b/apps/website/src/routes/StackIndicator.svelte
@@ -6,7 +6,7 @@
   import { center } from '$styled-system/patterns';
 </script>
 
-{#if !production && !$isWebView}
+{#if !production && !isWebView()}
   <div
     class={center({
       position: 'fixed',

diff --git a/apps/website/src/routes/editor/[permalink]/Editor.svelte b/apps/website/src/routes/editor/[permalink]/Editor.svelte
@@ -243,7 +243,7 @@
   });
 </script>
 
-{#if $isWebView}
+{#if isWebView()}
   <AppEditor {$post} {$query} />
 {:else}
   <WebEditor {$post} {$query} />