Refine assets responsive layout
This commit is contained in:
@@ -70,3 +70,4 @@
|
||||
- 거래 입력/수정의 수입/지출 타입 변경 시 카테고리 선택을 초기화하고 저장/삭제/복사 실패 토스트를 추가했다.
|
||||
- 거래 입력/수정의 금액 입력을 기본 숫자 input에서 숫자만 정리하는 텍스트 입력으로 바꾸고 천 단위 표시를 적용했다.
|
||||
- 통계 화면의 카테고리 집계를 최종 카테고리 기준으로 바꾸고 목록 높이와 보조 정보를 더 촘촘하게 정리했다.
|
||||
- 자산 화면을 넓은 화면에서 카드 그리드와 상세 2열 구조로 보이도록 조정했다.
|
||||
|
||||
@@ -37,44 +37,49 @@
|
||||
</div>
|
||||
</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
|
||||
v-for="asset in assets"
|
||||
:key="asset.id"
|
||||
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"
|
||||
>
|
||||
<span>
|
||||
<span class="min-w-0">
|
||||
<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>
|
||||
<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>
|
||||
<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 v-else>
|
||||
<section class="border-b border-line bg-white px-4 py-4">
|
||||
<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 md:rounded-md md:border md:border-line md:shadow-sm">
|
||||
<p class="text-sm font-semibold text-muted">현재 표시 잔액</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>
|
||||
<p class="text-sm text-muted">입금</p>
|
||||
<div class="mt-5 grid grid-cols-3 gap-2 text-center md:grid-cols-1 md:text-left">
|
||||
<div class="md:border-t md:border-line md:pt-3">
|
||||
<p class="text-xs font-semibold text-muted">입금</p>
|
||||
<p class="mt-1 font-bold text-brand-700">{{ formatWon(assetSummary.income) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-muted">출금</p>
|
||||
<div class="md:border-t md:border-line md:pt-3">
|
||||
<p class="text-xs font-semibold text-muted">출금</p>
|
||||
<p class="mt-1 font-bold text-red-600">{{ formatWon(assetSummary.expense) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-muted">합계</p>
|
||||
<div class="md:border-t md:border-line md:pt-3">
|
||||
<p class="text-xs font-semibold text-muted">합계</p>
|
||||
<p class="mt-1 font-bold">{{ formatWon(assetSummary.diff) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="flex items-center justify-between px-4 py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user