From 091854a01b5cf0a52874f485133dffcbdc3a0744 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:45:45 +0900 Subject: [PATCH 01/40] =?UTF-8?q?refactor:=20Slot=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20?= =?UTF-8?q?=EC=A1=B0=EA=B1=B4=EB=B6=80=EB=A1=9C=EC=A7=81=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../timetableComponents/parts/Slot.tsx | 45 +++++++++---------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx index fd2dea06..92578188 100644 --- a/src/components/timetableComponents/parts/Slot.tsx +++ b/src/components/timetableComponents/parts/Slot.tsx @@ -1,7 +1,6 @@ +import useSlotSeletion from 'pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection'; import styled from 'styled-components'; -import useSlotSeletion from '../hooks/useSlotSelection'; - interface SlotProps { slot: string; selectedEntryId?: number; @@ -11,32 +10,30 @@ function Slot({ slot, selectedEntryId }: SlotProps) { const { startSlot, onClickSlot } = useSlotSeletion(); const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid'; - const styledSlotProps = { - $borderStyle: borderStyle, - $isSelected: selectedEntryId !== undefined, - onClick: () => onClickSlot(slot, selectedEntryId), - }; - - if (slot === startSlot) { - return ; - } else { - return ; - } + const isSelected = selectedEntryId !== undefined; + const isStartSlot = slot === startSlot; + + return ( + onClickSlot(slot, selectedEntryId)} + /> + ); } export default Slot; -const DefaultSlot = styled.div<{ $borderStyle: string; $isSelected: boolean }>` - border-top: 1px ${({ $borderStyle }) => $borderStyle} ${({ theme }) => theme.colors.grey7}; - background-color: ${({ $isSelected, theme }) => - $isSelected ? theme.colors.main1 : 'transparent'}; - cursor: pointer; - width: 4.4rem; - height: 2.2rem; -`; - -const SelectingSlot = styled.div<{ $borderStyle: string; $isSelected: boolean }>` - border: 1px dashed ${({ theme }) => theme.colors.main5}; +const DefaultSlot = styled.div<{ + $borderStyle: string; + $isSelected: boolean; + $isStartSlot: boolean; +}>` + ${({ $isStartSlot, $borderStyle, theme }) => + $isStartSlot + ? `border: 1px dashed ${theme.colors.main5};` + : `border-top: 1px ${$borderStyle} ${theme.colors.grey7};`} background-color: ${({ $isSelected, theme }) => $isSelected ? theme.colors.main1 : 'transparent'}; cursor: pointer; From c1c2f15bf4e3e8b7895aa69601a63e68b0708c33 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:49:11 +0900 Subject: [PATCH 02/40] =?UTF-8?q?feat:=20selectTimeSlot=EA=B3=BC=20selectP?= =?UTF-8?q?riority=EB=A5=BC=20=ED=95=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=95=84=EB=9E=98=EC=84=9C=20=EA=B4=80=EB=A6=AC?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC=EC=A1=B0=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 --- src/Router.tsx | 16 ++++-- .../timetableComponents/Timetable.tsx | 9 +-- .../timetableComponents/parts/ColumnTitle.tsx | 3 +- src/components/timetableComponents/types.ts | 10 ++++ .../components/SteppingBtnSection.tsx | 2 +- src/pages/Test.tsx | 17 ------ src/pages/selectSchedule/SelectSchedule.tsx | 35 ++++++++---- .../selectPriority/SelectPriority.tsx | 56 +++++++++++++++++++ .../components/PrioritySlots.tsx | 36 ++++++++++++ .../components/SelectionSlots.tsx | 4 +- .../selectTimeSlot}/hooks/useSlotSelection.ts | 2 +- 11 files changed, 145 insertions(+), 45 deletions(-) create mode 100644 src/components/timetableComponents/types.ts delete mode 100644 src/pages/Test.tsx create mode 100644 src/pages/selectSchedule/selectPriority/SelectPriority.tsx create mode 100644 src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx rename src/pages/selectSchedule/{ => selectTimeSlot}/components/SelectionSlots.tsx (83%) rename src/{components/timetableComponents => pages/selectSchedule/selectTimeSlot}/hooks/useSlotSelection.ts (95%) diff --git a/src/Router.tsx b/src/Router.tsx index 8536d068..4bf814dd 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -7,8 +7,8 @@ import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPa import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage'; import LoginEntrance from 'pages/loginEntrance/LoginEntrance'; import OnBoarding from 'pages/onBoarding/OnBoarding'; +import SelectSchedule from 'pages/selectSchedule/SelectSchedule'; import SteppingLayout from 'pages/steppingStone/SteppingLayout'; -import Test from 'pages/Test'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; const Router = () => { @@ -18,8 +18,16 @@ const Router = () => { } /> } /> } /> - } /> - } /> + {/* } /> + } /> */} + } + /> + } + /> } @@ -36,8 +44,6 @@ const Router = () => { } /> } /> } /> - } /> - } /> ); diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx index bde346a3..a9565fd7 100644 --- a/src/components/timetableComponents/Timetable.tsx +++ b/src/components/timetableComponents/Timetable.tsx @@ -1,21 +1,16 @@ import { ReactNode } from 'react'; -import { DateType } from 'pages/selectSchedule/SelectSchedule'; import styled from 'styled-components'; import Column from './parts/Column'; import DateTitle from './parts/ColumnTitle'; import SlotTitle from './parts/SlotTitle'; - -interface RenderProps { - date: string; - timeSlots: string[]; -} +import { DateType, TimetableStructure } from './types'; interface TimetableProps { timeSlots: string[]; availableDates: DateType[]; - children: (props: RenderProps) => ReactNode; + children: (props: TimetableStructure) => ReactNode; } function Timetable({ timeSlots, availableDates, children }: TimetableProps) { diff --git a/src/components/timetableComponents/parts/ColumnTitle.tsx b/src/components/timetableComponents/parts/ColumnTitle.tsx index c6bf61dd..74dd699a 100644 --- a/src/components/timetableComponents/parts/ColumnTitle.tsx +++ b/src/components/timetableComponents/parts/ColumnTitle.tsx @@ -1,8 +1,9 @@ -import { DateType } from '../Timetable'; import Text from 'components/atomComponents/Text'; import styled from 'styled-components'; import { theme } from 'styles/theme'; +import { DateType } from '../types'; + interface ColumnTitleProps { availableDates: DateType[]; } diff --git a/src/components/timetableComponents/types.ts b/src/components/timetableComponents/types.ts new file mode 100644 index 00000000..f323eb22 --- /dev/null +++ b/src/components/timetableComponents/types.ts @@ -0,0 +1,10 @@ +export interface TimetableStructure { + date: string; + timeSlots: string[]; +} + +export type DateType = { + month: string | undefined; + day: string | undefined; + dayOfWeek: string | undefined; +}; diff --git a/src/pages/SteppingStone/components/SteppingBtnSection.tsx b/src/pages/SteppingStone/components/SteppingBtnSection.tsx index b44ede21..c93d0dae 100644 --- a/src/pages/SteppingStone/components/SteppingBtnSection.tsx +++ b/src/pages/SteppingStone/components/SteppingBtnSection.tsx @@ -46,7 +46,7 @@ function SteppingBtnSection({ steppingType }: SteppingProps) { - + diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx deleted file mode 100644 index 828db086..00000000 --- a/src/pages/Test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import styled from 'styled-components'; - -import SelectSchedule from './selectSchedule/SelectSchedule'; - -function Test() { - return ( - - - - ); -} - -export default Test; - -const StyledTest = styled.div` - padding: 5rem; -`; diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 4712222f..1b8a6e46 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -1,17 +1,13 @@ -import { useState } from 'react'; +import { ReactNode, useState } from 'react'; import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; +import Timetable from 'components/timetableComponents/Timetable'; +import { DateType, TimetableStructure } from 'components/timetableComponents/types'; import { getAvailableTimes } from 'components/timetableComponents/utils'; -import SelectionSlots from './components/SelectionSlots'; -import Timetable from '../../components/timetableComponents/Timetable'; +import SelectionSlots from './selectTimeSlot/components/SelectionSlots'; -// api 연결 후 지울 것 -export type DateType = { - month: string | undefined; - day: string | undefined; - dayOfWeek: string | undefined; -}; +/***** api 연결 후 지울 것*****/ const availableDates: DateType[] = [ { @@ -47,10 +43,27 @@ const preferTimes: SlotType = { }; const timeSlots = getAvailableTimes(preferTimes); +/***** api 연결 후 지울 것*****/ + +interface SelectScheduleProps { + step: 'selectTimeSlot' | 'selectPriority'; +} -function SelectSchedule() { +type StepSlotsType = { + [key in SelectScheduleProps['step']]: (props: TimetableStructure) => ReactNode +}; + +function SelectSchedule({ step }: SelectScheduleProps) { const [startSlot, setStartSlot] = useState(undefined); const [selectedSlots, setSelectedSlots] = useState({}); + + const stepSlots: StepSlotsType = { + selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => ( + + ), + selectPriority: ({ date, timeSlots }: TimetableStructure) =>
priority
, + }; + return ( - {({ date, timeSlots }) => } + {stepSlots[step]} ); diff --git a/src/pages/selectSchedule/selectPriority/SelectPriority.tsx b/src/pages/selectSchedule/selectPriority/SelectPriority.tsx new file mode 100644 index 00000000..5cf58b7a --- /dev/null +++ b/src/pages/selectSchedule/selectPriority/SelectPriority.tsx @@ -0,0 +1,56 @@ +import { TimetableContext } from 'components/timetableComponents/context'; +import { getAvailableTimes } from 'components/timetableComponents/utils'; + +import Timetable from '../../../components/timetableComponents/Timetable'; + +// api 연결 후 지울 것 +export type DateType = { + month: string | undefined; + day: string | undefined; + dayOfWeek: string | undefined; +}; + +const availableDates: DateType[] = [ + { + month: '6', + day: '20', + dayOfWeek: '목', + }, + { + month: '6', + day: '21', + dayOfWeek: '금', + }, + { + month: '6', + day: '22', + dayOfWeek: '토', + }, + { + month: '6', + day: '23', + dayOfWeek: '일', + }, +]; + +export type SlotType = { + startTime: string; + endTime: string; +}; + +const preferTimes: SlotType = { + startTime: '06:00', + endTime: '24:00', +}; + +const timeSlots = getAvailableTimes(preferTimes); + +function SelectPriority() { + return ( + + {/* {({ date, timeSlots }) => } */} + + ); +} + +export default SelectPriority; diff --git a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx b/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx new file mode 100644 index 00000000..9b70f2d3 --- /dev/null +++ b/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx @@ -0,0 +1,36 @@ +import { useTimetableContext } from '../../../../components/timetableComponents/context'; +import Slot from '../../../../components/timetableComponents/parts/Slot'; + +interface SelectionSlotsProps { + date: string; + timeSlots: string[]; +} + +function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) { + const { selectedSlots } = useTimetableContext(); + const selectedSlotsPerDate = Object.entries(selectedSlots).filter( + ([, slot]) => slot.date === date, + ); + + return ( + <> + {timeSlots.map((timeSlot) => { + const belongingEntry = selectedSlotsPerDate.find( + ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot, + ); + + const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined; + + return ( + + ); + })} + + ); +} + +export default PrioritySlots; diff --git a/src/pages/selectSchedule/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx similarity index 83% rename from src/pages/selectSchedule/components/SelectionSlots.tsx rename to src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx index 3e23acaa..3d1e9948 100644 --- a/src/pages/selectSchedule/components/SelectionSlots.tsx +++ b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx @@ -1,5 +1,5 @@ -import { useTimetableContext } from '../../../components/timetableComponents/context'; -import Slot from '../../../components/timetableComponents/parts/Slot'; +import { useTimetableContext } from '../../../../components/timetableComponents/context'; +import Slot from '../../../../components/timetableComponents/parts/Slot'; interface SelectionSlotsProps { date: string; diff --git a/src/components/timetableComponents/hooks/useSlotSelection.ts b/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts similarity index 95% rename from src/components/timetableComponents/hooks/useSlotSelection.ts rename to src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts index 6b171a69..8ef879b0 100644 --- a/src/components/timetableComponents/hooks/useSlotSelection.ts +++ b/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts @@ -1,4 +1,4 @@ -import { useTimetableContext } from '../context' +import { useTimetableContext } from '../../../../components/timetableComponents/context' const useSlotSeletion = () => { const {startSlot, setStartSlot, selectedSlots, setSelectedSlots} = useTimetableContext(); From 89f2b92a9efeb62a5b950de3955dd572691adeed Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 18:16:37 +0900 Subject: [PATCH 03/40] =?UTF-8?q?refactor:=20Slot=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../timetableComponents/parts/Slot.tsx | 34 +++++-------------- .../components/SelectionSlots.tsx | 30 ++++++++++++++-- 2 files changed, 36 insertions(+), 28 deletions(-) diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx index 92578188..07dd00f1 100644 --- a/src/components/timetableComponents/parts/Slot.tsx +++ b/src/components/timetableComponents/parts/Slot.tsx @@ -1,41 +1,25 @@ -import useSlotSeletion from 'pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection'; import styled from 'styled-components'; interface SlotProps { - slot: string; - selectedEntryId?: number; + slotId: string; + slotStyle?: string; + onClick?: () => void; } -function Slot({ slot, selectedEntryId }: SlotProps) { - const { startSlot, onClickSlot } = useSlotSeletion(); +function Slot({ slotId, slotStyle, onClick }: SlotProps) { + const borderStyle = slotId.endsWith(':30') ? 'dashed' : 'solid'; - const borderStyle = slot.endsWith(':30') ? 'dashed' : 'solid'; - const isSelected = selectedEntryId !== undefined; - const isStartSlot = slot === startSlot; - - return ( - onClickSlot(slot, selectedEntryId)} - /> - ); + return ; } export default Slot; const DefaultSlot = styled.div<{ $borderStyle: string; - $isSelected: boolean; - $isStartSlot: boolean; + $slotStyle?: string; }>` - ${({ $isStartSlot, $borderStyle, theme }) => - $isStartSlot - ? `border: 1px dashed ${theme.colors.main5};` - : `border-top: 1px ${$borderStyle} ${theme.colors.grey7};`} - background-color: ${({ $isSelected, theme }) => - $isSelected ? theme.colors.main1 : 'transparent'}; + ${({ $slotStyle }) => $slotStyle}; + border-top-style: ${({ $borderStyle }) => $borderStyle}; cursor: pointer; width: 4.4rem; height: 2.2rem; diff --git a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx index 3d1e9948..23c57bef 100644 --- a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx +++ b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx @@ -1,5 +1,8 @@ +import { theme } from 'styles/theme'; + import { useTimetableContext } from '../../../../components/timetableComponents/context'; import Slot from '../../../../components/timetableComponents/parts/Slot'; +import useSlotSeletion from '../hooks/useSlotSelection'; interface SelectionSlotsProps { date: string; @@ -12,6 +15,23 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) { ([, slot]) => slot.date === date, ); + const { startSlot, onClickSlot } = useSlotSeletion(); + + const getTimeSlotStyle = (slotId: string, selectedEntryId?: number) => { + const isStartSlot = slotId === startSlot; + const isSelectedSlot = selectedEntryId !== undefined; + + return ` + ${ + isStartSlot + ? `border: 1px dashed ${theme.colors.main5}` + : `border-top: 1px solid ${theme.colors.grey7}` + }; + ${ + isSelectedSlot ? `background-color: ${theme.colors.main1}` : `background-color: transparent` + }; + `; + }; return ( <> {timeSlots.map((timeSlot) => { @@ -21,11 +41,15 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) { const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined; + const slotId = `${date}/${timeSlot}`; + + const slotStyle = getTimeSlotStyle(slotId, selectedEntryId); return ( onClickSlot(slotId, selectedEntryId)} /> ); })} From e67160c27e07348f884edb116538c610c82dbcb8 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 18:22:26 +0900 Subject: [PATCH 04/40] =?UTF-8?q?fix:=20Column=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=82=AD=EC=A0=9C=ED=95=98=EA=B3=A0=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A7=8C=20=EB=82=A8=EA=B9=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../timetableComponents/Timetable.tsx | 8 +++++++- .../timetableComponents/parts/Column.tsx | 20 ------------------- .../components/SelectionSlots.tsx | 6 ++---- 3 files changed, 9 insertions(+), 25 deletions(-) delete mode 100644 src/components/timetableComponents/parts/Column.tsx diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx index a9565fd7..c4896ea9 100644 --- a/src/components/timetableComponents/Timetable.tsx +++ b/src/components/timetableComponents/Timetable.tsx @@ -2,7 +2,6 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; -import Column from './parts/Column'; import DateTitle from './parts/ColumnTitle'; import SlotTitle from './parts/SlotTitle'; import { DateType, TimetableStructure } from './types'; @@ -52,6 +51,13 @@ const Table = styled.div` border-left: 1px solid ${({ theme }) => theme.colors.grey7}; `; +const Column = styled.div` + display: flex; + flex-direction: column; + + border-right: 1px solid ${({ theme }) => theme.colors.grey7}; +`; + const EmptyColumn = styled.div` display: flex; flex-direction: column; diff --git a/src/components/timetableComponents/parts/Column.tsx b/src/components/timetableComponents/parts/Column.tsx deleted file mode 100644 index 894d8da6..00000000 --- a/src/components/timetableComponents/parts/Column.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ReactNode } from 'react'; - -import styled from 'styled-components'; - -interface ColumnProps { - children: ReactNode; -} - -function Column({ children }: ColumnProps) { - return {children}; -} - -export default Column; - -const ColumnWrapper = styled.div` - display: flex; - flex-direction: column; - - border-right: 1px solid ${({ theme }) => theme.colors.grey7}; -`; diff --git a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx index 23c57bef..561a3c86 100644 --- a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx +++ b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx @@ -32,23 +32,21 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) { }; `; }; + return ( <> {timeSlots.map((timeSlot) => { const belongingEntry = selectedSlotsPerDate.find( ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot, ); - const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined; - const slotId = `${date}/${timeSlot}`; - const slotStyle = getTimeSlotStyle(slotId, selectedEntryId); return ( onClickSlot(slotId, selectedEntryId)} /> ); From 4d5f2e0b00e2fdb411d638690c2108dddd10bc4e Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 18:55:17 +0900 Subject: [PATCH 05/40] =?UTF-8?q?feat:=20=EC=9A=B0=EC=84=A0=EC=88=9C?= =?UTF-8?q?=EC=9C=84=20=EC=8B=9C=EA=B0=84=ED=91=9C=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=EB=A7=81=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/timetableComponents/context.ts | 1 + .../timetableComponents/parts/Slot.tsx | 3 +- src/pages/selectSchedule/SelectSchedule.tsx | 14 ++++++++-- .../components/PrioritySlots.tsx | 28 ++++++++++++++++--- .../components/SelectionSlots.tsx | 1 + .../selectTimeSlot/hooks/useSlotSelection.ts | 3 +- 6 files changed, 42 insertions(+), 8 deletions(-) diff --git a/src/components/timetableComponents/context.ts b/src/components/timetableComponents/context.ts index 94d14cf6..0d1dad0d 100644 --- a/src/components/timetableComponents/context.ts +++ b/src/components/timetableComponents/context.ts @@ -5,6 +5,7 @@ export type SelectedSlotType = { date: string; startSlot: string; endSlot: string; + priority: 0 | 1 | 2 | 3; }; }; diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx index 07dd00f1..d39aaf8c 100644 --- a/src/components/timetableComponents/parts/Slot.tsx +++ b/src/components/timetableComponents/parts/Slot.tsx @@ -18,9 +18,10 @@ const DefaultSlot = styled.div<{ $borderStyle: string; $slotStyle?: string; }>` + border-top: 1px solid ${({ theme }) => theme.colors.grey7}; ${({ $slotStyle }) => $slotStyle}; border-top-style: ${({ $borderStyle }) => $borderStyle}; - cursor: pointer; + width: 4.4rem; height: 2.2rem; `; diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 1b8a6e46..aed0016d 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -5,6 +5,7 @@ import Timetable from 'components/timetableComponents/Timetable'; import { DateType, TimetableStructure } from 'components/timetableComponents/types'; import { getAvailableTimes } from 'components/timetableComponents/utils'; +import PrioritySlots from './selectPriority/components/PrioritySlots'; import SelectionSlots from './selectTimeSlot/components/SelectionSlots'; /***** api 연결 후 지울 것*****/ @@ -55,13 +56,22 @@ type StepSlotsType = { function SelectSchedule({ step }: SelectScheduleProps) { const [startSlot, setStartSlot] = useState(undefined); - const [selectedSlots, setSelectedSlots] = useState({}); + const [selectedSlots, setSelectedSlots] = useState({ + 0: { + date: '6/20/목', + startSlot: '15:00', + endSlot: '20:00', + priority: 1, + }, + }); const stepSlots: StepSlotsType = { selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => ( ), - selectPriority: ({ date, timeSlots }: TimetableStructure) =>
priority
, + selectPriority: ({ date, timeSlots }: TimetableStructure) => ( + + ), }; return ( diff --git a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx b/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx index 9b70f2d3..43fc564e 100644 --- a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx +++ b/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx @@ -1,3 +1,5 @@ +import { theme } from 'styles/theme'; + import { useTimetableContext } from '../../../../components/timetableComponents/context'; import Slot from '../../../../components/timetableComponents/parts/Slot'; @@ -12,20 +14,38 @@ function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) { ([, slot]) => slot.date === date, ); + const getPrioritySlotStyle = (selectedEntryId?: number, priority?: number) => { + const isSelectedSlot = selectedEntryId !== undefined; + const slotColor = + priority === 1 + ? theme.colors.main1 + : priority === 2 + ? theme.colors.main2 + : priority === 3 + ? theme.colors.main3 + : theme.colors.grey6; + + return ` + ${isSelectedSlot ? `background-color:${slotColor}` : `background-color: transparent`} + `; + }; + return ( <> {timeSlots.map((timeSlot) => { const belongingEntry = selectedSlotsPerDate.find( ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot, ); - const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined; + const slotId = `${date}/${timeSlot}`; + const priority = + selectedEntryId !== undefined ? selectedSlots[selectedEntryId].priority : 0; return ( ); })} diff --git a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx index 561a3c86..93b0699f 100644 --- a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx +++ b/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx @@ -22,6 +22,7 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) { const isSelectedSlot = selectedEntryId !== undefined; return ` + cursor:pointer; ${ isStartSlot ? `border: 1px dashed ${theme.colors.main5}` diff --git a/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts b/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts index 8ef879b0..ee404e48 100644 --- a/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts +++ b/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts @@ -14,7 +14,8 @@ const useSlotSeletion = () => { const newSelectedSlot = { date:dateOfStartSlot, startSlot:startSlot?.substring(startSlot.lastIndexOf('/')+1), - endSlot:targetSlot.substring(targetSlot.lastIndexOf('/')+1) + endSlot:targetSlot.substring(targetSlot.lastIndexOf('/')+1), + priority:0, } const keys = Object.keys(selectedSlots).map(Number) From 500b1e52d97af41534aeead4bdbbb93d7ad7cc19 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 19:10:40 +0900 Subject: [PATCH 06/40] =?UTF-8?q?fix:=20select=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=A5=BC=20=ED=8D=BC=EB=84=90=20=ED=98=95=ED=83=9C?= =?UTF-8?q?=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 --- src/Router.tsx | 9 +-- src/pages/selectSchedule/SelectSchedule.tsx | 21 ++++--- .../{components => }/PrioritySlots.tsx | 5 +- .../selectPriority/SelectPriority.tsx | 56 ------------------- .../{components => }/SelectionSlots.tsx | 6 +- 5 files changed, 18 insertions(+), 79 deletions(-) rename src/pages/selectSchedule/selectPriority/{components => }/PrioritySlots.tsx (90%) delete mode 100644 src/pages/selectSchedule/selectPriority/SelectPriority.tsx rename src/pages/selectSchedule/selectTimeSlot/{components => }/SelectionSlots.tsx (87%) diff --git a/src/Router.tsx b/src/Router.tsx index 4bf814dd..2c3b3a27 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -20,14 +20,7 @@ const Router = () => { } /> {/* } /> } /> */} - } - /> - } - /> + } /> } diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index aed0016d..6733ebfe 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -5,8 +5,8 @@ import Timetable from 'components/timetableComponents/Timetable'; import { DateType, TimetableStructure } from 'components/timetableComponents/types'; import { getAvailableTimes } from 'components/timetableComponents/utils'; -import PrioritySlots from './selectPriority/components/PrioritySlots'; -import SelectionSlots from './selectTimeSlot/components/SelectionSlots'; +import PrioritySlots from './selectPriority/PrioritySlots'; +import SelectionSlots from './selectTimeSlot/SelectionSlots'; /***** api 연결 후 지울 것*****/ @@ -46,15 +46,12 @@ const preferTimes: SlotType = { const timeSlots = getAvailableTimes(preferTimes); /***** api 연결 후 지울 것*****/ -interface SelectScheduleProps { - step: 'selectTimeSlot' | 'selectPriority'; -} +type Step = 'selectTimeSlot' | 'selectPriority'; -type StepSlotsType = { - [key in SelectScheduleProps['step']]: (props: TimetableStructure) => ReactNode -}; +type StepSlotsType = { [key in Step]: (props: TimetableStructure) => ReactNode }; -function SelectSchedule({ step }: SelectScheduleProps) { +function SelectSchedule() { + const [step, setStep] = useState('selectPriority'); const [startSlot, setStartSlot] = useState(undefined); const [selectedSlots, setSelectedSlots] = useState({ 0: { @@ -86,6 +83,12 @@ function SelectSchedule({ step }: SelectScheduleProps) { {stepSlots[step]} + + ); } diff --git a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx b/src/pages/selectSchedule/selectPriority/PrioritySlots.tsx similarity index 90% rename from src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx rename to src/pages/selectSchedule/selectPriority/PrioritySlots.tsx index 43fc564e..d9f59935 100644 --- a/src/pages/selectSchedule/selectPriority/components/PrioritySlots.tsx +++ b/src/pages/selectSchedule/selectPriority/PrioritySlots.tsx @@ -1,7 +1,6 @@ +import Slot from '../../../components/timetableComponents/parts/Slot'; import { theme } from 'styles/theme'; - -import { useTimetableContext } from '../../../../components/timetableComponents/context'; -import Slot from '../../../../components/timetableComponents/parts/Slot'; +import { useTimetableContext } from '../../../components/timetableComponents/context'; interface SelectionSlotsProps { date: string; diff --git a/src/pages/selectSchedule/selectPriority/SelectPriority.tsx b/src/pages/selectSchedule/selectPriority/SelectPriority.tsx deleted file mode 100644 index 5cf58b7a..00000000 --- a/src/pages/selectSchedule/selectPriority/SelectPriority.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { TimetableContext } from 'components/timetableComponents/context'; -import { getAvailableTimes } from 'components/timetableComponents/utils'; - -import Timetable from '../../../components/timetableComponents/Timetable'; - -// api 연결 후 지울 것 -export type DateType = { - month: string | undefined; - day: string | undefined; - dayOfWeek: string | undefined; -}; - -const availableDates: DateType[] = [ - { - month: '6', - day: '20', - dayOfWeek: '목', - }, - { - month: '6', - day: '21', - dayOfWeek: '금', - }, - { - month: '6', - day: '22', - dayOfWeek: '토', - }, - { - month: '6', - day: '23', - dayOfWeek: '일', - }, -]; - -export type SlotType = { - startTime: string; - endTime: string; -}; - -const preferTimes: SlotType = { - startTime: '06:00', - endTime: '24:00', -}; - -const timeSlots = getAvailableTimes(preferTimes); - -function SelectPriority() { - return ( - - {/* {({ date, timeSlots }) => } */} - - ); -} - -export default SelectPriority; diff --git a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx b/src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx similarity index 87% rename from src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx rename to src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx index 93b0699f..89b0cfdd 100644 --- a/src/pages/selectSchedule/selectTimeSlot/components/SelectionSlots.tsx +++ b/src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx @@ -1,8 +1,8 @@ import { theme } from 'styles/theme'; -import { useTimetableContext } from '../../../../components/timetableComponents/context'; -import Slot from '../../../../components/timetableComponents/parts/Slot'; -import useSlotSeletion from '../hooks/useSlotSelection'; +import useSlotSeletion from './hooks/useSlotSelection'; +import { useTimetableContext } from '../../../components/timetableComponents/context'; +import Slot from '../../../components/timetableComponents/parts/Slot'; interface SelectionSlotsProps { date: string; From 838eed3460905658060927565f3cf4d8ff504a7c Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 21:49:31 +0900 Subject: [PATCH 07/40] =?UTF-8?q?feat:=20Header=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/moleculesComponents/Header.tsx | 47 ++++---- .../timetableComponents/parts/Slot.tsx | 2 +- src/components/timetableComponents/utils.ts | 5 +- .../components/SteppingBtnSection.tsx | 2 +- src/pages/selectSchedule/SelectSchedule.tsx | 103 +++--------------- .../components/SelectScheduleTable.tsx | 92 ++++++++++++++++ .../selectPriority/PrioritySlots.tsx | 5 +- .../selectTimeSlot/SelectionSlots.tsx | 9 +- .../selectTimeSlot/hooks/useSlotSelection.ts | 2 +- src/pages/selectSchedule/types.ts | 1 + src/pages/selectSchedule/utils.ts | 37 +++++++ 11 files changed, 187 insertions(+), 118 deletions(-) create mode 100644 src/pages/selectSchedule/components/SelectScheduleTable.tsx rename src/pages/selectSchedule/{ => components}/selectPriority/PrioritySlots.tsx (90%) rename src/pages/selectSchedule/{ => components}/selectTimeSlot/SelectionSlots.tsx (83%) rename src/pages/selectSchedule/{ => components}/selectTimeSlot/hooks/useSlotSelection.ts (94%) create mode 100644 src/pages/selectSchedule/types.ts create mode 100644 src/pages/selectSchedule/utils.ts diff --git a/src/components/moleculesComponents/Header.tsx b/src/components/moleculesComponents/Header.tsx index 10528811..0fbfa93e 100644 --- a/src/components/moleculesComponents/Header.tsx +++ b/src/components/moleculesComponents/Header.tsx @@ -1,30 +1,26 @@ -import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon'; import { Dispatch, SetStateAction, useState } from 'react'; -import CopyToClipboard from 'react-copy-to-clipboard'; -import Navigation from './Navigation'; import Text from 'components/atomComponents/Text'; -import { notify } from 'utils/toast/copyLink'; +import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon'; +import { Step as SelectScheduleStep } from 'pages/selectSchedule/types'; +import CopyToClipboard from 'react-copy-to-clipboard'; +import { useParams } from 'react-router'; +import { useNavigate } from 'react-router-dom'; import styled from 'styled-components/macro'; import { theme } from 'styles/theme'; -import { useNavigate } from 'react-router-dom'; -import { useParams } from 'react-router'; +import { notify } from 'utils/toast/copyLink'; + +import Navigation from './Navigation'; + interface HeaderProps { position: string; - setStep?: Dispatch>; + setFunnelStep?: Dispatch>; + setSelectScheduleStep?: Dispatch>; } -function Header({ position, setStep }: HeaderProps) { +function Header({ position, setFunnelStep, setSelectScheduleStep }: HeaderProps) { const navigationOptions = [ - // { - // title: '공지사항', - // url: '', - // }, - // { - // title: 'ASAP family', - // url: '', - // }, { title: '약속 생성하기', url: '/meet/create', @@ -38,8 +34,8 @@ function Header({ position, setStep }: HeaderProps) { const navigate = useNavigate(); const [isNaviOpen, setIsNaviOpen] = useState(false); const backToFunnel = () => { - if (setStep !== undefined) { - setStep((prev) => { + if (setFunnelStep !== undefined) { + setFunnelStep((prev) => { if (prev === 0) { navigate('/'); return prev; @@ -48,6 +44,19 @@ function Header({ position, setStep }: HeaderProps) { }); } }; + const backToSelectSchedule = () =>{ + if (setSelectScheduleStep !== undefined){ + setSelectScheduleStep((prev:SelectScheduleStep)=>{ + if (prev === 'selectTimeSlot'){ + window.history.back() + return prev; + } else if (prev === 'selectPriority'){ + return 'selectTimeSlot' + } + return prev; + }) + } + } const { meetingId } = useParams(); return ( @@ -78,7 +87,7 @@ function Header({ position, setStep }: HeaderProps) { ) : position === 'schedule' ? ( - window.history.back()}> + diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx index d39aaf8c..e1706e5a 100644 --- a/src/components/timetableComponents/parts/Slot.tsx +++ b/src/components/timetableComponents/parts/Slot.tsx @@ -19,8 +19,8 @@ const DefaultSlot = styled.div<{ $slotStyle?: string; }>` border-top: 1px solid ${({ theme }) => theme.colors.grey7}; - ${({ $slotStyle }) => $slotStyle}; border-top-style: ${({ $borderStyle }) => $borderStyle}; + ${({ $slotStyle }) => $slotStyle}; width: 4.4rem; height: 2.2rem; diff --git a/src/components/timetableComponents/utils.ts b/src/components/timetableComponents/utils.ts index 76cab6a5..c27449cd 100644 --- a/src/components/timetableComponents/utils.ts +++ b/src/components/timetableComponents/utils.ts @@ -1,8 +1,7 @@ -import { SlotType } from './Timetable'; - +import { SlotType } from 'pages/selectSchedule/components/SelectScheduleTable'; /** * - * @description 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수입니다. + * @desc 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수입니다. */ export function getAvailableTimes(times: SlotType) { diff --git a/src/pages/SteppingStone/components/SteppingBtnSection.tsx b/src/pages/SteppingStone/components/SteppingBtnSection.tsx index c93d0dae..2107e84e 100644 --- a/src/pages/SteppingStone/components/SteppingBtnSection.tsx +++ b/src/pages/SteppingStone/components/SteppingBtnSection.tsx @@ -46,7 +46,7 @@ function SteppingBtnSection({ steppingType }: SteppingProps) { - + diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 6733ebfe..5e7972df 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -1,96 +1,27 @@ -import { ReactNode, useState } from 'react'; +import { useState } from 'react'; -import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; -import Timetable from 'components/timetableComponents/Timetable'; -import { DateType, TimetableStructure } from 'components/timetableComponents/types'; -import { getAvailableTimes } from 'components/timetableComponents/utils'; +import Header from 'components/moleculesComponents/Header'; +import styled from 'styled-components'; -import PrioritySlots from './selectPriority/PrioritySlots'; -import SelectionSlots from './selectTimeSlot/SelectionSlots'; - -/***** api 연결 후 지울 것*****/ - -const availableDates: DateType[] = [ - { - month: '6', - day: '20', - dayOfWeek: '목', - }, - { - month: '6', - day: '21', - dayOfWeek: '금', - }, - { - month: '6', - day: '22', - dayOfWeek: '토', - }, - { - month: '6', - day: '23', - dayOfWeek: '일', - }, -]; - -export type SlotType = { - startTime: string; - endTime: string; -}; - -const preferTimes: SlotType = { - startTime: '06:00', - endTime: '24:00', -}; - -const timeSlots = getAvailableTimes(preferTimes); -/***** api 연결 후 지울 것*****/ - -type Step = 'selectTimeSlot' | 'selectPriority'; - -type StepSlotsType = { [key in Step]: (props: TimetableStructure) => ReactNode }; +import SelectScheduleTable from './components/SelectScheduleTable'; +import { Step } from './types'; function SelectSchedule() { - const [step, setStep] = useState('selectPriority'); - const [startSlot, setStartSlot] = useState(undefined); - const [selectedSlots, setSelectedSlots] = useState({ - 0: { - date: '6/20/목', - startSlot: '15:00', - endSlot: '20:00', - priority: 1, - }, - }); - - const stepSlots: StepSlotsType = { - selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => ( - - ), - selectPriority: ({ date, timeSlots }: TimetableStructure) => ( - - ), - }; + const [step, setStep] = useState('selectTimeSlot'); return ( - - - {stepSlots[step]} - - - - + +
+ + ); } export default SelectSchedule; + +const SelectScheduleWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +`; diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx new file mode 100644 index 00000000..a71a9e1a --- /dev/null +++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx @@ -0,0 +1,92 @@ +import { ReactNode, useState } from 'react'; + +import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; +import Timetable from 'components/timetableComponents/Timetable'; +import { DateType, TimetableStructure } from 'components/timetableComponents/types'; +import { getAvailableTimes } from 'components/timetableComponents/utils'; + +import PrioritySlots from './selectPriority/PrioritySlots'; +import SelectionSlots from './selectTimeSlot/SelectionSlots'; +import { Step } from '../types'; + +/***** api 연결 후 지울 것*****/ + +const availableDates: DateType[] = [ + { + month: '6', + day: '20', + dayOfWeek: '목', + }, + { + month: '6', + day: '21', + dayOfWeek: '금', + }, + { + month: '6', + day: '22', + dayOfWeek: '토', + }, + { + month: '6', + day: '23', + dayOfWeek: '일', + }, +]; + +export type SlotType = { + startTime: string; + endTime: string; +}; + +const preferTimes: SlotType = { + startTime: '06:00', + endTime: '24:00', +}; + +const timeSlots = getAvailableTimes(preferTimes); +/***** api 연결 후 지울 것*****/ + +type StepSlotsType = { [key in Step]: (props: TimetableStructure) => ReactNode }; + +interface SelectScheduleTableProps { + step: Step; +} + +function SelectScheduleTable({ step }: SelectScheduleTableProps) { + const [startSlot, setStartSlot] = useState(undefined); + const [selectedSlots, setSelectedSlots] = useState({ + 0: { + date: '6/20/목', + startSlot: '15:00', + endSlot: '20:00', + priority: 1, + }, + }); + + const stepSlots: StepSlotsType = { + selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => ( + + ), + selectPriority: ({ date, timeSlots }: TimetableStructure) => ( + + ), + }; + + return ( + + + {stepSlots[step]} + + + ); +} + +export default SelectScheduleTable; diff --git a/src/pages/selectSchedule/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx similarity index 90% rename from src/pages/selectSchedule/selectPriority/PrioritySlots.tsx rename to src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx index d9f59935..43fc564e 100644 --- a/src/pages/selectSchedule/selectPriority/PrioritySlots.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx @@ -1,6 +1,7 @@ -import Slot from '../../../components/timetableComponents/parts/Slot'; import { theme } from 'styles/theme'; -import { useTimetableContext } from '../../../components/timetableComponents/context'; + +import { useTimetableContext } from '../../../../components/timetableComponents/context'; +import Slot from '../../../../components/timetableComponents/parts/Slot'; interface SelectionSlotsProps { date: string; diff --git a/src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx similarity index 83% rename from src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx rename to src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx index 89b0cfdd..3f3eb67a 100644 --- a/src/pages/selectSchedule/selectTimeSlot/SelectionSlots.tsx +++ b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx @@ -1,8 +1,8 @@ import { theme } from 'styles/theme'; import useSlotSeletion from './hooks/useSlotSelection'; -import { useTimetableContext } from '../../../components/timetableComponents/context'; -import Slot from '../../../components/timetableComponents/parts/Slot'; +import { useTimetableContext } from '../../../../components/timetableComponents/context'; +import Slot from '../../../../components/timetableComponents/parts/Slot'; interface SelectionSlotsProps { date: string; @@ -24,9 +24,8 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) { return ` cursor:pointer; ${ - isStartSlot - ? `border: 1px dashed ${theme.colors.main5}` - : `border-top: 1px solid ${theme.colors.grey7}` + isStartSlot && `border: 1px dashed ${theme.colors.main5}` + // : `border-top: 1px solid ${theme.colors.grey7}` }; ${ isSelectedSlot ? `background-color: ${theme.colors.main1}` : `background-color: transparent` diff --git a/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts similarity index 94% rename from src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts rename to src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts index ee404e48..b4810c9e 100644 --- a/src/pages/selectSchedule/selectTimeSlot/hooks/useSlotSelection.ts +++ b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts @@ -1,4 +1,4 @@ -import { useTimetableContext } from '../../../../components/timetableComponents/context' +import { useTimetableContext } from '../../../../../components/timetableComponents/context' const useSlotSeletion = () => { const {startSlot, setStartSlot, selectedSlots, setSelectedSlots} = useTimetableContext(); diff --git a/src/pages/selectSchedule/types.ts b/src/pages/selectSchedule/types.ts new file mode 100644 index 00000000..2f263aa5 --- /dev/null +++ b/src/pages/selectSchedule/types.ts @@ -0,0 +1 @@ +export type Step = 'selectTimeSlot' | 'selectPriority'; diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts new file mode 100644 index 00000000..b54da7cf --- /dev/null +++ b/src/pages/selectSchedule/utils.ts @@ -0,0 +1,37 @@ +/** + * + * @desc 영어로 표현된 회의 진행 시간을 한글로 변환하는 함수 + */ +export const formatDuration = (duration: string): string => { + switch (duration) { + case 'HALF': + return '30분'; + case 'HOUR': + return '1시간'; + case 'HOUR_HALF': + return '1시간 30분'; + case 'TWO_HOUR': + return '2시간'; + case 'TWO_HOUR_HALF': + return '2시간 30분'; + case 'THREE_HOUR': + return '3시간'; + default: + return 'UNDEFINED'; + } +}; + +/** + * + * @desc 영어로 표현된 회의 장소를 한글로 변환하는 함수 + */ +export const formatPlace = (place: string) => { + switch (place) { + case 'ONLINE': + return '온라인'; + case 'OFFLINE': + return '오프라인'; + case 'UNDEFINED': + return undefined; + } +}; From 2d39522b1c6d15fd6e4f71b5730ffebbaee84f34 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 22:26:30 +0900 Subject: [PATCH 08/40] =?UTF-8?q?feat:=20=EA=B0=80=EB=8A=A5=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=20=EC=9E=85=EB=A0=A5=20=EC=84=A4=EB=AA=85=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../timetableComponents/Timetable.tsx | 4 +- src/components/timetableComponents/types.ts | 15 +++- src/pages/selectSchedule/SelectSchedule.tsx | 47 ++++++++++- .../selectSchedule/components/Description.tsx | 84 +++++++++++++++++++ .../components/SelectScheduleTable.tsx | 55 ++---------- src/pages/selectSchedule/types.ts | 3 + 6 files changed, 153 insertions(+), 55 deletions(-) create mode 100644 src/pages/selectSchedule/components/Description.tsx diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx index c4896ea9..c0f634c6 100644 --- a/src/components/timetableComponents/Timetable.tsx +++ b/src/components/timetableComponents/Timetable.tsx @@ -4,12 +4,12 @@ import styled from 'styled-components'; import DateTitle from './parts/ColumnTitle'; import SlotTitle from './parts/SlotTitle'; -import { DateType, TimetableStructure } from './types'; +import { ColumnStructure, DateType } from './types'; interface TimetableProps { timeSlots: string[]; availableDates: DateType[]; - children: (props: TimetableStructure) => ReactNode; + children: (props: ColumnStructure) => ReactNode; } function Timetable({ timeSlots, availableDates, children }: TimetableProps) { diff --git a/src/components/timetableComponents/types.ts b/src/components/timetableComponents/types.ts index f323eb22..a3242267 100644 --- a/src/components/timetableComponents/types.ts +++ b/src/components/timetableComponents/types.ts @@ -1,10 +1,17 @@ -export interface TimetableStructure { - date: string; +interface BaseStructure { timeSlots: string[]; } -export type DateType = { +export interface TimetableStructure extends BaseStructure { + availableDates: DateType[]; +} + +export interface ColumnStructure extends BaseStructure { + date: string; +} + +export interface DateType { month: string | undefined; day: string | undefined; dayOfWeek: string | undefined; -}; +} diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 5e7972df..24a97109 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -1,18 +1,63 @@ import { useState } from 'react'; import Header from 'components/moleculesComponents/Header'; +import { DateType } from 'components/timetableComponents/types'; +import { getAvailableTimes } from 'components/timetableComponents/utils'; import styled from 'styled-components'; +import Description from './components/Description'; import SelectScheduleTable from './components/SelectScheduleTable'; import { Step } from './types'; +/***** api 연결 후 지울 것*****/ + +const availableDates: DateType[] = [ + { + month: '6', + day: '20', + dayOfWeek: '목', + }, + { + month: '6', + day: '21', + dayOfWeek: '금', + }, + { + month: '6', + day: '22', + dayOfWeek: '토', + }, + { + month: '6', + day: '23', + dayOfWeek: '일', + }, +]; + +export type SlotType = { + startTime: string; + endTime: string; +}; + +const preferTimes: SlotType = { + startTime: '06:00', + endTime: '24:00', +}; + +const timeSlots = getAvailableTimes(preferTimes); +const duration = 'HALF'; +const place = 'ONLINE'; +const placeDetail = '구글미트'; +/***** api 연결 후 지울 것*****/ + function SelectSchedule() { const [step, setStep] = useState('selectTimeSlot'); return (
- + + ); } diff --git a/src/pages/selectSchedule/components/Description.tsx b/src/pages/selectSchedule/components/Description.tsx new file mode 100644 index 00000000..63c434d7 --- /dev/null +++ b/src/pages/selectSchedule/components/Description.tsx @@ -0,0 +1,84 @@ +import { formatDuration, formatPlace } from '../utils'; + +import Text from 'components/atomComponents/Text'; +import styled from 'styled-components'; +import { theme } from 'styles/theme'; + +interface DescriptionProps { + duration: string; + place: string; + placeDetail: string; +} + +function Description({ duration: durationOg, place: placeOg, placeDetail }: DescriptionProps) { + const duration = formatDuration(durationOg); + const place = formatPlace(placeOg); + return ( + + + {place ? ( + <> + + + 회의는  + + + {duration}  + + + {'동안'} + + + + + {place} + + {placeDetail && ( + + {`(${placeDetail})`} + + )} + + {'으로 진행될 예정이에요!'} + + + + ) : ( + + + 회의는  + + + {duration}  + + + {'동안 진행될 예정이에요!'} + + + )} + + + ); +} + +export default Description; + +const DescriptionWrapper = styled.div` + display: flex; + position: relative; + margin-top: 2rem; +`; + +const Texts = styled.div` + display: flex; + flex-direction: column; + border-radius: 0.8rem; + background-color: ${theme.colors.grey9}; + padding: 1.5rem 2.4rem; + width: 33.5rem; +`; +const OneLine = styled.div` + display: flex; + flex-wrap: wrap; + width: 100%; +`; diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx index a71a9e1a..4ddc2460 100644 --- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx +++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx @@ -1,59 +1,18 @@ -import { ReactNode, useState } from 'react'; +import { useState } from 'react'; import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; import Timetable from 'components/timetableComponents/Timetable'; -import { DateType, TimetableStructure } from 'components/timetableComponents/types'; -import { getAvailableTimes } from 'components/timetableComponents/utils'; +import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types'; import PrioritySlots from './selectPriority/PrioritySlots'; import SelectionSlots from './selectTimeSlot/SelectionSlots'; -import { Step } from '../types'; +import { Step, StepSlotsType } from '../types'; -/***** api 연결 후 지울 것*****/ - -const availableDates: DateType[] = [ - { - month: '6', - day: '20', - dayOfWeek: '목', - }, - { - month: '6', - day: '21', - dayOfWeek: '금', - }, - { - month: '6', - day: '22', - dayOfWeek: '토', - }, - { - month: '6', - day: '23', - dayOfWeek: '일', - }, -]; - -export type SlotType = { - startTime: string; - endTime: string; -}; - -const preferTimes: SlotType = { - startTime: '06:00', - endTime: '24:00', -}; - -const timeSlots = getAvailableTimes(preferTimes); -/***** api 연결 후 지울 것*****/ - -type StepSlotsType = { [key in Step]: (props: TimetableStructure) => ReactNode }; - -interface SelectScheduleTableProps { +interface SelectScheduleTableProps extends TimetableStructure { step: Step; } -function SelectScheduleTable({ step }: SelectScheduleTableProps) { +function SelectScheduleTable({ step, timeSlots, availableDates }: SelectScheduleTableProps) { const [startSlot, setStartSlot] = useState(undefined); const [selectedSlots, setSelectedSlots] = useState({ 0: { @@ -65,10 +24,10 @@ function SelectScheduleTable({ step }: SelectScheduleTableProps) { }); const stepSlots: StepSlotsType = { - selectTimeSlot: ({ date, timeSlots }: TimetableStructure) => ( + selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => ( ), - selectPriority: ({ date, timeSlots }: TimetableStructure) => ( + selectPriority: ({ date, timeSlots }: ColumnStructure) => ( ), }; diff --git a/src/pages/selectSchedule/types.ts b/src/pages/selectSchedule/types.ts index 2f263aa5..de4c32c8 100644 --- a/src/pages/selectSchedule/types.ts +++ b/src/pages/selectSchedule/types.ts @@ -1 +1,4 @@ +import { ColumnStructure } from 'components/timetableComponents/types'; + export type Step = 'selectTimeSlot' | 'selectPriority'; +export type StepSlotsType = { [key in Step]: (props: ColumnStructure) => ReactNode }; From 02324c969912e57197849e4e2a8ec79f3586c364 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 22:49:06 +0900 Subject: [PATCH 09/40] =?UTF-8?q?feat:=20=EA=B0=80=EB=8A=A5=EC=8B=9C?= =?UTF-8?q?=EA=B0=84,=20=EC=9A=B0=EC=84=A0=EC=88=9C=EC=9C=84=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=EC=97=90=20=ED=83=80=EC=9D=B4=ED=8B=80=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 --- .../moleculesComponents/TitleComponents.tsx | 21 ++++++---- src/pages/createMeeting/CreateMeeting.tsx | 7 ++-- src/pages/selectSchedule/SelectSchedule.tsx | 42 ++++++++++++++----- .../selectSchedule/components/Description.tsx | 4 +- src/pages/selectSchedule/components/Title.tsx | 11 +++++ 5 files changed, 61 insertions(+), 24 deletions(-) create mode 100644 src/pages/selectSchedule/components/Title.tsx diff --git a/src/components/moleculesComponents/TitleComponents.tsx b/src/components/moleculesComponents/TitleComponents.tsx index 4a532931..66ff3363 100644 --- a/src/components/moleculesComponents/TitleComponents.tsx +++ b/src/components/moleculesComponents/TitleComponents.tsx @@ -4,30 +4,35 @@ import { theme } from 'styles/theme'; interface TextProps { main: string; - sub: string; + sub?: string; + padding?: string; } -function TitleComponents({ main, sub }: TextProps) { +const defaultPadding = `4.4rem 0 4.2rem 0`; +function TitleComponents({ main, sub, padding = defaultPadding }: TextProps) { return ( - + {main} - - {sub} - + {sub && ( + + {sub} + + )} ); } export default TitleComponents; -const TitleWrapper = styled.div` +const TitleWrapper = styled.div<{ $padding: string }>` display: flex; position: relative; flex-direction: column; gap: 1.2rem; - padding: 4.4rem 0 4.2rem 0; + padding: ${({ $padding }) => $padding}; + width: 100%; `; diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx index 5759f390..bcde5d43 100644 --- a/src/pages/createMeeting/CreateMeeting.tsx +++ b/src/pages/createMeeting/CreateMeeting.tsx @@ -1,12 +1,11 @@ import { useEffect, useState } from 'react'; import Header from 'components/moleculesComponents/Header'; +import { MeetingInfo } from './types/useFunnelInterface'; import ReturnBodyComponent from 'pages/createMeeting/components/ReturnBodyComponent'; import ReturnTitleComponent from 'pages/createMeeting/components/ReturnTitleComponent'; -import styled from 'styled-components/macro'; - import { funnelStep } from './data/meetingInfoData'; -import { MeetingInfo } from './types/useFunnelInterface'; +import styled from 'styled-components/macro'; const initialMeetingInfo: MeetingInfo = { title: '', @@ -27,7 +26,7 @@ function CreateMeeting() { return ( <> -
+
('selectTimeSlot'); + const [step, setStep] = useState('selectPriority'); + + interface TitlesType { + [key: string]: { + main: string; + sub?: string; + }; + } + const titles: TitlesType = { + selectTimeSlot: { + main: '가능한 시간대를 등록해주세요', + sub: '시작시간과 종료시간을 터치하여 블럭을 생성해주세요', + }, + selectPriority: { + main: '우선순위를 입력해주세요', + }, + }; return (
- + {step === 'selectTimeSlot' && ( + + )} + ); diff --git a/src/pages/selectSchedule/components/Description.tsx b/src/pages/selectSchedule/components/Description.tsx index 63c434d7..e87e25fe 100644 --- a/src/pages/selectSchedule/components/Description.tsx +++ b/src/pages/selectSchedule/components/Description.tsx @@ -7,7 +7,7 @@ import { theme } from 'styles/theme'; interface DescriptionProps { duration: string; place: string; - placeDetail: string; + placeDetail?: string; } function Description({ duration: durationOg, place: placeOg, placeDetail }: DescriptionProps) { @@ -66,7 +66,7 @@ export default Description; const DescriptionWrapper = styled.div` display: flex; position: relative; - margin-top: 2rem; + margin: 2rem 0; `; const Texts = styled.div` diff --git a/src/pages/selectSchedule/components/Title.tsx b/src/pages/selectSchedule/components/Title.tsx new file mode 100644 index 00000000..ee954399 --- /dev/null +++ b/src/pages/selectSchedule/components/Title.tsx @@ -0,0 +1,11 @@ +import TitleComponents from 'components/moleculesComponents/TitleComponents'; + +interface TitleProps { + mainText: string; + subText: string; +} +function Title({ mainText, subText }: TitleProps) { + return ; +} + +export default Title; From d09d4e817b2ad93c8d3afc8f56752b443503e66c Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sat, 22 Jun 2024 23:47:22 +0900 Subject: [PATCH 10/40] =?UTF-8?q?feat:=20=EB=A6=AC=ED=8C=A9=ED=86=A0?= =?UTF-8?q?=EB=A7=81=ED=95=9C=20=EC=8B=9C=EA=B0=84=ED=91=9C=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=9A=B0=EC=84=A0?= =?UTF-8?q?=EC=88=9C=EC=9C=84=20=EC=84=A0=ED=83=9D=20=EB=93=9C=EB=A1=AD?= =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/timetableComponents/context.ts | 17 +- .../components/SelectScheduleTable.tsx | 25 +- .../selectPriority/PriorityDropdown.tsx | 258 ++++++++++++++++++ .../selectPriority/PrioritySlots.tsx | 3 +- 4 files changed, 287 insertions(+), 16 deletions(-) create mode 100644 src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx diff --git a/src/components/timetableComponents/context.ts b/src/components/timetableComponents/context.ts index 0d1dad0d..d6eb8a77 100644 --- a/src/components/timetableComponents/context.ts +++ b/src/components/timetableComponents/context.ts @@ -1,13 +1,14 @@ import { createContext, useContext } from 'react'; -export type SelectedSlotType = { - [key: number]: { - date: string; - startSlot: string; - endSlot: string; - priority: 0 | 1 | 2 | 3; - }; -}; +export interface SlotInfoType { + date: string; + startSlot: string; + endSlot: string; + priority: 0 | 1 | 2 | 3; +} +export interface SelectedSlotType { + [key: number]: SlotInfoType; +} type TimetableContextType = { startSlot?: string; diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx index 4ddc2460..aaf55f87 100644 --- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx +++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx @@ -1,12 +1,12 @@ -import { useState } from 'react'; - -import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; -import Timetable from 'components/timetableComponents/Timetable'; import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types'; +import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; +import { Step, StepSlotsType } from '../types'; +import PriorityDropdown from './selectPriority/PriorityDropdown'; import PrioritySlots from './selectPriority/PrioritySlots'; import SelectionSlots from './selectTimeSlot/SelectionSlots'; -import { Step, StepSlotsType } from '../types'; +import Timetable from 'components/timetableComponents/Timetable'; +import { useState } from 'react'; interface SelectScheduleTableProps extends TimetableStructure { step: Step; @@ -19,7 +19,19 @@ function SelectScheduleTable({ step, timeSlots, availableDates }: SelectSchedule date: '6/20/목', startSlot: '15:00', endSlot: '20:00', - priority: 1, + priority: 0, + }, + 1: { + date: '6/20/목', + startSlot: '21:00', + endSlot: '22:30', + priority: 0, + }, + 3: { + date: '6/21/금', + startSlot: '15:00', + endSlot: '20:00', + priority: 0, }, }); @@ -44,6 +56,7 @@ function SelectScheduleTable({ step, timeSlots, availableDates }: SelectSchedule {stepSlots[step]} + {step === 'selectPriority' && } ); } diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx new file mode 100644 index 00000000..dc7f6b3e --- /dev/null +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -0,0 +1,258 @@ +import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon'; +import { + SelectedSlotType, + SlotInfoType, + useTimetableContext, +} from 'components/timetableComponents/context'; + +import Text from 'components/atomComponents/Text'; +import styled from 'styled-components/macro'; +import { theme } from 'styles/theme'; +import { useState } from 'react'; + +/** + * + * @desc 기존의 우선순위 Dropdown 컴포넌트를 그대로 가져와서, 따로 리팩토링 없이 새로운 시간표 컴포넌트에 맞게 적용되도록 수정한 컴포넌트입니다. + */ + +function PriorityDropdown() { + const { selectedSlots, setSelectedSlots } = useTimetableContext(); + console.log(selectedSlots); + const [timeSelect, setTimeSelect] = useState([false, false, false]); + const [input_, setInput] = useState(['', '', '']); + const handleDropdown = (i: number) => { + if (!timeSelect[i]) { + setTimeSelect((prevState) => { + const updatedTimeSelect = prevState.map((value, index) => index === i); + return updatedTimeSelect; + }); + } else { + setTimeSelect((prevState) => { + const updatedTimeSelect = [...prevState]; + updatedTimeSelect[i] = !updatedTimeSelect[i]; + return updatedTimeSelect; + }); + } + }; + + const handlePriority = (i: number, item: SlotInfoType, itemKey: string) => { + let temp: 0 | 1 | 2 | 3 = 0; + switch (i) { + case 0: + temp = 1; + break; + case 1: + temp = 2; + break; + case 2: + temp = 3; + break; + + default: + temp = 0; + break; + } + setSelectedSlots( + (prev: SlotInfoType): SlotInfoType => { + const updatedScheduleList = { ...prev }; + for (const key in updatedScheduleList) { + if (selectedSlots[parseInt(key)].priority === temp) { + return { ...selectedSlots[parseInt(key)], priority: 0 }; + } + break; + } + return updatedScheduleList; + }, + ); + + setSelectedSlots((prev: SelectedSlotType) => { + const updatedSelectedSlots = Object.entries(prev).map(([key, value]) => { + if (value.priority === temp) { + return { ...value, prority: 0 }; + } + return value; + }); + return updatedSelectedSlots; + }); + + setSelectedSlots((prev: SelectedSlotType) => { + const updatedSelectedSlots = Object.entries(prev).map(([key, value]) => { + if (key === itemKey) { + return { ...value, priority: temp }; + } + return value; + }); + return updatedSelectedSlots; + }); + + setInput((prev) => { + const updatedInput = [...prev]; + + if (i === 0) { + updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`; + } else if (i === 1) { + updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`; + } else if (i === 2) { + updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`; + } else { + updatedInput[i] = 'error'; + } + return updatedInput; + }); + handleDropdown(i); + }; + + return ( + + {Object.entries(selectedSlots).map(([key, _], i) => { + return i < 3 ? ( + + + + + {`${i + 1}`}순위 + + + {i === 0 ? ( + + ) : i === 1 ? ( + + ) : i === 2 ? ( + + ) : ( +
+ )} + + + handleDropdown(i)} + value={input_[i]} + /> + + {timeSelect[i] ? ( + + {' '} + + ) : ( + + + + )} + + {timeSelect[i] && ( + + {Object.entries(selectedSlots).map( + ([key, value]) => + !value.priority && ( + handlePriority(i, value, key)}> + + {value.date} {value.startSlot}~{value.endSlot} + + + ), + )} + + )} + + + ) : ( +
+ ); + })} + + ); +} +const PriorityDropdownWrapper = styled.div` + display: flex; + + flex-direction: column; + gap: 1.2rem; + justify-content: start; + + margin-top: 3rem; + margin-bottom: 7.5rem; + width: 100%; + height: 18rem; +`; + +const PriorityDropdownSection = styled.div` + display: flex; + gap: 1.3rem; + justify-content: space-between; + width: 100%; + height: 5.2rem; +`; +const CircleWrapper = styled.div` + position: relative; + width: 4.8rem; + height: 4.8rem; +`; + +const TextWrapper = styled.div` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +`; +const Circle1Icon = styled(Circle1Ic)``; +const Circle2Icon = styled(Circle2Ic)``; +const Circle3Icon = styled(Circle3Ic)``; + +const InputWrapper = styled.div` + position: relative; +`; +const TimeInput = styled.input<{ $drop: boolean }>` + appearance: none; + outline: none; + border: none; + border-radius: 0.8rem; + border-bottom-left-radius: ${(props) => (props.$drop ? '0rem' : '0.8rem')}; + border-bottom-right-radius: ${(props) => (props.$drop ? '0rem' : '0.8rem')}; + + background-color: ${({ theme }) => theme.colors.grey7}; + ${({ theme }) => theme.fonts.button1}; + cursor: pointer; + padding-left: 2rem; + width: 27.4rem; + height: 5.2rem; + color: ${({ theme }) => theme.colors.white}; +`; +const DropDownIconWrapper = styled.div` + position: absolute; + top: 36%; + right: 1rem; + cursor: pointer; +`; +const DropdownWrapper = styled.div` + position: absolute; + top: 5.2rem; + z-index: 2; + border-radius: 0rem 0rem 0.8rem 0.8rem; + background-color: ${({ theme }) => theme.colors.grey6}; + width: 27.4rem; + height: fit-content; + max-height: 15.6rem; + + overflow-x: hidden; + overflow-y: auto; +`; + +const DropDownItem = styled.div` + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + border: 1px solid ${({ theme }) => theme.colors.grey7}; + background-color: ${({ theme }) => theme.colors.grey6}; + + cursor: pointer; + + width: 27.4rem; + height: 5.2rem; +`; + +export default PriorityDropdown; diff --git a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx index 43fc564e..afab5954 100644 --- a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx @@ -1,7 +1,6 @@ +import Slot from '../../../../components/timetableComponents/parts/Slot'; import { theme } from 'styles/theme'; - import { useTimetableContext } from '../../../../components/timetableComponents/context'; -import Slot from '../../../../components/timetableComponents/parts/Slot'; interface SelectionSlotsProps { date: string; From b6b16be00dcf462f0c5e232ac9d65ef198629403 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 00:07:05 +0900 Subject: [PATCH 11/40] =?UTF-8?q?feat:=20=EC=9A=B0=EC=84=A0=EC=88=9C?= =?UTF-8?q?=EC=9C=84=20=EC=84=A0=ED=83=9D=EC=8B=9C=20=EC=8B=9C=EA=B0=84?= =?UTF-8?q?=ED=91=9C=EC=97=90=20=EC=9A=B0=EC=84=A0=EC=88=9C=EC=9C=84=20?= =?UTF-8?q?=EC=88=AB=EC=9E=90=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/timetableComponents/parts/Slot.tsx | 13 +++++++++++-- .../components/selectPriority/PrioritySlots.tsx | 15 ++++++++++++++- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx index e1706e5a..355fd68a 100644 --- a/src/components/timetableComponents/parts/Slot.tsx +++ b/src/components/timetableComponents/parts/Slot.tsx @@ -1,15 +1,21 @@ +import { ReactNode } from 'react'; import styled from 'styled-components'; interface SlotProps { slotId: string; slotStyle?: string; onClick?: () => void; + children?: ReactNode; } -function Slot({ slotId, slotStyle, onClick }: SlotProps) { +function Slot({ slotId, slotStyle, onClick, children }: SlotProps) { const borderStyle = slotId.endsWith(':30') ? 'dashed' : 'solid'; - return ; + return ( + + {children} + + ); } export default Slot; @@ -24,4 +30,7 @@ const DefaultSlot = styled.div<{ width: 4.4rem; height: 2.2rem; + + display: flex; + justify-content: center; `; diff --git a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx index afab5954..0c03e53d 100644 --- a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx @@ -1,4 +1,5 @@ import Slot from '../../../../components/timetableComponents/parts/Slot'; +import Text from 'components/atomComponents/Text'; import { theme } from 'styles/theme'; import { useTimetableContext } from '../../../../components/timetableComponents/context'; @@ -35,6 +36,14 @@ function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) { const belongingEntry = selectedSlotsPerDate.find( ([, { startSlot, endSlot }]) => timeSlot >= startSlot && timeSlot <= endSlot, ); + + let isFirstSlot = false; + if (belongingEntry !== undefined) { + if (selectedSlots[parseInt(belongingEntry[0])].startSlot === timeSlot) { + isFirstSlot = true; + } + } + const selectedEntryId = belongingEntry ? parseInt(belongingEntry[0]) : undefined; const slotId = `${date}/${timeSlot}`; const priority = @@ -45,7 +54,11 @@ function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) { key={slotId} slotId={slotId} slotStyle={getPrioritySlotStyle(selectedEntryId, priority)} - /> + > + + {isFirstSlot && priority !== 0 ? priority : ''} + + ); })} From 8857bbe3fdeb4f7e3dc37d7dcf659b9e08b212ca Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 00:55:34 +0900 Subject: [PATCH 12/40] =?UTF-8?q?feat:=20=EB=92=A4=EB=A1=9C=EA=B0=80?= =?UTF-8?q?=EA=B8=B0=ED=95=B4=EB=8F=84=20=EC=9A=B0=EC=84=A0=EC=88=9C?= =?UTF-8?q?=EC=9C=84=20=EC=84=A0=ED=83=9D=20=EB=82=B4=EC=9A=A9=EC=9D=B4=20?= =?UTF-8?q?=EB=82=A8=EC=95=84=EC=9E=88=EB=8F=84=EB=A1=9D=20=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atomComponents/Button.tsx | 5 +- .../timetableComponents/Timetable.tsx | 7 +-- src/components/timetableComponents/utils.ts | 26 ++++---- src/pages/selectSchedule/SelectSchedule.tsx | 11 +++- .../components/SelectScheduleTable.tsx | 62 ++++++++++++------- .../selectPriority/PriorityDropdown.tsx | 38 ++++++------ .../selectPriority/PrioritySlots.tsx | 8 +-- .../selectTimeSlot/SelectionSlots.tsx | 16 ++--- src/pages/selectSchedule/utils.ts | 21 +++++++ 9 files changed, 117 insertions(+), 77 deletions(-) diff --git a/src/components/atomComponents/Button.tsx b/src/components/atomComponents/Button.tsx index 8428104a..34f99cd2 100644 --- a/src/components/atomComponents/Button.tsx +++ b/src/components/atomComponents/Button.tsx @@ -1,7 +1,7 @@ -import React from 'react'; - import { css, styled } from 'styled-components'; +import React from 'react'; + interface ButtonProps { children: React.ReactNode; typeState: string; @@ -73,6 +73,7 @@ const buttonCSS = { ${buttonDefaultCSS.basicCss}; background: ${({ theme }) => theme.colors.grey7}; color: ${({ theme }) => theme.colors.grey5}; + pointer-events: none; `, halfsecondaryDisabled: css` ${buttonDefaultCSS.basicCss}; diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx index c0f634c6..d29823e1 100644 --- a/src/components/timetableComponents/Timetable.tsx +++ b/src/components/timetableComponents/Timetable.tsx @@ -1,10 +1,9 @@ -import { ReactNode } from 'react'; - -import styled from 'styled-components'; +import { ColumnStructure, DateType } from './types'; import DateTitle from './parts/ColumnTitle'; +import { ReactNode } from 'react'; import SlotTitle from './parts/SlotTitle'; -import { ColumnStructure, DateType } from './types'; +import styled from 'styled-components'; interface TimetableProps { timeSlots: string[]; diff --git a/src/components/timetableComponents/utils.ts b/src/components/timetableComponents/utils.ts index c27449cd..e89ccf60 100644 --- a/src/components/timetableComponents/utils.ts +++ b/src/components/timetableComponents/utils.ts @@ -1,18 +1,22 @@ -import { SlotType } from 'pages/selectSchedule/components/SelectScheduleTable'; +import { SlotType } from 'pages/selectSchedule/SelectSchedule'; /** * - * @desc 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수입니다. + * @desc 문자열로 된 time('HH:MM')에 minutes을 더하는 함수 */ +export const addMinutes = (time: string, minutes: number) => { + const [hour, minute] = time.split(':').map(Number); + const totalMinutes = hour * 60 + minute + minutes; + const newHour = String(Math.floor(totalMinutes / 60)).padStart(2, '0'); + const newMinute = String(totalMinutes % 60).padStart(2, '0'); + return `${newHour}:${newMinute}`; +}; -export function getAvailableTimes(times: SlotType) { - function addMinutes(time: string, minutes: number) { - const [hour, minute] = time.split(':').map(Number); - const totalMinutes = hour * 60 + minute + minutes; - const newHour = String(Math.floor(totalMinutes / 60)).padStart(2, '0'); - const newMinute = String(totalMinutes % 60).padStart(2, '0'); - return `${newHour}:${newMinute}`; - } +/** + * + * @desc 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수 + */ +export const getAvailableTimes = (times: SlotType) => { function getTimeSlots(startTime: string, endTime: string): string[] { const slots = []; let curTime = startTime; @@ -23,4 +27,4 @@ export function getAvailableTimes(times: SlotType) { return slots; } return getTimeSlots(times.startTime, times.endTime); -} +}; diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 4ff8c7cb..63ed0a4e 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -1,3 +1,4 @@ +import Button from 'components/atomComponents/Button'; import { DateType } from 'components/timetableComponents/types'; import Description from './components/Description'; import Header from 'components/moleculesComponents/Header'; @@ -50,7 +51,7 @@ const placeDetail = undefined; /***** api 연결 후 지울 것*****/ function SelectSchedule() { - const [step, setStep] = useState('selectPriority'); + const [step, setStep] = useState('selectTimeSlot'); interface TitlesType { [key: string]: { @@ -79,7 +80,12 @@ function SelectSchedule() { sub={titles[step].sub} padding={step === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`} /> - + ); } @@ -91,4 +97,5 @@ const SelectScheduleWrapper = styled.div` flex-direction: column; align-items: center; justify-content: center; + margin-bottom: 16.4rem; `; diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx index aaf55f87..c6493147 100644 --- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx +++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx @@ -2,38 +2,29 @@ import { ColumnStructure, TimetableStructure } from 'components/timetableCompone import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; import { Step, StepSlotsType } from '../types'; +import Button from 'components/atomComponents/Button'; import PriorityDropdown from './selectPriority/PriorityDropdown'; import PrioritySlots from './selectPriority/PrioritySlots'; import SelectionSlots from './selectTimeSlot/SelectionSlots'; +import Text from 'components/atomComponents/Text'; import Timetable from 'components/timetableComponents/Timetable'; +import { resetPriorities } from '../utils'; +import styled from 'styled-components'; import { useState } from 'react'; interface SelectScheduleTableProps extends TimetableStructure { step: Step; + setStep: (step: Step) => void; } -function SelectScheduleTable({ step, timeSlots, availableDates }: SelectScheduleTableProps) { +function SelectScheduleTable({ + step, + setStep, + timeSlots, + availableDates, +}: SelectScheduleTableProps) { const [startSlot, setStartSlot] = useState(undefined); - const [selectedSlots, setSelectedSlots] = useState({ - 0: { - date: '6/20/목', - startSlot: '15:00', - endSlot: '20:00', - priority: 0, - }, - 1: { - date: '6/20/목', - startSlot: '21:00', - endSlot: '22:30', - priority: 0, - }, - 3: { - date: '6/21/금', - startSlot: '15:00', - endSlot: '20:00', - priority: 0, - }, - }); + const [selectedSlots, setSelectedSlots] = useState({}); const stepSlots: StepSlotsType = { selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => ( @@ -44,6 +35,8 @@ function SelectScheduleTable({ step, timeSlots, availableDates }: SelectSchedule ), }; + const isValidSelection = Object.keys(selectedSlots).length !== 0; + return ( {step === 'selectPriority' && } + + + ); } export default SelectScheduleTable; + +const BtnDim = styled.div` + display: flex; + position: fixed; + bottom: 0; + align-items: end; + justify-content: center; + + margin-top: 3rem; + background: ${({ theme }) => theme.colors.dim_gradient}; + padding-bottom: 2.9rem; + + width: 100%; + height: 16.4rem; + + pointer-events: none; +`; diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx index dc7f6b3e..b2cd1c3b 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -6,6 +6,7 @@ import { } from 'components/timetableComponents/context'; import Text from 'components/atomComponents/Text'; +import { addMinutes } from 'components/timetableComponents/utils'; import styled from 'styled-components/macro'; import { theme } from 'styles/theme'; import { useState } from 'react'; @@ -17,9 +18,22 @@ import { useState } from 'react'; function PriorityDropdown() { const { selectedSlots, setSelectedSlots } = useTimetableContext(); - console.log(selectedSlots); const [timeSelect, setTimeSelect] = useState([false, false, false]); - const [input_, setInput] = useState(['', '', '']); + + let defaultInput1 = ''; + let defaultInput2 = ''; + let defaultInput3 = ''; + for (const key in selectedSlots) { + const item = selectedSlots[key]; + if (item.priority === 1) { + defaultInput1 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; + } else if (item.priority === 2) { + defaultInput2 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; + } else if (item.priority === 3) { + defaultInput3 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; + } + } + const [input_, setInput] = useState([defaultInput1, defaultInput2, defaultInput3]); const handleDropdown = (i: number) => { if (!timeSelect[i]) { setTimeSelect((prevState) => { @@ -47,24 +61,10 @@ function PriorityDropdown() { case 2: temp = 3; break; - default: temp = 0; break; } - setSelectedSlots( - (prev: SlotInfoType): SlotInfoType => { - const updatedScheduleList = { ...prev }; - for (const key in updatedScheduleList) { - if (selectedSlots[parseInt(key)].priority === temp) { - return { ...selectedSlots[parseInt(key)], priority: 0 }; - } - break; - } - return updatedScheduleList; - }, - ); - setSelectedSlots((prev: SelectedSlotType) => { const updatedSelectedSlots = Object.entries(prev).map(([key, value]) => { if (value.priority === temp) { @@ -89,11 +89,11 @@ function PriorityDropdown() { const updatedInput = [...prev]; if (i === 0) { - updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`; + updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; } else if (i === 1) { - updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`; + updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; } else if (i === 2) { - updatedInput[i] = `${item.date} ${item.startSlot}~${item.endSlot}`; + updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; } else { updatedInput[i] = 'error'; } diff --git a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx index 0c03e53d..23187136 100644 --- a/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PrioritySlots.tsx @@ -1,14 +1,10 @@ +import { ColumnStructure } from 'components/timetableComponents/types'; import Slot from '../../../../components/timetableComponents/parts/Slot'; import Text from 'components/atomComponents/Text'; import { theme } from 'styles/theme'; import { useTimetableContext } from '../../../../components/timetableComponents/context'; -interface SelectionSlotsProps { - date: string; - timeSlots: string[]; -} - -function PrioritySlots({ date, timeSlots }: SelectionSlotsProps) { +function PrioritySlots({ date, timeSlots }: ColumnStructure) { const { selectedSlots } = useTimetableContext(); const selectedSlotsPerDate = Object.entries(selectedSlots).filter( ([, slot]) => slot.date === date, diff --git a/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx index 3f3eb67a..b49bb142 100644 --- a/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx +++ b/src/pages/selectSchedule/components/selectTimeSlot/SelectionSlots.tsx @@ -1,15 +1,10 @@ +import { ColumnStructure } from 'components/timetableComponents/types'; +import Slot from '../../../../components/timetableComponents/parts/Slot'; import { theme } from 'styles/theme'; - import useSlotSeletion from './hooks/useSlotSelection'; import { useTimetableContext } from '../../../../components/timetableComponents/context'; -import Slot from '../../../../components/timetableComponents/parts/Slot'; -interface SelectionSlotsProps { - date: string; - timeSlots: string[]; -} - -function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) { +function SelectionSlots({ date, timeSlots }: ColumnStructure) { const { selectedSlots } = useTimetableContext(); const selectedSlotsPerDate = Object.entries(selectedSlots).filter( ([, slot]) => slot.date === date, @@ -23,10 +18,7 @@ function SelectionSlots({ date, timeSlots }: SelectionSlotsProps) { return ` cursor:pointer; - ${ - isStartSlot && `border: 1px dashed ${theme.colors.main5}` - // : `border-top: 1px solid ${theme.colors.grey7}` - }; + ${isStartSlot && `border: 1px dashed ${theme.colors.main5}`}; ${ isSelectedSlot ? `background-color: ${theme.colors.main1}` : `background-color: transparent` }; diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts index b54da7cf..2ecdbfda 100644 --- a/src/pages/selectSchedule/utils.ts +++ b/src/pages/selectSchedule/utils.ts @@ -1,3 +1,5 @@ +import { SelectedSlotType } from 'components/timetableComponents/context'; + /** * * @desc 영어로 표현된 회의 진행 시간을 한글로 변환하는 함수 @@ -35,3 +37,22 @@ export const formatPlace = (place: string) => { return undefined; } }; + +/** + * + * @desc 선택된 슬롯들의 우선순위를 0으로 초기화하는 함수 + */ +export const resetPriorities = (selectedSlots: SelectedSlotType): SelectedSlotType => { + const updatedSlots: SelectedSlotType = {}; + + for (const key in selectedSlots) { + if (typeof selectedSlots[key] === 'object') { + updatedSlots[key] = { + ...selectedSlots[key], + priority: 0, + }; + } + } + + return updatedSlots; +}; From 6157e73e68170b10e673931065d14b40eb52b2a1 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 01:17:14 +0900 Subject: [PATCH 13/40] =?UTF-8?q?feat:=20CTA=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../legacy/selectSchedule/SelectModal.tsx | 20 ++++--- .../components/SelectScheduleTable.tsx | 37 ++++--------- .../components/selectPriority/PriorityCta.tsx | 52 +++++++++++++++++++ .../components/selectTimeSlot/TimeSlotCta.tsx | 43 +++++++++++++++ src/pages/selectSchedule/types.ts | 2 + 5 files changed, 115 insertions(+), 39 deletions(-) create mode 100644 src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx create mode 100644 src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx index b8320c87..3e7a99d0 100644 --- a/src/pages/legacy/selectSchedule/SelectModal.tsx +++ b/src/pages/legacy/selectSchedule/SelectModal.tsx @@ -1,20 +1,18 @@ -import React, { Dispatch, SetStateAction, useEffect } from 'react'; - +import { hostAvailableApi, userAvailableApi } from 'utils/apis/createHostAvailableSchedule'; import { scheduleAtom, userNameAtom } from 'atoms/atom'; -import { isAxiosError } from 'axios'; -import Text from 'components/atomComponents/Text'; -import { ExitIc } from 'components/Icon/icon'; +import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq'; import { useNavigate, useParams } from 'react-router'; import { useRecoilState, useRecoilValue } from 'recoil'; -import styled from 'styled-components/macro'; -import { theme } from 'styles/theme'; -import { hostAvailableApi, userAvailableApi } from 'utils/apis/createHostAvailableSchedule'; +import { ExitIc } from 'components/Icon/icon'; import { ScheduleStates } from './types/Schedule'; -import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq'; +import Text from 'components/atomComponents/Text'; +import { isAxiosError } from 'axios'; +import styled from 'styled-components/macro'; +import { theme } from 'styles/theme'; interface ModalProps { - setShowModal: Dispatch>; + setShowModal: (isModalOpen: boolean) => void; } function SelectModal({ setShowModal }: ModalProps) { @@ -117,7 +115,7 @@ export default SelectModal; const ReturnModalWrpper = styled.div` display: flex; - position: absolute; + position: fixed; top: 0; left: 0; flex-direction: column; diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx index c6493147..33a759b1 100644 --- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx +++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx @@ -1,12 +1,14 @@ import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types'; import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; -import { Step, StepSlotsType } from '../types'; +import { Step, StepBtnsType, StepSlotsType } from '../types'; import Button from 'components/atomComponents/Button'; +import PriorityCta from './selectPriority/PriorityCta'; import PriorityDropdown from './selectPriority/PriorityDropdown'; import PrioritySlots from './selectPriority/PrioritySlots'; import SelectionSlots from './selectTimeSlot/SelectionSlots'; import Text from 'components/atomComponents/Text'; +import TimeSlotCta from './selectTimeSlot/TimeSlotCta'; import Timetable from 'components/timetableComponents/Timetable'; import { resetPriorities } from '../utils'; import styled from 'styled-components'; @@ -37,6 +39,11 @@ function SelectScheduleTable({ const isValidSelection = Object.keys(selectedSlots).length !== 0; + const stepBtns: StepBtnsType = { + selectTimeSlot: , + selectPriority: , + }; + return ( {step === 'selectPriority' && } - - - + {stepBtns[step]} ); } export default SelectScheduleTable; - -const BtnDim = styled.div` - display: flex; - position: fixed; - bottom: 0; - align-items: end; - justify-content: center; - - margin-top: 3rem; - background: ${({ theme }) => theme.colors.dim_gradient}; - padding-bottom: 2.9rem; - - width: 100%; - height: 16.4rem; - - pointer-events: none; -`; diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx new file mode 100644 index 00000000..83c3e8f9 --- /dev/null +++ b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx @@ -0,0 +1,52 @@ +import Button from 'components/atomComponents/Button'; +import SelectModal from 'pages/legacy/selectSchedule/SelectModal'; +import Text from 'components/atomComponents/Text'; +import styled from 'styled-components'; +import { useState } from 'react'; + +function PriorityCta() { + const [isModalOpen, setIsModalOpen] = useState(false); + return ( + <> + + + + + {isModalOpen && } + + ); +} + +export default PriorityCta; + +const BtnDim = styled.div` + display: flex; + position: fixed; + gap: 1rem; + bottom: 0; + align-items: end; + justify-content: center; + + margin-top: 3rem; + background: ${({ theme }) => theme.colors.dim_gradient}; + padding-bottom: 2.9rem; + + width: 100%; + height: 16.4rem; + + pointer-events: none; +`; diff --git a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx new file mode 100644 index 00000000..375386b0 --- /dev/null +++ b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx @@ -0,0 +1,43 @@ +import Button from 'components/atomComponents/Button'; +import { Step } from 'pages/selectSchedule/types'; +import Text from 'components/atomComponents/Text'; +import styled from 'styled-components'; + +interface TimeSlotCtaProps { + isValidSelection: boolean; + setStep: (step: Step) => void; +} + +function TimeSlotCta({ isValidSelection, setStep }: TimeSlotCtaProps) { + return ( + + + + ); +} + +export default TimeSlotCta; + +const BtnDim = styled.div` + display: flex; + position: fixed; + bottom: 0; + align-items: end; + justify-content: center; + + margin-top: 3rem; + background: ${({ theme }) => theme.colors.dim_gradient}; + padding-bottom: 2.9rem; + + width: 100%; + height: 16.4rem; + + pointer-events: none; +`; diff --git a/src/pages/selectSchedule/types.ts b/src/pages/selectSchedule/types.ts index de4c32c8..7886a814 100644 --- a/src/pages/selectSchedule/types.ts +++ b/src/pages/selectSchedule/types.ts @@ -1,4 +1,6 @@ import { ColumnStructure } from 'components/timetableComponents/types'; +import { ReactNode } from 'react'; export type Step = 'selectTimeSlot' | 'selectPriority'; export type StepSlotsType = { [key in Step]: (props: ColumnStructure) => ReactNode }; +export type StepBtnsType = { [key in Step]: ReactNode }; From c3fb34216391d292d5a69c33bdc750b614f1568c Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 01:27:24 +0900 Subject: [PATCH 14/40] =?UTF-8?q?fix:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EB=82=B4=20=EC=9E=98=EB=AA=BB=EB=90=9C=20endSlot?= =?UTF-8?q?=EA=B3=BC=20=EB=82=A0=EC=A7=9C=20=ED=8F=AC=EB=A7=A4=ED=8C=85=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 --- .../selectPriority/PriorityDropdown.tsx | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx index b2cd1c3b..d8c2919d 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -20,17 +20,24 @@ function PriorityDropdown() { const { selectedSlots, setSelectedSlots } = useTimetableContext(); const [timeSelect, setTimeSelect] = useState([false, false, false]); + const formatDate = (date: string) => { + const [month, day, dayOfWeek] = date.split('/'); + return `${month}/${day}(${dayOfWeek})`; + }; + let defaultInput1 = ''; let defaultInput2 = ''; let defaultInput3 = ''; for (const key in selectedSlots) { const item = selectedSlots[key]; + const date = formatDate(item.date); + const endSlot = addMinutes(item.endSlot, 30); if (item.priority === 1) { - defaultInput1 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; + defaultInput1 = `${date} ${item.startSlot}~${endSlot}`; } else if (item.priority === 2) { - defaultInput2 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; + defaultInput2 = `${date} ${item.startSlot}~${endSlot}`; } else if (item.priority === 3) { - defaultInput3 = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; + defaultInput3 = `${date} ${item.startSlot}~${endSlot}`; } } const [input_, setInput] = useState([defaultInput1, defaultInput2, defaultInput3]); @@ -87,13 +94,14 @@ function PriorityDropdown() { setInput((prev) => { const updatedInput = [...prev]; - + const endSlot = addMinutes(item.endSlot, 30); + const date = formatDate(item.date); if (i === 0) { - updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; + updatedInput[i] = `${date} ${item.startSlot}~${endSlot}`; } else if (i === 1) { - updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; + updatedInput[i] = `${date} ${item.startSlot}~${endSlot}`; } else if (i === 2) { - updatedInput[i] = `${item.date} ${item.startSlot}~${addMinutes(item.endSlot, 30)}`; + updatedInput[i] = `${date} ${item.startSlot}~${endSlot}`; } else { updatedInput[i] = 'error'; } @@ -150,7 +158,10 @@ function PriorityDropdown() { !value.priority && ( handlePriority(i, value, key)}> - {value.date} {value.startSlot}~{value.endSlot} + {formatDate(value.date)} {value.startSlot}~{addMinutes( + value.endSlot, + 30, + )} ), From c7f344737c19f1b3217742677c277c08538917a3 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 01:34:12 +0900 Subject: [PATCH 15/40] =?UTF-8?q?fix:=20=EC=9A=B0=EC=84=A0=EC=88=9C?= =?UTF-8?q?=EC=9C=84=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=EC=9D=B4=20=EC=95=88=EB=90=98=EB=8A=94=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/selectPriority/PriorityDropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx index d8c2919d..b7dd6a63 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -75,7 +75,7 @@ function PriorityDropdown() { setSelectedSlots((prev: SelectedSlotType) => { const updatedSelectedSlots = Object.entries(prev).map(([key, value]) => { if (value.priority === temp) { - return { ...value, prority: 0 }; + return { ...value, priority: 0 }; } return value; }); From b6feb98ed282ce3762e3dff0151ba4ae9928896f Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 01:58:55 +0900 Subject: [PATCH 16/40] =?UTF-8?q?chore:=20=EA=B8=B0=EC=A1=B4=20api=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=EB=A5=BC=20legacy=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EB=A1=9C=20=EC=98=AE=EA=B9=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/OverallSchedule/OverallSchedule.tsx | 18 +++++++--------- .../useFunnel/SetAdditionalInfo.tsx | 10 ++++----- .../legacy/selectSchedule/SelectModal.tsx | 2 +- .../selectSchedule/SelectPriorityPage.tsx | 17 +++++++-------- .../selectSchedule/SelectSchedulePage.tsx | 21 +++++++++---------- src/utils/apis/bestMeetTimeApi.ts | 11 ---------- .../{ => legacy}/availbleScheduleOptionApi.ts | 3 +-- .../createHostAvailableSchedule.ts | 6 ++---- .../apis/{ => legacy}/createMeetingApi.ts | 2 +- src/utils/apis/{ => legacy}/cueCardAPI.ts | 2 +- .../apis/{ => legacy}/overallScheduleApi.ts | 4 ++-- 11 files changed, 39 insertions(+), 57 deletions(-) delete mode 100644 src/utils/apis/bestMeetTimeApi.ts rename src/utils/apis/{ => legacy}/availbleScheduleOptionApi.ts (89%) rename src/utils/apis/{ => legacy}/createHostAvailableSchedule.ts (88%) rename src/utils/apis/{ => legacy}/createMeetingApi.ts (88%) rename src/utils/apis/{ => legacy}/cueCardAPI.ts (75%) rename src/utils/apis/{ => legacy}/overallScheduleApi.ts (92%) diff --git a/src/pages/OverallSchedule/OverallSchedule.tsx b/src/pages/OverallSchedule/OverallSchedule.tsx index f29f495f..e19b2805 100644 --- a/src/pages/OverallSchedule/OverallSchedule.tsx +++ b/src/pages/OverallSchedule/OverallSchedule.tsx @@ -1,19 +1,17 @@ import React, { useEffect, useState } from 'react'; - import { availableDatesAtom, preferTimesAtom, timeSlotUserNameAtom } from 'atoms/atom'; -import Text from 'components/atomComponents/Text'; -import LoadingPage from 'pages/errorLoading/LoadingPage'; -import { useParams } from 'react-router-dom'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { OverallScheduleData } from 'src/types/overallScheduleType'; -import { styled } from 'styled-components'; -import { theme } from 'styles/theme'; -import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi'; -import { overallScheduleApi } from 'utils/apis/overallScheduleApi'; +import LoadingPage from 'pages/errorLoading/LoadingPage'; +import { OverallScheduleData } from 'src/types/overallScheduleType'; +import Text from 'components/atomComponents/Text'; import TimeTable from './components/TimeTable'; +import { availableScheduleOptionApi } from 'utils/apis/legacy/availbleScheduleOptionApi'; import { getFormattedAvailableDateTimes } from './utils/getFormattedAvailableDateTimes'; - +import { overallScheduleApi } from 'utils/apis/legacy/overallScheduleApi'; +import { styled } from 'styled-components'; +import { theme } from 'styles/theme'; +import { useParams } from 'react-router-dom'; const OverallSchedule = () => { const { meetingId } = useParams(); diff --git a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx index fc86d9e1..79179077 100644 --- a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx @@ -1,13 +1,13 @@ -import React from 'react'; +import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; -import { isAxiosError } from 'axios'; import Button from 'components/atomComponents/Button'; +import React from 'react'; import Text from 'components/atomComponents/Text'; import TextAreaInput from 'components/atomComponents/TextAreaInput'; -import { MeetingInfo, FunnelProps } from 'pages/createMeeting/types/useFunnelInterface'; -import { useNavigate } from 'react-router-dom'; +import { createMeetingApi } from 'utils/apis/legacy/createMeetingApi'; +import { isAxiosError } from 'axios'; import styled from 'styled-components/macro'; -import { createMeetingApi } from 'utils/apis/createMeetingApi'; +import { useNavigate } from 'react-router-dom'; function SetAdditionalInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { const navigate = useNavigate(); diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx index 3e7a99d0..756141bb 100644 --- a/src/pages/legacy/selectSchedule/SelectModal.tsx +++ b/src/pages/legacy/selectSchedule/SelectModal.tsx @@ -1,4 +1,4 @@ -import { hostAvailableApi, userAvailableApi } from 'utils/apis/createHostAvailableSchedule'; +import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule'; import { scheduleAtom, userNameAtom } from 'atoms/atom'; import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq'; import { useNavigate, useParams } from 'react-router'; diff --git a/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx b/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx index 8a4f0358..fbf5e6ed 100644 --- a/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx +++ b/src/pages/legacy/selectSchedule/SelectPriorityPage.tsx @@ -1,19 +1,18 @@ import React, { useEffect, useState } from 'react'; - import { availableDatesAtom, preferTimesAtom, scheduleAtom } from 'atoms/atom'; -import axios from 'axios'; +import { useNavigate, useParams } from 'react-router-dom'; + import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; +import Header from 'components/moleculesComponents/Header'; import PriorityDropdown from 'components/legacy/scheduleComponents/components/PriorityDropdown'; +import SelectModal from './SelectModal'; +import Text from 'components/atomComponents/Text'; import TimeTable from 'components/legacy/scheduleComponents/components/TimeTable'; -import Header from 'components/moleculesComponents/Header'; -import { useNavigate, useParams } from 'react-router-dom'; -import { useRecoilState } from 'recoil'; +import { availableScheduleOptionApi } from 'utils/apis/legacy/availbleScheduleOptionApi'; +import axios from 'axios'; import styled from 'styled-components'; import { theme } from 'styles/theme'; -import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi'; - -import SelectModal from './SelectModal'; +import { useRecoilState } from 'recoil'; const SelectSchedulePriority = () => { const [availableDates, setAvailableDates] = useRecoilState(availableDatesAtom); diff --git a/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx b/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx index 5084ac55..93648246 100644 --- a/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx +++ b/src/pages/legacy/selectSchedule/SelectSchedulePage.tsx @@ -1,21 +1,20 @@ import React, { useEffect, useRef, useState } from 'react'; - import { availableDatesAtom, preferTimesAtom, scheduleAtom } from 'atoms/atom'; -import axios from 'axios'; +import { useNavigate, useParams } from 'react-router-dom'; + import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; -import { PlusIc } from 'components/Icon/icon'; -import TimeTable from 'components/legacy/scheduleComponents/components/TimeTable'; import Header from 'components/moleculesComponents/Header'; -import { useNavigate, useParams } from 'react-router-dom'; -import { useRecoilState } from 'recoil'; import { MeetingDetail } from 'src/types/availbleScheduleType'; +import { PlusIc } from 'components/Icon/icon'; +import { ScheduleStates } from './types/Schedule'; +import SelectSchedule from './components/SelectSchedule'; +import Text from 'components/atomComponents/Text'; +import TimeTable from 'components/legacy/scheduleComponents/components/TimeTable'; +import { availableScheduleOptionApi } from 'utils/apis/legacy/availbleScheduleOptionApi'; +import axios from 'axios'; import styled from 'styled-components/macro'; import { theme } from 'styles/theme'; -import { availableScheduleOptionApi } from 'utils/apis/availbleScheduleOptionApi'; - -import SelectSchedule from './components/SelectSchedule'; -import { ScheduleStates } from './types/Schedule'; +import { useRecoilState } from 'recoil'; function SelectSchedulePage() { // 가능시간 선택지 - 날짜 diff --git a/src/utils/apis/bestMeetTimeApi.ts b/src/utils/apis/bestMeetTimeApi.ts deleted file mode 100644 index a6ea58c7..00000000 --- a/src/utils/apis/bestMeetTimeApi.ts +++ /dev/null @@ -1,11 +0,0 @@ -// import { BestMeetTimeResponse, BestMeetTimeRequest } from 'src/types/bestMeetTimeType'; - -// import { client } from './axios'; - -// export const BestMeetTimeApi = (BestMeetTimeRequest: BestMeetTimeRequest) => { -// return client.post(`/meeting/${meetingId}/confirm`, BestMeetTimeRequest, { -// headers: { -// Authorization: `[Bearer] ${token}`, -// }, -// }); -// }; diff --git a/src/utils/apis/availbleScheduleOptionApi.ts b/src/utils/apis/legacy/availbleScheduleOptionApi.ts similarity index 89% rename from src/utils/apis/availbleScheduleOptionApi.ts rename to src/utils/apis/legacy/availbleScheduleOptionApi.ts index 2f424339..b10400da 100644 --- a/src/utils/apis/availbleScheduleOptionApi.ts +++ b/src/utils/apis/legacy/availbleScheduleOptionApi.ts @@ -1,6 +1,5 @@ import { AvailableScheduleOptionResponse } from 'src/types/availbleScheduleType'; - -import { client } from './axios'; +import { client } from '../axios'; /** 가능 시간 입력 선택지 조회 api */ export const availableScheduleOptionApi = (meetingId?: string) => { diff --git a/src/utils/apis/createHostAvailableSchedule.ts b/src/utils/apis/legacy/createHostAvailableSchedule.ts similarity index 88% rename from src/utils/apis/createHostAvailableSchedule.ts rename to src/utils/apis/legacy/createHostAvailableSchedule.ts index c5915f09..0cc98699 100644 --- a/src/utils/apis/createHostAvailableSchedule.ts +++ b/src/utils/apis/legacy/createHostAvailableSchedule.ts @@ -1,12 +1,10 @@ -import { AxiosResponse } from 'axios'; import { HostAvailableSchduleRequestType, HostAvailableScheduleResponseType, - UserAvailableScheduleResponseType, UserAvailableScheduleRequestType, + UserAvailableScheduleResponseType, } from 'src/types/createAvailableSchduleType'; - -import { authClient, client } from './axios'; +import { authClient, client } from '../axios'; export const hostAvailableApi = ( meetingId: string, diff --git a/src/utils/apis/createMeetingApi.ts b/src/utils/apis/legacy/createMeetingApi.ts similarity index 88% rename from src/utils/apis/createMeetingApi.ts rename to src/utils/apis/legacy/createMeetingApi.ts index ce62c47d..54f43623 100644 --- a/src/utils/apis/createMeetingApi.ts +++ b/src/utils/apis/legacy/createMeetingApi.ts @@ -1,6 +1,6 @@ import { CreateMeetingRequest, CreateMeetingResponse } from 'src/types/createMeetingType'; -import { client } from './axios'; +import { client } from '../axios'; export const createMeetingApi = (CreateMeetingRequest: CreateMeetingRequest) => { return client.post(`/meeting`, CreateMeetingRequest); diff --git a/src/utils/apis/cueCardAPI.ts b/src/utils/apis/legacy/cueCardAPI.ts similarity index 75% rename from src/utils/apis/cueCardAPI.ts rename to src/utils/apis/legacy/cueCardAPI.ts index f5f1d85f..fd7517ab 100644 --- a/src/utils/apis/cueCardAPI.ts +++ b/src/utils/apis/legacy/cueCardAPI.ts @@ -1,4 +1,4 @@ -import { client } from './axios'; +import { client } from '../axios'; export const cueCardApi = (meetingId: string) => { return client.get(`/meeting/${meetingId}/card`); diff --git a/src/utils/apis/overallScheduleApi.ts b/src/utils/apis/legacy/overallScheduleApi.ts similarity index 92% rename from src/utils/apis/overallScheduleApi.ts rename to src/utils/apis/legacy/overallScheduleApi.ts index 9cff94bd..50b40c6d 100644 --- a/src/utils/apis/overallScheduleApi.ts +++ b/src/utils/apis/legacy/overallScheduleApi.ts @@ -1,8 +1,8 @@ +import { authClient, client } from '../axios'; + import { AvailableScheduleOptionResponse } from 'src/types/availbleScheduleType'; import { OverallScheduleResponse } from 'src/types/overallScheduleType'; -import { authClient, client } from './axios'; - /** 가능 시간 입력 선택지 조회 api */ export const availbleScheduleOptionApi = (meetingId?: string) => { return client.get(`/meeting/${meetingId}/schedule`); From b099be00647f0653cb63d9c13f1f5746fa955af3 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 02:39:56 +0900 Subject: [PATCH 17/40] =?UTF-8?q?feat:=20react-query=20=EC=84=9C=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ src/App.tsx | 36 ++++++++++++++++++++-------------- src/utils/apis/getTimetable.ts | 0 yarn.lock | 24 +++++++++++++++++++++++ 4 files changed, 47 insertions(+), 15 deletions(-) create mode 100644 src/utils/apis/getTimetable.ts diff --git a/package.json b/package.json index 1a45c503..5826cc24 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "lint:css": "stylelint './src/**/*.{ts,tsx}'" }, "dependencies": { + "@tanstack/react-query": "^5.45.1", + "@tanstack/react-query-devtools": "^5.45.1", "@types/axios": "^0.14.0", "@types/react-copy-to-clipboard": "^5.0.4", "axios": "^1.4.0", diff --git a/src/App.tsx b/src/App.tsx index a5a64135..b279d2c2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,19 @@ -import { useEffect } from 'react'; - -import { ThemeProvider } from 'styled-components'; -import styled from 'styled-components/macro'; -import ToastContainerBox from 'utils/toast/ToastContainer'; - -import Router from './Router'; -import GlobalStyle from './styles/globalStyles'; -import { theme } from './styles/theme'; - import './App.css'; /**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */ import './utils/changeBrowser'; import 'react-toastify/dist/ReactToastify.css'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + +import GlobalStyle from './styles/globalStyles'; +import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import Router from './Router'; +import { ThemeProvider } from 'styled-components'; +import ToastContainerBox from 'utils/toast/ToastContainer'; +import styled from 'styled-components/macro'; +import { theme } from './styles/theme'; +import { useEffect } from 'react'; + const MobileWrapper = styled.div` display: flex; @@ -47,14 +48,19 @@ function App() { window.removeEventListener('resize', setScreenSize); }; }, []); + + const queryClient = new QueryClient(); return ( <> - - - - - + + + + + + + + ); diff --git a/src/utils/apis/getTimetable.ts b/src/utils/apis/getTimetable.ts new file mode 100644 index 00000000..e69de29b diff --git a/yarn.lock b/yarn.lock index 07569bdb..35168db7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1536,6 +1536,30 @@ "@svgr/hast-util-to-babel-ast" "^7.0.0" svg-parser "^2.0.4" +"@tanstack/query-core@5.45.0": + version "5.45.0" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.45.0.tgz#47a662d311c2588867341238960ec21dc7f0714e" + integrity sha512-RVfIZQmFUTdjhSAAblvueimfngYyfN6HlwaJUPK71PKd7yi43Vs1S/rdimmZedPWX/WGppcq/U1HOj7O7FwYxw== + +"@tanstack/query-devtools@5.37.1": + version "5.37.1" + resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.37.1.tgz#8dcfa1488b4f2e353be7eede6691b0ad9197183b" + integrity sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg== + +"@tanstack/react-query-devtools@^5.45.1": + version "5.45.1" + resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.45.1.tgz#bea7ba0ffd509f0930237c2df7feba9209f76aa6" + integrity sha512-4mrbk1g5jqlqh0pifZNsKzy7FtgeqgwzMICL4d6IJGayrrcrKq9K4N/OzRNbgRWrTn6YTY63qcAcKo+NJU2QMw== + dependencies: + "@tanstack/query-devtools" "5.37.1" + +"@tanstack/react-query@^5.45.1": + version "5.45.1" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.45.1.tgz#a0ac6bb89b4a2c2b0251f6647a0a370d86f05347" + integrity sha512-mYYfJujKg2kxmkRRjA6nn4YKG3ITsKuH22f1kteJ5IuVQqgKUgbaSQfYwVP0gBS05mhwxO03HVpD0t7BMN7WOA== + dependencies: + "@tanstack/query-core" "5.45.0" + "@types/axios@^0.14.0": version "0.14.0" resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46" From cccfa14a029df4026e6bc0ed387f88e8b0303276 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 03:10:11 +0900 Subject: [PATCH 18/40] =?UTF-8?q?feat:=20useGetTimetable=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/apis/getTimetable.ts | 0 src/utils/apis/useGetTimetable.ts | 25 +++++++++++++++++++++++++ 2 files changed, 25 insertions(+) delete mode 100644 src/utils/apis/getTimetable.ts create mode 100644 src/utils/apis/useGetTimetable.ts diff --git a/src/utils/apis/getTimetable.ts b/src/utils/apis/getTimetable.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts new file mode 100644 index 00000000..b75db932 --- /dev/null +++ b/src/utils/apis/useGetTimetable.ts @@ -0,0 +1,25 @@ +import { client } from './axios'; +import { useQuery } from '@tanstack/react-query'; + +const getTimetable = async (meetingId: string) => { + try { + const res = await client.get(`/meeting/${meetingId}/schedule`); + return res.data; + } catch (err) { + throw new Error(err); + } +}; + +export const useGetTimetable = (meetingId: string) => { + const { data, isLoading } = useQuery({ + queryKey: ['getTimetable', meetingId], + queryFn: () => getTimetable(meetingId), + }); + const duration = data?.duration; + const place = data?.place; + const placeDetail = data?.placeDetail; + const availableDates = data?.availableDates; + const preferTimes = data?.preferTimes; + + return {duration, place, placeDetail, availableDates, preferTimes, isLoading} +}; From 3a5c288ea883fd253a65e05d462e624daa02e4f2 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 04:11:17 +0900 Subject: [PATCH 19/40] =?UTF-8?q?feat:=20useGetTimetable=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Router.tsx | 9 +- src/components/timetableComponents/types.ts | 5 ++ src/components/timetableComponents/utils.ts | 19 ++-- .../components/MemberComponent.tsx | 12 +-- .../components/NoAvailableTimeModal.tsx | 4 +- src/pages/createMeeting/CreateMeeting.tsx | 6 ++ src/pages/selectSchedule/SelectSchedule.tsx | 90 +++++++------------ src/utils/apis/useGetTimetable.ts | 41 ++++++--- 8 files changed, 92 insertions(+), 94 deletions(-) diff --git a/src/Router.tsx b/src/Router.tsx index 2c3b3a27..93b95642 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,15 +1,16 @@ +import { BrowserRouter, Route, Routes } from 'react-router-dom'; + import ChooseBestTime from 'pages/bestMeetTime/ChooseBestTime'; import CreateMeeting from 'pages/createMeeting/CreateMeeting'; import CueCard from 'pages/cueCard/CueCard'; import ErrorPage404 from 'pages/errorLoading/ErrorPage404'; import LoadingPage from 'pages/errorLoading/LoadingPage'; -import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage'; -import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage'; import LoginEntrance from 'pages/loginEntrance/LoginEntrance'; import OnBoarding from 'pages/onBoarding/OnBoarding'; +import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage'; import SelectSchedule from 'pages/selectSchedule/SelectSchedule'; +import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage'; import SteppingLayout from 'pages/steppingStone/SteppingLayout'; -import { BrowserRouter, Route, Routes } from 'react-router-dom'; const Router = () => { return ( @@ -18,8 +19,6 @@ const Router = () => { } /> } /> } /> - {/* } /> - } /> */} } /> { * @desc 시작 시간(startTime)과 종료 시간(endTime) 사이에서 30분 간격으로 시간 슬롯을 생성하여 반환하는 함수 */ -export const getAvailableTimes = (times: SlotType) => { - function getTimeSlots(startTime: string, endTime: string): string[] { - const slots = []; - let curTime = startTime; - while (curTime < endTime) { - slots.push(curTime); - curTime = addMinutes(curTime, 30); - } - return slots; +export const getAvailableTimes = ({ startTime, endTime }: SlotType) => { + const slots = []; + let curTime = startTime; + while (curTime < endTime) { + slots.push(curTime); + curTime = addMinutes(curTime, 30); } - return getTimeSlots(times.startTime, times.endTime); + return slots; }; diff --git a/src/pages/LoginEntrance/components/MemberComponent.tsx b/src/pages/LoginEntrance/components/MemberComponent.tsx index b1a30430..a87ea7ac 100644 --- a/src/pages/LoginEntrance/components/MemberComponent.tsx +++ b/src/pages/LoginEntrance/components/MemberComponent.tsx @@ -1,16 +1,16 @@ import React, { Dispatch, SetStateAction } from 'react'; -import { userNameAtom } from 'atoms/atom'; import Button from 'components/atomComponents/Button'; +import Header from 'components/moleculesComponents/Header'; import Text from 'components/atomComponents/Text'; import TextInput from 'components/atomComponents/TextInput'; -import Header from 'components/moleculesComponents/Header'; import TitleComponent from 'components/moleculesComponents/TitleComponents'; -import { useParams } from 'react-router'; -import { useNavigate } from 'react-router-dom'; -import { useRecoilState } from 'recoil'; import styled from 'styled-components/macro'; import { theme } from 'styles/theme'; +import { useNavigate } from 'react-router-dom'; +import { useParams } from 'react-router'; +import { useRecoilState } from 'recoil'; +import { userNameAtom } from 'atoms/atom'; interface HostInfoProps { name: string; @@ -38,7 +38,7 @@ function MemberComponent({ hostInfo, setHostInfo }: HostProps) { const loginMember = () => { setUserName(hostInfo.name); - navigate(`/member/schedule/${meetingId}`); + navigate(`/member/select/${meetingId}`); }; return ( diff --git a/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx b/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx index 3b56bf2d..0b82b270 100644 --- a/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx +++ b/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx @@ -10,7 +10,7 @@ interface ModalProps { setIsModalOpen: Dispatch>; } -function NoAvailableTimeModal ({ setIsModalOpen }: ModalProps) { +function NoAvailableTimeModal({ setIsModalOpen }: ModalProps) { const { meetingId } = useParams(); return ( @@ -29,7 +29,7 @@ function NoAvailableTimeModal ({ setIsModalOpen }: ModalProps) { 방장 페이지에 접속할 수 있어요! - + 가능 시간 입력하러 가기 diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx index bcde5d43..006e077f 100644 --- a/src/pages/createMeeting/CreateMeeting.tsx +++ b/src/pages/createMeeting/CreateMeeting.tsx @@ -6,6 +6,7 @@ import ReturnBodyComponent from 'pages/createMeeting/components/ReturnBodyCompon import ReturnTitleComponent from 'pages/createMeeting/components/ReturnTitleComponent'; import { funnelStep } from './data/meetingInfoData'; import styled from 'styled-components/macro'; +import { useGetTimetable } from 'utils/apis/useGetTimetable'; const initialMeetingInfo: MeetingInfo = { title: '', @@ -23,6 +24,7 @@ function CreateMeeting() { const [step, setStep] = useState(0); const [meetingInfo, setMeetingInfo] = useState(initialMeetingInfo); const currentStep = funnelStep[step]; + return ( <> @@ -41,6 +43,10 @@ function CreateMeeting() { export default CreateMeeting; +const Button = styled.div` + font-size: 5rem; + color: white; +`; const CreateMeetingWrapper = styled.div` display: flex; flex-direction: column; diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 63ed0a4e..716a6ca0 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -1,5 +1,3 @@ -import Button from 'components/atomComponents/Button'; -import { DateType } from 'components/timetableComponents/types'; import Description from './components/Description'; import Header from 'components/moleculesComponents/Header'; import SelectScheduleTable from './components/SelectScheduleTable'; @@ -7,51 +5,14 @@ import { Step } from './types'; import TitleComponents from 'components/moleculesComponents/TitleComponents'; import { getAvailableTimes } from 'components/timetableComponents/utils'; import styled from 'styled-components'; +import { useGetTimetable } from 'utils/apis/useGetTimetable'; +import { useParams } from 'react-router-dom'; import { useState } from 'react'; -/***** api 연결 후 지울 것*****/ - -const availableDates: DateType[] = [ - { - month: '6', - day: '20', - dayOfWeek: '목', - }, - { - month: '6', - day: '21', - dayOfWeek: '금', - }, - { - month: '6', - day: '22', - dayOfWeek: '토', - }, - { - month: '6', - day: '23', - dayOfWeek: '일', - }, -]; - -export type SlotType = { - startTime: string; - endTime: string; -}; - -const preferTimes: SlotType = { - startTime: '06:00', - endTime: '24:00', -}; - -const timeSlots = getAvailableTimes(preferTimes); -const duration = 'HALF'; -const place = 'OFFLINE'; -const placeDetail = undefined; -/***** api 연결 후 지울 것*****/ - function SelectSchedule() { const [step, setStep] = useState('selectTimeSlot'); + const { meetingId } = useParams(); + const { data, isLoading } = useGetTimetable(meetingId); interface TitlesType { [key: string]: { @@ -70,23 +31,32 @@ function SelectSchedule() { }; return ( - -
- {step === 'selectTimeSlot' && ( - - )} - - - + <> + {!isLoading && + data && ( + +
+ {step === 'selectTimeSlot' && ( + + )} + + + + )} + ); } diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts index b75db932..736ad991 100644 --- a/src/utils/apis/useGetTimetable.ts +++ b/src/utils/apis/useGetTimetable.ts @@ -1,25 +1,46 @@ import { client } from './axios'; +import { useNavigate } from 'react-router-dom'; import { useQuery } from '@tanstack/react-query'; +interface Date { + month: string; + day: string; + dayOfWeek: string; +} +interface TimeSlot { + startTime: string; + endTime: string; +} + +interface getTimetableResponse { + data: { + duration: string; + place: string; + placeDetail: string; + availableDates: Date[]; + preferTimes: TimeSlot[]; + }; +} + const getTimetable = async (meetingId: string) => { try { - const res = await client.get(`/meeting/${meetingId}/schedule`); - return res.data; + const res = await client.get(`/meeting/${meetingId}/schedule`); + return res.data.data; } catch (err) { - throw new Error(err); + console.log(err); } }; -export const useGetTimetable = (meetingId: string) => { +export const useGetTimetable = (meetingId?: string) => { + const navigate = useNavigate(); + if (meetingId === undefined) { + navigate('/error'); + throw new Error('잘못된 회의 아이디입니다.'); + } const { data, isLoading } = useQuery({ queryKey: ['getTimetable', meetingId], queryFn: () => getTimetable(meetingId), }); - const duration = data?.duration; - const place = data?.place; - const placeDetail = data?.placeDetail; - const availableDates = data?.availableDates; - const preferTimes = data?.preferTimes; - return {duration, place, placeDetail, availableDates, preferTimes, isLoading} + return { data, isLoading }; }; From 013f9f12b07d569f3804caa2d4f9d1cc386619e3 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 04:44:14 +0900 Subject: [PATCH 20/40] =?UTF-8?q?feat:=20=EA=B0=80=EB=8A=A5=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=84=20=EC=9E=85=EB=A0=A5=20post=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../legacy/selectSchedule/SelectModal.tsx | 12 ++- src/pages/selectSchedule/SelectSchedule.tsx | 6 +- .../selectSchedule/components/Description.tsx | 10 +- src/pages/selectSchedule/utils.ts | 96 ++++++++++++------- src/types/createAvailableSchduleType.ts | 2 +- src/utils/apis/useGetTimetable.ts | 6 +- 6 files changed, 82 insertions(+), 50 deletions(-) diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx index 756141bb..a19e6bec 100644 --- a/src/pages/legacy/selectSchedule/SelectModal.tsx +++ b/src/pages/legacy/selectSchedule/SelectModal.tsx @@ -1,3 +1,8 @@ +import { + formatHostScheduleScheme, + formatMemberScheduleScheme, + formatSchedulePostScheme, +} from 'pages/selectSchedule/utils'; import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule'; import { scheduleAtom, userNameAtom } from 'atoms/atom'; import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq'; @@ -10,19 +15,20 @@ import Text from 'components/atomComponents/Text'; import { isAxiosError } from 'axios'; import styled from 'styled-components/macro'; import { theme } from 'styles/theme'; +import { useTimetableContext } from 'components/timetableComponents/context'; interface ModalProps { setShowModal: (isModalOpen: boolean) => void; } function SelectModal({ setShowModal }: ModalProps) { - const [scheduleList, setScheduleList] = useRecoilState(scheduleAtom); + const { selectedSlots } = useTimetableContext(); const userName = useRecoilValue(userNameAtom); const navigate = useNavigate(); const { auth, meetingId } = useParams(); - const updateScheduleType = transformHostScheduleType(scheduleList); - const updateMemberScheduleType = transformUserScheduleType(scheduleList, userName); + const updateScheduleType = formatHostScheduleScheme(selectedSlots); + const updateMemberScheduleType = formatMemberScheduleScheme(selectedSlots, userName); const postHostAvailableApi = async () => { try { diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 716a6ca0..55489fc8 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -12,8 +12,10 @@ import { useState } from 'react'; function SelectSchedule() { const [step, setStep] = useState('selectTimeSlot'); const { meetingId } = useParams(); - const { data, isLoading } = useGetTimetable(meetingId); - + const { data, isLoading, isError, error } = useGetTimetable(meetingId); + if (isError) { + console.log(err); + } interface TitlesType { [key: string]: { main: string; diff --git a/src/pages/selectSchedule/components/Description.tsx b/src/pages/selectSchedule/components/Description.tsx index e87e25fe..34e88e25 100644 --- a/src/pages/selectSchedule/components/Description.tsx +++ b/src/pages/selectSchedule/components/Description.tsx @@ -1,18 +1,18 @@ -import { formatDuration, formatPlace } from '../utils'; +import { DURATION, PLACE } from '../utils'; import Text from 'components/atomComponents/Text'; import styled from 'styled-components'; import { theme } from 'styles/theme'; interface DescriptionProps { - duration: string; - place: string; + duration: keyof typeof DURATION; + place: keyof typeof PLACE; placeDetail?: string; } function Description({ duration: durationOg, place: placeOg, placeDetail }: DescriptionProps) { - const duration = formatDuration(durationOg); - const place = formatPlace(placeOg); + const duration = DURATION[durationOg]; + const place = PLACE[placeOg]; return ( diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts index 2ecdbfda..c67e1152 100644 --- a/src/pages/selectSchedule/utils.ts +++ b/src/pages/selectSchedule/utils.ts @@ -1,42 +1,19 @@ import { SelectedSlotType } from 'components/timetableComponents/context'; -/** - * - * @desc 영어로 표현된 회의 진행 시간을 한글로 변환하는 함수 - */ -export const formatDuration = (duration: string): string => { - switch (duration) { - case 'HALF': - return '30분'; - case 'HOUR': - return '1시간'; - case 'HOUR_HALF': - return '1시간 30분'; - case 'TWO_HOUR': - return '2시간'; - case 'TWO_HOUR_HALF': - return '2시간 30분'; - case 'THREE_HOUR': - return '3시간'; - default: - return 'UNDEFINED'; - } -}; +export const DURATION = { + HALF: '30분', + HOUR: '1시간', + HOUR_HALF: '1시간 30분', + TWO_HOUR: '2시간', + TWO_HOUR_HALF: '2시간 30분', + THREE_HOUR: '3시간', +} as const; -/** - * - * @desc 영어로 표현된 회의 장소를 한글로 변환하는 함수 - */ -export const formatPlace = (place: string) => { - switch (place) { - case 'ONLINE': - return '온라인'; - case 'OFFLINE': - return '오프라인'; - case 'UNDEFINED': - return undefined; - } -}; +export const PLACE = { + ONLINE: '온라인', + OFFLINE: '오프라인', + UNDEFINED: undefined, +} as const; /** * @@ -56,3 +33,50 @@ export const resetPriorities = (selectedSlots: SelectedSlotType): SelectedSlotTy return updatedSlots; }; + +/** + * + * @desc 방장 시간표 입력 POST를 위한 형식을 맞추는 함수 + */ +export const formatHostScheduleScheme = (selectedSlots: SelectedSlotType) => { + const availableTimes = Object.keys(selectedSlots).map((key) => { + const slot = selectedSlots[parseInt(key)]; + const [month, day, dayOfWeek] = slot.date.split('/'); + + return { + id: key, + month: month.padStart(2, '0'), + day: day.padStart(2, '0'), + dayOfWeek: dayOfWeek, + startTime: slot.startSlot, + endTime: slot.endSlot, + priority: slot.priority, + }; + }); + return availableTimes; +}; + +/** + * + * @desc 멤버 시간표 입력 POST를 위한 형식을 맞추는 함수 + */ +export const formatMemberScheduleScheme = (selectedSlots: SelectedSlotType, userName: string) => { + const availableTimes = Object.keys(selectedSlots).map((key) => { + const slot = selectedSlots[parseInt(key)]; + const [month, day, dayOfWeek] = slot.date.split('/'); + + return { + id: key, + month: month.padStart(2, '0'), + day: day.padStart(2, '0'), + dayOfWeek: dayOfWeek, + startTime: slot.startSlot, + endTime: slot.endSlot, + priority: slot.priority, + }; + }); + return { + name: userName, + availableTimes: availableTimes, + }; +}; diff --git a/src/types/createAvailableSchduleType.ts b/src/types/createAvailableSchduleType.ts index 9f0d7e29..a088bfcd 100644 --- a/src/types/createAvailableSchduleType.ts +++ b/src/types/createAvailableSchduleType.ts @@ -5,7 +5,7 @@ export interface HostAvailableSchduleRequestType { dayOfWeek: string; startTime: string; endTime: string; - priority: number; + priority: 0 | 1 | 2 | 3; } export interface HostAvailableScheduleResponseType { diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts index 736ad991..d2fbb833 100644 --- a/src/utils/apis/useGetTimetable.ts +++ b/src/utils/apis/useGetTimetable.ts @@ -27,7 +27,7 @@ const getTimetable = async (meetingId: string) => { const res = await client.get(`/meeting/${meetingId}/schedule`); return res.data.data; } catch (err) { - console.log(err); + throw new Error(err); } }; @@ -37,10 +37,10 @@ export const useGetTimetable = (meetingId?: string) => { navigate('/error'); throw new Error('잘못된 회의 아이디입니다.'); } - const { data, isLoading } = useQuery({ + const { data, isError, error, isLoading } = useQuery({ queryKey: ['getTimetable', meetingId], queryFn: () => getTimetable(meetingId), }); - return { data, isLoading }; + return { data, isError, error, isLoading }; }; From 63ed9712c0ee9c399bc35a861e6ea1ad366898f6 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 05:09:52 +0900 Subject: [PATCH 21/40] =?UTF-8?q?fix:=20ts=20=EC=97=90=EB=9F=AC=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 --- src/components/timetableComponents/context.ts | 2 +- .../legacy/selectSchedule/SelectModal.tsx | 12 +--- .../selectSchedule/utils/changeApiReq.ts | 67 ------------------- src/pages/selectSchedule/SelectSchedule.tsx | 5 +- src/utils/apis/useGetTimetable.ts | 15 +++-- 5 files changed, 15 insertions(+), 86 deletions(-) delete mode 100644 src/pages/legacy/selectSchedule/utils/changeApiReq.ts diff --git a/src/components/timetableComponents/context.ts b/src/components/timetableComponents/context.ts index d6eb8a77..0d984c5b 100644 --- a/src/components/timetableComponents/context.ts +++ b/src/components/timetableComponents/context.ts @@ -14,7 +14,7 @@ type TimetableContextType = { startSlot?: string; setStartSlot: (startSlot?: string) => void; selectedSlots: SelectedSlotType; - setSelectedSlots: (selectedSlots: SelectedSlotsType) => void; + setSelectedSlots: (selectedSlots: SelectedSlotType) => void; }; export const TimetableContext = createContext({ diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx index a19e6bec..7a7e9dec 100644 --- a/src/pages/legacy/selectSchedule/SelectModal.tsx +++ b/src/pages/legacy/selectSchedule/SelectModal.tsx @@ -1,21 +1,15 @@ -import { - formatHostScheduleScheme, - formatMemberScheduleScheme, - formatSchedulePostScheme, -} from 'pages/selectSchedule/utils'; +import { formatHostScheduleScheme, formatMemberScheduleScheme } from 'pages/selectSchedule/utils'; import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule'; -import { scheduleAtom, userNameAtom } from 'atoms/atom'; -import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq'; import { useNavigate, useParams } from 'react-router'; -import { useRecoilState, useRecoilValue } from 'recoil'; import { ExitIc } from 'components/Icon/icon'; -import { ScheduleStates } from './types/Schedule'; import Text from 'components/atomComponents/Text'; import { isAxiosError } from 'axios'; import styled from 'styled-components/macro'; import { theme } from 'styles/theme'; +import { useRecoilValue } from 'recoil'; import { useTimetableContext } from 'components/timetableComponents/context'; +import { userNameAtom } from 'atoms/atom'; interface ModalProps { setShowModal: (isModalOpen: boolean) => void; diff --git a/src/pages/legacy/selectSchedule/utils/changeApiReq.ts b/src/pages/legacy/selectSchedule/utils/changeApiReq.ts deleted file mode 100644 index 2aac57f0..00000000 --- a/src/pages/legacy/selectSchedule/utils/changeApiReq.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { - HostAvailableSchduleRequestType, - UserAvailableScheduleRequestType, -} from 'src/types/createAvailableSchduleType'; - -import { ScheduleStates } from '../types/Schedule'; - -export const transformHostScheduleType = ( - scheduleList: ScheduleStates[], -): (HostAvailableSchduleRequestType | null)[] => { - return scheduleList.map((item) => { - const matchedResult = item.date.match(/(\d+)월 (\d+)일 \((\S+)\)/); - if (!matchedResult) { - return null; - } - const [, month, day, dateOfWeek] = matchedResult; - - return { - id: item.id.toString(), - month: month.padStart(2, '0'), - day: day.padStart(2, '0'), - dayOfWeek: dateOfWeek, - startTime: item.startTime, - endTime: item.endTime, - priority: item.priority, - }; - }); -}; - -export const transformUserScheduleType = ( - scheduleList: ScheduleStates[], - meetInfo: string, -): UserAvailableScheduleRequestType => { - const availableTimes = scheduleList.map((item) => { - const matchedResult = item.date.match(/(\d+)월 (\d+)일 \((\S+)\)/); - if (!matchedResult) { - return { - id: '', - month: '', - day: '', - dayOfWeek: '', - startTime: '', - endTime: '', - priority: 0, - }; - } - // const [, month, day, dateOfWeek]: string[] | null = item.date.match( - // /(\d+)월 (\d+)일 \((\S+)\)/, - // ); - const [, month, day, dateOfWeek] = matchedResult; - return { - id: item.id.toString(), - month: month.padStart(2, '0'), - day: day.padStart(2, '0'), - dayOfWeek: dateOfWeek, - startTime: item.startTime, - endTime: item.endTime, - priority: item.priority, - }; - }); - - const final: UserAvailableScheduleRequestType = { - name: meetInfo, - availableTimes, - }; - return final; -}; diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 55489fc8..267d2e05 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -12,10 +12,7 @@ import { useState } from 'react'; function SelectSchedule() { const [step, setStep] = useState('selectTimeSlot'); const { meetingId } = useParams(); - const { data, isLoading, isError, error } = useGetTimetable(meetingId); - if (isError) { - console.log(err); - } + const { data, isLoading } = useGetTimetable(meetingId); interface TitlesType { [key: string]: { main: string; diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts index d2fbb833..be7f4ea0 100644 --- a/src/utils/apis/useGetTimetable.ts +++ b/src/utils/apis/useGetTimetable.ts @@ -1,4 +1,7 @@ +import { DURATION, PLACE } from 'pages/selectSchedule/utils'; + import { client } from './axios'; +import { isAxiosError } from 'axios'; import { useNavigate } from 'react-router-dom'; import { useQuery } from '@tanstack/react-query'; @@ -14,8 +17,8 @@ interface TimeSlot { interface getTimetableResponse { data: { - duration: string; - place: string; + duration: keyof typeof DURATION; + place: keyof typeof PLACE; placeDetail: string; availableDates: Date[]; preferTimes: TimeSlot[]; @@ -27,7 +30,9 @@ const getTimetable = async (meetingId: string) => { const res = await client.get(`/meeting/${meetingId}/schedule`); return res.data.data; } catch (err) { - throw new Error(err); + if (isAxiosError(err) && err.response) { + throw new Error(err.response.data.message); + } } }; @@ -37,10 +42,10 @@ export const useGetTimetable = (meetingId?: string) => { navigate('/error'); throw new Error('잘못된 회의 아이디입니다.'); } - const { data, isError, error, isLoading } = useQuery({ + const { data, isLoading } = useQuery({ queryKey: ['getTimetable', meetingId], queryFn: () => getTimetable(meetingId), }); - return { data, isError, error, isLoading }; + return { data, isLoading }; }; From d68f6b3a02b7f183c98d58c518bc3456a892e529 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 05:21:25 +0900 Subject: [PATCH 22/40] =?UTF-8?q?fix:=20=EC=98=A8=EB=B3=B4=EB=94=A9=20swip?= =?UTF-8?q?er=20css=20=EC=A0=81=EC=9A=A9=20=EC=95=88=EB=90=98=EB=8A=94=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 57 +++++++++++------------ src/App.tsx | 2 +- src/pages/createMeeting/CreateMeeting.tsx | 4 -- src/pages/onBoarding/OnBoarding.tsx | 16 +++---- 4 files changed, 37 insertions(+), 42 deletions(-) diff --git a/src/App.css b/src/App.css index a19e07a5..a37449c4 100644 --- a/src/App.css +++ b/src/App.css @@ -1,58 +1,57 @@ #app { - height: 100%; + height: 100%; } html, body { - position: relative; - height: 100%; + position: relative; + height: 100%; } body { - margin: 0; - background: #eee; - padding: 0; - color: #000; - font-family: Helvetica Neue, Helvetica, Arial, sans-serif; - font-size: 14px; + margin: 0; + padding: 0; + color: #000; + font-size: 14px; + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + background: #eee; } .swiper { - z-index: 0; - width: 100%; - height: 100%; + z-index: 0; + width: 100%; + height: 100%; } .swiper-slide { - - /* Center slide text vertically */ - display: flex; - align-items: center; - justify-content: center; - background: #141414; - text-align: center; - font-size: 18px; + /* Center slide text vertically */ + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + text-align: center; + background: #141414; } .swiper-slide img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; + display: block; + width: 100%; + height: 100%; + object-fit: cover; } .swiper-button-prev { - display: none; + display: none; } .swiper-button-next { - display: none; + display: none; } .swiper-pagination-bullet { - background-color: #A4A4A4; + background-color: #a4a4a4 !important; } .swiper-pagination-bullet-active { - background-color: #3253FF; -} \ No newline at end of file + background-color: #3253ff !important; +} diff --git a/src/App.tsx b/src/App.tsx index b279d2c2..75914087 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ -import './App.css'; /**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */ import './utils/changeBrowser'; import 'react-toastify/dist/ReactToastify.css'; +import './App.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx index 006e077f..b99eeccd 100644 --- a/src/pages/createMeeting/CreateMeeting.tsx +++ b/src/pages/createMeeting/CreateMeeting.tsx @@ -43,10 +43,6 @@ function CreateMeeting() { export default CreateMeeting; -const Button = styled.div` - font-size: 5rem; - color: white; -`; const CreateMeetingWrapper = styled.div` display: flex; flex-direction: column; diff --git a/src/pages/onBoarding/OnBoarding.tsx b/src/pages/onBoarding/OnBoarding.tsx index aafc912a..3457f444 100644 --- a/src/pages/onBoarding/OnBoarding.tsx +++ b/src/pages/onBoarding/OnBoarding.tsx @@ -2,19 +2,19 @@ import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; +import { Autoplay, Navigation, Pagination } from 'swiper/modules'; +import { Swiper, SwiperSlide } from 'swiper/react'; + +import Button from 'components/atomComponents/Button'; import CardPng from 'assets/images/card.png'; +import Explain from './components/Explain'; +import Header from 'components/moleculesComponents/Header'; import InsertPng from 'assets/images/insert.png'; +import { Link } from 'react-router-dom'; import MakePng from 'assets/images/make.png'; import PointPng from 'assets/images/point.png'; -import Button from 'components/atomComponents/Button'; import Text from 'components/atomComponents/Text'; -import Header from 'components/moleculesComponents/Header'; -import { Link } from 'react-router-dom'; import styled from 'styled-components/macro'; -import { Autoplay, Navigation, Pagination } from 'swiper/modules'; -import { Swiper, SwiperSlide } from 'swiper/react'; - -import Explain from './components/Explain'; const slides = [ { @@ -60,7 +60,7 @@ function OnBoarding() { pagination={{ clickable: true, }} - navigation={true} + navigation={false} modules={[Autoplay, Pagination, Navigation]} className="mySwiper" > From 9596db2413eb95642a3f705e38748a0d60407ea9 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 22:17:09 +0900 Subject: [PATCH 23/40] =?UTF-8?q?chore:=20=EC=95=88=EC=93=B0=EB=8A=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/selectSchedule/components/Title.tsx | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/pages/selectSchedule/components/Title.tsx diff --git a/src/pages/selectSchedule/components/Title.tsx b/src/pages/selectSchedule/components/Title.tsx deleted file mode 100644 index ee954399..00000000 --- a/src/pages/selectSchedule/components/Title.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import TitleComponents from 'components/moleculesComponents/TitleComponents'; - -interface TitleProps { - mainText: string; - subText: string; -} -function Title({ mainText, subText }: TitleProps) { - return ; -} - -export default Title; From a0c97c306c7c6096ea8a1746b70abedba23c2b13 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 22:20:47 +0900 Subject: [PATCH 24/40] =?UTF-8?q?chore:=20=EC=BD=94=EB=93=9C=20=EA=B0=80?= =?UTF-8?q?=EB=8F=85=EC=84=B1=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/selectSchedule/SelectSchedule.tsx | 13 ++++++----- .../components/SelectScheduleTable.tsx | 22 ++++++++++--------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 63ed0a4e..6d8129f4 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -1,13 +1,14 @@ -import Button from 'components/atomComponents/Button'; -import { DateType } from 'components/timetableComponents/types'; -import Description from './components/Description'; +import { useState } from 'react'; + import Header from 'components/moleculesComponents/Header'; -import SelectScheduleTable from './components/SelectScheduleTable'; -import { Step } from './types'; import TitleComponents from 'components/moleculesComponents/TitleComponents'; +import { DateType } from 'components/timetableComponents/types'; import { getAvailableTimes } from 'components/timetableComponents/utils'; import styled from 'styled-components'; -import { useState } from 'react'; + +import Description from './components/Description'; +import SelectScheduleTable from './components/SelectScheduleTable'; +import { Step } from './types'; /***** api 연결 후 지울 것*****/ diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx index 33a759b1..74af1c80 100644 --- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx +++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx @@ -1,18 +1,19 @@ -import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types'; -import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; -import { Step, StepBtnsType, StepSlotsType } from '../types'; +import { useState } from 'react'; import Button from 'components/atomComponents/Button'; +import Text from 'components/atomComponents/Text'; +import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; +import Timetable from 'components/timetableComponents/Timetable'; +import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types'; +import styled from 'styled-components'; + import PriorityCta from './selectPriority/PriorityCta'; import PriorityDropdown from './selectPriority/PriorityDropdown'; import PrioritySlots from './selectPriority/PrioritySlots'; import SelectionSlots from './selectTimeSlot/SelectionSlots'; -import Text from 'components/atomComponents/Text'; import TimeSlotCta from './selectTimeSlot/TimeSlotCta'; -import Timetable from 'components/timetableComponents/Timetable'; +import { Step, StepBtnsType, StepSlotsType } from '../types'; import { resetPriorities } from '../utils'; -import styled from 'styled-components'; -import { useState } from 'react'; interface SelectScheduleTableProps extends TimetableStructure { step: Step; @@ -36,13 +37,14 @@ function SelectScheduleTable({ ), }; + const stepSlot = stepSlots[step]; const isValidSelection = Object.keys(selectedSlots).length !== 0; - const stepBtns: StepBtnsType = { selectTimeSlot: , selectPriority: , }; + const stepBtn = stepBtns[step]; return ( - {stepSlots[step]} + {stepSlot} {step === 'selectPriority' && } - {stepBtns[step]} + {stepBtn} ); } From d66d3e4c63ee394fc65402406771a29b23b2d226 Mon Sep 17 00:00:00 2001 From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com> Date: Sun, 23 Jun 2024 22:52:07 +0900 Subject: [PATCH 25/40] =?UTF-8?q?fix:=20selectSchedule=EC=97=90=EC=84=9C?= =?UTF-8?q?=20step=20state=20=EC=A0=9C=EA=B1=B0=ED=95=98=EA=B3=A0=20contex?= =?UTF-8?q?t=20api=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 --- src/components/moleculesComponents/Header.tsx | 29 ++++++++------- src/pages/selectSchedule/SelectSchedule.tsx | 36 +++++++++---------- .../components/SelectScheduleTable.tsx | 28 +++++---------- .../components/selectTimeSlot/TimeSlotCta.tsx | 8 ++--- src/pages/selectSchedule/context.ts | 21 +++++++++++ src/pages/selectSchedule/types.ts | 9 ++--- 6 files changed, 69 insertions(+), 62 deletions(-) create mode 100644 src/pages/selectSchedule/context.ts diff --git a/src/components/moleculesComponents/Header.tsx b/src/components/moleculesComponents/Header.tsx index 0fbfa93e..ea3d6242 100644 --- a/src/components/moleculesComponents/Header.tsx +++ b/src/components/moleculesComponents/Header.tsx @@ -2,7 +2,8 @@ import { Dispatch, SetStateAction, useState } from 'react'; import Text from 'components/atomComponents/Text'; import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon'; -import { Step as SelectScheduleStep } from 'pages/selectSchedule/types'; +import { useScheduleStepContext } from 'pages/selectSchedule/context'; +import { ScheduleStepType } from 'pages/selectSchedule/types'; import CopyToClipboard from 'react-copy-to-clipboard'; import { useParams } from 'react-router'; import { useNavigate } from 'react-router-dom'; @@ -16,10 +17,11 @@ import Navigation from './Navigation'; interface HeaderProps { position: string; setFunnelStep?: Dispatch>; - setSelectScheduleStep?: Dispatch>; + setSelectScheduleStep?: Dispatch>; } -function Header({ position, setFunnelStep, setSelectScheduleStep }: HeaderProps) { +function Header({ position, setFunnelStep }: HeaderProps) { + const { scheduleStep, setScheduleStep } = useScheduleStepContext(); const navigationOptions = [ { title: '약속 생성하기', @@ -44,19 +46,16 @@ function Header({ position, setFunnelStep, setSelectScheduleStep }: HeaderProps) }); } }; - const backToSelectSchedule = () =>{ - if (setSelectScheduleStep !== undefined){ - setSelectScheduleStep((prev:SelectScheduleStep)=>{ - if (prev === 'selectTimeSlot'){ - window.history.back() - return prev; - } else if (prev === 'selectPriority'){ - return 'selectTimeSlot' - } - return prev; - }) + const backToSelectSchedule = () => { + if (setScheduleStep !== undefined) { + if (scheduleStep === 'selectTimeSlot') { + window.history.back(); + return; + } else if (scheduleStep === 'selectPriority') { + setScheduleStep('selectTimeSlot'); + } } - } + }; const { meetingId } = useParams(); return ( diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 6d8129f4..e0435132 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -8,7 +8,8 @@ import styled from 'styled-components'; import Description from './components/Description'; import SelectScheduleTable from './components/SelectScheduleTable'; -import { Step } from './types'; +import { ScheduleStepContext } from './context'; +import { ScheduleStepType } from './types'; /***** api 연결 후 지울 것*****/ @@ -52,7 +53,7 @@ const placeDetail = undefined; /***** api 연결 후 지울 것*****/ function SelectSchedule() { - const [step, setStep] = useState('selectTimeSlot'); + const [scheduleStep, setScheduleStep] = useState('selectTimeSlot'); interface TitlesType { [key: string]: { @@ -71,23 +72,20 @@ function SelectSchedule() { }; return ( - -
- {step === 'selectTimeSlot' && ( - - )} - - - + + +
+ {scheduleStep === 'selectTimeSlot' && ( + + )} + + + + ); } diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx index 74af1c80..12bbe941 100644 --- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx +++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx @@ -1,31 +1,19 @@ import { useState } from 'react'; -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; import { SelectedSlotType, TimetableContext } from 'components/timetableComponents/context'; import Timetable from 'components/timetableComponents/Timetable'; import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types'; -import styled from 'styled-components'; import PriorityCta from './selectPriority/PriorityCta'; import PriorityDropdown from './selectPriority/PriorityDropdown'; import PrioritySlots from './selectPriority/PrioritySlots'; import SelectionSlots from './selectTimeSlot/SelectionSlots'; import TimeSlotCta from './selectTimeSlot/TimeSlotCta'; -import { Step, StepBtnsType, StepSlotsType } from '../types'; -import { resetPriorities } from '../utils'; +import { useScheduleStepContext } from '../context'; +import { StepBtnsType, StepSlotsType } from '../types'; -interface SelectScheduleTableProps extends TimetableStructure { - step: Step; - setStep: (step: Step) => void; -} - -function SelectScheduleTable({ - step, - setStep, - timeSlots, - availableDates, -}: SelectScheduleTableProps) { +function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) { + const { scheduleStep } = useScheduleStepContext(); const [startSlot, setStartSlot] = useState(undefined); const [selectedSlots, setSelectedSlots] = useState({}); @@ -37,14 +25,14 @@ function SelectScheduleTable({ ), }; - const stepSlot = stepSlots[step]; + const stepSlot = stepSlots[scheduleStep]; const isValidSelection = Object.keys(selectedSlots).length !== 0; const stepBtns: StepBtnsType = { - selectTimeSlot: , + selectTimeSlot: , selectPriority: , }; - const stepBtn = stepBtns[step]; + const stepBtn = stepBtns[scheduleStep]; return ( {stepSlot} - {step === 'selectPriority' && } + {scheduleStep === 'selectPriority' && } {stepBtn} ); diff --git a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx index 375386b0..5db0c99b 100644 --- a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx +++ b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx @@ -1,20 +1,20 @@ import Button from 'components/atomComponents/Button'; -import { Step } from 'pages/selectSchedule/types'; import Text from 'components/atomComponents/Text'; +import { useScheduleStepContext } from 'pages/selectSchedule/context'; import styled from 'styled-components'; interface TimeSlotCtaProps { isValidSelection: boolean; - setStep: (step: Step) => void; } -function TimeSlotCta({ isValidSelection, setStep }: TimeSlotCtaProps) { +function TimeSlotCta({ isValidSelection }: TimeSlotCtaProps) { + const { setScheduleStep } = useScheduleStepContext(); return (