Merge pull request #46 from SWM-FIRE/FIRE-307-fe-모달창-ui-수정

Fire 307 fe 모달창 UI 수정

Author: 071yoon

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;
 `;

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 (
     <AvatarContainer>
       <MyAvatar num={Number(avatar)} />
+      <Button type="button" onClick={onClick}>
+        아바타 재생성
+      </Button>
     </AvatarContainer>
   );
 }
 
 const AvatarContainer = styled.div`
-  height: 4rem;
-  width: 17rem;
+  height: 23rem;
+  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;
+`;

src/components/login/Buttons.tsx

@@ -12,7 +12,7 @@ export default function LoginModal({
   return (
     <>
       <Vector src={vectors.Lamp} left={0} top={0} size={40} />
-      <Vector src={vectors.Book} left={28.7} top={14.4} size={60} />
+      <Vector src={vectors.Book} left={28.7} top={10.4} size={60} />
       <ModalTitle />
       <UserInput modalHandler={modalHandler} />
     </>

src/components/login/LoginModal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export default function Nickname({
+  newNickname,
+  getData,
+}: {
+  newNickname: string;
+  getData: (_newNickname: string) => void;
+}) {
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    getData(event.target.value);
+  };
+
+  return (
+    <Component>
+      <Input
+        autoComplete="off"
+        value={newNickname}
+        onChange={onChange}
+        placeholder="닉네임을 입력해주세요"
+        id="nickname"
+      />
+      <Button>확인</Button>
+    </Component>
+  );
+}
+
+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;
+`;

src/components/login/Nickname.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,10 @@ export default function UserInput({
   const navigate = useNavigate();
   const { nickname, uid, avatar, setNickname, setUid } = UserStore();
   const [newNickname, setNewNickname] = useState(nickname);
-  console.log('newnickname ', newNickname);
+  const getData = (newNickname) => {
+    setNewNickname(newNickname);
+  };
+
   useEffect(() => {
     if (!localStorage.getItem('uid')) {
       const newUID = uuidv4();
@@ -43,7 +46,6 @@ export default function UserInput({
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (newNickname === null) {
-      console.log('으악');
       return false;
     }
     // socket connection
@@ -61,57 +63,38 @@ export default function UserInput({
     return true;
   };
 
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setNewNickname(event.target.value);
-  };
-
   return (
     <Form onSubmit={onSubmit}>
       <Settings>
         <Avater />
-        <Input
-          autoComplete="off"
-          value={newNickname}
-          onChange={onChange}
-          placeholder="Enter Nickname"
-          id="nickname"
-        />
+        <Nickname getData={getData} newNickname={newNickname} />
       </Settings>
-      <Buttons />
       {/* <Button>GitHub 계정</Button> */}
     </Form>
   );
 }
 
 const Form = styled.form`
-  margin-top: 15rem;
+  margin-top: 4rem;
   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`
+  gap: 3rem;
   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;
-`;