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

레이아웃 수정

Browse Source
This commit is contained in:
static
2025-01-02 03:08:11 +09:00
parent 314b8cca5c
commit 58eac9a694
11 changed files with 141 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/lib/components/BottomSheet.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import type { Snippet } from "svelte";
import { fade, fly } from "svelte/transition";
import { AdaptiveDiv } from "$lib/components/divs";
interface Props {
children: Snippet;
@@ -20,12 +21,16 @@
class="fixed inset-0 flex items-end justify-center"
>
<div class="absolute inset-0 bg-black bg-opacity-50" transition:fade={{ duration: 100 }}></div>
<div
onclick={(e) => e.stopPropagation()}
class="z-10 flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white p-4"
transition:fly={{ y: 100, duration: 200 }}
>
{@render children?.()}
<div class="z-10">
<AdaptiveDiv>
<div
onclick={(e) => e.stopPropagation()}
class="flex max-h-[70vh] min-h-[30vh] w-full items-stretch rounded-t-2xl bg-white p-4"
transition:fly={{ y: 100, duration: 200 }}
>
{@render children?.()}
</div>
</AdaptiveDiv>
</div>
</div>
{/if}

9
src/lib/components/Modal.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import type { Snippet } from "svelte";
import { fade } from "svelte/transition";
import { AdaptiveDiv } from "$lib/components/divs";
interface Props {
children: Snippet;
@@ -20,8 +21,10 @@
class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 px-2"
transition:fade={{ duration: 100 }}
>
<div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
{@render children?.()}
</div>
<AdaptiveDiv>
<div onclick={(e) => e.stopPropagation()} class="max-w-full rounded-2xl bg-white p-4">
{@render children?.()}
</div>
</AdaptiveDiv>
</div>
{/if}

2
src/lib/components/divs/AdaptiveDiv.svelte
View File

@@ -2,6 +2,6 @@
let { children } = $props();
</script>
<div class="mx-auto h-full w-full max-w-screen-md">
<div class="mx-auto w-full max-w-screen-md">
{@render children?.()}
</div>

2
src/lib/components/divs/BottomDiv.svelte
View File

@@ -2,6 +2,6 @@
let { children } = $props();
</script>
<div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white">
<div class="sticky bottom-0 flex w-full flex-col items-center gap-y-2 bg-white pb-2">
{@render children?.()}
</div>

18
src/lib/components/divs/TitleDiv.svelte
View File

@@ -1,7 +1,21 @@
<script lang="ts">
let { children } = $props();
import type { Component, Snippet } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
interface Props {
icon?: Component<SvelteHTMLElements["svg"]>;
children: Snippet;
}
let { icon, children }: Props = $props();
</script>
<div class="mt-[20%]">
<div>
<div class="box-content flex min-h-[10vh] items-center pt-2">
{#if icon}
{@const Icon = icon}
<Icon class="text-5xl text-gray-600" />
{/if}
</div>
{@render children?.()}
</div>

6
src/routes/(fullscreen)/+layout.svelte
View File

@@ -4,8 +4,10 @@
let { children } = $props();
</script>
<div class="h-dvh w-full p-2">
<div class="h-screen w-full">
<AdaptiveDiv>
{@render children()}
<div class="flex flex-col justify-between px-2">
{@render children()}
</div>
</AdaptiveDiv>
</div>

38
src/routes/(fullscreen)/auth/login/+page.svelte
View File

@@ -55,23 +55,21 @@
<title>로그인</title>
</svelte:head>
<div class="flex h-full flex-col justify-between">
<TitleDiv>
<div class="flex flex-col gap-y-2">
<h1 class="text-3xl font-bold">환영합니다!</h1>
<p>서비스를 이용하려면 로그인을 해야해요.</p>
</div>
<div class="my-4 flex flex-col gap-y-2">
<TextInput bind:value={email} placeholder="이메일" />
<TextInput bind:value={password} placeholder="비밀번호" type="password" />
</div>
</TitleDiv>
<BottomDiv>
<div class="w-full">
<Button onclick={login}>로그인</Button>
</div>
<div class="w-fit">
<TextButton>계정이 없어요</TextButton>
</div>
</BottomDiv>
</div>
<TitleDiv>
<div class="flex flex-col gap-y-2">
<h1 class="text-3xl font-bold">환영합니다!</h1>
<p>서비스를 이용하려면 로그인을 해야해요.</p>
</div>
<div class="my-4 flex flex-col gap-y-2">
<TextInput bind:value={email} placeholder="이메일" />
<TextInput bind:value={password} placeholder="비밀번호" type="password" />
</div>
</TitleDiv>
<BottomDiv>
<div class="w-full">
<Button onclick={login}>로그인</Button>
</div>
<div class="w-fit">
<TextButton>계정이 없어요</TextButton>
</div>
</BottomDiv>

60
src/routes/(fullscreen)/client/pending/+page.svelte
View File

@@ -27,40 +27,38 @@
});
</script>
<svetle:head>
<svelte:head>
<title>승인을 기다리고 있어요.</title>
</svetle:head>
</svelte:head>
<div class="flex h-full flex-col">
<TitleDiv>
<div class="flex flex-col gap-y-2">
<h1 class="text-3xl font-bold">승인을 기다리고 있어요.</h1>
<p>
회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
</p>
<TitleDiv>
<div class="flex flex-col gap-y-2">
<h1 class="text-3xl font-bold">승인을 기다리고 있어요.</h1>
<p>
회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
</p>
</div>
<div class="my-4 flex flex-col gap-y-2">
<div>
<IconFingerprint class="mx-auto text-7xl" />
<p class="text-center text-xl font-bold text-primary-500">암호 키 지문</p>
</div>
<div class="my-4 flex flex-col gap-y-2">
<div>
<IconFingerprint class="mx-auto text-7xl" />
<p class="text-center text-xl font-bold text-primary-500">암호 키 지문</p>
</div>
<div class="rounded-2xl bg-gray-100 p-4">
<p class="text-center text-2xl font-medium text-gray-800">
{#if !fingerprint}
<div class="rounded-2xl bg-gray-100 p-4">
<p class="text-center text-2xl font-medium text-gray-800">
{#if !fingerprint}
지문 생성하는 중...
{:else}
{#await fingerprint}
지문 생성하는 중...
{:else}
{#await fingerprint}
지문 생성하는 중...
{:then fingerprint}
{fingerprint}
{/await}
{/if}
</p>
</div>
<p class="text-center">
암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
지문이 일치하는지 확인 후 승인해 주세요.
{:then fingerprint}
{fingerprint}
{/await}
{/if}
</p>
</div>
</TitleDiv>
</div>
<p class="text-center">
암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
지문이 일치하는지 확인 후 승인해 주세요.
</p>
</div>
</TitleDiv>

57
src/routes/(fullscreen)/key/export/+page.svelte
View File

@@ -2,7 +2,7 @@
import { saveAs } from "file-saver";
import { goto } from "$app/navigation";
import { Button, TextButton } from "$lib/components/buttons";
import { BottomDiv } from "$lib/components/divs";
import { TitleDiv, BottomDiv } from "$lib/components/divs";
import { clientKeyStore } from "$lib/stores";
import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
import BeforeContinueModal from "./BeforeContinueModal.svelte";
@@ -84,40 +84,35 @@
};
</script>
<svetle:head>
<svelte:head>
<title>암호 키 생성하기</title>
</svetle:head>
</svelte:head>
<div class="flex h-full flex-col">
<div class="flex h-[10%] items-center">
<IconKey class="text-5xl text-gray-600" />
</div>
<div class="flex flex-1 flex-col justify-between">
<div class="space-y-4">
<p class="break-keep text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
<div class="space-y-2 break-keep text-lg text-gray-800">
<p>
모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.
</p>
<p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
</div>
<TitleDiv icon={IconKey}>
<div class="space-y-4">
<p class="break-keep text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
<div class="space-y-2 break-keep text-lg text-gray-800">
<p>
모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.
</p>
<p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
</div>
<BottomDiv>
<div class="w-full">
<Button onclick={exportKeyPair}>암호 키 내보내기</Button>
</div>
<div class="w-fit">
<TextButton
onclick={() => {
isBeforeContinueModalOpen = true;
}}
>
내보내지 않을래요
</TextButton>
</div>
</BottomDiv>
</div>
</div>
</TitleDiv>
<BottomDiv>
<div class="w-full">
<Button onclick={exportKeyPair}>암호 키 내보내기</Button>
</div>
<div class="w-fit">
<TextButton
onclick={() => {
isBeforeContinueModalOpen = true;
}}
>
내보내지 않을래요
</TextButton>
</div>
</BottomDiv>
<BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKey} />
<BeforeContinueBottomSheet

52
src/routes/(fullscreen)/key/generate/+page.svelte
View File

@@ -51,34 +51,32 @@
});
</script>
<svetle:head>
<svelte:head>
<title>암호 키 생성하기</title>
</svetle:head>
</svelte:head>
<div class="flex h-full flex-col justify-between overflow-auto">
<TitleDiv>
<div class="flex flex-col gap-y-2">
<h1 class="text-3xl font-bold">암호 키 생성하기</h1>
<p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
<TitleDiv>
<div class="flex flex-col gap-y-2">
<h1 class="text-3xl font-bold">암호 키 생성하기</h1>
<p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
</div>
<div class="my-4 flex flex-col gap-y-2">
<div class="mb-4">
<IconKey class="mx-auto text-7xl" />
<p class="text-center text-xl font-bold text-primary-500">왜 암호 키가 필요한가요?</p>
</div>
<div class="my-4 flex flex-col gap-y-2">
<div class="mb-4">
<IconKey class="mx-auto text-7xl" />
<p class="text-center text-xl font-bold text-primary-500">왜 암호 키가 필요한가요?</p>
</div>
<div>
{#each orders as { title, description }, i}
<Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
{/each}
</div>
<div>
{#each orders as { title, description }, i}
<Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
{/each}
</div>
</TitleDiv>
<BottomDiv>
<div class="w-full">
<Button onclick={generate}>새 암호 키 생성하기</Button>
</div>
<div class="w-fit">
<TextButton>키를 갖고 있어요</TextButton>
</div>
</BottomDiv>
</div>
</div>
</TitleDiv>
<BottomDiv>
<div class="w-full">
<Button onclick={generate}>새 암호 키 생성하기</Button>
</div>
<div class="w-fit">
<TextButton>키를 갖고 있어요</TextButton>
</div>
</BottomDiv>

7
src/routes/(main)/+layout.svelte
View File

@@ -1,12 +1,13 @@
<script lang="ts">
import { AdaptiveDiv } from "$lib/components/divs";
import BottomBar from "./BottomBar.svelte";
let { children } = $props();
</script>
<div class="flex h-dvh w-full flex-col justify-between">
<div>
<div class="flex h-screen w-full flex-col justify-between">
<AdaptiveDiv>
{@render children()}
</div>
</AdaptiveDiv>
<BottomBar />
</div>