Button 및 Input 컴포넌트를 atoms 디렉터리로 이동 및 리팩토링

This commit is contained in:
static
2025-01-24 16:39:09 +09:00
parent a01137bbf9
commit 1c09d93b41
33 changed files with 145 additions and 172 deletions

View File

@@ -3,7 +3,7 @@
import type { Writable } from "svelte/store";
import { goto } from "$app/navigation";
import { TopBar } from "$lib/components";
import { FloatingButton } from "$lib/components/buttons";
import { FloatingButton } from "$lib/components/atoms";
import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
import { masterKeyStore, hmacSecretStore } from "$lib/stores";
import CreateBottomSheet from "./CreateBottomSheet.svelte";

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { BottomSheet } from "$lib/components";
import { EntryButton } from "$lib/components/buttons";
import { EntryButton } from "$lib/components/atoms";
import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
import IconUploadFile from "~icons/material-symbols/upload-file";
@@ -16,13 +16,13 @@
<BottomSheet bind:isOpen>
<div class="w-full py-4">
<EntryButton onclick={onDirectoryCreateClick}>
<EntryButton onclick={onDirectoryCreateClick} class="w-full">
<div class="flex h-12 items-center gap-x-4">
<IconCreateNewFolder class="text-2xl text-yellow-500" />
<p class="font-medium">폴더 만들기</p>
</div>
</EntryButton>
<EntryButton onclick={onFileUploadClick}>
<EntryButton onclick={onFileUploadClick} class="w-full">
<div class="flex h-12 items-center gap-x-4">
<IconUploadFile class="text-2xl text-blue-400" />
<p class="font-medium">파일 업로드</p>

View File

@@ -1,7 +1,6 @@
<script lang="ts">
import { Modal } from "$lib/components";
import { Button } from "$lib/components/buttons";
import { TextInput } from "$lib/components/inputs";
import { Button, TextInput } from "$lib/components/atoms";
interface Props {
onCreateClick: (name: string) => void;
@@ -23,8 +22,8 @@
<div class="mt-2 flex w-full">
<TextInput bind:value={name} placeholder="폴더 이름" />
</div>
<div class="mt-7 flex gap-2">
<Button color="gray" onclick={closeModal}>닫기</Button>
<Button onclick={() => onCreateClick(name)}>만들기</Button>
<div class="mt-7 flex gap-x-2">
<Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
<Button onclick={() => onCreateClick(name)} class="flex-1">만들기</Button>
</div>
</Modal>

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { Modal } from "$lib/components";
import { Button } from "$lib/components/buttons";
import { Button } from "$lib/components/atoms";
import type { SelectedDirectoryEntry } from "./service";
interface Props {
@@ -47,9 +47,9 @@
{/if}
</p>
</div>
<div class="flex gap-2">
<Button color="gray" onclick={closeModal}>아니요</Button>
<Button onclick={deleteEntry}>삭제할게요</Button>
<div class="flex gap-x-2">
<Button color="gray" onclick={closeModal} class="flex-1">아니요</Button>
<Button onclick={deleteEntry} class="flex-1">삭제할게요</Button>
</div>
</div>
{/if}

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { BottomSheet } from "$lib/components";
import { EntryButton } from "$lib/components/buttons";
import { EntryButton } from "$lib/components/atoms";
import type { SelectedDirectoryEntry } from "./service";
import IconFolder from "~icons/material-symbols/folder";
@@ -46,13 +46,13 @@
</div>
<div class="my-2 h-px w-full bg-gray-200"></div>
{/if}
<EntryButton onclick={onRenameClick}>
<EntryButton onclick={onRenameClick} class="w-full">
<div class="flex h-8 items-center gap-x-4">
<IconEdit class="text-lg" />
<p class="font-medium">이름 바꾸기</p>
</div>
</EntryButton>
<EntryButton onclick={onDeleteClick}>
<EntryButton onclick={onDeleteClick} class="w-full">
<div class="flex h-8 items-center gap-x-4 text-red-500">
<IconDelete class="text-lg" />
<p class="font-medium">삭제하기</p>

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { Modal } from "$lib/components";
import { Button } from "$lib/components/buttons";
import { Button } from "$lib/components/atoms";
interface Props {
file: File | undefined;
@@ -21,9 +21,9 @@
<p class="text-xl font-bold">'{nameShort}' 파일이 있어요.</p>
<p>예전에 이미 업로드된 파일이에요. 그래도 업로드할까요?</p>
</div>
<div class="flex gap-2">
<Button color="gray" onclick={onclose}>아니요</Button>
<Button onclick={onDuplicateClick}>업로드할게요</Button>
<div class="flex gap-x-2">
<Button color="gray" onclick={onclose} class="flex-1">아니요</Button>
<Button onclick={onDuplicateClick} class="flex-1">업로드할게요</Button>
</div>
</div>
{/if}

View File

@@ -1,7 +1,6 @@
<script lang="ts">
import { Modal } from "$lib/components";
import { Button } from "$lib/components/buttons";
import { TextInput } from "$lib/components/inputs";
import { Button, TextInput } from "$lib/components/atoms";
import type { SelectedDirectoryEntry } from "./service";
interface Props {
@@ -40,8 +39,8 @@
<div class="mt-2 flex w-full">
<TextInput bind:value={name} placeholder="이름" />
</div>
<div class="mt-7 flex gap-2">
<Button color="gray" onclick={closeModal}>닫기</Button>
<Button onclick={renameEntry}>바꾸기</Button>
<div class="mt-7 flex gap-x-2">
<Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
<Button onclick={renameEntry} class="flex-1">바꾸기</Button>
</div>
</Modal>