From 887f8e9d2ebfdddf2731ce9392d9333a3a0c4d05 Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Mon, 29 Jul 2024 14:53:42 +0900 Subject: [PATCH 01/45] =?UTF-8?q?fix:=20=EB=84=A4=EB=B9=84=EA=B2=8C?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=AA=A8=EB=8B=AC=20z-index=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/components/moleculesComponents/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/moleculesComponents/Header.tsx b/src/components/moleculesComponents/Header.tsx index 0ac32bf3..3fbc7d6f 100644 --- a/src/components/moleculesComponents/Header.tsx +++ b/src/components/moleculesComponents/Header.tsx @@ -160,7 +160,7 @@ const NavigationSection = styled.section` position: absolute; top: 0; right: 0; - z-index: 1; + z-index: 2; background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100vh; From b83bb5ec029efd46b5566a6c7ef4575c1c90ac7d Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Mon, 29 Jul 2024 15:05:52 +0900 Subject: [PATCH 02/45] =?UTF-8?q?fix:=20x=EB=B2=84=ED=8A=BC=20=EB=84=A4?= =?UTF-8?q?=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=EB=B0=94=EC=97=90=20?= =?UTF-8?q?=EC=A0=95=EC=83=81=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/moleculesComponents/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/moleculesComponents/Header.tsx b/src/components/moleculesComponents/Header.tsx index 3fbc7d6f..fb99f231 100644 --- a/src/components/moleculesComponents/Header.tsx +++ b/src/components/moleculesComponents/Header.tsx @@ -113,10 +113,10 @@ function Header({ position, setFunnelStep }: HeaderProps) { {isNaviOpen ? ( + setIsNaviOpen((prev) => !prev)}> - From 453786a0298990294971c05f0593f6e0ab057994 Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Mon, 29 Jul 2024 17:26:26 +0900 Subject: [PATCH 03/45] =?UTF-8?q?fix:=20=EC=8B=9C=EA=B0=84=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=EB=A1=9C=EC=A7=81=EC=97=90=EC=84=9C=20=EB=92=A4?= =?UTF-8?q?=EB=A1=9C=EA=B0=80=EA=B8=B0=ED=96=88=EC=9D=84=20=EB=95=8C=20?= =?UTF-8?q?=EC=9A=B0=EC=84=A0=EC=88=9C=EC=9C=84=20=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SelectScheduleTable.tsx | 20 ++++++++++++++++++- .../selectTimeSlot/SelectionColumn.tsx | 2 ++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx index 75f39dae..a73152b1 100644 --- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx +++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import Timetable from 'components/timetableComponents/Timetable'; import { ColumnStructure, TimetableStructure } from 'components/timetableComponents/types'; @@ -8,6 +8,7 @@ import PriorityCta from './selectPriority/PriorityCta'; import PriorityDropdown from './selectPriority/PriorityDropdown'; import SelectionColumn from './selectTimeSlot/SelectionColumn'; import TimeSlotCta from './selectTimeSlot/TimeSlotCta'; + import { useScheduleStepContext } from '../contexts/useScheduleStepContext'; import { SelectContext, SelectedSlotType } from '../contexts/useSelectContext'; import { StepSlotsType, StepbottomItemsType } from '../types'; @@ -39,6 +40,23 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) }; const bottomItem = bottomItems[scheduleStep]; + useEffect( + () => { + if (scheduleStep === 'selectTimeSlot') { + const resetPriorities = () => { + const updatedSchedules = Object.entries(selectedSlots).map((schedule) => { + if (schedule[1] && typeof schedule[1] === 'object') { + return [schedule[0], { ...schedule[1], priority: 0 }]; + } + return schedule; + }); + setSelectedSlots(Object.fromEntries(updatedSchedules)); + }; + resetPriorities(); + } + }, + [scheduleStep], + ); return ( slot.date === date, ); From 3288a6d89a775d96893b0f255bbfeb1af90b4fcf Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Tue, 30 Jul 2024 00:21:57 +0900 Subject: [PATCH 04/45] =?UTF-8?q?feat:=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=EB=82=A0?= =?UTF-8?q?=EC=A7=9C/=EC=8B=9C=EA=B0=84=EC=88=9C=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../selectPriority/PriorityDropdown.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx index 83b5b9fd..902c813f 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -20,6 +20,18 @@ function PriorityDropdown() { const { selectedSlots, setSelectedSlots } = useSelectContext(); const [isOpenDropDown, setIsOpenDropDown] = useState([false, false, false]); + //우선 순위 시간순 정렬을 위한 날짜 시간 파싱함수 + const parseDateTime = (dateStr: string, timeStr: string) => { + const [month, day] = dateStr.split('/'); + const formatDay = day.padStart(2, '0'); + const [hour, minute] = timeStr.split(':'); + return Number(month + formatDay + hour + minute); + }; + + const sortedSlots = Object.entries(selectedSlots).toSorted( + (a, b) => parseDateTime(a[1].date, a[1].startSlot) - parseDateTime(b[1].date, b[1].startSlot), + ); + const formatDate = (date: string) => { const [month, day, dayOfWeek] = date.split('/'); return `${month}/${day}(${dayOfWeek})`; @@ -83,7 +95,7 @@ function PriorityDropdown() { const updatedSelectedSlots = Object.entries(prev).reduce( (acc, [key, value]) => { const prevSelectedSlotKey = parseInt(key); - //선택된 우선순위가 기존에 존재할 경우 0으로 초기화 + //우선순위를 선택한 후 다시 설정할 경우 기존 priority 0으로 초기화 if (value.priority === selectedPriority) { acc[prevSelectedSlotKey] = { ...value, priority: 0 }; } else { @@ -166,7 +178,7 @@ function PriorityDropdown() { {isOpenDropDown[idx] && ( - {Object.entries(selectedSlots).map( + {sortedSlots.map( ([key, value]) => !value.priority && ( handlePriority(idx, value, key)}> From 9c0ba8fda829f0c57b2d06fcfdbe3c5367b70301 Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Tue, 30 Jul 2024 00:49:06 +0900 Subject: [PATCH 05/45] =?UTF-8?q?refactor:=20=EC=A4=91=EB=B3=B5=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../selectPriority/PriorityDropdown.tsx | 48 ++++--------------- 1 file changed, 10 insertions(+), 38 deletions(-) diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx index 902c813f..f872e9f8 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -37,22 +37,16 @@ function PriorityDropdown() { return `${month}/${day}(${dayOfWeek})`; }; - let defaultInput1 = ''; - let defaultInput2 = ''; - let defaultInput3 = ''; - for (const key in selectedSlots) { - const item = selectedSlots[key]; + const defaultInputs = Array(3).fill(''); + Object.values(selectedSlots).forEach((item) => { const date = formatDate(item.date); const endSlot = addMinutes(item.endSlot, 30); - if (item.priority === 3) { - defaultInput1 = `${date} ${item.startSlot}~${endSlot}`; - } else if (item.priority === 2) { - defaultInput2 = `${date} ${item.startSlot}~${endSlot}`; - } else if (item.priority === 1) { - defaultInput3 = `${date} ${item.startSlot}~${endSlot}`; + if (item.priority > 0) { + defaultInputs[3 - item.priority] = `${date} ${item.startSlot}~${endSlot}`; } - } - const [input_, setInput] = useState([defaultInput1, defaultInput2, defaultInput3]); + }); + + const [input_, setInput] = useState(defaultInputs); const handleDropdown = (idx: number) => { //dropdown이 열려있을 때 @@ -74,22 +68,7 @@ function PriorityDropdown() { const handlePriority = (idx: number, item: SelectSlotType, stringSelectedSlotKey: string) => { const selectedSlotKey = parseInt(stringSelectedSlotKey); - let selectedPriority: 0 | 1 | 2 | 3 = 0; - switch (idx) { - case 0: - selectedPriority = 3; - break; - case 1: - selectedPriority = 2; - break; - case 2: - selectedPriority = 1; - break; - default: - selectedPriority = 0; - break; - } - + const selectedPriority = 3 - idx; //이전 상태를 순회하면서 선택된 우선순위를 가지고 있는 데이터를 우선순위 0으로 초기화 setSelectedSlots((prev: SelectedSlotType) => { const updatedSelectedSlots = Object.entries(prev).reduce( @@ -121,15 +100,8 @@ function PriorityDropdown() { const updatedInput = [...prev]; const endSlot = addMinutes(item.endSlot, 30); const date = formatDate(item.date); - if (idx === 0) { - updatedInput[idx] = `${date} ${item.startSlot}~${endSlot}`; - } else if (idx === 1) { - updatedInput[idx] = `${date} ${item.startSlot}~${endSlot}`; - } else if (idx === 2) { - updatedInput[idx] = `${date} ${item.startSlot}~${endSlot}`; - } else { - updatedInput[idx] = 'error'; - } + + updatedInput[idx] = `${date} ${item.startSlot}~${endSlot}`; return updatedInput; }); handleDropdown(idx); From 6a94a1132725063c00585dff28d9c664bf6505a1 Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Tue, 30 Jul 2024 01:01:28 +0900 Subject: [PATCH 06/45] =?UTF-8?q?refactor:=20=EB=B7=B0=20=20=EC=A4=91?= =?UTF-8?q?=EB=B3=B5=EC=BD=94=EB=93=9C=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../selectPriority/PriorityDropdown.tsx | 27 +++---------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx index f872e9f8..aa2fd9c0 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -118,15 +118,7 @@ function PriorityDropdown() { {`${idx + 1}`}순위 - {idx === 0 ? ( - - ) : idx === 1 ? ( - - ) : idx === 2 ? ( - - ) : ( -
- )} + {idx === 0 ? : idx === 1 ? : } handleDropdown(idx)} value={input_[idx]} /> - - {isOpenDropDown[idx] ? ( - - {' '} - - ) : ( - - - - )} - + + {isOpenDropDown[idx] ? : } + {isOpenDropDown[idx] && ( {sortedSlots.map( @@ -206,9 +190,6 @@ const TextWrapper = styled.div` left: 50%; transform: translate(-50%, -50%); `; -const Circle1Icon = styled(Circle1Ic)``; -const Circle2Icon = styled(Circle2Ic)``; -const Circle3Icon = styled(Circle3Ic)``; const InputWrapper = styled.div` position: relative; From 6e833aa16888d61506ada4bc819c5c3f3df0e2dc Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Tue, 30 Jul 2024 02:08:07 +0900 Subject: [PATCH 07/45] =?UTF-8?q?fix:=20toSorted=20=EB=B0=B0=ED=8F=AC?= =?UTF-8?q?=EC=83=81=20=EC=9D=B4=EC=8A=88=EB=A1=9C=20slice=EB=A9=94?= =?UTF-8?q?=EC=86=8C=EB=93=9C=EC=99=80=20sort=EB=A9=94=EC=86=8C=EB=93=9C?= =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=EC=9C=BC=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 --- .../components/selectPriority/PriorityDropdown.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx index aa2fd9c0..f1b2a5ee 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -28,9 +28,11 @@ function PriorityDropdown() { return Number(month + formatDay + hour + minute); }; - const sortedSlots = Object.entries(selectedSlots).toSorted( - (a, b) => parseDateTime(a[1].date, a[1].startSlot) - parseDateTime(b[1].date, b[1].startSlot), - ); + const sortedSlots = Object.entries(selectedSlots) + .slice() + .sort( + (a, b) => parseDateTime(a[1].date, a[1].startSlot) - parseDateTime(b[1].date, b[1].startSlot), + ); const formatDate = (date: string) => { const [month, day, dayOfWeek] = date.split('/'); From 00fc5d59234f7fcd6a11a606ec043484439c5e15 Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Wed, 7 Aug 2024 18:26:53 +0900 Subject: [PATCH 08/45] =?UTF-8?q?refactor:=20useEffect=20=EB=82=B4?= =?UTF-8?q?=EB=B6=80=20=ED=95=A8=EC=88=98=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SelectScheduleTable.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx index a73152b1..74e21913 100644 --- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx +++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx @@ -40,19 +40,21 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) }; const bottomItem = bottomItems[scheduleStep]; + const resetPriorities = (selectedSlots: SelectedSlotType) => { + const updatedSelectedSlots: SelectedSlotType = {}; + for (const key in selectedSlots) { + updatedSelectedSlots[key] = { + ...selectedSlots[key], + priority: 0, + }; + } + setSelectedSlots(updatedSelectedSlots); + }; + useEffect( () => { if (scheduleStep === 'selectTimeSlot') { - const resetPriorities = () => { - const updatedSchedules = Object.entries(selectedSlots).map((schedule) => { - if (schedule[1] && typeof schedule[1] === 'object') { - return [schedule[0], { ...schedule[1], priority: 0 }]; - } - return schedule; - }); - setSelectedSlots(Object.fromEntries(updatedSchedules)); - }; - resetPriorities(); + resetPriorities(selectedSlots); } }, [scheduleStep], From badc10ecd8db4c302ab459ecf7918b4a6474b7f5 Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Fri, 9 Aug 2024 01:37:25 +0900 Subject: [PATCH 09/45] =?UTF-8?q?fix:=20=EC=9A=B0=EC=84=A0=EC=88=9C?= =?UTF-8?q?=EC=9C=84=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/selectPriority/PriorityCta.tsx | 1 + .../components/selectTimeSlot/TimeSlotCta.tsx | 16 ++++++++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx index 61709cdd..917847aa 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx @@ -7,6 +7,7 @@ import styled from 'styled-components'; function PriorityCta() { const [isModalOpen, setIsModalOpen] = useState(false); + return ( <> diff --git a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx index d021e1aa..25bbdc5b 100644 --- a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx +++ b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx @@ -1,19 +1,31 @@ import Button from 'components/atomComponents/Button'; import Text from 'components/atomComponents/Text'; import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext'; -import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext'; +import { SelectedSlotType, useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext'; import styled from 'styled-components'; function TimeSlotCta() { + const { selectedSlots, setSelectedSlots } = useSelectContext(); const { setScheduleStep } = useScheduleStepContext(); - const { selectedSlots } = useSelectContext(); const isValidSelection = Object.keys(selectedSlots).length !== 0; + + const resetPriorities = (selectedSlots: SelectedSlotType) => { + const updatedSelectedSlots: SelectedSlotType = {}; + for (const key in selectedSlots) { + updatedSelectedSlots[key] = { + ...selectedSlots[key], + priority: 0, + }; + } + setSelectedSlots(updatedSelectedSlots); + }; return (