feat(web): Phase 1.5.4 Main Home 잔여 항목 완료

- 글로벌 네비게이션 상세 규격 확정: 메뉴 순서(Workspace→Modules→Footer), 아이콘 확정, Sign Out 아이콘 →으로 통일
- 모바일 Drawer: 768px 이하에서 햄버거(☰) 버튼 + 슬라이드인 사이드바 오버레이, 배경 클릭·항목 클릭 시 자동 닫힘
- 키보드 탐색: shell-nav-list 내 ArrowUp/ArrowDown으로 항목 간 포커스 순환
- 딥 링크 라우팅: 비인증 상태에서 #admin/#marketplace 진입 시 redirectAfterLogin 저장 → 로그인 후 원래 route로 자동 복귀
- 첫 로그인 온보딩 배너: 최초 1회 환영 배너(dismissible), localStorage 기반 영구 dismiss

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: SOIV

apps/web/src/components/AppShell.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode, useState } from "react";
 import "../styles/shell.css";
 
 export type RouteKey = "login" | "forgot-password" | "home" | "marketplace" | "admin" | "change-password";
@@ -18,6 +18,21 @@ interface AppShellProps {
 // 추후 모듈 로더에서 주입될 목록 (현재는 mock)
 const INSTALLED_MODULES: { id: string; label: string; icon: string }[] = [];
 
+// nav list 내 ArrowUp/ArrowDown 키보드 탐색
+function handleNavKeyDown(e: React.KeyboardEvent<HTMLUListElement>) {
+  if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
+  const items = Array.from(
+    e.currentTarget.querySelectorAll<HTMLButtonElement>('button.shell-nav-item'),
+  );
+  const idx = items.indexOf(document.activeElement as HTMLButtonElement);
+  if (idx === -1) return;
+  e.preventDefault();
+  const next = e.key === 'ArrowDown'
+    ? items[(idx + 1) % items.length]
+    : items[(idx - 1 + items.length) % items.length];
+  next?.focus();
+}
+
 export function AppShell({
   installMode,
   route,
@@ -30,25 +45,52 @@ export function AppShell({
   children,
 }: AppShellProps) {
   const userInitial = currentUser?.email.charAt(0).toUpperCase() ?? "?";
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+
+  const closeMobileMenu = () => setIsMobileOpen(false);
+  const navAndClose = (target: RouteKey) => { onNavigate(target); closeMobileMenu(); };
+
   return (
     <div className="shell">
+      {/* ── 모바일 오버레이 ──────────────────────────────── */}
+      {isMobileOpen && (
+        <div
+          className="shell-drawer-overlay"
+          onClick={closeMobileMenu}
+          aria-hidden="true"
+        />
+      )}
+
       {/* ── Sidebar ─────────────────────────────────────── */}
-      <aside className="shell-sidebar" aria-label="사이드바 네비게이션">
+      <aside
+        className="shell-sidebar"
+        data-mobile-open={isMobileOpen ? "" : undefined}
+        aria-label="사이드바 네비게이션"
+      >
         <div className="shell-brand">
           <div className="shell-brand-logo" aria-hidden="true">FS</div>
           <span className="shell-brand-name">Fieldstack</span>
+          {/* 모바일: 닫기 버튼 */}
+          <button
+            type="button"
+            className="shell-drawer-close"
+            onClick={closeMobileMenu}
+            aria-label="메뉴 닫기"
+          >
+            ✕
+          </button>
         </div>
 
         <nav className="shell-nav" aria-label="주 메뉴">
           {/* Workspace */}
           <p className="shell-nav-label" aria-hidden="true">Workspace</p>
-          <ul className="shell-nav-list">
+          <ul className="shell-nav-list" onKeyDown={handleNavKeyDown}>
             <li>
               <button
                 type="button"
                 className="shell-nav-item"
                 aria-current={route === "home" ? "page" : undefined}
-                onClick={() => onNavigate("home")}
+                onClick={() => navAndClose("home")}
               >
                 <span className="shell-nav-icon" aria-hidden="true">⊞</span>
                 Home
@@ -59,7 +101,7 @@ export function AppShell({
                 type="button"
                 className="shell-nav-item"
                 aria-current={route === "marketplace" ? "page" : undefined}
-                onClick={() => onNavigate("marketplace")}
+                onClick={() => navAndClose("marketplace")}
               >
                 <span className="shell-nav-icon" aria-hidden="true">⬡</span>
                 Marketplace
@@ -69,14 +111,14 @@ export function AppShell({
 
           {/* Modules */}
           <p className="shell-nav-label" aria-hidden="true">Modules</p>
-          <ul className="shell-nav-list" aria-label="설치된 모듈">
+          <ul className="shell-nav-list" aria-label="설치된 모듈" onKeyDown={handleNavKeyDown}>
             {INSTALLED_MODULES.length > 0 ? (
               INSTALLED_MODULES.map((mod) => (
                 <li key={mod.id}>
                   <button
                     type="button"
                     className="shell-nav-item"
-                    onClick={() => { window.location.hash = mod.id; }}
+                    onClick={() => { window.location.hash = mod.id; closeMobileMenu(); }}
                   >
                     <span className="shell-nav-icon" aria-hidden="true">{mod.icon}</span>
                     {mod.label}
@@ -105,7 +147,7 @@ export function AppShell({
               DEV BYPASS
             </div>
           )}
-          <button type="button" className="shell-nav-item" onClick={onOpenSettings}>
+          <button type="button" className="shell-nav-item" onClick={() => { onOpenSettings(); closeMobileMenu(); }}>
             <span className="shell-nav-icon" aria-hidden="true">⚙</span>
             Settings
           </button>
@@ -114,7 +156,7 @@ export function AppShell({
               type="button"
               className="shell-nav-item"
               aria-current={route === "admin" ? "page" : undefined}
-              onClick={() => onNavigate("admin")}
+              onClick={() => navAndClose("admin")}
             >
               <span className="shell-nav-icon" aria-hidden="true">⚡</span>
               Admin
@@ -123,16 +165,31 @@ export function AppShell({
           <button
             type="button"
             className="shell-nav-item shell-nav-item-danger"
-            onClick={onLogout}
+            onClick={() => { onLogout(); closeMobileMenu(); }}
           >
-            <span className="shell-nav-icon" aria-hidden="true">↪</span>
+            <span className="shell-nav-icon" aria-hidden="true">→</span>
             Sign Out
           </button>
         </div>
       </aside>
 
       {/* ── Body ─────────────────────────────────────────── */}
       <div className="shell-body">
+        {/* 모바일 상단 바 */}
+        <div className="shell-mobile-topbar">
+          <button
+            type="button"
+            className="shell-hamburger"
+            onClick={() => setIsMobileOpen(true)}
+            aria-label="메뉴 열기"
+            aria-expanded={isMobileOpen}
+          >
+            <span aria-hidden="true">☰</span>
+          </button>
+          <div className="shell-brand-logo" aria-hidden="true">FS</div>
+          <span className="shell-brand-name">Fieldstack</span>
+        </div>
+
         {notice && (
           <div className="shell-notice" role="status" aria-live="polite">
             <span className="shell-notice-dot" aria-hidden="true" />

apps/web/src/main.tsx

@@ -77,7 +77,7 @@ const MOCK_ACCOUNTS: { email: string; password: string; isAdmin: boolean }[] = [
   { email: "user@fieldstack.dev",  password: "User1234!",  isAdmin: false },
 ];
 
-// ─── Session Storage Keys ─────────────────────────────────────
+// ─── Storage Keys ─────────────────────────────────────────────
 const SS = {
   auth:            "fs_auth",
   admin:           "fs_admin",
@@ -86,6 +86,18 @@ const SS = {
   mustChangePw:    "fs_must_change_pw",
 } as const;
 
+const LS = {
+  theme:           "fs_theme",
+  firstVisitShown: "fs_first_visit_shown",
+} as const;
+
+// 딥 링크: 비인증 상태에서 진입한 app route 반환
+function getDeepLinkTarget(): RouteKey | null {
+  const hash = window.location.hash.replace("#", "");
+  const appRoutes: RouteKey[] = ["home", "marketplace", "admin"];
+  return (appRoutes as string[]).includes(hash) ? (hash as RouteKey) : null;
+}
+
 // ─── App Root ─────────────────────────────────────────────────
 function App({ installMode }: { installMode: InstallMode }) {
   const [theme, setTheme] = useState<ThemeSetting>(loadTheme);
@@ -127,6 +139,18 @@ function App({ installMode }: { installMode: InstallMode }) {
   const [mustChangePassword, setMustChangePassword] = useState(
     () => sessionStorage.getItem(SS.mustChangePw) === "true",
   );
+  // 딥 링크: 비인증 상태에서 진입한 app route (로그인 후 복귀)
+  const [redirectAfterLogin, setRedirectAfterLogin] = useState<RouteKey | null>(
+    () => (sessionStorage.getItem(SS.auth) === "true" ? null : getDeepLinkTarget()),
+  );
+  // 첫 방문 온보딩 배너
+  const [isFirstVisit, setIsFirstVisit] = useState(false);
+
+  const onDismissFirstVisit = () => {
+    setIsFirstVisit(false);
+    try { localStorage.setItem(LS.firstVisitShown, "true"); } catch { /* ignore */ }
+  };
+
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [isPinModalOpen, setIsPinModalOpen] = useState(false);
   const [notice, setNotice] = useState(
@@ -247,7 +271,14 @@ function App({ installMode }: { installMode: InstallMode }) {
     sessionStorage.setItem(SS.auth, "true");
     sessionStorage.setItem(SS.email, email);
     setNotice("Login successful (mock).");
-    navigate("home");
+    // 첫 방문 온보딩
+    try {
+      if (localStorage.getItem(LS.firstVisitShown) !== "true") setIsFirstVisit(true);
+    } catch { /* ignore */ }
+    // 딥 링크 복귀
+    const target = redirectAfterLogin ?? "home";
+    setRedirectAfterLogin(null);
+    navigate(target);
   };
 
   const onQuickLogin = () => {
@@ -276,7 +307,12 @@ function App({ installMode }: { installMode: InstallMode }) {
     sessionStorage.setItem(SS.auth, "true");
     sessionStorage.setItem(SS.email, email);
     setNotice("2단계 인증 완료.");
-    navigate("home");
+    try {
+      if (localStorage.getItem(LS.firstVisitShown) !== "true") setIsFirstVisit(true);
+    } catch { /* ignore */ }
+    const target = redirectAfterLogin ?? "home";
+    setRedirectAfterLogin(null);
+    navigate(target);
   };
 
   const onOtpCancel = () => {
@@ -380,6 +416,8 @@ function App({ installMode }: { installMode: InstallMode }) {
         {effectiveRoute === "home" && (
           <HomeView
             isAdmin={isAdmin}
+            isFirstVisit={isFirstVisit}
+            onDismissFirstVisit={onDismissFirstVisit}
             onOpenSettings={() => setIsSettingsOpen(true)}
             onNavigateAdmin={() => navigate("admin")}
           />

apps/web/src/styles/home.css

@@ -3,6 +3,56 @@
   gap: 18px;
 }
 
+/* ── 첫 로그인 환영 배너 ─────────────────────────────────────── */
+.home-welcome-banner {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  border: 1px solid rgba(59, 130, 246, 0.35);
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(16, 185, 129, 0.06) 100%);
+}
+
+.home-welcome-body {
+  display: grid;
+  gap: 4px;
+}
+
+.home-welcome-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.home-welcome-desc {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+.home-welcome-dismiss {
+  flex-shrink: 0;
+  margin-top: 1px;
+  border: none;
+  background: transparent;
+  color: var(--text-faint);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 5px;
+  border-radius: 5px;
+  line-height: 1;
+  transition: color 110ms ease, background 110ms ease;
+}
+
+.home-welcome-dismiss:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+
 .home-hero {
   border-radius: 14px;
   border: 1px solid var(--border);