feat(web): Phase 1.5.3 로그인 UX 개선 및 core 브라우저 엔트리 분리

- LoginView: 로그인 실패/잠금/세션 만료 UX 구현
  - 실패 메시지를 Sign in 버튼 아래 인라인 텍스트로 표시
  - 세션 만료 알림도 버튼 아래로 이동
  - 5회 실패 시 30분 잠금 (Alert 유지), 3회부터 임박 경고
  - 잠금 시 폼 전체 disabled 처리
- ForgotPasswordView: 경로 선택 → 이메일 / 관리자 토큰 두 갈래로 전면 재구성
  - 관리자 토큰 경로: 이메일 + 토큰 쌍 검증 구조 추가
  - 이메일 경로: 전송 완료 화면 유지
  - 복구 완료 시 onRecovered 콜백으로 로그인 화면 복귀
- main.tsx: Mock 계정 시스템 도입
  - 이메일+비밀번호 세트로 계정 정의 (admin@/user@)
  - 로그인 시 계정에 따라 관리자 역할 자동 적용
- packages/core: 브라우저 전용 엔트리포인트 분리
  - @fieldstack/core/browser — types/utils만 export (Node.js 의존성 없음)
  - Vite 번들링 시 jsonwebtoken 등 포함으로 인한 오류 해결
  - ChangePasswordView import를 /browser 경로로 변경
- 문서: CLAUDE.md, AGENTS.md, roadmap 01 업데이트

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

Author: SOIV

AGENTS.md

@@ -3,7 +3,7 @@
 This file provides high-signal, repo-specific guidance for AI agents working in the Fieldstack repository. Read this before taking action to avoid architectural mistakes.
 
 ## Project Status & Environment
-- **Current Phase**: Phase 1.5 in progress. Core UI Shell is running but mostly mocked. Backend API endpoints are largely unimplemented.
+- **Current Phase**: Phase 1.5 in progress (2026-04-14). Phase 1.9 complete (API server, DB layer, auth backend, shared link core). Phase 1.5.3 login UX complete.
 - **Workspace**: `pnpm` workspace with `node-linker=hoisted`.
 - **References**: Check `CLAUDE.md` and `docs/v2_FINANCIAL-LEDGER/` for phase-specific checklists and design tokens.
 
@@ -28,14 +28,19 @@ This file provides high-signal, repo-specific guidance for AI agents working in
 ### Frontend (`apps/web`)
 - **Hash Routing**: Uses Hash-based routing (`#login`, `#home`, `#admin`) managed by a custom state machine in `apps/web/src/main.tsx` (`effectiveRoute`).
 - **Auth State**: Authentication and session state are persisted in `sessionStorage` using the `fs_` prefix (e.g., `fs_auth`, `fs_admin`).
-- **Dev Mocks**: When testing auth UI locally, use `otp1234` for the OTP flow and `temp1234` for the force-password-change flow.
+- **Dev Mock Accounts**: `admin@fieldstack.dev` / `Admin1234!` (admin role), `user@fieldstack.dev` / `User1234!` (regular user). Special passwords work for any email: `otp1234` → OTP flow, `temp1234` → force password change flow.
+- **`@fieldstack/core` import rule**: Web app must always import from `@fieldstack/core/browser`, never from `@fieldstack/core` directly. The default entry pulls in Node.js-only packages (jsonwebtoken, bcryptjs, otplib) which break Vite bundling. The `/browser` entry exports only browser-safe modules (types, utils).
 
 ### Backend (`apps/api`)
 - **Dynamic Module Loading**: Backend modules are dynamically scanned and loaded via `apps/api/src/loader/index.ts`.
 - **Module Requirements**: A backend module will only be loaded if it has a valid `module.json` manifest with `"enabled": true`.
+- **Auth Routes**: `POST /auth/login`, `/auth/totp/verify`, `/auth/pin/verify`, `/auth/password/change`, `/auth/password/recovery/issue`, `/auth/password/recovery/confirm`, `/auth/refresh`, `/auth/logout`.
+- **Shared Link Routes**: `POST|GET /core/share`, `DELETE /core/share/:token`, `GET|PATCH /core/share/settings`, `GET /s/:token` (public).
+- **CJS/ESM interop**: `apps/api` is CJS (`module: Node16`). Import types from `@fieldstack/core` using `import type ... with { "resolution-mode": "import" }`. Value imports use dynamic `import('@fieldstack/core')`.
 
 ### Shared & UI Packages
 - **`packages/controls`**: All P0/P0.5 components are fully implemented (`ready: true`). Styled with `fs-` prefixed CSS classes and design tokens. Use `@fieldstack/controls` in `apps/web` — do not write inline component styles in views.
+- **`packages/core`**: Has two entry points — `@fieldstack/core` (full, server-only) and `@fieldstack/core/browser` (browser-safe subset). Always use the correct entry for the target environment.
 - **Inter-module Communication**: Direct module-to-module imports are strictly forbidden. All cross-module communication must use the Event Bus.
 
 ## Strict Code Rules

CLAUDE.md

@@ -6,7 +6,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Status
 
-Phase 1.5 진행 중 (2026-04-13 기준). Core UI Shell은 mock으로 동작하며 실제 백엔드 API 엔드포인트는 미구현. `packages/controls` P0/P0.5 컴포넌트 구현 완료 (`ready: true`). Storybook 세팅 완료 (port 6007).
+Phase 1.5 진행 중 (2026-04-14 기준). Phase 1.9 (API 서버·DB·인증 백엔드·공유 링크) 완료. Phase 1.5.3 로그인 UX 완료 (실패/잠금/세션 만료, 비밀번호 복구 UI, mock 계정 시스템). `packages/controls` P0/P0.5 컴포넌트 구현 완료 (`ready: true`). Storybook 세팅 완료 (port 6007). `@fieldstack/core/browser` 브라우저 전용 엔트리 분리 완료 — 웹 앱은 반드시 이 경로로 import.
 
 ---
 
@@ -48,7 +48,7 @@ apps/
   api/     — Node.js + tsx dev server (@fieldstack/api)
 packages/
   core/    — 공유 타입·계약·유틸 (@fieldstack/core)
-  controls/— UI 컴포넌트 계약 (@fieldstack/controls, 구현 미착수)
+  controls/— UI 컴포넌트 (@fieldstack/controls, P0/P0.5 구현 완료)
 modules/   — Phase 2 모듈 (Ledger, Subscription) 위치 예정
 ```
 
@@ -60,7 +60,9 @@ pnpm workspace, `node-linker=hoisted`.
 - 모든 라우트 상태 머신은 `apps/web/src/main.tsx`의 `App` 컴포넌트에서 관리 (`effectiveRoute` useMemo).
 - 인증 상태는 `sessionStorage`에 `fs_` 접두사 키로 저장 (`fs_auth`, `fs_admin`, `fs_pin_verified` 등).
 - **AppShell** (`src/components/AppShell.tsx`): 220px 고정 사이드바 레이아웃. login/otp/forgot-password/change-password는 shell 없이 전체 화면.
-- **개발 mock 비밀번호**: `otp1234` → OTP 플로우, `temp1234` → 강제 비밀번호 변경 플로우.
+- **개발 mock 계정**: `admin@fieldstack.dev` / `Admin1234!` (관리자), `user@fieldstack.dev` / `User1234!` (일반)
+- **개발 mock 특수 비밀번호**: `otp1234` → OTP 플로우, `temp1234` → 강제 비밀번호 변경 플로우 (어떤 이메일이든 동작)
+- **`@fieldstack/core` import 규칙**: 웹 앱(`apps/web`)에서는 반드시 `@fieldstack/core/browser`로 import. `@fieldstack/core` 직접 import는 Node.js 전용 패키지(jsonwebtoken 등)를 끌어들여 Vite 번들링 오류 발생.
 
 ### apps/api — 모듈 로더
 

apps/web/src/main.tsx

@@ -70,6 +70,13 @@ function loadTheme(): ThemeSetting {
 // 초기 테마 적용 (React 렌더 전에 FOUC 방지)
 applyTheme(loadTheme());
 
+// ─── Mock Accounts ────────────────────────────────────────────
+// TODO(Phase 1.9 연결): 실제 API 호출로 교체
+const MOCK_ACCOUNTS: { email: string; password: string; isAdmin: boolean }[] = [
+  { email: "admin@fieldstack.dev", password: "Admin1234!", isAdmin: true  },
+  { email: "user@fieldstack.dev",  password: "User1234!",  isAdmin: false },
+];
+
 // ─── Session Storage Keys ─────────────────────────────────────
 const SS = {
   auth:            "fs_auth",
@@ -99,6 +106,17 @@ function App({ installMode }: { installMode: InstallMode }) {
   );
   // OTP 인증 대기 중인 이메일 (로그인 완료 전 임시 상태 — sessionStorage 미저장)
   const [pendingOtpEmail, setPendingOtpEmail] = useState<string | null>(null);
+
+  // 로그인 실패 상태
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [loginAttempts, setLoginAttempts] = useState(0);
+  const [loginLockedUntil, setLoginLockedUntil] = useState<number | null>(null);
+  const [sessionExpired, setSessionExpired] = useState(false);
+
+  const MAX_LOGIN_ATTEMPTS = 5;
+  const LOCKOUT_MS = 30 * 60 * 1000; // 30분
+
+  const isLocked = loginLockedUntil !== null && Date.now() < loginLockedUntil;
   const [currentUser, setCurrentUser] = useState<{ email: string } | null>(
     () => {
       const email = sessionStorage.getItem(SS.email);
@@ -149,32 +167,66 @@ function App({ installMode }: { installMode: InstallMode }) {
   // Auth handlers
   const onLogin = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    if (isLocked) return;
+
     const formData = new FormData(event.currentTarget);
     const email = (formData.get("email") as string | null) ?? "user@fieldstack.dev";
     const password = formData.get("password") as string | null;
 
     // mock: "otp1234" → LoginView 내 OTP step으로 전환
     if (password === "otp1234") {
+      setLoginError(null);
+      setLoginAttempts(0);
       setPendingOtpEmail(email);
       return;
     }
 
     // mock: "temp1234" → 임시 비번 첫 로그인 강제 변경
-    const isTempLogin = password === "temp1234";
+    if (password === "temp1234") {
+      setLoginError(null);
+      setLoginAttempts(0);
+      setSessionExpired(false);
+      setIsAuthenticated(true);
+      setCurrentUser({ email });
+      sessionStorage.setItem(SS.auth, "true");
+      sessionStorage.setItem(SS.email, email);
+      setMustChangePassword(true);
+      sessionStorage.setItem(SS.mustChangePw, "true");
+      navigate("change-password");
+      return;
+    }
 
+    const matchedAccount = MOCK_ACCOUNTS.find(
+      (a) => a.email === email && a.password === password,
+    );
+
+    if (!matchedAccount) {
+      const next = loginAttempts + 1;
+      setLoginAttempts(next);
+      if (next >= MAX_LOGIN_ATTEMPTS) {
+        setLoginLockedUntil(Date.now() + LOCKOUT_MS);
+        setLoginError(null);
+      } else {
+        setLoginError("이메일 또는 비밀번호가 올바르지 않습니다.");
+      }
+      return;
+    }
+
+    // 로그인 성공
+    setLoginError(null);
+    setLoginAttempts(0);
+    setLoginLockedUntil(null);
+    setSessionExpired(false);
     setIsAuthenticated(true);
+    setIsAdmin(matchedAccount.isAdmin);
+    if (matchedAccount.isAdmin) {
+      sessionStorage.setItem(SS.admin, "true");
+    }
     setCurrentUser({ email });
     sessionStorage.setItem(SS.auth, "true");
     sessionStorage.setItem(SS.email, email);
-
-    if (isTempLogin) {
-      setMustChangePassword(true);
-      sessionStorage.setItem(SS.mustChangePw, "true");
-      navigate("change-password");
-    } else {
-      setNotice("Login successful (mock).");
-      navigate("home");
-    }
+    setNotice("Login successful (mock).");
+    navigate("home");
   };
 
   const onQuickLogin = () => {
@@ -221,7 +273,7 @@ function App({ installMode }: { installMode: InstallMode }) {
     navigate("admin");
   };
 
-  const onLogout = () => {
+  const onLogout = (expired = false) => {
     setIsAuthenticated(false);
     setIsAdmin(false);
     setIsPinVerified(false);
@@ -230,7 +282,11 @@ function App({ installMode }: { installMode: InstallMode }) {
     sessionStorage.removeItem(SS.admin);
     sessionStorage.removeItem(SS.pinVerified);
     sessionStorage.removeItem(SS.email);
-    setNotice("Logged out.");
+    setLoginError(null);
+    setLoginAttempts(0);
+    setLoginLockedUntil(null);
+    setSessionExpired(expired);
+    setNotice(expired ? "" : "Logged out.");
     navigate("login");
   };
 
@@ -247,6 +303,10 @@ function App({ installMode }: { installMode: InstallMode }) {
             pendingEmail={pendingOtpEmail}
             onOtpVerified={onOtpVerified}
             onOtpCancel={onOtpCancel}
+            loginError={loginError}
+            loginAttempts={loginAttempts}
+            isLocked={isLocked}
+            sessionExpired={sessionExpired}
           />
         </section>
       </main>
@@ -255,7 +315,15 @@ function App({ installMode }: { installMode: InstallMode }) {
 
   // 비밀번호 찾기 (no shell)
   if (effectiveRoute === "forgot-password") {
-    return <ForgotPasswordView onBack={() => navigate("login")} />;
+    return (
+      <ForgotPasswordView
+        onBack={() => navigate("login")}
+        onRecovered={() => {
+          setNotice("비밀번호가 복구되었습니다. 새 비밀번호로 로그인하세요.");
+          navigate("login");
+        }}
+      />
+    );
   }
 
   // 비밀번호 강제 변경 (shell 없이 전체 화면)

apps/web/src/styles/forgot-password.css

@@ -87,6 +87,61 @@
   line-height: 1.5;
 }
 
+/* ── Choice cards ─────────────────────────────────────────────── */
+.fpw-choice-list {
+  display: grid;
+  gap: 10px;
+}
+
+.fpw-choice-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-surface);
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.fpw-choice-card:hover {
+  border-color: var(--primary);
+  background: var(--bg-surface-raised, var(--bg-surface));
+}
+
+.fpw-choice-icon {
+  font-size: 22px;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.fpw-choice-body {
+  display: grid;
+  gap: 2px;
+  flex: 1;
+}
+
+.fpw-choice-label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.fpw-choice-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.fpw-choice-arrow {
+  font-size: 18px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+
 .fpw-back-btn {
   background: none;
   border: none;

apps/web/src/styles/login.css

@@ -235,6 +235,20 @@
   gap: 10px;
 }
 
+.login-inline-error {
+  margin: 0;
+  font-size: 12px;
+  color: var(--err);
+  text-align: center;
+}
+
+.login-inline-warn {
+  margin: 0;
+  font-size: 12px;
+  color: var(--warn);
+  text-align: center;
+}
+
 /* ─── Responsive ─────────────────────────────────────────────── */
 @media (max-width: 900px) {
   .auth-layout {

apps/web/src/views/ChangePasswordView.tsx

@@ -1,6 +1,6 @@
 import { useState, type FormEvent } from "react";
 
-import { PASSWORD_POLICY, validatePassword } from "@fieldstack/core";
+import { PASSWORD_POLICY, validatePassword } from "@fieldstack/core/browser";
 
 import { Button, FormField, Input } from "@fieldstack/controls";