pr test

Feat/#224
ASAP-as-soon-as-possible · Dec 27, 2023 · daad0ed · daad0ed
2 parents 5f5280a + 7222104
commit daad0ed
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 65 deletions.
diff --git 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"
         />
         <IconContainer onClick={changePasswordType}>

diff --git 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
@@ -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
@@ -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 (
     <>
       <SteppingWrapper>
         <Header position={'stepping'} />
         <SteppingBody steppingType={steppingType} meetingTitle={meetingTitle} />
         <SteppingBtnSection steppingType={steppingType} />
+        <div />
       </SteppingWrapper>
     </>
   );

diff --git 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
@@ -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
@@ -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<SetStateAction<boolean>>;
+
   setMeetingInfo: Dispatch<SetStateAction<MeetingInfo>>;
 }
 
-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
@@ -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
@@ -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 (
     <SetTimesWrapper>
       <SetTimeSection>
@@ -121,11 +140,7 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
         {directInput.btnState ? (
           <DropDownWrapper>
             <DropDownSelect $drop={startDropDown} onClick={() => setStartDropDown((prev) => !prev)}>
-              {meetingInfo.preferTimes.length > 0 ? (
-                <Text font={'button2'}>{meetingInfo.preferTimes[0].startTime}</Text>
-              ) : (
-                <Text font={'button2'}>00:00</Text>
-              )}
+              <Text font={'button2'}>{meetingInfo.preferTimes[0].startTime}</Text>
               {startDropDown ? <DropUpIcon /> : <DropDownIcon />}
               {startDropDown && (
                 <DropDownContainer>
@@ -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) {
             </DropDownSelect>
             <Wave />
             <DropDownSelect $drop={endDropDown} onClick={() => setEndDropDown((prev) => !prev)}>
-              {meetingInfo.preferTimes.length > 0 ? (
-                <Text font={'button2'}>{meetingInfo.preferTimes[0].endTime}</Text>
-              ) : (
-                <Text font={'button2'}>00:00</Text>
-              )}
+              <Text font={'button2'}>{meetingInfo.preferTimes[0].endTime}</Text>
               {endDropDown ? <DropUpIcon /> : <DropDownIcon />}
               {endDropDown && (
                 <DropDownContainer>
@@ -156,7 +166,6 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
                       key={time + i}
                       type={'end'}
                       time={time}
-                      setIsOpen={setEndDropDown}
                       setMeetingInfo={setMeetingInfo}
                     />
                   ))}
@@ -171,24 +180,18 @@ function SetTimes({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
 
       <StyledBtnSection>
         <Button
-          typeState={
-            meetingInfo.preferTimes.length >= 1 &&
-            meetingInfo.preferTimes[0].startTime &&
-            meetingInfo.preferTimes[0].endTime !== '00:00'
-              ? 'primaryActive'
-              : 'secondaryDisabled'
-          }
+          typeState={buttonStateHandler() ? 'primaryActive' : 'secondaryDisabled'}
           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 +264,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
@@ -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
@@ -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%;