레이아웃 수정

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

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

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>