[FEAT] 면접 진행 여부에 따른 지원자 목록 컬럼 조건부 노출 (#420) #423
There are no files selected for viewing
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,55 @@ | ||
| import { Text } from '@/shared/components/Text'; | ||
| import { formatDateWithoutYear } from '@/shared/utils/dateUtils'; | ||
| import * as S from './InterviewTimeContentModal.styled'; | ||
| import type { InterviewInfo, InterviewSchedule } from '@/pages/admin/Dashboard/types/dashboard'; | ||
|
|
||
| type Props = { | ||
| interviewInfo: InterviewInfo[]; | ||
| interviewSchedule: InterviewSchedule[]; | ||
| }; | ||
|
|
||
| export const InterviewTimeContentModal = ({ interviewInfo, interviewSchedule }: Props) => { | ||
| return ( | ||
| <S.Container> | ||
| <S.Section> | ||
| {interviewSchedule?.length ? ( | ||
| <> | ||
| {interviewSchedule?.map((schedule) => ( | ||
| <S.ScheduleRow key={schedule.date}> | ||
| <S.ScheduleDateLabel>{formatDateWithoutYear(schedule.date)}</S.ScheduleDateLabel> | ||
| <S.SlotsContainer> | ||
| {schedule.slots.map((slot) => ( | ||
| <S.TimeSlot key={slot.time}> | ||
| <S.SlotTime>{slot.time}</S.SlotTime> | ||
| <S.SlotCount>({slot.assignedCount}명 선택)</S.SlotCount> | ||
| </S.TimeSlot> | ||
| ))} | ||
| </S.SlotsContainer> | ||
| </S.ScheduleRow> | ||
| ))} | ||
| </> | ||
| ) : ( | ||
| <Text color='#595959' size='sm'> | ||
| ⚠️ 면접 일정을 먼저 등록해주세요 | ||
| </Text> | ||
| )} | ||
| </S.Section> | ||
| <S.Section> | ||
| <S.SectionTitle>지원자 면접 희망 시간대</S.SectionTitle> | ||
| {interviewInfo?.length ? ( | ||
| <> | ||
| {interviewInfo?.map((info) => ( | ||
| <S.AvailableTimesRow key={info.interviewDate}> | ||
| <S.DateLabel>{formatDateWithoutYear(info.interviewDate)}</S.DateLabel> | ||
| <S.AvailableTimes>{info.availableTimes.join(', ')}</S.AvailableTimes> | ||
| </S.AvailableTimesRow> | ||
| ))} | ||
| </> | ||
| ) : ( | ||
| <Text color='#595959' size='sm'> | ||
| ⚠️ 지원자가 선택한 시간이 없습니다 | ||
| </Text> | ||
| )} | ||
| </S.Section> | ||
| </S.Container> | ||
| ); | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,10 @@ | ||
| import styled from '@emotion/styled'; | ||
| import type { ApplicantData } from '@/pages/admin/Dashboard/types/dashboard'; | ||
|
|
||
| export const ItemWrapper = styled.div<{ hasInterview: boolean }>` | ||
| display: grid; | ||
| grid-template-columns: ${({ hasInterview }) => | ||
| hasInterview ? '1fr 1fr 1fr 1.2fr 1.5fr 1fr 1.2fr' : '1fr 1fr 1fr 1.2fr 1.5fr 1fr'}; | ||
| gap: 1rem; | ||
| align-items: center; | ||
| padding: 1.5rem 0; | ||
|
|
@@ -19,23 +20,26 @@ export const ItemWrapper = styled.div` | |
| } | ||
|
|
||
| @media (max-width: 1200px) { | ||
| grid-template-columns: ${({ hasInterview }) => | ||
| hasInterview ? '1fr 1fr 1fr 1.5fr 1fr 1.2fr' : '1fr 1fr 1fr 1.5fr 1fr'}; | ||
|
|
||
| & > p:nth-of-type(4) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: ${({ theme }) => theme.breakpoints.web}) { | ||
| grid-template-columns: ${({ hasInterview }) => | ||
| hasInterview ? '1fr 1fr 1.5fr 1fr 1.2fr' : '1fr 1fr 1.5fr 1fr'}; | ||
|
|
||
| & > p:nth-of-type(3) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| grid-template-columns: ${({ hasInterview }) => | ||
| hasInterview ? '1fr 1.5fr 1fr 1.2fr' : '1fr 1.5fr 1fr'}; | ||
|
|
||
| & > p:nth-of-type(2) { | ||
| display: none; | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,16 @@ | ||
| import React, { useRef } from 'react'; | ||
| import { STATUS_LABEL } from '@/pages/admin/Dashboard/utils/labelMap'; | ||
| import { Modal } from '@/shared/components/Modal'; | ||
| import { Text } from '@/shared/components/Text'; | ||
| import { useModal } from '@/shared/hooks/useModal'; | ||
| import { formatDateTime } from '@/shared/utils/dateUtils'; | ||
| import * as S from './index.styled'; | ||
| import { InterviewTimeContentModal } from './InterviewTimeContentModal'; | ||
| import type { ApplicantData, InterviewSchedule } from '@/pages/admin/Dashboard/types/dashboard'; | ||
|
|
||
| type Props = ApplicantData & { | ||
| interviewSchedule: InterviewSchedule[]; | ||
| interviewRequired: boolean; | ||
| onClick: (id: number) => void; | ||
| }; | ||
|
|
||
|
|
@@ -21,28 +23,28 @@ export const ApplicantListItem = React.memo(function ApplicantListItem({ | |
| email, | ||
| status, | ||
| confirmedTime, | ||
| interviewInfo, | ||
| interviewSchedule, | ||
| interviewRequired, | ||
| onClick, | ||
| }: Props) { | ||
| const { isOpen, openModal, closeModal } = useModal(); | ||
| const timeSetterRef = useRef<HTMLButtonElement>(null); | ||
|
|
||
| const handleTimeSetterClick = (e: React.MouseEvent) => { | ||
| e.stopPropagation(); | ||
| openModal(); | ||
| }; | ||
| return ( | ||
| <> | ||
| <S.ItemWrapper hasInterview={interviewRequired} onClick={() => onClick(applicantId)}> | ||
| <S.InfoText>{name || '-'}</S.InfoText> | ||
| <S.InfoText>{studentId || '-'}</S.InfoText> | ||
| <S.InfoText>{department || '-'}</S.InfoText> | ||
| <S.InfoText>{phoneNumber || '-'}</S.InfoText> | ||
| <S.InfoText>{email || '-'}</S.InfoText> | ||
| <S.StatusBadge status={status}>{STATUS_LABEL[status] || '-'}</S.StatusBadge> | ||
| {interviewRequired && status === 'APPROVED' && ( | ||
| <S.InfoText> | ||
| {confirmedTime ? ( | ||
| <Text color='#8C8C8C' size='lg'> | ||
|
|
@@ -56,7 +58,7 @@ export const ApplicantListItem = React.memo(function ApplicantListItem({ | |
| </S.InfoText> | ||
| )} | ||
| </S.ItemWrapper> | ||
| <Modal | ||
| isOpen={isOpen} | ||
| onClose={closeModal} | ||
| title='동아리 면접 공지 일정' | ||
|
|
@@ -68,7 +70,7 @@ export const ApplicantListItem = React.memo(function ApplicantListItem({ | |
| interviewInfo={interviewInfo} | ||
| interviewSchedule={interviewSchedule} | ||
| /> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| }); | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,11 +6,14 @@ import type { | |
| ApplicantsApiResponse, | ||
| ApplicationFilterOption, | ||
| ApplicantCounts, | ||
| InterviewSchedule, | ||
| } from '@/pages/admin/Dashboard/types/dashboard'; | ||
| import type { UseApiQueryResult } from '@/shared/types/useApiQueryResult'; | ||
|
|
||
| export interface ExtendedUseApiQueryResult<T> extends UseApiQueryResult<T> { | ||
| counts: ApplicantCounts; | ||
| interviewRequired: boolean; | ||
| interviewSchedule: InterviewSchedule[]; | ||
| } | ||
|
|
||
| export const useApplicants = ( | ||
|
|
@@ -60,5 +63,7 @@ export const useApplicants = ( | |
| isLoading, | ||
| error, | ||
| counts, | ||
| interviewRequired: responseData?.interviewRequired ?? false, | ||
| interviewSchedule: responseData?.interviewSchedule || [], | ||
| }; | ||
| }; | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,9 +30,8 @@ export type ApplicantData = { | |
| phoneNumber: string; | ||
| email: string; | ||
| status: ApplicationStatus; | ||
| confirmedTime: string | null; | ||
| interviewInfo: InterviewInfo[]; | ||
| }; | ||
|
|
||
| export type DashboardSummary = { | ||
|
|
@@ -63,6 +62,7 @@ export type InterviewSchedule = { | |
| }; | ||
|
|
||
| export type ApplicantsApiResponse = { | ||
| interviewRequired: boolean; | ||
| applicants: ApplicantData[]; | ||
| interviewSchedule: InterviewSchedule[]; | ||
| message: string | null; | ||
|
|
||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
grid-template-columns를 설정하는 로직이 여러 미디어 쿼리에서 반복되고 있습니다. 이로 인해 코드가 장황해지고 유지보수가 어려워질 수 있습니다. 기본 컬럼 문자열에 인터뷰 컬럼을 조건부로 추가하는 방식으로 리팩토링하면 코드를 더 간결하고 명확하게 만들 수 있습니다. 아래 제안을 이 파일의 다른 미디어 쿼리들과src/pages/admin/Dashboard/components/ApplicantListSection/List/ApplicantListItem/index.styled.ts파일에도 동일하게 적용하는 것을 고려해보세요.