Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughSummary by CodeRabbit릴리스 노트
워크스루과제 제출 이력 조회 기능과 GitHub Issue Template을 Markdown에서 YAML 형식으로 마이그레이션했습니다. 제출 이력 스키마와 API 엔드포인트를 추가하고, 제출 페이지에서 터미널과 제출 이력 패널을 토글하는 UI를 구현했습니다. 변경사항GitHub Issue Template 마이그레이션 (Markdown → YAML)
Assignment 제출 이력 조회 기능
Sequence DiagramsequenceDiagram
actor User
participant Page as AssignmentSubmitPage
participant Editor as CodeEditor
participant API as AssignmentAPI
participant Query as React Query
participant Server as Backend
User->>Page: 페이지 로드 (이전 제출 코드 ID 포함)
Page->>Page: currentCodeId 초기화<br/>unitId 계산
Page->>Query: assignmentCode 쿼리<br/>(currentCodeId 기반)
Query->>Server: GET /assignment/{id}
Server-->>Query: 과제 코드 반환
Query-->>Page: assignmentCode 데이터
Page->>Query: getAssignmentSubmissionHistory<br/>(unitId, assignmentId)
Query->>Server: GET /submission-history
Server-->>Query: 제출 이력 목록 반환
Query-->>Page: submissionList (역순)
Page->>Editor: CodeEditor 렌더링<br/>(currentCodeId, runCode, onTerminalToggle)
Editor->>Editor: 토글 버튼 표시<br/>(터미널/이력 모드)
User->>Editor: "제출이력 보기" 클릭
Editor->>Page: onTerminalToggle()
Page->>Page: isTerminalOpen = false
Page->>Page: SubmissionHistoryPanel 렌더링<br/>(submissionList, currentCodeId)
User->>Page: 제출 이력에서 "가져오기" 클릭
Page->>Page: setCurrentCodeId(selectedCodeId)
Page->>Query: assignmentCode 다시 쿼리<br/>(새로운 currentCodeId)
Query->>Server: GET /assignment/{selectedCodeId}
Server-->>Query: 선택된 코드 반환
Query-->>Page: 업데이트된 코드
Editor->>Editor: 선택된 코드 에디터에 표시
User->>Editor: 코드 실행 또는 제출
Editor->>Page: runCode() / onSubmit()
Page->>API: 제출 요청
API->>Server: POST /submit
Server-->>API: 제출 결과 (codeId)
API-->>Page: 성공 응답
Page->>Page: currentCodeId 업데이트<br/>submissionList 무효화
Query->>Server: 제출 이력 재조회
Server-->>Query: 업데이트된 이력
Query-->>Page: 최신 submissionList
Page->>Page: SubmissionHistoryPanel 자동 갱신
예상 코드 리뷰 난이도🎯 3 (Moderate) | ⏱️ ~45분 이 변경사항은 새로운 제출 이력 기능을 추가하면서 여러 계층(스키마, API, 쿼리, UI, 페이지 통합)에 걸쳐 수행되어 중간 정도의 복잡도를 가집니다. 변경사항이 상태 관리, 컴포넌트 통합, 데이터 흐름을 포함하므로 각 부분의 일관성을 확인해야 합니다. 다행히 GitHub Issue Template 마이그레이션은 단순하고 반복적인 변경이므로 리뷰 시간을 다소 단축시킵니다. 관련 PR
제안 라벨
제안 리뷰어
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/pages/submit-assignment/ui/SubmissionHistoryPanel.tsx (1)
38-44: ⚡ Quick win조건부 className 패턴 개선 제안
현재 템플릿 리터럴로 조건부 클래스를 적용하고 있는데, 가독성을 위해
clsx라이브러리를 활용하거나 논리 연산자를 사용하는 것을 권장합니다.♻️ 개선 제안
방법 1: 논리 연산자 활용
- className={`px-3.5 py-1.5 - ${ - submission.codeId === currentCodeId - ? 'bg-[`#CAC2F7`] rounded-[35px]' - : 'bg-transparent' - } - `}> + className={`px-3.5 py-1.5 ${ + submission.codeId === currentCodeId + ? 'bg-[`#CAC2F7`] rounded-[35px]' + : 'bg-transparent' + }`}>방법 2: clsx 라이브러리 사용 (프로젝트에 이미 설치되어 있다면)
className={clsx( 'px-3.5 py-1.5', submission.codeId === currentCodeId ? 'bg-[`#CAC2F7`] rounded-[35px]' : 'bg-transparent' )}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/submit-assignment/ui/SubmissionHistoryPanel.tsx` around lines 38 - 44, In SubmissionHistoryPanel.tsx update the conditional className on the element that uses submission and currentCodeId: replace the long template literal with a clearer pattern (preferably using clsx) and add the clsx import; e.g. import clsx from 'clsx' at the top and set className via clsx combining the base classes ('px-3.5 py-1.5') with a conditional class that applies 'bg-[`#CAC2F7`] rounded-[35px]' when submission.codeId === currentCodeId and 'bg-transparent' otherwise; alternatively you may use logical && to append the active classes instead of a ternary.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/dashboard/ui/ScheduleCard.tsx`:
- Line 23: In ScheduleCard.tsx replace the loose equality check with a strict
one: update the conditional that renders {remainingDays == 0 ? '오늘' :
`${remainingDays}일 전`} to use === for remainingDays (use remainingDays === 0) so
the comparison in the ScheduleCard component is type-safe and avoids implicit
coercion.
In `@src/pages/submit-assignment/AssignmentSubmitPage.tsx`:
- Around line 43-70: unitId can be undefined causing Number(unitId) to become
NaN and be passed into useAssignmentSubmission; avoid this by adding an early
return (e.g., return null or a loading state) before any hooks that depend on
unitId so useAssignmentSubmission(Number(unitId), ...) is never called when
unitId is falsy; specifically, check the computed unitId (from
courseDetails.units.find(...)) and if not present render a fallback UI before
invoking useAssignmentSubmission, leaving other safe hooks unchanged.
---
Nitpick comments:
In `@src/pages/submit-assignment/ui/SubmissionHistoryPanel.tsx`:
- Around line 38-44: In SubmissionHistoryPanel.tsx update the conditional
className on the element that uses submission and currentCodeId: replace the
long template literal with a clearer pattern (preferably using clsx) and add the
clsx import; e.g. import clsx from 'clsx' at the top and set className via clsx
combining the base classes ('px-3.5 py-1.5') with a conditional class that
applies 'bg-[`#CAC2F7`] rounded-[35px]' when submission.codeId === currentCodeId
and 'bg-transparent' otherwise; alternatively you may use logical && to append
the active classes instead of a ternary.
🪄 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: 5f756167-4ba7-4dd6-86d1-914dede954de
⛔ Files ignored due to path filters (1)
src/assets/svg/retrieveIcon.svgis excluded by!**/*.svg
📒 Files selected for processing (18)
.github/ISSUE_TEMPLATE/bug_report.md.github/ISSUE_TEMPLATE/bug_report.yml.github/ISSUE_TEMPLATE/etc.md.github/ISSUE_TEMPLATE/etc.yml.github/ISSUE_TEMPLATE/feature_request.md.github/ISSUE_TEMPLATE/feature_request.ymlsrc/entities/assignment/api/assignmentApi.tssrc/entities/assignment/api/assignmentQueries.tssrc/entities/assignment/model/schemas.tssrc/features/assignment/submit-assignment/lib/useAssignmentSubmission.tssrc/pages/dashboard/ui/ScheduleCard.tsxsrc/pages/submit-assignment/AssignmentSubmitPage.tsxsrc/pages/submit-assignment/ui/CodeEditor.tsxsrc/pages/submit-assignment/ui/SubmissionHistoryPanel.tsxsrc/pages/submit-assignment/ui/Terminal.tsxsrc/shared/config/endpoints.tssrc/shared/lib/course.tssrc/shared/ui/badge/Badge.tsx
💤 Files with no reviewable changes (3)
- .github/ISSUE_TEMPLATE/etc.md
- .github/ISSUE_TEMPLATE/bug_report.md
- .github/ISSUE_TEMPLATE/feature_request.md
| variant='schedule' | ||
| schedule={remainingDays <= 1 ? 'upcoming' : 'later'}> | ||
| {remainingDays} | ||
| {remainingDays == 0 ? '오늘' : `${remainingDays}일 전`} |
There was a problem hiding this comment.
엄격한 동등 연산자(===)를 사용하세요.
느슨한 동등 연산자(==) 대신 엄격한 동등 연산자(===)를 사용해야 합니다. TypeScript/JavaScript에서는 타입 강제 변환을 방지하기 위해 항상 ===를 사용하는 것이 권장됩니다.
📚 참고: MDN - 동등 비교 및 동일성
🔧 제안하는 수정
- {remainingDays == 0 ? '오늘' : `${remainingDays}일 전`}
+ {remainingDays === 0 ? '오늘' : `${remainingDays}일 전`}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {remainingDays == 0 ? '오늘' : `${remainingDays}일 전`} | |
| {remainingDays === 0 ? '오늘' : `${remainingDays}일 전`} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/dashboard/ui/ScheduleCard.tsx` at line 23, In ScheduleCard.tsx
replace the loose equality check with a strict one: update the conditional that
renders {remainingDays == 0 ? '오늘' : `${remainingDays}일 전`} to use === for
remainingDays (use remainingDays === 0) so the comparison in the ScheduleCard
component is type-safe and avoids implicit coercion.
| const unitId = courseDetails.units.find((unit) => | ||
| unit.assignments.some( | ||
| (assignment) => assignment.id === Number(assignmentId) | ||
| ) | ||
| )?.id; | ||
|
|
||
| const {data: submissionList} = useQuery({ | ||
| ...assignmentQueries.getAssignmentSubmissionHistory( | ||
| Number(unitId), | ||
| Number(assignmentId) | ||
| ), | ||
| enabled: !!unitId, | ||
| }); | ||
|
|
||
| const {data: assignmentCode} = useQuery({ | ||
| ...assignmentQueries.getAssignmentCode(Number(codeId || 0)), | ||
| enabled: !!codeId, | ||
| ...assignmentQueries.getAssignmentCode(Number(currentCodeId || 0)), | ||
| enabled: !!currentCodeId, | ||
| }); | ||
|
|
||
| const {runCode, output, isRunning} = useCodeExecution(Number(assignmentId)); | ||
|
|
||
| const {onSubmit, result, isSubmitPending, isModalOpen, closeModal} = | ||
| useAssignmentSubmission(courseDetails, Number(assignmentId)); | ||
| useAssignmentSubmission( | ||
| Number(unitId), | ||
| courseDetails, | ||
| Number(assignmentId), | ||
| setCurrentCodeId | ||
| ); |
There was a problem hiding this comment.
unitId가 undefined일 때 NaN이 전달되는 문제
unitId 찾기 로직(Line 43-47)에서 해당 과제를 포함한 유닛을 찾지 못하면 unitId는 undefined가 됩니다. 이 상태에서 Line 65의 Number(unitId)는 NaN을 반환하고, 이 값이 useAssignmentSubmission 훅에 전달되어 API 호출 시 오류가 발생할 수 있습니다.
Line 49-55의 쿼리는 enabled: !!unitId로 보호되어 있지만, Line 65-70의 훅 호출은 보호되지 않았습니다.
🐛 개선 제안
방법 1: Early return 패턴
const unitId = courseDetails.units.find((unit) =>
unit.assignments.some(
(assignment) => assignment.id === Number(assignmentId)
)
)?.id;
+ if (!unitId) {
+ // 에러 상태 표시 또는 로딩 처리
+ return <div>유닛을 찾을 수 없습니다.</div>;
+ }
const {data: submissionList} = useQuery({
...assignmentQueries.getAssignmentSubmissionHistory(
- Number(unitId),
+ unitId,
Number(assignmentId)
),
- enabled: !!unitId,
});방법 2: 조건부 훅 호출 (비추천 - Rules of Hooks 위반 가능성)
훅 호출은 항상 같은 순서로 이루어져야 하므로, 조건부로 보호하기보다는 방법 1을 권장합니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/submit-assignment/AssignmentSubmitPage.tsx` around lines 43 - 70,
unitId can be undefined causing Number(unitId) to become NaN and be passed into
useAssignmentSubmission; avoid this by adding an early return (e.g., return null
or a loading state) before any hooks that depend on unitId so
useAssignmentSubmission(Number(unitId), ...) is never called when unitId is
falsy; specifically, check the computed unitId (from
courseDetails.units.find(...)) and if not present render a fallback UI before
invoking useAssignmentSubmission, leaving other safe hooks unchanged.
✨ 변경 사항
📦 전체 변경 이력
v0.14.0 ~ v0.15.0