#614 헤더 디자인 개선 및 전역 폰트 및 코드 블럭 폰트 수정#615
Merged
Merged
Conversation
Contributor
|
폰트 추천하겠습니다. 저는 4-1-3-2 순이네요. |
Contributor
There was a problem hiding this comment.
Pull request overview
이 PR은 OJ 프론트 전반의 헤더 UI를 개선하고, 전역 폰트(Noto Sans KR) 및 코드/코드블럭 폰트(JetBrains Mono) 적용을 통해 가독성과 일관성을 높이는 변경입니다.
Changes:
- 헤더(네비게이션) 스타일을 글래스/인디케이터 기반으로 리뉴얼하고, 문제 풀이 화면 네비게이션도 UI를 정리
- 전역 폰트(Noto Sans KR) 및 코드 폰트(JetBrains Mono) 적용 범위를 확장(일반 UI/코드 하이라이트/CodeMirror 등)
- 문제 목록/추천/커뮤니티 등 일부 컴포넌트의 렌더링 안정성 및 상태관리(store) 개선
Reviewed changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/styles/common.less | OJ 전역 폰트 스택 변경 및 폼/iview 컴포넌트 폰트 적용 |
| frontend/src/store/types.js | 문제 풀이 상태/테마 변경을 위한 Vuex 타입 추가 |
| frontend/src/store/modules/user.js | 문제 풀이 상태/테마를 mutation+action 기반으로 정리 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingNavbar/NavBar_Problem.vue | 문제 풀이 헤더 액션 UI 정리 및 유저 홈 이동 로직 변경 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue | 문제 상세 헤더/제약사항/코드블럭 스타일 개선 및 안전한 라벨 처리 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemCommunity.vue | Input maxlength 바인딩 형태 개선 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeHighlight.vue | 코드 하이라이트 폰트 스택 변경 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue | CodeMirror 테마 처리 단순화 및 불필요 prop 제거 |
| frontend/src/pages/oj/views/problem/problemSolving/Problem.vue | beforeunload 등록/해제 로직 정리 + 코드 폰트 적용 범위 확장 |
| frontend/src/pages/oj/views/problem/problemList/rightSideComponent/PersonalRecommendationBox.vue | 추천 문제 렌더링 가드 및 key 추가 |
| frontend/src/pages/oj/views/problem/problemList/problemListComponent/ProblemListTableHeader.vue | 태그 드롭다운을 uniqueTags 기반으로 안정화, prop 타입 수정 |
| frontend/src/pages/oj/views/problem/problemList/problemListComponent/ProblemListTable.vue | problemList prop 타입을 Array로 정정 |
| frontend/src/pages/oj/views/home/Notice/HomeNoticeItem.vue | 공지 아이템 텍스트 두께 조정 |
| frontend/src/pages/oj/views/home/HomeBannerListBox.vue | Carousel v-for key 개선 |
| frontend/src/pages/oj/views/community/Community.vue | 드롭다운 filter 전달값을 문자열로 단순화 |
| frontend/src/pages/oj/index.html | Google Fonts(Noto Sans KR, JetBrains Mono) 로드 추가 |
| frontend/src/pages/oj/components/NavBar.vue | 헤더 글래스 UI/인디케이터/드롭다운 트리거 개선(이벤트 리스너 추가) |
| frontend/src/pages/oj/components/LogoButton.vue | 로고 영역 크기/정렬 개선 |
| frontend/src/pages/oj/components/Highlight.vue | pre/code 폰트 스택을 JetBrains Mono로 정리 |
| frontend/src/pages/oj/App.vue | 헤더 글래스 관련 CSS 변수 및 difficulty 컬러 조정 |
| frontend/src/pages/admin/style.less | Admin UI에도 폰트 적용 범위 확장(Element/iView 포함) |
| frontend/src/pages/admin/App.vue | Admin 전역 폰트 스택 변경 |
Contributor
There was a problem hiding this comment.
Pull request overview
OJ 전반의 타이포그래피(전역 폰트/코드 폰트)와 헤더 UI를 개선하고, 문제 풀이 화면의 콘텐츠/네비게이션 스타일 및 일부 컴포넌트 안정성을 함께 정리한 PR입니다.
Changes:
- 전역 폰트를 Noto Sans KR, 코드 블록/에디터 폰트를 JetBrains Mono 중심으로 조정하고(OJ에 Google Fonts 로드 추가), 문제 풀이 화면 코드 폰트 적용 범위를 확장
- OJ 헤더를 글래스(blur) 스타일 + hover indicator 기반으로 리디자인하고, 커뮤니티 드롭다운 동작을 커스텀 제어로 변경
- 문제 풀이 상세 영역(제약사항 UI 등)과 스토어(user 모듈)의 상태 변경을 mutation 기반으로 정리
Reviewed changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/styles/common.less | OJ 전역 폰트 스택 변경 및 iView 입력/테이블 계열에 폰트 강제 적용 |
| frontend/src/store/types.js | 문제풀이 상태/테마 변경용 Vuex 타입 추가 |
| frontend/src/store/modules/user.js | 문제풀이 상태/다크모드 상태를 mutation/action으로 관리하도록 정리 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingNavbar/NavBar_Problem.vue | 문제풀이 헤더 액션 영역/아바타/테마 토글 동작 및 스타일 개선 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemDetailFlexibleContainer.vue | 문제 상세 타이틀/메타/제약사항 UI 개선 및 코드블록/프리 스타일 조정 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemCommunity.vue | Input maxlength를 숫자 prop 바인딩으로 수정 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeHighlight.vue | 코드 하이라이트 영역 폰트 스택 변경 |
| frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/CodeEditor.vue | CodeMirror 테마 적용 로직 단순화 및 prop 직접 변경 제거 |
| frontend/src/pages/oj/views/problem/problemSolving/Problem.vue | 문제풀이 루트 클래스 추가, beforeunload 등록/해제 안정화, 코드 폰트 전역 적용 |
| frontend/src/pages/oj/views/problem/problemList/rightSideComponent/PersonalRecommendationBox.vue | 추천 문제 렌더링 null-guard 및 v-for key 추가 |
| frontend/src/pages/oj/views/problem/problemList/problemListComponent/ProblemListTableHeader.vue | tag dropdown을 uniqueTags 기반으로 중복 제거, prop 타입을 Array로 수정 |
| frontend/src/pages/oj/views/problem/problemList/problemListComponent/ProblemListTable.vue | problemList prop 타입을 Array로 수정 |
| frontend/src/pages/oj/views/home/Notice/HomeNoticeItem.vue | 공지 항목 폰트 두께 조정 |
| frontend/src/pages/oj/views/home/HomeBannerListBox.vue | CarouselItem key를 banner_image 기반으로 수정 |
| frontend/src/pages/oj/views/community/Community.vue | Dropdown item name을 string으로 단순화하고 filter 파싱 로직 변경 |
| frontend/src/pages/oj/index.html | Google Fonts(Noto Sans KR, JetBrains Mono) 로드 추가 |
| frontend/src/pages/oj/components/NavBar.vue | 헤더 글래스 스타일/hover indicator/커뮤니티 드롭다운 UX 및 라우팅 중복 처리 개선 |
| frontend/src/pages/oj/components/LogoButton.vue | 로고/텍스트 레이아웃 및 헤더 높이 변수 연동 |
| frontend/src/pages/oj/components/Highlight.vue | pre/code 폰트 상속 기반으로 JetBrains Mono 적용 |
| frontend/src/pages/oj/App.vue | 헤더 글래스 관련 CSS 변수 및 difficulty 컬러 조정 |
| frontend/src/pages/admin/style.less | Admin iView/Element UI 컴포넌트 폰트 패밀리 강제 적용 |
| frontend/src/pages/admin/App.vue | Admin body 폰트 스택을 Noto Sans KR 중심으로 변경 |
Contributor
|
궁금한게 있는데 pr 본문에 2. 전역폰트 수정 부분에 수정 후 사진에 보면 별찍기에 별 모양이 왜 이상하게 출력되나요? |
Member
Author
@wlsgur11 저 글씨체가 왜 그런지는 모르겠는데 별이 3개 연달아 나올 경우에 중간 별이 살짝 위로 가는 현상이 있어요.. |
Contributor
|
코드블럭에 D2Coding 적용해볼 수 있을까요? |
Member
Author
|
JetBrains Mono 폰트 합자(ligatures) 기능 비활성화 후 현상 해결했습니다~~ |
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
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.
Changelog
ps. 폰트 추천 받아요..
1. 헤더 디자인 개선
2. 전역 폰트 수정 (Noto Sans KR)
3. 코드 블럭 내 폰트 수정 (Jetbrains Mono)
4. 문제 제약사항 부분 수정
Testing
UI 수동 테스트 완료
Ops Impact
N/A
Version Compatibility
N/A