검증게시판 단계 추가

app/src/screens/LoginScreen.tsx

@@ -1,6 +1,5 @@
-/** 웹 SplashScreen과 동일한 로그인 진입 화면 */
-import SplashScreen from '@frontend/components/SplashScreen';
 import type { LoginResponse } from '../lib/shared';
+import MobileLoginScreen from './MobileLoginScreen';
 
 interface Props {
   onLoginSuccess: (res: LoginResponse) => void;
@@ -8,5 +7,5 @@ interface Props {
 }
 
 export default function LoginScreen({ onLoginSuccess, onGuest }: Props) {
-  return <SplashScreen onLoginSuccess={onLoginSuccess} onGuest={onGuest} />;
+  return <MobileLoginScreen onLoginSuccess={onLoginSuccess} onGuest={onGuest} />;
 }

app/src/screens/MobileLoginScreen.tsx

@@ -0,0 +1,97 @@
+/**
+ * 모바일 로그인 — SplashScreen UI + 느린 서버 대응(타임아웃·안내 문구)
+ */
+import React, { useEffect, useState } from 'react';
+import { loginUser, type LoginResponse } from '../lib/shared';
+import '@frontend/styles/splashScreen.css';
+
+const DEFAULT_USERNAME = 'admin';
+const DEFAULT_PASSWORD = 'admin';
+const APP_VERSION = '1.2';
+
+interface Props {
+  onLoginSuccess: (res: LoginResponse) => void;
+  onGuest: () => void;
+}
+
+export default function MobileLoginScreen({ onLoginSuccess, onGuest }: Props) {
+  const [username, setUsername] = useState(DEFAULT_USERNAME);
+  const [password, setPassword] = useState(DEFAULT_PASSWORD);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [slowHint, setSlowHint] = useState(false);
+
+  useEffect(() => {
+    if (!loading) {
+      setSlowHint(false);
+      return;
+    }
+    const t = window.setTimeout(() => setSlowHint(true), 5000);
+    return () => window.clearTimeout(t);
+  }, [loading]);
+
+  const submitLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await loginUser(username.trim(), password);
+      onLoginSuccess(res);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '로그인에 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="splash">
+      <div className="splash-photo-bg" aria-hidden />
+      <div className="splash-photo-overlay" aria-hidden />
+
+      <div className="splash-center">
+        <div className="splash-glass">
+          <h1 className="splash-brand">GoldenChart</h1>
+
+          <form className="splash-form" onSubmit={submitLogin}>
+            <input
+              className="splash-input"
+              type="text"
+              autoComplete="username"
+              value={username}
+              onChange={ev => setUsername(ev.target.value)}
+              disabled={loading}
+              placeholder="ID"
+            />
+            <input
+              className="splash-input"
+              type="password"
+              autoComplete="current-password"
+              value={password}
+              onChange={ev => setPassword(ev.target.value)}
+              disabled={loading}
+              placeholder="••••••••"
+            />
+            {error && <p className="splash-error">{error}</p>}
+            {slowHint && loading && !error && (
+              <p className="splash-error" style={{ opacity: 0.85 }}>
+                서버 응답이 느립니다. Wi‑Fi·모바일 데이터를 확인해 주세요…
+              </p>
+            )}
+            <button type="submit" className="splash-login-btn" disabled={loading}>
+              {loading ? '로그인 중…' : '로그인'}
+            </button>
+          </form>
+
+          <p className="splash-version">
+            버전: {APP_VERSION} | Core Engine: Ta4j &amp; Spring Boot
+          </p>
+        </div>
+
+        <button type="button" className="splash-guest-link" onClick={onGuest} disabled={loading}>
+          게스트로 체험하기
+        </button>
+      </div>
+    </div>
+  );
+}

app/src/screens/notifications/NotificationsScreen.tsx

@@ -1,7 +1,8 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTradeNotification } from '../../contexts/TradeNotificationContext';
 import { useNavigation } from '../../contexts/NavigationContext';
 import { useAuth } from '../../contexts/AuthContext';
+import { useAppSettings, reloadAppSettingsCache } from '../../hooks/useAppSettings';
 import { useVirtualTradingCore } from '@frontend/hooks/useVirtualTradingCore';
 import NotificationListRow from './NotificationListRow';
 import NotificationDetailScreen from './NotificationDetailScreen';
@@ -15,7 +16,8 @@ export default function NotificationsScreen() {
     goNotifyTrade,
     goVirtualDetail,
   } = useNavigation();
-  const { sessionKey } = useAuth();
+  const { sessionKey, guestMode, authUser } = useAuth();
+  const { isLoaded: settingsLoaded } = useAppSettings(sessionKey);
   const {
     allNotifications,
     unreadCount,
@@ -28,16 +30,48 @@ export default function NotificationsScreen() {
   const { summary, refreshPaperData } = useVirtualTradingCore({ settingsSessionKey: sessionKey });
 
   const [refreshing, setRefreshing] = useState(false);
+  const [pullY, setPullY] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+  const touchStartY = useRef(0);
 
   const selectedItem = useMemo(
     () => allNotifications.find(n => n.id === notifyNav.notifyId) ?? null,
     [allNotifications, notifyNav.notifyId],
   );
 
-  const onRefresh = async () => {
+  const onRefresh = useCallback(async () => {
+    if (refreshing) return;
     setRefreshing(true);
-    await refreshHistory();
-    setRefreshing(false);
+    try {
+      await reloadAppSettingsCache();
+      await refreshHistory({ serverOnly: true, rawServerList: true });
+    } finally {
+      setRefreshing(false);
+      setPullY(0);
+    }
+  }, [refreshing, refreshHistory]);
+
+  useEffect(() => {
+    if (!settingsLoaded) return;
+    void refreshHistory({ serverOnly: true, rawServerList: true });
+  }, [settingsLoaded, sessionKey, refreshHistory]);
+
+  const onTouchStart = (e: React.TouchEvent) => {
+    const el = listRef.current;
+    if (!el || el.scrollTop > 0) return;
+    touchStartY.current = e.touches[0].clientY;
+  };
+
+  const onTouchMove = (e: React.TouchEvent) => {
+    const el = listRef.current;
+    if (!el || el.scrollTop > 0) return;
+    const dy = e.touches[0].clientY - touchStartY.current;
+    if (dy > 0) setPullY(Math.min(dy, 72));
+  };
+
+  const onTouchEnd = () => {
+    if (pullY >= 48) void onRefresh();
+    else setPullY(0);
   };
 
   if (notifyNav.view === 'detail' && selectedItem) {
@@ -70,39 +104,76 @@ export default function NotificationsScreen() {
   }
 
   return (
-    <div className="screen">
+    <div className="screen notify-screen">
       <header className="screen-header">
         <h1 className="screen-title">알림 {unreadCount > 0 && `(${unreadCount})`}</h1>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button type="button" className="chip" onClick={() => void onRefresh()}>{refreshing ? '…' : '↻'}</button>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <button
+            type="button"
+            className="chip notify-refresh-btn"
+            onClick={() => void onRefresh()}
+            disabled={refreshing}
+            aria-label="서버에서 알림 새로고침"
+          >
+            {refreshing ? '새로고침…' : '↻ 새로고침'}
+          </button>
           <button type="button" className="chip" onClick={markAllAsRead}>읽음</button>
         </div>
       </header>
 
-      {allNotifications.length === 0 ? (
-        <div className="empty-state">
-          <h3>알림 없음</h3>
-          <p>전략 조건 충족 시 알림이 표시됩니다</p>
-        </div>
-      ) : (
-        <div className="stack-list" style={{ padding: '0 16px' }}>
-          {allNotifications.map(item => (
-            <NotificationListRow
-              key={item.id}
-              item={item}
-              onDetail={() => {
-                markAsRead(item.id);
-                goNotifyDetail(item.id, item.market);
-              }}
-              onTrade={side => {
-                markAsRead(item.id);
-                goNotifyTrade(item.market, side);
-              }}
-              onDelete={() => void deleteNotification(item.id)}
-            />
-          ))}
-        </div>
+      {guestMode && (
+        <p className="notify-hint text-muted" style={{ padding: '0 16px 8px', fontSize: 12, margin: 0 }}>
+          게스트 모드 — 웹과 동일 목록은 로그인 후 새로고침하세요.
+        </p>
       )}
+      {!guestMode && authUser && (
+        <p className="notify-hint text-muted" style={{ padding: '0 16px 8px', fontSize: 12, margin: 0 }}>
+          {authUser.username} · 서버 이력과 동기화됩니다
+        </p>
+      )}
+
+      <div
+        ref={listRef}
+        className="notify-list-wrap"
+        onTouchStart={onTouchStart}
+        onTouchMove={onTouchMove}
+        onTouchEnd={onTouchEnd}
+        style={{ flex: 1, overflow: 'auto', WebkitOverflowScrolling: 'touch' }}
+      >
+        {(pullY > 0 || refreshing) && (
+          <div className="notify-pull-hint" style={{ textAlign: 'center', padding: pullY > 0 ? `${pullY / 4}px` : 8, fontSize: 12, color: 'var(--gc-text-muted)' }}>
+            {refreshing ? '서버에서 불러오는 중…' : pullY >= 48 ? '놓으면 새로고침' : '당겨서 새로고침'}
+          </div>
+        )}
+
+        {allNotifications.length === 0 ? (
+          <div className="empty-state">
+            <h3>알림 없음</h3>
+            <p>전략 조건 충족 시 알림이 표시됩니다</p>
+            <button type="button" className="btn-secondary" style={{ marginTop: 12 }} onClick={() => void onRefresh()}>
+              새로고침
+            </button>
+          </div>
+        ) : (
+          <div className="stack-list" style={{ padding: '0 16px' }}>
+            {allNotifications.map(item => (
+              <NotificationListRow
+                key={item.id}
+                item={item}
+                onDetail={() => {
+                  markAsRead(item.id);
+                  goNotifyDetail(item.id, item.market);
+                }}
+                onTrade={side => {
+                  markAsRead(item.id);
+                  goNotifyTrade(item.market, side);
+                }}
+                onDelete={() => void deleteNotification(item.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
 
       {allNotifications.length > 0 && (
         <div style={{ padding: 16, textAlign: 'center' }}>

app/src/screens/virtual/VirtualTradingScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
+import { useAppSettings } from '../../hooks/useAppSettings';
 import { useVirtualTradingCore } from '@frontend/hooks/useVirtualTradingCore';
 import { resolveVirtualTargetStrategyId } from '@frontend/utils/virtualTargetStrategy';
 import { useNavigation } from '../../contexts/NavigationContext';
@@ -20,6 +21,7 @@ export default function VirtualTradingScreen() {
     goVirtualHistory,
   } = useNavigation();
   const { sessionKey: settingsSessionKey, authUser, guestMode } = useAuth();
+  const { isLoaded: settingsLoaded } = useAppSettings(settingsSessionKey);
 
   const core = useVirtualTradingCore({ settingsSessionKey });
   const {
@@ -156,15 +158,15 @@ export default function VirtualTradingScreen() {
         />
       </div>
 
-      {loading ? (
-        <div className="loading-center">로딩 중…</div>
+      {!settingsLoaded || loading ? (
+        <div className="loading-center">{!settingsLoaded ? '설정 동기화 중…' : '로딩 중…'}</div>
       ) : targets.length === 0 ? (
         <div className="empty-state">
           <h3>투자 대상 없음</h3>
           {guestMode ? (
-            <p>게스트 모드입니다. 웹과 같은 목록을 보려면 동일 계정으로 로그인하세요.</p>
+            <p>게스트 모드입니다. 웹과 같은 목록을 보려면 <strong>동일 계정으로 로그인</strong>하세요.</p>
           ) : (
-            <p>웹과 동일 계정({authUser?.username}) · + 버튼으로 종목 추가</p>
+            <p>웹({authUser?.username})과 동일 DB입니다. ↻ 동기화 또는 + 로 종목 추가</p>
           )}
         </div>
       ) : (