Figma 기반 공유/내보내기 모달 정리#414
Conversation
There was a problem hiding this comment.
Pull request overview
This PR refactors the existing export modal into a Figma-aligned “Share / Export” modal with a 2-column layout, and routes existing toolbar export actions (SVG/PlantUML/Mermaid) through the same modal flow. It also updates the corresponding modal tests and adds QA evidence documentation.
Changes:
- Rebuilt
ExportModalUI into “Share link” + “Export artifacts” two-column sections and added artifact actions for SVG/PlantUML/Mermaid. - Updated toolbar export buttons to open the modal instead of triggering direct downloads.
- Refreshed
ExportModaltests and added UI/UX QA evidence docs.
Reviewed changes
Copilot reviewed 6 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/styles.css | Updates modal styling to match the new two-column share/export layout and refreshed visual tokens. |
| frontend/src/components/modals/ExportModal.tsx | Refactors modal structure, adds artifact action list, and introduces a unified status strip + footer. |
| frontend/src/components/modals/ExportModal.test.tsx | Updates tests to reflect the new UI structure and validates artifact actions/disabled states. |
| frontend/src/App.tsx | Routes SVG/PlantUML/Mermaid toolbar buttons to open the modal and wires new modal props. |
| docs/ui-ux/qa/README.md | Documents stored QA evidence images for the share/export modal comparison. |
| design-qa.md | Captures QA findings, checklist, and rationale vs. Figma source node. |
Comments suppressed due to low confidence (3)
frontend/src/App.tsx:1433
- 이 버튼은 더 이상 즉시 SVG를 내보내지 않고 공유/내보내기 모달만 엽니다. 그런데
title/aria-label이 여전히 "SVG 내보내기"로 되어 있어 실제 동작과 불일치(특히 스크린리더에서 오해)를 유발할 수 있습니다.
title={
nodes.length === 0 ? "내보낼 테이블이 없습니다" : "SVG 내보내기"
}
aria-label="SVG 그림 내보내기"
frontend/src/App.tsx:1444
- 이 버튼은 더 이상 즉시 PlantUML을 내보내지 않고 공유/내보내기 모달만 엽니다. 그런데
title/aria-label이 여전히 "UML/PlantUML 내보내기"로 되어 있어 실제 동작과 불일치(특히 스크린리더에서 오해)를 유발할 수 있습니다.
title={
nodes.length === 0 ? "내보낼 테이블이 없습니다" : "UML 내보내기"
}
aria-label="PlantUML 내보내기"
frontend/src/App.tsx:1457
- 이 버튼은 더 이상 즉시 Mermaid를 내보내지 않고 공유/내보내기 모달만 엽니다. 그런데
title/aria-label이 여전히 "Mermaid 내보내기"로 되어 있어 실제 동작과 불일치(특히 스크린리더에서 오해)를 유발할 수 있습니다.
title={
nodes.length === 0
? "내보낼 테이블이 없습니다"
: "Mermaid 내보내기"
}
aria-label="Mermaid 내보내기"
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <button | ||
| type="button" | ||
| onClick={onCopyShareLink} | ||
| aria-live="polite" | ||
| disabled | ||
| title="접근 권한 관리는 프로젝트 권한 설정에서 처리합니다." | ||
| > |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
OpenCode reviewed the current-head evidence but found unresolved reviewer or review-agent threads before approval.
Findings
1. HIGH .github/workflows/opencode-review.yml:1 - Unresolved reviewer thread blocks automated approval
- Problem: OpenCode reached an APPROVE control result, but the approval step found unresolved, non-outdated human or review-agent thread evidence on the current pull request.
- Root cause: Reviewer and review-agent feedback can arrive after bounded model evidence is prepared, so the approval step must re-query GitHub immediately before publishing an approval.
- Fix: Address or resolve the listed reviewer thread(s), then re-run OpenCode on the current head.
- Regression test: Keep the approval gate querying reviewThreads(first: 100) after model output and before create_pull_review APPROVE, including bot review agents other than OpenCode itself.
Review thread evidence
Latest unresolved reviewer thread evidence
frontend/src/components/modals/ExportModal.tsx line 203
- Latest reviewer comment: @copilot-pull-request-reviewer at 2026-07-02T01:01:02Z
- Comment URL: #414 (comment)
- Comment excerpt: 상태 메시지 영역이 오류일 때 'role="alert"'를 사용하면서 동시에 'aria-live="polite"'를 강제로 지정하고 있어, 스크린리더가 긴급 오류를 즉시(Assertive) 공지하지 못할 수 있습니다. 오류 상태에서는 'aria-live="assertive"'로 맞추거나 'role'의 기본 live 동작을 그대로 따르는 편이 안전합니다.
frontend/src/components/modals/ExportModal.tsx line 164
-
Latest reviewer comment: @copilot-pull-request-reviewer at 2026-07-02T01:01:02Z
-
Comment URL: #414 (comment)
-
Comment excerpt: '접근 관리' 안내를 disabled 버튼 + 'title'에만 넣으면, disabled 버튼은 포커스를 받지 못해 키보드/스크린리더 사용자가 설명을 확인하기 어렵습니다. 동일한 정보를 버튼 대신 hint 텍스트로 노출해 접근성을 유지하는 편이 좋습니다.
-
Result: REQUEST_CHANGES
-
Reason: unresolved reviewer or review-agent thread(s) were present before approval.
-
Head SHA:
6b530ffb3888585001a38940cda7e90d7a00f61b -
Workflow run: 28557936639
-
Workflow attempt: 1
Changed-File Evidence Map
flowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file: design-qa.md"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file: design-qa.md"]
R1 --> V1["required checks"]
Evidence --> S2["Docs (6 files)"]
S2 --> I2["operator or user guidance"]
I2 --> R2["Review risk: Docs (6 files)"]
R2 --> V2["docs review"]
Evidence --> S3["Frontend (4 files)"]
S3 --> I3["browser runtime and bundle"]
I3 --> R3["Review risk: Frontend (4 files)"]
R3 --> V3["frontend tests"]
OpenCode Review Overview
Pull request overviewOpenCode reviewed the current-head evidence but found unresolved reviewer or review-agent threads before approval. Findings1. HIGH .github/workflows/opencode-review.yml:1 - Unresolved reviewer thread blocks automated approval
Review thread evidenceLatest unresolved reviewer thread evidence
|
There was a problem hiding this comment.
Pull request overview
OpenCode reviewed the current-head evidence but found unresolved reviewer or review-agent threads before approval.
Findings
1. HIGH .github/workflows/opencode-review.yml:1 - Unresolved reviewer thread blocks automated approval
- Problem: OpenCode reached an APPROVE control result, but the approval step found unresolved, non-outdated human or review-agent thread evidence on the current pull request.
- Root cause: Reviewer and review-agent feedback can arrive after bounded model evidence is prepared, so the approval step must re-query GitHub immediately before publishing an approval.
- Fix: Address or resolve the listed reviewer thread(s), then re-run OpenCode on the current head.
- Regression test: Keep the approval gate querying reviewThreads(first: 100) after model output and before create_pull_review APPROVE, including bot review agents other than OpenCode itself.
Review thread evidence
Latest unresolved reviewer thread evidence
frontend/src/components/modals/ExportModal.tsx line 167
-
Latest reviewer comment: @copilot-pull-request-reviewer at 2026-07-02T01:01:02Z
-
Comment URL: #414 (comment)
-
Comment excerpt: '접근 관리' 안내를 disabled 버튼 + 'title'에만 넣으면, disabled 버튼은 포커스를 받지 못해 키보드/스크린리더 사용자가 설명을 확인하기 어렵습니다. 동일한 정보를 버튼 대신 hint 텍스트로 노출해 접근성을 유지하는 편이 좋습니다.
-
Result: REQUEST_CHANGES
-
Reason: unresolved reviewer or review-agent thread(s) were present before approval.
-
Head SHA:
41030df9fa7f04f9a7036729f0b02d7e5db5d9bc -
Workflow run: 28562259417
-
Workflow attempt: 1
Changed-File Evidence Map
flowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file: design-qa.md"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file: design-qa.md"]
R1 --> V1["required checks"]
Evidence --> S2["Docs (6 files)"]
S2 --> I2["operator or user guidance"]
I2 --> R2["Review risk: Docs (6 files)"]
R2 --> V2["docs review"]
Evidence --> S3["Frontend (5 files)"]
S3 --> I3["browser runtime and bundle"]
I3 --> R3["Review risk: Frontend (5 files)"]
R3 --> V3["frontend tests"]
요약
29:143기준으로 기존 export 모달을 공유 링크와 내보내기 산출물의 2컬럼 구조로 정리했습니다.Figma / QA
29:143design-qa.mddocs/ui-ux/qa/2026-07-02-share-export-comparison.pngpassed검증
npm run typechecknpx vitest run src/components/modals/ExportModal.test.tsxnpm testnpm run build참고: 로컬 환경에 Node 26 런타임이 없어 Node
v24.16.0/ npm11.13.0에서npm ci --engine-strict=false로 의존성을 설치한 뒤 검증했습니다. 저장소의engines요구사항은 Node>=26 <27입니다.