Merge pull request #328 from ASAP-as-soon-as-possible/fix/#326/change…

…HostEntranceModal [Fix/#326] 모달 디자인 변경
ASAP-as-soon-as-possible · Aug 31, 2024 · 448b306 · 448b306
2 parents f36fac6 + ee23319
commit 448b306
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 29 deletions.
diff --git 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
@@ -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,37 +11,38 @@ interface ModalProps {
 
 function NoAvailableTimeModal({ setIsModalOpen }: ModalProps) {
   const { meetingId } = useParams();
+  const navigate = useNavigate();
+
   return (
-    <ReturnModalWrpper>
+    <ReturnModalWrpper onClick={() => setIsModalOpen(false)}>
       <ModalSection>
-        <IconCatainer onClick={() => setIsModalOpen(false)}>
-          <ExitIc />
-        </IconCatainer>
-        <Text font={`title1`} color={`${theme.colors.sub1}`}>
-          잠깐!
-        </Text>
         <MentContainer>
-          <Text font={`body2`} color={`${theme.colors.white}`}>
-            나의 가능 시간을 입력해야
+          <Text font={'title1'} color={`${theme.colors.white}`}>
+            가능 시간을 입력하지 않으셨나요?
           </Text>
+
+          <ModalText>
+            나의 가능 시간을 입력해야 <br />방장 페이지에 접속할 수 있어요
+          </ModalText>
+        </MentContainer>
+
+        <ModalBtn onClick={() => navigate(`/host/select/${meetingId}?step=selectSchedule`)}>
           <Text font={`body2`} color={`${theme.colors.white}`}>
-            방장 페이지에 접속할 수 있어요!
+            가능 시간 입력하러 가기
           </Text>
-        </MentContainer>
-        <Link to={`/host/select/${meetingId}?step=selectSchedule`}>
-          <ModalBtn>
-            <Text font={`body2`} color={`${theme.colors.white}`}>
-              가능 시간 입력하러 가기
-            </Text>
-          </ModalBtn>
-        </Link>
+        </ModalBtn>
       </ModalSection>
     </ReturnModalWrpper>
   );
 }
 
 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;
 `;