From 21cb69c6a35cc03a3591694c586ecb35ac4387bd Mon Sep 17 00:00:00 2001 From: leeharyung Date: Tue, 12 Jul 2022 14:36:06 +0900 Subject: [PATCH 1/4] FIRE-307 fix modal ui --- src/components/login/Avater.tsx | 29 +++++++++++++--- src/components/login/Buttons.tsx | 34 ------------------ src/components/login/Nickname.tsx | 55 ++++++++++++++++++++++++++++++ src/components/login/UserInput.tsx | 37 +++++--------------- 4 files changed, 87 insertions(+), 68 deletions(-) delete mode 100644 src/components/login/Buttons.tsx create mode 100644 src/components/login/Nickname.tsx diff --git a/src/components/login/Avater.tsx b/src/components/login/Avater.tsx index c79a1f2b..4cda2200 100644 --- a/src/components/login/Avater.tsx +++ b/src/components/login/Avater.tsx @@ -4,19 +4,38 @@ import MyAvatar from '../../assets/avatar/MyAvatar'; import UserStore from '../../stores/userStore'; export default function Avater() { - const { avatar } = UserStore(); + const { avatar, setAvatar } = UserStore(); + const onClick = () => { + const randomNumber = Math.floor(Math.random() * 30) + 1; // 1~30 사이 정수 생성 + setAvatar(JSON.stringify(randomNumber)); + console.log(avatar); + }; return ( + ); } const AvatarContainer = styled.div` - height: 4rem; - width: 17rem; + height: 20rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; svg { - width: 100%; - height: 100%; + width: 80%; + height: 80%; } `; + +const Button = styled.button` + width: 80%; + font-size: 1.5rem; + background-color: white; + margin-top: 2rem; + cursor: pointer; +`; diff --git a/src/components/login/Buttons.tsx b/src/components/login/Buttons.tsx deleted file mode 100644 index 3f93b511..00000000 --- a/src/components/login/Buttons.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import UserStore from '../../stores/userStore'; - -export default function Buttons() { - const { avatar, setAvatar } = UserStore(); - const onClick = () => { - const randomNumber = Math.floor(Math.random() * 30) + 1; // 1~30 사이 정수 생성 - setAvatar(JSON.stringify(randomNumber)); - console.log(avatar); - }; - return ( - - - - - ); -} - -const Component = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; -`; - -const Button = styled.button` - font-size: 1.5rem; - background-color: white; - margin-top: 2rem; - cursor: pointer; -`; diff --git a/src/components/login/Nickname.tsx b/src/components/login/Nickname.tsx new file mode 100644 index 00000000..e523a27e --- /dev/null +++ b/src/components/login/Nickname.tsx @@ -0,0 +1,55 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import UserStore from '../../stores/userStore'; + +export default function Nickname() { + const { nickname } = UserStore(); + const [newNickname, setNewNickname] = useState(nickname); + + const onChange = (event: React.ChangeEvent) => { + setNewNickname(event.target.value); + }; + + return ( + + + + + ); +} + +const Component = styled.div` + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; + height: 12rem; + width: 25rem; +`; + +const Input = styled.input` + background-color: rgb(30, 41, 75); + color: white; + font-size: 1.7rem; + text-justify: center; + padding-left: 1rem; + width: 100%; +`; + +const Button = styled.button` + font-family: PretendardRegular; + font-weight: 600; + height: 6rem; + width: 100%; + border-radius: 0.8rem; + font-size: 1.5rem; + background-color: white; + margin-top: 2rem; + cursor: pointer; +`; diff --git a/src/components/login/UserInput.tsx b/src/components/login/UserInput.tsx index 942e4452..9f37e8c2 100644 --- a/src/components/login/UserInput.tsx +++ b/src/components/login/UserInput.tsx @@ -5,7 +5,7 @@ import styled from 'styled-components'; import { v4 as uuidv4 } from 'uuid'; import UserStore from '../../stores/userStore'; import Avater from './Avater'; -import Buttons from './Buttons'; +import Nickname from './Nickname'; export default function UserInput({ modalHandler, @@ -15,7 +15,7 @@ export default function UserInput({ const navigate = useNavigate(); const { nickname, uid, avatar, setNickname, setUid } = UserStore(); const [newNickname, setNewNickname] = useState(nickname); - console.log('newnickname ', newNickname); + console.log(setNewNickname); useEffect(() => { if (!localStorage.getItem('uid')) { const newUID = uuidv4(); @@ -43,7 +43,6 @@ export default function UserInput({ const onSubmit = (event: React.FormEvent) => { event.preventDefault(); if (newNickname === null) { - console.log('으악'); return false; } // socket connection @@ -61,23 +60,12 @@ export default function UserInput({ return true; }; - const onChange = (event: React.ChangeEvent) => { - setNewNickname(event.target.value); - }; - return (
- + - {/* */} ); @@ -87,31 +75,22 @@ const Form = styled.form` margin-top: 15rem; display: flex; flex-direction: column; - align-items: center; + align-items: flex-end; justify-content: center; z-index: 1001; - width: 35rem; - button, - input { + width: 40rem; + input, + button { font-family: PretendardRegular; font-weight: 600; height: 6rem; - width: 17rem; border-radius: 0.8rem; } `; const Settings = styled.div` display: flex; - align-items: center; + align-items: flex-end; justify-content: space-between; width: 100%; `; - -const Input = styled.input` - background-color: rgb(30, 41, 75); - color: white; - font-size: 1.7rem; - text-justify: center; - padding-left: 1rem; -`; From 001bb3114476af84eb7ea4db0ac8f6981310c88e Mon Sep 17 00:00:00 2001 From: leeharyung Date: Tue, 12 Jul 2022 14:36:50 +0900 Subject: [PATCH 2/4] FIRE-307 fix modalbox top --- src/components/layout/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx index 4af80f45..6307e100 100644 --- a/src/components/layout/Modal.tsx +++ b/src/components/layout/Modal.tsx @@ -63,6 +63,6 @@ const ModalBox = styled.div` flex-direction: column; justify-content: center; align-items: center; - top: 20rem; + top: 16rem; padding: 9rem 3rem 7rem 3rem; `; From 886af046101e0ea4863b621f860c90c68f298113 Mon Sep 17 00:00:00 2001 From: leeharyung Date: Tue, 12 Jul 2022 14:47:53 +0900 Subject: [PATCH 3/4] FIRE-307 fix useState in userInput --- src/components/login/Nickname.tsx | 16 +++++++++------- src/components/login/UserInput.tsx | 7 +++++-- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/login/Nickname.tsx b/src/components/login/Nickname.tsx index e523a27e..eaec1ec9 100644 --- a/src/components/login/Nickname.tsx +++ b/src/components/login/Nickname.tsx @@ -1,13 +1,15 @@ -import React, { useState } from 'react'; +import React from 'react'; import styled from 'styled-components'; -import UserStore from '../../stores/userStore'; - -export default function Nickname() { - const { nickname } = UserStore(); - const [newNickname, setNewNickname] = useState(nickname); +export default function Nickname({ + newNickname, + getData, +}: { + newNickname: string; + getData: (_newNickname: string) => void; +}) { const onChange = (event: React.ChangeEvent) => { - setNewNickname(event.target.value); + getData(event.target.value); }; return ( diff --git a/src/components/login/UserInput.tsx b/src/components/login/UserInput.tsx index 9f37e8c2..dc972d11 100644 --- a/src/components/login/UserInput.tsx +++ b/src/components/login/UserInput.tsx @@ -15,7 +15,10 @@ export default function UserInput({ const navigate = useNavigate(); const { nickname, uid, avatar, setNickname, setUid } = UserStore(); const [newNickname, setNewNickname] = useState(nickname); - console.log(setNewNickname); + const getData = (newNickname) => { + setNewNickname(newNickname); + }; + useEffect(() => { if (!localStorage.getItem('uid')) { const newUID = uuidv4(); @@ -64,7 +67,7 @@ export default function UserInput({
- + {/* */}
From 5e0198867992e4445646004bf7fe8ce9365fddb7 Mon Sep 17 00:00:00 2001 From: leeharyung Date: Tue, 12 Jul 2022 14:57:52 +0900 Subject: [PATCH 4/4] FIRE-307 fix modal ui --- src/components/login/Avater.tsx | 2 +- src/components/login/LoginModal.tsx | 2 +- src/components/login/UserInput.tsx | 7 ++++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/login/Avater.tsx b/src/components/login/Avater.tsx index 4cda2200..39ba20d2 100644 --- a/src/components/login/Avater.tsx +++ b/src/components/login/Avater.tsx @@ -21,7 +21,7 @@ export default function Avater() { } const AvatarContainer = styled.div` - height: 20rem; + height: 23rem; display: flex; flex-direction: column; justify-content: center; diff --git a/src/components/login/LoginModal.tsx b/src/components/login/LoginModal.tsx index 3a3bfc8d..1e9fcab2 100644 --- a/src/components/login/LoginModal.tsx +++ b/src/components/login/LoginModal.tsx @@ -12,7 +12,7 @@ export default function LoginModal({ return ( <> - + diff --git a/src/components/login/UserInput.tsx b/src/components/login/UserInput.tsx index dc972d11..833537bf 100644 --- a/src/components/login/UserInput.tsx +++ b/src/components/login/UserInput.tsx @@ -75,13 +75,13 @@ export default function UserInput({ } const Form = styled.form` - margin-top: 15rem; + margin-top: 4rem; display: flex; flex-direction: column; - align-items: flex-end; + /* align-items: flex-end; */ justify-content: center; z-index: 1001; - width: 40rem; + /* width: 40rem; */ input, button { font-family: PretendardRegular; @@ -92,6 +92,7 @@ const Form = styled.form` `; const Settings = styled.div` + gap: 3rem; display: flex; align-items: flex-end; justify-content: space-between;