feat: assemble responsive app shell navigation

2026-07-25 23:52:34 +09:00
parent 0925d252d9
commit baeda39057
17 changed files with 1238 additions and 60 deletions
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+
+import { PageHeader } from "../components/page-header.jsx";
+import { useSession } from "../providers/session-provider.jsx";
+
+export default function AuthExamplePage() {
+  const location = useLocation();
+  const { sessionState, beginSignIn, signOut, recover } = useSession();
+  const [pending, setPending] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  /** @param {() => Promise<unknown>} action */
+  async function execute(action) {
+    setPending(true);
+    setFailed(false);
+    try {
+      await action();
+    } catch {
+      setFailed(true);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <section className="ui-page">
+      <PageHeader
+        eyebrow="예제"
+        title="인증 연동"
+        description="스켈레톤은 자격 증명을 소유하지 않고 외부 인증 구현이 연결될 포트와 화면 상태만 제공합니다."
+      />
+      <section className="ui-panel auth-example" aria-labelledby="auth-state-title">
+        <div>
+          <h2 id="auth-state-title">현재 세션 상태</h2>
+          <output className="session-status" data-state={sessionState}>
+            {sessionState}
+          </output>
+        </div>
+        <div className="button-row">
+          <button
+            className="ui-button"
+            type="button"
+            disabled={pending || sessionState === "integration-failed"}
+            onClick={() =>
+              void execute(() =>
+                beginSignIn(`${location.pathname}${location.search}`),
+              )
+            }
+          >
+            로그인 시작
+          </button>
+          <button
+            className="ui-button ui-button--secondary"
+            type="button"
+            disabled={pending || sessionState !== "authenticated"}
+            onClick={() => void execute(signOut)}
+          >
+            로그아웃
+          </button>
+          <button
+            className="ui-button ui-button--secondary"
+            type="button"
+            disabled={pending || sessionState !== "recovery-pending"}
+            onClick={() => void execute(recover)}
+          >
+            세션 복구
+          </button>
+        </div>
+        {sessionState === "integration-failed" ? (
+          <p role="status">
+            외부 인증 소유자가 연결되지 않았습니다. 런타임 호스트의 인증
+            계약을 연결하세요.
+          </p>
+        ) : null}
+        {failed ? <p role="alert">인증 작업을 완료하지 못했습니다.</p> : null}
+      </section>
+    </section>
+  );
+}