BottomSheet 컴포넌트 리팩토링

This commit is contained in:
static
2025-01-27 15:03:57 +09:00
parent 0f2c5f8b33
commit cf51f2618e
8 changed files with 65 additions and 73 deletions

View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { BottomSheet } from "$lib/components";
import { BottomSheet } from "$lib/components/atoms";
import { IconEntryButton } from "$lib/components/molecules";
import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
@@ -14,23 +14,21 @@
let { isOpen = $bindable(), onDirectoryCreateClick, onFileUploadClick }: Props = $props();
</script>
<BottomSheet bind:isOpen>
<div class="w-full py-4">
<IconEntryButton
icon={IconCreateNewFolder}
onclick={onDirectoryCreateClick}
class="h-16 w-full"
iconClass="!text-2xl text-yellow-500"
>
폴더 만들기
</IconEntryButton>
<IconEntryButton
icon={IconUploadFile}
onclick={onFileUploadClick}
class="h-16 w-full"
iconClass="!text-2xl text-blue-400"
>
파일 업로드
</IconEntryButton>
</div>
<BottomSheet bind:isOpen class="p-4">
<IconEntryButton
icon={IconCreateNewFolder}
onclick={onDirectoryCreateClick}
class="h-16 w-full"
iconClass="!text-2xl text-yellow-500"
>
폴더 만들기
</IconEntryButton>
<IconEntryButton
icon={IconUploadFile}
onclick={onFileUploadClick}
class="h-16 w-full"
iconClass="!text-2xl text-blue-400"
>
파일 업로드
</IconEntryButton>
</BottomSheet>

View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { BottomSheet } from "$lib/components";
import { BottomSheet } from "$lib/components/atoms";
import { DirectoryEntryLabel, IconEntryButton } from "$lib/components/molecules";
import { useContext } from "./service.svelte";
@@ -18,16 +18,14 @@
{#if context.selectedEntry}
{@const { name, type } = context.selectedEntry}
<BottomSheet bind:isOpen>
<div class="w-full py-4">
<DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
<div class="my-2 h-px w-full bg-gray-200"></div>
<IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
이름 바꾸기
</IconEntryButton>
<IconEntryButton icon={IconDelete} onclick={onDeleteClick} class="h-12 w-full text-red-500">
삭제하기
</IconEntryButton>
</div>
<BottomSheet bind:isOpen class="p-4">
<DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
<div class="my-2 h-px w-full bg-gray-200"></div>
<IconEntryButton icon={IconEdit} onclick={onRenameClick} class="h-12 w-full">
이름 바꾸기
</IconEntryButton>
<IconEntryButton icon={IconDelete} onclick={onDeleteClick} class="h-12 w-full text-red-500">
삭제하기
</IconEntryButton>
</BottomSheet>
{/if}