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

@@ -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 { SelectedCategory } from "$lib/molecules/Categories";
import IconCategory from "~icons/material-symbols/category";
@@ -41,13 +41,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";
import type { SelectedCategory } from "$lib/molecules/Categories";
interface Props {
@@ -39,9 +39,9 @@
하지만 카테고리에 추가된 파일들은 삭제되지 않아요.
</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,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 { SelectedCategory } from "$lib/molecules/Categories";
interface Props {
@@ -20,7 +19,7 @@
selectedCategory = undefined;
};
const renameEntry = async () => {
const renameCategory = async () => {
// TODO: Validation
if (await onRenameClick(name)) {
@@ -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={renameCategory} class="flex-1">바꾸기</Button>
</div>
</Modal>