zenn/planner.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.44 - 로그인 화면 모바일 정리

Browse Source
This commit is contained in:
zenn
2026-04-23 13:39:16 +09:00
parent 44932f9724
commit 1f2d9ddc54
3 changed files with 35 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
HANDOFF.md
View File

@@ -224,6 +224,7 @@
- Docker Compose는 프론트엔드와 백엔드를 함께 올리는 기준으로 설계하되, NAS 환경에 맞는 볼륨과 재시작 정책도 함께 고려한다.
- 플래너 본문 라벨은 더 이상 `bg-paper` 배경으로 선을 덮지 않는다. `라벨 + 오른쪽 선` 구조로 바꿔 화면과 인쇄에서 노란 배경이 튀지 않도록 정리했다.
- 날짜에 적용되는 목표가 새로 생기면 D-DAY는 기본 표시된다. 사용자가 해당 날짜에서 직접 `D-DAY 사용`을 끈 경우에만 로컬 숨김 목록에 저장해 다시 숨긴다.
- 비로그인 랜딩은 모바일에서 `카드 안 카드`처럼 보이지 않도록 기능 설명 카드를 얇은 리스트로 단순화했고, `LOGIN` / `SIGN UP` 버튼은 같은 너비와 높이로 맞췄다. 로그인/회원가입 모달도 하단 전환 영역을 별도 카드 대신 구분선 형태로 정리했다.
## 갱신 규칙

50
src/App.vue
View File

@@ -2011,51 +2011,45 @@ onBeforeUnmount(() => {
<div class="min-w-0 space-y-6" :class="isAuthenticated ? 'xl:h-full xl:overflow-hidden' : 'w-full'">
<section
v-if="!isAuthenticated"
class="scrollbar-hide print-hidden mx-auto w-full max-w-4xl rounded-[28px] border border-white/60 bg-white/65 p-6 shadow-[0_24px_80px_rgba(28,25,23,0.08)] sm:p-8"
class="scrollbar-hide print-hidden mx-auto w-full max-w-3xl rounded-[30px] border border-white/70 bg-white/72 px-5 py-7 shadow-[0_24px_80px_rgba(28,25,23,0.08)] sm:px-8 sm:py-9"
>
<div class="mx-auto flex max-w-3xl flex-col gap-6 text-center">
<div class="space-y-3">
<div class="mx-auto flex max-w-2xl flex-col gap-6 text-center">
<div>
<p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">회원 전용 플래너</p>
<h2 class="text-3xl font-semibold tracking-[-0.05em] text-stone-900 sm:text-4xl">
<h2 class="mt-3 text-3xl font-semibold tracking-[-0.05em] text-stone-900 sm:text-4xl">
10 Minute Planner
</h2>
<p class="mx-auto max-w-2xl text-sm leading-7 text-stone-600 sm:text-base">
로그인 후 나만의 10분 플래너를 작성하고,<br>날짜별 기록과 통계를 안전하게 이어가세요.
<p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-stone-600 sm:text-base">
로그인하면 날짜별 플래너, 통계, 목표를 내 계정 기준으로 이어서 사용할 수 있습니다.
</p>
</div>
<div class="grid gap-4 rounded-[28px] border border-stone-200 bg-[#fbf7f0] p-5 text-left">
<article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
<p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">ACCOUNT</p>
<p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
회원가입 후 사용자별 플래너와 통계를 분리해서 관리합니다.
</p>
</article>
<article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
<p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">CLOUD SAVE</p>
<p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
작성 내용은 날짜별로 서버에 저장되고, 다른 기기에서도 이어볼 수 있습니다.
</p>
</article>
<article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
<p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">PRINT & STATS</p>
<p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
로그인 기반 데이터로 통계와 출력 흐름을 안정적으로 맞춰갑니다.
</p>
</article>
<div class="mx-auto grid w-full max-w-xl gap-0 border-y border-stone-200 text-left">
<p class="flex items-center justify-between gap-4 border-b border-stone-200 py-3 text-sm font-semibold text-stone-700">
<span>날짜별 기록 저장</span>
<span class="text-[10px] font-bold tracking-[0.18em] text-stone-400">SAVE</span>
</p>
<p class="flex items-center justify-between gap-4 border-b border-stone-200 py-3 text-sm font-semibold text-stone-700">
<span>통계와 목표 관리</span>
<span class="text-[10px] font-bold tracking-[0.18em] text-stone-400">STATS</span>
</p>
<p class="flex items-center justify-between gap-4 py-3 text-sm font-semibold text-stone-700">
<span>출력용 다이어리 유지</span>
<span class="text-[10px] font-bold tracking-[0.18em] text-stone-400">PRINT</span>
</p>
</div>
<div class="flex flex-col items-center justify-center gap-3 sm:flex-row">
<div class="grid w-full gap-3 sm:mx-auto sm:max-w-md sm:grid-cols-2">
<button
type="button"
class="rounded-full border border-stone-300 bg-white px-6 py-3 text-xs font-bold tracking-[0.18em] text-stone-700 transition hover:border-stone-500 hover:text-stone-900"
class="h-12 w-full rounded-full border border-stone-300 bg-white px-6 text-xs font-bold tracking-[0.18em] text-stone-700 transition hover:border-stone-500 hover:text-stone-900"
@click="openAuthDialog('login')"
>
LOGIN
</button>
<button
type="button"
class="rounded-full bg-stone-900 px-6 py-3 text-xs font-bold tracking-[0.18em] text-white transition hover:bg-stone-700"
class="h-12 w-full rounded-full border border-stone-900 bg-stone-900 px-6 text-xs font-bold tracking-[0.18em] text-white transition hover:bg-stone-700"
@click="openAuthDialog('signup')"
>
SIGN UP

24
src/components/AuthDialog.vue
View File

@@ -40,17 +40,17 @@ function updateField(field, event) {
<template>
<div
v-if="open"
class="fixed inset-0 z-50 flex items-center justify-center bg-stone-900/45 px-4 py-8 backdrop-blur-sm"
class="fixed inset-0 z-50 flex items-center justify-center bg-stone-900/45 px-4 py-6 backdrop-blur-sm"
>
<div class="w-full max-w-md rounded-[28px] border border-white/60 bg-[#f6f1e8] p-6 shadow-2xl sm:p-7">
<div class="w-full max-w-[420px] rounded-[26px] border border-white/70 bg-[#f7f2ea] p-5 shadow-[0_24px_80px_rgba(28,25,23,0.2)] sm:p-6">
<div class="flex items-start justify-between gap-4">
<div class="space-y-2">
<p class="text-[11px] font-bold uppercase tracking-[0.24em] text-stone-500">계정 시작</p>
<h2 class="text-2xl font-semibold tracking-[-0.04em] text-stone-900">
<div>
<p class="text-[10px] font-bold uppercase tracking-[0.24em] text-stone-500">10 Minute Planner</p>
<h2 class="mt-2 text-2xl font-semibold tracking-[-0.04em] text-stone-900">
{{ mode === 'login' ? '로그인' : '회원가입' }}
</h2>
<p class="text-sm leading-6 text-stone-600">
{{ mode === 'login' ? '작성하던 플래너를 이어서 기록하세요.' : '나만의 플래너와 통계를 안전하게 보관할 계정을 만듭니다.' }}
<p class="mt-2 text-sm leading-6 text-stone-600">
{{ mode === 'login' ? '내 플래너를 이어서 열어요.' : '기록을 저장할 계정을 만들어요.' }}
</p>
</div>
<button
@@ -68,7 +68,7 @@ function updateField(field, event) {
<input
:value="form.nickname"
type="text"
class="w-full rounded-2xl border border-stone-300 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
class="w-full rounded-2xl border border-stone-300 bg-white/90 px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
placeholder="닉네임을 입력해 주세요."
@input="updateField('nickname', $event)"
/>
@@ -81,7 +81,7 @@ function updateField(field, event) {
<input
:value="form.email"
:type="mode === 'login' ? 'text' : 'email'"
class="w-full rounded-2xl border border-stone-300 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
class="w-full rounded-2xl border border-stone-300 bg-white/90 px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
:placeholder="mode === 'login' ? '이메일 또는 아이디를 입력해 주세요.' : 'you@example.com'"
@input="updateField('email', $event)"
/>
@@ -92,7 +92,7 @@ function updateField(field, event) {
<input
:value="form.password"
type="password"
class="w-full rounded-2xl border border-stone-300 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
class="w-full rounded-2xl border border-stone-300 bg-white/90 px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-500"
placeholder="8자 이상 입력해 주세요."
@input="updateField('password', $event)"
/>
@@ -114,13 +114,13 @@ function updateField(field, event) {
</button>
</form>
<div class="mt-5 flex items-center justify-between gap-3 rounded-2xl border border-stone-300 bg-white/70 px-4 py-3">
<div class="mt-5 flex items-center justify-center gap-2 border-t border-stone-300/70 pt-4">
<p class="text-sm font-semibold text-stone-600">
{{ mode === 'login' ? '아직 계정이 없나요?' : '이미 계정이 있나요?' }}
</p>
<button
type="button"
class="text-xs font-bold tracking-[0.16em] text-stone-900 underline underline-offset-4"
class="text-xs font-bold tracking-[0.14em] text-stone-900 underline underline-offset-4"
@click="emit('switch-mode', mode === 'login' ? 'signup' : 'login')"
>
{{ mode === 'login' ? '회원가입' : '로그인' }}