레이아웃에 필수적인 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="flex h-full items-center gap-x-4 p-2 transition active:scale-95">
-    <div class="h-full flex-grow">
+    <div class="flex-grow">
-      {@render children?.()}
+      {@render children()}
-    </div>
-    <div class="flex flex-shrink-0 items-center">
-      <IconChevronRight class="text-xl text-gray-800" />
     </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()}
-    {@render children?.()}
-  </div>
   {#if checked}
     <IconCheckCircle class="text-primary-600" />
   {:else}

src/lib/components/molecules/ActionModal.svelte

@@ -8,7 +8,7 @@
 
   interface Props {
     cancelText?: string;
-    children?: Snippet;
+    children: Snippet;
     confirmText: string;
     isOpen: boolean;
     onbeforeclose?: () => void;
@@ -41,7 +41,7 @@
 <Modal bind:isOpen onclose={closeModal} class="space-y-4">
   <div class="flex flex-col gap-y-2 break-keep">
     <p class="text-xl font-bold">{title}</p>
-    {@render children?.()}
+    {@render children()}
   </div>
   <div class="flex gap-x-2">
     <Button color="gray" onclick={closeModal} class="flex-1">{cancelText}</Button>

src/lib/components/molecules/IconEntryButton.svelte

@@ -5,7 +5,7 @@
   import { IconLabel } from "$lib/components/molecules";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     icon: Component<SvelteHTMLElements["svg"]>;
     iconClass?: ClassValue;
@@ -25,6 +25,6 @@
 
 <EntryButton {onclick} class={className}>
   <IconLabel {icon} class="h-full" iconClass={iconClassName} textClass={textClassName}>
-    {@render children?.()}
+    {@render children()}
   </IconLabel>
 </EntryButton>

src/lib/components/molecules/TitledDiv.svelte

@@ -9,7 +9,7 @@
     class?: ClassValue;
     description?: Snippet;
     icon?: Component<SvelteHTMLElements["svg"]>;
-    title?: Snippet;
+    title: Snippet;
     titleClass?: ClassValue;
   }
 
@@ -27,7 +27,7 @@
 <div class={["space-y-4 py-4", className]}>
   <div class="space-y-2 break-keep">
     <TitleLabel {icon} textClass={titleClassName}>
-      {@render title?.()}
+      {@render title()}
     </TitleLabel>
     {#if description}
       <p>

src/lib/components/molecules/TopBar.svelte

@@ -31,7 +31,7 @@
   {/if}
   <div class="w-[2.3rem] flex-shrink-0">
     {#if children}
-      {@render children?.()}
+      {@render children()}
     {/if}
   </div>
 </div>

src/lib/components/molecules/labels/IconLabel.svelte

@@ -3,7 +3,7 @@
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     icon: Component<SvelteHTMLElements["svg"]>;
     iconClass?: ClassValue;
@@ -27,7 +27,7 @@
   </div>
   <div class="flex flex-grow flex-col overflow-x-hidden text-left">
     <p class={["truncate font-medium", textClassName]}>
-      {@render children?.()}
+      {@render children()}
     </p>
     {#if subtext}
       <p class="truncate text-xs text-gray-800">

src/lib/components/molecules/labels/TitleLabel.svelte

@@ -3,7 +3,7 @@
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
 
   interface Props {
-    children?: Snippet;
+    children: Snippet;
     class?: ClassValue;
     icon?: Component<SvelteHTMLElements["svg"]>;
     textClass?: ClassValue;
@@ -19,6 +19,6 @@
     {/if}
   </div>
   <p class={["text-3xl font-bold", textClassName]}>
-    {@render children?.()}
+    {@render children()}
   </p>
 </div>

src/routes/(main)/menu/MenuEntryButton.svelte

@@ -19,5 +19,5 @@
   class="w-full"
   iconClass={["rounded-lg bg-gray-200 p-1 !text-base", iconColor]}
 >
-  {@render children?.()}
+  {@render children()}
 </IconEntryButton>