yunchan/vignette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

세션 진행 패널 스타일 보강

Browse source
This commit is contained in:
Yun Chan 2026-06-29 00:01:40 +09:00
parent d18e4b6b4b
commit f456b8997a
2 changed files with 307 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

101
apps/web/src/pages/Session.tsx
View file

@ -2041,6 +2041,26 @@ export default function Session() {
))}
</div>
</section>
<section className="sx-panel sx-session-progress">
<div className="sx-session-progress__head">
<Kicker>세션 진행</Kicker>
</div>
<div className="sx-session-progress__grid">
<span>
<b>{elapsedLabel}</b>
<small>회기 시간</small>
</span>
<span>
<b>{remainingLabel}</b>
<small>권장 30분 기준</small>
</span>
<span>
<b>{turnCount}턴</b>
<small>저장된 발화</small>
</span>
</div>
</section>
</div>
{/* ── CENTER ── */}
@ -2076,8 +2096,14 @@ export default function Session() {
/>
</div>
<div className="sx-stage__client">
<span className="sx-stage__client-kicker">{clientName}</span>
<p>{stageClientLine}</p>
</div>
<div className="sx-stage__now">
지금: {stageStateText[avatarState]} · {avatarExpressionLabel}
<span>지금: {stageStateText[avatarState]}</span>
<small>{avatarExpressionLabel}</small>
</div>
</section>
@ -2270,6 +2296,38 @@ export default function Session() {
</p>
)}
<div className="sx-signal__wave" aria-hidden="true">
<i />
<i />
<i />
<i />
<i />
<i />
<i />
<i />
</div>
<div className="sx-signal__rows">
<span>
<b>음성 입력</b>
<small>{voiceInputStatus}</small>
</span>
<span>
<b>응답 상태</b>
<small>{responseStatus}</small>
</span>
<span>
<b>화면 모드</b>
<small>
{feedbackMode === "ambient"
? "상태 신호"
: feedbackMode === "coached"
? "코칭"
: "몰입"}
</small>
</span>
</div>
<div className="sx-signal__seq">
<span className="sx-signal__seq-label">최근 흐름</span>
<span className="sx-signal__seq-dots">
@ -2397,19 +2455,34 @@ export default function Session() {
</div>
</section>
<section className={"sx-safety" + (safety ? "" : " sx-safety--ok")}>
<span className="sx-safety__ico">
<Icon name={safety ? "alert" : "shield"} size={17} />
</span>
<span className="sx-safety__text">
<b>안전 점검</b> · {safety ?? "현재 감지된 위기 신호 없음"}
{crisisResource ? (
<span className="sx-crisis-resource">
<strong>{crisisResource.title}</strong>
<a href={`tel:${crisisResource.number}`}>{crisisResource.number}</a>
</span>
) : null}
</span>
<section className={"sx-panel sx-safety" + (safety ? "" : " sx-safety--ok")}>
<div className="sx-safety__head">
<span className="sx-safety__ico">
<Icon name={safety ? "alert" : "shield"} size={17} />
</span>
<Kicker>안전 점검</Kicker>
<span className="sx-safety__badge">{safetyStatusText}</span>
</div>
<div className="sx-safety__rows">
<span>
<b>위기 신호</b>
<small>{safety ?? "감지 없음"}</small>
</span>
<span>
<b>대응 상태</b>
<small>{safety ? "즉시 확인" : "모니터링"}</small>
</span>
<span>
<b>긴급 자원</b>
<small>{crisisResource ? crisisResource.title : "대기"}</small>
</span>
</div>
{crisisResource ? (
<span className="sx-crisis-resource">
<strong>{crisisResource.title}</strong>
<a href={`tel:${crisisResource.number}`}>{crisisResource.number}</a>
</span>
) : null}
</section>
</div>
</div>