화면 구성 요소
| 영역 | 내용 |
|---|
| 상단 그라데이션 | 로고 + 인사말 + 날씨 카드 |
| 인사말 | "안녕하세요, [이름] 어르신" — DB 사용자 이름 |
| 날씨 카드 | OpenWeather API + 사용자 지역 GPS |
| 메뉴 그리드 2×5 | 10개 카드, 큰 아이콘 + 한글 라벨 |
| 하단 탭바 | 홈 · 일정 · 소통 · 내정보 (4탭) |
| 플로팅 AI | 우하단 떠있는 🤖 버튼 |
메뉴 10개 & 라우팅
| ❤ 오늘의 마음 | /mind/mood.html |
| 👥 가족에게 | /family/index.html |
| ⚕ 건강지킴이 | /health/index.html |
| 🤝 생활도움 | /help/index.html |
| 🛡 안전센터 | /safety/index.html |
| 📍 우리동네 | /village/index.html |
| 💼 일과수입 | /job/index.html |
| 📖 배움터 | /learn/index.html |
| 🌱 인생2막 | /life2/index.html |
| 🤖 AI비서 | /ai/secretary.html |
실제 HTML 코드 (홈 핵심 부분)
<!-- home.html -->
<header class="app-header">
<div class="greet">
<h1>안녕하세요,<br><span id="userName">김순자</span> 어르신</h1>
</div>
<div class="weather-card" id="weather"></div>
</header>
<main class="menu-grid">
<a href="/mind/mood.html" class="menu-card heart">
<span class="ic">❤</span><span>오늘의 마음</span>
</a>
<!-- 나머지 9개 메뉴 -->
</main>
<nav class="tabbar">...</nav>
<button class="fab-ai" onclick="openAI()">🤖</button>