[feature] 관리자 모바일 지원자 현황 상세 컴포넌트 추가 - #1892
Open
suhyun113 wants to merge 17 commits into
Open
Conversation
- ApplicantNavHeader: 중앙 chevron을 MoreArrowIcon(주황)으로 교체, prev/next에서 circle 제거 및 currentColor 적용 - ApplicantNavHeader: 비활성 화살표 gray500, 활성 화살표 gray800으로 구분 - AnswerCard: 선택 인디케이터를 check_circle_icon SVG로 교체 - AnswerCard: TextAnswer·ChoiceLabel을 p6r(14px, 400, 160%) 적용 - typography: p6r 토큰 추가
setTypography 헬퍼로 통일하고, width/height/overflow로 * 기호 영역을 제한, margin-bottom 1px으로 수직 정렬 미세 조정
지원서 없음 안내 문구는 ApplicantsListTab 관심사이므로 ApplicantDetailPage 하위에 잘못 위치했던 EmptyState 제거
등록된 지원서가 없을 때 Trigger를 disabled 처리하고 '등록된 지원서 없음' 라벨 및 비활성 스타일 표시
FormDropdownSelector에 Empty 스토리, ApplicantListRow에 EmptyApplicants(지원서 없음 빈 화면) 스토리 추가
- ChevronIcon을 20×20 ChevronWrapper로 감싸 클릭 영역 확보 - DropdownList 너비 80px 고정, $hasScroll 조건부로 높이·스크롤 제어 - Dropdown 높이·min-width도 $hasScroll 조건부로 변경 - DropdownItem: flex→block+text-align으로 전환, padding·overflow 정리 - 불필요한 line-height 선언 및 동적 $maxHeight·$height prop 제거
stroke-width 1.5 적용 시 path 시작점(x=0.6)에서 stroke가 viewBox 바깥(-0.15px)으로 삐져나와 왼쪽이 잘리는 문제 수정. overflow: visible로 SVG 뷰포트 클리핑 해제, 아이콘 크기도 SVG 비율에 맞게 11×6 → 10×6으로 조정
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
Contributor
Walkthrough모바일 지원자 목록에 검색, 정렬, 필터, 선택, 일괄 작업, 통계 표시 기능을 추가했습니다. 모바일 지원자 상세 화면에 탐색 헤더와 답변 카드를 추가했습니다. 관련 상태 타입, 라벨, 테마 스타일 및 확장 아이콘을 갱신했습니다. Changes모바일 지원자 목록 표시와 상태 관리
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related issues
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
📝 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 |
✅ UI 변경사항 없음
전체 141개 스토리 · 51개 컴포넌트 |
suhyun113
changed the title
suhyun113
changed the base branch from
develop-fe
to
feature/#1885-mobile-applicants-shared-components-MOA-1055
August 4, 2026 11:28
![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: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx (1)
1-212: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winPrettier 검사 실패를 수정하세요.
이 파일의 현재 형식이 Frontend CI의 Prettier 검사에 실패합니다. 이 파일에 Prettier를 적용한 뒤 변경 결과를 커밋하세요.
🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx` around lines 1 - 212, Apply the project’s Prettier formatting to the ApplicantListRow Storybook file, including imports, JSX, object literals, and spacing, without changing behavior or story definitions. Verify the formatted file passes the Frontend CI Prettier check.Source: Pipeline failures
🧹 Nitpick comments (3)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx (1)
1-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win타입 import를 internal module 뒤에 배치하세요.
두 파일의 타입 전용 import가 internal module보다 앞에 있습니다.
import type을 사용하고 internal module 뒤, styles import 앞에 배치하세요.
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx#L1-L3:mapStatusToGroup뒤에import type { Applicant }를 배치하세요.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx#L1-L5:AVAILABLE_STATUSES,mapStatusToGroup뒤에import type { ApplicationStatus }를 배치하세요.As per coding guidelines,
Order imports as external libraries, internal modules, types, then styles.🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx` around lines 1 - 3, Reorder imports in ApplicantListRow.tsx (lines 1-3) so mapStatusToGroup remains first, followed by type-only Applicant, then styles. Apply the same ordering in BulkActionBar.tsx (lines 1-5): keep AVAILABLE_STATUSES and mapStatusToGroup before the type-only ApplicationStatus import, with styles last.Source: Coding guidelines
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx (1)
23-28: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win인라인 스타일을 styled-components와 테마 토큰으로 교체하세요.
width,gap, 글꼴, 색상 값을 Storybook 래퍼에 직접 지정했습니다.StoryViewport, 빈 상태 컨테이너, 메시지 스타일을 추출하고colors와typography토큰을 사용하세요.As per coding guidelines,
Use styled-components and the project theme system for styling.Also applies to: 153-165, 185-210
🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx` around lines 23 - 28, Replace the inline styles in the Storybook decorator and the related empty-state/message sections with styled-components. Extract styled wrappers such as StoryViewport, the empty-state container, and the message style, and apply the project theme’s colors and typography tokens for width, gap, font, and color values while preserving the existing layout and story behavior.Source: Coding guidelines
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsx (1)
9-15: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoffStorybook 데코레이터의 인라인 스타일을 styled-components로 이동하십시오.
각 Storybook 데코레이터가 인라인
style을 사용합니다. 공통 또는 스토리 전용 styled-components 컨테이너를 만들고 색상에는 project theme 값을 사용하십시오.
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsx#L9-L15: 모바일 폭과 padding을 styled-components 컨테이너로 이동하십시오.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.stories.tsx#L11-L17: 모바일 폭, padding, 배경색을 styled-components와 theme color로 이동하십시오.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.stories.tsx#L10-L16: 모바일 폭을 styled-components 컨테이너로 이동하십시오.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/SortDropdown/SortDropdown.stories.tsx#L10-L23: 폭과 flex 정렬 규칙을 styled-components 컨테이너로 이동하십시오.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.stories.tsx#L71-L77: 폭, position, 하단 여백을 styled-components 컨테이너로 이동하십시오.As per coding guidelines, “Use styled-components and the project theme system for styling.”
🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsx` around lines 9 - 15, Replace decorator inline styles with styled-components containers using project theme values where colors are needed. Update StatusSummaryCard.stories.tsx:9-15 for mobile width and padding; StatusFilterPills.stories.tsx:11-17 for width, padding, and themed background; ApplicantSearchBox.stories.tsx:10-16 for width; SortDropdown.stories.tsx:10-23 for width and flex alignment; and FormDropdownSelector.stories.tsx:71-77 for width, positioning, and bottom spacing.Source: Coding guidelines
🤖 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
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.stories.tsx`:
- Around line 9-14: Apply Prettier formatting to the three affected files: wrap
the inline style object in the decorator in AnswerCard.stories.tsx, format the
full affected section in ApplicantNavHeader.styles.ts, and add the required
space before the closing brace in typography.ts.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.styles.ts`:
- Around line 19-26: Update the QuestionRow and ChoiceItem styled components to
remove their fixed height or replace it with min-height, allowing custom text to
wrap across multiple lines on mobile. Adjust their flex alignment to flex-start
where needed so multiline content remains within its container and does not
overlap adjacent areas.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.tsx`:
- Around line 17-18: Update the answerText assignment in AnswerCard to select
the first trimmed, non-empty answer from answers instead of always using
answers[0]. Keep hasAnswer consistent with this validity check so inputs like an
initial empty string followed by a real answer display the valid response.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/ApplicantNavHeader/ApplicantNavHeader.tsx`:
- Around line 63-68: ApplicantNavHeader의 Styled.Center와 Styled.DropdownItem을 클릭
가능한 div가 아닌 button 요소로 변경해 키보드 포커스와 Enter/Space 실행을 지원하세요. Styled.Center 토글 버튼에는
isOpen 상태를 반영하는 aria-expanded를 추가하고, 현재 선택된 DropdownItem에는 선택 상태를 나타내는
aria-current 또는 aria-selected를 추가하세요.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx`:
- Around line 30-38: Replace the non-native interactions in ApplicantListRow
with an input type="checkbox" for selection and a separate non-nested button for
opening applicant details, preserving their existing handlers and checked state;
update Row, CheckboxWrapper, and Checkbox styles in ApplicantListRow.styles.ts
to fit the new controls. Render each status menu item in BulkActionBar.tsx as a
button type="button", and change StatusMenuItem in BulkActionBar.styles.ts to
styled.button while preserving its current appearance and behavior. Apply these
changes in
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx
(30-38),
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.styles.ts
(6-44),
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx
(42-49), and
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.styles.ts
(72-81).
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.tsx`:
- Around line 11-17: Update the Styled.Input in ApplicantSearchBox to provide an
accessible name by adding aria-label='지원자 이름 검색' or associating it with a
visible label, while preserving the existing value and onChange behavior.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx`:
- Around line 20-27: Update BulkActionBar’s enabled-state handling so the status
menu closes when enabled becomes false, and guard handleStatusSelect against
invoking onStatusChange while disabled. Apply the native disabled attribute to
both relevant action buttons, while preserving the existing enabled behavior and
menu toggle logic.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.tsx`:
- Around line 14-80: Run Prettier on the FormDropdownSelector component and
apply its formatting changes, particularly to the TriggerLabel expression and
surrounding JSX, then rerun the CI formatting check to confirm it passes.
- Around line 61-68: Update Styled.MenuItem in FormDropdownSelector.tsx to
include type="button", and change its definition in
FormDropdownSelector.styles.ts from styled.div to styled.button. Remove the
button’s default border while preserving the existing visual styles and
selection behavior.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.tsx`:
- Around line 53-66: Update the Styled.Pill rendering in StatusFilterPills by
adding aria-pressed bound to isActive, so each filter’s current selection state
is exposed to assistive technologies while preserving the existing $active
styling behavior.
---
Outside diff comments:
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx`:
- Around line 1-212: Apply the project’s Prettier formatting to the
ApplicantListRow Storybook file, including imports, JSX, object literals, and
spacing, without changing behavior or story definitions. Verify the formatted
file passes the Frontend CI Prettier check.
---
Nitpick comments:
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx`:
- Around line 23-28: Replace the inline styles in the Storybook decorator and
the related empty-state/message sections with styled-components. Extract styled
wrappers such as StoryViewport, the empty-state container, and the message
style, and apply the project theme’s colors and typography tokens for width,
gap, font, and color values while preserving the existing layout and story
behavior.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx`:
- Around line 1-3: Reorder imports in ApplicantListRow.tsx (lines 1-3) so
mapStatusToGroup remains first, followed by type-only Applicant, then styles.
Apply the same ordering in BulkActionBar.tsx (lines 1-5): keep
AVAILABLE_STATUSES and mapStatusToGroup before the type-only ApplicationStatus
import, with styles last.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsx`:
- Around line 9-15: Replace decorator inline styles with styled-components
containers using project theme values where colors are needed. Update
StatusSummaryCard.stories.tsx:9-15 for mobile width and padding;
StatusFilterPills.stories.tsx:11-17 for width, padding, and themed background;
ApplicantSearchBox.stories.tsx:10-16 for width; SortDropdown.stories.tsx:10-23
for width and flex alignment; and FormDropdownSelector.stories.tsx:71-77 for
width, positioning, and bottom spacing.
🪄 Autofix
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 Plus
Run ID: e0a1e216-ac95-4c42-b3ca-0f3f4b3932d1
⛔ Files ignored due to path filters (4)
frontend/src/assets/images/icons/ExpandArrow.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/check_circle_icon.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/more_arraw_icon.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/triangle_down.svgis excluded by!**/*.svg
📒 Files selected for processing (32)
frontend/src/pages/AdminPage/components/ApplicationFormList/ApplicationFormList.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/ApplicantNavHeader/ApplicantNavHeader.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/ApplicantNavHeader/ApplicantNavHeader.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/ApplicantNavHeader/ApplicantNavHeader.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/SortDropdown/SortDropdown.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/SortDropdown/SortDropdown.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/SortDropdown/SortDropdown.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.tsxfrontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationListTab.styles.tsfrontend/src/styles/theme/typography.tsfrontend/src/types/applicants.tsfrontend/src/utils/mapStatusToGroup.ts
Comment on lines
+19
to
+26
| export const QuestionRow = styled.div` | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| gap: 6px; | ||
| width: 100%; | ||
| height: 24px; | ||
| `; |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
가변 텍스트 컨테이너의 고정 높이를 제거하세요.
QuestionRow와 ChoiceItem은 사용자 정의 텍스트를 포함하지만 고정 높이를 사용합니다. 긴 질문이나 선택지는 모바일 너비에서 여러 줄로 표시됩니다. 이 경우 텍스트가 다음 영역과 겹치거나 테두리 밖으로 나갑니다.
height를 제거하거나 min-height로 변경하세요. 여러 줄을 허용할 때는 정렬도 flex-start 기준으로 조정하세요.
Also applies to: 79-95
🤖 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
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.styles.ts`
around lines 19 - 26, Update the QuestionRow and ChoiceItem styled components to
remove their fixed height or replace it with min-height, allowing custom text to
wrap across multiple lines on mobile. Adjust their flex alignment to flex-start
where needed so multiline content remains within its container and does not
overlap adjacent areas.
Comment on lines
+17
to
+18
| const hasAnswer = answers.length > 0 && answers.some((a) => a.trim() !== ''); | ||
| const answerText = answers[0] ?? ''; |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
첫 번째 유효한 텍스트 답변을 사용하세요.
hasAnswer는 배열 전체를 검사하지만 answerText는 항상 answers[0]을 사용합니다. ['', '실제 답변']과 같은 입력은 빈 답변 상자를 표시합니다.
수정 예시
- const hasAnswer = answers.length > 0 && answers.some((a) => a.trim() !== '');
- const answerText = answers[0] ?? '';
+ const answerText = answers.find((answer) => answer.trim() !== '') ?? '';
+ const hasAnswer = answerText !== '';📝 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 hasAnswer = answers.length > 0 && answers.some((a) => a.trim() !== ''); | |
| const answerText = answers[0] ?? ''; | |
| const answerText = answers.find((answer) => answer.trim() !== '') ?? ''; | |
| const hasAnswer = answerText !== ''; |
🤖 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
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.tsx`
around lines 17 - 18, Update the answerText assignment in AnswerCard to select
the first trimmed, non-empty answer from answers instead of always using
answers[0]. Keep hasAnswer consistent with this validity check so inputs like an
initial empty string followed by a real answer display the valid response.
Comment on lines
+63
to
+68
| <Styled.Center onClick={() => setIsOpen((prev) => !prev)}> | ||
| <Styled.ApplicantName>{current?.name ?? '-'}</Styled.ApplicantName> | ||
| <Styled.ChevronWrapper> | ||
| <Styled.ChevronIcon $isOpen={isOpen} /> | ||
| </Styled.ChevronWrapper> | ||
| </Styled.Center> |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
드롭다운 조작 요소에 버튼 의미를 적용하세요.
Styled.Center와 Styled.DropdownItem은 클릭 가능한 div입니다. 키보드 사용자는 이 요소에 초점을 두거나 Enter와 Space로 실행할 수 없습니다.
두 요소를 button으로 변경하세요. 드롭다운 토글에는 aria-expanded를 추가하세요. 선택한 항목에는 aria-current 또는 aria-selected를 추가하세요.
Also applies to: 89-95
🤖 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
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/ApplicantNavHeader/ApplicantNavHeader.tsx`
around lines 63 - 68, ApplicantNavHeader의 Styled.Center와 Styled.DropdownItem을 클릭
가능한 div가 아닌 button 요소로 변경해 키보드 포커스와 Enter/Space 실행을 지원하세요. Styled.Center 토글 버튼에는
isOpen 상태를 반영하는 aria-expanded를 추가하고, 현재 선택된 DropdownItem에는 선택 상태를 나타내는
aria-current 또는 aria-selected를 추가하세요.
Contributor
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx (1)
1-212: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winPrettier 검사 실패를 수정하세요.
이 파일의 현재 형식이 Frontend CI의 Prettier 검사에 실패합니다. 이 파일에 Prettier를 적용한 뒤 변경 결과를 커밋하세요.
🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx` around lines 1 - 212, Apply the project’s Prettier formatting to the ApplicantListRow Storybook file, including imports, JSX, object literals, and spacing, without changing behavior or story definitions. Verify the formatted file passes the Frontend CI Prettier check.Source: Pipeline failures
🧹 Nitpick comments (3)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx (1)
1-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win타입 import를 internal module 뒤에 배치하세요.
두 파일의 타입 전용 import가 internal module보다 앞에 있습니다.
import type을 사용하고 internal module 뒤, styles import 앞에 배치하세요.
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx#L1-L3:mapStatusToGroup뒤에import type { Applicant }를 배치하세요.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx#L1-L5:AVAILABLE_STATUSES,mapStatusToGroup뒤에import type { ApplicationStatus }를 배치하세요.As per coding guidelines,
Order imports as external libraries, internal modules, types, then styles.🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx` around lines 1 - 3, Reorder imports in ApplicantListRow.tsx (lines 1-3) so mapStatusToGroup remains first, followed by type-only Applicant, then styles. Apply the same ordering in BulkActionBar.tsx (lines 1-5): keep AVAILABLE_STATUSES and mapStatusToGroup before the type-only ApplicationStatus import, with styles last.Source: Coding guidelines
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx (1)
23-28: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win인라인 스타일을 styled-components와 테마 토큰으로 교체하세요.
width,gap, 글꼴, 색상 값을 Storybook 래퍼에 직접 지정했습니다.StoryViewport, 빈 상태 컨테이너, 메시지 스타일을 추출하고colors와typography토큰을 사용하세요.As per coding guidelines,
Use styled-components and the project theme system for styling.Also applies to: 153-165, 185-210
🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx` around lines 23 - 28, Replace the inline styles in the Storybook decorator and the related empty-state/message sections with styled-components. Extract styled wrappers such as StoryViewport, the empty-state container, and the message style, and apply the project theme’s colors and typography tokens for width, gap, font, and color values while preserving the existing layout and story behavior.Source: Coding guidelines
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsx (1)
9-15: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoffStorybook 데코레이터의 인라인 스타일을 styled-components로 이동하십시오.
각 Storybook 데코레이터가 인라인
style을 사용합니다. 공통 또는 스토리 전용 styled-components 컨테이너를 만들고 색상에는 project theme 값을 사용하십시오.
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsx#L9-L15: 모바일 폭과 padding을 styled-components 컨테이너로 이동하십시오.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.stories.tsx#L11-L17: 모바일 폭, padding, 배경색을 styled-components와 theme color로 이동하십시오.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.stories.tsx#L10-L16: 모바일 폭을 styled-components 컨테이너로 이동하십시오.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/SortDropdown/SortDropdown.stories.tsx#L10-L23: 폭과 flex 정렬 규칙을 styled-components 컨테이너로 이동하십시오.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.stories.tsx#L71-L77: 폭, position, 하단 여백을 styled-components 컨테이너로 이동하십시오.As per coding guidelines, “Use styled-components and the project theme system for styling.”
🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsx` around lines 9 - 15, Replace decorator inline styles with styled-components containers using project theme values where colors are needed. Update StatusSummaryCard.stories.tsx:9-15 for mobile width and padding; StatusFilterPills.stories.tsx:11-17 for width, padding, and themed background; ApplicantSearchBox.stories.tsx:10-16 for width; SortDropdown.stories.tsx:10-23 for width and flex alignment; and FormDropdownSelector.stories.tsx:71-77 for width, positioning, and bottom spacing.Source: Coding guidelines
🤖 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
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.stories.tsx`:
- Around line 9-14: Apply Prettier formatting to the three affected files: wrap
the inline style object in the decorator in AnswerCard.stories.tsx, format the
full affected section in ApplicantNavHeader.styles.ts, and add the required
space before the closing brace in typography.ts.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.styles.ts`:
- Around line 19-26: Update the QuestionRow and ChoiceItem styled components to
remove their fixed height or replace it with min-height, allowing custom text to
wrap across multiple lines on mobile. Adjust their flex alignment to flex-start
where needed so multiline content remains within its container and does not
overlap adjacent areas.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.tsx`:
- Around line 17-18: Update the answerText assignment in AnswerCard to select
the first trimmed, non-empty answer from answers instead of always using
answers[0]. Keep hasAnswer consistent with this validity check so inputs like an
initial empty string followed by a real answer display the valid response.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/ApplicantNavHeader/ApplicantNavHeader.tsx`:
- Around line 63-68: ApplicantNavHeader의 Styled.Center와 Styled.DropdownItem을 클릭
가능한 div가 아닌 button 요소로 변경해 키보드 포커스와 Enter/Space 실행을 지원하세요. Styled.Center 토글 버튼에는
isOpen 상태를 반영하는 aria-expanded를 추가하고, 현재 선택된 DropdownItem에는 선택 상태를 나타내는
aria-current 또는 aria-selected를 추가하세요.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx`:
- Around line 30-38: Replace the non-native interactions in ApplicantListRow
with an input type="checkbox" for selection and a separate non-nested button for
opening applicant details, preserving their existing handlers and checked state;
update Row, CheckboxWrapper, and Checkbox styles in ApplicantListRow.styles.ts
to fit the new controls. Render each status menu item in BulkActionBar.tsx as a
button type="button", and change StatusMenuItem in BulkActionBar.styles.ts to
styled.button while preserving its current appearance and behavior. Apply these
changes in
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx
(30-38),
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.styles.ts
(6-44),
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx
(42-49), and
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.styles.ts
(72-81).
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.tsx`:
- Around line 11-17: Update the Styled.Input in ApplicantSearchBox to provide an
accessible name by adding aria-label='지원자 이름 검색' or associating it with a
visible label, while preserving the existing value and onChange behavior.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx`:
- Around line 20-27: Update BulkActionBar’s enabled-state handling so the status
menu closes when enabled becomes false, and guard handleStatusSelect against
invoking onStatusChange while disabled. Apply the native disabled attribute to
both relevant action buttons, while preserving the existing enabled behavior and
menu toggle logic.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.tsx`:
- Around line 14-80: Run Prettier on the FormDropdownSelector component and
apply its formatting changes, particularly to the TriggerLabel expression and
surrounding JSX, then rerun the CI formatting check to confirm it passes.
- Around line 61-68: Update Styled.MenuItem in FormDropdownSelector.tsx to
include type="button", and change its definition in
FormDropdownSelector.styles.ts from styled.div to styled.button. Remove the
button’s default border while preserving the existing visual styles and
selection behavior.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.tsx`:
- Around line 53-66: Update the Styled.Pill rendering in StatusFilterPills by
adding aria-pressed bound to isActive, so each filter’s current selection state
is exposed to assistive technologies while preserving the existing $active
styling behavior.
---
Outside diff comments:
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx`:
- Around line 1-212: Apply the project’s Prettier formatting to the
ApplicantListRow Storybook file, including imports, JSX, object literals, and
spacing, without changing behavior or story definitions. Verify the formatted
file passes the Frontend CI Prettier check.
---
Nitpick comments:
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsx`:
- Around line 23-28: Replace the inline styles in the Storybook decorator and
the related empty-state/message sections with styled-components. Extract styled
wrappers such as StoryViewport, the empty-state container, and the message
style, and apply the project theme’s colors and typography tokens for width,
gap, font, and color values while preserving the existing layout and story
behavior.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx`:
- Around line 1-3: Reorder imports in ApplicantListRow.tsx (lines 1-3) so
mapStatusToGroup remains first, followed by type-only Applicant, then styles.
Apply the same ordering in BulkActionBar.tsx (lines 1-5): keep
AVAILABLE_STATUSES and mapStatusToGroup before the type-only ApplicationStatus
import, with styles last.
In
`@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsx`:
- Around line 9-15: Replace decorator inline styles with styled-components
containers using project theme values where colors are needed. Update
StatusSummaryCard.stories.tsx:9-15 for mobile width and padding;
StatusFilterPills.stories.tsx:11-17 for width, padding, and themed background;
ApplicantSearchBox.stories.tsx:10-16 for width; SortDropdown.stories.tsx:10-23
for width and flex alignment; and FormDropdownSelector.stories.tsx:71-77 for
width, positioning, and bottom spacing.
🪄 Autofix
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 Plus
Run ID: e0a1e216-ac95-4c42-b3ca-0f3f4b3932d1
⛔ Files ignored due to path filters (4)
frontend/src/assets/images/icons/ExpandArrow.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/check_circle_icon.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/more_arraw_icon.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/triangle_down.svgis excluded by!**/*.svg
📒 Files selected for processing (32)
frontend/src/pages/AdminPage/components/ApplicationFormList/ApplicationFormList.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/AnswerCard/AnswerCard.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/ApplicantNavHeader/ApplicantNavHeader.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/ApplicantNavHeader/ApplicantNavHeader.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/components/mobile/ApplicantNavHeader/ApplicantNavHeader.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/SortDropdown/SortDropdown.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/SortDropdown/SortDropdown.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/SortDropdown/SortDropdown.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.stories.tsxfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusSummaryCard/StatusSummaryCard.tsxfrontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationListTab.styles.tsfrontend/src/styles/theme/typography.tsfrontend/src/types/applicants.tsfrontend/src/utils/mapStatusToGroup.ts
🛑 Comments failed to post (6)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx (1)
30-38: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
상호작용 요소를 네이티브 컨트롤로 교체하세요.
현재 키보드 사용자는 지원자 선택, 상세 이동, 상태 메뉴 선택을 수행할 수 없습니다. 보조기술도 각 요소의 역할과 상태를 알 수 없습니다.
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx#L30-L38: 체크 선택에는<input type="checkbox">를 사용하고, 상세 이동에는 체크박스와 중첩되지 않는 전용<button>을 사용하세요.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.styles.ts#L6-L44:Row,CheckboxWrapper,Checkbox스타일을 새 네이티브 컨트롤 구조에 맞게 변경하세요.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx#L42-L49: 상태 메뉴 항목을<button type="button">으로 렌더링하세요.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.styles.ts#L72-L81:StatusMenuItem을styled.button으로 변경하세요.📍 Affects 4 files
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx#L30-L38(this comment)frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.styles.ts#L6-L44frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx#L42-L49frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.styles.ts#L72-L81🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx` around lines 30 - 38, Replace the non-native interactions in ApplicantListRow with an input type="checkbox" for selection and a separate non-nested button for opening applicant details, preserving their existing handlers and checked state; update Row, CheckboxWrapper, and Checkbox styles in ApplicantListRow.styles.ts to fit the new controls. Render each status menu item in BulkActionBar.tsx as a button type="button", and change StatusMenuItem in BulkActionBar.styles.ts to styled.button while preserving its current appearance and behavior. Apply these changes in frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.tsx (30-38), frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantListRow/ApplicantListRow.styles.ts (6-44), frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx (42-49), and frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.styles.ts (72-81).frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.tsx (1)
11-17: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
검색 입력에 접근 가능한 이름을 추가하십시오.
현재 입력 필드는
placeholder만 사용합니다. 스크린 리더 사용자가 필드 목적을 안정적으로 확인할 수 있도록aria-label='지원자 이름 검색'또는 연결된<label>을 추가하십시오.수정 예시
<Styled.Input + aria-label='지원자 이름 검색' type='text'📝 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.<Styled.Input aria-label='지원자 이름 검색' type='text' placeholder='지원자 이름을 검색해주세요' value={value} onChange={(e) => onChange(e.target.value)} /> <Styled.SearchIcon />🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/ApplicantSearchBox/ApplicantSearchBox.tsx` around lines 11 - 17, Update the Styled.Input in ApplicantSearchBox to provide an accessible name by adding aria-label='지원자 이름 검색' or associating it with a visible label, while preserving the existing value and onChange behavior.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx (1)
20-27: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
enabled가false가 된 뒤에도 상태 변경 콜백이 실행될 수 있습니다.드롭다운이 열린 상태에서
enabled가false로 변경되면 메뉴가 계속 렌더링됩니다. 이후 메뉴 항목은 Line 25의handleStatusSelect를 호출합니다.enabled가false가 되면 메뉴를 닫고,handleStatusSelect에서 다시 확인하세요. 두 버튼에는 네이티브disabled속성도 설정하세요.수정 예시
- import { useState } from 'react'; + import { useEffect, useState } from 'react'; + useEffect(() => { + if (!enabled) setIsStatusMenuOpen(false); + }, [enabled]); const handleStatusSelect = (status: ApplicationStatus) => { + if (!enabled) return; onStatusChange(status); setIsStatusMenuOpen(false); }; <Styled.StatusButton $enabled={enabled} + disabled={!enabled} onClick={handleStatusButtonClick} > <Styled.DeleteButton $enabled={enabled} - onClick={enabled ? onDelete : undefined} + disabled={!enabled} + onClick={onDelete} >Also applies to: 33-56
🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/BulkActionBar/BulkActionBar.tsx` around lines 20 - 27, Update BulkActionBar’s enabled-state handling so the status menu closes when enabled becomes false, and guard handleStatusSelect against invoking onStatusChange while disabled. Apply the native disabled attribute to both relevant action buttons, while preserving the existing enabled behavior and menu toggle logic.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.tsx (2)
14-80: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Prettier 검사 실패를 수정하십시오.
CI가 이 파일에서 Prettier 검사 실패를 보고했습니다. 이 파일을 Prettier로 포맷한 후 CI 검사를 다시 실행하십시오.
🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.tsx` around lines 14 - 80, Run Prettier on the FormDropdownSelector component and apply its formatting changes, particularly to the TriggerLabel expression and surrounding JSX, then rerun the CI formatting check to confirm it passes.Source: Pipeline failures
61-68: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
메뉴 항목을 키보드로 선택 가능하게 변경하십시오.
현재
MenuItem은 클릭 이벤트가 연결된div입니다. 키보드 사용자는 항목에 포커스하거나 항목을 선택할 수 없습니다. 메뉴 항목을type='button'인 버튼으로 렌더링하고 기존 시각 스타일을 유지하십시오.
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.tsx#L61-L68:Styled.MenuItem에type='button'을 추가하십시오.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.styles.ts#L83-L101:styled.div를styled.button으로 변경하고 기본 button border를 제거하십시오.수정 예시
- <Styled.MenuItem + <Styled.MenuItem + type='button' key={form.id} $isSelected={form.id === selectedFormId} onClick={() => handleSelect(form.id)}-export const MenuItem = styled.div<{ $isSelected: boolean }>` +export const MenuItem = styled.button<{ $isSelected: boolean }>` + border: 0;📝 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.{forms.map((form) => ( <Styled.MenuItem type='button' key={form.id} $isSelected={form.id === selectedFormId} onClick={() => handleSelect(form.id)} > {form.title} </Styled.MenuItem>export const MenuItem = styled.button<{ $isSelected: boolean }>` border: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px 0; height: 42px; flex-shrink: 0; border-radius: ${({ $isSelected }) => ($isSelected ? '6px' : '8px')}; background: ${({ $isSelected }) => $isSelected ? colors.gray[100] : 'transparent'}; ${setTypography(typography.paragraph.p2)} color: ${({ $isSelected }) => $isSelected ? colors.base.black : colors.gray[600]}; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `;📍 Affects 2 files
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.tsx#L61-L68(this comment)frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.styles.ts#L83-L101🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/FormDropdownSelector/FormDropdownSelector.tsx` around lines 61 - 68, Update Styled.MenuItem in FormDropdownSelector.tsx to include type="button", and change its definition in FormDropdownSelector.styles.ts from styled.div to styled.button. Remove the button’s default border while preserving the existing visual styles and selection behavior.frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.tsx (1)
53-66: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
선택 상태를
aria-pressed로 노출하세요.
$active는 시각적 상태만 변경합니다. 보조기술은 현재 선택된 필터를 알 수 없습니다.Styled.Pill에aria-pressed={isActive}를 추가하세요.🤖 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 `@frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/components/mobile/StatusFilterPills/StatusFilterPills.tsx` around lines 53 - 66, Update the Styled.Pill rendering in StatusFilterPills by adding aria-pressed bound to isActive, so each filter’s current selection state is exposed to assistive technologies while preserving the existing $active styling behavior.
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
1 participant
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.
#️⃣연관된 이슈
#1887
📝작업 내용
새로 추가한 컴포넌트
ApplicantsListTab — 지원자 목록 탭
ApplicantListRowStatusSummaryCardStatusFilterPillsBulkActionBarFormDropdownSelectorSortDropdownApplicantSearchBoxApplicantDetailPage — 지원자 상세 탭
ApplicantNavHeaderAnswerCard기타 변경
서류검토→검토 전,불합→불합격ExpandArrow아이콘 제거 →more_arraw_icon으로 통일ApplicantNavHeaderchevron 아이콘 SVG 클리핑 버그 수정 (stroke-width: 1.5적용 시 viewBox 바깥으로 stroke가 잘리는 문제 →overflow: visible추가)Storybook
추가된 스토리 목록:
ApplicantListRow— Unchecked / Checked / NoMemo / Accepted / LongName / MultipleApplicants / EmptyApplicantsStatusSummaryCardStatusFilterPillsBulkActionBarFormDropdownSelector— Default / SingleItem / TwoItems / WithScroll / EmptySortDropdownApplicantSearchBoxApplicantNavHeader— Default / Middle / Last / SingleApplicant / LongNameAnswerCard중점적으로 리뷰받고 싶은 부분(선택)
ApplicantNavHeader드롭다운의 스크롤 조건부 처리 ($hasScrollprop 기반 레이아웃 분기) 구조가 적절한지FormDropdownSelector빈 상태 UX (disabled + '등록된 지원서 없음' 라벨) 방향성논의하고 싶은 부분(선택)
🫡 참고사항
mobile/하위)이며 Storybook 스토리https://67904e61c16daa99a63b44a7-haqlinbzhu.chromatic.com/
Summary by CodeRabbit