↓
- +{scheduleInfo.title}
diff --git a/frontend/src/components/ScheduleModifyModal/ScheduleModifyModal.styles.ts b/frontend/src/components/ScheduleModifyModal/ScheduleModifyModal.styles.ts
index 60ce89b9..553bb959 100644
--- a/frontend/src/components/ScheduleModifyModal/ScheduleModifyModal.styles.ts
+++ b/frontend/src/components/ScheduleModifyModal/ScheduleModifyModal.styles.ts
@@ -14,23 +14,24 @@ const formStyle = ({ flex }: Theme) => css`
gap: 6rem;
`;
-const categoryStyle = ({ colors }: Theme, colorCode: string) => css`
- padding: 0 3rem;
-
- width: 100%;
- height: 12rem;
- border: 1px solid ${colors.GRAY_500};
- border-radius: 8px;
+const dateFieldsetStyle = (isAllDay: boolean) => {
+ return {
+ div: css`
+ width: ${isAllDay ? '100%' : '45%'};
+ `,
+ input: css`
+ height: 11.75rem;
+ `,
+ };
+};
- background: ${colorCode};
+const dateTimePickerStyle = ({ flex }: Theme) => css`
+ ${flex.row};
- font-size: 5rem;
- color: ${colors.WHITE};
- line-height: 12rem;
+ justify-content: space-between;
+ align-items: flex-end;
- &:hover {
- cursor: default;
- }
+ width: 100%;
`;
const dateTimeStyle = ({ flex }: Theme) => css`
@@ -143,16 +144,24 @@ const categoryBoxStyle = ({ flex }: Theme) => css`
width: 100%;
`;
+const selectTimeStyle = {
+ select: css`
+ width: 45%;
+ `,
+};
+
export {
arrowStyle,
cancelButtonStyle,
- categoryStyle,
+ categoryBoxStyle,
checkboxStyle,
controlButtonsStyle,
+ dateFieldsetStyle,
+ dateTimePickerStyle,
dateTimeStyle,
formStyle,
labelStyle,
modalStyle,
saveButtonStyle,
- categoryBoxStyle,
+ selectTimeStyle,
};
diff --git a/frontend/src/components/ScheduleModifyModal/ScheduleModifyModal.tsx b/frontend/src/components/ScheduleModifyModal/ScheduleModifyModal.tsx
index 7958598c..d5623973 100644
--- a/frontend/src/components/ScheduleModifyModal/ScheduleModifyModal.tsx
+++ b/frontend/src/components/ScheduleModifyModal/ScheduleModifyModal.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
import { useMutation, useQuery, useQueryClient } from 'react-query';
import { useRecoilValue } from 'recoil';
+import useControlledInput from '@/hooks/useControlledInput';
import useValidateSchedule from '@/hooks/useValidateSchedule';
import { CategoryType } from '@/@types/category';
@@ -14,12 +15,14 @@ import { userState } from '@/recoil/atoms';
import Button from '@/components/@common/Button/Button';
import Fieldset from '@/components/@common/Fieldset/Fieldset';
+import Select from '@/components/@common/Select/Select';
import { CACHE_KEY } from '@/constants/api';
-import { DATE_TIME } from '@/constants/date';
+import { CATEGORY_TYPE } from '@/constants/category';
+import { DATE_TIME, TIMES } from '@/constants/date';
import { VALIDATION_MESSAGE, VALIDATION_SIZE } from '@/constants/validate';
-import { checkAllDay, getISODateString } from '@/utils/date';
+import { checkAllDay, getBeforeDate, getISODateString, getNextDate } from '@/utils/date';
import categoryApi from '@/api/category';
import scheduleApi from '@/api/schedule';
@@ -28,14 +31,16 @@ import {
arrowStyle,
cancelButtonStyle,
categoryBoxStyle,
- categoryStyle,
checkboxStyle,
controlButtonsStyle,
+ dateFieldsetStyle,
+ dateTimePickerStyle,
dateTimeStyle,
formStyle,
labelStyle,
modalStyle,
saveButtonStyle,
+ selectTimeStyle,
} from './ScheduleModifyModal.styles';
interface ScheduleModifyModalProps {
@@ -54,8 +59,9 @@ function ScheduleModifyModal({ scheduleInfo, closeModal }: ScheduleModifyModalPr
const queryClient = useQueryClient();
- const { data } = useQuery