Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE] 일정 등록 모달 기본 날짜 변경 #245

Merged
merged 3 commits into from
Jul 31, 2023
Merged

[FE] 일정 등록 모달 기본 날짜 변경 #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2a3e3a
refactor: 일정 등록 모달 창이 열릴 때 클릭된 날짜로 설정되도록 수정
suyoungj Jul 27, 2023
dde0a66
refactor: input type="date"의 min 프로퍼티로 시작일 이전의 종료일이 입력되는 경우 방지
suyoungj Jul 27, 2023
bc3ed71
refactor: 불필요한 클릭된 DateCell의 날짜 계산 로직 제거
suyoungj Jul 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions frontend/src/components/Calendar/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,15 @@ import { arrayOf } from '~/utils/arrayOf';
import ScheduleMoreCell from '~/components/ScheduleMoreCell/ScheduleMoreCell';
import type { Position, ModalOpenType } from '~/types/schedule';
import DailyScheduleModal from '~/components/DailyScheduleModal/DailyScheduleModal';
import { getDateByPosition } from '~/utils/getDateByPosition';

const Calendar = () => {
const {
year,
month,
calendar,
currentDate,

handlers: { handlePrevButtonClick, handleNextButtonClick },
} = useCalendar();
const schedules = useFetchSchedules(1, year, month);
Expand All @@ -33,6 +36,7 @@ const Calendar = () => {
modalPosition,
handlers: { handleScheduleModalOpen },
} = useScheduleModal();
const [clickedDate, setClickedDate] = useState(currentDate);
const [modalType, setModalType] = useState<ModalOpenType>(
MODAL_OPEN_TYPE.ADD,
);
Expand Down Expand Up @@ -62,6 +66,16 @@ const Calendar = () => {
openModal();
};

const handleDateCellClick = (clickedDate: Date) => {
setClickedDate(() => clickedDate);
handleModalOpen(MODAL_OPEN_TYPE.ADD);
};

const handleScheduleAddButtonClick = () => {
setClickedDate(() => currentDate);
handleModalOpen(MODAL_OPEN_TYPE.ADD);
};

return (
<>
<S.Container>
Expand All @@ -86,7 +100,7 @@ const Calendar = () => {
</Button>
<Button
css={S.scheduleAddButton}
onClick={() => handleModalOpen(MODAL_OPEN_TYPE.ADD)}
onClick={handleScheduleAddButtonClick}
>
<PlusIcon />
</Button>
Expand Down Expand Up @@ -141,7 +155,9 @@ const Calendar = () => {
key={day.toISOString()}
rawDate={day}
currentMonth={month}
onClick={() => handleModalOpen(MODAL_OPEN_TYPE.ADD)}
onClick={() => {
handleDateCellClick(day);
}}
onDayClick={(e) => {
e.stopPropagation();
handleDailyScheduleModalOpen(
Expand All @@ -161,7 +177,7 @@ const Calendar = () => {
</div>
</S.Container>
{isModalOpen && modalType === MODAL_OPEN_TYPE.ADD && (
<ScheduleAddModal teamPlaceName="팀바팀" />
<ScheduleAddModal teamPlaceName="팀바팀" clickedDate={clickedDate} />
)}
{isModalOpen && modalType === MODAL_OPEN_TYPE.VIEW && (
<ScheduleModal
Expand Down
26 changes: 16 additions & 10 deletions frontend/src/components/ScheduleAddModal/ScheduleAddModal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,24 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
render: () => {
const { openModal } = useModal();
const SampleModal = () => {
const { openModal } = useModal();

return (
<>
<Button onClick={openModal}>모달 열기</Button>
<ScheduleAddModal teamPlaceName="Woowacourse TeamByTeam Corporation" />
</>
);
},
return (
<>
<Button onClick={openModal}>모달 열기</Button>
<ScheduleAddModal
teamPlaceName="Woowacourse TeamByTeam Corporation"
clickedDate={new Date()}
/>
</>
);
};

export const Default: Story = {
render: () => <SampleModal />,
args: {
teamPlaceName: '',
clickedDate: new Date(),
},
};
10 changes: 6 additions & 4 deletions frontend/src/components/ScheduleAddModal/ScheduleAddModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,16 @@ import useScheduleAddModal from '~/hooks/schedule/useScheduleAddModal';

interface ScheduleAddModalProps {
teamPlaceName: string;
clickedDate: Date;
}

const ScheduleAddModal = (props: ScheduleAddModalProps) => {
const { teamPlaceName } = props;
const { teamPlaceName, clickedDate } = props;
const { closeModal } = useModal();
const {
schedule,
handlers: { handleScheduleChange, handleScheduleSubmit },
} = useScheduleAddModal();
} = useScheduleAddModal(clickedDate);

return (
<Modal>
Expand Down Expand Up @@ -55,7 +56,7 @@ const ScheduleAddModal = (props: ScheduleAddModalProps) => {
<Input
width="220px"
height="40px"
type="datetime-local"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

시간 선택이 없어졌는데,, 시간 선택은 있어야 할 것 같아

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

응 일단 날짜만 수정했고, Menu 컴포넌트 이용해서 이어붙이는 식으로 구현할거 같아

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

나중에라도 꼭 datetime-local 로 수정해줬으면 좋겠어!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음 아마 date로 날짜 선택 > 타임 테이블 메뉴에서 시간 선택 > 데이터 취합 및 가공해서 api 요청

이런 식으로 수정할 예정이라 date로 수정했어! 부연 설명이 부족했네

Copy link
Collaborator

@hafnium1923 hafnium1923 Jul 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋아요 그러면 지금 할거아니면 이슈파서 유스가 그대로 이어가는게 좋아보여! 이슈 작성하고 유스가 머지해줘 어프루브는 해둘게!

type="date"
css={S.dateTimeLocalInput}
name="startDateTime"
value={schedule['startDateTime']}
Expand All @@ -74,10 +75,11 @@ const ScheduleAddModal = (props: ScheduleAddModalProps) => {
<Input
width="220px"
height="40px"
type="datetime-local"
type="date"
css={S.dateTimeLocalInput}
name="endDateTime"
value={schedule['endDateTime']}
min={schedule['startDateTime']}
onChange={handleScheduleChange}
required
/>
Expand Down
11 changes: 8 additions & 3 deletions frontend/src/hooks/schedule/useScheduleAddModal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import { useSendSchedule } from '~/hooks/queries/useSendSchedule';
import { useModal } from '~/hooks/useModal';
import { formatISOString } from '~/utils/formatISOString';
import { isYYYYMMDDHHMM } from '~/types/typeGuard';
import { parseDate } from '~/utils/parseDate';
import type { ChangeEventHandler, FormEventHandler } from 'react';

const useScheduleAddModal = () => {
const useScheduleAddModal = (clickedDate: Date) => {
const { year, month, date } = parseDate(clickedDate);
const dateString = `${year}-${String(month + 1).padStart(2, '0')}-${String(
date,
).padStart(2, '0')}`;
const [schedule, setSchedule] = useState({
title: '',
startDateTime: '2023-07-20T00:00',
endDateTime: '2023-07-20T00:00',
startDateTime: dateString,
endDateTime: dateString,
});
const { closeModal } = useModal();
const { mutateSendSchedule } = useSendSchedule();
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/hooks/useCalendar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import { parseDate } from '~/utils/parseDate';

const useCalendar = () => {
const [currentDate, setCurrentDate] = useState(new Date());
const { year, month } = parseDate(currentDate);
const { day: startDayOfMonth } = parseDate(new Date(currentDate.setDate(1)));
const { year, month, date } = parseDate(currentDate);
const { day: startDayOfMonth } = parseDate(new Date(year, month, 1));

const handlePrevButtonClick = () => {
setCurrentDate(() => new Date(year, month - 1));
setCurrentDate(() => new Date(year, month - 1, date));
};

const handleNextButtonClick = () => {
setCurrentDate(() => new Date(year, month + 1));
setCurrentDate(() => new Date(year, month + 1, date));
};

const createCalendar = (year: number, month: number) =>
Expand All @@ -32,6 +32,7 @@ const useCalendar = () => {
year,
month,
calendar,
currentDate,

handlers: {
handlePrevButtonClick,
Expand Down