diff --git a/.github/ISSUE_TEMPLATE/refactor-request.md b/.github/ISSUE_TEMPLATE/refactor-request.md new file mode 100644 index 00000000..8a9d3baf --- /dev/null +++ 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 index 0e58fa5e..10528811 100644 --- 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 index 3bd4c3de..9230534a 100644 --- 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,6 +44,7 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) { }; const [ismodalOpen, setIsModalOpen] = useState(false); + const [isLoginModalOpen, setIsLoginModalOpen]= useState(false); const loginHost = async () => { try { @@ -51,17 +52,22 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) { 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) { 방장 페이지 접속하기 - {ismodalOpen ? : undefined} + {ismodalOpen ? : undefined} + {isLoginModalOpen? : undefined} ); } diff --git a/src/pages/LoginEntrance/components/IncorrectInfoModal.tsx b/src/pages/LoginEntrance/components/IncorrectInfoModal.tsx new file mode 100644 index 00000000..232ce6b2 --- /dev/null +++ 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>; +} + +function IncorrectInfoModal({ setIsLoginModalOpen }: ModalProps) { + return ( + + + setIsLoginModalOpen(false)}> + + + + + + 유효하지 않은 사용자 이름 + + + 또는 비밀번호 입니다. + + + setIsLoginModalOpen(false)}> + + 다시 입력하기 + + + + + ); +} + +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/src/pages/LoginEntrance/components/ReturnModal.tsx b/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx similarity index 95% rename from src/pages/LoginEntrance/components/ReturnModal.tsx rename to src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx index 420a9557..3b56bf2d 100644 --- a/src/pages/LoginEntrance/components/ReturnModal.tsx +++ b/src/pages/LoginEntrance/components/NoAvailableTimeModal.tsx @@ -1,8 +1,8 @@ +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'; @@ -10,7 +10,7 @@ interface ModalProps { setIsModalOpen: Dispatch>; } -function ReturnModal({ setIsModalOpen }: ModalProps) { +function NoAvailableTimeModal ({ setIsModalOpen }: ModalProps) { const { meetingId } = useParams(); return ( @@ -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 index 35f8d9fd..d67e0723 100644 --- 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) { <>
- + diff --git a/src/pages/SteppingStone/components/SteppingBody.tsx b/src/pages/SteppingStone/components/SteppingBody.tsx index 1d2f0cb0..618eaf2b 100644 --- a/src/pages/SteppingStone/components/SteppingBody.tsx +++ b/src/pages/SteppingStone/components/SteppingBody.tsx @@ -37,7 +37,7 @@ const bodyType: BodyType = { }, meetEntrance: { img: png, - main: '에이셉 전체회의', + main: '', sub: ( <> @@ -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 ( {stepInfo.img} - {stepInfo.main} + {meetingTitle ? meetingTitle : stepInfo.main} {stepInfo.sub} diff --git a/src/styles/theme.ts b/src/styles/theme.ts index a942ddc5..ec9876a0 100644 --- 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 index 6325e202..976d080d 100644 --- 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 {