레이아웃에 필수적인 Snippet은 반드시 전달해야하도록 Props 타입 수정

src/lib/components/atoms/BottomSheet.svelte

@@ -5,7 +5,7 @@
   import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     isOpen: boolean;
     onclose?: () => void;
@@ -33,7 +33,7 @@
           transition:fly|global={{ y: 100, duration: 200 }}
         >
           <div class={["flex-grow overflow-y-auto", className]}>
-            {@render children?.()}
+            {@render children()}
           </div>
         </div>
       </AdaptiveDiv>

src/lib/components/atoms/Modal.svelte

@@ -5,7 +5,7 @@
   import { AdaptiveDiv } from "$lib/components/atoms";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     isOpen: boolean;
     onclose?: () => void;
@@ -25,7 +25,7 @@
     <AdaptiveDiv class="h-full">
       <div class="flex h-full items-center justify-center px-4">
         <div onclick={(e) => e.stopPropagation()} class={["rounded-2xl bg-white p-4", className]}>
-          {@render children?.()}
+          {@render children()}
         </div>
       </div>
     </AdaptiveDiv>

src/lib/components/atoms/buttons/ActionEntryButton.svelte

@@ -5,7 +5,7 @@
   interface Props {
     actionButtonClass?: ClassValue;
     actionButtonIcon?: Component<SvelteHTMLElements["svg"]>;
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     onActionButtonClick?: () => void;
     onclick?: () => void;
@@ -28,9 +28,9 @@
   onclick={onclick && (() => setTimeout(onclick, 100))}
   class={["rounded-xl", className]}
 >
-  <div id="children" class="flex h-full items-center justify-between gap-x-4 p-2 transition">
+  <div id="children" class="flex h-full items-center gap-x-4 p-2 transition">
     <div class="flex-grow overflow-x-hidden">
-      {@render children?.()}
+      {@render children()}
     </div>
     {#if ActionButtonIcon}
       <button

src/lib/components/atoms/buttons/Button.svelte

@@ -3,7 +3,7 @@
   import type { ClassValue } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     color?: "primary" | "gray";
     onclick?: () => void;
@@ -34,5 +34,5 @@
     className,
   ]}
 >
-  {@render children?.()}
+  {@render children()}
 </button>

src/lib/components/atoms/buttons/EntryButton.svelte

@@ -5,7 +5,7 @@
   import IconChevronRight from "~icons/material-symbols/chevron-right";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     onclick?: () => void;
   }
@@ -17,12 +17,10 @@
   onclick={onclick && (() => setTimeout(onclick, 100))}
   class={["rounded-xl active:bg-gray-100", className]}
 >
-  <div class="flex h-full gap-x-4 p-2 transition active:scale-95">
-    <div class="h-full flex-grow">
-      {@render children?.()}
-    </div>
-    <div class="flex flex-shrink-0 items-center">
-      <IconChevronRight class="text-xl text-gray-800" />
+  <div class="flex h-full items-center gap-x-4 p-2 transition active:scale-95">
+    <div class="flex-grow">
+      {@render children()}
     </div>
+    <IconChevronRight class="flex-shrink-0 text-xl text-gray-800" />
   </div>
 </button>

src/lib/components/atoms/buttons/TextButton.svelte

@@ -2,7 +2,7 @@
   import type { Snippet } from "svelte";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     onclick?: () => void;
   }
 
@@ -14,6 +14,6 @@
   class="text-sm font-medium text-gray-800 underline underline-offset-2 active:rounded-xl active:bg-gray-100"
 >
   <div class="h-full p-1 transition active:scale-95">
-    {@render children?.()}
+    {@render children()}
   </div>
 </button>

src/lib/components/atoms/divs/AdaptiveDiv.svelte

@@ -3,7 +3,7 @@
   import type { ClassValue } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
   }
 
@@ -11,5 +11,5 @@
 </script>
 
 <div class={["mx-auto max-w-screen-md", className]}>
-  {@render children?.()}
+  {@render children()}
 </div>

src/lib/components/atoms/divs/BottomDiv.svelte

@@ -3,7 +3,7 @@
   import type { ClassValue } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
   }
 
@@ -11,5 +11,5 @@
 </script>
 
 <div class={["sticky bottom-0 bg-white pb-4", className]}>
-  {@render children?.()}
+  {@render children()}
 </div>

src/lib/components/atoms/divs/FullscreenDiv.svelte

@@ -3,5 +3,5 @@
 </script>
 
 <div class="flex flex-grow flex-col justify-between px-4">
-  {@render children?.()}
+  {@render children()}
 </div>

src/lib/components/atoms/inputs/CheckBox.svelte

@@ -6,7 +6,7 @@
 
   interface Props {
     checked?: boolean;
-    children?: Snippet;
+    children: Snippet;
   }
 
   let { checked = $bindable(false), children }: Props = $props();
@@ -14,9 +14,7 @@
 
 <label class="flex items-center gap-x-1">
   <input bind:checked type="checkbox" class="hidden" />
-  <div>
-    {@render children?.()}
-  </div>
+  {@render children()}
   {#if checked}
     <IconCheckCircle class="text-primary-600" />
   {:else}