설정과 모바일 동선 정리

This commit is contained in:
2026-04-07 16:19:01 +09:00
parent 3163a671de
commit 76de4b940a
13 changed files with 91 additions and 75 deletions

View File

@@ -71,7 +71,7 @@ watch(() => route.query.q, loadHomeFeed)
<div class="pageHead__main">
<div class="pageHead__eyebrow">Feed</div>
<h1 class="pageHead__title">홈</h1>
<div class="pageHead__desc">사용자가 공개한 티어표를 최신순으로 살펴보고, 추천 티어표는 상단에서 바로 볼 수 있어요.</div>
<div class="pageHead__desc">다른 사용자들이 공개한 티어표를 살펴볼 수 있습니다.</div>
<div v-if="query" class="pageHead__searchState">"{{ query }}"에 맞는 공개 티어표만 보고 있어요.</div>
</div>
</section>

View File

@@ -80,7 +80,7 @@ function openList(t) {
<div class="pageHead__main">
<div class="pageHead__eyebrow">Tier Lists</div>
<h2 class="pageHead__title">나의 티어표</h2>
<div class="pageHead__desc">직접 저장한 티어표를 같은 카드 레이아웃으로 다시 열고 정리할 수 있어요.</div>
<div class="pageHead__desc">직접 저장한 티어표를 관리할 수 있는 페이지입니다.</div>
</div>
</section>

View File

@@ -308,7 +308,7 @@ async function logout() {
<div class="pageHead__main">
<div class="pageHead__eyebrow">Account</div>
<h2 class="pageHead__title">설정</h2>
<div class="pageHead__desc">수시로 바꾸지 않는 정보는 요약해서 보여주고, 필요할 때만 모달로 열어 바꾸는 흐름으로 정리했어요.</div>
<div class="pageHead__desc">닉네임은 변경은 쿨타임이 있으니 신중하게 설정해주세요.</div>
</div>
</header>
@@ -368,12 +368,10 @@ async function logout() {
</div>
<div class="settingsSummaryItem">
<div class="settingsSummaryItem__label">이메일</div>
<div class="settingsSummaryItem__label">ID (이메일)</div>
<div class="settingsSummaryItem__valueRow">
<div class="settingsSummaryItem__value">{{ authEmail }}</div>
<span class="settingsSummaryItem__status">읽기 전용</span>
</div>
<div class="settingsSummaryItem__meta">현재 로그인에 사용하는 계정 이메일이며, 설정 화면에서는 변경할 수 없습니다.</div>
</div>
</div>
@@ -381,7 +379,7 @@ async function logout() {
</div>
</article>
<article class="settingsThemeCard">
<article class="settingsThemeCard settingsThemeCard--compact">
<div class="settingsThemeCard__eyebrow">Security</div>
<div class="settingsThemeCard__title">보안 설정</div>
<div class="settingsCompactRow">
@@ -395,7 +393,7 @@ async function logout() {
</div>
</article>
<article class="settingsThemeCard">
<article class="settingsThemeCard settingsThemeCard--compact">
<div class="settingsThemeCard__eyebrow">Session</div>
<div class="settingsThemeCard__title">계정 상태</div>
<div class="settingsCompactList">
@@ -537,6 +535,10 @@ async function logout() {
grid-column: 1 / -1;
}
.settingsThemeCard--compact {
grid-template-rows: auto auto minmax(0, 1fr);
}
.settingsThemeCard__eyebrow {
font-size: 11px;
letter-spacing: 0.12em;
@@ -691,17 +693,6 @@ async function logout() {
line-height: 1.6;
}
.settingsSummaryItem__status {
flex-shrink: 0;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--theme-border);
background: var(--theme-pill-bg);
color: var(--theme-text-soft);
font-size: 12px;
font-weight: 700;
}
.settingsActionRow {
display: flex;
flex-wrap: wrap;
@@ -712,6 +703,7 @@ async function logout() {
.settingsCompactList {
display: grid;
gap: 10px;
height: 100%;
}
.settingsCompactRow {
@@ -719,6 +711,7 @@ async function logout() {
justify-content: space-between;
gap: 16px;
align-items: center;
min-height: 100%;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid var(--theme-border);

View File

@@ -83,7 +83,7 @@ function templateThumbUrl(template) {
<div class="pageHead__main">
<div class="pageHead__eyebrow">Topic</div>
<h1 class="pageHead__title">템플릿</h1>
<p class="pageHead__desc">자주 쓰는 주제 템플릿을 빠르게 고르고, 필요하면 바로 커스텀 티어표를 시작할 수 있어요.</p>
<p class="pageHead__desc">미리 설정된 템플릿을 이용하여 쉽고 빠르게 만들 수 있습니다.</p>
<p v-if="query" class="pageHead__searchState">"{{ query }}"에 맞는 주제 템플릿만 보고 있어요.</p>
</div>
</section>

View File

@@ -367,11 +367,6 @@ function closeItemContextMenu() {
}
}
function scrollWorkspaceBodyToTop() {
const workspaceBody = document.querySelector('.workspaceBody')
workspaceBody?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
function updateEditorSidebarMaxHeight() {
if (typeof window === 'undefined' || !sidebarEl.value) return
const bottomGap = 14
@@ -1104,6 +1099,11 @@ function confirmNavigationDiscard() {
router.push(nextPath)
}
function openTemplateTopic() {
if (!templateId.value) return
requestEditorNavigation(topicPath(templateId.value))
}
function openSourceTierList() {
if (!sourceTierListId.value) return
requestEditorNavigation(editorPath(templateId.value, sourceTierListId.value))
@@ -1535,7 +1535,7 @@ onUnmounted(() => {
<div v-if="isNavigationConfirmModalOpen" class="modalOverlay" @click.self="closeNavigationConfirmModal">
<div class="modalCard" role="dialog" aria-modal="true" aria-labelledby="navigationConfirmTitle">
<div id="navigationConfirmTitle" class="modalCard__title">원본 티어표로 이동</div>
<div id="navigationConfirmTitle" class="modalCard__title">다른 화면으로 이동</div>
<div class="modalCard__desc">
아직 저장하지 않은 수정 내용이 있어요. 이대로 이동하면 현재 변경 내용은 사라집니다.
</div>
@@ -1656,9 +1656,9 @@ onUnmounted(() => {
<button
class="editorMain__title editorMain__titleButton"
type="button"
title="본문을 화면 위로 이동"
@click="scrollWorkspaceBodyToTop"
@keydown.space.prevent="scrollWorkspaceBodyToTop"
title="이 템플릿 화면으로 이동"
@click="openTemplateTopic"
@keydown.space.prevent="openTemplateTopic"
>
{{ templateName || templateId }}
</button>