kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-16 06:58:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

카테고리 페이지의 주요 요소를 별도 컴포넌트로 분리

Browse Source
This commit is contained in:
static
2025-01-22 11:28:13 +09:00
parent 88d4757cf7
commit dbe2262d07
10 changed files with 100 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/routes/(main)/category/[[id]]/+page.svelte
View File

@@ -3,10 +3,9 @@
import { goto } from "$app/navigation";
import { TopBar } from "$lib/components";
import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
import Category from "$lib/organisms/Category";
import { masterKeyStore } from "$lib/stores";
import CreateCategoryModal from "./CreateCategoryModal.svelte";
import Files from "./Files.svelte";
import SubCategories from "./SubCategories.svelte";
import { requestCategoryCreation } from "./service";
let { data } = $props();
@@ -34,32 +33,16 @@
{#if data.id !== "root"}
<TopBar title={$info?.name} xPadding />
{/if}
{#if $info}
<div class="flex-grow space-y-4 bg-gray-100 pb-[5.5em]">
<div class="space-y-4 bg-white p-4">
{#if data.id !== "root"}
<p class="text-lg font-bold text-gray-800">하위 카테고리</p>
{/if}
{#key $info}
<SubCategories
info={$info}
onCategoryClick={({ id }) => goto(`/category/${id}`)}
onCategoryCreateClick={() => {
isCreateCategoryModalOpen = true;
}}
/>
{/key}
</div>
{#if data.id !== "root"}
<div class="space-y-4 bg-white p-4">
<p class="text-lg font-bold text-gray-800">파일</p>
{#key $info}
<Files info={$info} onFileClick={({ id }) => goto(`/file/${id}`)} />
{/key}
</div>
{/if}
</div>
{/if}
<div class="flex-grow bg-gray-100 pb-[5.5em]">
{#if $info}
<Category
info={$info}
onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
onSubCategoryCreateClick={() => (isCreateCategoryModalOpen = true)}
onFileClick={({ id }) => goto(`/file/${id}`)}
/>
{/if}
</div>
</div>
<CreateCategoryModal bind:isOpen={isCreateCategoryModalOpen} onCreateClick={createCategory} />

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

@@ -1,61 +0,0 @@
<script lang="ts">
import type { Writable } from "svelte/store";
import type { FileInfo } from "$lib/modules/filesystem";
import type { SelectedFile } from "./service";
import IconDraft from "~icons/material-symbols/draft";
import IconMoreVert from "~icons/material-symbols/more-vert";
interface Props {
info: Writable<FileInfo | null>;
onclick: (selectedFile: SelectedFile) => void;
}
let { info, onclick }: Props = $props();
const openFile = () => {
const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onclick({ id, dataKey, dataKeyVersion, name });
}, 100);
};
const openMenu = (e: Event) => {
e.stopPropagation();
// TODO
};
</script>
{#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div id="button" onclick={openFile} class="h-12 rounded-xl">
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
<div class="flex-shrink-0 text-lg text-blue-400">
<IconDraft />
</div>
<p title={$info.name} class="flex-grow truncate font-medium">
{$info.name}
</p>
<button
id="open-menu"
onclick={openMenu}
class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
>
<IconMoreVert class="text-lg" />
</button>
</div>
</div>
{/if}
<style>
#button:active:not(:has(#open-menu:active)) {
@apply bg-gray-100;
}
#button-content:active:not(:has(#open-menu:active)) {
@apply scale-95;
}
</style>

34
src/routes/(main)/category/[[id]]/Files.svelte
View File

@@ -1,34 +0,0 @@
<script lang="ts">
import type { Writable } from "svelte/store";
import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
import { masterKeyStore } from "$lib/stores";
import File from "./File.svelte";
import type { SelectedFile } from "./service";
interface Props {
info: CategoryInfo;
onFileClick: (file: SelectedFile) => void;
}
let { info, onFileClick }: Props = $props();
let files: Writable<FileInfo | null>[] = $state([]);
$effect(() => {
files =
info.files?.map((id) => {
const info = getFileInfo(id, $masterKeyStore?.get(1)?.key!);
return info;
}) ?? [];
// TODO: Sorting
});
</script>
<div class="space-y-1">
{#each files as file}
<File info={file} onclick={onFileClick} />
{:else}
<p class="text-gray-800">이 카테고리에 추가된 파일이 없어요.</p>
{/each}
</div>

41
src/routes/(main)/category/[[id]]/SubCategories.svelte
View File

@@ -1,41 +0,0 @@
<script lang="ts">
import type { Writable } from "svelte/store";
import { EntryButton } from "$lib/components/buttons";
import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
import { masterKeyStore } from "$lib/stores";
import type { SelectedSubCategory } from "./service";
import SubCategory from "./SubCategory.svelte";
import IconAddCircle from "~icons/material-symbols/add-circle";
interface Props {
info: CategoryInfo;
onCategoryClick: (category: SelectedSubCategory) => void;
onCategoryCreateClick: () => void;
}
let { info, onCategoryClick, onCategoryCreateClick }: Props = $props();
let subCategories: Writable<CategoryInfo | null>[] = $state([]);
$effect(() => {
subCategories = info.subCategoryIds.map((id) => {
const info = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!);
return info;
});
// TODO: Sorting
});
</script>
<div class="space-y-1">
{#each subCategories as subCategory}
<SubCategory info={subCategory} onclick={onCategoryClick} />
{/each}
<EntryButton onclick={onCategoryCreateClick}>
<div class="flex h-8 items-center gap-x-4">
<IconAddCircle class="text-lg text-gray-600" />
<p class="font-medium text-gray-700">카테고리 추가하기</p>
</div>
</EntryButton>
</div>

61
src/routes/(main)/category/[[id]]/SubCategory.svelte
View File

@@ -1,61 +0,0 @@
<script lang="ts">
import type { Writable } from "svelte/store";
import type { CategoryInfo } from "$lib/modules/filesystem";
import type { SelectedSubCategory } from "./service";
import IconCategory from "~icons/material-symbols/category";
import IconMoreVert from "~icons/material-symbols/more-vert";
interface Props {
info: Writable<CategoryInfo | null>;
onclick: (selectedCategory: SelectedSubCategory) => void;
}
let { info, onclick }: Props = $props();
const openCategory = () => {
const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
setTimeout(() => {
onclick({ id, dataKey, dataKeyVersion, name });
}, 100);
};
const openMenu = (e: Event) => {
e.stopPropagation();
// TODO
};
</script>
{#if $info}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div id="button" onclick={openCategory} class="h-12 rounded-xl">
<div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
<div class="flex-shrink-0 text-lg">
<IconCategory />
</div>
<p title={$info.name} class="flex-grow truncate font-medium">
{$info.name}
</p>
<button
id="open-menu"
onclick={openMenu}
class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
>
<IconMoreVert class="text-lg" />
</button>
</div>
</div>
{/if}
<style>
#button:active:not(:has(#open-menu:active)) {
@apply bg-gray-100;
}
#button-content:active:not(:has(#open-menu:active)) {
@apply scale-95;
}
</style>

14
src/routes/(main)/category/[[id]]/service.ts
View File

@@ -3,20 +3,6 @@ import { generateDataKey, wrapDataKey, encryptString } from "$lib/modules/crypto
import type { CategoryCreateRequest } from "$lib/server/schemas";
import type { MasterKey } from "$lib/stores";
export interface SelectedSubCategory {
id: number;
dataKey: CryptoKey;
dataKeyVersion: Date;
name: string;
}
export interface SelectedFile {
id: number;
dataKey: CryptoKey;
dataKeyVersion: Date;
name: string;
}
export const requestCategoryCreation = async (
name: string,
parentId: "root" | number,