평가 및 화면 구조 정리

apps/web/src/pages/login/LoginBrand.tsx

@@ -0,0 +1,61 @@
+import { Icon } from "../../components/ui/Icon";
+
+interface LoginBrandProps {
+  allowedDomains: string[];
+  oauthChecking: boolean;
+}
+
+function VignetteMark() {
+  return (
+    <span className="lg-mark" aria-hidden="true">
+      <svg viewBox="0 0 26 26" width={26} height={26} fill="none">
+        <circle cx="13" cy="13" r="11" stroke="currentColor" strokeWidth="2" />
+        <path
+          d="M8 14.5c1.4 1.7 3 2.5 5 2.5s3.6-.8 5-2.5"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+        <circle cx="13" cy="9" r="1.6" fill="var(--clay)" />
+      </svg>
+    </span>
+  );
+}
+
+export function LoginBrand({ allowedDomains, oauthChecking }: LoginBrandProps) {
+  return (
+    <section className="lg-brand" aria-label="Vignette">
+      <div className="lg-wordmark">
+        <VignetteMark />
+        <span>Vignette</span>
+      </div>
+
+      <div className="lg-copy">
+        <span className="lg-kicker">
+          <span className="d" aria-hidden="true" />
+          상담 시뮬레이션 학습
+        </span>
+        <h1>
+          <span className="lg-highlight">실제 계정으로 들어가고</span>, <br />
+          실제 회기만 남깁니다.
+        </h1>
+        <p>
+          Vignette는 상담 연습, 교수자 피드백, 운영 관리 권한을 안전한 로그인 세션으로 분리합니다.
+          브라우저에는 인증 토큰을 저장하지 않습니다.
+        </p>
+      </div>
+
+      <div className="lg-policy">
+        <span>
+          <Icon name="shield" size={17} />
+          허용 도메인
+        </span>
+        {allowedDomains.length ? (
+          allowedDomains.map((domain) => <b key={domain}>{domain}</b>)
+        ) : (
+          <b>{oauthChecking ? "확인 중" : "설정 필요"}</b>
+        )}
+      </div>
+    </section>
+  );
+}