Hotfixs/create meeting modal size change

src/components/atomComponents/Button.tsx

@@ -51,12 +51,12 @@ const buttonCSS = {
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
     width: 15.2rem;
-    color: ${({ theme }) => theme.colors.white};
+    color: ${({ theme }) => theme.colors.grey4};
   `,
   primaryDisabled: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
-    color: ${({ theme }) => theme.colors.white};
+    color: ${({ theme }) => theme.colors.grey4};
   `,
   secondaryActive: css`
     ${buttonDefaultCSS.basicCss};
@@ -99,6 +99,11 @@ const buttonCSS = {
     background-color: transparent;
     color: ${({ theme }) => theme.colors.grey6};
   `,
+  quaternaryDisabled: css`
+    ${buttonDefaultCSS.basicCss};
+    background: ${({ theme }) => theme.colors.grey7};
+    color: ${({ theme }) => theme.colors.grey2};
+  `,
 };
 
 const ButtonWrapper = styled.button<{ $type: string }>`
@@ -126,6 +131,8 @@ const ButtonWrapper = styled.button<{ $type: string }>`
         return buttonCSS.tertiaryDisabled;
       case 'halfPrimaryDisabled':
         return buttonCSS.halfPrimaryDisabled;
+      case 'quaternaryDisabled':
+        return buttonCSS.quaternaryDisabled;
       default:
         return '';
     }

src/components/atomComponents/PasswordInput.tsx

@@ -86,6 +86,9 @@ const StyledPasswordInput = styled.input<{ $iserror: boolean }>`
 
   color: ${({ theme }) => theme.colors.white};
   font-size: ${({ theme }) => theme.fonts.body3};
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.grey4};
+  }
 
   &:focus {
     border: 2px solid ${({ $iserror, theme }) => ($iserror ? theme.colors.red : theme.colors.main1)};

src/components/atomComponents/TextInput.tsx

@@ -84,6 +84,9 @@ const StyledTextInput = styled.input<{ $iserror: boolean }>`
   font-size: ${({ theme }) => theme.fonts.body3};
 
   caret-color: ${({ theme }) => theme.colors.main1};
+  &::placeholder{
+    color:${({theme})=>theme.colors.grey4}
+  }
 
   &:focus {
     outline: none;

src/pages/LoginEntrance/LoginEntrance.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import styled from 'styled-components/macro';
 

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);
@@ -116,7 +110,7 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) {
       <StyledBtnSection>
         <Button
           typeState={
-            hostInfo.name && hostInfo.password.length >= 4 ? 'primaryActive' : 'secondaryDisabled'
+            hostInfo.name && hostInfo.password.length >= 4 ? 'primaryActive' : 'primaryDisabled'
           }
           onClick={hostInfo.name && hostInfo.password.length >= 4 ? loginHost : undefined}
         >

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>
     </>
   );

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';
 

src/pages/SteppingStone/components/SteppingBtnSection.tsx

@@ -1,13 +1,13 @@
-import { userNameAtom } from 'atoms/atom';
+import { useEffect, useState } from 'react';
+
 import Button from 'components/atomComponents/Button';
 import Text from 'components/atomComponents/Text';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { useParams } from 'react-router';
 import { Link, useLocation } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 import styled from 'styled-components/macro';
+import { theme } from 'styles/theme';
 import { notify } from 'utils/toast/copyLink';
-import ToastContainerBox from 'utils/toast/ToastContainer';
 
 interface SteppingProps {
   steppingType: string;
@@ -17,23 +17,37 @@ function SteppingBtnSection({ steppingType }: SteppingProps) {
   const location = useLocation();
   const meetInfo = { ...location.state };
   const { meetingId } = useParams();
-  console.log(meetingId);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(()=>{
+    setIsModalOpen(true);
+  },[])
+
   return (
     <>
-      {/* <ToastContainerBox /> */}
       <StyledBtnSection>
         {
           {
             meetComplete: (
               <>
-                {/* 이후 도메인 시 연결 */}
-                <CopyToClipboard text={`${import.meta.env.VITE_WEB_IP}/meet/${meetInfo.meetingId}`}>
-                  <Button typeState={'halfTertiaryActive'} onClick={notify}>
-                    <Text font={'button2'}>링크 복사하기</Text>
-                  </Button>
-                </CopyToClipboard>
+                <BottomSheetModal $isModalOpen={isModalOpen}>
+                  <BottomSheetDescription>
+                  <Text font={'head2'} color={'white'}>회의방 링크가 생성되었어요!</Text>
+                  <Text font={'title2'} color={`${theme.colors.grey4}`}>링크를 복사하여 팀원에게 공유해주세요</Text>
+                  </BottomSheetDescription>
+                  <CopyToClipboard text={`${import.meta.env.VITE_WEB_IP}/meet/${meetInfo.meetingId}`}>
+                    <Button typeState={'primaryActive'} onClick={()=>setIsModalOpen(false)}>
+                      <Text font={'button2'}>링크 복사하기</Text>
+                    </Button>
+                  </CopyToClipboard>
+                    <Button typeState={'quaternaryDisabled'} onClick={()=>setIsModalOpen(false)}>
+                      <Text font={'button2'}>나중에 공유하기</Text>
+                    </Button>
+                </BottomSheetModal>
+                <ModalOverlay $isModalOpen={isModalOpen} >
+                </ModalOverlay>
                 <Link to={`/host/schedule/${meetInfo.meetingId}`}>
-                  <Button typeState={'halfPrimaryActive'}>
+                  <Button typeState={'primaryActive'}>
                     <Text font={'button2'}>나의 가능시간 입력</Text>
                   </Button>
                 </Link>
@@ -48,7 +62,6 @@ function SteppingBtnSection({ steppingType }: SteppingProps) {
                 </Link>
                 <CopyToClipboard
                   text={`${import.meta.env.VITE_WEB_IP}/meet/${meetingId}`}
-                  // onCopy={handleCopy}
                 >
                   <Button typeState={'halfPrimaryActive'} onClick={notify}>
                     <Text font={'button2'}>링크 복사하기</Text>
@@ -97,4 +110,44 @@ const StyledBtnSection = styled.section`
   justify-content: center;
   border-radius: 50%;
   width: 100%;
+
 `;
+
+const BottomSheetModal = styled.div<{$isModalOpen:boolean;}>`
+  display:flex;
+  position:fixed;
+  bottom:${({$isModalOpen})=>$isModalOpen?0:-27.5}rem;
+  flex-direction:column;
+  gap:0.8rem;
+  transition: bottom 600ms cubic-bezier(0.86, 0, 0.07, 1);
+  z-index:1;
+  border-top-left-radius: 1.2rem;
+  border-top-right-radius: 1.2rem;
+  background-color: ${({ theme }) => theme.colors.grey8};
+
+  padding: 2.8rem 2rem 4rem;
+  width:37.5rem;
+
+  & button {
+    width:100%;
+  }
+
+`
+
+const ModalOverlay = styled.div<{$isModalOpen:boolean;}>`
+  display:${({$isModalOpen})=>($isModalOpen?'block':'none')};
+  position:fixed;
+  top: 0;
+
+  background-color: rgba(0, 0, 0, 0.50);
+  width:100%;
+  height:100%;
+`
+
+const BottomSheetDescription = styled.div`
+  display:flex;
+  flex-direction:column;
+  gap:0.8rem;
+  margin-bottom:2.4rem;
+  padding-left:0.9rem;
+`

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: '',

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) => ({

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');
+      }
     }
   };
 

src/pages/createMeeting/components/useFunnel/SetDates.tsx

@@ -1,15 +1,15 @@
 // import { useState } from 'react';
 
+import './SetDates.css';
+
 import { methodStateAtom } from 'atoms/atom';
 import Button from 'components/atomComponents/Button';
 import Text from 'components/atomComponents/Text';
-import { MeetingInfo, FunnelProps } from 'pages/createMeeting/types/useFunnelInterface';
+import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface';
 import { Calendar, DateObject, getAllDatesInRange } from 'react-multi-date-picker';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components/macro';
 
-import './SetDates.css';
-
 const months = [
   '1월',
   '2월',
@@ -125,7 +125,7 @@ function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) {
               meetingInfo.availableDates.length > 0 &&
               meetingInfo.availableDates.length < 8)
               ? 'primaryActive'
-              : 'secondaryDisabled'
+              : 'primaryDisabled'
           }
           onClick={
             (meetingInfo.availableDates.length > 1 && meetingInfo.availableDates.length < 8) ||