Skip to content

Tighten new-problem funnel layout (workspace, grade, topic) #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smilebank7 merged 2 commits into from
Jun 10, 2026
Merged

Tighten new-problem funnel layout (workspace, grade, topic) #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04c01fc
Tighten new-problem funnel width and densify grade and topic steps
smilebank7 Jun 10, 2026
444d6f9
Replace workspace hero with a compact tool header
smilebank7 Jun 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 52 additions & 64 deletions packages/web/app/app/new/topic/picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export function TopicPicker({ schoolLevel, grade }: Props) {
</p>
) : (
<div
className="topic-grid topic-grid-1col"
className="topic-grid"
role="radiogroup"
aria-labelledby="page-title"
>
Expand Down Expand Up @@ -194,73 +194,61 @@ export function TopicPicker({ schoolLevel, grade }: Props) {
)}
</section>

<aside
className="example-panel"
aria-live="polite"
aria-label="단원 예시 문제 미리보기"
>
{selectedTopic === null || selectedExamples === undefined ? (
<div className="example-panel-empty">
<p className="example-panel-empty-title">
단원을 선택하면 예시 문제를 보여드려요
{selectedTopic !== null && selectedExamples !== undefined && (

@cubic-dev-ai cubic-dev-ai Bot Jun 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Conditionally mounting the aria-live region can prevent topic-preview announcements for screen-reader users.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At packages/web/app/app/new/topic/picker.tsx, line 197:

<comment>Conditionally mounting the `aria-live` region can prevent topic-preview announcements for screen-reader users.</comment>

<file context>
@@ -194,73 +194,61 @@ export function TopicPicker({ schoolLevel, grade }: Props) {
-              <div className="example-panel-empty">
-                <p className="example-panel-empty-title">
-                  단원을 선택하면 예시 문제를 보여드려요
+          {selectedTopic !== null && selectedExamples !== undefined && (
+            <aside
+              className="example-panel"
</file context>

<aside
className="example-panel"
aria-live="polite"
aria-label="단원 예시 문제 미리보기"
>
<header className="example-panel-header">
<div className="example-panel-title-row">
<h2 className="example-panel-title">
{selectedTopic.name}
</h2>
<span className="meta-pill">{selectedTopic.code}</span>
</div>
<p className="example-panel-desc">
{topicScopeLabel(selectedTopic)} · {selectedTopic.achievement}
</p>
<p className="example-panel-empty-desc">
실제 출제될 동형 문제가 어떤 모습인지 미리 가늠할 수 있도록
해당 단원의 corpus 예시를 보여줍니다.
<p className="example-panel-meta">
예시 {selectedExamples.examples.length} 문항 · corpus 후보
{" "}
{selectedExamples.candidate_pool.toLocaleString()} 건 중
추출
</p>
</div>
) : (
<>
<header className="example-panel-header">
<div className="example-panel-title-row">
<h2 className="example-panel-title">
{selectedTopic.name}
</h2>
<span className="meta-pill">{selectedTopic.code}</span>
</div>
<p className="example-panel-desc">
{topicScopeLabel(selectedTopic)} · {selectedTopic.achievement}
</p>
<p className="example-panel-meta">
예시 {selectedExamples.examples.length} 문항 · corpus 후보
{" "}
{selectedExamples.candidate_pool.toLocaleString()} 건 중
추출
</p>
</header>
</header>

<ol className="example-list">
{selectedExamples.examples.map((ex, idx) => (
<li key={ex.id} className="example-card">
<div className="example-card-meta">
<span className="example-index">예시 {idx + 1}</span>
<span className="example-badge example-badge-diff">
{difficultyLabel(ex.difficulty)}
</span>
<span className="example-badge example-badge-type">
{problemTypeLabel(ex.problem_type)}
</span>
</div>
<div className="example-question">
<LatexMixed source={ex.question_text} />
</div>
<div className="example-answer">
<span className="example-answer-label">정답</span>
<span className="example-answer-value">
<LatexMixed source={ex.answer_text} />
</span>
</div>
</li>
))}
</ol>
<ol className="example-list">
{selectedExamples.examples.map((ex, idx) => (
<li key={ex.id} className="example-card">
<div className="example-card-meta">
<span className="example-index">예시 {idx + 1}</span>
<span className="example-badge example-badge-diff">
{difficultyLabel(ex.difficulty)}
</span>
<span className="example-badge example-badge-type">
{problemTypeLabel(ex.problem_type)}
</span>
</div>
<div className="example-question">
<LatexMixed source={ex.question_text} />
</div>
<div className="example-answer">
<span className="example-answer-label">정답</span>
<span className="example-answer-value">
<LatexMixed source={ex.answer_text} />
</span>
</div>
</li>
))}
</ol>

<footer className="example-panel-footer">
예시는 corpus 의 기존 문제이며, 실제 출제 시 LLM 이 동형
문제를 새로 생성하고 SymPy 가 검증합니다.
</footer>
</>
)}
</aside>
<footer className="example-panel-footer">
예시는 corpus 의 기존 문제이며, 실제 출제 시 LLM 이 동형
문제를 새로 생성하고 SymPy 가 검증합니다.
</footer>
</aside>
)}
</div>
</main>

Expand Down
20 changes: 9 additions & 11 deletions packages/web/app/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,15 @@ import Link from "next/link";
export default function WorkspacePage() {
return (
<>
<section className="hero-tile-productivity">
<div className="container-app">
<span className="eyebrow-mono">
<span aria-hidden="true">◆</span>
워크스페이스
</span>
<h1>검증된 문제 한 세트.</h1>
<p className="lede">
학년 → 단원 → 의도 → 검증 → PDF · 5 ~ 30 초 동형 출제.
</p>
</div>
<section className="container-app workspace-header" aria-labelledby="workspace-title">
<span className="eyebrow-mono">
<span aria-hidden="true">◆</span>
워크스페이스
</span>
<h1 id="workspace-title">새 작업 시작</h1>
<p className="lede">
학년 → 단원 → 의도 → 검증 → PDF. 한 번에 3 ~ 10 문항, 5 ~ 30 초 출제.
</p>
</section>

<section className="container-app entry-grid" aria-label="새 작업 시작">
Expand Down
Loading
Loading