refactor: 수험표 출력 버튼 비활성화 #402
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughA disabled attribute was added to the "수험표 출력" button in RegisteredExamDetailCard.tsx, preventing user interaction. The onClick handler remains unchanged. No other UI, routing, or logic modifications were introduced. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 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 |
📝 추가 및 변경된 파일총 1개 파일 변경 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
mosu-app/src/entities/exam/ui/RegisteredExamDetailCard.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Run DangerJS
- GitHub Check: Run Unit & Integration Tests
| <button | ||
| className="flex-1 border-l-[0.5px] p-4 hover:cursor-pointer" | ||
| onClick={() => onPrintTicketButtonClick()} | ||
| disabled={true} | ||
| > | ||
| 수험표 출력 | ||
| </button> |
There was a problem hiding this comment.
Implement conditional disabling based on exam date.
The button is permanently disabled with a hardcoded true value. Based on the overlay message (lines 80-81), the button should be conditionally disabled—enabled within 3 days of the exam date and disabled otherwise.
With the current implementation:
- The
onClickhandler (line 66) is unreachable dead code - Users cannot access the informative overlay message
- The button remains disabled even when the exam is within 3 days
Consider implementing date-based conditional logic:
+ const isWithinThreeDays = useCallback(() => {
+ const examDateObj = new Date(examDate);
+ const today = new Date();
+ const diffInDays = Math.ceil((examDateObj.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+ return diffInDays <= 3;
+ }, [examDate]);
+
+ const canPrintTicket = isWithinThreeDays();
+
const onPrintTicketButtonClick = useCallback(() => {
+ if (!canPrintTicket) {
+ overlay.open();
+ return;
+ }
- overlay.open();
+ // TODO: Implement actual ticket printing logic
- }, [overlay]);
+ }, [canPrintTicket, overlay]);
// ... in the button:
<button
className="flex-1 border-l-[0.5px] p-4 hover:cursor-pointer"
onClick={() => onPrintTicketButtonClick()}
- disabled={true}
+ disabled={!canPrintTicket}
+ aria-label={canPrintTicket ? "수험표 출력" : "수험표 출력 불가 (시험 3일 전부터 가능)"}
>
수험표 출력
</button>This approach:
- Shows the overlay message when users click while the button is enabled but before the 3-day window
- Disables the button visually when outside the window
- Adds ARIA attributes for accessibility
- Preserves the onClick handler for future ticket printing implementation
📝 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.
| <button | |
| className="flex-1 border-l-[0.5px] p-4 hover:cursor-pointer" | |
| onClick={() => onPrintTicketButtonClick()} | |
| disabled={true} | |
| > | |
| 수험표 출력 | |
| </button> | |
| <button | |
| className="flex-1 border-l-[0.5px] p-4 hover:cursor-pointer" | |
| onClick={() => onPrintTicketButtonClick()} | |
| disabled={!canPrintTicket} | |
| aria-label={canPrintTicket | |
| ? "수험표 출력" | |
| : "수험표 출력 불가 (시험 3일 전부터 가능)"} | |
| > | |
| 수험표 출력 | |
| </button> |
📚 Storybook이 Chromatic에 배포되었습니다!
|
✅ Linked Issue
🔍 What I did
💡 Why I did it
🧠 What I learned
🧪 How to test
🔧 Additional context
🚧 TODO (if any)
Summary by CodeRabbit