From eb9d15e7f86871785237743068efd1e23011537b Mon Sep 17 00:00:00 2001 From: ljh0608 Date: Fri, 19 Jul 2024 14:06:46 +0000 Subject: [PATCH] Merge pull request #281 from ASAP-as-soon-as-possible/feat/#260/CDtoPersonalRepo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [Feat/#260] 폴더명 대소문자 변경 --- src/pages/createMeeting/CreateMeeting.tsx | 2 +- .../components/ReturnBodyComponent.tsx | 2 - .../components/ReturnTitleComponent.tsx | 5 - .../components/useFunnel/SetDates.tsx | 2 +- .../components/useFunnel/SetTimes.tsx | 277 ------------------ .../createMeeting/data/meetingInfoData.ts | 1 - 6 files changed, 2 insertions(+), 287 deletions(-) delete mode 100644 src/pages/createMeeting/components/useFunnel/SetTimes.tsx diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx index 5c9563c5..f0c5f6a1 100644 --- a/src/pages/createMeeting/CreateMeeting.tsx +++ b/src/pages/createMeeting/CreateMeeting.tsx @@ -11,7 +11,7 @@ import { MeetingInfo } from './types/useFunnelInterface'; const initialMeetingInfo: MeetingInfo = { title: '', availableDates: [''], - preferTimes: [{ startTime: '00:00', endTime: '00:00' }], + preferTimes: [{ startTime: '06:00', endTime: '24:00' }], place: '', placeDetail: '', duration: '', diff --git a/src/pages/createMeeting/components/ReturnBodyComponent.tsx b/src/pages/createMeeting/components/ReturnBodyComponent.tsx index 8bab5abe..bd4b1784 100644 --- a/src/pages/createMeeting/components/ReturnBodyComponent.tsx +++ b/src/pages/createMeeting/components/ReturnBodyComponent.tsx @@ -7,7 +7,6 @@ import SetDates from './useFunnel/SetDates'; import SetDuration from './useFunnel/SetDuration'; import SetHostInfo from './useFunnel/SetHostInfo'; import SetPlace from './useFunnel/SetPlace'; -import SetTimes from './useFunnel/SetTimes'; import SetTitle from './useFunnel/SetTitle'; import { MeetingInfo } from '../types/useFunnelInterface'; @@ -21,7 +20,6 @@ interface BodyProps { const BodyType: { [key: string]: React.JSXElementConstructor } = { title: SetTitle, availableDates: SetDates, - preferTimes: SetTimes, place: SetPlace, duration: SetDuration, hostInfo: SetHostInfo, diff --git a/src/pages/createMeeting/components/ReturnTitleComponent.tsx b/src/pages/createMeeting/components/ReturnTitleComponent.tsx index 2fef188a..1e791cb5 100644 --- a/src/pages/createMeeting/components/ReturnTitleComponent.tsx +++ b/src/pages/createMeeting/components/ReturnTitleComponent.tsx @@ -15,10 +15,6 @@ const funnelSteps: FunnelSteps = { main: '고려 중인 회의 날짜는 언제인가요?', sub: '하나의 방식을 골라 후보 날짜를 입력해주세요', }, - preferTimes: { - main: '어느 시간대를 선호하세요?', - sub: '선호하는 회의 시간대를 모두 선택해주세요', - }, place: { main: '회의 장소를 입력해주세요', sub: '회의 방식과 장소를 알려주세요', @@ -43,7 +39,6 @@ interface ReturnProps { function ReturnTitleComponent({ step }: ReturnProps) { const currentStep = funnelSteps[step]; - return ; } diff --git a/src/pages/createMeeting/components/useFunnel/SetDates.tsx b/src/pages/createMeeting/components/useFunnel/SetDates.tsx index 768b3825..25cee7fe 100644 --- a/src/pages/createMeeting/components/useFunnel/SetDates.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetDates.tsx @@ -134,7 +134,7 @@ function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { meetingInfo.availableDates.length < 8) ? () => setStep((prev) => { - if (prev === 6) { + if (prev === 5) { return prev; } return prev + 1; diff --git a/src/pages/createMeeting/components/useFunnel/SetTimes.tsx b/src/pages/createMeeting/components/useFunnel/SetTimes.tsx deleted file mode 100644 index 0a79fe03..00000000 --- a/src/pages/createMeeting/components/useFunnel/SetTimes.tsx +++ /dev/null @@ -1,277 +0,0 @@ -import { useEffect, useState } from 'react'; - -import Button from 'components/atomComponents/Button'; -import Text from 'components/atomComponents/Text'; -import { DropDownIc, DropUpIc, Wave } from 'components/Icon/icon'; -import { directInputButton, preferTimeType } from 'pages/createMeeting/data/meetingInfoData'; -import { FunnelProps, PreferTimeInfo } from 'pages/createMeeting/types/useFunnelInterface'; -import styled from 'styled-components/macro'; - -import { timeList } from '../../data/meetingInfoData'; -import StartDropDown from '../StartDropDown'; - -function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { - const [preferTimes, setPreferTimes] = useState(preferTimeType); - const [directInput, setDirectInput] = useState(directInputButton); - const [startDropDown, setStartDropDown] = useState(false); - const [endDropDown, setEndDropDown] = useState(false); - - const getDate = (btnState: boolean, startTime: string, endTime: string) => { - if (!btnState) { - setMeetingInfo((prev) => ({ - ...prev, - preferTimes: [...prev.preferTimes, { startTime: startTime, endTime: endTime }], - })); - } else { - setMeetingInfo((prev) => ({ - ...prev, - preferTimes: prev.preferTimes.filter( - (time) => !(time.startTime === startTime && time.endTime === endTime), - ), - })); - } - }; - - const filterDate = () => { - setMeetingInfo((prev) => ({ - ...prev, - preferTimes: prev.preferTimes.filter( - (time) => !(time.startTime === '00:00' && time.endTime === '00:00'), - ), - })); - }; - - const deletePreferTimes = () => { - setMeetingInfo((prev) => ({ - ...prev, - preferTimes: [{ startTime: '00:00', endTime: '00:00' }], - })); - }; - - const onClickDirectBtn = () => { - setDirectInput((prev) => ({ - ...prev, - btnState: !prev.btnState, - })); - - setPreferTimes((prev) => { - const updatePreferTime = prev.map((btn) => { - return { - ...btn, - btnState: false, - }; - }); - return updatePreferTime; - }); - deletePreferTimes(); - }; - - const buttonStateHandler = () => { - if ( - meetingInfo.preferTimes.length >= 2 || - (meetingInfo.preferTimes[0].startTime !== '00:00' && - meetingInfo.preferTimes[0].endTime !== '00:00') - ) { - return true; - } - - return false; - }; - useEffect( - () => { - if ( - meetingInfo.preferTimes && - meetingInfo.preferTimes[0] && - parseInt(meetingInfo.preferTimes[0].startTime) >= - parseInt(meetingInfo.preferTimes[0].endTime) - ) { - if (meetingInfo.preferTimes[0].endTime !== '00:00') { - alert('종료 시간은 시작 시간 이후로 설정해주세요!'); - deletePreferTimes(); - } - } - }, - [meetingInfo.preferTimes[0].startTime, meetingInfo.preferTimes[0].endTime], - ); - - useEffect(() => { - deletePreferTimes(); - }, []); - return ( - - - {preferTimes.map((preferTime, i) => { - return ( - - ); - })} - - {directInput.btnState ? ( - - setStartDropDown((prev) => !prev)}> - {meetingInfo.preferTimes[0].startTime} - {startDropDown ? : } - {startDropDown && ( - - {timeList.map((time, i) => ( - - ))} - - )} - - - setEndDropDown((prev) => !prev)}> - {meetingInfo.preferTimes[0].endTime} - {endDropDown ? : } - {endDropDown && ( - - {timeList.map((time, i) => ( - - ))} - - )} - - - ) : ( -
- )} - - - - - - - ); -} - -export default SetTimes; - -const SetTimesWrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - width: 100%; -`; - -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; -`; - -const SetTimeSection = styled.section` - display: flex; - flex-direction: column; - gap: 1rem; - width: 100%; -`; - -const DropDownWrapper = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - - width: 100%; - height: 4.8rem; -`; - -const DropDownSelect = styled.div<{ $drop: boolean }>` - display: flex; - position: relative; - justify-content: center; - margin-top: 0.6rem; - border-radius: 1rem; - 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}; - cursor: pointer; - width: 15.1rem; - height: 4.8rem; - text-align: center; - - color: ${({ theme }) => theme.colors.grey5}; -`; - -const DropDownIcon = styled(DropDownIc)` - position: absolute; - top: 2rem; - right: 2rem; - z-index: 1; -`; - -const DropUpIcon = styled(DropUpIc)` - position: absolute; - top: 2rem; - right: 2rem; - z-index: 1; -`; - -const DropDownContainer = styled.div` - position: absolute; - z-index: 2; - margin-top: 4.8rem; - border-bottom-left-radius: 0.8rem; - border-bottom-right-radius: 0.8rem; - background-color: white; - width: 15.1rem; - height: 14.4rem; - overflow: auto; -`; diff --git a/src/pages/createMeeting/data/meetingInfoData.ts b/src/pages/createMeeting/data/meetingInfoData.ts index e8cf777a..c55b84b3 100644 --- a/src/pages/createMeeting/data/meetingInfoData.ts +++ b/src/pages/createMeeting/data/meetingInfoData.ts @@ -61,7 +61,6 @@ export const timeList = [ export const funnelStep = [ 'title', 'availableDates', - 'preferTimes', 'place', 'duration', 'hostInfo',