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

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

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

src/views/UsersView.vue

@@ -2,6 +2,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useUserStore } from '@/stores/user'
+import IconBtn from '@/components/ui/IconBtn.vue'
 
 const userStore = useUserStore()
 const { users, loading, error } = storeToRefs(userStore)
@@ -58,14 +59,12 @@ function formatDate(value) {
     <form class="user-form" @submit.prevent="handleSubmit">
       <input v-model="form.name" type="text" placeholder="이름" :disabled="submitting" />
       <input v-model="form.email" type="email" placeholder="이메일" :disabled="submitting" />
-      <button type="submit" :disabled="submitting">
-        {{ submitting ? '등록 중...' : '추가' }}
-      </button>
+      <IconBtn icon="plus" title="추가" variant="primary" type="submit" :disabled="submitting" />
     </form>
     <p v-if="formError" class="msg error">{{ formError }}</p>
 
     <div class="status">
-      <button type="button" :disabled="loading" @click="userStore.fetchUsers()">새로고침</button>
+      <IconBtn icon="refresh" title="새로고침" size="sm" :disabled="loading" @click="userStore.fetchUsers()" />
       <span v-if="loading">불러오는 중...</span>
       <span v-else>총 {{ users.length }}명</span>
     </div>
@@ -88,7 +87,7 @@ function formatDate(value) {
           <td>{{ user.email }}</td>
           <td>{{ formatDate(user.createdAt) }}</td>
           <td>
-            <button type="button" class="danger" @click="handleRemove(user)">삭제</button>
+            <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="handleRemove(user)" />
           </td>
         </tr>
       </tbody>
@@ -173,4 +172,52 @@ button.danger:hover {
 .msg.error {
   color: #c0392b;
 }
+
+@media (max-width: 768px) {
+  .users {
+    padding: 1rem;
+    max-width: 100%;
+  }
+  .user-table thead {
+    display: none;
+  }
+  .user-table,
+  .user-table tbody,
+  .user-table tr,
+  .user-table td {
+    display: block;
+  }
+  .user-table tr {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: 0.6rem;
+    row-gap: 0.15rem;
+    padding: 0.6rem 0.1rem;
+    border-bottom: 1px solid var(--color-border);
+  }
+  .user-table td {
+    border: 0;
+    padding: 0;
+    font-size: 0.85rem;
+  }
+  .user-table td:nth-child(1)::before {
+    content: '#';
+  }
+  .user-table td:nth-child(2) {
+    font-weight: 600;
+    font-size: 0.95rem;
+  }
+  .user-table td:nth-child(3) {
+    width: 100%;
+    opacity: 0.75;
+    font-size: 0.8rem;
+  }
+  .user-table td:nth-child(4) {
+    display: none; /* 생성일은 모바일에서 숨김 */
+  }
+  .user-table td:nth-child(5) {
+    margin-left: auto;
+  }
+}
 </style>