Merge pull request #176 from ASAP-as-soon-as-possible/develop

release 1.0.0 -> main
ASAP-as-soon-as-possible · Sep 18, 2023 · bb3ca5e · bb3ca5e
2 parents dd0b82f + 903f738
commit bb3ca5e
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 39 deletions.
diff --git a/.github/ISSUE_TEMPLATE/refactor-request.md b/.github/ISSUE_TEMPLATE/refactor-request.md
@@ -0,0 +1,15 @@
+---
+name: Refactor request
+about: 기능 리팩토링 템플릿
+title: "[Refactor] 제목"
+labels: ''
+assignees: ''
+
+---
+
+## 🛠 Issue
+<!-- 이슈에 대해 간략하게 설명해주세요 -->
+-
+## 📝 To-do
+<!-- 진행할 작업에 대해 적어주세요 -->
+- [ ] todo!
diff --git a/src/components/moleculesComponents/Header.tsx b/src/components/moleculesComponents/Header.tsx
@@ -1,16 +1,14 @@
+import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
 import { Dispatch, SetStateAction, useState } from 'react';
 
-import Text from 'components/atomComponents/Text';
-import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { useParams } from 'react-router';
-import { useNavigate } from 'react-router-dom';
+import Navigation from './Navigation';
+import Text from 'components/atomComponents/Text';
+import { notify } from 'utils/toast/copyLink';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { notify } from 'utils/toast/copyLink';
-
-import Navigation from './Navigation';
-
+import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 interface HeaderProps {
   position: string;
@@ -19,14 +17,14 @@ interface HeaderProps {
 
 function Header({ position, setStep }: HeaderProps) {
   const navigationOptions = [
-    {
-      title: '공지사항',
-      url: '',
-    },
-    {
-      title: 'ASAP family',
-      url: '',
-    },
+    // {
+    //   title: '공지사항',
+    //   url: '',
+    // },
+    // {
+    //   title: 'ASAP family',
+    //   url: '',
+    // },
     {
       title: '약속 생성하기',
       url: '/meet/create',

diff --git a/src/pages/LoginEntrance/components/HostComponent.tsx b/src/pages/LoginEntrance/components/HostComponent.tsx
@@ -1,18 +1,18 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import { AxiosError } from 'axios';
 import Button from 'components/atomComponents/Button';
+import Header from 'components/moleculesComponents/Header';
+import IncorrectInfoModal from './IncorrectInfoModal';
+import NoAvailableTimeModal from './NoAvailableTimeModal';
 import PasswordInput from 'components/atomComponents/PasswordInput';
 import Text from 'components/atomComponents/Text';
 import TextInput from 'components/atomComponents/TextInput';
-import Header from 'components/moleculesComponents/Header';
 import TitleComponent from 'components/moleculesComponents/TitleComponents';
-import { useNavigate, useParams } from 'react-router-dom';
+import { client } from 'utils/apis/axios';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { client } from 'utils/apis/axios';
-
-import ReturnModal from './ReturnModal';
 
 interface HostInfoProps {
   name: string;
@@ -44,24 +44,30 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) {
   };
 
   const [ismodalOpen, setIsModalOpen] = useState(false);
+  const [isLoginModalOpen, setIsLoginModalOpen]= useState(false);
 
   const loginHost = async () => {
     try {
       const result = await client.post(`/user/${meetingId}/host`, hostInfo);
       const {
         data: { code, data, message },
       } = result;
+
+
       if (code === 200) {
         localStorage.setItem('hostToken', data.accessToken);
         navigate(`/host/${meetingId}`);
       } else if (code === 403) {
         setIsModalOpen(true);
-      } else {
-        console.log(message);
+      } else if(code===401){
+        setIsLoginModalOpen(true);
       }
+        else{
+          console.log(message);
+        }
     } catch {
       (error: AxiosError) => {
-        console.log(error);
+        console.log("login_error: "+error);
       };
     }
   };
@@ -104,7 +110,8 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) {
           <Text font={'button2'}>방장 페이지 접속하기</Text>
         </Button>
       </StyledBtnSection>
-      {ismodalOpen ? <ReturnModal setIsModalOpen={setIsModalOpen} /> : undefined}
+      {ismodalOpen ? <NoAvailableTimeModal setIsModalOpen={setIsModalOpen} /> : undefined}
+      {isLoginModalOpen? <IncorrectInfoModal setIsLoginModalOpen={setIsLoginModalOpen}></IncorrectInfoModal> : undefined}
     </>
   );
 }

diff --git a/src/pages/LoginEntrance/components/IncorrectInfoModal.tsx b/src/pages/LoginEntrance/components/IncorrectInfoModal.tsx
@@ -0,0 +1,92 @@
+import { Link, useParams } from 'react-router-dom';
+import React, { Dispatch, SetStateAction, useState } from 'react';
+
+import { ExitIc } from 'components/Icon/icon';
+import Text from 'components/atomComponents/Text';
+import styled from 'styled-components/macro';
+import { theme } from 'styles/theme';
+
+interface ModalProps {
+  setIsLoginModalOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+function IncorrectInfoModal({ setIsLoginModalOpen }: ModalProps) {
+  return (
+    <ReturnModalWrpper>
+      <ModalSection>
+        <IconCatainer onClick={() => setIsLoginModalOpen(false)}>
+          <ExitIc />
+        </IconCatainer>
+
+        <MentContainer>
+          <Text font={`body2`} color={`${theme.colors.white}`}>
+            유효하지 않은 사용자 이름
+          </Text>
+          <Text font={`body2`} color={`${theme.colors.white}`}>
+            또는 비밀번호 입니다.
+          </Text>
+        </MentContainer>
+          <ModalBtn onClick={()=> setIsLoginModalOpen(false)}>
+            <Text font={`body2`} color={`${theme.colors.white}`}>
+              다시 입력하기
+            </Text>
+          </ModalBtn>
+      </ModalSection>
+    </ReturnModalWrpper>
+  );
+}
+
+export default IncorrectInfoModal;
+
+const ReturnModalWrpper = styled.div`
+  display: flex;
+  position: absolute;
+  left: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  width: 100%;
+  height: 100vh;
+`;
+
+const ModalSection = styled.article`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.8rem;
+  background-color: ${({ theme }) => theme.colors.grey8};
+  width: 28.8rem;
+  height: 21.2rem;
+`;
+
+const IconCatainer = styled.div`
+  display: flex;
+  position: absolute;
+  top: 0.8rem;
+  right: 0.8rem;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 3.2rem;
+  height: 3.2rem;
+`;
+
+const MentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1.2rem;
+`;
+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;
+  height: 4.2rem;
+`;
diff --git a/.../LoginEntrance/components/ReturnModal.tsx → ...rance/components/NoAvailableTimeModal.tsx b/.../LoginEntrance/components/ReturnModal.tsx → ...rance/components/NoAvailableTimeModal.tsx
@@ -1,16 +1,16 @@
+import { Link, useParams } from 'react-router-dom';
 import React, { Dispatch, SetStateAction, useState } from 'react';
 
-import Text from 'components/atomComponents/Text';
 import { ExitIc } from 'components/Icon/icon';
-import { Link, useParams } from 'react-router-dom';
+import Text from 'components/atomComponents/Text';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
 
 interface ModalProps {
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-function ReturnModal({ setIsModalOpen }: ModalProps) {
+function NoAvailableTimeModal ({ setIsModalOpen }: ModalProps) {
   const { meetingId } = useParams();
   return (
     <ReturnModalWrpper>
@@ -41,7 +41,7 @@ function ReturnModal({ setIsModalOpen }: ModalProps) {
   );
 }
 
-export default ReturnModal;
+export default NoAvailableTimeModal;
 
 const ReturnModalWrpper = styled.div`
   display: flex;

diff --git a/src/pages/SteppingStone/SteppingLayout.tsx b/src/pages/SteppingStone/SteppingLayout.tsx
@@ -16,9 +16,13 @@ function SteppingLayout({ steppingType }: SteppingProps) {
   const navigate = useNavigate();
   const { meetingId } = useParams();
 
+  const [meetingTitle, setMeetingTitle] = useState('');
+
   const isConfirmedMeet = async () => {
+    // 회의명 붙이기
     const result = await client.get(`/meeting/${meetingId}`);
-    console.log(result);
+
+    setMeetingTitle(result.data.data.title);
     if (result.data.code === 409) {
       navigate(`/q-card/${meetingId}`);
     }
@@ -37,7 +41,7 @@ function SteppingLayout({ steppingType }: SteppingProps) {
     <>
       <SteppingWrapper>
         <Header position={'stepping'} />
-        <SteppingBody steppingType={steppingType} />
+        <SteppingBody steppingType={steppingType} meetingTitle={meetingTitle} />
         <SteppingBtnSection steppingType={steppingType} />
       </SteppingWrapper>
     </>

diff --git a/src/pages/SteppingStone/components/SteppingBody.tsx b/src/pages/SteppingStone/components/SteppingBody.tsx
@@ -37,7 +37,7 @@ const bodyType: BodyType = {
   },
   meetEntrance: {
     img: <img src={stepingPlus} alt="png" />,
-    main: '에이셉 전체회의',
+    main: '',
     sub: (
       <>
         <Text font={'title2'} color={`${theme.colors.grey4}`}>
@@ -67,16 +67,17 @@ const bodyType: BodyType = {
 
 interface SteppingProps {
   steppingType: string;
+  meetingTitle?: string;
 }
 
-function SteppingBody({ steppingType }: SteppingProps) {
+function SteppingBody({ steppingType, meetingTitle }: SteppingProps) {
   const stepInfo = bodyType[steppingType];
   return (
     <SteppingBodyWrapper>
       <ImageSection>{stepInfo.img}</ImageSection>
       <SteppingMentSection>
         <Text font={'head1'} color={`${theme.colors.white}`}>
-          {stepInfo.main}
+          {meetingTitle ? meetingTitle : stepInfo.main}
         </Text>
         <SubMentWrapper>{stepInfo.sub}</SubMentWrapper>
       </SteppingMentSection>

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -54,10 +54,10 @@ const FONT = ({ family, weight, size, lineHeight }: Font): string => {
 
 const fonts = {
   head1: FONT({ family: 'Pretendard Variable', weight: 600, size: 2.8, lineHeight: 3.4 }),
-  head2: FONT({ family: 'Pretendard Variable', weight: 700, size: 2.2, lineHeight: 3 }),
+  head2: FONT({ family: 'Pretendard Variable', weight: 600, size: 2.2, lineHeight: 3 }),
 
   title1: FONT({ family: 'Pretendard Variable', weight: 600, size: 1.8, lineHeight: 2.4 }),
-  title2: FONT({ family: 'Pretendard Variable', weight: 400, size: 1.6, lineHeight: 2 }),
+  title2: FONT({ family: 'Pretendard Variable', weight: 500, size: 1.6, lineHeight: 2 }),
 
   body1: FONT({ family: 'Pretendard Variable', weight: 500, size: 1.6, lineHeight: 2.4 }),
   body2: FONT({ family: 'Pretendard Variable', weight: 500, size: 1.4, lineHeight: 2 }),

diff --git a/src/utils/toast/ToastContainer.tsx b/src/utils/toast/ToastContainer.tsx
@@ -24,15 +24,16 @@ const StyledToastContainer = styled(ToastContainer)`
   display: flex;
   position: absolute;
   bottom: 6rem;
-  /* left:-2rem; */
   align-items: center;
   justify-content: center;
 
   .Toastify__toast {
-    border-radius: 5rem;
-    background-color: #2e2e2e !important;
     width: 19rem;
     height: 4rem !important;
+    min-height: 0;
+    margin-bottom: 2.4rem;
+    background-color: #2e2e2e;
+    border-radius: 5rem;
   }
 
   .Toastify__toast-body div {