기존에 제작된 모달들을 ActionModal 컴포넌트 기반으로 재구성

src/lib/components/BottomSheet.svelte

@@ -23,13 +23,16 @@
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div onclick={closeBottomSheet} class="fixed inset-0 z-10 flex items-end justify-center">
-    <div class="absolute inset-0 bg-black bg-opacity-50" transition:fade={{ duration: 100 }}></div>
+    <div
+      class="absolute inset-0 bg-black bg-opacity-50"
+      transition:fade|global={{ duration: 100 }}
+    ></div>
     <div class="z-20 w-full">
       <AdaptiveDiv>
         <div
           onclick={(e) => e.stopPropagation()}
           class="flex max-h-[70vh] min-h-[30vh] overflow-y-auto rounded-t-2xl bg-white px-4"
-          transition:fly={{ y: 100, duration: 200 }}
+          transition:fly|global={{ y: 100, duration: 200 }}
         >
           {@render children?.()}
         </div>

src/lib/components/atoms/Modal.svelte

@@ -20,7 +20,7 @@
   <div
     onclick={onclose || (() => (isOpen = false))}
     class="fixed inset-0 z-10 bg-black bg-opacity-50"
-    transition:fade={{ duration: 100 }}
+    transition:fade|global={{ duration: 100 }}
   >
     <AdaptiveDiv class="h-full">
       <div class="flex h-full items-center justify-center px-4">

src/lib/components/organisms/modals/CategoryCreateModal.svelte

@@ -3,10 +3,10 @@
 
   interface Props {
     isOpen: boolean;
-    oncreate: (name: string) => Promise<boolean>;
+    onCreateClick: (name: string) => Promise<boolean>;
   }
 
-  let { isOpen = $bindable(), oncreate }: Props = $props();
+  let { isOpen = $bindable(), onCreateClick }: Props = $props();
 </script>
 
 <TextInputModal
@@ -14,5 +14,5 @@
   title="새 카테고리"
   placeholder="카테고리 이름"
   submitText="만들기"
-  onSubmitClick={oncreate}
+  onSubmitClick={onCreateClick}
 />

src/lib/modules/util.ts

@@ -28,6 +28,11 @@ export const formatNetworkSpeed = (speed: number) => {
   return `${(speed / 1000 / 1000 / 1000).toFixed(1)} Gbps`;
 };
 
+export const truncateString = (str: string, maxLength = 20) => {
+  if (str.length <= maxLength) return str;
+  return `${str.slice(0, maxLength)}...`;
+};
+
 export enum SortBy {
   NAME_ASC,
   NAME_DESC,