Skip to content

Align web and mobile learning screens with Figma - #5

Open
Sadturtleman wants to merge 2 commits into
codex/ga4-redash-eventsfrom
codex/figma-design-parity
Open

Sadturtleman wants to merge 2 commits into
codex/ga4-redash-eventsfrom
codex/figma-design-parity

Conversation

@Sadturtleman

Copy link
Copy Markdown
Owner

Figma 웹·Android 원본과 달랐던 홈 배너, 글자 크기, 카드, 코드 작성 화면 배치를 맞췄습니다. 문제 설명은 위에, 편집기와 실행 시각화는 좌우에, 테스트 결과와 리뷰는 아래에 표시합니다. 리뷰를 열어도 실행 시각화가 유지됩니다.

모바일에는 원본 소개·추천 학습 카드와 홈/학습/퀴즈 하단 메뉴를 반영하고, 다크 모드 로고·색상 및 Monaco 테마를 맞췄습니다. 이후 확정한 47개 개념의 종류별 분류, 개념→퀴즈→코드 문제 화면 분리, 관리자/문의 기능은 유지합니다. 전체 Figma 상태의 픽셀 단위 일치를 주장하지 않으며 비교 기준은 docs/figma-design-parity.md에 정리했습니다.

검증: npm run check 통과(55개 테스트 통과, PostgreSQL 환경 검사 1개 생략), 브라우저 테스트 17개 통과. 360/412/768/850/1024/1440px와 라이트·다크 모드의 가로 넘침, 모바일 하단 메뉴 이동, 리뷰 전환 시 시각화 유지 확인.

이 PR은 GA4/Amplitude 변경 위에 쌓인 디자인 변경으로 base는 codex/ga4-redash-events입니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant