diff --git a/src/pages/loginEntrance/components/IncorrectInfoModal.tsx b/src/pages/loginEntrance/components/IncorrectInfoModal.tsx index 1e1218d..ebe7af8 100644 --- a/src/pages/loginEntrance/components/IncorrectInfoModal.tsx +++ b/src/pages/loginEntrance/components/IncorrectInfoModal.tsx @@ -1,8 +1,7 @@ -import { Link, useParams } from 'react-router-dom'; -import React, { Dispatch, SetStateAction, useState } from 'react'; +import { Dispatch, SetStateAction } from 'react'; -import { ExitIc } from 'components/Icon/icon'; import Text from 'components/common/atomComponents/Text'; +import { ExitIc } from 'components/Icon/icon'; import styled from 'styled-components'; import { theme } from 'styles/theme'; diff --git a/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx b/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx index f2286b5..2904a54 100644 --- a/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx +++ b/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx @@ -1,8 +1,7 @@ import { Dispatch, SetStateAction } from 'react'; import Text from 'components/common/atomComponents/Text'; -import { ExitIc } from 'components/Icon/icon'; -import { Link, useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import styled from 'styled-components'; import { theme } from 'styles/theme'; @@ -12,30 +11,26 @@ interface ModalProps { function NoAvailableTimeModal({ setIsModalOpen }: ModalProps) { const { meetingId } = useParams(); + const navigate = useNavigate(); + return ( - + setIsModalOpen(false)}> - setIsModalOpen(false)}> - - - - 잠깐! - - - 나의 가능 시간을 입력해야 + + 가능 시간을 입력하지 않으셨나요? + + + 나의 가능 시간을 입력해야
방장 페이지에 접속할 수 있어요 +
+
+ + navigate(`/host/select/${meetingId}?step=selectSchedule`)}> - 방장 페이지에 접속할 수 있어요! + 가능 시간 입력하러 가기 - - - - - 가능 시간 입력하러 가기 - - - +
); @@ -43,6 +38,11 @@ function NoAvailableTimeModal({ setIsModalOpen }: ModalProps) { export default NoAvailableTimeModal; +const ModalText = styled.span` + ${({ theme }) => theme.fonts.body2}; + color: ${({ theme }) => theme.colors.grey3}; +`; + const ReturnModalWrpper = styled.div` display: flex; position: absolute; @@ -57,14 +57,16 @@ const ReturnModalWrpper = styled.div` const ModalSection = styled.article` display: flex; - position: relative; + /* position: relative; */ flex-direction: column; align-items: center; justify-content: center; + gap: 2.4rem; border-radius: 0.8rem; background-color: ${({ theme }) => theme.colors.grey8}; - width: 28.8rem; - height: 21.2rem; + width: 32.4rem; + height: 18.4rem; + padding: 2.4rem 2rem; `; const IconCatainer = styled.div` @@ -83,15 +85,17 @@ const MentContainer = styled.div` display: flex; flex-direction: column; align-items: center; - margin-top: 1.2rem; + justify-content: center; + gap: 0.8rem; + text-align: center; `; const ModalBtn = styled.button` display: flex; align-items: center; justify-content: center; - margin-top: 2.4rem; + border-radius: 0.6rem; background-color: ${({ theme }) => theme.colors.main1}; - width: 17.6rem; + width: 100%; height: 4.2rem; `;