From 4ad68a310cd13c548dafda25154f3578c50de22b Mon Sep 17 00:00:00 2001 From: leeharyung Date: Mon, 11 Jul 2022 13:11:23 +0900 Subject: [PATCH 1/3] FIRE-277 fix font name --- src/components/login/InputNickname.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/login/InputNickname.tsx b/src/components/login/InputNickname.tsx index 713b27b8..bb9e3b4e 100644 --- a/src/components/login/InputNickname.tsx +++ b/src/components/login/InputNickname.tsx @@ -113,7 +113,7 @@ const TitleLogo = styled.div` `; const TitleStart = styled.div` - font-family: Pretendard; + font-family: PretendardRegular; font-weight: 500; font-size: 4rem; margin-top: 2rem; @@ -128,7 +128,7 @@ const Form = styled.form` z-index: 1001; button, input { - font-family: Pretendard; + font-family: PretendardRegular; font-weight: 600; height: 6rem; width: 40rem; From b5432ba4f18ccfb8f263c40aee265d36cb5c1a99 Mon Sep 17 00:00:00 2001 From: leeharyung Date: Mon, 11 Jul 2022 13:13:57 +0900 Subject: [PATCH 2/3] FIRE-277 fix placeholder name --- src/components/login/InputNickname.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/login/InputNickname.tsx b/src/components/login/InputNickname.tsx index bb9e3b4e..e9652aaf 100644 --- a/src/components/login/InputNickname.tsx +++ b/src/components/login/InputNickname.tsx @@ -71,7 +71,7 @@ export default function InputNickname() { autoComplete="off" value={nickname} onChange={onChange} - placeholder="Enter ID" + placeholder="Enter Nickname" id="nickname" /> From 44658f5c3aef8609e44afc7de968d934abbc3207 Mon Sep 17 00:00:00 2001 From: leeharyung Date: Mon, 11 Jul 2022 14:51:44 +0900 Subject: [PATCH 3/3] FIRE-277 add enter keyboard event press --- public/index.html | 1 + src/components/atoms/ModalPotal.tsx | 8 +++++ src/components/{atoms => layout}/Modal.tsx | 40 ++++++++++++---------- src/components/login/InputNickname.tsx | 14 +++++++- src/pages/Login.tsx | 12 ++++--- 5 files changed, 51 insertions(+), 24 deletions(-) create mode 100644 src/components/atoms/ModalPotal.tsx rename src/components/{atoms => layout}/Modal.tsx (62%) diff --git a/public/index.html b/public/index.html index 61e75495..cbe2bb94 100644 --- a/public/index.html +++ b/public/index.html @@ -13,6 +13,7 @@
+ diff --git a/src/components/atoms/ModalPotal.tsx b/src/components/atoms/ModalPotal.tsx new file mode 100644 index 00000000..e792b742 --- /dev/null +++ b/src/components/atoms/ModalPotal.tsx @@ -0,0 +1,8 @@ +import ReactDOM from 'react-dom'; + +const ModalPortal = ({ children }) => { + const el = document.getElementById('modal'); + return ReactDOM.createPortal(children, el); +}; + +export default ModalPortal; diff --git a/src/components/atoms/Modal.tsx b/src/components/layout/Modal.tsx similarity index 62% rename from src/components/atoms/Modal.tsx rename to src/components/layout/Modal.tsx index ffeceaad..9300d7e3 100644 --- a/src/components/atoms/Modal.tsx +++ b/src/components/layout/Modal.tsx @@ -1,27 +1,29 @@ import React from 'react'; import styled from 'styled-components'; -import vectors from './Vectors'; +import ModalPortal from '../atoms/ModalPotal'; +import vectors from '../atoms/Vectors'; -export default function Modal({ - modalHandler, - children, -}: { - modalHandler: () => void; +type Props = { children: any; -}) { + modalHandler: () => void; +}; + +export default function Modal({ modalHandler, children }: Props) { return ( - - e.stopPropagation()}> - - {children} - - + + + e.stopPropagation()}> + + {children} + + + ); } diff --git a/src/components/login/InputNickname.tsx b/src/components/login/InputNickname.tsx index e9652aaf..fbdafa43 100644 --- a/src/components/login/InputNickname.tsx +++ b/src/components/login/InputNickname.tsx @@ -6,7 +6,11 @@ import { v4 as uuidv4 } from 'uuid'; import UserStore from '../../stores/userStore'; import vectors from '../atoms/Vectors'; -export default function InputNickname() { +export default function InputNickname({ + modalHandler, +}: { + modalHandler: () => void; +}) { const navigate = useNavigate(); const { nickname, uid, setNickname, setUid } = UserStore(); useEffect(() => { @@ -56,6 +60,13 @@ export default function InputNickname() { setNickname(event.target.value); }; + const onKeyPress = (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + setNickname(event.target.value); + modalHandler(); + } + }; + return ( <> @@ -71,6 +82,7 @@ export default function InputNickname() { autoComplete="off" value={nickname} onChange={onChange} + onKeyPress={onKeyPress} placeholder="Enter Nickname" id="nickname" /> diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 774bcaf5..a4b1a6a1 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -6,15 +6,19 @@ import vectors from '../components/atoms/Vectors'; import Blocks from '../components/lobby/Blocks'; import Search from '../components/lobby/Search'; import InputNickname from '../components/login/InputNickname'; -import Modal from '../components/atoms/Modal'; +import Modal from '../components/layout/Modal'; export default function Main() { const navigate = useNavigate(); const [isModal, setIsModal] = useState(true); - const modalHandler = () => { + const closeModalHandler = () => { setIsModal(false); }; + // const openModalHandler = () => { + // setIsModal(true); + // }; + const randomEnter = () => { navigate(`/room/random`); }; @@ -43,8 +47,8 @@ export default function Main() { {isModal && ( - - + + )}