학생 회기 모바일 사용성 보정
This commit is contained in:
Yun Chan
parent
aaebe4450e
commit
c743e9ccb9
7 changed files with 395 additions and 31 deletions
|
|
@ -513,10 +513,46 @@ test.describe("full-sweep learner home", () => {
|
|||
await expect(coachCard.getByLabel("코칭 힌트")).toContainText(
|
||||
"마지막 반응 먼저 반영",
|
||||
);
|
||||
await coachCard.getByRole("button", { name: "이어하기" }).click();
|
||||
const primaryAction = page.locator("[data-learner-primary-action]");
|
||||
await expect(primaryAction).toHaveAccessibleName("이어하기");
|
||||
await primaryAction.click();
|
||||
await expect(page).toHaveURL(new RegExp(`/learn/session/${ACT_ID}$`));
|
||||
});
|
||||
|
||||
test("naturalizes persisted privacy placeholders in the spotlight recap", async ({
|
||||
page,
|
||||
}) => {
|
||||
await signInAsLearner(page);
|
||||
await installLearnerHomeFixtures(page, { detail: false });
|
||||
await page.route(new RegExp(`/api/sessions/${ACT_ID}$`), (route) =>
|
||||
route.fulfill(
|
||||
jsonRoute({
|
||||
...DETAIL_BODY,
|
||||
turns: [
|
||||
{
|
||||
...DETAIL_BODY.turns[0],
|
||||
text: "[NAME]에게 [PHONE]으로 연락해 볼까요?",
|
||||
},
|
||||
{
|
||||
...DETAIL_BODY.turns[1],
|
||||
text: "뭘… 할 수 있게 [NAME]는 건지 잘 [NAME]는데요. [ORG]에서 오라고 했어요.",
|
||||
},
|
||||
],
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
await page.goto("/learn");
|
||||
|
||||
const recap = page.getByLabel("마지막 세션 리캡");
|
||||
await expect(recap).toContainText("할 수 있게 되는 건지 잘 모르겠는데요");
|
||||
await expect(recap).toContainText("소속 기관에서 오라고 했어요");
|
||||
await expect(recap).toContainText("익명 내담자에게 연락처로 연락해 볼까요");
|
||||
for (const token of ["[NAME]", "[ORG]", "[PHONE]"]) {
|
||||
await expect(recap).not.toContainText(token);
|
||||
}
|
||||
});
|
||||
|
||||
// checklist: learner-home-dash-recommend-card, learner-home-dash-recent-feedback,
|
||||
// learner-home-dash-review-queue
|
||||
test("prioritizes review in the recommend card, recent feedback, and review queue", async ({
|
||||
|
|
@ -540,7 +576,9 @@ test.describe("full-sweep learner home", () => {
|
|||
const feedback = page.locator(".lh-dashboard-feedback");
|
||||
await expect(feedback.locator(".lh-panel__badge")).toHaveText("1건");
|
||||
const feedbackRow = feedback.locator(".lh-feedback-mini__row");
|
||||
await expect(feedbackRow).toContainText("P1 · 정리 · 62점");
|
||||
const feedbackMeta = feedbackRow.locator("b > span");
|
||||
await expect(feedbackMeta.nth(0)).toHaveText("P1 · 정리");
|
||||
await expect(feedbackMeta.nth(1)).toHaveText("62점");
|
||||
await expect(feedbackRow).toContainText(
|
||||
"감정 반영은 좋았지만 탐색 질문 전에 요약이 필요합니다.",
|
||||
);
|
||||
|
|
@ -831,9 +869,16 @@ test.describe("full-sweep learner home", () => {
|
|||
await expect(rows).toHaveCount(2);
|
||||
// 회기 수 내림차순 정렬 — P1(3회)이 먼저 온다.
|
||||
await expect(rows.nth(0)).toContainText("P1");
|
||||
await expect(rows.nth(0)).toContainText(
|
||||
"3회 · 1회 진행 · 1회 리뷰 · 평균 4턴",
|
||||
const firstMeta = rows.nth(0).locator(".lh-persona-progress__meta");
|
||||
await expect(firstMeta.locator(":scope > span").nth(0)).toHaveText(
|
||||
"3회 · 평균 4턴",
|
||||
);
|
||||
await expect(firstMeta.locator(":scope > span").nth(1)).toHaveText(
|
||||
"진행 1 · 리뷰 1",
|
||||
);
|
||||
await expect(
|
||||
rows.nth(0).locator(".lh-persona-progress__latest"),
|
||||
).toHaveText("진행 중 · 탐색");
|
||||
await expect(rows.nth(1)).toContainText("P2");
|
||||
|
||||
// 행 클릭 시 해당 페르소나가 선택된 채 연습 화면으로 진입.
|
||||
|
|
|
|||
|
|
@ -691,6 +691,69 @@ test.describe("full sweep — counseling session", () => {
|
|||
await expect(transcript).toContainText("소속 기관에서 오라고 했어요");
|
||||
});
|
||||
|
||||
test("caps an overdue active session honestly and preserves 44px mobile controls", async ({
|
||||
page,
|
||||
}) => {
|
||||
await routeSessionFixtureApi(page, {
|
||||
durationLimitSeconds: 3600,
|
||||
detailOverrides: {
|
||||
started_at: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
},
|
||||
});
|
||||
|
||||
await page.goto(`/learn/session/${fixtureSessionId}`);
|
||||
await expect(page.locator("#sx-end-dialog-title")).toHaveText(
|
||||
"회기 시간이 끝났어요",
|
||||
);
|
||||
await expect(page.locator(".sx-sessionbar__meta")).toContainText("시간 만료");
|
||||
await expect(page.locator("span.sr-only[aria-live='polite']")).toHaveText(
|
||||
"회기 시간 만료",
|
||||
);
|
||||
|
||||
for (const viewport of [
|
||||
{ width: 390, height: 844 },
|
||||
{ width: 320, height: 568 },
|
||||
]) {
|
||||
await page.setViewportSize(viewport);
|
||||
await page.evaluate(() => new Promise(requestAnimationFrame));
|
||||
const targetMetrics = await page
|
||||
.locator(".sx-page--active button:visible, .sx-page--active textarea:visible")
|
||||
.evaluateAll((elements) =>
|
||||
elements.map((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return {
|
||||
label:
|
||||
element.getAttribute("aria-label") ||
|
||||
element.textContent?.replace(/\s+/g, " ").trim() ||
|
||||
element.tagName,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
};
|
||||
}),
|
||||
);
|
||||
expect(targetMetrics.length, `${viewport.width} visible controls`).toBeGreaterThan(0);
|
||||
for (const target of targetMetrics) {
|
||||
expect(
|
||||
target.width,
|
||||
`${viewport.width} ${target.label} touch width`,
|
||||
).toBeGreaterThanOrEqual(44);
|
||||
expect(
|
||||
target.height,
|
||||
`${viewport.width} ${target.label} touch height`,
|
||||
).toBeGreaterThanOrEqual(44);
|
||||
}
|
||||
const layout = await page.evaluate(() => ({
|
||||
viewportWidth: window.innerWidth,
|
||||
documentWidth: document.documentElement.scrollWidth,
|
||||
bodyText: document.body.innerText,
|
||||
}));
|
||||
expect(layout.documentWidth, `${viewport.width} horizontal overflow`).toBeLessThanOrEqual(
|
||||
layout.viewportWidth,
|
||||
);
|
||||
expect(layout.bodyText).not.toMatch(/\b\d{4,}:\d{2}\b/);
|
||||
}
|
||||
});
|
||||
|
||||
// checklist: session-transcript-autoscroll
|
||||
test("releases autoscroll when scrolling up, jumps back with the latest button, and follows new turns", async ({
|
||||
page,
|
||||
|
|
@ -715,12 +778,27 @@ test.describe("full sweep — counseling session", () => {
|
|||
const jumpButton = page.getByRole("button", { name: "최신으로" });
|
||||
await expect(jumpButton).toHaveCount(0);
|
||||
|
||||
// 최신 발화를 따라가는 동안 scrollport가 모바일 레이아웃으로 재배치돼도
|
||||
// ResizeObserver가 새 하단에 붙이고 layout scroll을 사용자 이탈로 오인하지 않는다.
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await expect
|
||||
.poll(() =>
|
||||
scroller.evaluate((el) => el.scrollHeight - el.scrollTop - el.clientHeight),
|
||||
)
|
||||
.toBeLessThan(24);
|
||||
await expect(jumpButton).toHaveCount(0);
|
||||
|
||||
// 위로 스크롤 → 자동 따라가기 해제 + '최신으로' 복귀 버튼 노출.
|
||||
await scroller.evaluate((el) => {
|
||||
el.scrollTop = 0;
|
||||
el.dispatchEvent(new Event("scroll"));
|
||||
});
|
||||
await scroller.hover();
|
||||
await page.mouse.wheel(0, -10_000);
|
||||
await expect(jumpButton).toBeVisible();
|
||||
await page.setViewportSize({ width: 320, height: 568 });
|
||||
await expect(jumpButton).toBeVisible();
|
||||
await expect
|
||||
.poll(() =>
|
||||
scroller.evaluate((el) => el.scrollHeight - el.scrollTop - el.clientHeight),
|
||||
)
|
||||
.toBeGreaterThanOrEqual(24);
|
||||
|
||||
await jumpButton.click();
|
||||
await expect(jumpButton).toHaveCount(0);
|
||||
|
|
|
|||
|
|
@ -806,9 +806,14 @@ async function expectMobileActiveVisualIntegrity(page: Page) {
|
|||
const avatar = visibleRect(".sx-orb-wrap");
|
||||
const client = visibleRect(".sx-stage__client");
|
||||
const now = visibleRect(".sx-stage__now");
|
||||
const sessionbar = visibleRect(".sx-sessionbar");
|
||||
const timebar = visibleRect(".sx-timebar");
|
||||
const mobileContext = visibleRect(".sx-mobile-context");
|
||||
const transcript = visibleRect(".sx-transcript");
|
||||
const transcriptHead = visibleRect(".sx-transcript__head");
|
||||
const scroll = visibleRect(".sx-transcript__scroll");
|
||||
const compose = visibleRect(".sx-compose");
|
||||
const controlbar = visibleRect(".sx-controlbar");
|
||||
const replies = Array.from(
|
||||
document.querySelectorAll<HTMLElement>(".sx-transcript__scroll .sx-utt"),
|
||||
).filter((element) => getComputedStyle(element).display !== "none");
|
||||
|
|
@ -820,6 +825,44 @@ async function expectMobileActiveVisualIntegrity(page: Page) {
|
|||
|
||||
return {
|
||||
viewport: `${innerWidth}x${innerHeight}`,
|
||||
compactStage: innerWidth <= 420 && innerHeight <= 620,
|
||||
avatarHidden: avatar == null,
|
||||
geometry: {
|
||||
scroll: scroll
|
||||
? { top: scroll.top, bottom: scroll.bottom, height: scroll.height }
|
||||
: null,
|
||||
scrollClientHeight:
|
||||
document.querySelector<HTMLElement>(".sx-transcript__scroll")?.clientHeight ?? null,
|
||||
scrollHeight:
|
||||
document.querySelector<HTMLElement>(".sx-transcript__scroll")?.scrollHeight ?? null,
|
||||
scrollTop:
|
||||
document.querySelector<HTMLElement>(".sx-transcript__scroll")?.scrollTop ?? null,
|
||||
latestReply: latestReply
|
||||
? { top: latestReply.top, bottom: latestReply.bottom, height: latestReply.height }
|
||||
: null,
|
||||
sessionbar: sessionbar
|
||||
? { top: sessionbar.top, bottom: sessionbar.bottom, height: sessionbar.height }
|
||||
: null,
|
||||
timebar: timebar
|
||||
? { top: timebar.top, bottom: timebar.bottom, height: timebar.height }
|
||||
: null,
|
||||
mobileContext: mobileContext
|
||||
? { top: mobileContext.top, bottom: mobileContext.bottom, height: mobileContext.height }
|
||||
: null,
|
||||
transcript: transcript
|
||||
? { top: transcript.top, bottom: transcript.bottom, height: transcript.height }
|
||||
: null,
|
||||
transcriptHead: transcriptHead
|
||||
? { top: transcriptHead.top, bottom: transcriptHead.bottom, height: transcriptHead.height }
|
||||
: null,
|
||||
compose: compose
|
||||
? { top: compose.top, bottom: compose.bottom, height: compose.height }
|
||||
: null,
|
||||
stage: stage ? { top: stage.top, bottom: stage.bottom, height: stage.height } : null,
|
||||
controlbar: controlbar
|
||||
? { top: controlbar.top, bottom: controlbar.bottom, height: controlbar.height }
|
||||
: null,
|
||||
},
|
||||
overlaps,
|
||||
stageContainsAvatar: Boolean(stage && avatar && contained(stage, avatar)),
|
||||
stageContainsClient: Boolean(stage && client && contained(stage, client)),
|
||||
|
|
@ -836,13 +879,18 @@ async function expectMobileActiveVisualIntegrity(page: Page) {
|
|||
};
|
||||
});
|
||||
|
||||
expect(result.overlaps, result.viewport).toEqual([]);
|
||||
expect(result.stageContainsAvatar, result.viewport).toBe(true);
|
||||
expect(result.stageContainsClient, result.viewport).toBe(true);
|
||||
expect(result.statusHidden, result.viewport).toBe(true);
|
||||
expect(result.transcriptContained, result.viewport).toBe(true);
|
||||
expect(result.composeContained, result.viewport).toBe(true);
|
||||
expect(result.latestReplyVisible, result.viewport).toBe(true);
|
||||
const diagnostic = `${result.viewport} ${JSON.stringify(result.geometry)}`;
|
||||
expect(result.overlaps, diagnostic).toEqual([]);
|
||||
if (result.compactStage) {
|
||||
expect(result.avatarHidden, diagnostic).toBe(true);
|
||||
} else {
|
||||
expect(result.stageContainsAvatar, diagnostic).toBe(true);
|
||||
}
|
||||
expect(result.stageContainsClient, diagnostic).toBe(true);
|
||||
expect(result.statusHidden, diagnostic).toBe(true);
|
||||
expect(result.transcriptContained, diagnostic).toBe(true);
|
||||
expect(result.composeContained, diagnostic).toBe(true);
|
||||
expect(result.latestReplyVisible, diagnostic).toBe(true);
|
||||
}
|
||||
|
||||
async function capture(page: Page, projectName: string, stage: string) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue