diff --git a/src/api/schedule.ts b/src/api/schedule.ts index 8e14daba..2f52e023 100644 --- a/src/api/schedule.ts +++ b/src/api/schedule.ts @@ -41,7 +41,11 @@ export const deleteSchedule = (scheduleId: string): Promise> => export const createQRCode = ({ scheduleId, eventId, - startedAt, - endedAt, + attendanceCheckStartedAt, + attendanceCheckEndedAt, + latenessCheckEndedAt, }: QRCodeRequest): Promise> => - http.post({ url: `/schedules/${scheduleId}/event/${eventId}/qr`, data: { startedAt, endedAt } }); + http.post({ + url: `/schedules/${scheduleId}/event/${eventId}/qr`, + data: { attendanceCheckStartedAt, attendanceCheckEndedAt, latenessCheckEndedAt }, + }); diff --git a/src/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.component.tsx b/src/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.component.tsx index cfb267a7..3817dfaf 100644 --- a/src/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.component.tsx +++ b/src/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.component.tsx @@ -19,8 +19,9 @@ export interface CreateQRCodeModalDialogProps { } interface FormValues { - startedAt: string; - endedAt: string; + attendanceCheckStartedAt: string; + attendanceCheckEndedAt: string; + latenessCheckEndedAt: string; } export const QRCodeModalClassName = css` @@ -48,8 +49,6 @@ const CreateQRCodeModalDialog = ({ const handleSubmitForm = useRecoilCallback(({ set }) => async (data: FormValues) => { const sessionDate = dayjs(sessionStartedAt).format('YYYY-MM-DDT'); - const startedAt = sessionDate + data.startedAt; - const endedAt = sessionDate + data.endedAt; request({ requestFunc: () => { @@ -57,8 +56,9 @@ const CreateQRCodeModalDialog = ({ return api.createQRCode({ scheduleId, eventId, - startedAt, - endedAt, + attendanceCheckStartedAt: sessionDate + data.attendanceCheckStartedAt, + attendanceCheckEndedAt: sessionDate + data.attendanceCheckEndedAt, + latenessCheckEndedAt: sessionDate + data.latenessCheckEndedAt, }); }, errorHandler: handleAddToast, @@ -82,7 +82,7 @@ const CreateQRCodeModalDialog = ({ const handleQRCodeModal = useSetRecoilState($modalByStorage(ModalKey.createQRCodeModalDialog)); const props = { - heading: 'QR체크 시작과 마감 시간을\n입력해주세요', + heading: 'QR체크 시간을 입력해주세요', footer: { cancelButton: { label: '취소', @@ -95,10 +95,12 @@ const CreateQRCodeModalDialog = ({ type: 'submit', isLoading, disabled: - !formValues.startedAt || - !formValues.endedAt || - !!formState.errors.startedAt?.message || - !!formState.errors.endedAt?.message, + !formValues.attendanceCheckStartedAt || + !formValues.attendanceCheckEndedAt || + !formValues.latenessCheckEndedAt || + !!formState.errors.attendanceCheckStartedAt?.message || + !!formState.errors.attendanceCheckEndedAt?.message || + !!formState.errors.latenessCheckEndedAt?.message, }, }, handleCloseModal: () => { @@ -114,16 +116,16 @@ const CreateQRCodeModalDialog = ({ - 시작 / 마감 + 출석 시작 / 마감 시간 } placeholder={sessionStartTime} - errorMessage={formState.errors.startedAt?.message} - {...register(`startedAt`, { + errorMessage={formState.errors.attendanceCheckStartedAt?.message} + {...register(`attendanceCheckStartedAt`, { required: true, pattern: { value: TIME_REGEX, @@ -132,11 +134,11 @@ const CreateQRCodeModalDialog = ({ })} /> } placeholder={sessionEndTime} - errorMessage={formState.errors.endedAt?.message} - {...register(`endedAt`, { + errorMessage={formState.errors.attendanceCheckEndedAt?.message} + {...register(`attendanceCheckEndedAt`, { required: true, pattern: { value: TIME_REGEX, @@ -145,6 +147,25 @@ const CreateQRCodeModalDialog = ({ })} /> + + + 지각 마감 시간 + + + } + placeholder={sessionStartTime} + errorMessage={formState.errors.latenessCheckEndedAt?.message} + {...register(`latenessCheckEndedAt`, { + required: true, + pattern: { + value: TIME_REGEX, + message: '시간 형식을 확인하세요', + }, + })} + /> + ); diff --git a/src/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.styled.ts b/src/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.styled.ts index 0d603751..ae2268a8 100644 --- a/src/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.styled.ts +++ b/src/components/modal/CreateQRCodeModalDialog/CreateQRCodeModalDialog.styled.ts @@ -29,16 +29,36 @@ export const QRTimeInput = styled(InputField)` input { width: 13rem; } + + span { + display: none; + } `; export const Wrapper = styled.div` - display: flex; - flex-direction: column; - height: 10.1rem; - padding: 0 2.4rem 2.4rem 2.4rem; + ${({ theme }) => css` + position: relative; + top: -0.9rem; + display: flex; + flex-direction: column; + height: 15.2rem; + padding: 0 2.4rem 0 2.4rem; + + &:after { + position: absolute; + bottom: -22px; + width: 332px; + border-bottom: 1px solid ${theme.colors.gray30}; + content: ''; + } + `} `; export const InputWrapper = styled.div` display: flex; gap: 6px; `; + +export const BottomInputWrapper = styled.div` + margin: 20px 0; +`; diff --git a/src/types/dto/schedule.ts b/src/types/dto/schedule.ts index 6f0ce764..4fd79c8e 100644 --- a/src/types/dto/schedule.ts +++ b/src/types/dto/schedule.ts @@ -56,8 +56,9 @@ export interface ScheduleResponse { export interface QRCodeRequest { scheduleId: number; eventId: number; - startedAt: string; - endedAt: string; + attendanceCheckStartedAt: string; + attendanceCheckEndedAt: string; + latenessCheckEndedAt: string; } export interface QRCodeResponse {