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

Refine assets responsive layout

Browse Source
This commit is contained in:
zenn
2026-08-14 10:11:43 +09:00
parent 02bbf8427d
commit d6d768ad2c
3 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/changelog.md
View File

@@ -70,3 +70,4 @@
- 거래 입력/수정의 수입/지출 타입 변경 시 카테고리 선택을 초기화하고 저장/삭제/복사 실패 토스트를 추가했다. - 거래 입력/수정의 수입/지출 타입 변경 시 카테고리 선택을 초기화하고 저장/삭제/복사 실패 토스트를 추가했다.
- 거래 입력/수정의 금액 입력을 기본 숫자 input에서 숫자만 정리하는 텍스트 입력으로 바꾸고 천 단위 표시를 적용했다. - 거래 입력/수정의 금액 입력을 기본 숫자 input에서 숫자만 정리하는 텍스트 입력으로 바꾸고 천 단위 표시를 적용했다.
- 통계 화면의 카테고리 집계를 최종 카테고리 기준으로 바꾸고 목록 높이와 보조 정보를 더 촘촘하게 정리했다. - 통계 화면의 카테고리 집계를 최종 카테고리 기준으로 바꾸고 목록 높이와 보조 정보를 더 촘촘하게 정리했다.
- 자산 화면을 넓은 화면에서 카드 그리드와 상세 2열 구조로 보이도록 조정했다.

35
pages/assets.vue
View File

@@ -37,44 +37,49 @@
</div> </div>
</header> </header>
<div v-if="!selectedAsset" class="divide-y divide-line border-b border-line bg-white"> <div
v-if="!selectedAsset"
class="divide-y divide-line border-b border-line bg-white md:grid md:grid-cols-2 md:gap-3 md:divide-y-0 md:border-0 md:bg-transparent md:p-5 xl:grid-cols-3"
>
<button <button
v-for="asset in assets" v-for="asset in assets"
:key="asset.id" :key="asset.id"
type="button" type="button"
class="flex w-full items-center justify-between px-4 py-4 text-left active:bg-paper" class="flex w-full items-center justify-between px-4 py-4 text-left active:bg-paper md:min-h-24 md:rounded-md md:border md:border-line md:bg-white md:shadow-sm"
@click="selectedAssetId = asset.id" @click="selectedAssetId = asset.id"
> >
<span> <span class="min-w-0">
<span class="block text-base font-semibold text-ink">{{ asset.name }}</span> <span class="block text-base font-semibold text-ink">{{ asset.name }}</span>
<span class="mt-1 block text-xs text-muted">{{ asset.balanceType === 'cumulative' ? '계속 누적' : `${displayMonth}만 계산` }}</span> <span class="mt-1 block text-xs text-muted">{{ asset.balanceType === 'cumulative' ? '계속 누적' : `${displayMonth}만 계산` }}</span>
</span> </span>
<span class="text-base font-bold">{{ formatWon(asset.balance || 0) }}</span> <span class="shrink-0 text-base font-bold">{{ formatWon(asset.balance || 0) }}</span>
</button> </button>
<p v-if="!assets.length" class="px-4 py-12 text-center text-muted">등록된 자산이 없습니다.</p> <p v-if="!assets.length" class="px-4 py-12 text-center text-muted md:col-span-full md:rounded-md md:border md:border-line md:bg-white">
등록된 자산이 없습니다.
</p>
</div> </div>
<div v-else> <div v-else class="md:grid md:grid-cols-[20rem_1fr] md:gap-4 md:p-5">
<section class="border-b border-line bg-white px-4 py-4"> <section class="border-b border-line bg-white px-4 py-4 md:rounded-md md:border md:border-line md:shadow-sm">
<p class="text-sm font-semibold text-muted">현재 표시 잔액</p> <p class="text-sm font-semibold text-muted">현재 표시 잔액</p>
<p class="mt-1 text-2xl font-bold">{{ formatWon(selectedAsset.balance || 0) }}</p> <p class="mt-1 text-2xl font-bold">{{ formatWon(selectedAsset.balance || 0) }}</p>
<div class="mt-5 grid grid-cols-3 text-center"> <div class="mt-5 grid grid-cols-3 gap-2 text-center md:grid-cols-1 md:text-left">
<div> <div class="md:border-t md:border-line md:pt-3">
<p class="text-sm text-muted">입금</p> <p class="text-xs font-semibold text-muted">입금</p>
<p class="mt-1 font-bold text-brand-700">{{ formatWon(assetSummary.income) }}</p> <p class="mt-1 font-bold text-brand-700">{{ formatWon(assetSummary.income) }}</p>
</div> </div>
<div> <div class="md:border-t md:border-line md:pt-3">
<p class="text-sm text-muted">출금</p> <p class="text-xs font-semibold text-muted">출금</p>
<p class="mt-1 font-bold text-red-600">{{ formatWon(assetSummary.expense) }}</p> <p class="mt-1 font-bold text-red-600">{{ formatWon(assetSummary.expense) }}</p>
</div> </div>
<div> <div class="md:border-t md:border-line md:pt-3">
<p class="text-sm text-muted">합계</p> <p class="text-xs font-semibold text-muted">합계</p>
<p class="mt-1 font-bold">{{ formatWon(assetSummary.diff) }}</p> <p class="mt-1 font-bold">{{ formatWon(assetSummary.diff) }}</p>
</div> </div>
</div> </div>
</section> </section>
<div class="divide-y divide-line bg-white"> <div class="divide-y divide-line bg-white md:overflow-hidden md:rounded-md md:border md:border-line md:shadow-sm">
<section v-for="group in groupedTransactions" :key="group.date" class="py-2"> <section v-for="group in groupedTransactions" :key="group.date" class="py-2">
<div class="flex items-center justify-between px-4 py-2"> <div class="flex items-center justify-between px-4 py-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">

1
todo.md
View File

@@ -26,7 +26,6 @@
## 5. 자산 ## 5. 자산
- 자산 목록 화면의 PC/모바일 레이아웃을 다듬는다.
- 자산 상세 화면의 월 이동 헤더를 공통 구조에 맞춘다. - 자산 상세 화면의 월 이동 헤더를 공통 구조에 맞춘다.
- 자산 상세에서 일별/월별/연별 보기 전환을 구현한다. - 자산 상세에서 일별/월별/연별 보기 전환을 구현한다.