feat: port TechLog Studio shell and indexes
This commit is contained in:
DongHyeonka
@@ -0,0 +1,30 @@
|
||||
# Task 10 report
|
||||
|
||||
## Mapping
|
||||
|
||||
- Source Studio provider/runtime shell and header → application-input-created, provider-scoped gateway; React Router navigation; native Public link; persisted `pageshow` generation reset.
|
||||
- Source dashboard → exact workspace heading, totals, workflow sections, row labels, links, loading and error copy.
|
||||
- Source document list → exact search/filter/list/empty surfaces plus cursor pagination, retry, and abort of obsolete requests.
|
||||
- Source new-document form → exact type cards/copy, session gateway creation, announcement, and editor redirect.
|
||||
- Source Studio not-found → in-shell 404 surface; Studio routes remain public with no auth UI.
|
||||
|
||||
## TDD evidence
|
||||
|
||||
- RED: `corepack pnpm exec vitest run tests/features/tech-log/studio-shell-smoke.test.tsx tests/features/tech-log/studio-screens-smoke.test.tsx` failed both suites at missing Studio presentation imports (exit 1).
|
||||
- GREEN: the same command passed 2 files / 8 tests.
|
||||
- Focused regression: both Studio suites plus `tests/features/tech-log/runtime-composition.test.ts` passed 3 files / 10 tests.
|
||||
|
||||
## Files
|
||||
|
||||
- Added the 12 Task 10 Studio provider/runtime/shell/component/page files under `src/features/tech-log/presentation/studio/`.
|
||||
- Added `studio-shell-smoke.test.tsx` and `studio-screens-smoke.test.tsx`.
|
||||
|
||||
## SHA
|
||||
|
||||
- Base: `2b6fa42620136c3edb1506f907ce79c2251d1316`.
|
||||
- Implementation: the commit containing this report, titled `feat: port TechLog Studio shell and indexes` (final SHA recorded in the Task 10 handoff).
|
||||
|
||||
## Deferred
|
||||
|
||||
- Task 11 editor screens and Task 12 dirty-leave/save/validation dialogs remain intentionally deferred.
|
||||
- Broad architecture, type, lint, build, security, and visual gates remain deferred to Task 14 by user direction.
|
||||
@@ -0,0 +1,226 @@
|
||||
import { useEffect, useState, type FormEvent } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import type { ListDocumentsQuery } from "../../../application/ports/studio-gateway.ts";
|
||||
import type { DocumentPage } from "../../../contracts/studio/contract.ts";
|
||||
import { useStudio } from "../use-studio.ts";
|
||||
|
||||
const kindLabel = {
|
||||
CASE: "Case",
|
||||
REFERENCE: "Reference",
|
||||
QUESTION: "Question",
|
||||
} as const;
|
||||
const publicationLabel = {
|
||||
NEVER_PUBLISHED: "게시 전",
|
||||
PUBLISHED: "게시 중",
|
||||
UNPUBLISHED: "게시 취소",
|
||||
} as const;
|
||||
const nextLabel = {
|
||||
CONTINUE_EDITING: "작성 계속",
|
||||
VALIDATE: "검증하기",
|
||||
FIX_VALIDATION: "오류 수정",
|
||||
CREATE_PREVIEW: "미리보기",
|
||||
PUBLISH: "게시하기",
|
||||
NONE: "완료",
|
||||
} as const;
|
||||
|
||||
function isAbortError(error: unknown): boolean {
|
||||
return error instanceof DOMException && error.name === "AbortError";
|
||||
}
|
||||
|
||||
export function DocumentList() {
|
||||
const { gateway } = useStudio();
|
||||
const [searchDraft, setSearchDraft] = useState("");
|
||||
const [q, setQ] = useState("");
|
||||
const [kind, setKind] = useState<ListDocumentsQuery["kind"]>();
|
||||
const [status, setStatus] =
|
||||
useState<ListDocumentsQuery["publicationStatus"]>();
|
||||
const [cursor, setCursor] = useState<string>();
|
||||
const [page, setPage] = useState<DocumentPage | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [retryGeneration, setRetryGeneration] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
setLoading(true);
|
||||
setError("");
|
||||
void gateway
|
||||
.listDocuments(
|
||||
{
|
||||
...(q ? { q } : {}),
|
||||
...(kind ? { kind } : {}),
|
||||
...(status ? { publicationStatus: status } : {}),
|
||||
...(cursor ? { cursor } : {}),
|
||||
limit: 20,
|
||||
},
|
||||
{ signal: controller.signal },
|
||||
)
|
||||
.then(
|
||||
(value) => {
|
||||
setPage(value);
|
||||
setLoading(false);
|
||||
},
|
||||
(reason: unknown) => {
|
||||
if (isAbortError(reason)) return;
|
||||
setError("작업본을 불러오지 못했습니다.");
|
||||
setLoading(false);
|
||||
},
|
||||
);
|
||||
return () => controller.abort();
|
||||
}, [cursor, gateway, kind, q, retryGeneration, status]);
|
||||
|
||||
const changeFilter = (next: {
|
||||
kind?: ListDocumentsQuery["kind"];
|
||||
status?: ListDocumentsQuery["publicationStatus"];
|
||||
}) => {
|
||||
if ("kind" in next) setKind(next.kind);
|
||||
if ("status" in next) setStatus(next.status);
|
||||
setCursor(undefined);
|
||||
};
|
||||
const submitSearch = (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setQ(searchDraft.trim());
|
||||
setCursor(undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="studio-page studio-documents-page">
|
||||
<header className="studio-page-top">
|
||||
<div className="studio-page-heading">
|
||||
<p className="studio-eyebrow">WORKING COPIES</p>
|
||||
<h1>작업본</h1>
|
||||
<p>
|
||||
세션에 있는 Case, Reference, Question을 찾고 다음 작업으로 이동합니다.
|
||||
</p>
|
||||
</div>
|
||||
<Link className="studio-primary-action" to="/studio/documents/new">
|
||||
새 문서
|
||||
</Link>
|
||||
</header>
|
||||
<section className="studio-document-tools" aria-label="작업본 검색과 필터">
|
||||
<form role="search" onSubmit={submitSearch}>
|
||||
<label htmlFor="studio-search">검색</label>
|
||||
<div>
|
||||
<input
|
||||
id="studio-search"
|
||||
type="search"
|
||||
value={searchDraft}
|
||||
placeholder="제목, 요약, slug"
|
||||
onChange={(event) => setSearchDraft(event.target.value)}
|
||||
/>
|
||||
<button type="submit">검색</button>
|
||||
</div>
|
||||
</form>
|
||||
<label>
|
||||
종류
|
||||
<select
|
||||
value={kind ?? ""}
|
||||
onChange={(event) =>
|
||||
changeFilter({
|
||||
kind: (event.target.value || undefined) as ListDocumentsQuery["kind"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="">전체</option>
|
||||
<option value="CASE">Case</option>
|
||||
<option value="REFERENCE">Reference</option>
|
||||
<option value="QUESTION">Question</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
상태
|
||||
<select
|
||||
value={status ?? ""}
|
||||
onChange={(event) =>
|
||||
changeFilter({
|
||||
status: (event.target.value || undefined) as ListDocumentsQuery["publicationStatus"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="">전체</option>
|
||||
<option value="NEVER_PUBLISHED">게시 전</option>
|
||||
<option value="PUBLISHED">게시 중</option>
|
||||
<option value="UNPUBLISHED">게시 취소</option>
|
||||
</select>
|
||||
</label>
|
||||
</section>
|
||||
{loading ? (
|
||||
<p className="studio-loading" role="status">
|
||||
작업본을 불러오는 중입니다.
|
||||
</p>
|
||||
) : null}
|
||||
{error ? (
|
||||
<>
|
||||
<p className="studio-screen-error" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
<button
|
||||
className="studio-secondary-button"
|
||||
type="button"
|
||||
onClick={() => setRetryGeneration((current) => current + 1)}
|
||||
>
|
||||
다시 시도
|
||||
</button>
|
||||
</>
|
||||
) : null}
|
||||
{page && !loading && !error ? (
|
||||
<>
|
||||
<p className="studio-result-count">{page.items.length}개의 작업본</p>
|
||||
{page.items.length ? (
|
||||
<div className="studio-document-list">
|
||||
{page.items.map((item) => (
|
||||
<article className="studio-document-row" key={item.id}>
|
||||
<p className="studio-row-label">{kindLabel[item.kind]}</p>
|
||||
<div className="studio-document-title">
|
||||
<h2>
|
||||
<Link to={`/studio/documents/${item.id}/edit`}>
|
||||
{item.title || "제목 없는 작업본"}
|
||||
</Link>
|
||||
</h2>
|
||||
<p>{item.project?.label ?? "프로젝트 미지정"}</p>
|
||||
</div>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>상태</dt>
|
||||
<dd>{publicationLabel[item.publicationStatus]}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>다음</dt>
|
||||
<dd>{nextLabel[item.nextAction]}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>수정</dt>
|
||||
<dd>
|
||||
<time dateTime={item.updatedAt}>
|
||||
{new Date(item.updatedAt).toLocaleDateString("ko-KR", {
|
||||
timeZone: "Asia/Seoul",
|
||||
})}
|
||||
</time>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<section className="studio-empty-state">
|
||||
<h2>조건에 맞는 작업본이 없습니다</h2>
|
||||
<p>검색어 또는 필터를 바꾸거나 새 문서를 만드세요.</p>
|
||||
<Link to="/studio/documents/new">새 문서 만들기</Link>
|
||||
</section>
|
||||
)}
|
||||
{page.nextCursor ? (
|
||||
<button
|
||||
className="studio-secondary-button"
|
||||
type="button"
|
||||
onClick={() => setCursor(page.nextCursor ?? undefined)}
|
||||
>
|
||||
다음 작업본
|
||||
</button>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
import { useEffect, useRef, useState, type FormEvent } from "react";
|
||||
|
||||
import type {
|
||||
CreateDocumentInput,
|
||||
RecordKind,
|
||||
} from "../../../contracts/studio/contract.ts";
|
||||
import { createLocalId } from "../../../domain/studio/local-id.ts";
|
||||
import { useStudio } from "../use-studio.ts";
|
||||
|
||||
const types = [
|
||||
{
|
||||
kind: "CASE",
|
||||
title: "Case",
|
||||
description: "문제를 재현하고 검증한 결론을 기록합니다.",
|
||||
fields: "문제 · 결론 · 환경 · 재현 · 본문",
|
||||
},
|
||||
{
|
||||
kind: "REFERENCE",
|
||||
title: "Reference",
|
||||
description: "반복해서 적용할 기술 기준을 정리합니다.",
|
||||
fields: "목적 · 규칙 · 적용 조건 · 예외 · 예시",
|
||||
},
|
||||
{
|
||||
kind: "QUESTION",
|
||||
title: "Question",
|
||||
description: "아직 닫히지 않은 판단과 다음 검증을 관리합니다.",
|
||||
fields: "상태 · 사실 · 가정 · 미지수 · 선택지",
|
||||
},
|
||||
] as const;
|
||||
|
||||
function emptyDocument(kind: RecordKind): CreateDocumentInput {
|
||||
const common = {
|
||||
title: "",
|
||||
slug: "" as const,
|
||||
summary: "",
|
||||
topicId: null,
|
||||
projectId: null,
|
||||
relations: [],
|
||||
};
|
||||
if (kind === "CASE") {
|
||||
return {
|
||||
...common,
|
||||
kind,
|
||||
problem: "",
|
||||
conclusion: "",
|
||||
environment: "",
|
||||
reproduction: "",
|
||||
lastVerifiedOn: null,
|
||||
bodyMarkdown: "",
|
||||
};
|
||||
}
|
||||
if (kind === "REFERENCE") {
|
||||
return {
|
||||
...common,
|
||||
kind,
|
||||
purpose: "",
|
||||
rules: [],
|
||||
applyWhen: [],
|
||||
exceptions: [],
|
||||
examples: [],
|
||||
verifiedOn: null,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...common,
|
||||
kind,
|
||||
questionStatus: null,
|
||||
facts: [],
|
||||
assumptions: [],
|
||||
unknowns: [],
|
||||
constraints: [],
|
||||
options: [],
|
||||
nextValidation: "",
|
||||
resolution: null,
|
||||
};
|
||||
}
|
||||
|
||||
function isAbortError(error: unknown): boolean {
|
||||
return error instanceof DOMException && error.name === "AbortError";
|
||||
}
|
||||
|
||||
export function NewDocumentForm() {
|
||||
const { gateway, navigateInternal, setRequestAnnouncement } = useStudio();
|
||||
const [kind, setKind] = useState<RecordKind>("CASE");
|
||||
const [pending, setPending] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const locked = useRef(false);
|
||||
const activeRequest = useRef<AbortController | null>(null);
|
||||
|
||||
useEffect(() => () => activeRequest.current?.abort(), []);
|
||||
|
||||
const submit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (locked.current) return;
|
||||
locked.current = true;
|
||||
setPending(true);
|
||||
setError("");
|
||||
const controller = new AbortController();
|
||||
activeRequest.current = controller;
|
||||
try {
|
||||
const document = await gateway.createDocument(emptyDocument(kind), {
|
||||
idempotencyKey: createLocalId("studio-create"),
|
||||
signal: controller.signal,
|
||||
});
|
||||
setRequestAnnouncement(
|
||||
`${types.find((type) => type.kind === kind)?.title} 작업본을 만들었습니다.`,
|
||||
);
|
||||
navigateInternal(`/studio/documents/${document.id}/edit`);
|
||||
} catch (reason) {
|
||||
if (!isAbortError(reason)) {
|
||||
setError("작업본을 만들지 못했습니다. 다시 시도해 주세요.");
|
||||
}
|
||||
} finally {
|
||||
if (activeRequest.current === controller) activeRequest.current = null;
|
||||
locked.current = false;
|
||||
setPending(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="studio-page studio-new-page">
|
||||
<header className="studio-page-heading">
|
||||
<p className="studio-eyebrow">NEW WORKING COPY</p>
|
||||
<h1>새 문서</h1>
|
||||
<p>
|
||||
목적에 맞는 기록 종류를 선택하면 빈 작업본을 만들고 바로 편집을 시작합니다.
|
||||
</p>
|
||||
</header>
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
void submit(event);
|
||||
}}
|
||||
>
|
||||
<fieldset className="studio-type-list">
|
||||
<legend>문서 종류</legend>
|
||||
{types.map((type) => (
|
||||
<label key={type.kind}>
|
||||
<input
|
||||
type="radio"
|
||||
name="kind"
|
||||
value={type.kind}
|
||||
checked={kind === type.kind}
|
||||
onChange={() => setKind(type.kind)}
|
||||
/>
|
||||
<strong>{type.title}</strong>
|
||||
<span>{type.description}</span>
|
||||
<small>{type.fields}</small>
|
||||
</label>
|
||||
))}
|
||||
</fieldset>
|
||||
<div className="studio-create-footer">
|
||||
<button className="studio-primary-button" type="submit" disabled={pending}>
|
||||
{pending ? "만드는 중…" : "작업본 만들기"}
|
||||
</button>
|
||||
<p>이 화면의 작업본은 현재 Studio 세션에서만 유지됩니다.</p>
|
||||
</div>
|
||||
{error ? (
|
||||
<p className="studio-screen-error" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import type { StudioDashboard as StudioDashboardData } from "../../../contracts/studio/contract.ts";
|
||||
import type { components } from "../../../contracts/studio/generated.ts";
|
||||
import { useStudio } from "../use-studio.ts";
|
||||
|
||||
type DocumentSummary = components["schemas"]["DocumentSummary"];
|
||||
|
||||
const kindLabel = {
|
||||
CASE: "Case",
|
||||
REFERENCE: "Reference",
|
||||
QUESTION: "Question",
|
||||
} as const;
|
||||
const actionLabel = {
|
||||
CONTINUE_EDITING: "작성 계속",
|
||||
VALIDATE: "검증하기",
|
||||
FIX_VALIDATION: "오류 수정",
|
||||
CREATE_PREVIEW: "미리보기 만들기",
|
||||
PUBLISH: "게시하기",
|
||||
NONE: "게시 완료",
|
||||
} as const;
|
||||
|
||||
function WorkRow({ item }: Readonly<{ item: DocumentSummary }>) {
|
||||
return (
|
||||
<article className="studio-work-row">
|
||||
<p className="studio-row-label">{kindLabel[item.kind]}</p>
|
||||
<div>
|
||||
<h3>
|
||||
<Link to={`/studio/documents/${item.id}/edit`}>
|
||||
{item.title || "제목 없는 작업본"}
|
||||
</Link>
|
||||
</h3>
|
||||
<p>
|
||||
{item.project?.label ?? "프로젝트 미지정"} · {actionLabel[item.nextAction]}
|
||||
</p>
|
||||
</div>
|
||||
<time dateTime={item.updatedAt}>
|
||||
{new Date(item.updatedAt).toLocaleDateString("ko-KR", {
|
||||
timeZone: "Asia/Seoul",
|
||||
})}
|
||||
</time>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function WorkSection({
|
||||
title,
|
||||
items,
|
||||
href,
|
||||
empty,
|
||||
}: Readonly<{
|
||||
title: string;
|
||||
items: DocumentSummary[];
|
||||
href: string;
|
||||
empty: string;
|
||||
}>) {
|
||||
return (
|
||||
<section className="studio-work-section">
|
||||
<div className="studio-section-title">
|
||||
<h2>{title}</h2>
|
||||
<Link to={href}>전체 보기</Link>
|
||||
</div>
|
||||
<div className="studio-work-list">
|
||||
{items.length ? (
|
||||
items.map((item) => <WorkRow key={item.id} item={item} />)
|
||||
) : (
|
||||
<p className="studio-empty-inline">{empty}</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function isAbortError(error: unknown): boolean {
|
||||
return error instanceof DOMException && error.name === "AbortError";
|
||||
}
|
||||
|
||||
export function StudioDashboard() {
|
||||
const { gateway } = useStudio();
|
||||
const [dashboard, setDashboard] = useState<StudioDashboardData | null>(null);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
void gateway.getDashboard({ signal: controller.signal }).then(
|
||||
(value) => setDashboard(value),
|
||||
(reason: unknown) => {
|
||||
if (!isAbortError(reason)) setError("작업 흐름을 불러오지 못했습니다.");
|
||||
},
|
||||
);
|
||||
return () => controller.abort();
|
||||
}, [gateway]);
|
||||
|
||||
const validationItems =
|
||||
dashboard?.continueWriting.filter((item) =>
|
||||
["VALIDATE", "FIX_VALIDATION", "CREATE_PREVIEW"].includes(item.nextAction),
|
||||
) ?? [];
|
||||
|
||||
return (
|
||||
<div className="studio-page studio-dashboard-page">
|
||||
<header className="studio-page-top">
|
||||
<div className="studio-page-heading">
|
||||
<p className="studio-eyebrow">WORKSPACE</p>
|
||||
<h1>작업 흐름</h1>
|
||||
<p>작성 중인 기록을 이어서 정리하고 검증·게시 흐름으로 연결합니다.</p>
|
||||
</div>
|
||||
<Link className="studio-primary-action" to="/studio/documents/new">
|
||||
새 문서
|
||||
</Link>
|
||||
</header>
|
||||
{error ? (
|
||||
<p className="studio-screen-error" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
{!dashboard && !error ? (
|
||||
<p className="studio-loading" role="status">
|
||||
Studio 요약을 불러오는 중입니다.
|
||||
</p>
|
||||
) : null}
|
||||
{dashboard ? (
|
||||
<>
|
||||
<section className="studio-summary-grid" aria-label="Studio 요약">
|
||||
<div>
|
||||
<span>전체 작업본</span>
|
||||
<strong>{dashboard.totals.documents}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>검증할 기록</span>
|
||||
<strong>{validationItems.length}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>게시 준비</span>
|
||||
<strong>{dashboard.totals.readyToPublish}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>게시 기록</span>
|
||||
<strong>{dashboard.totals.publications}</strong>
|
||||
</div>
|
||||
</section>
|
||||
<WorkSection
|
||||
title="이어서 작성"
|
||||
items={dashboard.continueWriting}
|
||||
href="/studio/documents"
|
||||
empty="이어서 작성할 문서가 없습니다."
|
||||
/>
|
||||
<WorkSection
|
||||
title="검증과 미리보기"
|
||||
items={validationItems}
|
||||
href="/studio/documents"
|
||||
empty="현재 검증할 문서가 없습니다."
|
||||
/>
|
||||
<WorkSection
|
||||
title="게시 준비"
|
||||
items={dashboard.readyToPublish}
|
||||
href="/studio/documents"
|
||||
empty="게시 준비가 끝난 문서가 없습니다."
|
||||
/>
|
||||
<section className="studio-work-section">
|
||||
<div className="studio-section-title">
|
||||
<h2>최근 게시</h2>
|
||||
<Link to="/studio/publications">게시 기록 보기</Link>
|
||||
</div>
|
||||
<div className="studio-work-list">
|
||||
{dashboard.recentPublications.length ? (
|
||||
dashboard.recentPublications.map((item) => (
|
||||
<article
|
||||
className="studio-work-row"
|
||||
key={item.event.publicationEventId}
|
||||
>
|
||||
<p className="studio-row-label">
|
||||
{item.event.type === "UNPUBLISHED"
|
||||
? "게시 취소"
|
||||
: item.event.type === "REPUBLISHED"
|
||||
? "재게시"
|
||||
: "게시"}
|
||||
</p>
|
||||
<div>
|
||||
<h3>{item.document.title}</h3>
|
||||
<p>{item.document.project?.label ?? "프로젝트 미지정"}</p>
|
||||
</div>
|
||||
<time dateTime={item.event.occurredAt}>
|
||||
{new Date(item.event.occurredAt).toLocaleDateString("ko-KR", {
|
||||
timeZone: "Asia/Seoul",
|
||||
})}
|
||||
</time>
|
||||
</article>
|
||||
))
|
||||
) : (
|
||||
<p className="studio-empty-inline">아직 게시 기록이 없습니다.</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useId, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const navigation = [
|
||||
{
|
||||
href: "/studio/documents",
|
||||
label: "작업본",
|
||||
active: (path: string) =>
|
||||
path.startsWith("/studio/documents") && path !== "/studio/documents/new",
|
||||
},
|
||||
{
|
||||
href: "/studio/publications",
|
||||
label: "게시 기록",
|
||||
active: (path: string) => path.startsWith("/studio/publications"),
|
||||
},
|
||||
{
|
||||
href: "/studio/documents/new",
|
||||
label: "새 문서",
|
||||
active: (path: string) => path === "/studio/documents/new",
|
||||
},
|
||||
] as const;
|
||||
|
||||
function StudioNavigation({
|
||||
currentPath,
|
||||
label,
|
||||
}: Readonly<{ currentPath: string; label: string }>) {
|
||||
return (
|
||||
<nav aria-label={label}>
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
to={item.href}
|
||||
aria-current={item.active(currentPath) ? "page" : undefined}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<a href="/">공개 사이트 보기</a>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export function StudioHeader({ currentPath }: Readonly<{ currentPath: string }>) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const mobileId = useId();
|
||||
return (
|
||||
<header className="studio-header">
|
||||
<div className="studio-header-inner">
|
||||
<Link
|
||||
className="studio-wordmark"
|
||||
to="/studio"
|
||||
aria-label="TechLog Studio"
|
||||
>
|
||||
TechLog <span>Studio</span>
|
||||
</Link>
|
||||
<div className="studio-desktop-navigation">
|
||||
<StudioNavigation currentPath={currentPath} label="Studio 주 탐색" />
|
||||
</div>
|
||||
<button
|
||||
className="studio-menu-trigger"
|
||||
type="button"
|
||||
aria-expanded={open}
|
||||
aria-controls={mobileId}
|
||||
onClick={() => setOpen((current) => !current)}
|
||||
>
|
||||
{open ? "Studio 메뉴 닫기" : "Studio 메뉴 열기"}
|
||||
</button>
|
||||
</div>
|
||||
<div id={mobileId} className="studio-mobile-navigation" hidden={!open}>
|
||||
<StudioNavigation currentPath={currentPath} label="Studio 모바일 탐색" />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { DocumentList } from "../components/document-list.tsx";
|
||||
|
||||
export function DocumentsPage() {
|
||||
return <DocumentList />;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { NewDocumentForm } from "../components/new-document-form.tsx";
|
||||
|
||||
export function NewDocumentPage() {
|
||||
return <NewDocumentForm />;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { StudioDashboard } from "../components/studio-dashboard.tsx";
|
||||
|
||||
export function StudioHomePage() {
|
||||
return <StudioDashboard />;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function StudioNotFoundPage() {
|
||||
return (
|
||||
<section className="studio-route-state">
|
||||
<p className="studio-eyebrow">404</p>
|
||||
<h1>Studio 화면을 찾을 수 없습니다</h1>
|
||||
<p>주소를 확인하거나 작업본 목록에서 다시 시작하세요.</p>
|
||||
<Link to="/studio/documents">작업본으로 돌아가기</Link>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import {
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import type { StudioGateway } from "../../application/ports/studio-gateway.ts";
|
||||
import { StudioContext, type StudioContextValue } from "./use-studio.ts";
|
||||
|
||||
type StudioProviderProps = Readonly<{
|
||||
children: ReactNode;
|
||||
createGateway: () => StudioGateway;
|
||||
navigate?: (href: string) => void;
|
||||
}>;
|
||||
|
||||
function defaultNavigate(href: string): void {
|
||||
window.history.pushState({}, "", href);
|
||||
window.dispatchEvent(new PopStateEvent("popstate"));
|
||||
}
|
||||
|
||||
export function StudioProvider({
|
||||
children,
|
||||
createGateway,
|
||||
navigate = defaultNavigate,
|
||||
}: StudioProviderProps) {
|
||||
const [gateway] = useState<StudioGateway>(() => createGateway());
|
||||
const [requestAnnouncement, setRequestAnnouncement] = useState("");
|
||||
const navigateInternal = useCallback((href: string) => navigate(href), [navigate]);
|
||||
const value = useMemo<StudioContextValue>(
|
||||
() => ({
|
||||
gateway,
|
||||
requestAnnouncement,
|
||||
setRequestAnnouncement,
|
||||
navigateInternal,
|
||||
}),
|
||||
[gateway, navigateInternal, requestAnnouncement],
|
||||
);
|
||||
|
||||
return (
|
||||
<StudioContext.Provider value={value}>
|
||||
<div className="studio-app">{children}</div>
|
||||
</StudioContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Component, Fragment, type ReactNode } from "react";
|
||||
|
||||
export class StudioRuntimeBoundary extends Component<
|
||||
Readonly<{ children: ReactNode }>,
|
||||
Readonly<{ failed: boolean; resetKey: number }>
|
||||
> {
|
||||
state = { failed: false, resetKey: 0 };
|
||||
|
||||
static getDerivedStateFromError() {
|
||||
return { failed: true };
|
||||
}
|
||||
|
||||
private retry = () => {
|
||||
this.setState((current) => ({
|
||||
failed: false,
|
||||
resetKey: current.resetKey + 1,
|
||||
}));
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.failed) {
|
||||
return (
|
||||
<div className="studio-app">
|
||||
<header className="studio-header">
|
||||
<div className="studio-header-inner">
|
||||
<a className="studio-wordmark" href="/studio">
|
||||
TechLog <span>Studio</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main-content" className="studio-main">
|
||||
<section className="studio-route-state" role="alert">
|
||||
<p className="studio-eyebrow">STUDIO ERROR</p>
|
||||
<h1>Studio 화면을 불러오지 못했습니다</h1>
|
||||
<p>현재 세션을 초기화한 뒤 다시 시작하세요.</p>
|
||||
<button type="button" onClick={this.retry}>
|
||||
다시 시작
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <Fragment key={this.state.resetKey}>{this.props.children}</Fragment>;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { useCallback, useEffect, useState, type ReactNode } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
import { useApplication } from "../../../../presentation/providers/application-provider.tsx";
|
||||
import { TECH_LOG_FEATURE_ID } from "../../application/tech-log-feature-input.ts";
|
||||
import { StudioHeader } from "./components/studio-header.tsx";
|
||||
import { StudioProvider } from "./studio-provider.tsx";
|
||||
import { StudioRuntimeBoundary } from "./studio-runtime-boundary.tsx";
|
||||
import { useStudio } from "./use-studio.ts";
|
||||
|
||||
type StudioShellProps = Readonly<{ children: ReactNode }>;
|
||||
|
||||
function StudioFrame({ children }: StudioShellProps) {
|
||||
const location = useLocation();
|
||||
const { requestAnnouncement } = useStudio();
|
||||
return (
|
||||
<>
|
||||
<a className="studio-skip-link" href="#main-content">
|
||||
본문으로 건너뛰기
|
||||
</a>
|
||||
<StudioHeader currentPath={location.pathname} />
|
||||
<main id="main-content" className="studio-main" tabIndex={-1}>
|
||||
{children}
|
||||
</main>
|
||||
<p
|
||||
className="studio-visually-hidden"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
>
|
||||
{requestAnnouncement}
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function StudioShell({ children }: StudioShellProps) {
|
||||
const application = useApplication();
|
||||
const navigate = useNavigate();
|
||||
const [generation, setGeneration] = useState(0);
|
||||
const navigateInternal = useCallback(
|
||||
(href: string) => {
|
||||
void navigate(href);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
const createGateway = useCallback(
|
||||
() => application.features.get(TECH_LOG_FEATURE_ID).createStudioGateway(),
|
||||
[application],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const resetPersistedSession = (event: PageTransitionEvent) => {
|
||||
if (event.persisted) setGeneration((current) => current + 1);
|
||||
};
|
||||
window.addEventListener("pageshow", resetPersistedSession);
|
||||
return () => window.removeEventListener("pageshow", resetPersistedSession);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<StudioRuntimeBoundary key={generation}>
|
||||
<StudioProvider
|
||||
key={generation}
|
||||
createGateway={createGateway}
|
||||
navigate={navigateInternal}
|
||||
>
|
||||
<StudioFrame>{children}</StudioFrame>
|
||||
</StudioProvider>
|
||||
</StudioRuntimeBoundary>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { createContext, useContext } from "react";
|
||||
|
||||
import type { StudioGateway } from "../../application/ports/studio-gateway.ts";
|
||||
|
||||
export type StudioContextValue = Readonly<{
|
||||
gateway: StudioGateway;
|
||||
requestAnnouncement: string;
|
||||
setRequestAnnouncement(message: string): void;
|
||||
navigateInternal(href: string): void;
|
||||
}>;
|
||||
|
||||
export const StudioContext = createContext<StudioContextValue | null>(null);
|
||||
|
||||
export function useStudio(): StudioContextValue {
|
||||
const context = useContext(StudioContext);
|
||||
if (!context) throw new Error("useStudio must be used within StudioProvider");
|
||||
return context;
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import type { ReactNode } from "react";
|
||||
import { MemoryRouter, useLocation, useNavigate } from "react-router-dom";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { createTechLogFeatureInstalledInput } from "../../../src/features/tech-log/adapters/create-tech-log-feature-input.ts";
|
||||
import type { StudioGateway } from "../../../src/features/tech-log/application/ports/studio-gateway.ts";
|
||||
import type { DocumentPage } from "../../../src/features/tech-log/contracts/studio/contract.ts";
|
||||
import { DocumentList } from "../../../src/features/tech-log/presentation/studio/components/document-list.tsx";
|
||||
import { NewDocumentForm } from "../../../src/features/tech-log/presentation/studio/components/new-document-form.tsx";
|
||||
import { StudioDashboard } from "../../../src/features/tech-log/presentation/studio/components/studio-dashboard.tsx";
|
||||
import { StudioProvider } from "../../../src/features/tech-log/presentation/studio/studio-provider.tsx";
|
||||
import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
|
||||
import { createTestApplication } from "../../helpers/create-test-application.ts";
|
||||
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
|
||||
function LocationProbe() {
|
||||
return <output aria-label="현재 경로">{useLocation().pathname}</output>;
|
||||
}
|
||||
|
||||
function RouterStudioProvider({
|
||||
children,
|
||||
gateway,
|
||||
}: Readonly<{ children: ReactNode; gateway: StudioGateway }>) {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<StudioProvider
|
||||
createGateway={() => gateway}
|
||||
navigate={(href) => {
|
||||
void navigate(href);
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</StudioProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function renderScreen(children: ReactNode, gateway: StudioGateway) {
|
||||
const input = createTechLogFeatureInstalledInput().input;
|
||||
return render(
|
||||
<ApplicationProvider
|
||||
application={createTestApplication({
|
||||
featureInputs: { "tech-log": { ...input, createStudioGateway: () => gateway } },
|
||||
})}
|
||||
>
|
||||
<MemoryRouter initialEntries={["/studio"]}>
|
||||
<RouterStudioProvider gateway={gateway}>{children}</RouterStudioProvider>
|
||||
</MemoryRouter>
|
||||
</ApplicationProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe("TechLog Studio index screens", () => {
|
||||
it("shows the source dashboard totals, workflow sections, status links, and sample rows", async () => {
|
||||
const gateway = createTechLogFeatureInstalledInput().input.createStudioGateway();
|
||||
|
||||
const { container } = renderScreen(<StudioDashboard />, gateway);
|
||||
|
||||
const summary = await screen.findByLabelText("Studio 요약");
|
||||
expect(summary).toHaveTextContent("전체 작업본7");
|
||||
expect(summary).toHaveTextContent("검증할 기록5");
|
||||
expect(summary).toHaveTextContent("게시 준비0");
|
||||
expect(summary).toHaveTextContent("게시 기록4");
|
||||
expect(screen.getByRole("heading", { level: 1, name: "작업 흐름" })).toBeVisible();
|
||||
expect(
|
||||
Array.from(container.querySelectorAll(".studio-section-title a"), (link) => [
|
||||
link.textContent,
|
||||
link.getAttribute("href"),
|
||||
]),
|
||||
).toEqual([
|
||||
["전체 보기", "/studio/documents"],
|
||||
["전체 보기", "/studio/documents"],
|
||||
["전체 보기", "/studio/documents"],
|
||||
["게시 기록 보기", "/studio/publications"],
|
||||
]);
|
||||
expect(screen.getAllByText("컬렉션 Fetch Join과 페이징은 왜 충돌하는가").length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("searches and filters documents and renders the source empty state", async () => {
|
||||
const gateway = createTechLogFeatureInstalledInput().input.createStudioGateway();
|
||||
renderScreen(<DocumentList />, gateway);
|
||||
|
||||
expect(await screen.findByText("7개의 작업본")).toBeVisible();
|
||||
fireEvent.change(screen.getByLabelText("검색"), { target: { value: "Fetch Join" } });
|
||||
fireEvent.submit(screen.getByRole("search"));
|
||||
expect(await screen.findByText("1개의 작업본")).toBeVisible();
|
||||
expect(screen.getByText("컬렉션 Fetch Join과 페이징은 왜 충돌하는가")).toBeVisible();
|
||||
|
||||
fireEvent.change(screen.getByLabelText("종류"), { target: { value: "QUESTION" } });
|
||||
expect(await screen.findByText("0개의 작업본")).toBeVisible();
|
||||
expect(screen.getByRole("heading", { level: 2, name: "조건에 맞는 작업본이 없습니다" })).toBeVisible();
|
||||
});
|
||||
|
||||
it("cancels an obsolete list request and advances cursor pagination", async () => {
|
||||
const base = createTechLogFeatureInstalledInput().input.createStudioGateway();
|
||||
const all = await base.listDocuments({ limit: 20 });
|
||||
let obsoleteSignal: AbortSignal | undefined;
|
||||
const firstPage: DocumentPage = { items: all.items.slice(0, 1), nextCursor: "next-page" };
|
||||
const secondPage: DocumentPage = { items: all.items.slice(1, 2), nextCursor: null };
|
||||
const listDocuments = vi.fn<StudioGateway["listDocuments"]>()
|
||||
.mockImplementationOnce((_query, { signal } = {}) => {
|
||||
obsoleteSignal = signal;
|
||||
return new Promise(() => {});
|
||||
})
|
||||
.mockResolvedValueOnce(firstPage)
|
||||
.mockResolvedValueOnce(secondPage);
|
||||
const gateway = { ...base, listDocuments } satisfies StudioGateway;
|
||||
renderScreen(<DocumentList />, gateway);
|
||||
|
||||
fireEvent.change(screen.getByLabelText("종류"), { target: { value: "CASE" } });
|
||||
await waitFor(() => expect(obsoleteSignal?.aborted).toBe(true));
|
||||
expect(await screen.findByText("1개의 작업본")).toBeVisible();
|
||||
await userEvent.click(screen.getByRole("button", { name: "다음 작업본" }));
|
||||
await waitFor(() => expect(listDocuments).toHaveBeenCalledTimes(3));
|
||||
expect(screen.getByText(secondPage.items[0]!.title)).toBeVisible();
|
||||
expect(screen.queryByRole("button", { name: "다음 작업본" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows a retry action after a list failure and recovers", async () => {
|
||||
const user = userEvent.setup();
|
||||
const base = createTechLogFeatureInstalledInput().input.createStudioGateway();
|
||||
const recovered = await base.listDocuments({ limit: 20 });
|
||||
const gateway = {
|
||||
...base,
|
||||
listDocuments: vi.fn<StudioGateway["listDocuments"]>()
|
||||
.mockRejectedValueOnce(new Error("offline"))
|
||||
.mockResolvedValueOnce(recovered),
|
||||
} satisfies StudioGateway;
|
||||
renderScreen(<DocumentList />, gateway);
|
||||
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent("작업본을 불러오지 못했습니다.");
|
||||
await user.click(screen.getByRole("button", { name: "다시 시도" }));
|
||||
|
||||
expect(await screen.findByText("7개의 작업본")).toBeVisible();
|
||||
expect(gateway.listDocuments).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("creates the selected Question in the same session and redirects to its editor", async () => {
|
||||
const user = userEvent.setup();
|
||||
const gateway = createTechLogFeatureInstalledInput().input.createStudioGateway();
|
||||
renderScreen(
|
||||
<>
|
||||
<NewDocumentForm />
|
||||
<LocationProbe />
|
||||
</>,
|
||||
gateway,
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole("radio", { name: /Question/ }));
|
||||
await user.click(screen.getByRole("button", { name: "작업본 만들기" }));
|
||||
|
||||
await waitFor(() => expect(screen.getByLabelText("현재 경로")).toHaveTextContent(/^\/studio\/documents\/[0-9a-f-]+\/edit$/));
|
||||
expect((await gateway.listDocuments({ kind: "QUESTION" })).items).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,128 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { render, screen, waitFor, within } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { Outlet, RouterProvider, createMemoryRouter } from "react-router-dom";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { createTechLogFeatureInstalledInput } from "../../../src/features/tech-log/adapters/create-tech-log-feature-input.ts";
|
||||
import type { StudioGateway } from "../../../src/features/tech-log/application/ports/studio-gateway.ts";
|
||||
import { StudioHomePage } from "../../../src/features/tech-log/presentation/studio/pages/studio-home-page.tsx";
|
||||
import { StudioNotFoundPage } from "../../../src/features/tech-log/presentation/studio/pages/studio-not-found-page.tsx";
|
||||
import { StudioShell } from "../../../src/features/tech-log/presentation/studio/studio-shell.tsx";
|
||||
import { ApplicationProvider } from "../../../src/presentation/providers/application-provider.tsx";
|
||||
import { createTestApplication } from "../../helpers/create-test-application.ts";
|
||||
|
||||
afterEach(() => vi.restoreAllMocks());
|
||||
|
||||
function renderStudio(
|
||||
initialEntry: string,
|
||||
createStudioGateway: () => StudioGateway,
|
||||
) {
|
||||
const router = createMemoryRouter(
|
||||
[
|
||||
{
|
||||
path: "/studio",
|
||||
element: (
|
||||
<StudioShell>
|
||||
<Outlet />
|
||||
</StudioShell>
|
||||
),
|
||||
children: [
|
||||
{ index: true, element: <StudioHomePage /> },
|
||||
{ path: "documents", element: <p>작업본 라우트</p> },
|
||||
{ path: "documents/new", element: <p>새 문서 라우트</p> },
|
||||
{ path: "publications", element: <p>게시 기록 라우트</p> },
|
||||
{ path: "*", element: <StudioNotFoundPage /> },
|
||||
],
|
||||
},
|
||||
],
|
||||
{ initialEntries: [initialEntry] },
|
||||
);
|
||||
const installed = createTechLogFeatureInstalledInput().input;
|
||||
const application = createTestApplication({
|
||||
featureInputs: {
|
||||
"tech-log": { ...installed, createStudioGateway },
|
||||
},
|
||||
});
|
||||
const view = render(
|
||||
<ApplicationProvider application={application}>
|
||||
<RouterProvider router={router} />
|
||||
</ApplicationProvider>,
|
||||
);
|
||||
return { ...view, router };
|
||||
}
|
||||
|
||||
describe("TechLog Studio shell", () => {
|
||||
it("creates one application-provided gateway for child navigation and exposes the source header", async () => {
|
||||
const user = userEvent.setup();
|
||||
const gateway = createTechLogFeatureInstalledInput().input.createStudioGateway();
|
||||
const createGateway = vi.fn(() => gateway);
|
||||
|
||||
const { container, router } = renderStudio("/studio", createGateway);
|
||||
|
||||
expect(await screen.findByRole("heading", { level: 1, name: "작업 흐름" })).toBeVisible();
|
||||
expect(createGateway).toHaveBeenCalledTimes(1);
|
||||
expect(
|
||||
Array.from(
|
||||
container.querySelectorAll<HTMLAnchorElement>(".studio-desktop-navigation a"),
|
||||
(link) => [link.textContent, link.getAttribute("href")],
|
||||
),
|
||||
).toEqual([
|
||||
["작업본", "/studio/documents"],
|
||||
["게시 기록", "/studio/publications"],
|
||||
["새 문서", "/studio/documents/new"],
|
||||
["공개 사이트 보기", "/"],
|
||||
]);
|
||||
expect(screen.getByRole("link", { name: "공개 사이트 보기" })).toHaveAttribute("href", "/");
|
||||
expect(screen.queryByText(/로그인|sign in/i)).not.toBeInTheDocument();
|
||||
|
||||
await user.click(within(screen.getByRole("navigation", { name: "Studio 주 탐색" })).getByRole("link", { name: "작업본" }));
|
||||
|
||||
expect(router.state.location.pathname).toBe("/studio/documents");
|
||||
expect(screen.getByText("작업본 라우트")).toBeVisible();
|
||||
expect(createGateway).toHaveBeenCalledTimes(1);
|
||||
expect(screen.getAllByRole("link", { name: "작업본" })[0]).toHaveAttribute("aria-current", "page");
|
||||
});
|
||||
|
||||
it("recreates the provider generation and cancels obsolete work after a persisted pageshow", async () => {
|
||||
const user = userEvent.setup();
|
||||
let firstSignal: AbortSignal | undefined;
|
||||
const first = createTechLogFeatureInstalledInput().input.createStudioGateway();
|
||||
const second = createTechLogFeatureInstalledInput().input.createStudioGateway();
|
||||
vi.spyOn(first, "getDashboard").mockImplementation(({ signal } = {}) => {
|
||||
firstSignal = signal;
|
||||
return new Promise(() => {});
|
||||
});
|
||||
const secondDashboard = vi.spyOn(second, "getDashboard");
|
||||
const createGateway = vi.fn()
|
||||
.mockReturnValueOnce(first)
|
||||
.mockReturnValueOnce(second);
|
||||
|
||||
renderStudio("/studio", createGateway);
|
||||
await waitFor(() => expect(firstSignal).toBeDefined());
|
||||
await user.click(screen.getByRole("button", { name: "Studio 메뉴 열기" }));
|
||||
expect(screen.getByRole("button", { name: "Studio 메뉴 닫기" })).toBeVisible();
|
||||
|
||||
window.dispatchEvent(new PageTransitionEvent("pageshow", { persisted: true }));
|
||||
|
||||
await waitFor(() => expect(createGateway).toHaveBeenCalledTimes(2));
|
||||
expect(firstSignal?.aborted).toBe(true);
|
||||
expect(screen.getByRole("button", { name: "Studio 메뉴 열기" })).toHaveAttribute("aria-expanded", "false");
|
||||
expect(await screen.findByRole("heading", { level: 1, name: "작업 흐름" })).toBeVisible();
|
||||
expect(secondDashboard).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("keeps unknown Studio routes inside the Studio shell without authentication UI", () => {
|
||||
const createGateway = vi.fn(
|
||||
() => createTechLogFeatureInstalledInput().input.createStudioGateway(),
|
||||
);
|
||||
|
||||
renderStudio("/studio/does-not-exist", createGateway);
|
||||
|
||||
expect(screen.getByRole("banner")).toHaveClass("studio-header");
|
||||
expect(screen.getByRole("heading", { level: 1, name: "Studio 화면을 찾을 수 없습니다" })).toBeVisible();
|
||||
expect(screen.getByRole("link", { name: "작업본으로 돌아가기" })).toHaveAttribute("href", "/studio/documents");
|
||||
expect(screen.queryByText(/로그인|sign in/i)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user