Conversation
- 체크 시 아이콘 불러오기 - 기존 appearance는 초기화
- 체크박스: 기본 UI 숨기고 커스텀 스타일 적용, 체크 시 SVG 아이콘 표시 (SelectWrapper+Arrow) 방식 추가
- width, borderLeft 동적으로 설정
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
ApplicantsTab styles overhaulfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts |
Added SelectWrapper and Arrow for custom select UI; introduced ApplicantTableCheckbox with check icon; enhanced ApplicantTableHeader to accept width/borderLeft/isMemo and updated typography/alignment; ApplicantTableCol accepts isMemo; header wrapper adds borders; adjusted select/input appearance. |
ApplicantsTab component wiringfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx |
Adopted new styled components (SelectWrapper, Arrow, ApplicantTableCheckbox); applied header widths and optional left borders; memo column uses isMemo; maintained filtering/status rendering; added keyword onChange; minor layout/formatting updates. |
Sequence Diagram(s)
sequenceDiagram
actor User
participant ApplicantsTab
participant Styled as Styled Components
participant State as Local State
User->>ApplicantsTab: Type in search / change filters
ApplicantsTab->>State: setKeyword / update filter state
ApplicantsTab->>Styled: Render SelectWrapper + Arrow, Table, Checkbox
Styled-->>User: Updated UI (custom selects, headers, checkbox)
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~15 minutes
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| 체크박스 이미지로 변경 (MOA-158) | ✅ | |
| 전체/제출순 필터링 박스 디자인 변경 (MOA-158) | ✅ | |
| 지원자 목록 헤더 스타일 변경 (MOA-158) | ✅ |
Possibly related issues
- [feature] MOA-158 지원자 목록 디자인 입히기 #653: Also targets ApplicantsTab design/styling updates; overlaps with custom select, header, and checkbox changes.
Possibly related PRs
- [feature] 동아리 관리자는 지원자를 확인할 수 있다. #612: Introduced/modified the same ApplicantsTab styled components; this PR continues/refines those changes.
- [feature] 지원서 폼 내에서 다른 지원서로 이동할 수 있다. #652: Adjusts ApplicantsTab headers/checkbox and styling props similar to this PR.
- [Release] v1.0.9 #627: Earlier work on ApplicantsTab; this PR refactors the same files’ styling and props.
Suggested labels
✨ Feature
Suggested reviewers
- oesnuj
- lepitaaar
- Zepelown
Tip
🔌 Remote MCP (Model Context Protocol) integration is now available!
Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.
✨ Finishing Touches
- 📝 Generate Docstrings
🧪 Generate unit tests
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
feature/#653-applicant-list-design-MOA-158
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.
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. - PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
CodeRabbit Commands (Invoked using PR/Issue comments)
Type @coderabbitai help to get the list of available commands.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
Status, Documentation and Community
- Visit our Status Page to check the current availability of CodeRabbit.
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx (1)
150-163: 날짜 포맷팅 로직을 유틸 함수로 분리 권장날짜 포맷팅 로직이 JSX 내부에 IIFE로 구현되어 있어 가독성이 떨어집니다. 별도의 유틸 함수로 분리하는 것이 좋습니다.
먼저 날짜 포맷팅 유틸 함수를 생성:
// utils/dateFormat.ts export const formatDateToYYYYMMDD = (dateString: string): string => { const date = new Date(dateString); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; };그리고 컴포넌트에서 사용:
+import { formatDateToYYYYMMDD } from '@/utils/dateFormat'; <Styled.ApplicantTableCol> - { - // createdAt을 yyyy-mm-dd 형식으로 변환 - // 임시로.. 나중에 변경해야함 - (() => { - const date = new Date(item.createdAt); - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart( - 2, - '0', - ); - const day = String(date.getDate()).padStart(2, '0'); - return `${year}-${month}-${day}`; - })() - } + {formatDateToYYYYMMDD(item.createdAt)} </Styled.ApplicantTableCol>
🧹 Nitpick comments (6)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts (2)
86-94: 이미지 대신 SVG 아이콘 컴포넌트 사용 권장
Arrow컴포넌트가 이미지 태그를 사용하고 있는데, SVG 아이콘을 React 컴포넌트로 직접 임포트하여 사용하는 것이 더 나은 방법입니다. 이렇게 하면 스타일링이 더 유연해지고 네트워크 요청을 줄일 수 있습니다.-export const Arrow = styled.img` +import { ReactComponent as SelectArrowIcon } from '@/assets/images/icons/selectArrow.svg'; + +export const Arrow = styled(SelectArrowIcon)` position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; pointer-events: none; + fill: currentColor; `;그리고 ApplicantsTab.tsx에서도 다음과 같이 수정:
-<Styled.Arrow src={selectIcon} /> +<Styled.Arrow />
142-142: width prop의 타입 처리 개선 필요
widthprop이 number나 string을 받을 수 있는데, number인 경우에만 'px'를 추가하고 string인 경우는 그대로 사용하도록 개선하면 더 유연한 스타일링이 가능합니다.- width: ${({ width }) => (width ? `${width}px` : 'auto')}; + width: ${({ width }) => { + if (!width) return 'auto'; + return typeof width === 'number' ? `${width}px` : width; + }};frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx (4)
74-86: 필터 선택 기능이 구현되지 않음"전체"와 "제출순" 선택 옵션이 있지만 실제로 필터링이나 정렬 로직이 구현되어 있지 않습니다. 사용자가 옵션을 변경해도 아무 동작이 일어나지 않을 것입니다.
필터링과 정렬 기능을 구현하시겠습니까? 필터 상태 관리와 정렬 로직을 추가해드릴 수 있습니다.
140-148: 메모 렌더링 로직 간소화 가능메모가 없을 때의 처리를 더 간결하게 표현할 수 있습니다.
<Styled.ApplicantTableCol isMemo={true}> - {item.memo && item.memo.length > 0 ? ( - item.memo - ) : ( - <span style={{ color: '#989898' }}> - 메모를 입력하지 않았습니다. - </span> - )} + {item.memo?.length > 0 ? ( + item.memo + ) : ( + <span style={{ color: '#989898' }}> + 메모를 입력하지 않았습니다. + </span> + )} </Styled.ApplicantTableCol>
121-121: 인라인 스타일 대신 styled-component 속성 사용 권장
cursor: pointer스타일을 인라인으로 적용하는 대신 styled-component에서 처리하는 것이 일관성 있습니다.ApplicantsTab.styles.ts의
ApplicantTableRow에 다시 추가:export const ApplicantTableRow = styled.tr` border-bottom: 1px solid #f0f0f0; text-align: center; + cursor: pointer; &:hover { background: #f7faff; } `;그리고 여기서 인라인 스타일 제거:
<Styled.ApplicantTableRow key={index} onClick={() => navigate(`/admin/applicants/${item.id}`)} - style={{ cursor: 'pointer' }} >
124-128: 체크박스 선택 상태 관리 로직 누락체크박스가 렌더링되지만 실제 선택 상태를 관리하는 로직이 없습니다. 체크된 항목을 추적하거나 일괄 작업을 수행할 수 없습니다.
체크박스 선택 상태 관리 로직을 구현하시겠습니까? 선택된 항목 추적과 전체 선택/해제 기능을 추가해드릴 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (2)
frontend/src/assets/images/icons/checkBox.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/selectArrow.svgis excluded by!**/*.svg
📒 Files selected for processing (2)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts(3 hunks)frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx(6 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx
frontend/**/*.tsx
📄 CodeRabbit Inference Engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx
🧬 Code Graph Analysis (1)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx (1)
frontend/src/types/applicants.ts (1)
Applicant(27-33)
2 participants
#️⃣연관된 이슈
📝작업 내용
체크 표시
헤더 스타일
borderLeftprop을 설정하여 선택적으로 설정 가능합니다.width또한 prop으로 설정했습니다.메모 왼쪽 정렬
memoprop을 설정하여 boolean 값으로 메모인지 판단 후, textAlign 설정 가능합니다.중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit