fix: 전 화면 본문 폭 통일 + 화면 내 뒤로가기 버튼 제거
CI / build (push) Failing after 13m55s

- 본문 폭: --page-max(760px) 변수 + .layout-body>* 전역 규칙으로 일관화
  (각 뷰가 제각각 두던 root max-width 대체)
- 화면 내 '뒤로가기/가계부로/목록' 버튼 제거(하단 내비 뒤로가기는 유지)
  대상: 계좌/분류/예산/고정지출/태그/기본분류/게시글상세/계정정보
- BoardDetail actions 우측 정렬, AccountInfo 미사용 goBack 제거

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ByungCheol
2026-06-27 22:26:25 +09:00
parent 75228cbb64
commit b737720d29
10 changed files with 11 additions and 20 deletions
+2
View File
@@ -34,6 +34,8 @@
--color-text: var(--vt-c-text-light-1); --color-text: var(--vt-c-text-light-1);
--section-gap: 160px; --section-gap: 160px;
/* 모든 화면 본문 공통 폭 (화면별 제각각이던 max-width 를 일관되게) */
--page-max: 760px;
} }
/* 다크 변수 묶음 — 명시적 다크(data-theme=dark)와 시스템 다크에서 공통 사용 */ /* 다크 변수 묶음 — 명시적 다크(data-theme=dark)와 시스템 다크에서 공통 사용 */
+8
View File
@@ -4,6 +4,14 @@
font-weight: normal; font-weight: normal;
} }
/* 모든 화면 본문 폭 통일 — 각 뷰가 제각각 두던 root max-width 를 한 곳에서 일관되게.
(본문 직계 자식 = 각 화면 루트 컨테이너) scoped 스타일을 덮기 위해 !important 사용. */
.layout-body > * {
max-width: var(--page-max) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 폼 요소 폰트 상속(표준 리셋) — 네이티브 input/select/textarea 가 서로 폰트·높이 달라 /* 폼 요소 폰트 상속(표준 리셋) — 네이티브 input/select/textarea 가 서로 폰트·높이 달라
보이던 이질감 해소. (개별 화면 scoped 스타일이 더 구체적이면 그쪽이 우선) */ 보이던 이질감 해소. (개별 화면 scoped 스타일이 더 구체적이면 그쪽이 우선) */
input, input,
-1
View File
@@ -102,7 +102,6 @@ onBeforeUnmount(() => sortable?.destroy())
<section class="tag-admin"> <section class="tag-admin">
<header class="head"> <header class="head">
<h1>가계부 태그 관리</h1> <h1>가계부 태그 관리</h1>
<IconBtn icon="back" title="가계부로" @click="router.push('/account')" />
</header> </header>
<p class="hint">내가 등록한 태그는 나의 가계부 내역에서만 사용됩니다.</p> <p class="hint">내가 등록한 태그는 나의 가계부 내역에서만 사용됩니다.</p>
-1
View File
@@ -312,7 +312,6 @@ onBeforeUnmount(() => sortable?.destroy())
<section class="wallet"> <section class="wallet">
<header class="head"> <header class="head">
<h1>계좌 관리</h1> <h1>계좌 관리</h1>
<IconBtn icon="back" title="가계부로" @click="router.push('/account')" />
</header> </header>
<!-- 순자산 요약 --> <!-- 순자산 요약 -->
-1
View File
@@ -247,7 +247,6 @@ onMounted(() => {
<header class="head"> <header class="head">
<h1>예산 설정</h1> <h1>예산 설정</h1>
<div class="head-actions"> <div class="head-actions">
<IconBtn icon="back" title="가계부로" @click="router.push('/account')" />
<IconBtn icon="plus" title="예산 추가" variant="primary" @click="openCreate" /> <IconBtn icon="plus" title="예산 추가" variant="primary" @click="openCreate" />
</div> </div>
</header> </header>
-1
View File
@@ -188,7 +188,6 @@ onBeforeUnmount(destroySortables)
<h1>분류 관리</h1> <h1>분류 관리</h1>
<div class="head-actions"> <div class="head-actions">
<button type="button" class="text-btn" @click="importDefaults">기본 분류 불러오기</button> <button type="button" class="text-btn" @click="importDefaults">기본 분류 불러오기</button>
<IconBtn icon="back" title="가계부로" @click="router.push('/account')" />
</div> </div>
</header> </header>
<p class="hint">내역·예산에서 선택할 분류를 관리합니다. <b>대분류 아래 소분류</b> 묶을 있고(2단계), 예산·통계는 소분류 기준입니다. 이름을 바꾸면 기존 내역·예산에도 반영됩니다.</p> <p class="hint">내역·예산에서 선택할 분류를 관리합니다. <b>대분류 아래 소분류</b> 묶을 있고(2단계), 예산·통계는 소분류 기준입니다. 이름을 바꾸면 기존 내역·예산에도 반영됩니다.</p>
-1
View File
@@ -244,7 +244,6 @@ onMounted(load)
<h1>고정 지출</h1> <h1>고정 지출</h1>
<div class="head-actions"> <div class="head-actions">
<IconBtn icon="refresh" title="지금 반영" @click="runNow" /> <IconBtn icon="refresh" title="지금 반영" @click="runNow" />
<IconBtn icon="back" title="가계부로" @click="router.push('/account')" />
<IconBtn icon="plus" title="고정 지출 추가" variant="primary" @click="openCreate" /> <IconBtn icon="plus" title="고정 지출 추가" variant="primary" @click="openCreate" />
</div> </div>
</header> </header>
-3
View File
@@ -152,9 +152,6 @@ onBeforeUnmount(destroySortables)
<section class="cat"> <section class="cat">
<header class="head"> <header class="head">
<h1>기본 분류 관리</h1> <h1>기본 분류 관리</h1>
<div class="head-actions">
<IconBtn icon="back" title="뒤로" @click="router.back()" />
</div>
</header> </header>
<p class="hint"> <p class="hint">
전체 사용자 공용 <b>기본 분류</b> 템플릿입니다. 사용자가 분류 관리에서 <b>기본 분류 불러오기</b> 자기 분류에 복사해 씁니다. 전체 사용자 공용 <b>기본 분류</b> 템플릿입니다. 사용자가 분류 관리에서 <b>기본 분류 불러오기</b> 자기 분류에 복사해 씁니다.
+1 -2
View File
@@ -151,7 +151,6 @@ onMounted(load)
</div> </div>
<div class="actions"> <div class="actions">
<IconBtn icon="back" title="목록" @click="router.push(`/board/${category}`)" />
<div class="right-actions"> <div class="right-actions">
<!-- 관리자 공지 설정/해제 (커뮤니티) --> <!-- 관리자 공지 설정/해제 (커뮤니티) -->
<button v-if="isAdmin && category === 'community' && !post.notice" type="button" class="notice-btn" @click="setNoticePost(true)">공지 등록</button> <button v-if="isAdmin && category === 'community' && !post.notice" type="button" class="notice-btn" @click="setNoticePost(true)">공지 등록</button>
@@ -296,7 +295,7 @@ button.notice-btn {
} }
.actions { .actions {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
padding-top: 1rem; padding-top: 1rem;
} }
-10
View File
@@ -21,20 +21,10 @@ const roleLabel = computed(() => (u.value.role === 'ADMIN' ? '관리자' : '일
function goEdit() { function goEdit() {
router.push('/settings/account/edit') router.push('/settings/account/edit')
} }
function goBack() {
router.push('/settings')
}
</script> </script>
<template> <template>
<div class="account-info"> <div class="account-info">
<button type="button" class="back" @click="goBack">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 12H5" /><path d="M12 19l-7-7 7-7" />
</svg>
<span>설정</span>
</button>
<h1 class="page-title">계정정보</h1> <h1 class="page-title">계정정보</h1>
<section class="card"> <section class="card">