kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-14 22:08:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

BottomSheet 컴포넌트 리팩토링

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

26
src/lib/components/BottomSheet.svelte → src/lib/components/atoms/BottomSheet.svelte
View File

@@ -1,28 +1,26 @@
<script lang="ts"> <script lang="ts">
import type { Snippet } from "svelte"; import type { Snippet } from "svelte";
import type { ClassValue } from "svelte/elements";
import { fade, fly } from "svelte/transition"; import { fade, fly } from "svelte/transition";
import { AdaptiveDiv } from "$lib/components/atoms"; import { AdaptiveDiv } from "$lib/components/atoms";
interface Props { interface Props {
children: Snippet; children?: Snippet;
onclose?: () => void; class?: ClassValue;
isOpen: boolean; isOpen: boolean;
onclose?: () => void;
} }
let { children, onclose, isOpen = $bindable() }: Props = $props(); let { children, isOpen = $bindable(), onclose, ...props }: Props = $props();
const closeBottomSheet = $derived(
onclose ||
(() => {
isOpen = false;
}),
);
</script> </script>
{#if isOpen} {#if isOpen}
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div onclick={closeBottomSheet} class="fixed inset-0 z-10 flex items-end justify-center"> <div
onclick={onclose || (() => (isOpen = false))}
class="fixed inset-0 z-10 flex items-end justify-center"
>
<div <div
class="absolute inset-0 bg-black bg-opacity-50" class="absolute inset-0 bg-black bg-opacity-50"
transition:fade|global={{ duration: 100 }} transition:fade|global={{ duration: 100 }}
@@ -31,10 +29,12 @@
<AdaptiveDiv> <AdaptiveDiv>
<div <div
onclick={(e) => e.stopPropagation()} onclick={(e) => e.stopPropagation()}
class="flex max-h-[70vh] min-h-[30vh] overflow-y-auto rounded-t-2xl bg-white px-4" class="flex max-h-[70vh] min-h-[30vh] flex-col rounded-t-2xl bg-white"
transition:fly|global={{ y: 100, duration: 200 }} transition:fly|global={{ y: 100, duration: 200 }}
> >
{@render children?.()} <div class={["flex-grow overflow-y-auto", props.class]}>
{@render children?.()}
</div>
</div> </div>
</AdaptiveDiv> </AdaptiveDiv>
</div> </div>

1
src/lib/components/atoms/index.ts
View File

@@ -1,3 +1,4 @@
export { default as BottomSheet } from "./BottomSheet.svelte";
export * from "./buttons"; export * from "./buttons";
export * from "./divs"; export * from "./divs";
export * from "./inputs"; export * from "./inputs";

1
src/lib/components/index.ts
View File

@@ -1 +0,0 @@
export { default as BottomSheet } from "./BottomSheet.svelte";

17
src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { Writable } from "svelte/store"; import type { Writable } from "svelte/store";
import { BottomSheet } from "$lib/components"; import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
import { Button, BottomDiv } from "$lib/components/atoms";
import { CategoryCreateModal } from "$lib/components/organisms/modals"; import { CategoryCreateModal } from "$lib/components/organisms/modals";
import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem"; import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
import SubCategories from "$lib/molecules/SubCategories.svelte"; import SubCategories from "$lib/molecules/SubCategories.svelte";
@@ -26,11 +25,11 @@
}); });
</script> </script>
<BottomSheet bind:isOpen> {#if $category}
<div class="flex w-full flex-col justify-between"> <BottomSheet bind:isOpen class="flex flex-col">
{#if $category} <FullscreenDiv>
<SubCategories <SubCategories
class="h-fit py-4" class="py-4"
info={$category} info={$category}
onSubCategoryClick={({ id }) => onSubCategoryClick={({ id }) =>
(category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))} (category = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
@@ -44,9 +43,9 @@
</Button> </Button>
</BottomDiv> </BottomDiv>
{/if} {/if}
{/if} </FullscreenDiv>
</div> </BottomSheet>
</BottomSheet> {/if}
<CategoryCreateModal <CategoryCreateModal
bind:isOpen={isCategoryCreateModalOpen} bind:isOpen={isCategoryCreateModalOpen}

11
src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { BottomSheet } from "$lib/components"; import { BottomSheet, Button, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
import { Button, BottomDiv } from "$lib/components/atoms";
interface Props { interface Props {
onRetryClick: () => void; onRetryClick: () => void;
@@ -11,9 +10,9 @@
let { onRetryClick, onContinueClick, isOpen = $bindable() }: Props = $props(); let { onRetryClick, onContinueClick, isOpen = $bindable() }: Props = $props();
</script> </script>
<BottomSheet bind:isOpen> <BottomSheet bind:isOpen class="flex flex-col">
<div class="flex flex-col justify-between gap-y-4 pt-4"> <FullscreenDiv>
<div class="space-y-2 break-keep"> <div class="space-y-2 break-keep py-4">
<p class="text-xl font-bold">암호 키 파일을 저장하셨나요?</p> <p class="text-xl font-bold">암호 키 파일을 저장하셨나요?</p>
<p> <p>
암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요. 파일이 잘 저장되었는지 다시 암호 키 파일은 유출 방지를 위해 이 화면에서만 저장할 수 있어요. 파일이 잘 저장되었는지 다시
@@ -24,5 +23,5 @@
<Button color="gray" onclick={onRetryClick} class="flex-1">다시 저장할래요</Button> <Button color="gray" onclick={onRetryClick} class="flex-1">다시 저장할래요</Button>
<Button onclick={onContinueClick} class="flex-1">잘 저장되었어요</Button> <Button onclick={onContinueClick} class="flex-1">잘 저장되었어요</Button>
</BottomDiv> </BottomDiv>
</div> </FullscreenDiv>
</BottomSheet> </BottomSheet>

22
src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
View File

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

38
src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
View File

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

22
src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
View File

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