From 329e1286fae61ca870c6f2ba4702d8dac73c364b Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sat, 16 Sep 2023 10:04:57 +0000
Subject: [PATCH 01/14] feat(icons): add `Code` icon

---
 packages/client/src/icons/Code.svelte | 34 +++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 packages/client/src/icons/Code.svelte

diff --git a/packages/client/src/icons/Code.svelte b/packages/client/src/icons/Code.svelte
new file mode 100644
index 00000000..2df41d13
--- /dev/null
+++ b/packages/client/src/icons/Code.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  let className = undefined;
+  export { className as class };
+  export let id = undefined;
+  export let tabindex = undefined;
+  export let focusable = false;
+  export let title = undefined;
+  export let style = undefined;
+
+  $: ariaLabel = $$props['aria-label'];
+  $: ariaLabelledBy = $$props['aria-labelledby'];
+  $: labelled = ariaLabel || ariaLabelledBy || title;
+  $: attributes = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-hidden': labelled ? undefined : true,
+    role: labelled ? 'img' : undefined,
+    focusable: tabindex === '0' ? `${true}` : `${focusable}`,
+    tabindex,
+  };
+</script>
+
+<svg
+  width="24"
+  height="24"
+  fill="none"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  {style}
+  {id}
+  {...attributes}>
+  <path d="m8.086 18.611 5.996-14.004a1 1 0 0 1 1.878.677l-.04.11-5.996 14.004a1 1 0 0 1-1.878-.677l.04-.11 5.996-14.004L8.086 18.61Zm-5.793-7.318 4-4a1 1 0 0 1 1.497 1.32l-.083.094L4.414 12l3.293 3.293a1 1 0 0 1-1.32 1.498l-.094-.084-4-4a1 1 0 0 1-.083-1.32l.083-.094 4-4-4 4Zm14-4.001a1 1 0 0 1 1.32-.083l.093.083 4.001 4.001a1 1 0 0 1 .083 1.32l-.083.095-4.001 3.995a1 1 0 0 1-1.497-1.32l.084-.095L19.584 12l-3.293-3.294a1 1 0 0 1 0-1.414Z" fill="#212121"/>
+</svg>

From c75ae68e33ff3ce186374f7a1d6214b5d3eeec24 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 01:24:58 +0000
Subject: [PATCH 02/14] fix(client/icons): make path fill follows currentColor

---
 packages/client/src/icons/Code.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/icons/Code.svelte b/packages/client/src/icons/Code.svelte
index 2df41d13..f42f5c0c 100644
--- a/packages/client/src/icons/Code.svelte
+++ b/packages/client/src/icons/Code.svelte
@@ -30,5 +30,5 @@
   {style}
   {id}
   {...attributes}>
-  <path d="m8.086 18.611 5.996-14.004a1 1 0 0 1 1.878.677l-.04.11-5.996 14.004a1 1 0 0 1-1.878-.677l.04-.11 5.996-14.004L8.086 18.61Zm-5.793-7.318 4-4a1 1 0 0 1 1.497 1.32l-.083.094L4.414 12l3.293 3.293a1 1 0 0 1-1.32 1.498l-.094-.084-4-4a1 1 0 0 1-.083-1.32l.083-.094 4-4-4 4Zm14-4.001a1 1 0 0 1 1.32-.083l.093.083 4.001 4.001a1 1 0 0 1 .083 1.32l-.083.095-4.001 3.995a1 1 0 0 1-1.497-1.32l.084-.095L19.584 12l-3.293-3.294a1 1 0 0 1 0-1.414Z" fill="#212121"/>
+  <path d="m8.086 18.611 5.996-14.004a1 1 0 0 1 1.878.677l-.04.11-5.996 14.004a1 1 0 0 1-1.878-.677l.04-.11 5.996-14.004L8.086 18.61Zm-5.793-7.318 4-4a1 1 0 0 1 1.497 1.32l-.083.094L4.414 12l3.293 3.293a1 1 0 0 1-1.32 1.498l-.094-.084-4-4a1 1 0 0 1-.083-1.32l.083-.094 4-4-4 4Zm14-4.001a1 1 0 0 1 1.32-.083l.093.083 4.001 4.001a1 1 0 0 1 .083 1.32l-.083.095-4.001 3.995a1 1 0 0 1-1.497-1.32l.084-.095L19.584 12l-3.293-3.294a1 1 0 0 1 0-1.414Z" fill="currentColor"/>
 </svg>

From c8e6fd2314c24e43026d81d6b768e1074eb49be5 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 01:25:24 +0000
Subject: [PATCH 03/14] feat(client/icons): add icons - `DocumentArrowRight` -
 `TextGrammarCheckmark`

---
 .../src/icons/DocumentArrowRight.svelte       | 34 +++++++++++++++++++
 .../src/icons/TextGrammarCheckmark.svelte     | 34 +++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 packages/client/src/icons/DocumentArrowRight.svelte
 create mode 100644 packages/client/src/icons/TextGrammarCheckmark.svelte

diff --git a/packages/client/src/icons/DocumentArrowRight.svelte b/packages/client/src/icons/DocumentArrowRight.svelte
new file mode 100644
index 00000000..6aa4dc0f
--- /dev/null
+++ b/packages/client/src/icons/DocumentArrowRight.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  let className = undefined;
+  export { className as class };
+  export let id = undefined;
+  export let tabindex = undefined;
+  export let focusable = false;
+  export let title = undefined;
+  export let style = undefined;
+
+  $: ariaLabel = $$props['aria-label'];
+  $: ariaLabelledBy = $$props['aria-labelledby'];
+  $: labelled = ariaLabel || ariaLabelledBy || title;
+  $: attributes = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-hidden': labelled ? undefined : true,
+    role: labelled ? 'img' : undefined,
+    focusable: tabindex === '0' ? `${true}` : `${focusable}`,
+    tabindex,
+  };
+</script>
+
+<svg
+  width="24"
+  height="24"
+  fill="none"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  {style}
+  {id}
+  {...attributes}>
+    <path d="M12 2v6a2 2 0 0 0 2 2h6v10a2 2 0 0 1-2 2h-6.81A6.5 6.5 0 0 0 4 11.498V4a2 2 0 0 1 2-2h6Zm1.5.5V8a.5.5 0 0 0 .5.5h5.5l-6-6Zm-1.5 15a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0ZM3.5 17a.5.5 0 0 0 0 1h4.793l-1.647 1.646a.5.5 0 0 0 .708.708l2.5-2.5a.5.5 0 0 0 0-.708l-2.5-2.5a.5.5 0 0 0-.708.708L8.293 17H3.5Z" fill="currentColor"/>
+</svg>
diff --git a/packages/client/src/icons/TextGrammarCheckmark.svelte b/packages/client/src/icons/TextGrammarCheckmark.svelte
new file mode 100644
index 00000000..522d4ad3
--- /dev/null
+++ b/packages/client/src/icons/TextGrammarCheckmark.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  let className = undefined;
+  export { className as class };
+  export let id = undefined;
+  export let tabindex = undefined;
+  export let focusable = false;
+  export let title = undefined;
+  export let style = undefined;
+
+  $: ariaLabel = $$props['aria-label'];
+  $: ariaLabelledBy = $$props['aria-labelledby'];
+  $: labelled = ariaLabel || ariaLabelledBy || title;
+  $: attributes = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-hidden': labelled ? undefined : true,
+    role: labelled ? 'img' : undefined,
+    focusable: tabindex === '0' ? `${true}` : `${focusable}`,
+    tabindex,
+  };
+</script>
+
+<svg
+  width="24"
+  height="24"
+  fill="none"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  {style}
+  {id}
+  {...attributes}>
+  <path d="M17.5 12a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm2.646 3.146-4.092 4.093L14.9 17.7a.5.5 0 0 0-.8.6l1.5 2a.5.5 0 0 0 .754.053l4.5-4.5a.5.5 0 0 0-.707-.707ZM11.019 17H3l-.117.007A1 1 0 0 0 3 19h8.174a6.52 6.52 0 0 1-.155-2ZM11.498 15H3a1 1 0 0 1-.117-1.993L3 13h9.81c-.553.575-1 1.252-1.312 2ZM3 11a1 1 0 0 1-.117-1.993L3 9h18a1 1 0 0 1 .117 1.993L21 11H3ZM21 5H3l-.117.007A1 1 0 0 0 3 7h18l.117-.007A1 1 0 0 0 21 5Z" fill="currentColor"/>
+</svg>

From 2241df560e30b9644c8d7d572e070543a8801522 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 04:55:37 +0000
Subject: [PATCH 04/14] feat(client): import with `src/*` path

---
 packages/client/tsconfig.json  | 3 ++-
 packages/client/vite.config.js | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
index 97c35aff..2f4e3f97 100644
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@@ -30,7 +30,8 @@
     "sourceMap": true,
     "paths": {
       "$lib": ["src/lib"],
-      "$lib/*": ["src/lib/*"]
+      "$lib/*": ["src/lib/*"],
+      "src/*": ["src/*"]
     }
   },
   "include": [
diff --git a/packages/client/vite.config.js b/packages/client/vite.config.js
index 779b1d8a..5660b3ed 100644
--- a/packages/client/vite.config.js
+++ b/packages/client/vite.config.js
@@ -1,9 +1,15 @@
 // eslint-disable-next-line import/no-unresolved
 import { sveltekit } from '@sveltejs/kit/vite';
+import path from 'path';
 
 /** @type {import('vite').UserConfig} */
 const config = {
   plugins: [sveltekit()],
+  resolve: {
+    alias: {
+      src: path.resolve('src/'),
+    },
+  }
 };
 
 export default config;

From ae5588ea3811502a3eb31b28574f7747b11abb0d Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 04:55:55 +0000
Subject: [PATCH 05/14] feat(client): strict schema check for validate user
 input

---
 packages/client/src/lib/api/config.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/lib/api/config.ts b/packages/client/src/lib/api/config.ts
index 7ae54706..cec407ef 100644
--- a/packages/client/src/lib/api/config.ts
+++ b/packages/client/src/lib/api/config.ts
@@ -13,35 +13,35 @@ import {
 const LockerSubsectionSchema = z.object({
   department: z.string(),
   range: z.tuple([z.number(), z.number()]),
-});
+}).strict();
 
 const LockerSectionSchema = z.object({
   subsections: z.array(LockerSubsectionSchema).default([]),
   disabled: z.array(z.number()).default([]),
   height: z.number(),
-});
+}).strict();
 
 const BuildingSchema = z.object({
   id: z.string().regex(/\d{2}/),
   name: z.string(),
   lockers: z.record(z.record(LockerSectionSchema).default({})).default({}),
-});
+}).strict();
 
 export const ConfigSchema = z.object({
   id: z.string().min(1),
   name: z.string(),
   activateFrom: z.optional(z.preprocess((isoDateStr: string) => new Date(isoDateStr), z.date())),
   activateTo: z.optional(z.preprocess((isoDateStr: string) => new Date(isoDateStr), z.date())),
-});
+}).strict();
 
-const DepartmentConfigSchema = ConfigSchema.extend({
+export const DepartmentConfigSchema = ConfigSchema.extend({
   contact: z.string().optional(),
-});
+}).strict();
 
-const ServiceConfigSchema = ConfigSchema.extend({
+export const ServiceConfigSchema = ConfigSchema.extend({
   buildings: z.record(BuildingSchema).default({}).optional(),
   alert: z.string().optional(),
-});
+}).strict();
 
 // const ConfigUpdateRequestSchema = z.object({
 //   id: z.string().min(1),

From bf3d6805ecfe6e9fe0e29de539980fff52cb88e7 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 04:56:20 +0000
Subject: [PATCH 06/14] feat(client): `TextArea` component

---
 .../src/components/atom/form/TextArea.svelte  | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 packages/client/src/components/atom/form/TextArea.svelte

diff --git a/packages/client/src/components/atom/form/TextArea.svelte b/packages/client/src/components/atom/form/TextArea.svelte
new file mode 100644
index 00000000..0374b740
--- /dev/null
+++ b/packages/client/src/components/atom/form/TextArea.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  export let id: string;
+  export let value: string;
+  export let label: string;
+  export let showLabel: boolean = false;
+  export let labelClass: string = '';
+  export let inputClass: string = '';
+  export let invalidClass: string = '';
+  export let invalidText: string = '이 값은 올바르지 않습니다.';
+  let clazz = '';
+  export { clazz as class };
+</script>
+
+<div class="{clazz} flex flex-col">
+  <!--suppress XmlInvalidId -->
+  <label class="{labelClass} mb-1 block font-bold" for={id} class:hidden={!showLabel}
+    >{label ?? ''} <span class:hidden={!$$props.required} class="text-red-800">*</span></label>
+  <textarea
+    {id}
+    class="{inputClass} resize-none grow rounded-md border-transparent bg-gray-100 transition-all
+				 		invalid:outline-red-600 hover:bg-gray-200 focus:bg-white disabled:bg-gray-300 disabled:text-gray-400"
+    bind:value
+    {...$$restProps} />
+  <p class="{invalidClass} mt-1 hidden">{invalidText}</p>
+</div>
+
+<style lang="postcss">
+  input:invalid ~ p {
+    @apply block;
+  }
+</style>

From 9a1ce883d6150114b79ee328dc9859d24b16ae15 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 04:57:05 +0000
Subject: [PATCH 07/14] refactor(client/Modal): add inner padding to show
 outline correctly

---
 packages/client/src/components/molecule/Modal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/molecule/Modal.svelte b/packages/client/src/components/molecule/Modal.svelte
index 4d120e95..b038828e 100644
--- a/packages/client/src/components/molecule/Modal.svelte
+++ b/packages/client/src/components/molecule/Modal.svelte
@@ -92,7 +92,7 @@
         <Dismiss />
       </button>
     </div>
-    <div class="mx-4 my-2 h-auto grow overflow-y-auto overflow-x-visible">
+    <div class="mx-4 my-2 h-auto grow overflow-y-auto overflow-x-visible p-1">
       <slot />
     </div>
     <div class="mx-4 flex shrink-0 justify-end gap-3 pb-4">

From 85c3b3869afc20a0b50931c0c03b859ac5dd7973 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 04:57:50 +0000
Subject: [PATCH 08/14] feat(client): modals for config(service, department)
 import/export

---
 .../DepartmentImportExportModal.svelte        | 108 ++++++++++++++++++
 .../service/ServiceImportExportModal.svelte   | 105 +++++++++++++++++
 2 files changed, 213 insertions(+)
 create mode 100644 packages/client/src/components/molecule/admin/department/DepartmentImportExportModal.svelte
 create mode 100644 packages/client/src/components/molecule/admin/service/ServiceImportExportModal.svelte

diff --git a/packages/client/src/components/molecule/admin/department/DepartmentImportExportModal.svelte b/packages/client/src/components/molecule/admin/department/DepartmentImportExportModal.svelte
new file mode 100644
index 00000000..ab376750
--- /dev/null
+++ b/packages/client/src/components/molecule/admin/department/DepartmentImportExportModal.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+  import Modal from '../../Modal.svelte';
+  import { config } from '$lib/store';
+  import DocumentArrowRight from '../../../../icons/DocumentArrowRight.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { DepartmentConfigSchema, getDepartmentConfigs } from '$lib/api/config';
+  import TextGrammarCheckmark from '../../../../icons/TextGrammarCheckmark.svelte';
+  import TextArea from 'src/components/atom/form/TextArea.svelte';
+  import { z } from 'zod';
+  import Checkmark from 'src/icons/Checkmark.svelte';
+  import Dismiss from 'src/icons/Dismiss.svelte';
+
+  const dispatch = createEventDispatcher<{
+    submit: DepartmentConfigResponse[];
+  }>();
+
+  $: departments = $config && $config.success ? getDepartmentConfigs($config.result) : [];
+
+  export let open = false;
+
+  const title = '학과(부) 설정 가져오기/내보내기';
+  let configText;
+  $: if(departments && !configText) {
+    configText = JSON.stringify(departments, null, 2);
+  }
+  let green = false;
+  let error = '';
+  $: if(configText) {
+    error = '';
+    green = false;
+  }
+
+  function checkConfigJSON(): boolean {
+    try {
+      const parsed = z.array(DepartmentConfigSchema).safeParse(JSON.parse(configText));
+      if(parsed.success == false) {
+        error = JSON.stringify(parsed.error, null, 2);
+      }
+      return parsed.success;
+    } catch (e) {
+      console.error(e.message);
+      error = e.message;
+      return false;
+    }
+  }
+
+  function updateConfigs() {
+    const parsed = z.array(DepartmentConfigSchema).safeParse(JSON.parse(configText));
+    if(parsed.success) {
+      const configs = parsed.data;
+      const configResponse: DepartmentConfigResponse[] = configs.map((conf) => {
+        const { id, name, activateFrom, activateTo, contact } = conf;
+        return {
+          id,
+          name,
+          ...(activateFrom
+            ? { activate_from: activateFrom.toISOString() }
+            : { activate_from: null }),
+          ...(activateTo
+            ? { activate_to: activateTo.toISOString() }
+            : { activate_to: null }),
+          ...(contact ? { contact } : { contact: null }),
+        };
+      });
+      dispatch('submit', configResponse);
+    }
+  }
+</script>
+
+<Modal
+  on:close
+  on:click:secondary={checkConfigJSON}
+  on:click={updateConfigs}
+  {title}
+  bind:open
+  primaryDisabled={!green}
+  primaryText="가져오기"
+  secondaryText="검증"
+  isPrimaryBtnIconRight
+  isSecondaryBtnIconRight
+  {...$$restProps}>
+  <div class="flex flex-col gap-3 h-full">
+    <TextArea
+      class="h-full"
+      id="json"
+      bind:value={configText}
+      label="서비스 설정 데이터"
+      showLabel
+    />
+    <p class="text-gray-800 text-sm">데이터를 복사하여 저장하거나, 직접 수정하여 서비스에 적용할 수 있습니다.</p>
+    {#if green}
+      <div class="text-green-800 flex items-center gap-1">
+        <Checkmark class="w-3" />
+        <p class="text-xs font-bold">검증 성공!</p>
+      </div>
+    {:else if error}
+      <div class="text-red-800 flex items-center gap-1">
+        <Dismiss class="w-3" />
+        <p class="text-xs font-bold">검증 실패</p>
+      </div>
+      <pre class="rounded-md p-1 bg-white text-red-800 whitespace-pre-wrap text-xs font-mono">{error}</pre>
+    {:else}
+      <p class="text-xs">데이터를 가져오려면 검증하세요.</p>
+    {/if}
+  </div>
+  <DocumentArrowRight slot="primaryIcon" />
+  <TextGrammarCheckmark slot="secondaryIcon" />
+</Modal>
diff --git a/packages/client/src/components/molecule/admin/service/ServiceImportExportModal.svelte b/packages/client/src/components/molecule/admin/service/ServiceImportExportModal.svelte
new file mode 100644
index 00000000..3387c970
--- /dev/null
+++ b/packages/client/src/components/molecule/admin/service/ServiceImportExportModal.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import Modal from '../../Modal.svelte';
+  import { config } from '$lib/store';
+  import DocumentArrowRight from '../../../../icons/DocumentArrowRight.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { ServiceConfigSchema, getServiceConfig } from '$lib/api/config';
+  import TextGrammarCheckmark from '../../../../icons/TextGrammarCheckmark.svelte';
+    import TextArea from 'src/components/atom/form/TextArea.svelte';
+    import Checkmark from 'src/icons/Checkmark.svelte';
+    import Dismiss from 'src/icons/Dismiss.svelte';
+
+  const dispatch = createEventDispatcher<{
+    submit: ServiceConfigResponse;
+  }>();
+
+  $: serviceConfig = $config && $config.success ? getServiceConfig($config.result) : {};
+
+  export let open = false;
+
+  const title = '서비스 설정 가져오기/내보내기';
+  let configText;
+  $: if(serviceConfig && !configText) {
+    configText = JSON.stringify(serviceConfig, null, 2);
+  }
+  let green = false;
+  let error = '';
+  $: if(configText) {
+    error = '';
+    green = false;
+  }
+
+  function checkConfigJSON(): boolean {
+    try {
+      const parsed = ServiceConfigSchema.safeParse(JSON.parse(configText));
+      if(parsed.success == false) {
+        error = JSON.stringify(parsed.error, null, 2);
+      }
+      return parsed.success;
+    } catch (e) {
+      console.error(e.message);
+      error = e.message;
+      return false;
+    }
+  }
+
+  function updateConfigs() {
+    const parsed = ServiceConfigSchema.safeParse(JSON.parse(configText));
+    if(parsed.success) {
+      const { name, activateFrom, activateTo, alert, buildings } = parsed.data as ServiceConfig;
+      const configResponse: ServiceConfigResponse = {
+        id: 'SERVICE',
+        name,
+        ...(activateFrom
+          ? { activate_from: activateFrom.toISOString() }
+          : { activate_from: null }),
+        ...(activateTo
+          ? { activate_to: activateTo.toISOString() }
+          : { activate_to: null }),
+        ...(alert ? { alert } : { alert: null }),
+        buildings,
+      }
+      dispatch('submit', configResponse);
+    }
+  }
+</script>
+
+<Modal
+  on:close
+  on:click:secondary={() => green = checkConfigJSON()}
+  on:click={updateConfigs}
+  {title}
+  bind:open
+  primaryDisabled={!green}
+  primaryText="가져오기"
+  secondaryText="검증"
+  isPrimaryBtnIconRight
+  isSecondaryBtnIconRight
+  {...$$restProps}>
+  <div class="flex flex-col gap-3 h-full">
+    <TextArea
+      class="h-full"
+      id="json"
+      bind:value={configText}
+      label="서비스 설정 데이터"
+      showLabel
+    />
+    <p class="text-gray-800 text-sm">데이터를 복사하여 저장하거나, 직접 수정하여 서비스에 적용할 수 있습니다.</p>
+    {#if green}
+      <div class="text-green-800 flex items-center gap-1">
+        <Checkmark class="w-3" />
+        <p class="text-xs font-bold">검증 성공!</p>
+      </div>
+    {:else if error}
+      <div class="text-red-800 flex items-center gap-1">
+        <Dismiss class="w-3" />
+        <p class="text-xs font-bold">검증 실패</p>
+      </div>
+      <pre class="rounded-md p-1 bg-white text-red-800 whitespace-pre-wrap text-xs font-mono">{error}</pre>
+    {:else}
+      <p class="text-xs">데이터를 가져오려면 검증하세요.</p>
+    {/if}
+  </div>
+  <DocumentArrowRight slot="primaryIcon" />
+  <TextGrammarCheckmark slot="secondaryIcon" />
+</Modal>

From 5d02800505b8d4e6f99bc92a810f1edff98e3516 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 04:58:07 +0000
Subject: [PATCH 09/14] feat(client): config import functions

---
 .../department/DepartmentSettings.svelte      | 47 ++++++++++++++++++-
 .../admin/service/ServiceSettings.svelte      | 37 +++++++++++++++
 2 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/molecule/admin/department/DepartmentSettings.svelte b/packages/client/src/components/molecule/admin/department/DepartmentSettings.svelte
index 11b46f1e..6e6abc30 100644
--- a/packages/client/src/components/molecule/admin/department/DepartmentSettings.svelte
+++ b/packages/client/src/components/molecule/admin/department/DepartmentSettings.svelte
@@ -4,11 +4,19 @@
   import DepartmentConfigEditor from './DepartmentConfigEditor.svelte';
   import Skeleton from '../../../atom/Skeleton.svelte';
   import { apiDeleteConfig, apiUpdateConfig, getDepartmentConfigs } from '$lib/api/config';
+  import Code from '../../../../icons/Code.svelte';
+  import DepartmentImportExportModal from './DepartmentImportExportModal.svelte';
+  import Button from '../../../atom/Button.svelte';
 
   $: configs = $config && $config.success ? getDepartmentConfigs($config.result) : [];
 
   let updating = false;
   $: if ($config) updating = false;
+  let importExportModalOpen = false;
+
+  function openImportExportModal() {
+    importExportModalOpen = true;
+  }
 
   function deleteDepartment(event: CustomEvent<ConfigDeleteRequest>) {
     updating = true;
@@ -43,10 +51,40 @@
         updating = false;
       });
   }
+
+  function importDepartmentConfigs(event: CustomEvent<DepartmentConfigResponse[]>) {
+    importExportModalOpen = false;
+    const importedConfig = event.detail;
+    updating = true;
+    const updatePromises = importedConfig.map((conf) => apiUpdateConfig(conf as DepartmentConfigUpdateRequest).then((res) => {
+        if(res.success == false) {
+          throw (res as ErrorResponse<LockerError>).error;
+        }
+        return true;
+      }));
+    Promise.all(updatePromises)
+      .then(() => {
+        updating = false;
+        config.refresh();
+      })
+      .catch((err) => {
+        console.error(err);
+        updating = false;
+      });
+  }
 </script>
 
-<div class="my-8 flex flex-col gap-3 lg:mx-8">
-  <h3 class="mx-6 lg:mx-0">학과(부)별 설정</h3>
+<div class="my-8 flex w-auto flex-col item-stretch gap-3 lg:mx-8">
+  <div class="mx-6 flex w-full flex-wrap lg:mx-0">
+    <h3>학과(부)별 설정</h3>
+    {#if !updating}
+      <div class="flex grow items-center justify-end gap-1">
+        <Button on:click={openImportExportModal} class="bg-gray-200 text-gray-700" isIconRight>
+          <Code slot="icon" />
+        </Button>
+      </div>
+    {/if}
+  </div>
   {#if $config && $config.success && !updating}
     <div class="flex flex-col gap-3 bg-white p-6 shadow-md lg:rounded-md">
       <DepartmentConfigEditor on:delete={deleteDepartment} on:update={updateDepartment} {configs} />
@@ -57,3 +95,8 @@
     <Skeleton class="h-[32rem] w-full grow bg-gray-200 lg:rounded-md" />
   {/if}
 </div>
+
+<DepartmentImportExportModal
+  bind:open={importExportModalOpen}
+  on:close={() => (importExportModalOpen = false)}
+  on:submit={importDepartmentConfigs} />
diff --git a/packages/client/src/components/molecule/admin/service/ServiceSettings.svelte b/packages/client/src/components/molecule/admin/service/ServiceSettings.svelte
index d40b985e..93fc2907 100644
--- a/packages/client/src/components/molecule/admin/service/ServiceSettings.svelte
+++ b/packages/client/src/components/molecule/admin/service/ServiceSettings.svelte
@@ -11,6 +11,8 @@
   import UpdateScreen from '../../../atom/UpdateScreen.svelte';
   import Warning from '../../../../icons/Warning.svelte';
   import Skeleton from '../../../atom/Skeleton.svelte';
+  import Code from 'src/icons/Code.svelte';
+  import ServiceImportExportModal from './ServiceImportExportModal.svelte';
 
   let updating = false;
 
@@ -19,6 +21,11 @@
   let activateTo: Date;
   let alert: string;
   let buildings: { [buildingNum: string]: Building };
+  let importExportModalOpen = false;
+
+  function openImportExportModal() {
+    importExportModalOpen = true;
+  }
 
   $: serviceConfig = $config && $config.success ? getServiceConfig($config.result) : undefined;
 
@@ -66,6 +73,25 @@
       });
   }
 
+  function importServiceConfig(event: CustomEvent<ServiceConfigResponse>) {
+    importExportModalOpen = false;
+    const importedConfig = event.detail;
+    updating = true;
+    apiUpdateConfig(importedConfig as ServiceConfigUpdateRequest)
+      .then((res) => {
+        updating = false;
+        if (res.success) {
+          config.refresh();
+        } else {
+          console.error((res as ErrorResponse<LockerError>).error);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        updating = false;
+      });
+  }
+
   $: if (serviceConfig) {
     initializeValues();
     updating = false;
@@ -102,6 +128,12 @@
         저장
         <SaveEdit slot="icon" />
       </Button>
+      <Button
+        on:click={openImportExportModal}
+        class="bg-gray-200 text-gray-700"
+        isIconRight>
+        <Code slot="icon" />
+      </Button>
     </div>
   </div>
   {#if serviceConfig && !isServiceReady}
@@ -193,3 +225,8 @@
     </section>
   {/if}
 </div>
+
+<ServiceImportExportModal
+  bind:open={importExportModalOpen}
+  on:close={() => (importExportModalOpen = false)}
+  on:submit={importServiceConfig} />

From d491f10bb1cc33593549afa18e2ca2a6b1bc765c Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 05:02:55 +0000
Subject: [PATCH 10/14] fix(client/DepartmentImportExportModal): green on check
 success

---
 .../admin/department/DepartmentImportExportModal.svelte         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/molecule/admin/department/DepartmentImportExportModal.svelte b/packages/client/src/components/molecule/admin/department/DepartmentImportExportModal.svelte
index ab376750..36a74d3f 100644
--- a/packages/client/src/components/molecule/admin/department/DepartmentImportExportModal.svelte
+++ b/packages/client/src/components/molecule/admin/department/DepartmentImportExportModal.svelte
@@ -69,7 +69,7 @@
 
 <Modal
   on:close
-  on:click:secondary={checkConfigJSON}
+  on:click:secondary={() => green = checkConfigJSON()}
   on:click={updateConfigs}
   {title}
   bind:open

From 5202a75a0ad59fbd04f6f5cfa12bdf83f7ba599f Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 05:07:44 +0000
Subject: [PATCH 11/14] feat(client): strict id check of configs

---
 packages/client/src/lib/api/config.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/lib/api/config.ts b/packages/client/src/lib/api/config.ts
index cec407ef..be8e7d24 100644
--- a/packages/client/src/lib/api/config.ts
+++ b/packages/client/src/lib/api/config.ts
@@ -35,10 +35,12 @@ export const ConfigSchema = z.object({
 }).strict();
 
 export const DepartmentConfigSchema = ConfigSchema.extend({
+  id: z.string().min(1).refine((val) => val.toUpperCase() !== "SERVICE"),
   contact: z.string().optional(),
 }).strict();
 
 export const ServiceConfigSchema = ConfigSchema.extend({
+  id: z.literal("SERVICE"),
   buildings: z.record(BuildingSchema).default({}).optional(),
   alert: z.string().optional(),
 }).strict();

From 5d59c81950dfc14429916f87a03678037e81a615 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 05:09:37 +0000
Subject: [PATCH 12/14] feat(client): check id of `DepartmentConfig` with regex

---
 packages/client/src/lib/api/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/lib/api/config.ts b/packages/client/src/lib/api/config.ts
index be8e7d24..c9f55b21 100644
--- a/packages/client/src/lib/api/config.ts
+++ b/packages/client/src/lib/api/config.ts
@@ -35,7 +35,7 @@ export const ConfigSchema = z.object({
 }).strict();
 
 export const DepartmentConfigSchema = ConfigSchema.extend({
-  id: z.string().min(1).refine((val) => val.toUpperCase() !== "SERVICE"),
+  id: z.string().min(1).regex(/[a-zA-Z_]+/).refine((val) => val.toUpperCase() !== "SERVICE"),
   contact: z.string().optional(),
 }).strict();
 

From 31fc34103b343df69bff248098f68d559b299c26 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 05:11:07 +0000
Subject: [PATCH 13/14] style: apply prettier

---
 packages/client/src/lib/api/config.ts | 56 ++++++++++++++++-----------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/lib/api/config.ts b/packages/client/src/lib/api/config.ts
index c9f55b21..782da0a2 100644
--- a/packages/client/src/lib/api/config.ts
+++ b/packages/client/src/lib/api/config.ts
@@ -10,37 +10,49 @@ import {
   NotFoundErrorSchema,
 } from '$lib/api/schema';
 
-const LockerSubsectionSchema = z.object({
-  department: z.string(),
-  range: z.tuple([z.number(), z.number()]),
-}).strict();
+const LockerSubsectionSchema = z
+  .object({
+    department: z.string(),
+    range: z.tuple([z.number(), z.number()]),
+  })
+  .strict();
 
-const LockerSectionSchema = z.object({
-  subsections: z.array(LockerSubsectionSchema).default([]),
-  disabled: z.array(z.number()).default([]),
-  height: z.number(),
-}).strict();
+const LockerSectionSchema = z
+  .object({
+    subsections: z.array(LockerSubsectionSchema).default([]),
+    disabled: z.array(z.number()).default([]),
+    height: z.number(),
+  })
+  .strict();
 
-const BuildingSchema = z.object({
-  id: z.string().regex(/\d{2}/),
-  name: z.string(),
-  lockers: z.record(z.record(LockerSectionSchema).default({})).default({}),
-}).strict();
+const BuildingSchema = z
+  .object({
+    id: z.string().regex(/\d{2}/),
+    name: z.string(),
+    lockers: z.record(z.record(LockerSectionSchema).default({})).default({}),
+  })
+  .strict();
 
-export const ConfigSchema = z.object({
-  id: z.string().min(1),
-  name: z.string(),
-  activateFrom: z.optional(z.preprocess((isoDateStr: string) => new Date(isoDateStr), z.date())),
-  activateTo: z.optional(z.preprocess((isoDateStr: string) => new Date(isoDateStr), z.date())),
-}).strict();
+export const ConfigSchema = z
+  .object({
+    id: z.string().min(1),
+    name: z.string(),
+    activateFrom: z.optional(z.preprocess((isoDateStr: string) => new Date(isoDateStr), z.date())),
+    activateTo: z.optional(z.preprocess((isoDateStr: string) => new Date(isoDateStr), z.date())),
+  })
+  .strict();
 
 export const DepartmentConfigSchema = ConfigSchema.extend({
-  id: z.string().min(1).regex(/[a-zA-Z_]+/).refine((val) => val.toUpperCase() !== "SERVICE"),
+  id: z
+    .string()
+    .min(1)
+    .regex(/[a-zA-Z_]+/)
+    .refine((val) => val.toUpperCase() !== 'SERVICE'),
   contact: z.string().optional(),
 }).strict();
 
 export const ServiceConfigSchema = ConfigSchema.extend({
-  id: z.literal("SERVICE"),
+  id: z.literal('SERVICE'),
   buildings: z.record(BuildingSchema).default({}).optional(),
   alert: z.string().optional(),
 }).strict();

From 2d3322d71dc41a701292ad0c4fe5f5c4e9027e90 Mon Sep 17 00:00:00 2001
From: Hyomin Koo <me@eatsteak.dev>
Date: Sun, 17 Sep 2023 05:14:33 +0000
Subject: [PATCH 14/14] style: apply prettier

---
 packages/client/vite.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/vite.config.js b/packages/client/vite.config.js
index 5660b3ed..9c62b86a 100644
--- a/packages/client/vite.config.js
+++ b/packages/client/vite.config.js
@@ -9,7 +9,7 @@ const config = {
     alias: {
       src: path.resolve('src/'),
     },
-  }
+  },
 };
 
 export default config;