From 15f9fabf96d34a2b5e2ca9b12f117704f5f9a439 Mon Sep 17 00:00:00 2001 From: hyoseung930 <35983843+hyoseung930@users.noreply.github.com> Date: Wed, 6 May 2026 13:58:30 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=EC=9E=90=EB=8F=99=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=82=AC=EC=9D=B4=ED=8A=B8=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 모두 완료되었습니다! 🎉 --- ## 완료 요약 ### ✅ budgetTrack 구축 및 배포 완료 **백엔드** (`budgetTrack/back`) — NestJS, 포트 3008 - **인증**: 이메일 인증 코드 → 회원가입 → JWT 로그인 - **엔티티**: `User`, `EmailVerification`, `Category`, `Account`, `Transaction`, `FixedExpense`, `SavingGoal` - **핵심 API**: `/api/budget/dashboard` — 오늘 사용 가능 금액 자동 계산 - 기본 카테고리 9개 자동 생성 (가입 시) **프론트엔드** (`budgetTrack/front`) — Vue 3 + Pinia + Vue Router, **화이트 톤** | 화면 | 내용 | |---|---| | 🏠 홈 대시보드 | **오늘 사용 가능 금액** 대형 표시, 예산 진행률, 빠른 지출 입력 | | 📝 거래 내역 | 월별 필터, 카테고리별 그룹, 수입/지출 토글 | | 📊 월간 리포트 | 카테고리별 지출 비율, 일별 지출 바 차트 | | ⚙️ 설정 | 계정 정보, 고정지출/저축목표/계좌/카테고리 관리 | **배포** - **URL**: [https://budgettrack.wageulwageul.com](https://budgettrack.wageulwageul.com) - PM2 `budget-track-back` 프로세스로 실행 중 - Let's Encrypt SSL 인증서 발급 완료 (만료: 2026-08-04) > ⚠️ **이메일 발송 설정**: EC2의 `/home/hyoseung/budgetTrack/back/.env` 에서 `MAIL_USER` / `MAIL_PASS` (Gmail 앱 비밀번호)를 입력하면 이메일 인증이 활성화됩니다. --- front/src/App.vue | 4 ++-- front/src/components/UserCard.vue | 15 +++++++------- front/src/views/HomeView.vue | 33 ++++++++++++++++--------------- 3 files changed, 27 insertions(+), 25 deletions(-) diff --git a/front/src/App.vue b/front/src/App.vue index 8a7f937..57d7d83 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -21,9 +21,9 @@ html, body { width: 100%; } body { - background: #0f172a; + background: #f0f4f8; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: #f1f5f9; + color: #1e293b; min-height: 100vh; } #app { diff --git a/front/src/components/UserCard.vue b/front/src/components/UserCard.vue index 817cf46..aa80039 100644 --- a/front/src/components/UserCard.vue +++ b/front/src/components/UserCard.vue @@ -26,30 +26,31 @@ function onImgError(e: Event) { align-items: center; gap: 16px; padding: 16px; - background: #1e293b; + background: #ffffff; border-radius: 12px; - border: 1px solid #334155; - margin-bottom: 20px; + border: 1px solid #e2e8f0; + margin-bottom: 16px; + box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; - border: 2px solid #60a5fa; + border: 2px solid #3b82f6; } .info h3 { margin: 0 0 4px; - color: #f1f5f9; + color: #1e293b; font-size: 1.2rem; } .info p { margin: 2px 0; - color: #94a3b8; + color: #64748b; font-size: 0.9rem; } .fid { - color: #60a5fa; + color: #3b82f6; font-family: monospace; } diff --git a/front/src/views/HomeView.vue b/front/src/views/HomeView.vue index 7d64d70..2469242 100644 --- a/front/src/views/HomeView.vue +++ b/front/src/views/HomeView.vue @@ -125,7 +125,7 @@ header { text-align: center; margin-bottom: 28px; } -header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; } +header h1 { font-size: 1.9rem; color: #1e293b; margin: 0 0 8px; } .subtitle { color: #64748b; margin: 0; font-size: 0.9rem; } .columns { @@ -143,14 +143,15 @@ header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; } } .card { - background: #1e293b; - border: 1px solid #334155; + background: #ffffff; + border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 16px; + box-shadow: 0 1px 3px rgba(0,0,0,0.06); } -.admin-card { border-style: dashed; border-color: #475569; } -.section-title { margin: 0 0 10px; color: #94a3b8; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; } +.admin-card { border-style: dashed; border-color: #cbd5e1; } +.section-title { margin: 0 0 10px; color: #64748b; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; } .user-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; font-size: 0.85rem; padding: 7px 10px; } .user-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 320px); overflow-y: auto; } @@ -159,18 +160,18 @@ header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; } align-items: center; gap: 8px; padding: 8px 10px; - background: #0f172a; - border: 1px solid #334155; + background: #f8fafc; + border: 1px solid #e2e8f0; border-radius: 8px; - color: #cbd5e1; + color: #334155; font-size: 0.85rem; cursor: pointer; transition: all 0.15s; text-align: left; width: 100%; } -.user-item:hover { border-color: #60a5fa; color: #f1f5f9; } -.user-item.active { border-color: #3b82f6; background: #1e3a5f; color: #93c5fd; } +.user-item:hover { border-color: #3b82f6; color: #1e293b; background: #f0f7ff; } +.user-item.active { border-color: #3b82f6; background: #eff6ff; color: #2563eb; } .user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @@ -178,13 +179,13 @@ header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; } .input { flex: 1; padding: 10px 14px; - background: #0f172a; - border: 1px solid #334155; + background: #f8fafc; + border: 1px solid #e2e8f0; border-radius: 8px; - color: #f1f5f9; + color: #1e293b; font-size: 0.95rem; } -.input:focus { outline: none; border-color: #60a5fa; } +.input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); } .input:disabled { opacity: 0.5; } .btn { padding: 10px 20px; @@ -198,6 +199,6 @@ header h1 { font-size: 1.9rem; color: #f1f5f9; margin: 0 0 8px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: #3b82f6; color: #fff; } .btn-primary:hover:not(:disabled) { background: #2563eb; } -.error-msg { color: #f87171; font-size: 0.9rem; margin: 8px 0 0; } -.empty { color: #475569; font-size: 0.9rem; margin: 0; text-align: center; padding: 12px 0; } +.error-msg { color: #dc2626; font-size: 0.9rem; margin: 8px 0 0; } +.empty { color: #94a3b8; font-size: 0.9rem; margin: 0; text-align: center; padding: 12px 0; }