diff --git a/src/components/atomComponents/PasswordInput.tsx b/src/components/atomComponents/PasswordInput.tsx index a1054823..619782b9 100644 --- a/src/components/atomComponents/PasswordInput.tsx +++ b/src/components/atomComponents/PasswordInput.tsx @@ -16,6 +16,7 @@ function PasswordInput({ value, placeholder, passWordOnChange, page }: ValueProp const [inputType, setInputType] = useState(true); const changePasswordType = () => { + console.log(inputType); setInputType((prev) => !prev); }; return ( @@ -26,7 +27,7 @@ function PasswordInput({ value, placeholder, passWordOnChange, page }: ValueProp value={value} onChange={passWordOnChange} $iserror={value.length < 4} - type={inputType ? `number` : undefined} + type={inputType ? 'password' : `number`} inputMode="numeric" /> diff --git a/src/pages/LoginEntrance/LoginEntrance.tsx b/src/pages/LoginEntrance/LoginEntrance.tsx index b242624b..09544337 100644 --- a/src/pages/LoginEntrance/LoginEntrance.tsx +++ b/src/pages/LoginEntrance/LoginEntrance.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import styled from 'styled-components/macro'; diff --git a/src/pages/LoginEntrance/components/HostComponent.tsx b/src/pages/LoginEntrance/components/HostComponent.tsx index 780851d3..87e19b5a 100644 --- a/src/pages/LoginEntrance/components/HostComponent.tsx +++ b/src/pages/LoginEntrance/components/HostComponent.tsx @@ -1,6 +1,6 @@ import React, { Dispatch, SetStateAction, useState } from 'react'; -import axios from 'axios'; +import { isAxiosError } from 'axios'; import Button from 'components/atomComponents/Button'; import PasswordInput from 'components/atomComponents/PasswordInput'; import Text from 'components/atomComponents/Text'; @@ -48,34 +48,28 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) { const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); const loginHost = async () => { - console.log('first'); try { const { data } = await client.post(`/user/${meetingId}/host`, hostInfo); - console.log(data); if (data.code === 200) { localStorage.setItem('hostToken', data.data.accessToken); navigate(`/host/${meetingId}`); - } else if (data.code === 401) { - setIsLoginModalOpen(true); } else { console.log(data.message); } } catch (err) { - //현재 err는 객체를 보내주지 않아서 다른 에러도 이 로직이 실행될 문제가 있음 - - if (axios.isAxiosError(err)) { + if (isAxiosError(err)) { // // axios에서 발생한 error - // console.log(err.response); - // } // const err = e as AxiosError; if (err.response) { //타입 가드 사용 - if (err.response.status === 403) { + if (err.response.status === 400) { + setIsLoginModalOpen(true); + } else if (err.response.status === 401) { + setIsLoginModalOpen(true); + } else if (err.response.status === 403) { console.log(err.response.data.message); setIsModalOpen(true); - } else if (err.response.status === 400) { - setIsLoginModalOpen(true); } else { console.log(err.response.status); console.log(err.response.data.message); diff --git a/src/pages/SteppingStone/SteppingLayout.tsx b/src/pages/SteppingStone/SteppingLayout.tsx index 47709bac..b7f21bb4 100644 --- a/src/pages/SteppingStone/SteppingLayout.tsx +++ b/src/pages/SteppingStone/SteppingLayout.tsx @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'; import Header from 'components/moleculesComponents/Header'; import { useNavigate, useParams } from 'react-router-dom'; import styled from 'styled-components/macro'; -import { authClient, client } from 'utils/apis/axios'; +import { client } from 'utils/apis/axios'; import SteppingBody from './components/SteppingBody'; import SteppingBtnSection from './components/SteppingBtnSection'; @@ -38,12 +38,32 @@ function SteppingLayout({ steppingType }: SteppingProps) { [steppingType], ); + const handlePopstate = () => { + alert('handle 작동'); + navigate('/'); + }; + + useEffect(() => { + return () => { + window.addEventListener('popstate', handlePopstate); + }; + }, []); + + // useEffect(() => { + // history.pushState(null, '', location.href); + // console.log(location.href); + // window.onpopstate = function() { + // history.go(1); + // }; + // }, []); + return ( <>
+
); diff --git a/src/pages/SteppingStone/components/SteppingBody.tsx b/src/pages/SteppingStone/components/SteppingBody.tsx index 618eaf2b..a27f552f 100644 --- a/src/pages/SteppingStone/components/SteppingBody.tsx +++ b/src/pages/SteppingStone/components/SteppingBody.tsx @@ -1,10 +1,11 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import stepingCheck from 'assets/images/steppingCheck.png'; import stepingFinish from 'assets/images/steppingFinish.png'; import stepingInsert from 'assets/images/steppingInsert.png'; import stepingPlus from 'assets/images/steppingPlus.png'; import Text from 'components/atomComponents/Text'; +import { useNavigate } from 'react-router-dom'; import styled from 'styled-components/macro'; import { theme } from 'styles/theme'; diff --git a/src/pages/createMeeting/CreateMeeting.tsx b/src/pages/createMeeting/CreateMeeting.tsx index 96dc4bea..5759f390 100644 --- a/src/pages/createMeeting/CreateMeeting.tsx +++ b/src/pages/createMeeting/CreateMeeting.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import Header from 'components/moleculesComponents/Header'; import ReturnBodyComponent from 'pages/createMeeting/components/ReturnBodyComponent'; @@ -11,7 +11,7 @@ import { MeetingInfo } from './types/useFunnelInterface'; const initialMeetingInfo: MeetingInfo = { title: '', availableDates: [''], - preferTimes: [], + preferTimes: [{ startTime: '00:00', endTime: '00:00' }], place: '', placeDetail: '', duration: '', diff --git a/src/pages/createMeeting/components/StartDropDown.tsx b/src/pages/createMeeting/components/StartDropDown.tsx index a8f53217..ce8f0999 100644 --- a/src/pages/createMeeting/components/StartDropDown.tsx +++ b/src/pages/createMeeting/components/StartDropDown.tsx @@ -4,22 +4,21 @@ import Text from 'components/atomComponents/Text'; import styled from 'styled-components/macro'; import { theme } from 'styles/theme'; -import { timeList } from '../data/meetingInfoData'; import { MeetingInfo } from '../types/useFunnelInterface'; interface PropTypes { time: string; type: string; - setIsOpen: Dispatch>; + setMeetingInfo: Dispatch>; } -function StartDropDown({ time, type, setIsOpen, setMeetingInfo }: PropTypes) { +function StartDropDown({ time, type, setMeetingInfo }: PropTypes) { const getTime = (time: string) => { if (type == 'start') { setMeetingInfo((prev) => ({ ...prev, - preferTimes: [{ startTime: time, endTime: '00:00' }], + preferTimes: [{ startTime: time, endTime: prev.preferTimes[0].endTime }], })); } else if (type == 'end') { setMeetingInfo((prev) => ({ diff --git a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx index 7ba9b725..fc86d9e1 100644 --- a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx @@ -1,5 +1,6 @@ -import React, { useState } from 'react'; +import React from 'react'; +import { isAxiosError } from 'axios'; import Button from 'components/atomComponents/Button'; import Text from 'components/atomComponents/Text'; import TextAreaInput from 'components/atomComponents/TextAreaInput'; @@ -29,7 +30,14 @@ function SetAdditionalInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps }, }); } catch (err) { - console.log(err); + if (isAxiosError(err) && err.response) { + if (err.response.status === (400 || 500)) { + console.log(err.response.data.message); + } else { + console.log(err.response.data.code); + } + navigate('/error'); + } } }; diff --git a/src/pages/createMeeting/components/useFunnel/SetTimes.tsx b/src/pages/createMeeting/components/useFunnel/SetTimes.tsx index 31ae0397..1612a9b8 100644 --- a/src/pages/createMeeting/components/useFunnel/SetTimes.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetTimes.tsx @@ -18,27 +18,33 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { const getDate = (btnState: boolean, startTime: string, endTime: string) => { if (!btnState) { - // btnState가 true인 경우 preferTimes에 객체를 추가 setMeetingInfo((prev) => ({ ...prev, preferTimes: [...prev.preferTimes, { startTime: startTime, endTime: endTime }], })); } else { - console.log(btnState); - // btnState가 false인 경우 해당 startTime과 endTime을 가진 객체를 preferTimes에서 삭제 setMeetingInfo((prev) => ({ ...prev, preferTimes: prev.preferTimes.filter( - (time) => time.startTime !== startTime && time.endTime !== endTime, + (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: [], + preferTimes: [{ startTime: '00:00', endTime: '00:00' }], })); }; @@ -60,9 +66,18 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { 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( () => { - console.log(meetingInfo.preferTimes[0]); if ( meetingInfo.preferTimes && meetingInfo.preferTimes[0] && @@ -75,8 +90,12 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { } } }, - [meetingInfo.preferTimes], + [meetingInfo.preferTimes[0].startTime, meetingInfo.preferTimes[0].endTime], ); + + useEffect(() => { + deletePreferTimes(); + }, []); return ( @@ -121,11 +140,7 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { {directInput.btnState ? ( setStartDropDown((prev) => !prev)}> - {meetingInfo.preferTimes.length > 0 ? ( - {meetingInfo.preferTimes[0].startTime} - ) : ( - 00:00 - )} + {meetingInfo.preferTimes[0].startTime} {startDropDown ? : } {startDropDown && ( @@ -134,7 +149,6 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { key={time + i} type={'start'} time={time} - setIsOpen={setStartDropDown} setMeetingInfo={setMeetingInfo} /> ))} @@ -143,11 +157,7 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { setEndDropDown((prev) => !prev)}> - {meetingInfo.preferTimes.length > 0 ? ( - {meetingInfo.preferTimes[0].endTime} - ) : ( - 00:00 - )} + {meetingInfo.preferTimes[0].endTime} {endDropDown ? : } {endDropDown && ( @@ -156,7 +166,6 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { key={time + i} type={'end'} time={time} - setIsOpen={setEndDropDown} setMeetingInfo={setMeetingInfo} /> ))} @@ -179,16 +188,16 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { : 'primaryDisabled' } onClick={ - meetingInfo.preferTimes.length >= 1 && - meetingInfo.preferTimes[0].startTime && - meetingInfo.preferTimes[0].endTime !== '00:00' - ? () => + buttonStateHandler() + ? () => { setStep((prev) => { if (prev === 6) { return prev; } return prev + 1; - }) + }); + filterDate(); + } : undefined } > @@ -261,13 +270,13 @@ const DropUpIcon = styled(DropUpIc)` `; const DropDownContainer = styled.div` - position: absolute; //drop down에서 아래 DOM을 밀고 싶을 땐 지워주기 + position: absolute; background-color: white; - margin-top: 4.8rem ; -z-index: 2; - width:15.1rem; - height:14.4rem; - overflow:auto; - border-bottom-left-radius: 0.8rem; + margin-top: 4.8rem; + z-index: 2; + width: 15.1rem; + height: 14.4rem; + overflow: auto; + border-bottom-left-radius: 0.8rem; border-bottom-right-radius: 0.8rem; `; diff --git a/src/pages/selectSchedule/SelectModal.tsx b/src/pages/selectSchedule/SelectModal.tsx index ef68ed1a..5a0a6136 100644 --- a/src/pages/selectSchedule/SelectModal.tsx +++ b/src/pages/selectSchedule/SelectModal.tsx @@ -46,6 +46,7 @@ function SelectModal({ setShowModal }: ModalProps) { if (e.response.status === 400) { alert(`${e.response.data.message}`); } else { + alert(`${e.response.data.message}`); console.error(e); navigate(`/error`); } diff --git a/src/pages/selectSchedule/SelectSchedulePage.tsx b/src/pages/selectSchedule/SelectSchedulePage.tsx index e360f73c..cb5b3066 100644 --- a/src/pages/selectSchedule/SelectSchedulePage.tsx +++ b/src/pages/selectSchedule/SelectSchedulePage.tsx @@ -102,6 +102,7 @@ function SelectSchedulePage() { priority: 0, }; setScheduleList([...scheduleList, schedule]); + console.log(scheduleList); }; const deleteDataList = (index: number) => { @@ -219,7 +220,7 @@ const SelectPageWrapper = styled.div` const PlusButton = styled.button` margin-top: 3.2rem; - margin-bottom: 12.2rem; + margin-bottom: 16.2rem; border-radius: 0.8rem; background-color: ${({ theme }) => theme.colors.grey2}; width: 33.5rem; @@ -270,6 +271,7 @@ const StyledBtnSection = styled.section` justify-content: center; background: ${({ theme }) => theme.colors.dim_gradient}; + margin-top:3rem; padding-bottom: 2.9rem; width: 100%; diff --git a/src/pages/selectSchedule/components/TimeSelect.tsx b/src/pages/selectSchedule/components/TimeSelect.tsx index 097802d8..68956179 100644 --- a/src/pages/selectSchedule/components/TimeSelect.tsx +++ b/src/pages/selectSchedule/components/TimeSelect.tsx @@ -41,7 +41,7 @@ function TimeSelect({ text, id, handleStartTime, scheduleList, preferTimes }: Pr return ( - {scheduleList[id - 1].startTime ? ( + {scheduleList[id - 1]?.startTime ? ( {scheduleList[id - 1].startTime}