Merge pull request #268 from mash-up-kr/release/1.5.0

Main Release/1.5.0
mash-up-kr · Mar 10, 2023 · 73e0496 · 73e0496
2 parents 6994fe5 + a2708d0
commit 73e0496
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 27 deletions.
diff --git a/src/api/schedule.ts b/src/api/schedule.ts
@@ -41,7 +41,11 @@ export const deleteSchedule = (scheduleId: string): Promise<BaseResponse<{}>> =>
 export const createQRCode = ({
   scheduleId,
   eventId,
-  startedAt,
-  endedAt,
+  attendanceCheckStartedAt,
+  attendanceCheckEndedAt,
+  latenessCheckEndedAt,
 }: QRCodeRequest): Promise<BaseResponse<QRCodeResponse>> =>
-  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
@@ -19,8 +19,9 @@ export interface CreateQRCodeModalDialogProps {
 }
 
 interface FormValues {
-  startedAt: string;
-  endedAt: string;
+  attendanceCheckStartedAt: string;
+  attendanceCheckEndedAt: string;
+  latenessCheckEndedAt: string;
 }
 
 export const QRCodeModalClassName = css`
@@ -48,17 +49,16 @@ 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: () => {
         setIsLoading(true);
         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 = ({
     <ModalWrapper {...props} className={QRCodeModalClassName} closeButtonHidden>
       <Styled.Wrapper>
         <Styled.QRTimeInputLabel>
-          시작 / 마감
+          출석 시작 / 마감 시간
           <Styled.RequiredDot />
         </Styled.QRTimeInputLabel>
         <Styled.InputWrapper>
           <Styled.QRTimeInput
-            $size="md"
+            $size="sm"
             endIcon={<Time />}
             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 = ({
             })}
           />
           <Styled.QRTimeInput
-            $size="md"
+            $size="sm"
             endIcon={<Time />}
             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 = ({
             })}
           />
         </Styled.InputWrapper>
+        <Styled.BottomInputWrapper>
+          <Styled.QRTimeInputLabel>
+            지각 마감 시간
+            <Styled.RequiredDot />
+          </Styled.QRTimeInputLabel>
+          <Styled.QRTimeInput
+            $size="sm"
+            endIcon={<Time />}
+            placeholder={sessionStartTime}
+            errorMessage={formState.errors.latenessCheckEndedAt?.message}
+            {...register(`latenessCheckEndedAt`, {
+              required: true,
+              pattern: {
+                value: TIME_REGEX,
+                message: '시간 형식을 확인하세요',
+              },
+            })}
+          />
+        </Styled.BottomInputWrapper>
       </Styled.Wrapper>
     </ModalWrapper>
   );

diff --git 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
@@ -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 {