From 6aabe2467602bce8e807e45d34525d0a15398e7f Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Sun, 21 Jul 2024 11:31:09 +0900 Subject: [PATCH 01/28] =?UTF-8?q?chore:=20.vscode=20=EC=84=B8=ED=8C=85?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.vscode/setting.json | 10 ---------- frontend/.vscode/settings.json | 11 +++++++++++ 2 files changed, 11 insertions(+), 10 deletions(-) delete mode 100644 frontend/.vscode/setting.json create mode 100644 frontend/.vscode/settings.json diff --git a/frontend/.vscode/setting.json b/frontend/.vscode/setting.json deleted file mode 100644 index 62b4a1c1f..000000000 --- a/frontend/.vscode/setting.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "stylelint.workingDirectories": ["./front"], - "eslint.workingDirectories": ["./front"], - "stylelint.configFile": ".stylelintrc.json", - "stylelint.packageManager": "npm", - "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit", - "source.fixAll.stylelint": "explicit" - } -} diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json new file mode 100644 index 000000000..1ad429a9f --- /dev/null +++ b/frontend/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "eslint.workingDirectories": ["./frontend"], + "stylelint.configFile": ".stylelintrc.json", + "stylelint.packageManager": "npm", + "editor.codeActionsOnSave": { + "source.fixAll.stylelint": "explicit", + "source.fixAll.eslint": "explicit", + "source.fixAll.prettier": "explicit" + }, + "stylelint.validate": ["typescript", "typescriptreact"] +} From 707d41b50d60d446533a23892f52d1dd2d16eeac Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Sun, 21 Jul 2024 20:03:32 +0900 Subject: [PATCH 02/28] =?UTF-8?q?refactor:=20TimePicker=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20Button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TimePicker내부 로직을 페이지 최상단으로 끌어 올림 - TimePicker util함수 TimePickerPage로 이동 - 가능 시간, 시작 시간, ref, value를 TimePicker props로 받도록 수정 --- .../TimePicker/TimePicker.styles.ts | 7 --- frontend/src/components/TimePicker/index.tsx | 48 +++-------------- frontend/src/mocks/.gitkeep | 0 frontend/src/mocks/data.json | 30 +++++++++++ frontend/src/pages/.gitkeep | 0 .../MeetingTimePickPage.styles.ts | 7 +++ .../MeetingTimePickPage.utils.ts} | 29 +++++----- .../src/pages/MeetingTimePickPage/index.tsx | 54 ++++++++++++++++--- 8 files changed, 106 insertions(+), 69 deletions(-) delete mode 100644 frontend/src/mocks/.gitkeep create mode 100644 frontend/src/mocks/data.json delete mode 100644 frontend/src/pages/.gitkeep rename frontend/src/{components/TimePicker/TimePicker.utils.ts => pages/MeetingTimePickPage/MeetingTimePickPage.utils.ts} (75%) diff --git a/frontend/src/components/TimePicker/TimePicker.styles.ts b/frontend/src/components/TimePicker/TimePicker.styles.ts index b919a42de..f994525f8 100644 --- a/frontend/src/components/TimePicker/TimePicker.styles.ts +++ b/frontend/src/components/TimePicker/TimePicker.styles.ts @@ -50,13 +50,6 @@ export const styledTh = css` justify-content: center; `; -export const buttonContainer = css` - display: flex; - justify-content: flex-end; - width: 100%; - margin-top: 1rem; -`; - export const tableTexture = css` cursor: default; width: 4rem; diff --git a/frontend/src/components/TimePicker/index.tsx b/frontend/src/components/TimePicker/index.tsx index eef5f8e9d..a56597dd4 100644 --- a/frontend/src/components/TimePicker/index.tsx +++ b/frontend/src/components/TimePicker/index.tsx @@ -1,52 +1,20 @@ -import { useMutation } from '@tanstack/react-query'; -import { useState } from 'react'; - -import Button from '@components/_common/Button'; - import useTimePick from '@hooks/useTimePick/useTimePick'; -import postSchedule from '@apis/postSchedule'; - -import { buttonContainer, styledTd, styledTh, table, tableTexture } from './TimePicker.styles'; -import { convertToSchedule, generateScheduleMatrix } from './TimePicker.utils'; - -interface Schedules { - date: string; - times: string[]; -} +import { styledTd, styledTh, table, tableTexture } from './TimePicker.styles'; export interface TimePickerProps { - startTime: string; - endTime: string; availableDates: string[]; - schedules: Schedules[]; + startTime: string; + useTimePickReturn: ReturnType; } export default function TimePicker({ - startTime, - endTime, availableDates, - schedules, + startTime, + useTimePickReturn, }: TimePickerProps) { - const mutation = useMutation({ - mutationFn: postSchedule, - }); - + const [ref, value] = useTimePickReturn; const formattedAvailableDates = ['', ...availableDates]; - const [isUpdate, setIsUpdate] = useState(false); - - const initialValue = generateScheduleMatrix({ startTime, endTime, availableDates, schedules }); - - const [ref, value] = useTimePick(isUpdate, initialValue); - - const onToggle = () => { - setIsUpdate((prevIsUpdate) => !prevIsUpdate); - - if (isUpdate) { - const convert = convertToSchedule(value, availableDates, startTime, endTime); - mutation.mutate(convert); - } - }; return (
@@ -74,10 +42,6 @@ export default function TimePicker({ ))} - -
-
); } diff --git a/frontend/src/mocks/.gitkeep b/frontend/src/mocks/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/frontend/src/mocks/data.json b/frontend/src/mocks/data.json new file mode 100644 index 000000000..5b6ef8445 --- /dev/null +++ b/frontend/src/mocks/data.json @@ -0,0 +1,30 @@ +{ + "data": { + "meetingName": "momo_1", + "startTime": "10:00:00", + "endTime": "18:00:00", + "availableDates": [ + "2024-07-15", + "2024-07-16", + "2024-07-17", + "2024-07-18", + "2024-07-19", + "2024-07-20", + "2024-07-21" + ], + "schedules": [ + { + "date": "2024-07-16", + "times": ["16:00"] + }, + { + "date": "2024-07-15", + "times": ["10:00", "12:00", "13:00"] + }, + { + "date": "2024-07-17", + "times": ["15:00"] + } + ] + } +} diff --git a/frontend/src/pages/.gitkeep b/frontend/src/pages/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts index e68817188..68180b3d5 100644 --- a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts +++ b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts @@ -14,3 +14,10 @@ export const title = css` background: ${theme.linear.selectedTime}; background-clip: text; `; + +export const buttonContainer = css` + display: flex; + justify-content: flex-end; + width: 100%; + margin-top: 1rem; +`; diff --git a/frontend/src/components/TimePicker/TimePicker.utils.ts b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.utils.ts similarity index 75% rename from frontend/src/components/TimePicker/TimePicker.utils.ts rename to frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.utils.ts index 3f517fd01..e57d5daaf 100644 --- a/frontend/src/components/TimePicker/TimePicker.utils.ts +++ b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.utils.ts @@ -1,11 +1,11 @@ -import { TimePickerProps } from '.'; +import { getMeetingResponse } from '@apis/getMeeting'; -type Test = Record; +type TimeSlot = Record; const generateTimeSlots = (start: string, end: string) => { const startHour = Number(start.split(':')[0]); const endHour = Number(end.split(':')[0]); - const slots = []; + const slots: string[] = []; for (let i = startHour; i <= endHour; i++) { slots.push(`${i.toString().padStart(2, '0')}:00`); @@ -14,24 +14,29 @@ const generateTimeSlots = (start: string, end: string) => { return slots; }; -export const generateScheduleMatrix = (data: TimePickerProps) => { - const { startTime, endTime, availableDates, schedules } = data; - +export const generateScheduleMatrix = ({ + startTime, + endTime, + availableDates, + schedules, +}: getMeetingResponse) => { const timeSlots = generateTimeSlots(startTime, endTime); const timeSlotIndex = timeSlots.reduce((acc, slot, idx) => { acc[slot] = idx; return acc; - }, {} as Test); + }, {} as TimeSlot); - const scheduleMatrix = Array.from({ length: timeSlots.length }, () => + const scheduleMatrix: boolean[][] = Array.from({ length: timeSlots.length }, (): boolean[] => Array(availableDates.length).fill(false), ); schedules.forEach((schedule) => { const dateIndex = availableDates.indexOf(schedule.date); + if (dateIndex !== -1) { schedule.times.forEach((time) => { const timeIndex = timeSlotIndex[time]; + if (timeIndex !== undefined) { scheduleMatrix[timeIndex][dateIndex] = true; } @@ -52,16 +57,16 @@ export const convertToSchedule = ( const schedules = availableDates.map((date, colIndex) => { const times: string[] = []; + matrix.forEach((row, rowIndex) => { if (row[colIndex]) { + // 임시로 30분 단위도 추가되도록 설정 times.push(timeSlots[rowIndex] + ':00'); times.push(timeSlots[rowIndex].slice(0, 2) + ':30:00'); } }); - return { - date, - times, - }; + + return { date, times }; }); return schedules.filter((schedule) => schedule.times.length > 0); diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index 2cc77492f..c5fa49d8b 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -1,22 +1,60 @@ -import { useQuery } from '@tanstack/react-query'; +import { useMutation } from '@tanstack/react-query'; +import { useState } from 'react'; import TimePicker from '@components/TimePicker'; +import Button from '@components/_common/Button'; -import getMeeting from '@apis/getMeeting'; +import useTimePick from '@hooks/useTimePick/useTimePick'; -import { title } from './MeetingTimePickPage.styles'; +import { getMeetingResponse } from '@apis/getMeeting'; +import postSchedule from '@apis/postSchedule'; + +import responseData from '@mocks/data.json'; + +import { buttonContainer, title } from './MeetingTimePickPage.styles'; +import { convertToSchedule, generateScheduleMatrix } from './MeetingTimePickPage.utils'; export default function MeetingTimePickPage() { - const { data } = useQuery({ - queryKey: ['getMeeting'], - queryFn: () => getMeeting(), - retry: 1, + // TODO: 임시 데이터 설정, 추후에 msw로 연결 수정 + // const { data } = useQuery({ + // queryKey: ['getMeeting'], + // queryFn: () => getMeeting(), + // retry: 1, + // }); + + const data = responseData.data as getMeetingResponse; + const initialValue = generateScheduleMatrix(data); + const [isUpdate, setIsUpdate] = useState(false); + const [ref, value] = useTimePick(isUpdate, initialValue); + + const mutation = useMutation({ + mutationFn: postSchedule, }); + const onToggle = () => { + setIsUpdate((prevIsUpdate) => !prevIsUpdate); + + if (isUpdate) { + const convert = convertToSchedule(value, data.availableDates, data.startTime, data.endTime); + + mutation.mutate(convert); + } + }; + return (

momo TimePicker

- {data && } + {data && ( + + )} + +
+
); } From a5c58ac5e96f4c6284786ecf27fcdfe98f86c4d2 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Sun, 21 Jul 2024 20:26:47 +0900 Subject: [PATCH 03/28] =?UTF-8?q?design:=20button=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20'red'=20=EB=B0=8F=20border=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/global.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles/global.ts b/frontend/src/styles/global.ts index abd2cca3b..dac3f3d6c 100644 --- a/frontend/src/styles/global.ts +++ b/frontend/src/styles/global.ts @@ -162,7 +162,7 @@ const globalStyles = css` button { cursor: pointer; - background-color: red; + border: none; } `; From f405e1b57c927e550ba24c31fe6644c029761024 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Sun, 21 Jul 2024 23:52:43 +0900 Subject: [PATCH 04/28] =?UTF-8?q?chore:=20eslint=20jsx-a11y=20=EC=9D=BC?= =?UTF-8?q?=EB=B6=80=20=EC=84=A4=EC=A0=95=20"off"=EB=A1=9C=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.eslintrc.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index a17b8a08b..14d1ec09a 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -26,6 +26,8 @@ "plugin:storybook/recommended" ], "rules": { + "jsx-a11y/click-events-have-key-events": "off", + "jsx-a11y/no-noninteractive-element-interactions": "off", "react-refresh/only-export-components": [ "warn", { From 7b5ccc428f575f27b3e36e66e8f5bffacab51b02 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Sun, 21 Jul 2024 23:55:02 +0900 Subject: [PATCH 05/28] =?UTF-8?q?refactor(TimeSlot):=20=EC=8B=9C=EA=B0=84?= =?UTF-8?q?=20=EC=84=A0=ED=83=9D=20=EB=B0=95=EC=8A=A4=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TimePicker/TimePicker.styles.ts | 15 --------------- frontend/src/components/TimePicker/index.tsx | 11 ++++++++--- .../_common/TimeSlot/TimeSlot.styles.ts | 14 ++++++++++++++ .../src/components/_common/TimeSlot/index.tsx | 12 ++++++++++++ frontend/src/pages/MeetingTimePickPage/index.tsx | 1 + 5 files changed, 35 insertions(+), 18 deletions(-) create mode 100644 frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts create mode 100644 frontend/src/components/_common/TimeSlot/index.tsx diff --git a/frontend/src/components/TimePicker/TimePicker.styles.ts b/frontend/src/components/TimePicker/TimePicker.styles.ts index f994525f8..2cc0379af 100644 --- a/frontend/src/components/TimePicker/TimePicker.styles.ts +++ b/frontend/src/components/TimePicker/TimePicker.styles.ts @@ -29,21 +29,6 @@ export const table = css` width: 100%; `; -export const styledTd = (isSelected: boolean) => css` - cursor: pointer; - - padding: 0.4rem; - - color: ${isSelected ? '#121010' : '#fff'}; - - background: ${isSelected ? theme.linear.selectedTime : '#ececec'}; - border-radius: 0.4rem; - - &:hover { - opacity: 0.7; - } -`; - export const styledTh = css` display: flex; align-items: center; diff --git a/frontend/src/components/TimePicker/index.tsx b/frontend/src/components/TimePicker/index.tsx index a56597dd4..8bef42a1b 100644 --- a/frontend/src/components/TimePicker/index.tsx +++ b/frontend/src/components/TimePicker/index.tsx @@ -1,14 +1,18 @@ +import TimeSlot from '@components/_common/TimeSlot'; + import useTimePick from '@hooks/useTimePick/useTimePick'; -import { styledTd, styledTh, table, tableTexture } from './TimePicker.styles'; +import { styledTh, table, tableTexture } from './TimePicker.styles'; export interface TimePickerProps { + isUpdate: boolean; availableDates: string[]; startTime: string; useTimePickReturn: ReturnType; } export default function TimePicker({ + isUpdate, availableDates, startTime, useTimePickReturn, @@ -33,9 +37,10 @@ export default function TimePicker({ {String(rowIndex + Number(startTime.slice(0, 2)) + ':00')} {row.map((_, columnIndex) => ( - ))} diff --git a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts new file mode 100644 index 000000000..272bfe5ed --- /dev/null +++ b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts @@ -0,0 +1,14 @@ +import { css } from '@emotion/react'; + +import theme from '@styles/theme'; + +export const styledTd = (isSelected: boolean, isUpdate: boolean) => css` + cursor: pointer; + color: ${isSelected ? '#121010' : '#fff'}; + background: ${isSelected ? theme.linear.selectedTime : '#ececec'}; + border-radius: 0.4rem; + + &:hover { + opacity: ${isUpdate ? 0.7 : 1.0}; + } +`; diff --git a/frontend/src/components/_common/TimeSlot/index.tsx b/frontend/src/components/_common/TimeSlot/index.tsx new file mode 100644 index 000000000..308d7f988 --- /dev/null +++ b/frontend/src/components/_common/TimeSlot/index.tsx @@ -0,0 +1,12 @@ +import { tableTexture } from '@components/TimePicker/TimePicker.styles'; + +import { styledTd } from './TimeSlot.styles'; + +interface TimeSlotProps { + isSelected: boolean; + isUpdate: boolean; +} + +export default function TimeSlot({ isSelected, isUpdate }: TimeSlotProps) { + return ; +} diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index c5fa49d8b..b10b45c15 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -46,6 +46,7 @@ export default function MeetingTimePickPage() {

momo TimePicker

{data && ( Date: Mon, 22 Jul 2024 15:13:13 +0900 Subject: [PATCH 06/28] =?UTF-8?q?refactor:=20schedule=20api=20=EC=BB=A8?= =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=ED=86=B5=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/getSchedule.ts | 21 ------------------- .../src/apis/{postSchedule.ts => schedule.ts} | 21 +++++++++++++++++-- 2 files changed, 19 insertions(+), 23 deletions(-) delete mode 100644 frontend/src/apis/getSchedule.ts rename frontend/src/apis/{postSchedule.ts => schedule.ts} (51%) diff --git a/frontend/src/apis/getSchedule.ts b/frontend/src/apis/getSchedule.ts deleted file mode 100644 index ee9318dd4..000000000 --- a/frontend/src/apis/getSchedule.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { API_URL } from '@constants/api'; - -const getSchedule = async () => { - const url = `${API_URL}/api/v1/schedule}`; - - const response = await fetch(url, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - }, - }); - - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - - const data = await response.json(); - return data; -}; - -export default getSchedule; diff --git a/frontend/src/apis/postSchedule.ts b/frontend/src/apis/schedule.ts similarity index 51% rename from frontend/src/apis/postSchedule.ts rename to frontend/src/apis/schedule.ts index eb33186df..ac019baf6 100644 --- a/frontend/src/apis/postSchedule.ts +++ b/frontend/src/apis/schedule.ts @@ -2,7 +2,7 @@ import { API_URL } from '@constants/api'; import { Schedules } from './getMeeting'; -const postSchedule = async (requestData: Schedules[]) => { +export const postSchedule = async (requestData: Schedules[]) => { const url = `${API_URL}/api/v1/schedule`; const response = await fetch(url, { @@ -25,4 +25,21 @@ const postSchedule = async (requestData: Schedules[]) => { return data; }; -export default postSchedule; +// 현재 쓰지 않는 API (schedule 수정 시 사용하는 API) +export const getSchedule = async () => { + const url = `${API_URL}/api/v1/schedule}`; + + const response = await fetch(url, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + }); + + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + + const data = await response.json(); + return data; +}; From 1f9b18387932cb48826bcb0b413b30b98418b7c9 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:13:53 +0900 Subject: [PATCH 07/28] =?UTF-8?q?refactor:=20=EC=84=9C=EB=B2=84=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=96=B4=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/MeetingTimePickPage/index.tsx | 17 ++++++----------- .../src/stores/servers/meeting/mutations.ts | 8 ++++++++ frontend/src/stores/servers/meeting/queries.ts | 10 ++++++++++ 3 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 frontend/src/stores/servers/meeting/mutations.ts create mode 100644 frontend/src/stores/servers/meeting/queries.ts diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index b10b45c15..fade16455 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -1,5 +1,5 @@ -import { useMutation } from '@tanstack/react-query'; import { useState } from 'react'; +import { usePostScheduleMutation } from 'stores/servers/meeting/mutations'; import TimePicker from '@components/TimePicker'; import Button from '@components/_common/Button'; @@ -7,29 +7,24 @@ import Button from '@components/_common/Button'; import useTimePick from '@hooks/useTimePick/useTimePick'; import { getMeetingResponse } from '@apis/getMeeting'; -import postSchedule from '@apis/postSchedule'; import responseData from '@mocks/data.json'; import { buttonContainer, title } from './MeetingTimePickPage.styles'; import { convertToSchedule, generateScheduleMatrix } from './MeetingTimePickPage.utils'; +// import { useGetMeetingQuery } from 'stores/servers/meeting/queries'; + export default function MeetingTimePickPage() { // TODO: 임시 데이터 설정, 추후에 msw로 연결 수정 - // const { data } = useQuery({ - // queryKey: ['getMeeting'], - // queryFn: () => getMeeting(), - // retry: 1, - // }); + // const { data } = useGetMeetingQuery(); const data = responseData.data as getMeetingResponse; const initialValue = generateScheduleMatrix(data); const [isUpdate, setIsUpdate] = useState(false); const [ref, value] = useTimePick(isUpdate, initialValue); - const mutation = useMutation({ - mutationFn: postSchedule, - }); + const { mutate: postScheduleMutate } = usePostScheduleMutation(); const onToggle = () => { setIsUpdate((prevIsUpdate) => !prevIsUpdate); @@ -37,7 +32,7 @@ export default function MeetingTimePickPage() { if (isUpdate) { const convert = convertToSchedule(value, data.availableDates, data.startTime, data.endTime); - mutation.mutate(convert); + postScheduleMutate(convert); } }; diff --git a/frontend/src/stores/servers/meeting/mutations.ts b/frontend/src/stores/servers/meeting/mutations.ts new file mode 100644 index 000000000..7bb25d077 --- /dev/null +++ b/frontend/src/stores/servers/meeting/mutations.ts @@ -0,0 +1,8 @@ +import { useMutation } from '@tanstack/react-query'; + +import { postSchedule } from '@apis/schedule'; + +export const usePostScheduleMutation = () => + useMutation({ + mutationFn: postSchedule, + }); diff --git a/frontend/src/stores/servers/meeting/queries.ts b/frontend/src/stores/servers/meeting/queries.ts new file mode 100644 index 000000000..27d66a4d9 --- /dev/null +++ b/frontend/src/stores/servers/meeting/queries.ts @@ -0,0 +1,10 @@ +import { useQuery } from '@tanstack/react-query'; + +import getMeeting from '@apis/getMeeting'; + +export const useGetMeetingQuery = () => + useQuery({ + queryKey: ['getMeeting'], + queryFn: () => getMeeting(), + retry: 1, + }); From 958bb63572f1db04b3727f3c42e3591e1e917cb1 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:14:07 +0900 Subject: [PATCH 08/28] =?UTF-8?q?comment:=20uuid=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/getMeeting.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/apis/getMeeting.ts b/frontend/src/apis/getMeeting.ts index eb79395f0..321dc5166 100644 --- a/frontend/src/apis/getMeeting.ts +++ b/frontend/src/apis/getMeeting.ts @@ -13,7 +13,8 @@ export interface getMeetingResponse { schedules: Schedules[]; } -const getMeeting = async (uuid = '550e8400') => { +// uuid 기본값은 임시 설정된 uuid +const getMeeting = async (uuid = '550e8400'): Promise => { const url = `${API_URL}/api/v1/meeting/${uuid}`; const response = await fetch(url, { @@ -29,7 +30,7 @@ const getMeeting = async (uuid = '550e8400') => { const data = await response.json(); - return data.data as getMeetingResponse; + return data.data; }; export default getMeeting; From dec3d79388c4341ffe0acedf34df831eebe65615 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:44:37 +0900 Subject: [PATCH 09/28] =?UTF-8?q?design(TimeSlot):=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=A1=9C=EC=A7=81=20=ED=86=B5=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts | 3 +++ frontend/src/components/_common/TimeSlot/index.tsx | 4 +--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts index 272bfe5ed..0b85a807d 100644 --- a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts +++ b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts @@ -3,6 +3,9 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; export const styledTd = (isSelected: boolean, isUpdate: boolean) => css` + width: 4rem; + height: 4rem; + cursor: pointer; color: ${isSelected ? '#121010' : '#fff'}; background: ${isSelected ? theme.linear.selectedTime : '#ececec'}; diff --git a/frontend/src/components/_common/TimeSlot/index.tsx b/frontend/src/components/_common/TimeSlot/index.tsx index 308d7f988..a8a8714e5 100644 --- a/frontend/src/components/_common/TimeSlot/index.tsx +++ b/frontend/src/components/_common/TimeSlot/index.tsx @@ -1,5 +1,3 @@ -import { tableTexture } from '@components/TimePicker/TimePicker.styles'; - import { styledTd } from './TimeSlot.styles'; interface TimeSlotProps { @@ -8,5 +6,5 @@ interface TimeSlotProps { } export default function TimeSlot({ isSelected, isUpdate }: TimeSlotProps) { - return ; + return ; } From 0c33c29fb618c3675904961ee245efe5bc4cf5e6 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:52:36 +0900 Subject: [PATCH 10/28] =?UTF-8?q?chore:=20`stores`,=20`contexts`=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.prettierrc | 2 ++ frontend/tsconfig.json | 4 +++- frontend/webpack.common.js | 2 ++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/.prettierrc b/frontend/.prettierrc index 28c31bf41..030d86cd6 100644 --- a/frontend/.prettierrc +++ b/frontend/.prettierrc @@ -13,10 +13,12 @@ "importOrder": [ "^@layouts/(.*)$", + "^@contexts/(.*)$", "^@pages/(.*)$", "^@components/(.*)$", "^@hooks/(.*)$", "^@apis/(.*)$", + "^@stores/(.*)$", "^@common/(.*)$", "^@utils/(.*)$", "^@assets/(.*)$", diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 263b377a0..04d0d0673 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -31,7 +31,9 @@ "@pages/*": ["pages/*"], "@styles/*": ["styles/*"], "@types/*": ["types/*"], - "@utils/*": ["utils/*"] + "@utils/*": ["utils/*"], + "@stores/*": ["stores/*"], + "@contexts/*": ["contexts/*"] }, // test "types": ["jest"] diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index 7543a9579..ad517ccb5 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -46,6 +46,8 @@ module.exports = () => ({ '@styles': path.resolve(__dirname, 'src/styles'), '@types': path.resolve(__dirname, 'src/types'), '@utils': path.resolve(__dirname, 'src/utils'), + '@contexts': path.resolve(__dirname, 'src/contexts'), + '@stores': path.resolve(__dirname, 'src/stores'), }, }, output: { From decd11931493634ba050d6b2885fed1e8b446e37 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:54:45 +0900 Subject: [PATCH 11/28] =?UTF-8?q?refactor:=20`isUpdate`=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20context=EB=A1=9C=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/contexts/updateStateProvider.tsx | 26 +++++++++++ .../src/pages/MeetingTimePickPage/index.tsx | 45 ++++--------------- 2 files changed, 34 insertions(+), 37 deletions(-) create mode 100644 frontend/src/contexts/updateStateProvider.tsx diff --git a/frontend/src/contexts/updateStateProvider.tsx b/frontend/src/contexts/updateStateProvider.tsx new file mode 100644 index 000000000..42e55f8ee --- /dev/null +++ b/frontend/src/contexts/updateStateProvider.tsx @@ -0,0 +1,26 @@ +import { PropsWithChildren, createContext, useCallback, useState } from 'react'; + +interface UpdateStateContextProps { + getUpdateState: () => boolean; + handleToggleIsUpdate: () => void; +} + +export const UpdateStateContext = createContext( + {} as UpdateStateContextProps, +); + +export const UpdateStateProvider = ({ children }: PropsWithChildren) => { + const [isUpdate, setIsUpdate] = useState(false); + + const getUpdateState = () => isUpdate; + + const handleToggleIsUpdate = useCallback(() => { + setIsUpdate((prevState) => !prevState); + }, []); + + return ( + + {children} + + ); +}; diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index fade16455..68c9515a6 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -1,17 +1,12 @@ -import { useState } from 'react'; -import { usePostScheduleMutation } from 'stores/servers/meeting/mutations'; +import { UpdateStateProvider } from '@contexts/updateStateProvider'; -import TimePicker from '@components/TimePicker'; -import Button from '@components/_common/Button'; - -import useTimePick from '@hooks/useTimePick/useTimePick'; +import TimePicker from '@components/Time/Picker'; import { getMeetingResponse } from '@apis/getMeeting'; import responseData from '@mocks/data.json'; -import { buttonContainer, title } from './MeetingTimePickPage.styles'; -import { convertToSchedule, generateScheduleMatrix } from './MeetingTimePickPage.utils'; +import { title } from './MeetingTimePickPage.styles'; // import { useGetMeetingQuery } from 'stores/servers/meeting/queries'; @@ -20,37 +15,13 @@ export default function MeetingTimePickPage() { // const { data } = useGetMeetingQuery(); const data = responseData.data as getMeetingResponse; - const initialValue = generateScheduleMatrix(data); - const [isUpdate, setIsUpdate] = useState(false); - const [ref, value] = useTimePick(isUpdate, initialValue); - - const { mutate: postScheduleMutate } = usePostScheduleMutation(); - - const onToggle = () => { - setIsUpdate((prevIsUpdate) => !prevIsUpdate); - - if (isUpdate) { - const convert = convertToSchedule(value, data.availableDates, data.startTime, data.endTime); - - postScheduleMutate(convert); - } - }; return ( -
-

momo TimePicker

- {data && ( - - )} - -
-
+ ); } From 360ba7246b7c294fff870d9d8239d3f16c3d5156 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:56:19 +0900 Subject: [PATCH 12/28] =?UTF-8?q?refactor(TimePicker):=20UpdateProvider=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20Picker,?= =?UTF-8?q?=20Viewer=EA=B3=BC=20=EB=82=98=EB=88=84=EA=B8=B0=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20=ED=8F=B4=EB=8D=94=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Time/Picker/TimePicker.util.ts} | 0 frontend/src/components/Time/Picker/index.tsx | 74 +++++++++++++++++++ .../Time.styles.tsx} | 7 ++ frontend/src/components/TimePicker/index.tsx | 52 ------------- .../MeetingTimePickPage.styles.ts | 7 -- 5 files changed, 81 insertions(+), 59 deletions(-) rename frontend/src/{pages/MeetingTimePickPage/MeetingTimePickPage.utils.ts => components/Time/Picker/TimePicker.util.ts} (100%) create mode 100644 frontend/src/components/Time/Picker/index.tsx rename frontend/src/components/{TimePicker/TimePicker.styles.ts => Time/Time.styles.tsx} (85%) delete mode 100644 frontend/src/components/TimePicker/index.tsx diff --git a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.utils.ts b/frontend/src/components/Time/Picker/TimePicker.util.ts similarity index 100% rename from frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.utils.ts rename to frontend/src/components/Time/Picker/TimePicker.util.ts diff --git a/frontend/src/components/Time/Picker/index.tsx b/frontend/src/components/Time/Picker/index.tsx new file mode 100644 index 000000000..788c0fdac --- /dev/null +++ b/frontend/src/components/Time/Picker/index.tsx @@ -0,0 +1,74 @@ +import { useContext } from 'react'; + +import { UpdateStateContext } from '@contexts/updateStateProvider'; + +import Button from '@components/_common/Button'; +import TimeSlot from '@components/_common/TimeSlot'; + +import useTimePick from '@hooks/useTimePick/useTimePick'; + +import { getMeetingResponse } from '@apis/getMeeting'; + +import { usePostScheduleMutation } from '@stores/servers/meeting/mutations'; + +import { buttonContainer, styledTh, table, tableTexture } from '../Time.styles'; +import { convertToSchedule, generateScheduleMatrix } from './TimePicker.util'; + +export interface TimePickerProps { + data: getMeetingResponse; +} + +export default function TimePicker({ data }: TimePickerProps) { + const { getUpdateState, handleToggleIsUpdate } = useContext(UpdateStateContext); + const isUpdate = getUpdateState(); + const initialValue = generateScheduleMatrix(data); + const [ref, value] = useTimePick(isUpdate, initialValue); + + const { mutate: postScheduleMutate } = usePostScheduleMutation(); + + const handleOnToggle = () => { + handleToggleIsUpdate(); + + if (isUpdate) { + const convert = convertToSchedule(value, data.availableDates, data.startTime, data.endTime); + + postScheduleMutate(convert); + } + }; + + const formattedAvailableDates = ['', ...data.availableDates]; + + return ( +
+ + + + {formattedAvailableDates.map((date) => ( + + ))} + + + + {value.map((row, rowIndex) => ( + + + {row.map((_, columnIndex) => ( + + ))} + + ))} + +
{date}
+ {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')} +
+ +
+
+
+ ); +} diff --git a/frontend/src/components/TimePicker/TimePicker.styles.ts b/frontend/src/components/Time/Time.styles.tsx similarity index 85% rename from frontend/src/components/TimePicker/TimePicker.styles.ts rename to frontend/src/components/Time/Time.styles.tsx index 2cc0379af..68b10b3f1 100644 --- a/frontend/src/components/TimePicker/TimePicker.styles.ts +++ b/frontend/src/components/Time/Time.styles.tsx @@ -40,3 +40,10 @@ export const tableTexture = css` width: 4rem; height: 4rem; `; + +export const buttonContainer = css` + display: flex; + justify-content: flex-end; + width: 100%; + margin-top: 1rem; +`; diff --git a/frontend/src/components/TimePicker/index.tsx b/frontend/src/components/TimePicker/index.tsx deleted file mode 100644 index 8bef42a1b..000000000 --- a/frontend/src/components/TimePicker/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import TimeSlot from '@components/_common/TimeSlot'; - -import useTimePick from '@hooks/useTimePick/useTimePick'; - -import { styledTh, table, tableTexture } from './TimePicker.styles'; - -export interface TimePickerProps { - isUpdate: boolean; - availableDates: string[]; - startTime: string; - useTimePickReturn: ReturnType; -} - -export default function TimePicker({ - isUpdate, - availableDates, - startTime, - useTimePickReturn, -}: TimePickerProps) { - const [ref, value] = useTimePickReturn; - const formattedAvailableDates = ['', ...availableDates]; - - return ( -
- - - - {formattedAvailableDates.map((date) => ( - - ))} - - - - {value.map((row, rowIndex) => ( - - - {row.map((_, columnIndex) => ( - - ))} - - ))} - -
{date}
- {String(rowIndex + Number(startTime.slice(0, 2)) + ':00')} -
-
- ); -} diff --git a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts index 68180b3d5..e68817188 100644 --- a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts +++ b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts @@ -14,10 +14,3 @@ export const title = css` background: ${theme.linear.selectedTime}; background-clip: text; `; - -export const buttonContainer = css` - display: flex; - justify-content: flex-end; - width: 100%; - margin-top: 1rem; -`; From 518117af50459e2dfc9d3ebaa9d3d85644752ef7 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:56:44 +0900 Subject: [PATCH 13/28] =?UTF-8?q?style:=20css=20=EC=84=A0=EC=96=B8=20?= =?UTF-8?q?=EC=88=9C=EC=84=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts index 0b85a807d..13c76bcdb 100644 --- a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts +++ b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts @@ -3,11 +3,13 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; export const styledTd = (isSelected: boolean, isUpdate: boolean) => css` + cursor: pointer; + width: 4rem; height: 4rem; - cursor: pointer; color: ${isSelected ? '#121010' : '#fff'}; + background: ${isSelected ? theme.linear.selectedTime : '#ececec'}; border-radius: 0.4rem; From 7b733d937232f8acfa63b81fc53d97241ed8dbae Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 18:23:13 +0900 Subject: [PATCH 14/28] =?UTF-8?q?fix:=20post=20=EC=9A=94=EC=B2=AD=20?= =?UTF-8?q?=EC=8B=9C=20return=20=EA=B0=92=20=EC=97=86=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/schedule.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/apis/schedule.ts b/frontend/src/apis/schedule.ts index ac019baf6..07cc60a68 100644 --- a/frontend/src/apis/schedule.ts +++ b/frontend/src/apis/schedule.ts @@ -20,9 +20,6 @@ export const postSchedule = async (requestData: Schedules[]) => { if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } - - const data = await response.json(); - return data; }; // 현재 쓰지 않는 API (schedule 수정 시 사용하는 API) From cb8635ff05411ae0d3ce4c93bf864586b67b6654 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 18:27:21 +0900 Subject: [PATCH 15/28] =?UTF-8?q?feat:=20queryKey=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/queryKeys.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/src/constants/queryKeys.ts diff --git a/frontend/src/constants/queryKeys.ts b/frontend/src/constants/queryKeys.ts new file mode 100644 index 000000000..62cae423f --- /dev/null +++ b/frontend/src/constants/queryKeys.ts @@ -0,0 +1,3 @@ +export const QUERY_KEY = { + meeting: 'meeting', +}; From 681bc1c50a89530003f57ab9111e5d17f5f46c93 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 18:28:23 +0900 Subject: [PATCH 16/28] =?UTF-8?q?refactor:=20mutation=EC=97=90=20invalidat?= =?UTF-8?q?eQueries=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20queryKey=20?= =?UTF-8?q?=EC=83=81=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/stores/servers/meeting/mutations.ts | 14 +++++++++++--- frontend/src/stores/servers/meeting/queries.ts | 4 +++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/frontend/src/stores/servers/meeting/mutations.ts b/frontend/src/stores/servers/meeting/mutations.ts index 7bb25d077..efaa6480b 100644 --- a/frontend/src/stores/servers/meeting/mutations.ts +++ b/frontend/src/stores/servers/meeting/mutations.ts @@ -1,8 +1,16 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { postSchedule } from '@apis/schedule'; -export const usePostScheduleMutation = () => - useMutation({ +import { QUERY_KEY } from '@constants/queryKeys'; + +export const usePostScheduleMutation = () => { + const queryClient = useQueryClient(); + + return useMutation({ mutationFn: postSchedule, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [QUERY_KEY.meeting] }); + }, }); +}; diff --git a/frontend/src/stores/servers/meeting/queries.ts b/frontend/src/stores/servers/meeting/queries.ts index 27d66a4d9..588b4659c 100644 --- a/frontend/src/stores/servers/meeting/queries.ts +++ b/frontend/src/stores/servers/meeting/queries.ts @@ -2,9 +2,11 @@ import { useQuery } from '@tanstack/react-query'; import getMeeting from '@apis/getMeeting'; +import { QUERY_KEY } from '@constants/queryKeys'; + export const useGetMeetingQuery = () => useQuery({ - queryKey: ['getMeeting'], + queryKey: [QUERY_KEY.meeting], queryFn: () => getMeeting(), retry: 1, }); From 96cc195b5e292f14bdbbb2b934e6432051575b7b Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Mon, 22 Jul 2024 18:30:20 +0900 Subject: [PATCH 17/28] =?UTF-8?q?refactor:=20update=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=20provider=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20TimePicker,=20Ti?= =?UTF-8?q?meViewer=20=EB=B6=84=EB=A6=AC=20=ED=9B=84=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Time/Picker/index.tsx | 11 ++-- frontend/src/components/Time/Viewer/index.tsx | 58 +++++++++++++++++++ .../src/pages/MeetingTimePickPage/index.tsx | 28 ++++----- frontend/src/router.tsx | 8 ++- 4 files changed, 81 insertions(+), 24 deletions(-) create mode 100644 frontend/src/components/Time/Viewer/index.tsx diff --git a/frontend/src/components/Time/Picker/index.tsx b/frontend/src/components/Time/Picker/index.tsx index 788c0fdac..facd42a85 100644 --- a/frontend/src/components/Time/Picker/index.tsx +++ b/frontend/src/components/Time/Picker/index.tsx @@ -27,13 +27,10 @@ export default function TimePicker({ data }: TimePickerProps) { const { mutate: postScheduleMutate } = usePostScheduleMutation(); const handleOnToggle = () => { - handleToggleIsUpdate(); - - if (isUpdate) { - const convert = convertToSchedule(value, data.availableDates, data.startTime, data.endTime); + const convert = convertToSchedule(value, data.availableDates, data.startTime, data.endTime); - postScheduleMutate(convert); - } + handleToggleIsUpdate(); + postScheduleMutate(convert); }; const formattedAvailableDates = ['', ...data.availableDates]; @@ -67,7 +64,7 @@ export default function TimePicker({ data }: TimePickerProps) {
-
); diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx new file mode 100644 index 000000000..de2534397 --- /dev/null +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -0,0 +1,58 @@ +import { useContext } from 'react'; + +import { UpdateStateContext } from '@contexts/updateStateProvider'; + +import Button from '@components/_common/Button'; +import TimeSlot from '@components/_common/TimeSlot'; + +import { getMeetingResponse } from '@apis/getMeeting'; + +import { generateScheduleMatrix } from '../Picker/TimePicker.util'; +import { buttonContainer, styledTh, table, tableTexture } from '../Time.styles'; + +interface TimeViewerProps { + data: getMeetingResponse; +} + +export default function TimeViewer({ data }: TimeViewerProps) { + const { getUpdateState, handleToggleIsUpdate } = useContext(UpdateStateContext); + + const isUpdate = getUpdateState(); + + const schedules = generateScheduleMatrix(data); + const formattedAvailableDates = ['', ...data.availableDates]; + + return ( +
+ + + + {formattedAvailableDates.map((date) => ( + + ))} + + + + {schedules.map((row, rowIndex) => ( + + + {row.map((_, columnIndex) => ( + + ))} + + ))} + +
{date}
+ {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')} +
+ +
+
+
+ ); +} diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index 68c9515a6..51d79bf45 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -1,27 +1,23 @@ -import { UpdateStateProvider } from '@contexts/updateStateProvider'; +import { useContext } from 'react'; -import TimePicker from '@components/Time/Picker'; +import { UpdateStateContext } from '@contexts/updateStateProvider'; -import { getMeetingResponse } from '@apis/getMeeting'; +import TimePicker from '@components/Time/Picker'; +import TimeViewer from '@components/Time/Viewer'; -import responseData from '@mocks/data.json'; +import { useGetMeetingQuery } from '@stores/servers/meeting/queries'; import { title } from './MeetingTimePickPage.styles'; -// import { useGetMeetingQuery } from 'stores/servers/meeting/queries'; - export default function MeetingTimePickPage() { - // TODO: 임시 데이터 설정, 추후에 msw로 연결 수정 - // const { data } = useGetMeetingQuery(); - - const data = responseData.data as getMeetingResponse; + const { data } = useGetMeetingQuery(); + const { getUpdateState } = useContext(UpdateStateContext); return ( - -
-

momo TimePicker

- {data && } -
- +
+

momo TimePicker

+ {data && getUpdateState() && } + {data && !getUpdateState() && } +
); } diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index 46b434ae5..5dc84c6fb 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -2,6 +2,8 @@ import { createBrowserRouter } from 'react-router-dom'; import GlobalLayout from '@layouts/GlobalLayout'; +import { UpdateStateProvider } from '@contexts/updateStateProvider'; + import Join from '@pages/MeetingTimePickPage'; const router = createBrowserRouter( @@ -12,7 +14,11 @@ const router = createBrowserRouter( children: [ { index: true, - element: , + element: ( + + + + ), }, ], }, From 62624518e50ce53ccf30a6573ae89e06575e7360 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Tue, 23 Jul 2024 19:57:16 +0900 Subject: [PATCH 18/28] =?UTF-8?q?refactor:=20=EC=8B=9C=EA=B0=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=82=99=EA=B4=80=EC=A0=81=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 네트워크가 느린 사용자를 고려하여 낙관적 업데이트 로직 추가 - onSettled가 실행된 후, 낙관적 업데이트가 끝난 후 수정, 보기 모드가 변경되도록 하여 깜빡임 현상 개선 --- frontend/src/components/Time/Picker/index.tsx | 11 +++++----- .../src/stores/servers/meeting/mutations.ts | 22 +++++++++++++++++-- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Time/Picker/index.tsx b/frontend/src/components/Time/Picker/index.tsx index facd42a85..68963ea3f 100644 --- a/frontend/src/components/Time/Picker/index.tsx +++ b/frontend/src/components/Time/Picker/index.tsx @@ -1,4 +1,4 @@ -import { useContext } from 'react'; +import { useContext, useMemo } from 'react'; import { UpdateStateContext } from '@contexts/updateStateProvider'; @@ -19,17 +19,16 @@ export interface TimePickerProps { } export default function TimePicker({ data }: TimePickerProps) { - const { getUpdateState, handleToggleIsUpdate } = useContext(UpdateStateContext); - const isUpdate = getUpdateState(); - const initialValue = generateScheduleMatrix(data); + const { isUpdate, handleToggleIsUpdate } = useContext(UpdateStateContext); + + const initialValue = useMemo(() => generateScheduleMatrix(data), [data]); const [ref, value] = useTimePick(isUpdate, initialValue); - const { mutate: postScheduleMutate } = usePostScheduleMutation(); + const { mutate: postScheduleMutate } = usePostScheduleMutation(() => handleToggleIsUpdate()); const handleOnToggle = () => { const convert = convertToSchedule(value, data.availableDates, data.startTime, data.endTime); - handleToggleIsUpdate(); postScheduleMutate(convert); }; diff --git a/frontend/src/stores/servers/meeting/mutations.ts b/frontend/src/stores/servers/meeting/mutations.ts index efaa6480b..434a0d995 100644 --- a/frontend/src/stores/servers/meeting/mutations.ts +++ b/frontend/src/stores/servers/meeting/mutations.ts @@ -1,15 +1,33 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { getMeetingResponse } from '@apis/getMeeting'; import { postSchedule } from '@apis/schedule'; import { QUERY_KEY } from '@constants/queryKeys'; -export const usePostScheduleMutation = () => { +export const usePostScheduleMutation = (onSettledCallback: () => void) => { const queryClient = useQueryClient(); return useMutation({ mutationFn: postSchedule, - onSuccess: () => { + onMutate: async (newSchedules) => { + await queryClient.cancelQueries({ queryKey: [QUERY_KEY.meeting] }); + + const prevSchedules = queryClient.getQueryData([QUERY_KEY.meeting]); + + queryClient.setQueryData([QUERY_KEY.meeting], (prevData: getMeetingResponse) => { + const nextMeetingSchedules = { + ...prevData, + schedules: newSchedules, + }; + + return nextMeetingSchedules; + }); + + return { prevSchedules }; + }, + onSettled: () => { + onSettledCallback(); queryClient.invalidateQueries({ queryKey: [QUERY_KEY.meeting] }); }, }); From ab0f629e845affe33a233c72b50bae201ae1ad4a Mon Sep 17 00:00:00 2001 From: hwinkr Date: Tue, 23 Jul 2024 19:59:46 +0900 Subject: [PATCH 19/28] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=20?= =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=EC=9D=84=20=EA=B5=AC=EC=84=B1?= =?UTF-8?q?=ED=95=A0=20=EB=95=8C=20=EC=82=AC=EC=9A=A9=ED=96=88=EB=8D=98=20?= =?UTF-8?q?=EC=84=9C=EB=B2=84=20=EC=83=81=ED=83=9C=EC=9D=98=20'=EC=B4=88'?= =?UTF-8?q?=20=EB=8B=A8=EC=9C=84=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Time/Picker/TimePicker.util.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Time/Picker/TimePicker.util.ts b/frontend/src/components/Time/Picker/TimePicker.util.ts index e57d5daaf..5c4170df3 100644 --- a/frontend/src/components/Time/Picker/TimePicker.util.ts +++ b/frontend/src/components/Time/Picker/TimePicker.util.ts @@ -8,7 +8,7 @@ const generateTimeSlots = (start: string, end: string) => { const slots: string[] = []; for (let i = startHour; i <= endHour; i++) { - slots.push(`${i.toString().padStart(2, '0')}:00`); + slots.push(`${i.toString().padStart(2, '0') + ':00'}`); } return slots; @@ -61,8 +61,8 @@ export const convertToSchedule = ( matrix.forEach((row, rowIndex) => { if (row[colIndex]) { // 임시로 30분 단위도 추가되도록 설정 - times.push(timeSlots[rowIndex] + ':00'); - times.push(timeSlots[rowIndex].slice(0, 2) + ':30:00'); + times.push(timeSlots[rowIndex]); + times.push(timeSlots[rowIndex].slice(0, 2) + ':30'); } }); From 7fe63fa2738936a37974c23ad0d6d018cea8c2a4 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Tue, 23 Jul 2024 20:00:18 +0900 Subject: [PATCH 20/28] =?UTF-8?q?refactor:=20context=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=ED=95=98=EB=8A=94=20isUpdate=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EA=B0=92=EC=9D=84=20Provider=20=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EB=82=B4=EB=A0=A4=EC=A3=BC=EB=8F=84=EB=A1=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Time/Viewer/index.tsx | 5 ++--- frontend/src/contexts/updateStateProvider.tsx | 6 ++---- frontend/src/pages/MeetingTimePickPage/index.tsx | 6 +++--- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx index de2534397..594fd2ac6 100644 --- a/frontend/src/components/Time/Viewer/index.tsx +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -15,11 +15,10 @@ interface TimeViewerProps { } export default function TimeViewer({ data }: TimeViewerProps) { - const { getUpdateState, handleToggleIsUpdate } = useContext(UpdateStateContext); - - const isUpdate = getUpdateState(); + const { isUpdate, handleToggleIsUpdate } = useContext(UpdateStateContext); const schedules = generateScheduleMatrix(data); + const formattedAvailableDates = ['', ...data.availableDates]; return ( diff --git a/frontend/src/contexts/updateStateProvider.tsx b/frontend/src/contexts/updateStateProvider.tsx index 42e55f8ee..88b84707c 100644 --- a/frontend/src/contexts/updateStateProvider.tsx +++ b/frontend/src/contexts/updateStateProvider.tsx @@ -1,7 +1,7 @@ import { PropsWithChildren, createContext, useCallback, useState } from 'react'; interface UpdateStateContextProps { - getUpdateState: () => boolean; + isUpdate: boolean; handleToggleIsUpdate: () => void; } @@ -12,14 +12,12 @@ export const UpdateStateContext = createContext( export const UpdateStateProvider = ({ children }: PropsWithChildren) => { const [isUpdate, setIsUpdate] = useState(false); - const getUpdateState = () => isUpdate; - const handleToggleIsUpdate = useCallback(() => { setIsUpdate((prevState) => !prevState); }, []); return ( - + {children} ); diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index 51d79bf45..b817f6970 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -11,13 +11,13 @@ import { title } from './MeetingTimePickPage.styles'; export default function MeetingTimePickPage() { const { data } = useGetMeetingQuery(); - const { getUpdateState } = useContext(UpdateStateContext); + const { isUpdate } = useContext(UpdateStateContext); return (

momo TimePicker

- {data && getUpdateState() && } - {data && !getUpdateState() && } + {data && isUpdate && } + {data && !isUpdate && }
); } From a520ddaa046c50bc0506487080b0dc5c156a7888 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Tue, 23 Jul 2024 22:31:22 +0900 Subject: [PATCH 21/28] =?UTF-8?q?chore:=20=EC=9D=B8=ED=84=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=8A=A4=EB=AA=85=20PascalCase=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/getMeeting.ts | 4 ++-- frontend/src/components/Time/Picker/TimePicker.util.ts | 4 ++-- frontend/src/components/Time/Picker/index.tsx | 4 ++-- frontend/src/components/Time/Viewer/index.tsx | 4 ++-- frontend/src/stores/servers/meeting/mutations.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/src/apis/getMeeting.ts b/frontend/src/apis/getMeeting.ts index 321dc5166..43646cdac 100644 --- a/frontend/src/apis/getMeeting.ts +++ b/frontend/src/apis/getMeeting.ts @@ -5,7 +5,7 @@ export interface Schedules { times: string[]; } -export interface getMeetingResponse { +export interface GetMeetingResponse { meetingName: string; startTime: string; endTime: string; @@ -14,7 +14,7 @@ export interface getMeetingResponse { } // uuid 기본값은 임시 설정된 uuid -const getMeeting = async (uuid = '550e8400'): Promise => { +const getMeeting = async (uuid = '550e8400'): Promise => { const url = `${API_URL}/api/v1/meeting/${uuid}`; const response = await fetch(url, { diff --git a/frontend/src/components/Time/Picker/TimePicker.util.ts b/frontend/src/components/Time/Picker/TimePicker.util.ts index 5c4170df3..c0f6f5d82 100644 --- a/frontend/src/components/Time/Picker/TimePicker.util.ts +++ b/frontend/src/components/Time/Picker/TimePicker.util.ts @@ -1,4 +1,4 @@ -import { getMeetingResponse } from '@apis/getMeeting'; +import { GetMeetingResponse } from '@apis/getMeeting'; type TimeSlot = Record; @@ -19,7 +19,7 @@ export const generateScheduleMatrix = ({ endTime, availableDates, schedules, -}: getMeetingResponse) => { +}: GetMeetingResponse) => { const timeSlots = generateTimeSlots(startTime, endTime); const timeSlotIndex = timeSlots.reduce((acc, slot, idx) => { acc[slot] = idx; diff --git a/frontend/src/components/Time/Picker/index.tsx b/frontend/src/components/Time/Picker/index.tsx index 68963ea3f..3acea00f7 100644 --- a/frontend/src/components/Time/Picker/index.tsx +++ b/frontend/src/components/Time/Picker/index.tsx @@ -7,7 +7,7 @@ import TimeSlot from '@components/_common/TimeSlot'; import useTimePick from '@hooks/useTimePick/useTimePick'; -import { getMeetingResponse } from '@apis/getMeeting'; +import { GetMeetingResponse } from '@apis/getMeeting'; import { usePostScheduleMutation } from '@stores/servers/meeting/mutations'; @@ -15,7 +15,7 @@ import { buttonContainer, styledTh, table, tableTexture } from '../Time.styles'; import { convertToSchedule, generateScheduleMatrix } from './TimePicker.util'; export interface TimePickerProps { - data: getMeetingResponse; + data: GetMeetingResponse; } export default function TimePicker({ data }: TimePickerProps) { diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx index 594fd2ac6..a22121850 100644 --- a/frontend/src/components/Time/Viewer/index.tsx +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -5,13 +5,13 @@ import { UpdateStateContext } from '@contexts/updateStateProvider'; import Button from '@components/_common/Button'; import TimeSlot from '@components/_common/TimeSlot'; -import { getMeetingResponse } from '@apis/getMeeting'; +import { GetMeetingResponse } from '@apis/getMeeting'; import { generateScheduleMatrix } from '../Picker/TimePicker.util'; import { buttonContainer, styledTh, table, tableTexture } from '../Time.styles'; interface TimeViewerProps { - data: getMeetingResponse; + data: GetMeetingResponse; } export default function TimeViewer({ data }: TimeViewerProps) { diff --git a/frontend/src/stores/servers/meeting/mutations.ts b/frontend/src/stores/servers/meeting/mutations.ts index 434a0d995..33ab1063b 100644 --- a/frontend/src/stores/servers/meeting/mutations.ts +++ b/frontend/src/stores/servers/meeting/mutations.ts @@ -1,6 +1,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { getMeetingResponse } from '@apis/getMeeting'; +import { GetMeetingResponse } from '@apis/getMeeting'; import { postSchedule } from '@apis/schedule'; import { QUERY_KEY } from '@constants/queryKeys'; @@ -15,7 +15,7 @@ export const usePostScheduleMutation = (onSettledCallback: () => void) => { const prevSchedules = queryClient.getQueryData([QUERY_KEY.meeting]); - queryClient.setQueryData([QUERY_KEY.meeting], (prevData: getMeetingResponse) => { + queryClient.setQueryData([QUERY_KEY.meeting], (prevData: GetMeetingResponse) => { const nextMeetingSchedules = { ...prevData, schedules: newSchedules, From eb386bc80d1bc3da8eb6bff84907bd2315071e7c Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Tue, 23 Jul 2024 22:37:05 +0900 Subject: [PATCH 22/28] =?UTF-8?q?chore:=20consistent-type-imports=20?= =?UTF-8?q?=EA=B7=9C=EC=B9=99=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B7=9C?= =?UTF-8?q?=EC=B9=99=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 타입 정의 import 시 import type 명시되도록 수정 --- frontend/.eslintrc.json | 1 + frontend/src/apis/schedule.ts | 2 +- frontend/src/components/Time/Picker/TimePicker.util.ts | 2 +- frontend/src/components/Time/Picker/index.tsx | 2 +- frontend/src/components/Time/Viewer/index.tsx | 2 +- frontend/src/contexts/updateStateProvider.tsx | 3 ++- frontend/src/stores/servers/meeting/mutations.ts | 2 +- 7 files changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index 14d1ec09a..f3b6525f9 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -26,6 +26,7 @@ "plugin:storybook/recommended" ], "rules": { + "@typescript-eslint/consistent-type-imports": "error", "jsx-a11y/click-events-have-key-events": "off", "jsx-a11y/no-noninteractive-element-interactions": "off", "react-refresh/only-export-components": [ diff --git a/frontend/src/apis/schedule.ts b/frontend/src/apis/schedule.ts index 07cc60a68..670aff223 100644 --- a/frontend/src/apis/schedule.ts +++ b/frontend/src/apis/schedule.ts @@ -1,6 +1,6 @@ import { API_URL } from '@constants/api'; -import { Schedules } from './getMeeting'; +import type { Schedules } from './getMeeting'; export const postSchedule = async (requestData: Schedules[]) => { const url = `${API_URL}/api/v1/schedule`; diff --git a/frontend/src/components/Time/Picker/TimePicker.util.ts b/frontend/src/components/Time/Picker/TimePicker.util.ts index c0f6f5d82..0627f2c37 100644 --- a/frontend/src/components/Time/Picker/TimePicker.util.ts +++ b/frontend/src/components/Time/Picker/TimePicker.util.ts @@ -1,4 +1,4 @@ -import { GetMeetingResponse } from '@apis/getMeeting'; +import type { GetMeetingResponse } from '@apis/getMeeting'; type TimeSlot = Record; diff --git a/frontend/src/components/Time/Picker/index.tsx b/frontend/src/components/Time/Picker/index.tsx index 3acea00f7..d0f70072e 100644 --- a/frontend/src/components/Time/Picker/index.tsx +++ b/frontend/src/components/Time/Picker/index.tsx @@ -7,7 +7,7 @@ import TimeSlot from '@components/_common/TimeSlot'; import useTimePick from '@hooks/useTimePick/useTimePick'; -import { GetMeetingResponse } from '@apis/getMeeting'; +import type { GetMeetingResponse } from '@apis/getMeeting'; import { usePostScheduleMutation } from '@stores/servers/meeting/mutations'; diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx index a22121850..b58af2051 100644 --- a/frontend/src/components/Time/Viewer/index.tsx +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -5,7 +5,7 @@ import { UpdateStateContext } from '@contexts/updateStateProvider'; import Button from '@components/_common/Button'; import TimeSlot from '@components/_common/TimeSlot'; -import { GetMeetingResponse } from '@apis/getMeeting'; +import type { GetMeetingResponse } from '@apis/getMeeting'; import { generateScheduleMatrix } from '../Picker/TimePicker.util'; import { buttonContainer, styledTh, table, tableTexture } from '../Time.styles'; diff --git a/frontend/src/contexts/updateStateProvider.tsx b/frontend/src/contexts/updateStateProvider.tsx index 88b84707c..8a4ac1d59 100644 --- a/frontend/src/contexts/updateStateProvider.tsx +++ b/frontend/src/contexts/updateStateProvider.tsx @@ -1,4 +1,5 @@ -import { PropsWithChildren, createContext, useCallback, useState } from 'react'; +import type { PropsWithChildren } from 'react'; +import { createContext, useCallback, useState } from 'react'; interface UpdateStateContextProps { isUpdate: boolean; diff --git a/frontend/src/stores/servers/meeting/mutations.ts b/frontend/src/stores/servers/meeting/mutations.ts index 33ab1063b..37d852b4d 100644 --- a/frontend/src/stores/servers/meeting/mutations.ts +++ b/frontend/src/stores/servers/meeting/mutations.ts @@ -1,6 +1,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; -import { GetMeetingResponse } from '@apis/getMeeting'; +import type { GetMeetingResponse } from '@apis/getMeeting'; import { postSchedule } from '@apis/schedule'; import { QUERY_KEY } from '@constants/queryKeys'; From 7639820567db112aa96bb2cef8e6878118d180da Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Tue, 23 Jul 2024 22:37:53 +0900 Subject: [PATCH 23/28] =?UTF-8?q?refactor:=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=EC=A0=95=EC=9D=98=20as=20const=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/api.ts | 2 +- frontend/src/constants/queryKeys.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/constants/api.ts b/frontend/src/constants/api.ts index fc6248bcf..1929121ff 100644 --- a/frontend/src/constants/api.ts +++ b/frontend/src/constants/api.ts @@ -1,3 +1,3 @@ export const API_URL = process.env.API_URL; -export const END_POINTS = {}; +export const END_POINTS = {} as const; diff --git a/frontend/src/constants/queryKeys.ts b/frontend/src/constants/queryKeys.ts index 62cae423f..911ad1485 100644 --- a/frontend/src/constants/queryKeys.ts +++ b/frontend/src/constants/queryKeys.ts @@ -1,3 +1,3 @@ export const QUERY_KEY = { meeting: 'meeting', -}; +} as const; From a44488737c47567c0fe05612b362e5922b13a684 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Tue, 23 Jul 2024 23:04:16 +0900 Subject: [PATCH 24/28] =?UTF-8?q?rename:=20update=20->=20TimePickerUpdate?= =?UTF-8?q?=EB=A1=9C=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Time/Picker/index.tsx | 14 ++++++---- frontend/src/components/Time/Viewer/index.tsx | 10 ++++--- .../TimePickerUpdateStateProvider.tsx | 27 +++++++++++++++++++ frontend/src/contexts/updateStateProvider.tsx | 25 ----------------- .../src/pages/MeetingTimePickPage/index.tsx | 8 +++--- frontend/src/router.tsx | 6 ++--- 6 files changed, 49 insertions(+), 41 deletions(-) create mode 100644 frontend/src/contexts/TimePickerUpdateStateProvider.tsx delete mode 100644 frontend/src/contexts/updateStateProvider.tsx diff --git a/frontend/src/components/Time/Picker/index.tsx b/frontend/src/components/Time/Picker/index.tsx index d0f70072e..f40bd34f1 100644 --- a/frontend/src/components/Time/Picker/index.tsx +++ b/frontend/src/components/Time/Picker/index.tsx @@ -1,6 +1,6 @@ import { useContext, useMemo } from 'react'; -import { UpdateStateContext } from '@contexts/updateStateProvider'; +import { TimePickerUpdateStateContext } from '@contexts/TimePickerUpdateStateProvider'; import Button from '@components/_common/Button'; import TimeSlot from '@components/_common/TimeSlot'; @@ -19,12 +19,16 @@ export interface TimePickerProps { } export default function TimePicker({ data }: TimePickerProps) { - const { isUpdate, handleToggleIsUpdate } = useContext(UpdateStateContext); + const { isTimePickerUpdate, handleToggleIsTimePickerUpdate } = useContext( + TimePickerUpdateStateContext, + ); const initialValue = useMemo(() => generateScheduleMatrix(data), [data]); - const [ref, value] = useTimePick(isUpdate, initialValue); + const [ref, value] = useTimePick(isTimePickerUpdate, initialValue); - const { mutate: postScheduleMutate } = usePostScheduleMutation(() => handleToggleIsUpdate()); + const { mutate: postScheduleMutate } = usePostScheduleMutation(() => + handleToggleIsTimePickerUpdate(), + ); const handleOnToggle = () => { const convert = convertToSchedule(value, data.availableDates, data.startTime, data.endTime); @@ -54,7 +58,7 @@ export default function TimePicker({ data }: TimePickerProps) { ))} diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx index b58af2051..3b150a425 100644 --- a/frontend/src/components/Time/Viewer/index.tsx +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import { UpdateStateContext } from '@contexts/updateStateProvider'; +import { TimePickerUpdateStateContext } from '@contexts/TimePickerUpdateStateProvider'; import Button from '@components/_common/Button'; import TimeSlot from '@components/_common/TimeSlot'; @@ -15,7 +15,9 @@ interface TimeViewerProps { } export default function TimeViewer({ data }: TimeViewerProps) { - const { isUpdate, handleToggleIsUpdate } = useContext(UpdateStateContext); + const { isTimePickerUpdate, handleToggleIsTimePickerUpdate } = useContext( + TimePickerUpdateStateContext, + ); const schedules = generateScheduleMatrix(data); @@ -41,7 +43,7 @@ export default function TimeViewer({ data }: TimeViewerProps) { ))} @@ -50,7 +52,7 @@ export default function TimeViewer({ data }: TimeViewerProps) {
-
); diff --git a/frontend/src/contexts/TimePickerUpdateStateProvider.tsx b/frontend/src/contexts/TimePickerUpdateStateProvider.tsx new file mode 100644 index 000000000..b2b74f356 --- /dev/null +++ b/frontend/src/contexts/TimePickerUpdateStateProvider.tsx @@ -0,0 +1,27 @@ +import type { PropsWithChildren } from 'react'; +import { createContext, useCallback, useState } from 'react'; + +interface TimePickerUpdateStateContextProps { + isTimePickerUpdate: boolean; + handleToggleIsTimePickerUpdate: () => void; +} + +export const TimePickerUpdateStateContext = createContext( + {} as TimePickerUpdateStateContextProps, +); + +export const TimePickerUpdateStateProvider = ({ children }: PropsWithChildren) => { + const [isTimePickerUpdate, setIsTimePickerUpdate] = useState(false); + + const handleToggleIsTimePickerUpdate = useCallback(() => { + setIsTimePickerUpdate((prevState) => !prevState); + }, []); + + return ( + + {children} + + ); +}; diff --git a/frontend/src/contexts/updateStateProvider.tsx b/frontend/src/contexts/updateStateProvider.tsx deleted file mode 100644 index 8a4ac1d59..000000000 --- a/frontend/src/contexts/updateStateProvider.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import type { PropsWithChildren } from 'react'; -import { createContext, useCallback, useState } from 'react'; - -interface UpdateStateContextProps { - isUpdate: boolean; - handleToggleIsUpdate: () => void; -} - -export const UpdateStateContext = createContext( - {} as UpdateStateContextProps, -); - -export const UpdateStateProvider = ({ children }: PropsWithChildren) => { - const [isUpdate, setIsUpdate] = useState(false); - - const handleToggleIsUpdate = useCallback(() => { - setIsUpdate((prevState) => !prevState); - }, []); - - return ( - - {children} - - ); -}; diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index b817f6970..e9e2878bf 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import { UpdateStateContext } from '@contexts/updateStateProvider'; +import { TimePickerUpdateStateContext } from '@contexts/TimePickerUpdateStateProvider'; import TimePicker from '@components/Time/Picker'; import TimeViewer from '@components/Time/Viewer'; @@ -11,13 +11,13 @@ import { title } from './MeetingTimePickPage.styles'; export default function MeetingTimePickPage() { const { data } = useGetMeetingQuery(); - const { isUpdate } = useContext(UpdateStateContext); + const { isTimePickerUpdate } = useContext(TimePickerUpdateStateContext); return (

momo TimePicker

- {data && isUpdate && } - {data && !isUpdate && } + {data && isTimePickerUpdate && } + {data && !isTimePickerUpdate && }
); } diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index 5dc84c6fb..1fb34377a 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -2,7 +2,7 @@ import { createBrowserRouter } from 'react-router-dom'; import GlobalLayout from '@layouts/GlobalLayout'; -import { UpdateStateProvider } from '@contexts/updateStateProvider'; +import { TimePickerUpdateStateProvider } from '@contexts/TimePickerUpdateStateProvider'; import Join from '@pages/MeetingTimePickPage'; @@ -15,9 +15,9 @@ const router = createBrowserRouter( { index: true, element: ( - + - + ), }, ], From e287ee47dd2322036354b52f8a97f249d8502c58 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Tue, 23 Jul 2024 23:10:46 +0900 Subject: [PATCH 25/28] =?UTF-8?q?rename:=20css=20prop=20=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EB=B0=8D=20Style=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Time/Picker/index.tsx | 6 +++--- frontend/src/components/Time/Time.styles.tsx | 20 ++++++++----------- frontend/src/components/Time/Viewer/index.tsx | 6 +++--- .../_common/Button/Button.styles.ts | 2 +- .../src/components/_common/Button/index.tsx | 4 ++-- .../_common/TimeSlot/TimeSlot.styles.ts | 2 +- .../src/components/_common/TimeSlot/index.tsx | 4 ++-- .../MeetingTimePickPage.styles.ts | 2 +- .../src/pages/MeetingTimePickPage/index.tsx | 4 ++-- 9 files changed, 23 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/Time/Picker/index.tsx b/frontend/src/components/Time/Picker/index.tsx index f40bd34f1..b42466a6e 100644 --- a/frontend/src/components/Time/Picker/index.tsx +++ b/frontend/src/components/Time/Picker/index.tsx @@ -11,7 +11,7 @@ import type { GetMeetingResponse } from '@apis/getMeeting'; import { usePostScheduleMutation } from '@stores/servers/meeting/mutations'; -import { buttonContainer, styledTh, table, tableTexture } from '../Time.styles'; +import { buttonContainer, cellStyle, tableStyle, thStyle } from '../Time.styles'; import { convertToSchedule, generateScheduleMatrix } from './TimePicker.util'; export interface TimePickerProps { @@ -40,7 +40,7 @@ export default function TimePicker({ data }: TimePickerProps) { return (
- +
{formattedAvailableDates.map((date) => ( @@ -51,7 +51,7 @@ export default function TimePicker({ data }: TimePickerProps) { {value.map((row, rowIndex) => ( - {row.map((_, columnIndex) => ( diff --git a/frontend/src/components/Time/Time.styles.tsx b/frontend/src/components/Time/Time.styles.tsx index 68b10b3f1..851d62b70 100644 --- a/frontend/src/components/Time/Time.styles.tsx +++ b/frontend/src/components/Time/Time.styles.tsx @@ -3,8 +3,14 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; export const tableStyle = css` + cursor: pointer; user-select: none; + + border-spacing: 0.4rem 0.4rem; border-collapse: collapse; + border-collapse: separate; + + width: 100%; `; export const tdStyle = css` @@ -19,23 +25,13 @@ export const selectedStyle = css` background: ${theme.linear.selectedTime}; `; -export const table = css` - cursor: pointer; - user-select: none; - - border-spacing: 0.4rem 0.4rem; - border-collapse: separate; - - width: 100%; -`; - -export const styledTh = css` +export const thStyle = css` display: flex; align-items: center; justify-content: center; `; -export const tableTexture = css` +export const cellStyle = css` cursor: default; width: 4rem; height: 4rem; diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx index 3b150a425..47711dc1e 100644 --- a/frontend/src/components/Time/Viewer/index.tsx +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -8,7 +8,7 @@ import TimeSlot from '@components/_common/TimeSlot'; import type { GetMeetingResponse } from '@apis/getMeeting'; import { generateScheduleMatrix } from '../Picker/TimePicker.util'; -import { buttonContainer, styledTh, table, tableTexture } from '../Time.styles'; +import { buttonContainer, cellStyle, tableStyle, thStyle } from '../Time.styles'; interface TimeViewerProps { data: GetMeetingResponse; @@ -25,7 +25,7 @@ export default function TimeViewer({ data }: TimeViewerProps) { return (
-
+ {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')}
+
{formattedAvailableDates.map((date) => ( @@ -36,7 +36,7 @@ export default function TimeViewer({ data }: TimeViewerProps) { {schedules.map((row, rowIndex) => ( - {row.map((_, columnIndex) => ( diff --git a/frontend/src/components/_common/Button/Button.styles.ts b/frontend/src/components/_common/Button/Button.styles.ts index 21dc9ead9..a3d1c95af 100644 --- a/frontend/src/components/_common/Button/Button.styles.ts +++ b/frontend/src/components/_common/Button/Button.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const styledButton = css` +export const buttonStyle = css` display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/components/_common/Button/index.tsx b/frontend/src/components/_common/Button/index.tsx index a8d4bd81a..373bdf719 100644 --- a/frontend/src/components/_common/Button/index.tsx +++ b/frontend/src/components/_common/Button/index.tsx @@ -1,6 +1,6 @@ import type { ButtonHTMLAttributes } from 'react'; -import { styledButton } from './Button.styles'; +import { buttonStyle } from './Button.styles'; interface ButtonProps extends ButtonHTMLAttributes { text: string; @@ -8,7 +8,7 @@ interface ButtonProps extends ButtonHTMLAttributes { export default function Button({ text, type = 'button', ...props }: ButtonProps) { return ( - ); diff --git a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts index 13c76bcdb..c2bf28353 100644 --- a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts +++ b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const styledTd = (isSelected: boolean, isUpdate: boolean) => css` +export const tdStyle = (isSelected: boolean, isUpdate: boolean) => css` cursor: pointer; width: 4rem; diff --git a/frontend/src/components/_common/TimeSlot/index.tsx b/frontend/src/components/_common/TimeSlot/index.tsx index a8a8714e5..39e41de5a 100644 --- a/frontend/src/components/_common/TimeSlot/index.tsx +++ b/frontend/src/components/_common/TimeSlot/index.tsx @@ -1,4 +1,4 @@ -import { styledTd } from './TimeSlot.styles'; +import { tdStyle } from './TimeSlot.styles'; interface TimeSlotProps { isSelected: boolean; @@ -6,5 +6,5 @@ interface TimeSlotProps { } export default function TimeSlot({ isSelected, isUpdate }: TimeSlotProps) { - return
+ {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')} ; + return ; } diff --git a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts index e68817188..3f95d93c8 100644 --- a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts +++ b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const title = css` +export const titleStyle = css` width: 100%; margin-bottom: 1rem; diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index e9e2878bf..50a5e877c 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -7,7 +7,7 @@ import TimeViewer from '@components/Time/Viewer'; import { useGetMeetingQuery } from '@stores/servers/meeting/queries'; -import { title } from './MeetingTimePickPage.styles'; +import { titleStyle } from './MeetingTimePickPage.styles'; export default function MeetingTimePickPage() { const { data } = useGetMeetingQuery(); @@ -15,7 +15,7 @@ export default function MeetingTimePickPage() { return (
-

momo TimePicker

+

momo TimePicker

{data && isTimePickerUpdate && } {data && !isTimePickerUpdate && }
From ba54102c666080031789d2bd1c34d532a779f631 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Wed, 24 Jul 2024 11:00:18 +0900 Subject: [PATCH 26/28] =?UTF-8?q?refactor:=20=EC=A1=B0=EA=B1=B4=EB=B6=80?= =?UTF-8?q?=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=BD=94=EB=93=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/MeetingTimePickPage/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index 50a5e877c..b3281c3b2 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -13,11 +13,12 @@ export default function MeetingTimePickPage() { const { data } = useGetMeetingQuery(); const { isTimePickerUpdate } = useContext(TimePickerUpdateStateContext); + if (!data) return null; + return (

momo TimePicker

- {data && isTimePickerUpdate && } - {data && !isTimePickerUpdate && } + {isTimePickerUpdate ? : }
); } From 5725b664b61d63893fde4b4a3adfab5be9883fff Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:18:02 +0900 Subject: [PATCH 27/28] =?UTF-8?q?refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20router?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=97=90=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/router.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index 1fb34377a..07239ebaf 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -4,7 +4,7 @@ import GlobalLayout from '@layouts/GlobalLayout'; import { TimePickerUpdateStateProvider } from '@contexts/TimePickerUpdateStateProvider'; -import Join from '@pages/MeetingTimePickPage'; +import MeetingTimePickPage from '@pages/MeetingTimePickPage'; const router = createBrowserRouter( [ @@ -16,7 +16,7 @@ const router = createBrowserRouter( index: true, element: ( - + ), }, From 996832c916f73d0bc6b1e260a522438357dd70d6 Mon Sep 17 00:00:00 2001 From: Largopie <106071687+Largopie@users.noreply.github.com> Date: Wed, 24 Jul 2024 14:41:21 +0900 Subject: [PATCH 28/28] =?UTF-8?q?rename:=20css=20prop=20=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EB=B0=8D=20=EA=B7=9C=EC=B9=99=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Time/Picker/index.tsx | 8 ++++---- frontend/src/components/Time/Time.styles.tsx | 12 ++++++------ frontend/src/components/Time/Viewer/index.tsx | 8 ++++---- .../src/components/_common/Button/Button.styles.ts | 2 +- frontend/src/components/_common/Button/index.tsx | 4 ++-- .../components/_common/TimeSlot/TimeSlot.styles.ts | 2 +- frontend/src/components/_common/TimeSlot/index.tsx | 4 ++-- frontend/src/layouts/GlobalLayout.styles.ts | 2 +- frontend/src/layouts/GlobalLayout.tsx | 4 ++-- .../MeetingTimePickPage.styles.ts | 2 +- frontend/src/pages/MeetingTimePickPage/index.tsx | 4 ++-- 11 files changed, 26 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/Time/Picker/index.tsx b/frontend/src/components/Time/Picker/index.tsx index b42466a6e..940981e28 100644 --- a/frontend/src/components/Time/Picker/index.tsx +++ b/frontend/src/components/Time/Picker/index.tsx @@ -11,7 +11,7 @@ import type { GetMeetingResponse } from '@apis/getMeeting'; import { usePostScheduleMutation } from '@stores/servers/meeting/mutations'; -import { buttonContainer, cellStyle, tableStyle, thStyle } from '../Time.styles'; +import { s_buttonContainer, s_cell, s_table, s_th } from '../Time.styles'; import { convertToSchedule, generateScheduleMatrix } from './TimePicker.util'; export interface TimePickerProps { @@ -40,7 +40,7 @@ export default function TimePicker({ data }: TimePickerProps) { return (
- +
{formattedAvailableDates.map((date) => ( @@ -51,7 +51,7 @@ export default function TimePicker({ data }: TimePickerProps) { {value.map((row, rowIndex) => ( - {row.map((_, columnIndex) => ( @@ -66,7 +66,7 @@ export default function TimePicker({ data }: TimePickerProps) {
+ {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')}
-
+
diff --git a/frontend/src/components/Time/Time.styles.tsx b/frontend/src/components/Time/Time.styles.tsx index 851d62b70..eadd8b262 100644 --- a/frontend/src/components/Time/Time.styles.tsx +++ b/frontend/src/components/Time/Time.styles.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const tableStyle = css` +export const s_table = css` cursor: pointer; user-select: none; @@ -13,31 +13,31 @@ export const tableStyle = css` width: 100%; `; -export const tdStyle = css` +export const s_td = css` cursor: pointer; padding: 8px; text-align: center; border-radius: 0.4rem; `; -export const selectedStyle = css` +export const s_selected = css` color: white; background: ${theme.linear.selectedTime}; `; -export const thStyle = css` +export const s_th = css` display: flex; align-items: center; justify-content: center; `; -export const cellStyle = css` +export const s_cell = css` cursor: default; width: 4rem; height: 4rem; `; -export const buttonContainer = css` +export const s_buttonContainer = css` display: flex; justify-content: flex-end; width: 100%; diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx index 47711dc1e..46461af5e 100644 --- a/frontend/src/components/Time/Viewer/index.tsx +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -8,7 +8,7 @@ import TimeSlot from '@components/_common/TimeSlot'; import type { GetMeetingResponse } from '@apis/getMeeting'; import { generateScheduleMatrix } from '../Picker/TimePicker.util'; -import { buttonContainer, cellStyle, tableStyle, thStyle } from '../Time.styles'; +import { s_buttonContainer, s_cell, s_table, s_th } from '../Time.styles'; interface TimeViewerProps { data: GetMeetingResponse; @@ -25,7 +25,7 @@ export default function TimeViewer({ data }: TimeViewerProps) { return (
- +
{formattedAvailableDates.map((date) => ( @@ -36,7 +36,7 @@ export default function TimeViewer({ data }: TimeViewerProps) { {schedules.map((row, rowIndex) => ( - {row.map((_, columnIndex) => ( @@ -51,7 +51,7 @@ export default function TimeViewer({ data }: TimeViewerProps) {
+ {String(rowIndex + Number(data.startTime.slice(0, 2)) + ':00')}
-
+
diff --git a/frontend/src/components/_common/Button/Button.styles.ts b/frontend/src/components/_common/Button/Button.styles.ts index a3d1c95af..0b6f77388 100644 --- a/frontend/src/components/_common/Button/Button.styles.ts +++ b/frontend/src/components/_common/Button/Button.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const buttonStyle = css` +export const s_button = css` display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/components/_common/Button/index.tsx b/frontend/src/components/_common/Button/index.tsx index 373bdf719..a86c43d3d 100644 --- a/frontend/src/components/_common/Button/index.tsx +++ b/frontend/src/components/_common/Button/index.tsx @@ -1,6 +1,6 @@ import type { ButtonHTMLAttributes } from 'react'; -import { buttonStyle } from './Button.styles'; +import { s_button } from './Button.styles'; interface ButtonProps extends ButtonHTMLAttributes { text: string; @@ -8,7 +8,7 @@ interface ButtonProps extends ButtonHTMLAttributes { export default function Button({ text, type = 'button', ...props }: ButtonProps) { return ( - ); diff --git a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts index c2bf28353..a46a6a9ef 100644 --- a/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts +++ b/frontend/src/components/_common/TimeSlot/TimeSlot.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const tdStyle = (isSelected: boolean, isUpdate: boolean) => css` +export const s_td = (isSelected: boolean, isUpdate: boolean) => css` cursor: pointer; width: 4rem; diff --git a/frontend/src/components/_common/TimeSlot/index.tsx b/frontend/src/components/_common/TimeSlot/index.tsx index 39e41de5a..5c62d5484 100644 --- a/frontend/src/components/_common/TimeSlot/index.tsx +++ b/frontend/src/components/_common/TimeSlot/index.tsx @@ -1,4 +1,4 @@ -import { tdStyle } from './TimeSlot.styles'; +import { s_td } from './TimeSlot.styles'; interface TimeSlotProps { isSelected: boolean; @@ -6,5 +6,5 @@ interface TimeSlotProps { } export default function TimeSlot({ isSelected, isUpdate }: TimeSlotProps) { - return
; + return ; } diff --git a/frontend/src/layouts/GlobalLayout.styles.ts b/frontend/src/layouts/GlobalLayout.styles.ts index 95216fbbe..e3b9576c1 100644 --- a/frontend/src/layouts/GlobalLayout.styles.ts +++ b/frontend/src/layouts/GlobalLayout.styles.ts @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; -export const globalContainer = css` +export const s_globalContainer = css` min-width: 39.3rem; max-width: 60rem; height: 100%; diff --git a/frontend/src/layouts/GlobalLayout.tsx b/frontend/src/layouts/GlobalLayout.tsx index cc0a5d1a6..2f68f0cc0 100644 --- a/frontend/src/layouts/GlobalLayout.tsx +++ b/frontend/src/layouts/GlobalLayout.tsx @@ -1,10 +1,10 @@ import { Outlet } from 'react-router-dom'; -import { globalContainer } from './GlobalLayout.styles'; +import { s_globalContainer } from './GlobalLayout.styles'; export default function GlobalLayout() { return ( -
+
); diff --git a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts index 3f95d93c8..cc6427060 100644 --- a/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts +++ b/frontend/src/pages/MeetingTimePickPage/MeetingTimePickPage.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import theme from '@styles/theme'; -export const titleStyle = css` +export const s_title = css` width: 100%; margin-bottom: 1rem; diff --git a/frontend/src/pages/MeetingTimePickPage/index.tsx b/frontend/src/pages/MeetingTimePickPage/index.tsx index b3281c3b2..53ef8efb1 100644 --- a/frontend/src/pages/MeetingTimePickPage/index.tsx +++ b/frontend/src/pages/MeetingTimePickPage/index.tsx @@ -7,7 +7,7 @@ import TimeViewer from '@components/Time/Viewer'; import { useGetMeetingQuery } from '@stores/servers/meeting/queries'; -import { titleStyle } from './MeetingTimePickPage.styles'; +import { s_title } from './MeetingTimePickPage.styles'; export default function MeetingTimePickPage() { const { data } = useGetMeetingQuery(); @@ -17,7 +17,7 @@ export default function MeetingTimePickPage() { return (
-

momo TimePicker

+

momo TimePicker

{isTimePickerUpdate ? : }
);