kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(AGENTS): add page footer exclusion policy - consolidate controls to header/command-bar

Browse Source 
Policy: No footer sections in PageLayout. All footer functionality must move to:
  • Header actions slot (Help, AI Suggest, etc.)
  • Command bar (Save, Reset, Approve buttons)
  • Summary area (Status, watermark, owner info)

Rationale:
  ✓ Single-screen principle: all interactive controls in initial viewport
  ✓ Mobile UX: bottom footer buttons are hard to reach
  ✓ Information density: header/command-bar conveys status
  ✓ Eliminates wasted ~48px footer space

Example: Move button actions from <template #footer> to <template #commandBar>

Reference: Session 2026-08-16, responsive design standardization

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-08-16 00:22:39 +09:00
parent 66d0788cfa
commit 2c934f866c
1 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+31
View File
@@ -260,6 +260,37 @@ pnpm dev
5. **Grid layouts:** `align-items: start;` (NOT center/stretch) to prevent column stretching at different heights
6. **Max-width constraint:** Wrap pages in `.page-wrapper { max-width: var(--ks-content-max); margin: 0 auto; }` to prevent 2560px+ distortion
#### Page Structure Rule: NO Page Footers
**CRITICAL:** Footer sections must NOT exist in PageLayout. All footer functionality (buttons, status, actions) must be moved to:
- **Primary actions:** `<template #actions>` (header right side) — e.g., Help, AI Suggest
- **Command bar:** `<template #commandBar>` — e.g., Save, Reset, Approve buttons
- **Status info:** `<template #summary>` — e.g., Watermark, Owner, System status
**Rationale:**
- Footers waste viewport space at bottom (max ~48px with padding)
- Single-screen principle: all interactive controls should be in view without scrolling
- Mobile UX: footer buttons are hard to reach (thumb-friendly buttons are top/sides)
- Information density: header/command-bar can convey status without extra rows
**Example Migration:**
```vue
<!-- ❌ DON'T: Use footer -->
<PageLayout title="Market Data Import">
<template #footer>
<button @click="reset">초기화</button>
<button @click="schedule">수집 예약</button>
</template>
</PageLayout>
<!-- ✅ DO: Move to command bar -->
<PageLayout title="Market Data Import">
<template #commandBar>
<button @click="reset">초기화</button>
<button @click="schedule">수집 예약</button>
</template>
</PageLayout>
```
#### Height Propagation Chain (Single-Screen Principle)
```
PageLayout (.ks-page__content)