From dec17ecba8a8b24716ed4cbe0cd6a7d8beb20c62 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Fri, 27 Dec 2024 22:56:34 +0900
Subject: [PATCH] =?UTF-8?q?Modal,=20BeforeContinueModal=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/Modal.svelte               | 32 +++++++++++++++++
 src/lib/components/buttons/Button.svelte      |  9 ++++-
 src/lib/components/buttons/TextButton.svelte  |  6 +++-
 src/lib/components/index.ts                   |  1 +
 .../(fullscreen)/key/export/+page.svelte      | 36 ++++++++++++++-----
 .../key/export/BeforeContinueModal.svelte     | 31 ++++++++++++++++
 6 files changed, 105 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/components/Modal.svelte
 create mode 100644 src/lib/components/index.ts
 create mode 100644 src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte

diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
new file mode 100644
index 0000000..36c1171
--- /dev/null
+++ b/src/lib/components/Modal.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { fade } from "svelte/transition";
+
+  interface Props {
+    children: Snippet;
+    isOpen: boolean;
+  }
+
+  let { children, isOpen = $bindable() }: Props = $props();
+
+  const closeModal = () => {
+    isOpen = false;
+  };
+</script>
+
+{#if isOpen}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    onclick={closeModal}
+    class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 px-2"
+  >
+    <div
+      onclick={(e) => e.stopPropagation()}
+      class="max-w-full rounded-2xl bg-white p-4"
+      transition:fade={{ duration: 100 }}
+    >
+      {@render children?.()}
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/components/buttons/Button.svelte b/src/lib/components/buttons/Button.svelte
index 08cc1f8..484a2ab 100644
--- a/src/lib/components/buttons/Button.svelte
+++ b/src/lib/components/buttons/Button.svelte
@@ -23,7 +23,14 @@
   );
 </script>
 
-<button {onclick} class="{bgColorStyle} {fontColorStyle} h-12 h-full w-full rounded-xl font-medium">
+<button
+  onclick={() => {
+    setTimeout(() => {
+      onclick?.();
+    }, 100);
+  }}
+  class="{bgColorStyle} {fontColorStyle} h-12 w-full rounded-xl font-medium"
+>
   <div class="h-full w-full p-3 transition active:scale-95">
     {@render children?.()}
   </div>
diff --git a/src/lib/components/buttons/TextButton.svelte b/src/lib/components/buttons/TextButton.svelte
index df47d10..2f08ffd 100644
--- a/src/lib/components/buttons/TextButton.svelte
+++ b/src/lib/components/buttons/TextButton.svelte
@@ -9,7 +9,11 @@
 </script>
 
 <button
-  {onclick}
+  onclick={() => {
+    setTimeout(() => {
+      onclick?.();
+    }, 100);
+  }}
   class="text-sm font-medium text-gray-800 underline underline-offset-2 active:rounded-xl active:bg-gray-100"
 >
   <div class="h-full w-full p-1 transition active:scale-95">
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
new file mode 100644
index 0000000..5ddd0fe
--- /dev/null
+++ b/src/lib/components/index.ts
@@ -0,0 +1 @@
+export { default as Modal } from "./Modal.svelte";
diff --git a/src/routes/(fullscreen)/key/export/+page.svelte b/src/routes/(fullscreen)/key/export/+page.svelte
index ca53016..14d2656 100644
--- a/src/routes/(fullscreen)/key/export/+page.svelte
+++ b/src/routes/(fullscreen)/key/export/+page.svelte
@@ -1,10 +1,25 @@
 <script lang="ts">
   import { Button, TextButton } from "$lib/components/buttons";
   import { BottomDiv } from "$lib/components/divs";
+  import BeforeContinueModal from "./BeforeContinueModal.svelte";
 
   import IconKey from "~icons/material-symbols/key";
 
   let { data } = $props();
+
+  let isBeforeContinueModalOpen = $state(false);
+
+  const exportKeyPair = () => {
+    // TODO
+    console.log(data.pubKeyBase64);
+    console.log(data.privKeyBase64);
+  };
+
+  const continueWithoutExport = () => {
+    isBeforeContinueModalOpen = false;
+
+    // TODO
+  };
 </script>
 
 <svetle:head>
@@ -27,17 +42,22 @@
     </div>
     <BottomDiv>
       <div class="w-full">
-        <Button
-          onclick={() => {
-            // TODO
-            console.log(data.privKeyBase64);
-            console.log(data.pubKeyBase64);
-          }}>암호 키 내보내기</Button
-        >
+        <Button onclick={exportKeyPair}>암호 키 내보내기</Button>
       </div>
       <div class="w-fit">
-        <TextButton>내보내지 않을래요</TextButton>
+        <TextButton
+          onclick={() => {
+            isBeforeContinueModalOpen = true;
+          }}
+        >
+          내보내지 않을래요
+        </TextButton>
       </div>
     </BottomDiv>
   </div>
 </div>
+
+<BeforeContinueModal
+  bind:isOpen={isBeforeContinueModalOpen}
+  onContinueClick={continueWithoutExport}
+/>
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
new file mode 100644
index 0000000..984f553
--- /dev/null
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Modal } from "$lib/components";
+  import { Button } from "$lib/components/buttons";
+
+  interface Props {
+    onContinueClick: () => void;
+    isOpen: boolean;
+  }
+
+  let { onContinueClick, isOpen = $bindable() }: Props = $props();
+</script>
+
+<Modal bind:isOpen>
+  <div class="space-y-4 px-1">
+    <div class="space-y-2">
+      <p class="break-keep text-xl font-bold">내보내지 않고 계속할까요?</p>
+      <p class="break-keep">
+        보안상의 이유로 지금 시점 이후로는 암호 키를 파일로 내보낼 수 없어요.
+      </p>
+    </div>
+    <div class="flex gap-2">
+      <Button
+        color="gray"
+        onclick={() => {
+          isOpen = false;
+        }}>아니요</Button
+      >
+      <Button onclick={onContinueClick}>계속합니다</Button>
+    </div>
+  </div>
+</Modal>