Skip to content

#89 fix: 전반적인 UI/UX 개선#93

Merged
suminb99 merged 12 commits intodevelopfrom
feat/89-ui-ux-polishing
Mar 26, 2026
Merged

#89 fix: 전반적인 UI/UX 개선#93
suminb99 merged 12 commits intodevelopfrom
feat/89-ui-ux-polishing

Conversation

@suminb99
Copy link
Copy Markdown
Contributor

⚙️ Related ISSUE Number

Related #89



📄 Work Description

  • 단원 목록 스크롤 적용
  • 강의 목록 정렬 (연도, 학기 순 내림차순)
  • 단원 수정 후 단원 상세 즉시 반영 안 되던 문제 수정
  • 과제 수정 버튼 → 수정 전용 페이지로 연결
  • window.confirmConfirmModal로 교체 (단원 삭제)
  • 빈 강의 상세 페이지 레이아웃 개선
  • 과제 설명 텍스트 공백/줄바꿈 유지
  • WebSocket URL을 VITE_API_BASE_URL 기반으로 동적 생성
  • JetBrains 폰트 파일 교체



📷 Screenshot



💬 To Reviewers



🔗 Reference

@suminb99 suminb99 requested a review from JiiminHa March 26, 2026 12:18
@suminb99 suminb99 self-assigned this Mar 26, 2026
@suminb99 suminb99 added 🛠️ refactor 코드 리팩토링 🐞 bugFix 버그 리포트 및 해결 labels Mar 26, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 26, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
snow-code-client Ready Ready Preview, Comment Mar 26, 2026 3:20pm

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 26, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3c543d43-df17-4769-a178-1dd5239643da

📥 Commits

Reviewing files that changed from the base of the PR and between 2ec3d55 and a7b9a7b.

📒 Files selected for processing (2)
  • src/pages/admin/units/ui/UnitFormLayout.tsx
  • src/pages/course-overview/ui/CourseContent.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/pages/course-overview/ui/CourseContent.tsx

📝 Walkthrough

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 단원 삭제 시 확인 모달 추가로 실수 방지
  • 개선 사항

    • 과정 내용이 없을 때의 레이아웃 및 스타일 개선
    • 과정 목록 정렬 기능 추가 (연도/학기 기준)
    • 단원 관리 인터페이스 사용성 향상
    • 과제 설명의 줄바꿈 및 공백 표시 개선
    • 과제 편집 기능 개선
  • 스타일

    • UI 컴포넌트 스타일링 최적화 및 폰트 성능 개선

Walkthrough

과정 목록 정렬, WebSocket 엔드포인트 동적 생성, 단원 편집/삭제 흐름 변경(삭제 확인 모달 추가 및 캐시 무효화 확장), UI 스타일/폰트 최적화 및 일부 라우트 추가를 포함한 변경입니다.

Changes

Cohort / File(s) Summary
단원 관리
src/features/unit/edit-unit/model/useEditUnit.ts, src/pages/admin/units/ui/UnitFormLayout.tsx, src/pages/admin/units/ui/UnitList.tsx, src/pages/admin/units/UnitLayout.tsx
단원 업데이트 시 목록 및 상세 쿼리 캐시 둘 다 무효화하도록 추가. 삭제 흐름은 window.confirm 제거 후 ConfirmModal로 대체(버튼 클릭은 모달 오픈). 리스트에 커스텀 스크롤바 클래스 및 레이아웃 높이 제약 추가.
API / 쿼리
src/entities/course/api/courseQueries.ts
getAllCourses의 select에서 data.courses를 연도 내림차순, 학기 오름차순으로 정렬하여 반환하도록 변경.
WebSocket / 실행 훅
src/features/assignment/run-assignment/lib/useCodeExecution.ts
WebSocket URL을 VITE_API_BASE_URL에서 파생(스킴 교체 → ws/wss)하여 /ws/conn에 연결하도록 변경; 기존 VITE_WS_BASE_URL 사용을 제거.
라우팅
src/shared/config/routes.ts
관리자 과제 편집 라우트 ROUTES.ADMIN.ASSIGNMENTS.EDIT(id) 추가(경로: /admin/assignments/edit/${id}).
과제 관리 UI
src/pages/manage-assignment/ui/AssignmentManageActionsBar.tsx, src/pages/submit-assignment/ui/AssignmentProblem.tsx
편집 버튼 네비게이션을 DETAIL에서 EDIT 경로로 변경(인라인 onClick). 과제 설명 <p>whitespace-pre-wrap 추가하여 공백/개행 보존.
코스 개요 UI / 스타일
src/pages/course-overview/ui/CourseContent.tsx, src/index.css
빈 강의 섹션 레이아웃·타이포그래피·이미지 크기 조정. JetBrains Mono 폰트 소스를 TTF → WOFF2(format('woff2'))로 변경.

Sequence Diagram(s)

(생성 조건 미충족 — 해당 섹션 생략)

Estimated code review effort

🎯 3 (보통) | ⏱️ ~23분

Possibly related PRs

Suggested labels

🎨 ui

Suggested reviewers

  • JiiminHa
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed 제목은 PR의 주요 목표인 전반적인 UI/UX 개선을 잘 반영하고 있으며, 변경 사항들이 UI/UX 개선과 버그 수정에 관련되어 있습니다.
Description check ✅ Passed 설명은 9개의 작업 항목을 상세히 나열하고 있으며, 모두 변경 사항들과 직접 관련이 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/89-ui-ux-polishing

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/pages/manage-assignment/ui/AssignmentManageActionsBar.tsx (1)

25-30: ⚠️ Potential issue | 🟠 Major

버튼의 type 속성과 aria-label 추가하여 접근성 개선해주세요.

25번 줄과 28번 줄의 <button> 요소가 type 속성 없이 렌더링되고 있어, 폼 내부에서 의도치 않은 submit 동작이 발생할 수 있으며, 스크린리더 사용자는 버튼의 용도를 파악하지 못합니다. type="button"aria-label을 명시하여 명확한 의도를 표현하세요.

🔧 제안 수정안
-      <button onClick={() => navigate(ROUTES.ADMIN.ASSIGNMENTS.EDIT(id))}>
+      <button
+        type='button'
+        aria-label='과제 수정'
+        onClick={() => navigate(ROUTES.ADMIN.ASSIGNMENTS.EDIT(id))}>
         <EditIcon className='w-3.5 h-4' />
       </button>
-      <button onClick={handleOnDelete}>
+      <button type='button' aria-label='과제 삭제' onClick={handleOnDelete}>
         <DeleteIcon className='w-3.5 h-4' />
       </button>

참고 문서:

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/pages/manage-assignment/ui/AssignmentManageActionsBar.tsx` around lines
25 - 30, The two button elements that call
navigate(ROUTES.ADMIN.ASSIGNMENTS.EDIT(id)) and handleOnDelete should explicitly
set type="button" to avoid unintended form submits and add descriptive
aria-labels (e.g., aria-label="Edit assignment" for the EditIcon button and
aria-label="Delete assignment" for the DeleteIcon button) so screen readers
understand their purpose; update the JSX for the buttons wrapping EditIcon and
DeleteIcon accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/features/assignment/run-assignment/lib/useCodeExecution.ts`:
- Around line 12-16: baseURL/env guard and insecure token handling: ensure
import.meta.env.VITE_API_BASE_URL is validated before using replace (avoid
runtime crash in baseURL.replace) by adding a guard in the module (used when
computing baseURL/wsURL) and fail-fast or return early from runCode if not set;
construct the WebSocket URL using the URL API (e.g., build new URL('/ws/conn',
baseURL) and set search params via url.searchParams.set('token',
encodeURIComponent(accessToken || '')) to avoid sending token=undefined, and
ensure runCode (which creates new WebSocket) either encodes a real token or
aborts with a clear error when accessToken is missing.

In `@src/pages/admin/units/ui/UnitFormLayout.tsx`:
- Around line 54-63: Update the ConfirmModal onConfirm handler in UnitFormLayout
(the JSX where ConfirmModal is rendered) so that it first calls
setIsDeleteModalOpen(false) to close the modal immediately and then
conditionally invokes the onDelete callback only if it is defined; replace the
current onConfirm={onDelete ?? (() => {})} with a handler that closes the modal
then calls onDelete?.() to avoid duplicate/accidental repeated requests.

In `@src/pages/course-overview/ui/CourseContent.tsx`:
- Line 42: The paragraph element in CourseContent.tsx uses an invalid Tailwind
class "mb"; update the className on the <p> in the CourseContent component to
use a valid margin-bottom utility such as "mb-4" (or another appropriate size
like "mb-3"/"mb-2") so the bottom margin is applied; ensure you only change the
'mb' token in the className string to the chosen 'mb-*' utility.

---

Outside diff comments:
In `@src/pages/manage-assignment/ui/AssignmentManageActionsBar.tsx`:
- Around line 25-30: The two button elements that call
navigate(ROUTES.ADMIN.ASSIGNMENTS.EDIT(id)) and handleOnDelete should explicitly
set type="button" to avoid unintended form submits and add descriptive
aria-labels (e.g., aria-label="Edit assignment" for the EditIcon button and
aria-label="Delete assignment" for the DeleteIcon button) so screen readers
understand their purpose; update the JSX for the buttons wrapping EditIcon and
DeleteIcon accordingly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d4e43f4e-741d-4797-94b5-459511c3f772

📥 Commits

Reviewing files that changed from the base of the PR and between d5a781c and 2ec3d55.

⛔ Files ignored due to path filters (2)
  • public/fonts/JetBrainsMono-Regular.ttf is excluded by !**/*.ttf
  • public/fonts/JetBrainsMono-Regular.woff2 is excluded by !**/*.woff2
📒 Files selected for processing (11)
  • src/entities/course/api/courseQueries.ts
  • src/features/assignment/run-assignment/lib/useCodeExecution.ts
  • src/features/unit/edit-unit/model/useEditUnit.ts
  • src/index.css
  • src/pages/admin/units/UnitLayout.tsx
  • src/pages/admin/units/ui/UnitFormLayout.tsx
  • src/pages/admin/units/ui/UnitList.tsx
  • src/pages/course-overview/ui/CourseContent.tsx
  • src/pages/manage-assignment/ui/AssignmentManageActionsBar.tsx
  • src/pages/submit-assignment/ui/AssignmentProblem.tsx
  • src/shared/config/routes.ts

Comment thread src/features/assignment/run-assignment/lib/useCodeExecution.ts
Comment thread src/pages/admin/units/ui/UnitFormLayout.tsx
Comment thread src/pages/course-overview/ui/CourseContent.tsx Outdated
@suminb99 suminb99 merged commit 97c00a2 into develop Mar 26, 2026
5 checks passed
@suminb99 suminb99 mentioned this pull request Mar 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐞 bugFix 버그 리포트 및 해결 🛠️ refactor 코드 리팩토링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants