Merge pull request #24 from nix6839/not-ready-modal

nix6839 · Sep 19, 2023 · 61bc992 · 61bc992
2 parents b4e42a8 + 8e12264
commit 61bc992
Show file tree

Hide file tree

Showing 7 changed files with 385 additions and 12 deletions.
diff --git a/apps/portfolio/src/components/Header.astro b/apps/portfolio/src/components/Header.astro
@@ -3,6 +3,7 @@ import Links from '../core/links.js';
 import Button from './Button.astro';
 import InternalLink from './InternalLink.astro';
 import { listIconPath } from './svgs/icons/icon-path.js';
+import NotReadyDialogButton from './NotReadyDialogButton.astro';
 
 export type { Props as HeaderProps };
 
@@ -56,12 +57,19 @@ const NAV_ID = 'nav-menu';
     >
       작업물
     </InternalLink>
-    <a
+    {/* TODO: Uncomment */}
+    {
+      /* <a
       href="https://blog.yeongwoo.dev/"
       class="block p-6 text-[1.5rem] font-bold text-secondary"
+    > */
+    }
+    <NotReadyDialogButton
+      class="w-full p-6 text-[1.5rem] font-bold text-secondary"
     >
       블로그
-    </a>
+    </NotReadyDialogButton>
+    {/* </a> */}
   </nav>
 </header>
 

diff --git a/apps/portfolio/src/components/NotReadyDialogButton.astro b/apps/portfolio/src/components/NotReadyDialogButton.astro
@@ -0,0 +1,90 @@
+---
+import Button from './Button.astro';
+import ProcessBuilding from './svgs/ProcessBuilding.astro';
+import XIcon from './svgs/icons/XIcon.astro';
+
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<not-ready-dialog-button>
+  <button
+    type="button"
+    data-open-button
+    class:list={[
+      'block cursor-pointer border-0 bg-transparent text-start leading-[inherit]',
+      className,
+    ]}
+  >
+    <slot />
+  </button>
+
+  <dialog
+    class="mx-auto mb-auto mt-16 max-h-none max-w-none bg-transparent backdrop:bg-backdrop"
+  >
+    <div class="relative rounded-lg bg-primary p-12">
+      <Button
+        data-close-button
+        aria-label="모달 닫기"
+        class="absolute right-3 top-3"
+      >
+        <XIcon width="2rem" height="2rem" />
+      </Button>
+      <div class="flex flex-col items-center gap-8">
+        <ProcessBuilding
+          width="12.3125rem"
+          height="11.1875rem"
+          aria-hidden="true"
+          class="h-auto w-full max-w-[12.3125rem] text-icon-brand"
+        />
+
+        <p
+          class="text-center text-[1.5rem] font-bold text-primary break-keep break-overflow-anywhere"
+        >
+          아직 준비되지 않은 콘텐츠입니다!
+        </p>
+      </div>
+    </div>
+  </dialog>
+</not-ready-dialog-button>
+
+<script>
+  class NotReadyDialogButton extends HTMLElement {
+    constructor() {
+      super();
+
+      const SELF_NAME = 'NotReadyDialogButton';
+
+      const dialogEl = this.querySelector('dialog');
+      if (!(dialogEl instanceof HTMLDialogElement)) {
+        throw new Error(`Can not find dialogEl in ${SELF_NAME}`);
+      }
+      dialogEl.addEventListener('click', (e) => {
+        if (e.target === e.currentTarget) {
+          dialogEl.close();
+        }
+      });
+
+      const openButtonEl = this.querySelector('button[data-open-button]');
+      if (!(openButtonEl instanceof HTMLButtonElement)) {
+        throw new Error(`Can not find openButtonEl in ${SELF_NAME}`);
+      }
+      openButtonEl.addEventListener('click', () => {
+        dialogEl.showModal();
+      });
+
+      const closeButtonEl = this.querySelector('button[data-close-button]');
+      if (!(closeButtonEl instanceof HTMLButtonElement)) {
+        throw new Error(`Can not find closeButtonEl in ${SELF_NAME}`);
+      }
+      closeButtonEl.addEventListener('click', () => {
+        dialogEl.close();
+      });
+    }
+  }
+
+  customElements.define('not-ready-dialog-button', NotReadyDialogButton);
+</script>
diff --git a/apps/portfolio/src/components/WorkCard.astro b/apps/portfolio/src/components/WorkCard.astro
@@ -1,8 +1,7 @@
 ---
 import { Image } from 'astro:assets';
 import { getEntries } from 'astro:content';
-import Links from '../core/links.js';
-import InternalLink from './InternalLink.astro';
+import NotReadyDialogButton from './NotReadyDialogButton.astro';
 import TechIcon from './svgs/icons/TechIcon.astro';
 
 import type { CollectionEntry } from 'astro:content';
@@ -22,7 +21,9 @@ const techs = await getEntries(work.data.techs);
 ---
 
 <article class={className}>
-  <InternalLink href={Links.work(work.slug)} class="block">
+  <NotReadyDialogButton>
+    {/* TODO: Uncomment */}
+    {/* <InternalLink href={Links.work(work.slug)} class="block"> */}
     <Image
       src={work.data.cover}
       alt="썸네일"
@@ -55,5 +56,6 @@ const techs = await getEntries(work.data.techs);
         }
       </ul>
     </div>
-  </InternalLink>
+    {/* </InternalLink> */}
+  </NotReadyDialogButton>
 </article>
diff --git a/apps/portfolio/src/components/pages/index/About.astro b/apps/portfolio/src/components/pages/index/About.astro
@@ -1,7 +1,6 @@
 ---
 import EnvelopeSimpleIcon from '../../svgs/icons/EnvelopeSimpleIcon.astro';
 import GitHubIcon from '../../svgs/icons/GitHubIcon.astro';
-import PencilSimpleLineIcon from '../../svgs/icons/PencilSimpleLineIcon.astro';
 
 import type { IconProps } from '../../svgs/types.js';
 
@@ -28,11 +27,12 @@ const contacts: Contact[] = [
     name: 'Email',
     href: 'mailto:[email protected]',
   },
-  {
-    icon: PencilSimpleLineIcon,
-    name: 'Blog',
-    href: 'https://blog.yeongwoo.dev',
-  },
+  // TODO: Uncomment
+  // {
+  //   icon: PencilSimpleLineIcon,
+  //   name: 'Blog',
+  //   href: 'https://blog.yeongwoo.dev',
+  // },
 ];
 ---