화면 일관성 개선, 배너 이미지 누락 수정과 조작 요소 정리 - #1
Merged
Merged
Conversation
- Restore feature banner images: the themed <picture> collapsed to 0px height, so every slide rendered an empty art panel. - Close page intro cards instead of a bottom-only rounded border. - Share one header pattern: "CODE:FIT / page" path, full-width divider, menu button on the left on phones; login, profile and privacy now use the desktop frame instead of a two-row link bar. - Keep the editor's AI review button clear: hide the floating guide on problem pages and open it from the help dialog; shrink it on phones. - Merge duplicate headings on home and browse, make workspace cards read as actions, hide project search before the first project, and tighten the project form's optional label and helper spacing. - Translate remaining English eyebrows, dialog titles and "min" units. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0163ZRxWUJKr5hrkZPe9dHD1
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The guide button overlap is resolved by scrolling, so restore the original launcher on problem pages and phones and drop the help-dialog entry. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0163ZRxWUJKr5hrkZPe9dHD1
Soften light-mode container lines while keeping control borders, turn the problem type filter into a segmented control, show tags as filled chips, make row and header icon buttons borderless, give disabled primary actions a neutral fill, replace native disclosure triangles on check cards with a trailing chevron, and use tabular numbers for counts. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0163ZRxWUJKr5hrkZPe9dHD1
This branch was successfully deployed
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
2 participants
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.
Requested by 토리나나 · project thread
Before: 홈 기능 배너의 이미지가 모든 슬라이드에서 빈 칸으로 보였습니다. 페이지 소개 영역은 아래 테두리만 있어 잘린 카드처럼 보였고, 홈·문제 풀이와 나머지 화면의 헤더 경로·구분선·모바일 메뉴 위치가 서로 달랐습니다. 로그인 화면은 데스크톱에서 링크 9개가 두 줄로 줄바꿈되었습니다. 라이트 테마에서는 카드·표·버튼·필터가 모두 같은 진한 선을 써 화면이 무거웠고, 유형 필터는 테두리 굵기로만 선택 상태를 보여 줬습니다.
After: 배너 이미지가 표시되고, 소개 영역은 닫힌 카드로, 모든 작업 공간 헤더는
CODE:FIT / 페이지경로와 전체 너비 구분선으로 통일됩니다. 로그인·계정·개인정보 안내도 같은 사이드바를 씁니다. 컨테이너 선은 옅어지고 입력칸·버튼 선은 유지되며, 유형 필터는 선택 항목이 떠오르는 분절 컨트롤, 태그는 채운 칩, 행과 헤더의 아이콘 버튼은 테두리 없는 버튼이 됩니다.배너 이미지 누락은
ThemedImage의<picture>높이가 0px이 되면서 그 안의 절대 위치 이미지가 사라진 회귀였습니다. 시작 가이드 버튼은 기존 동작을 유지합니다.변경 내용
화면 일관성
.feature-art안의<picture>가 프레임 크기를 채우도록 수정CODE:FIT / 페이지경로, 전체 너비 구분선, 모바일 메뉴 버튼 왼쪽 배치EXPLORE YOUR DOMAIN,CURATED CHALLENGE,YOUR NEXT REP,VIEW SOLUTION,QUICK START등 대화상자 이름과min단위를 한국어로 (로그인 카드의 터미널 장식 문구는 유지)표면과 조작 피드백
#bac6d5→#d5dde8, 버튼·입력칸은 기존 선 유지, 카드에 1px 그림자. 다크 테마 선은 그대로화면 비교 (로컬, 1440×900 / 390×844)
표면 정리 (위: 변경 전, 아래: 변경 후)
How
화면 일관성 보정은
src/styles/design-consistency.css, 표면·조작 정리는src/styles/design-polish.css에 모아globals.css마지막에 차례로 불러옵니다. 기존 테마 변수를 재사용하며 컴포넌트 구조는 바꾸지 않았습니다. 헤더는SiteHeader의 경로 표시와 데스크톱 구분선을AppHeader에 맞췄습니다. 내용은docs/ui-system.md에 기록했습니다.검증
tsc --noEmit, knip, 단위 테스트(488 passed) 통과. 관련 e2e 실패 7개(navigation3,design-refreshprofile·dialogs,select-login2)는 변경 전 코드에서도 같은 오류로 실패beginner,security-records,theme,experience-ui,project-class-actions,control-spacing,design-refresh,terminal-system,interaction-refinements,personalized-security,project-check111개 중 94개 통과. 실패 15개는 변경 전 코드에서도 같은 오류,theme의/profile대비 검사는 변경 전 코드에서도 페이지 이동 중 문맥 소실로 라이트·다크 중 하나가 번갈아 실패. 문제 목록·프로젝트 점검·보안 점검의 라이트·다크 대비 검사(axe) 통과🤖 Generated with Claude Code
https://claude.ai/code/session_0163ZRxWUJKr5hrkZPe9dHD1