Repository navigation
feat: 시뮬레이션 결과 화면 — 실행순서 · 진행상태 · 통과/실패 카드 - #47
Merged
Merged
Conversation
Figma "뽀삐" Slide 6·7(node 34:1350·47:1733) "실행순서"가 요구하는 데이터 — 정규화된 명령을 실제 반복 횟수만큼 펼친 뒤, 누적 이동 거리가 처음 안전 구역(SAFE_ZONE_M)을 넘는 지점을 찾아 그 앞은 완료·그 지점은 실패·그 뒤는 대기로 표시한다. 기명서 재확인 결과에 따라(이슈 #29 본문) Execution/Agent 프로토콜은 건드리지 않는다 — 이건 로봇 실행 전 시뮬레이션 단계의 순수 계산이며, Agent 는 여전히 RUNNING·COMPLETED·FAILED 전체 실행 단위로만 보고한다. - SimulationResult 에 steps: SimulationStep[] 추가 (구조·값이 유효할 때만 채워짐) - safety.ts 의 buildSimulationSteps 가 repeat 를 펼치고 안전 제한 위반 지점을 찾는다 (evaluateProgram 의 totalDistance 와 같은 누적 거리 계산을 공유) - 단위 테스트: 전부 통과·반복 펼침 후 초과 지점에서 실패·값이 무효하면 steps 비움 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Figma "뽀삐" Slide 6(실패, 34:1350) · Slide 7(성공, 47:1733). #29 의 단계별 판정을 화면에 보여준다. 기존 화면(BlockWorkspace/RunReadyWorkspace)의 안내문·버튼은 그대로 두고 (로봇 실행하기 등 접근성 이름이 겹치면 기존 테스트가 여러 개를 찾아 깨진다), 순수 정보 카드(SimulationResultSummary — 배지·메시지·실행순서, 버튼 없음)를 두 화면에 끼워 넣는 방식으로 구현했다: - BlockWorkspace: 시뮬레이션이 실패하면 '튜토리얼' 자리에 실패 카드를 보여준다. 편집을 시작하면(invalidate) 결과가 지워져 다시 튜토리얼로 돌아온다. - RunReadyWorkspace: 시뮬레이션이 통과하고 아직 실행을 시작하지 않았으면(executionStatus 없음) 캔버스 위에 성공 카드를 보여준다. '실행 블록' 목록은 바로 아래 캔버스가 이미 읽기 전용으로 보여주고 있어 중복 렌더링하지 않는다. - RobotPreview: 방금 시뮬레이션했을 때만 성공/실패 배지 + 진행상태 바("N번째 블록에서 멈춤" / "N/N 단계 성공")를 보여준다. - blockProgram.ts 에 describeBlock 추가 — 실행순서 등 읽기 전용 목록에 쓰는 한 줄 설명(값 있는 블록은 값도 문구에 넣는다). - globals.css 에 danger/success 색 토큰 추가 (Figma 값 그대로). 기존 테스트 중 하나("이동 거리를 늘려…")는 같은 위반 메시지가 안내문과 새 카드에 중복으로 뜨게 돼 getAllByText 로 고쳤다 — 의도된 중복이다. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
![inryeok-bot[bot]](https://avatars.githubusercontent.com/in/4815249?s=60&v=4){kind=small}
| --color-primary-active: #965a35; /* primary 버튼 눌림 */ | ||
| --color-danger: #d96a5c; /* 시뮬레이션 실패 배지·텍스트·경계선 (Figma Slide 6) */ | ||
| --color-danger-bg: #ffefed; /* 실패 카드 배경 */ | ||
| --color-success: #9dc88b; /* 시뮬레이션 성공 배지·텍스트·경계선 (Figma Slide 7) */ |
There was a problem hiding this comment.
🟠 MEDIUM · BEHAVIOR
성공 상태 색상의 텍스트 대비가 부족합니다
새 --color-success 값 #9dc88b는 성공 카드 배경 #e9ffee와 약 1.75:1, 흰색과 약 2.07:1의 대비만 냅니다. 이 토큰은 SimulationResultSummary와 RobotPreview에서 각각 일반 텍스트 색상과 흰 글자가 놓이는 배지 배경으로 사용되므로 WCAG AA의 일반 텍스트 기준 4.5:1을 충족하지 못합니다. 성공 상태용 전경 토큰을 충분히 어두운 색으로 분리하고, 배지 배경도 흰 글자와 4.5:1 이상 대비가 나도록 조정해야 합니다.
Contributor
Author
There was a problem hiding this comment.
65f1094 에서 수정했습니다. --color-success를 #9dc88b→#166534(흰 배경 대비 7.1:1), --color-danger를 #d96a5c→#b91c1c(6.5:1)로 바꿨습니다. 겸사겸사 확인해보니 실행순서의 '대기' 배지(bg-muted + 흰 글자)도 같은 문제(2.7:1)가 있어서, 배경을 채우는 대신 외곽선만 그리는 방식으로 같이 고쳤습니다.
--color-success(#9dc88b)가 흰 배경 대비 약 1.9:1, --color-danger (#d96a5c)도 약 3.4:1 로 WCAG AA 일반 텍스트 기준(4.5:1)에 못 미쳤다. 둘 다 흰 배지 배경으로도, 카드 위 텍스트로도 쓰여서 어느 쪽이든 대비가 부족했다. - 두 토큰을 흰 배경 대비 각각 7.1:1·6.5:1 나오는 값으로 교체 (success #166534, danger #b91c1c) - 같은 문제를 새로 만들지 않기 위해, 실행순서의 '대기' 배지도 흰 글자 위에 muted 배경을 채우는 대신(2.7:1 로 역시 부족) 외곽선만 그리는 방식으로 바꿨다 — muted 를 텍스트로 쓰는 건 앱 전반에 이미 쓰이던 방식이라 그대로 따른다 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
SimulationResult에 단계별 판정(steps)을 추가했습니다 — 정규화된 명령을 실제 반복 횟수만큼 펼친 뒤, 누적 이동 거리가 안전 구역을 처음 넘는 지점을 찾아 완료/실패/대기로 표시합니다. (feat: 시뮬레이션 결과 — 단계별 안전 제한 판정(어느 블록에서 넘는지) 데이터 모델 #29)BlockWorkspace(실패 시 튜토리얼 자리)와RunReadyWorkspace(성공 시 캔버스 위)에 끼워 넣고,RobotPreview에 진행상태 바 + 성공/실패 배지를 추가했습니다. (feat: 시뮬레이션 결과 화면 — 실행순서 · 읽기전용 블록 · 진행상태 (Figma Slide 6·7) #30)Closes #29
Closes #30
Test plan
npm run typecheck/npm run lint/npm run format:check통과npx vitest run— 118개 테스트 통과 (신규 케이스 포함, 기존 케이스 1건은 메시지 중복 표시에 맞게getAllByText로 수정)npm run build통과/experience에서 실패 케이스(반복 4회 → 안전 구역 초과)와 성공 케이스를 각각 브라우저로 확인 — 실행순서·진행상태·배지·카드 모두 Figma와 일치, 콘솔 에러 없음