feat: 가계부·게시판 프론트엔드 구현 + Slim Budget 브랜딩/모바일 대응

- 가계부: 대시보드(예산 대비 지출·분류별 파이·기간별 막대·순자산 추이),
  내역(검색·필터·태그), 계좌(은행/카드/대출/투자), 예산, 분류, 정기 거래,
  태그, 투자 포트폴리오(종목·매수/매도·평가손익)
- 게시판: 목록/상세/작성(마크다운)/댓글/태그/열람제한
- 공통: 인증(Bearer 토큰·401 처리), 모바일 반응형(드로어·아이콘 버튼),
  Slim Budget 브랜딩(로고/타이틀/푸터), 홈 대시보드 자리
- 문서: docs/FRONTEND.md

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/ui/IconBtn.vue

@@ -0,0 +1,116 @@
+<script setup>
+// 공통 아이콘 버튼. 텍스트 대신 아이콘으로 액션 표기 (모바일 대응).
+// 사용: <IconBtn icon="edit" title="수정" variant="default" @click="..." />
+import { computed } from 'vue'
+
+const props = defineProps({
+  icon: { type: String, required: true },
+  title: { type: String, default: '' },
+  variant: { type: String, default: 'default' }, // default | primary | danger | ghost | buy | sell
+  size: { type: String, default: 'md' }, // sm | md
+  disabled: { type: Boolean, default: false },
+  type: { type: String, default: 'button' }, // button | submit
+})
+
+// feather 스타일 24x24 stroke 아이콘 path 모음
+const ICONS = {
+  plus: ['M12 5v14', 'M5 12h14'],
+  minus: ['M5 12h14'],
+  edit: ['M12 20h9', 'M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'],
+  trash: ['M3 6h18', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', 'M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'],
+  check: ['M20 6L9 17l-5-5'],
+  close: ['M18 6L6 18', 'M6 6l12 12'],
+  search: ['M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', 'M21 21l-4.35-4.35'],
+  chevronLeft: ['M15 18l-6-6 6-6'],
+  chevronRight: ['M9 18l6-6-6-6'],
+  chevronDown: ['M6 9l6 6 6-6'],
+  refresh: ['M23 4v6h-6', 'M1 20v-6h6', 'M3.51 9a9 9 0 0 1 14.85-3.36L23 10', 'M1 14l4.64 4.36A9 9 0 0 0 20.49 15'],
+  filter: ['M22 3H2l8 9.46V19l4 2v-8.54L22 3z'],
+  menu: ['M3 12h18', 'M3 6h18', 'M3 18h18'],
+  back: ['M19 12H5', 'M12 19l-7-7 7-7'],
+  logout: ['M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4', 'M16 17l5-5-5-5', 'M21 12H9'],
+  login: ['M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4', 'M10 17l5-5-5-5', 'M15 12H3'],
+  cart: ['M9 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M20 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'],
+  send: ['M22 2L11 13', 'M22 2l-7 20-4-9-9-4 20-7z'],
+  save: ['M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z', 'M17 21v-8H7v8', 'M7 3v5h8'],
+}
+
+const paths = computed(() => ICONS[props.icon] || ICONS.plus)
+</script>
+
+<template>
+  <button
+    :type="type"
+    class="icon-btn"
+    :class="[`v-${variant}`, `s-${size}`]"
+    :title="title"
+    :aria-label="title"
+    :disabled="disabled"
+  >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path v-for="(d, i) in paths" :key="i" :d="d" />
+    </svg>
+    <span v-if="$slots.default" class="icon-label"><slot /></span>
+  </button>
+</template>
+
+<style scoped>
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  padding: 0.4rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-background-soft);
+  color: var(--color-text);
+  cursor: pointer;
+  line-height: 0;
+}
+.icon-btn.s-md svg {
+  width: 18px;
+  height: 18px;
+}
+.icon-btn.s-sm {
+  padding: 0.3rem;
+}
+.icon-btn.s-sm svg {
+  width: 15px;
+  height: 15px;
+}
+.icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.icon-btn:hover:not(:disabled) {
+  border-color: var(--color-border-hover);
+}
+.icon-label {
+  font-size: 0.85rem;
+  line-height: 1;
+}
+.icon-btn.v-primary {
+  border-color: hsla(160, 100%, 37%, 1);
+  color: hsla(160, 100%, 37%, 1);
+}
+.icon-btn.v-danger {
+  border-color: #c0392b;
+  color: #c0392b;
+}
+.icon-btn.v-buy {
+  border-color: #2e7d32;
+  color: #2e7d32;
+}
+.icon-btn.v-sell {
+  border-color: #c0392b;
+  color: #c0392b;
+}
+.icon-btn.v-ghost {
+  border-color: transparent;
+  background: transparent;
+}
+.icon-btn.v-ghost:hover:not(:disabled) {
+  background: var(--color-background-mute);
+}
+</style>