[feature] 지원서 폼 내에서 다른 지원서로 이동할 수 있다.#652
Merged
seongwon030 merged 5 commits intodevelop-fefrom Aug 14, 2025
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Contributor
|
Warning
|
| Cohort / File(s) | Summary of changes |
|---|---|
Applicant 상세 페이지 내비게이션/상태 동기화frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage.tsx |
이전/다음 버튼 및 선택 드롭다운으로 지원자 전환 추가, applicantIndex 도입, useAdminClubContext에서 setApplicantsData 사용해 메모/상태 변경을 컨텍스트와 동기화, 서버 업데이트는 디바운스 처리, getAnswerByQuestionId 추가 및 타입 참조 정리 |
지원자 목록 테이블 구조/컬럼frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx |
|
상태 매핑 유틸frontend/src/utils/mapStatusToGroup.ts |
DRAFT 케이스 제거, SUBMITTED/SCREENING 및 기본값을 SUBMITTED/‘서류검토’로 매핑, 나머지 케이스는 기존 매핑 유지; 시그니처 변경 없음 |
Sequence Diagram(s)
sequenceDiagram
actor Admin as Admin User
participant Page as ApplicantDetailPage
participant Ctx as AdminClubContext
participant API as Server API
Admin->>Page: 메모/상태 입력 변경
Page->>Ctx: setApplicantsData(현재 지원자 항목 갱신)
Note right of Page: 디바운스 타이머 시작/갱신
Page-->>API: PATCH /applicants/{id} (디바운스 후)
API-->>Page: 200 OK
Admin->>Page: 이전/다음 버튼 또는 드롭다운 선택
Page->>Ctx: applicantsData에서 index 계산
Page->>Page: 인접 지원자로 로컬 상태 전환
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
- [feature] 지원자의 상태와 메모를 변경한다. #651: ApplicantDetailPage 메모/상태 편집 및 ApplicantsTab 상태 렌더링 흐름을 동일 영역에서 수정.
- [Release] v1.0.9 #627: AdminApplicants 영역과 AdminClubContext(applicantsData/setApplicantsData) 도입 관련 변경과 직접 연계.
- [feature] 지원자를 검색할 수 있다 #650: ApplicantsTab 테이블 구조와 체크박스/상태 컬럼 편집과 코드 수준에서 중복되는 수정.
Suggested labels
🔨 Refactor
Suggested reviewers
- seongwon030
- oesnuj
- Zepelown
✨ 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/applicant-move-another
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 8
🔭 Outside diff range comments (1)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx (1)
91-92: 체크박스 열의 접근성을 개선하세요빈 헤더는 스크린 리더 사용자에게 혼란을 줄 수 있습니다. 적절한 aria-label을 추가하거나 시각적으로 숨겨진 텍스트를 제공하세요.
- <Styled.ApplicantTableHeader - style={{ width: 40 }} - ></Styled.ApplicantTableHeader> + <Styled.ApplicantTableHeader + style={{ width: 40 }} + aria-label="선택" + > + <span className="sr-only">선택</span> + </Styled.ApplicantTableHeader>
🧹 Nitpick comments (3)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx (1)
128-132: 복잡한 삼항 연산자를 간소화하세요조건부 렌더링이 불필요하게 복잡합니다. memo가 빈 문자열인지 체크하는 로직을 단순화할 수 있습니다.
- { - item.memo && item.memo.length > 0 ? ( - item.memo - ) : ( - <span style={{ color: '#989898' }}>메모를 입력하지 않았습니다.</span> - ) - } + {item.memo ? ( + item.memo + ) : ( + <span style={{ color: '#989898' }}>메모를 입력하지 않았습니다.</span> + )}frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage.tsx (2)
74-81: Context 업데이트의 부작용을 명확히 하세요
updateApplicantInContext함수명이 단순 업데이트를 시사하지만, 실제로는 전체 상태를 변경하는 부작용이 있습니다. 함수명을 더 명확하게 변경하거나 주석을 추가하세요.- const updateApplicantInContext = (memo: string, status: ApplicationStatus) => { + // Context의 applicants 배열에서 현재 지원자의 메모와 상태를 업데이트 + const syncApplicantWithContext = (memo: string, status: ApplicationStatus) => { if (!applicantsData || applicantIndex === -1) return; const updatedApplicants = [...applicantsData.applicants]; updatedApplicants[applicantIndex] = { ...applicant, memo, status }; setApplicantsData({ ...applicantsData, applicants: updatedApplicants }); };
127-139: 매직 넘버를 상수로 추출하세요스타일 값들이 인라인에 하드코딩되어 있습니다. 상수로 추출하여 유지보수성을 높이세요.
const NAVIGATION_STYLES = { container: { position: 'sticky' as const, top: 25, zIndex: 10, background: '#fff', display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
frontend/src/assets/images/icons/back_arrow_icon.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/forward_arrow_icon.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage.tsx(5 hunks)frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx(1 hunks)frontend/src/utils/mapStatusToGroup.ts(2 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/utils/mapStatusToGroup.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage.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.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage.tsx
🧬 Code Graph Analysis (2)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx (1)
frontend/src/types/applicants.ts (1)
Applicant(27-33)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage.tsx (3)
frontend/src/context/AdminClubContext.tsx (1)
useAdminClubContext(30-37)frontend/src/hooks/queries/application/useGetApplication.ts (1)
useGetApplication(4-10)frontend/src/apis/application/updateApplicantDetail.ts (1)
updateApplicantDetail(5-36)
Comment on lines
+34
to
+39
| const { applicant, applicantIndex } = useMemo(() => { | ||
| const index = applicantsData?.applicants.findIndex((a) => a.id === questionId) ?? -1; | ||
| const _applicant = applicantsData?.applicants[index]; | ||
|
|
||
| return { applicant: _applicant, applicantIndex: index }; | ||
| }, [applicantsData, questionId]); |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
undefined 처리와 가독성을 개선하세요
findIndex가 -1을 반환할 때의 처리와 변수명 개선이 필요합니다.
const { applicant, applicantIndex } = useMemo(() => {
const index = applicantsData?.applicants.findIndex((a) => a.id === questionId) ?? -1;
- const _applicant = applicantsData?.applicants[index];
+ const foundApplicant = index >= 0 ? applicantsData?.applicants[index] : undefined;
- return { applicant: _applicant, applicantIndex: index };
+ return { applicant: foundApplicant, applicantIndex: index };
}, [applicantsData, questionId]);📝 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.
Suggested change
| const { applicant, applicantIndex } = useMemo(() => { | |
| const index = applicantsData?.applicants.findIndex((a) => a.id === questionId) ?? -1; | |
| const _applicant = applicantsData?.applicants[index]; | |
| return { applicant: _applicant, applicantIndex: index }; | |
| }, [applicantsData, questionId]); | |
| const { applicant, applicantIndex } = useMemo(() => { | |
| const index = applicantsData?.applicants.findIndex((a) => a.id === questionId) ?? -1; | |
| const foundApplicant = index >= 0 | |
| ? applicantsData?.applicants[index] | |
| : undefined; | |
| return { applicant: foundApplicant, applicantIndex: index }; | |
| }, [applicantsData, questionId]); |
Comment on lines
+83
to
88
| const handleMemoChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { | ||
| const newMemo = e.target.value; | ||
| setAppMemo(newMemo); | ||
| updateApplicantInContext(newMemo, applicantStatus!); | ||
| updateApplicantDetail(newMemo, applicantStatus); | ||
| }; |
Contributor
There was a problem hiding this comment.
상태 업데이트 순서와 타입 안정성을 개선하세요
applicantStatus가 undefined일 수 있는데 non-null assertion(!)을 사용하고 있습니다. 또한 Context와 서버 업데이트 순서가 일치하지 않을 수 있습니다.
const handleMemoChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const newMemo = e.target.value;
+ if (!applicantStatus) return;
+
setAppMemo(newMemo);
- updateApplicantInContext(newMemo, applicantStatus!);
+ updateApplicantInContext(newMemo, applicantStatus);
updateApplicantDetail(newMemo, applicantStatus);
};📝 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.
Suggested change
| const handleMemoChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { | |
| const newMemo = e.target.value; | |
| setAppMemo(newMemo); | |
| updateApplicantInContext(newMemo, applicantStatus!); | |
| updateApplicantDetail(newMemo, applicantStatus); | |
| }; | |
| const handleMemoChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { | |
| const newMemo = e.target.value; | |
| if (!applicantStatus) return; | |
| setAppMemo(newMemo); | |
| updateApplicantInContext(newMemo, applicantStatus); | |
| updateApplicantDetail(newMemo, applicantStatus); | |
| }; |
🤖 Prompt for AI Agents
In frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage.tsx
around lines 83-88, remove the non-null assertion on applicantStatus and ensure
both context and server updates use the exact same, type-safe status value:
compute a single const status = applicantStatus ?? applicant?.status; if status
is still undefined, bail out or provide a clear default; call
updateApplicantInContext(newMemo, status) first to keep UI consistent, then call
updateApplicantDetail(newMemo, status) (await or handle the Promise and errors)
so server update follows the context change; update types/signatures if needed
to accept the status variable instead of forcing non-null.
Comment on lines
+97
to
+109
| const previousApplicant = () => { | ||
| const previousData = applicantsData.applicants[applicantIndex - 1]; | ||
| if (applicantIndex < 0 || !previousData) return; | ||
|
|
||
| navigate(`/admin/applicants/${previousData.id}`); | ||
| }; | ||
|
|
||
| const nextApplicant = () => { | ||
| const nextData = applicantsData.applicants[applicantIndex + 1]; | ||
| if (applicantIndex < 0 || !nextData) return; | ||
|
|
||
| navigate(`/admin/applicants/${nextData.id}`); | ||
| }; |
Contributor
There was a problem hiding this comment.
네비게이션 함수의 경계 검사 로직을 수정하세요
applicantIndex < 0 체크가 잘못된 위치에 있습니다. index가 -1인 경우 배열 접근 전에 체크해야 합니다.
const previousApplicant = () => {
- const previousData = applicantsData.applicants[applicantIndex - 1];
- if (applicantIndex < 0 || !previousData) return;
+ if (applicantIndex <= 0) return;
+ const previousData = applicantsData.applicants[applicantIndex - 1];
+ if (!previousData) return;
navigate(`/admin/applicants/${previousData.id}`);
};
const nextApplicant = () => {
- const nextData = applicantsData.applicants[applicantIndex + 1];
- if (applicantIndex < 0 || !nextData) return;
+ if (applicantIndex < 0 || applicantIndex >= applicantsData.applicants.length - 1) return;
+ const nextData = applicantsData.applicants[applicantIndex + 1];
+ if (!nextData) return;
navigate(`/admin/applicants/${nextData.id}`);
};📝 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.
Suggested change
| const previousApplicant = () => { | |
| const previousData = applicantsData.applicants[applicantIndex - 1]; | |
| if (applicantIndex < 0 || !previousData) return; | |
| navigate(`/admin/applicants/${previousData.id}`); | |
| }; | |
| const nextApplicant = () => { | |
| const nextData = applicantsData.applicants[applicantIndex + 1]; | |
| if (applicantIndex < 0 || !nextData) return; | |
| navigate(`/admin/applicants/${nextData.id}`); | |
| }; | |
| const previousApplicant = () => { | |
| // don’t try to go before the first applicant | |
| if (applicantIndex <= 0) return; | |
| const previousData = applicantsData.applicants[applicantIndex - 1]; | |
| if (!previousData) return; | |
| navigate(`/admin/applicants/${previousData.id}`); | |
| }; | |
| const nextApplicant = () => { | |
| // don’t go past the last applicant | |
| if (applicantIndex < 0 || applicantIndex >= applicantsData.applicants.length - 1) return; | |
| const nextData = applicantsData.applicants[applicantIndex + 1]; | |
| if (!nextData) return; | |
| navigate(`/admin/applicants/${nextData.id}`); | |
| }; |
🤖 Prompt for AI Agents
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage.tsx around
lines 97-109: the boundary checks occur after accessing the array; move and
tighten them so you never index out-of-bounds. For previousApplicant, first
validate applicantsData and that applicantIndex > 0 (or applicantIndex <= 0
return) before reading applicants[applicantIndex - 1], then navigate. For
nextApplicant, first validate applicantsData and that applicantIndex >= 0 and
applicantIndex < applicants.length - 1 (otherwise return) before reading
applicants[applicantIndex + 1], then navigate.
Comment on lines
+127
to
+139
| <img style={{cursor: 'pointer'}} onClick={previousApplicant} src={BackButton} alt="이전 지원자" /> | ||
| <select | ||
| id="applicantSelect" | ||
| value={applicant.id} | ||
| onChange={(e) => navigate(`/admin/applicants/${e.target.value}`)} | ||
| > | ||
| <img src={backButtonIcon} alt="뒤로가기" style={{ width: 16, height: 16 }} /> | ||
| </button> | ||
| {applicantsData.applicants.map((a) => ( | ||
| <option key={a.id} value={a.id}> | ||
| {a.answers[0].value} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| <img style={{cursor: 'pointer'}} onClick={nextApplicant} src={ForwardButton} alt="다음 지원자" /> |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
네비게이션 버튼과 셀렉트의 접근성을 개선하세요
이미지 버튼과 셀렉트 요소에 적절한 접근성 속성이 누락되어 있습니다.
- <img style={{cursor: 'pointer'}} onClick={previousApplicant} src={BackButton} alt="이전 지원자" />
+ <button
+ onClick={previousApplicant}
+ disabled={applicantIndex <= 0}
+ aria-label="이전 지원자로 이동"
+ style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
+ >
+ <img src={BackButton} alt="" />
+ </button>
<select
id="applicantSelect"
value={applicant.id}
onChange={(e) => navigate(`/admin/applicants/${e.target.value}`)}
+ aria-label="지원자 선택"
>
{applicantsData.applicants.map((a) => (
<option key={a.id} value={a.id}>
{a.answers[0].value}
</option>
))}
</select>
- <img style={{cursor: 'pointer'}} onClick={nextApplicant} src={ForwardButton} alt="다음 지원자" />
+ <button
+ onClick={nextApplicant}
+ disabled={applicantIndex >= applicantsData.applicants.length - 1}
+ aria-label="다음 지원자로 이동"
+ style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
+ >
+ <img src={ForwardButton} alt="" />
+ </button>📝 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.
Suggested change
| <img style={{cursor: 'pointer'}} onClick={previousApplicant} src={BackButton} alt="이전 지원자" /> | |
| <select | |
| id="applicantSelect" | |
| value={applicant.id} | |
| onChange={(e) => navigate(`/admin/applicants/${e.target.value}`)} | |
| > | |
| <img src={backButtonIcon} alt="뒤로가기" style={{ width: 16, height: 16 }} /> | |
| </button> | |
| {applicantsData.applicants.map((a) => ( | |
| <option key={a.id} value={a.id}> | |
| {a.answers[0].value} | |
| </option> | |
| ))} | |
| </select> | |
| <img style={{cursor: 'pointer'}} onClick={nextApplicant} src={ForwardButton} alt="다음 지원자" /> | |
| <button | |
| onClick={previousApplicant} | |
| disabled={applicantIndex <= 0} | |
| aria-label="이전 지원자로 이동" | |
| style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }} | |
| > | |
| <img src={BackButton} alt="" /> | |
| </button> | |
| <select | |
| id="applicantSelect" | |
| value={applicant.id} | |
| onChange={(e) => navigate(`/admin/applicants/${e.target.value}`)} | |
| aria-label="지원자 선택" | |
| > | |
| {applicantsData.applicants.map((a) => ( | |
| <option key={a.id} value={a.id}> | |
| {a.answers[0].value} | |
| </option> | |
| ))} | |
| </select> | |
| <button | |
| onClick={nextApplicant} | |
| disabled={applicantIndex >= applicantsData.applicants.length - 1} | |
| aria-label="다음 지원자로 이동" | |
| style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }} | |
| > | |
| <img src={ForwardButton} alt="" /> | |
| </button> |
| </select> | ||
| <img style={{cursor: 'pointer'}} onClick={nextApplicant} src={ForwardButton} alt="다음 지원자" /> | ||
| </div> | ||
| <textarea onInput={handleMemoChange} placeholder='메모를 입력해주세요' value={applicantMemo}></textarea> |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
textarea에 레이블과 접근성 속성을 추가하세요
textarea에 연결된 레이블이 없고 접근성 속성이 누락되어 있습니다.
- <textarea onInput={handleMemoChange} placeholder='메모를 입력해주세요' value={applicantMemo}></textarea>
+ <label htmlFor="applicantMemo" className="sr-only">지원자 메모</label>
+ <textarea
+ id="applicantMemo"
+ onInput={handleMemoChange}
+ placeholder='메모를 입력해주세요'
+ value={applicantMemo}
+ aria-label="지원자 메모"
+ />📝 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.
Suggested change
| <textarea onInput={handleMemoChange} placeholder='메모를 입력해주세요' value={applicantMemo}></textarea> | |
| <label htmlFor="applicantMemo" className="sr-only">지원자 메모</label> | |
| <textarea | |
| id="applicantMemo" | |
| onInput={handleMemoChange} | |
| placeholder='메모를 입력해주세요' | |
| value={applicantMemo} | |
| aria-label="지원자 메모" | |
| /> |
🤖 Prompt for AI Agents
In frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage.tsx
around line 141, the textarea lacks a label and accessibility attributes; add a
proper label element associated via id (e.g., <label
htmlFor="applicant-memo">메모</label>) and give the textarea that id, or
alternatively provide aria-label or aria-labelledby if a visible label isn't
desired; ensure the placeholder is not the only accessible name, keep the
existing onInput and value props, and if the field is required or has a
description add aria-required or aria-describedby referencing an explanatory
element.
Comment on lines
+112
to
+118
| <input | ||
| type='checkbox' | ||
| style={{ width: 24, height: 24, borderRadius: 6 }} | ||
| onClick={(e: React.MouseEvent<HTMLInputElement>) => | ||
| e.stopPropagation() | ||
| } | ||
| /> |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
체크박스에 접근성 속성과 상태 관리를 추가하세요
현재 체크박스는 시각적으로만 존재하고 실제 기능이나 상태 관리가 없습니다. aria-label과 checked 상태를 추가하여 접근성과 기능을 개선하세요.
<input
type='checkbox'
style={{ width: 24, height: 24, borderRadius: 6 }}
+ aria-label={`${item.answers[0].value} 선택`}
+ checked={false}
+ onChange={() => {/* TODO: 선택 로직 구현 */}}
onClick={(e: React.MouseEvent<HTMLInputElement>) =>
e.stopPropagation()
}
/>체크박스의 선택 기능을 구현하는 코드를 생성해드릴까요? 또는 이 작업을 추적하는 이슈를 생성해드릴까요?
🤖 Prompt for AI Agents
In frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx around
lines 112–118, the checkbox is purely visual and lacks accessibility attributes
and state handling; replace the implicit uncontrolled checkbox with a controlled
input: add an aria-label (or aria-labelledby), wire a checked prop tied to the
row's selection state (e.g., selectedIds or a prop like isSelected(rowId)),
replace the onClick stopPropagation with an onChange handler that toggles the
selection state (and still call e.stopPropagation()), and ensure keyboard
activation works (use onChange not onClick) so the checkbox is both accessible
and functional.
Comment on lines
+139
to
+145
| (() => { | ||
| 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}`; | ||
| })() |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
날짜 포맷팅을 유틸리티 함수로 추출하세요
날짜 포맷팅 로직이 IIFE로 인라인에 작성되어 있어 재사용성이 떨어지고 가독성이 좋지 않습니다. 전용 유틸리티 함수로 추출하는 것이 좋습니다.
utils 파일에 날짜 포맷팅 함수를 추가하세요:
// utils/dateFormatter.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}`;
};그리고 컴포넌트에서 사용하세요:
- {
- // 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)}🤖 Prompt for AI Agents
In frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.tsx around
lines 139 to 145, the inline IIFE date formatting should be extracted to a
reusable utility; create a utils/dateFormatter.ts exporting
formatDateToYYYYMMDD(dateString: string): string that constructs a Date from the
string, pads month/day to 2 digits and returns "YYYY-MM-DD", then replace the
IIFE in the component with a call to formatDateToYYYYMMDD(item.createdAt) and
import the utility.
Comment on lines
16
to
+17
| return { status: ApplicationStatus.ACCEPTED, label: '합격' }; | ||
| default: | ||
| return { status: ApplicationStatus.DRAFT, label: '서류검토'}; | ||
| return { status: ApplicationStatus.SUBMITTED, label: '서류검토'}; |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
불필요한 default 케이스를 제거하세요
TypeScript의 exhaustive 체크를 활용하면 모든 ApplicationStatus 열거형 값이 처리되고 있음을 컴파일 타임에 보장할 수 있습니다. default 케이스를 제거하면 새로운 상태가 추가될 때 컴파일 오류로 즉시 알 수 있습니다.
- default:
- return { status: ApplicationStatus.SUBMITTED, label: '서류검토'};추가로 TypeScript의 never 타입을 활용한 exhaustive 체크를 추가하는 것을 고려해보세요:
const exhaustiveCheck: never = status;
throw new Error(`Unhandled status: ${exhaustiveCheck}`);🤖 Prompt for AI Agents
In frontend/src/utils/mapStatusToGroup.ts around lines 16-17, remove the
redundant default branch from the switch so TypeScript can perform exhaustive
checking over ApplicationStatus; instead list and return for every
ApplicationStatus enum member explicitly and add a final exhaustive guard that
assigns the status to a never (exhaustiveCheck: never = status) and throws an
Error with the unhandled status to fail compilation if a new enum member is
added but not handled.
This was referenced Aug 15, 2025
Merged
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
2 participants
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.
#️⃣연관된 이슈
#633
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
New Features
Bug Fixes
Style