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

apps/web/src/lib/piiDisplay.ts

@@ -11,6 +11,35 @@ const DISPLAY_PLACEHOLDERS: Record<string, string> = {
   "[ADDRESS]": "주소",
 };
 
+function hasHangulBatchim(value: string) {
+  for (let index = value.length - 1; index >= 0; index -= 1) {
+    const code = value.charCodeAt(index);
+    if (code >= 0xac00 && code <= 0xd7a3) return (code - 0xac00) % 28 !== 0;
+  }
+  return false;
+}
+
+function replacePlaceholderWithNaturalParticle(
+  text: string,
+  placeholder: string,
+  label: string,
+) {
+  const batchim = hasHangulBatchim(label);
+  let next = text;
+  for (const [variants, particle] of [
+    [["으로", "로"], batchim ? "으로" : "로"],
+    [["은", "는"], batchim ? "은" : "는"],
+    [["이", "가"], batchim ? "이" : "가"],
+    [["을", "를"], batchim ? "을" : "를"],
+    [["과", "와"], batchim ? "과" : "와"],
+  ] as const) {
+    for (const variant of variants) {
+      next = next.split(`${placeholder}${variant}`).join(`${label}${particle}`);
+    }
+  }
+  return next.split(placeholder).join(label);
+}
+
 /**
  * 저장/API의 privacy-proof 토큰은 유지하고, 사람이 읽는 일반 대화 표면에서만
  * 토큰을 안전한 설명으로 낮춘다. 근거 인용·내보내기에는 사용하지 않는다.
@@ -24,7 +53,7 @@ export function displayPiiSafeText(text: string) {
     "되는 건지 잘 모르겠는데요",
   );
   for (const [placeholder, label] of Object.entries(DISPLAY_PLACEHOLDERS)) {
-    next = next.split(placeholder).join(label);
+    next = replacePlaceholderWithNaturalParticle(next, placeholder, label);
   }
   return next;
 }

apps/web/src/pages/LearnerHome.tsx

@@ -22,6 +22,7 @@ import {
   type PersonaSummary,
   type SessionDetailResponse,
 } from "../lib/api";
+import { displayPiiSafeText } from "../lib/piiDisplay";
 import {
   DIFFICULTY_LABEL,
   isUsablePersona,
@@ -683,8 +684,14 @@ export default function LearnerHome({ view = "dashboard" }: LearnerHomeProps) {
     spotlightPersona,
   );
   const spotlightAffectLabel = expressionLabelFor(spotlightAffect);
-  const lastClientLine = lastTurnText(effectiveRecapDetail, "client");
-  const lastLearnerLine = lastTurnText(effectiveRecapDetail, "learner");
+  const rawLastClientLine = lastTurnText(effectiveRecapDetail, "client");
+  const rawLastLearnerLine = lastTurnText(effectiveRecapDetail, "learner");
+  const lastClientLine = rawLastClientLine
+    ? displayPiiSafeText(rawLastClientLine)
+    : null;
+  const lastLearnerLine = rawLastLearnerLine
+    ? displayPiiSafeText(rawLastLearnerLine)
+    : null;
   const reviewQueue = sortedSessions
     .filter((session) => session.review_ready)
     .slice(0, 3);
@@ -1358,6 +1365,19 @@ export default function LearnerHome({ view = "dashboard" }: LearnerHomeProps) {
                           ? "새 회기를 시작하기 전에 이미 끝난 대화의 반응과 대안 발화를 확인하세요."
                           : "다음 회기에서는 감정 반영 뒤 무엇을 더 물을지 한 문장으로 정하고 들어갑니다."}
                       </p>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          navigate(
+                            reviewCount > 0
+                              ? "/learn/history"
+                              : "/learn/practice",
+                          )
+                        }
+                      >
+                        {reviewCount > 0 ? "리뷰 확인하기" : "연습 시작하기"}
+                        <Icon name="chevron-right" size={15} />
+                      </button>
                     </div>
                   </article>
 

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>
           </>
         )}

apps/web/src/pages/session/session.css

@@ -4858,6 +4858,49 @@
   }
 }
 
+/* 학생용 active 회기의 모바일 조작면은 시각 압축보다 44px 터치 계약을 우선한다.
+   위의 저높이/좁은폭 보정이 28~40px까지 줄이던 실제 클릭 상자를 여기서 복구한다. */
+@media (max-width: 880px) {
+  .sx-page--active button,
+  .sx-page--active textarea {
+    min-width: 44px !important;
+    min-height: 44px !important;
+  }
+
+  .sx-page--active .sx-sessionbar .sx-sessionbar__back,
+  .sx-page--active .sx-sessionbar__actions button:not(.sx-sessionbar__review) {
+    width: 44px !important;
+    min-width: 44px !important;
+  }
+}
+
+/* 390px급 일반 높이 폰: 44px 입력 조작면을 유지하면서도 최신 발화 한 행
+   (현재 회귀 fixture 82.1px)이 축어록 안에 온전히 들어오도록 카드 내부의 비스크롤
+   여백을 압축하고 scrollport에 83px을 보장한다. 620px 이하 저높이 규칙과는 분리한다. */
+@media (max-width: 420px) and (min-height: 621px) {
+  .sx-page--active .sx-transcript {
+    padding-block: 6px;
+  }
+
+  .sx-page--active .sx-transcript__head {
+    margin-bottom: 4px;
+  }
+
+  .sx-page--active .sx-transcript__scroll {
+    min-height: 83px;
+  }
+
+  .sx-page--active .sx-compose {
+    margin-top: 5px;
+    padding-top: 5px;
+  }
+
+  .sx-page--active .sx-compose textarea,
+  .sx-page--active .sx-compose .vg-btn {
+    height: 44px;
+  }
+}
+
 /* 320×568 같은 저높이 폰에서는 mid 자기점검의 설명/버튼 줄바꿈만으로
    축어록 행이 사라진다. G1 상태는 그대로 두고 collapsed 표현만 한 줄로 압축한다. */
 @media (max-width: 420px) and (max-height: 620px) {
@@ -4906,10 +4949,53 @@
   .sx-page--active .sx-mobile-context__brief {
     display: none;
   }
-  /* 110px 고정 최소 높이는 입력창을 카드 바깥으로 밀어냈다. 중앙 그리드가
-     남은 높이를 배분하게 하되, 스크롤과 입력창 모두 transcript 안에 둔다. */
+
+  /* 320×568에서는 최신 발화 한 행과 44px 입력 조작면을 최우선으로 둔다.
+     stage는 이름+현재 내담자 문장만 남기는 20px strip으로 바꿔 63px을 축어록에
+     돌려준다. 아바타·orb·상태/타이머는 모바일 요약과 축어록의 중복 정보다. */
+  .sx-page--active .sx-col-center {
+    grid-template-rows: 20px minmax(0, 1fr);
+    gap: 4px;
+  }
+  .sx-page--active .sx-stage {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    padding: 2px 6px;
+    column-gap: 0;
+    row-gap: 0;
+  }
+  .sx-page--active .sx-stage::before,
+  .sx-page--active .sx-stage__top,
+  .sx-page--active .sx-orb-wrap,
+  .sx-page--active .sx-stage__now {
+    display: none;
+  }
+  .sx-page--active .sx-stage__client {
+    grid-column: 1;
+    grid-row: 1;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    overflow: hidden;
+  }
+  .sx-page--active .sx-stage__client-kicker {
+    flex: none;
+    font-size: 11px;
+    line-height: 1;
+  }
+  .sx-page--active .sx-stage__client p {
+    min-width: 0;
+    display: block;
+    overflow: hidden;
+    font-size: 11px;
+    line-height: 1.1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 위 compact stage가 만든 높이를 최신 발화 한 행의 scrollport에 고정한다. */
   .sx-page--active .sx-transcript__scroll {
-    min-height: 0;
+    min-height: 83px;
   }
 }