학생 회기 모바일 사용성 보정

apps/web/src/pages/Session.tsx

@@ -500,6 +500,9 @@ export default function Session() {
   // ── 자동 스크롤 ──
   const scrollRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState(true);
+  const autoScrollRef = useRef(true);
+  const userScrollIntentRef = useRef(false);
+  const userScrollIntentTimerRef = useRef<number | null>(null);
 
   const fadeTimerRef = useRef<number | null>(null);
   const voiceSocketRef = useRef<WebSocket | null>(null);
@@ -652,18 +655,38 @@ export default function Session() {
 
   // ── 경과 타이머 진행(일시정지 시 멈춤) ──
   useEffect(() => {
-    if (!started || paused) return;
+    if (!started || paused || timeUp) return;
     const t = window.setInterval(() => setElapsed((s) => s + 1), 1000);
     return () => window.clearInterval(t);
-  }, [started, paused]);
+  }, [started, paused, timeUp]);
 
   // ── 자막 자동 스크롤(아래로) ──
+  const setTranscriptFollowMode = useCallback((following: boolean) => {
+    autoScrollRef.current = following;
+    setAutoScroll(following);
+  }, []);
+
   useEffect(() => {
     if (!autoScroll) return;
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [utterances, clientReplyPending, turnError, autoScroll]);
 
+  // 모바일 조작면·뷰포트 변화로 축어록 scrollport 높이가 바뀌어도, 사용자가
+  // 최신 발화를 따라가던 중이었다면 같은 paint 전에 새 하단으로 재동기화한다.
+  // 사용자가 위로 읽고 있을 때는 autoScrollRef가 false라 절대 위치를 바꾸지 않는다.
+  useEffect(() => {
+    if (!started || typeof ResizeObserver === "undefined") return;
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(() => {
+      if (autoScrollRef.current) el.scrollTop = el.scrollHeight;
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [started]);
+
   // ── 라이브 신호 6초 페이드(§5.5) ──
   useEffect(() => {
     if (!liveSignal) return;
@@ -675,18 +698,40 @@ export default function Session() {
     };
   }, [liveSignal]);
 
-  // 사용자가 위로 스크롤하면 자동스크롤 해제
+  const markUserScrollIntent = useCallback(() => {
+    userScrollIntentRef.current = true;
+    if (userScrollIntentTimerRef.current) {
+      window.clearTimeout(userScrollIntentTimerRef.current);
+    }
+    userScrollIntentTimerRef.current = window.setTimeout(() => {
+      userScrollIntentRef.current = false;
+      userScrollIntentTimerRef.current = null;
+    }, 500);
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (userScrollIntentTimerRef.current) {
+        window.clearTimeout(userScrollIntentTimerRef.current);
+      }
+    },
+    [],
+  );
+
+  // wheel/touch로 사용자가 직접 이동한 경우에만 자동 따라가기를 바꾼다.
+  // 레이아웃 reflow가 발생시키는 scroll 이벤트는 사용자 이탈로 오인하지 않는다.
   const onScroll = useCallback(() => {
+    if (!userScrollIntentRef.current) return;
     const el = scrollRef.current;
     if (!el) return;
     const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
-    setAutoScroll(atBottom);
-  }, []);
+    setTranscriptFollowMode(atBottom);
+  }, [setTranscriptFollowMode]);
 
   const jumpToLatest = () => {
     const el = scrollRef.current;
+    setTranscriptFollowMode(true);
     if (el) el.scrollTop = el.scrollHeight;
-    setAutoScroll(true);
   };
 
   // 라이브 신호 push + 시퀀스 누적 (최근 5개 유지)
@@ -1007,7 +1052,16 @@ export default function Session() {
             at: secondsBetween(detail.started_at, turn.created_at),
           })),
         );
-        setElapsed(elapsedFromSession(detail));
+        const restoredElapsed = elapsedFromSession(detail);
+        const restoredDurationLimit =
+          detail.duration_limit_seconds && detail.duration_limit_seconds > 0
+            ? detail.duration_limit_seconds
+            : 60 * 60;
+        const restoredTimeUp = !ended && restoredElapsed >= restoredDurationLimit;
+        // 오래 열린 active 회기를 벽시계 시간만큼 계속 증가시키면 수만 분짜리
+        // 타이머가 된다. 운영 상태는 보존하되 화면 타이머는 계약된 회기 한도에서
+        // 멈추고 아래 time-up 상태가 "시간 만료"를 정직하게 설명한다.
+        setElapsed(ended ? restoredElapsed : Math.min(restoredElapsed, restoredDurationLimit));
         setGoalStages(detail.goal_stages ?? []);
         setProgress(detail.progress ?? null);
         if (detail.duration_limit_seconds) setDurationLimitSeconds(detail.duration_limit_seconds);
@@ -1017,7 +1071,7 @@ export default function Session() {
         timeWarningShownRef.current = false;
         timeUpShownRef.current = ended;
         goalNudgeShownRef.current = false;
-        setTimeUp(false);
+        setTimeUp(restoredTimeUp);
         setStarted(true);
         setPaused(ended);
         setSafety(null);
@@ -2315,7 +2369,7 @@ export default function Session() {
     !paused &&
     !sending &&
     !sessionEnded;
-  const elapsedLabel = formatTimecode(elapsed);
+  const elapsedLabel = timeUp && !sessionEnded ? "시간 만료" : formatTimecode(elapsed);
   const remainingLabel = formatTimecode(remainingSeconds);
   const limitMinutesLabel = Math.round(sessionLimitSeconds / 60);
   const warningMinutesLabel = Math.max(1, Math.round(sessionWarningSeconds / 60));
@@ -3098,6 +3152,10 @@ export default function Session() {
                     className="sx-transcript__scroll"
                     ref={scrollRef}
                     onScroll={onScroll}
+                    onWheel={markUserScrollIntent}
+                    onPointerDown={markUserScrollIntent}
+                    onTouchStart={markUserScrollIntent}
+                    onTouchMove={markUserScrollIntent}
                     role="log"
                     aria-label="실시간 상담 축어록"
                     aria-live="polite"
@@ -4065,7 +4123,7 @@ export default function Session() {
 
             {/* 경과 시간(접근성 — 보조 표기. 화면 우상단 톱바는 셸 소관) */}
             <span className="sr-only" aria-live="polite" style={{ position: "absolute", left: -9999 }}>
-              경과 {formatElapsed(elapsed)}
+              {timeUp && !sessionEnded ? "회기 시간 만료" : `경과 ${formatElapsed(elapsed)}`}
             </span>
           </>
         )}