d5b86c5f89
- login/learner-home/session-review/professor/admin/settings - session-v2(밝은 에디토리얼 톤으로 재제작, 기존 어두운 stage 대체) - 전부 동일 디자인 토큰(세이지틸+테라코타), 윤찬 철칙 준수
511 lines
26 KiB
HTML
511 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vignette — 교수자 콘솔 (개입 필요 학생 triage)</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.min.css">
|
|
<style>
|
|
/* =====================================================================
|
|
Vignette — 교수자 콘솔 (Instructor Console) 와이어
|
|
토큰: DESIGN_CONCEPT.md §3 그대로. 역할 accent 오버라이드 §6.2 = 인디고-블루.
|
|
화면 의도(§6.5): awareness가 아니라 triage. 최상단 = "개입 필요 학생" 액션 큐.
|
|
철칙: border-left 0 · 이모지 0(아이콘 inline SVG) · 카드덤프 0 ·
|
|
순흑/순백 금지 · 강조는 weight/tint/kicker/dot로 · 한 화면 한 의도.
|
|
===================================================================== */
|
|
:root{
|
|
/* 중성 베이스 (따뜻한 종이 + 잉크 네이비-그린) */
|
|
--paper:#FBFAF8; --paper-2:#F4F2EE; --surface:#FFFFFF;
|
|
--neutral-100:#ECEFF1; --neutral-150:#E5E1DA; --neutral-200:#D5DBDE; --neutral-400:#98A4A9;
|
|
--ink:#1C2A2A; --ink-2:#5A6663; --ink-3:#93A09C; --hair:#E5E1DA;
|
|
/* 역할 accent 오버라이드: 교수자 = 인디고-블루(감독) */
|
|
--accent:#3A5BA0; --accent-deep:#2E4A85; --accent-tint:#EAEFF7; --accent-bright:#5478C4;
|
|
/* 보조 온기 (테라코타) — 화면당 1곳 */
|
|
--clay:#B0735C; --clay-deep:#94604C; --clay-tint:#F6F0EC;
|
|
/* 의미색 */
|
|
--pos-text:#2C6E49; --pos-solid:#3B8C5E; --pos-tint:#E8F3EC;
|
|
--warn-text:#8A5A00; --warn-solid:#C28A2C; --warn-tint:#FAF1E0;
|
|
--crit-text:#A8352C; --crit-solid:#C4453A; --crit-tint:#FAEAE8;
|
|
--info-text:#2E5A7A; --info-solid:#3C7299; --info-tint:#EAF1F6;
|
|
--neutral-sig:#8895A2;
|
|
/* 별칭 */
|
|
--text-on-accent:#FBFAF8;
|
|
--focus-ring:rgba(58,91,160,.40);
|
|
/* 폰트 */
|
|
--font-sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
|
|
--font-num:"Pretendard Variable","JetBrains Mono",ui-monospace,monospace;
|
|
/* spacing */
|
|
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
|
|
--radius:8px; --radius-sm:6px; --radius-lg:12px;
|
|
--maxw:1200px;
|
|
--shadow-sm:0 1px 2px rgba(28,42,42,.05);
|
|
--shadow-md:0 4px 14px rgba(28,42,42,.07);
|
|
--ease-out:cubic-bezier(.22,.61,.36,1);
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box;}
|
|
html,body{height:100%;}
|
|
body{
|
|
font-family:var(--font-sans); background:var(--paper); color:var(--ink);
|
|
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
|
|
letter-spacing:-0.01em; line-height:1.6;
|
|
}
|
|
.tab-num{font-variant-numeric:tabular-nums;}
|
|
|
|
/* ============ 공통 앱 셸: 톱바 ============ */
|
|
.topbar{
|
|
height:56px; background:var(--surface); border-bottom:1px solid var(--hair);
|
|
display:flex; align-items:center; gap:var(--sp-6); padding:0 var(--sp-6);
|
|
position:sticky; top:0; z-index:20;
|
|
}
|
|
.brand{display:flex; align-items:center; gap:10px;}
|
|
.brand .mark{display:flex; align-items:center; justify-content:center; width:26px; height:26px;}
|
|
.brand .mark svg{width:24px; height:24px;}
|
|
.brand .wm{font-size:17px; font-weight:700; letter-spacing:-0.02em; color:var(--ink);}
|
|
/* 역할 컨텍스트 라벨 (mono accent, 조용한 유일 신호) */
|
|
.rolelabel{
|
|
font-family:var(--font-num); font-size:13px; font-weight:600;
|
|
letter-spacing:0.04em; color:var(--accent);
|
|
padding-left:var(--sp-4); margin-left:var(--sp-2);
|
|
border-left:1px solid var(--hair); /* 셸 구획 디바이더(강조선 아님) */
|
|
}
|
|
.nav{display:flex; align-items:center; gap:2px; margin-left:auto;}
|
|
.nav a{
|
|
font-size:13.5px; font-weight:500; color:var(--ink-3); text-decoration:none;
|
|
padding:7px 12px; border-radius:var(--radius); transition:all .15s var(--ease-out);
|
|
display:flex; align-items:center; gap:7px;
|
|
}
|
|
.nav a svg{width:16px; height:16px; stroke:currentColor; fill:none;}
|
|
.nav a:hover{color:var(--ink-2); background:var(--neutral-100);}
|
|
.nav a.on{color:var(--accent); background:var(--accent-tint); font-weight:600;}
|
|
.topbar .me{display:flex; align-items:center; gap:9px; margin-left:var(--sp-4);}
|
|
.topbar .me .av{width:30px; height:30px; border-radius:50%; background:var(--accent-tint);
|
|
color:var(--accent); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;}
|
|
.topbar .me .nm{font-size:13px; font-weight:600; color:var(--ink-2);}
|
|
|
|
/* ============ 본문 래퍼 ============ */
|
|
.wrap{max-width:var(--maxw); margin:0 auto; padding:var(--sp-7) var(--sp-6) var(--sp-8);}
|
|
.kicker{
|
|
font-family:var(--font-num); font-size:12px; font-weight:600;
|
|
letter-spacing:0.08em; color:var(--accent);
|
|
display:flex; align-items:center; gap:8px;
|
|
}
|
|
.kicker .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-bright);}
|
|
|
|
/* 페이지 헤드라인 (한 화면 한 메시지) */
|
|
.head{margin-bottom:var(--sp-7);}
|
|
.head .kicker{margin-bottom:var(--sp-3);}
|
|
.head h1{font-size:30px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.3;}
|
|
.head h1 em{font-style:normal; color:var(--accent);}
|
|
.head .sub{font-size:15px; color:var(--ink-3); margin-top:6px;}
|
|
|
|
/* 섹션 헤더(라벨 + 우측 컨트롤) */
|
|
.sechead{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-4);}
|
|
.sechead .lt .kicker{margin-bottom:5px;}
|
|
.sechead .lt .desc{font-size:13px; color:var(--ink-3);}
|
|
.sechead .rt{display:flex; gap:var(--sp-2);}
|
|
.pill{
|
|
font-size:12.5px; font-weight:500; color:var(--ink-2);
|
|
background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
|
|
padding:6px 12px; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
|
|
transition:border-color .15s;
|
|
}
|
|
.pill:hover{border-color:var(--neutral-200);}
|
|
.pill strong{color:var(--ink); font-weight:600;}
|
|
.pill svg{width:13px; height:13px; stroke:var(--ink-3); fill:none;}
|
|
|
|
.block{margin-bottom:var(--sp-8);}
|
|
|
|
/* ============ 1. 개입 큐 (triage, 최우선 풀폭) ============ */
|
|
.queue{
|
|
background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg);
|
|
box-shadow:var(--shadow-sm); overflow:hidden;
|
|
}
|
|
.qrow{
|
|
display:grid; grid-template-columns:18px 150px 1fr 132px 22px;
|
|
align-items:center; column-gap:var(--sp-4);
|
|
padding:var(--sp-5) var(--sp-5); cursor:pointer;
|
|
border-top:1px solid var(--paper-2); transition:background .14s var(--ease-out);
|
|
}
|
|
.qrow:first-child{border-top:none;}
|
|
.qrow:hover{background:var(--accent-tint);}
|
|
.qrow .dot{width:8px; height:8px; border-radius:50%; background:var(--crit-solid);}
|
|
.qrow .who{display:flex; flex-direction:column; gap:2px;}
|
|
.qrow .who .nm{font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-0.01em;}
|
|
.qrow .who .yr{font-size:12px; color:var(--ink-3);}
|
|
.qrow .why{font-size:14px; color:var(--ink-2); line-height:1.5;}
|
|
.qrow .why b{font-weight:600; color:var(--ink);}
|
|
.qrow .why .num{font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--crit-text); font-weight:600;}
|
|
.qrow .last{font-size:12.5px; color:var(--ink-3); text-align:right;}
|
|
.qrow .last .em{display:block; color:var(--warn-text); font-weight:600; font-size:12px; margin-top:2px;}
|
|
.qrow .go{display:flex; justify-content:flex-end;}
|
|
.qrow .go svg{width:18px; height:18px; stroke:var(--ink-3); fill:none; transition:stroke .14s, transform .14s var(--ease-out);}
|
|
.qrow:hover .go svg{stroke:var(--accent); transform:translateX(2px);}
|
|
|
|
/* ============ 2. 학생별 현황 테이블 ============ */
|
|
.tbl{width:100%; border-collapse:collapse; font-size:14px;}
|
|
.tbl thead th{
|
|
font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:0.02em;
|
|
text-align:left; padding:0 var(--sp-3) var(--sp-3); border-bottom:1px solid var(--neutral-200);
|
|
white-space:nowrap;
|
|
}
|
|
.tbl thead th.n{text-align:right;}
|
|
.tbl tbody td{padding:var(--sp-4) var(--sp-3); border-bottom:1px solid var(--paper-2); vertical-align:middle;}
|
|
.tbl tbody tr{cursor:pointer; transition:background .14s var(--ease-out);}
|
|
.tbl tbody tr:hover{background:var(--accent-tint);}
|
|
.tbl .st-nm{font-weight:600; color:var(--ink); white-space:nowrap;}
|
|
.tbl .st-nm .id{display:block; font-size:11.5px; font-weight:400; color:var(--ink-3); margin-top:1px;}
|
|
.tbl td.n{text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; color:var(--ink-2);}
|
|
.tbl td.metric{text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink);}
|
|
.tbl td.metric .ar{font-size:11px; margin-left:2px;}
|
|
.ar.up{color:var(--pos-solid);} .ar.down{color:var(--warn-solid);} .ar.flat{color:var(--ink-3);}
|
|
.tbl td.spark{width:78px;}
|
|
.tbl td.spark svg{display:block;}
|
|
.tbl td.last{color:var(--ink-3); font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:12.5px; white-space:nowrap;}
|
|
.tbl td.state{white-space:nowrap;}
|
|
.statetag{display:inline-flex; align-items:center; gap:7px; font-size:13px;}
|
|
.statetag.ok{color:var(--ink-3);}
|
|
.statetag.warn{color:var(--warn-text); font-weight:500;}
|
|
.statetag.crit{color:var(--crit-text); font-weight:600;}
|
|
.statetag .d{width:7px; height:7px; border-radius:50%;}
|
|
.statetag.crit .d{background:var(--crit-solid);}
|
|
.statetag.warn .d{background:var(--warn-solid);}
|
|
.statetag.ok .d{background:var(--neutral-150);}
|
|
|
|
/* ============ 3. 반 전체 취약 영역 비교 (가로 막대) ============ */
|
|
.compare{
|
|
display:grid; grid-template-columns:1.35fr 1fr; gap:var(--sp-8); align-items:start;
|
|
}
|
|
.hbar-list{display:flex; flex-direction:column; gap:var(--sp-5);}
|
|
.hbar .top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px;}
|
|
.hbar .top .lb{font-size:14px; color:var(--ink); font-weight:500;}
|
|
.hbar .top .tag{font-size:12px; font-weight:600; color:var(--warn-solid); display:inline-flex; align-items:center; gap:5px;}
|
|
.hbar .top .tag svg{width:12px; height:12px; stroke:var(--warn-solid); fill:none;}
|
|
.hbar .top .vv{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-2); font-weight:600;}
|
|
.hbar .track{height:8px; background:var(--paper-2); border-radius:4px; overflow:hidden;}
|
|
.hbar .track .fill{height:100%; border-radius:4px; background:var(--accent);}
|
|
.hbar .track .fill.weak{background:var(--warn-solid);}
|
|
.hbar .note{font-size:12px; color:var(--ink-3); margin-top:7px; line-height:1.5;}
|
|
|
|
/* 우측: 취약 영역 코칭 콜아웃 (info, 좌측바 없음 → tint+dot+kicker) */
|
|
.insight{
|
|
background:var(--accent-tint); border-radius:var(--radius-lg); padding:var(--sp-6);
|
|
}
|
|
.insight .clh{font-size:12px; font-weight:600; letter-spacing:0.04em; color:var(--accent-deep);
|
|
display:flex; align-items:center; gap:8px; margin-bottom:var(--sp-3);}
|
|
.insight .clh::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent);}
|
|
.insight h3{font-size:18px; font-weight:600; color:var(--ink); line-height:1.5; letter-spacing:-0.01em; margin-bottom:var(--sp-3);}
|
|
.insight h3 em{font-style:normal; color:var(--accent-deep);}
|
|
.insight p{font-size:13.5px; color:var(--ink-2); line-height:1.65;}
|
|
.insight .act{
|
|
margin-top:var(--sp-5); display:inline-flex; align-items:center; gap:7px;
|
|
font-size:13.5px; font-weight:600; color:var(--text-on-accent);
|
|
background:var(--accent); border:none; border-radius:var(--radius); padding:10px 16px; cursor:pointer;
|
|
transition:background .16s;
|
|
}
|
|
.insight .act:hover{background:var(--accent-deep);}
|
|
.insight .act svg{width:15px; height:15px; stroke:currentColor; fill:none;}
|
|
|
|
@media (prefers-reduced-motion: reduce){
|
|
*,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;}
|
|
}
|
|
@media (max-width:980px){
|
|
.compare{grid-template-columns:1fr;}
|
|
.nav a span{display:none;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ============ 공통 앱 셸: 톱바 ============ -->
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="mark">
|
|
<!-- 워드마크: 비네트(조리개) — inline SVG, 이모지 아님 -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#3A5BA0" stroke-width="1.6">
|
|
<circle cx="12" cy="12" r="9"/>
|
|
<circle cx="12" cy="12" r="3.4" fill="#3A5BA0" stroke="none"/>
|
|
<path d="M12 3.2 L12 8.6 M20.8 12 L15.4 12 M12 20.8 L12 15.4 M3.2 12 L8.6 12" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
<span class="wm">Vignette</span>
|
|
</div>
|
|
<span class="rolelabel">교수 콘솔</span>
|
|
|
|
<nav class="nav">
|
|
<a href="#" class="on">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.75"><path d="M3 13h8V3H3zM13 21h8V8h-8zM3 21h8v-5H3zM13 4h8V3h-8z" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span>대시보드</span>
|
|
</a>
|
|
<a href="#">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.75"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.87" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span>학습자</span>
|
|
</a>
|
|
<a href="#">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.75"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span>시나리오</span>
|
|
</a>
|
|
<a href="#">
|
|
<svg viewBox="0 0 24 24" stroke-width="1.75"><path d="M12 20V10M18 20V4M6 20v-4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
<span>리포트</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="me">
|
|
<span class="av">한교</span>
|
|
<span class="nm">한지윤 교수</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ============ 본문 ============ -->
|
|
<div class="wrap">
|
|
|
|
<!-- 페이지 헤드라인: 한 화면 한 메시지 -->
|
|
<div class="head">
|
|
<div class="kicker"><span class="dot"></span>상담실습 II · 28명 담당 · 4주차</div>
|
|
<h1>이번 주, <em>3명에게 개입이 필요</em>합니다.</h1>
|
|
<div class="sub">정체·하락 신호가 잡힌 학생을 먼저 보여드립니다. 나머지 25명은 안정 범위입니다.</div>
|
|
</div>
|
|
|
|
<!-- 1. 개입 큐 (triage, 최우선) -->
|
|
<section class="block">
|
|
<div class="sechead">
|
|
<div class="lt">
|
|
<div class="kicker"><span class="dot"></span>개입 필요 학생</div>
|
|
<div class="desc">수치 변화와 행동 신호로 정렬했습니다. 왜 올라왔는지 한 줄로 확인하고 바로 들어가세요.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="queue">
|
|
<div class="qrow">
|
|
<span class="dot"></span>
|
|
<div class="who"><span class="nm">박서연</span><span class="yr">상담심리 3학년</span></div>
|
|
<div class="why">개입정확도 <b>3주 연속 하락</b> <span class="num">61 → 52 → 44</span> · 위기 신호 탐색에서 매번 화제를 돌림</div>
|
|
<div class="last">최근 연습 6/19<span class="em">5일째 미연습</span></div>
|
|
<div class="go"><svg viewBox="0 0 24 24" stroke-width="2"><polyline points="9 18 15 12 9 6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
</div>
|
|
<div class="qrow">
|
|
<span class="dot"></span>
|
|
<div class="who"><span class="nm">이도현</span><span class="yr">상담심리 3학년</span></div>
|
|
<div class="why"><b>위기상담 시뮬 중도이탈 2회</b> · 자해 언급 장면에서 세션 강제 종료, 회피 패턴 반복</div>
|
|
<div class="last">최근 연습 6/20<span class="em">이탈 직후 미복귀</span></div>
|
|
<div class="go"><svg viewBox="0 0 24 24" stroke-width="2"><polyline points="9 18 15 12 9 6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
</div>
|
|
<div class="qrow">
|
|
<span class="dot"></span>
|
|
<div class="who"><span class="nm">최민준</span><span class="yr">상담심리 4학년</span></div>
|
|
<div class="why">라포 점수 <b>급락</b> <span class="num">79 → 58</span> · 슈퍼바이저 <b>피드백 7건 미열람</b>, 같은 실수 반복</div>
|
|
<div class="last">최근 연습 6/22<span class="em">피드백 7건 대기</span></div>
|
|
<div class="go"><svg viewBox="0 0 24 24" stroke-width="2"><polyline points="9 18 15 12 9 6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. 담당 학습자 전체 현황 (테이블) -->
|
|
<section class="block">
|
|
<div class="sechead">
|
|
<div class="lt">
|
|
<div class="kicker"><span class="dot"></span>담당 학습자 현황</div>
|
|
<div class="desc">행을 클릭하면 학습자별 세션·utterance 단위 평가로 들어갑니다.</div>
|
|
</div>
|
|
<div class="rt">
|
|
<span class="pill">정렬 <strong>위험도</strong>
|
|
<svg viewBox="0 0 24 24" stroke-width="2"><polyline points="6 9 12 15 18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</span>
|
|
<span class="pill">영역 <strong>전체</strong>
|
|
<svg viewBox="0 0 24 24" stroke-width="2"><polyline points="6 9 12 15 18 9" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="tbl">
|
|
<thead>
|
|
<tr>
|
|
<th>학습자</th>
|
|
<th class="n">세션</th>
|
|
<th class="n">라포</th>
|
|
<th class="n">기법</th>
|
|
<th class="n">개입</th>
|
|
<th class="n">공감</th>
|
|
<th>추세 (최근 8회)</th>
|
|
<th>최근 연습</th>
|
|
<th>상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- 개입 대상: red dot, 하향 화살표 위주 -->
|
|
<tr>
|
|
<td><span class="st-nm">박서연<span class="id">20231148</span></span></td>
|
|
<td class="n">8</td>
|
|
<td class="metric">55<span class="ar down">▼</span></td>
|
|
<td class="metric">49<span class="ar down">▼</span></td>
|
|
<td class="metric">44<span class="ar down">▼</span></td>
|
|
<td class="metric">58<span class="ar down">▼</span></td>
|
|
<td class="spark">
|
|
<svg width="70" height="22" viewBox="0 0 70 22" fill="none">
|
|
<polyline points="2,4 12,7 22,9 32,12 42,15 52,17 62,19 68,20" stroke="#C28A2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="68" cy="20" r="2.4" fill="#C4453A"/>
|
|
</svg>
|
|
</td>
|
|
<td class="last">6/19</td>
|
|
<td class="state"><span class="statetag crit"><span class="d"></span>개입</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="st-nm">이도현<span class="id">20231152</span></span></td>
|
|
<td class="n">14</td>
|
|
<td class="metric">71<span class="ar flat">→</span></td>
|
|
<td class="metric">66<span class="ar down">▼</span></td>
|
|
<td class="metric">52<span class="ar down">▼</span></td>
|
|
<td class="metric">70<span class="ar flat">→</span></td>
|
|
<td class="spark">
|
|
<svg width="70" height="22" viewBox="0 0 70 22" fill="none">
|
|
<polyline points="2,8 12,6 22,9 32,7 42,11 52,9 62,14 68,12" stroke="#C28A2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="68" cy="12" r="2.4" fill="#C4453A"/>
|
|
</svg>
|
|
</td>
|
|
<td class="last">6/20</td>
|
|
<td class="state"><span class="statetag crit"><span class="d"></span>개입</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="st-nm">최민준<span class="id">20221073</span></span></td>
|
|
<td class="n">11</td>
|
|
<td class="metric">58<span class="ar down">▼</span></td>
|
|
<td class="metric">70<span class="ar flat">→</span></td>
|
|
<td class="metric">64<span class="ar flat">→</span></td>
|
|
<td class="metric">67<span class="ar down">▼</span></td>
|
|
<td class="spark">
|
|
<svg width="70" height="22" viewBox="0 0 70 22" fill="none">
|
|
<polyline points="2,5 12,4 22,7 32,6 42,10 52,9 62,13 68,15" stroke="#C28A2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="68" cy="15" r="2.4" fill="#C4453A"/>
|
|
</svg>
|
|
</td>
|
|
<td class="last">6/22</td>
|
|
<td class="state"><span class="statetag crit"><span class="d"></span>개입</span></td>
|
|
</tr>
|
|
<!-- 살펴볼 점: warn -->
|
|
<tr>
|
|
<td><span class="st-nm">정유나<span class="id">20231130</span></span></td>
|
|
<td class="n">9</td>
|
|
<td class="metric">74<span class="ar up">▲</span></td>
|
|
<td class="metric">62<span class="ar flat">→</span></td>
|
|
<td class="metric">59<span class="ar down">▼</span></td>
|
|
<td class="metric">71<span class="ar up">▲</span></td>
|
|
<td class="spark">
|
|
<svg width="70" height="22" viewBox="0 0 70 22" fill="none">
|
|
<polyline points="2,14 12,12 22,13 32,10 42,11 52,9 62,8 68,9" stroke="#5A6663" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="68" cy="9" r="2.4" fill="#C28A2C"/>
|
|
</svg>
|
|
</td>
|
|
<td class="last">6/23</td>
|
|
<td class="state"><span class="statetag warn"><span class="d"></span>관찰</span></td>
|
|
</tr>
|
|
<!-- 양호: 무채 -->
|
|
<tr>
|
|
<td><span class="st-nm">김수련<span class="id">20221089</span></span></td>
|
|
<td class="n">12</td>
|
|
<td class="metric">82<span class="ar up">▲</span></td>
|
|
<td class="metric">68<span class="ar flat">→</span></td>
|
|
<td class="metric">61<span class="ar down">▼</span></td>
|
|
<td class="metric">75<span class="ar up">▲</span></td>
|
|
<td class="spark">
|
|
<svg width="70" height="22" viewBox="0 0 70 22" fill="none">
|
|
<polyline points="2,16 12,14 22,12 32,11 42,8 52,7 62,5 68,4" stroke="#5A6663" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="68" cy="4" r="2.4" fill="#3A5BA0"/>
|
|
</svg>
|
|
</td>
|
|
<td class="last">6/24</td>
|
|
<td class="state"><span class="statetag ok"><span class="d"></span>양호</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="st-nm">한가람<span class="id">20231115</span></span></td>
|
|
<td class="n">15</td>
|
|
<td class="metric">88<span class="ar up">▲</span></td>
|
|
<td class="metric">79<span class="ar up">▲</span></td>
|
|
<td class="metric">71<span class="ar flat">→</span></td>
|
|
<td class="metric">84<span class="ar up">▲</span></td>
|
|
<td class="spark">
|
|
<svg width="70" height="22" viewBox="0 0 70 22" fill="none">
|
|
<polyline points="2,12 12,11 22,9 32,9 42,6 52,7 62,4 68,3" stroke="#5A6663" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="68" cy="3" r="2.4" fill="#3A5BA0"/>
|
|
</svg>
|
|
</td>
|
|
<td class="last">6/24</td>
|
|
<td class="state"><span class="statetag ok"><span class="d"></span>양호</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="st-nm">오세진<span class="id">20221061</span></span></td>
|
|
<td class="n">10</td>
|
|
<td class="metric">79<span class="ar flat">→</span></td>
|
|
<td class="metric">73<span class="ar up">▲</span></td>
|
|
<td class="metric">68<span class="ar up">▲</span></td>
|
|
<td class="metric">77<span class="ar flat">→</span></td>
|
|
<td class="spark">
|
|
<svg width="70" height="22" viewBox="0 0 70 22" fill="none">
|
|
<polyline points="2,13 12,12 22,10 32,11 42,8 52,8 62,6 68,6" stroke="#5A6663" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="68" cy="6" r="2.4" fill="#3A5BA0"/>
|
|
</svg>
|
|
</td>
|
|
<td class="last">6/23</td>
|
|
<td class="state"><span class="statetag ok"><span class="d"></span>양호</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div style="margin-top:var(--sp-4); font-size:13px; color:var(--ink-3);">전체 28명 중 7명 표시 · <span style="color:var(--accent); font-weight:600; cursor:pointer;">21명 더 보기</span></div>
|
|
</section>
|
|
|
|
<!-- 3. 반 전체 취약 영역 비교 -->
|
|
<section class="block">
|
|
<div class="sechead">
|
|
<div class="lt">
|
|
<div class="kicker"><span class="dot"></span>반 전체 취약 영역</div>
|
|
<div class="desc">반 평균 역량을 비교합니다. 다 같이 못하는 기법이 다음 수업의 표적입니다.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="compare">
|
|
<!-- 가로 막대: 최저 항목만 강조, 나머지 무채 -->
|
|
<div class="hbar-list">
|
|
<div class="hbar">
|
|
<div class="top"><span class="lb">반영적 경청</span><span class="vv">78</span></div>
|
|
<div class="track"><div class="fill" style="width:78%"></div></div>
|
|
</div>
|
|
<div class="hbar">
|
|
<div class="top"><span class="lb">라포 형성</span><span class="vv">74</span></div>
|
|
<div class="track"><div class="fill" style="width:74%"></div></div>
|
|
</div>
|
|
<div class="hbar">
|
|
<div class="top"><span class="lb">공감 반영</span><span class="vv">71</span></div>
|
|
<div class="track"><div class="fill" style="width:71%"></div></div>
|
|
</div>
|
|
<div class="hbar">
|
|
<div class="top"><span class="lb">개방형 질문</span><span class="vv">63</span></div>
|
|
<div class="track"><div class="fill" style="width:63%"></div></div>
|
|
</div>
|
|
<div class="hbar">
|
|
<div class="top">
|
|
<span class="lb">위기 개입 정확도</span>
|
|
<span class="tag">
|
|
<svg viewBox="0 0 24 24" stroke-width="2"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
가장 취약
|
|
</span>
|
|
</div>
|
|
<div class="track"><div class="fill weak" style="width:47%"></div></div>
|
|
<div class="note">28명 중 19명이 자해·위기 신호 장면에서 화제 전환 또는 성급한 안심시키기로 대응. 반 평균 47점.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 우측 인사이트 콜아웃 (info tint, 좌측바 없음) -->
|
|
<div class="insight">
|
|
<div class="clh">이번 주 코칭 포커스</div>
|
|
<h3>위기 개입에서 <em>침묵을 견디는 훈련</em>이 반 전체에 필요합니다.</h3>
|
|
<p>자해 언급 직후 19명이 평균 1.8초 안에 화제를 돌렸습니다. 박서연·이도현·최민준의 하락도 모두 이 지점에서 시작됩니다. 위기 시나리오를 다음 합동 실습 과제로 배정하시겠어요?</p>
|
|
<button class="act">
|
|
위기 시나리오 과제 배정
|
|
<svg viewBox="0 0 24 24" stroke-width="2"><polyline points="9 18 15 12 9 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|