Fire 279 fe 아바타 재발급 버튼 제작

src/components/login/Avater.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+import MyAvatar from '../../assets/avatar/MyAvatar';
+import UserStore from '../../stores/userStore';
+
+export default function Avater() {
+  const { avatar } = UserStore();
+  return (
+    <AvatarContainer>
+      <MyAvatar num={Number(avatar)} />
+    </AvatarContainer>
+  );
+}
+
+const AvatarContainer = styled.div`
+  height: 4rem;
+  width: 17rem;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;

src/components/login/Buttons.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import UserStore from '../../stores/userStore';
+
+export default function Buttons() {
+  const { nickname, setAvatar } = UserStore();
+  const onClick = () => {
+    const randomNumber = Math.floor(Math.random() * 30) + 1; // 1~30 사이 정수 생성
+    setAvatar(JSON.stringify(randomNumber));
+  };
+  return (
+    <Component>
+      <Button type="button" onClick={onClick}>
+        Random Character
+      </Button>
+      <Button disabled={nickname === null || !nickname.length}>Enter</Button>
+    </Component>
+  );
+}
+
+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;
+`;

src/components/login/LoginModal.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import vectors from '../atoms/Vectors';
+import ModalTitle from './ModalTitle';
+import UserInput from './UserInput';
+
+export default function LoginModal({
+  modalHandler,
+}: {
+  modalHandler: () => void;
+}) {
+  return (
+    <>
+      <Vector src={vectors.Lamp} left={0} top={0} size={40} />
+      <Vector src={vectors.Book} left={28.7} top={14.4} size={60} />
+      <ModalTitle />
+      <UserInput modalHandler={modalHandler} />
+    </>
+  );
+}
+
+interface Position {
+  size?: number;
+  left?: number;
+  top: number;
+  right?: number;
+}
+
+const Vector = styled.img<Position>`
+  position: absolute;
+  width: ${(props) => props.size}rem;
+  left: ${(props) => props.left}%;
+  top: ${(props) => props.top}%;
+  opacity: 0.5;
+  z-index: 1000;
+`;

src/components/login/ModalTitle.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export default function ModalTitle() {
+  return (
+    <Message>
+      <TitleLogo>
+        모여서 도란도란 코딩,<span>Modoco</span>
+      </TitleLogo>
+      <TitleStart>시작하기</TitleStart>
+    </Message>
+  );
+}
+
+const Message = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  width: 100%;
+  z-index: 1001;
+`;
+
+const TitleLogo = styled.div`
+  font-size: 18px;
+  font-family: IBMPlexMonoRegular;
+`;
+
+const TitleStart = styled.div`
+  font-family: PretendardRegular;
+  font-weight: 500;
+  font-size: 4rem;
+  margin-top: 2rem;
+`;

src/components/login/InputNickname.tsx → src/components/login/UserInput.tsx

@@ -4,20 +4,22 @@ import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import UserStore from '../../stores/userStore';
-import vectors from '../atoms/Vectors';
+import Avater from './Avater';
+import Buttons from './Buttons';
 
-export default function InputNickname({
+export default function UserInput({
   modalHandler,
 }: {
   modalHandler: () => void;
 }) {
   const navigate = useNavigate();
-  const { nickname, uid, setNickname, setUid } = UserStore();
+  const { nickname, uid, avatar, setNickname, setUid, setAvatar } = UserStore();
   useEffect(() => {
     if (localStorage.getItem('uid')) {
       console.log('existing user');
       setUid(localStorage.getItem('uid'));
       setNickname(localStorage.getItem('nickname'));
+      setAvatar(localStorage.getItem('avatar'));
     } else {
       console.log('new user');
       const newUID = uuidv4();
@@ -48,6 +50,7 @@ export default function InputNickname({
     // socket connection
     const payload = { nickname, uid };
     localStorage.setItem('nickname', nickname);
+    localStorage.setItem('avatar', avatar);
     console.log('payload: ', payload);
     sendData();
     // socket.emit('ENTER_ROOM', payload, (confirmRoomId) => {
@@ -68,16 +71,9 @@ export default function InputNickname({
   };
 
   return (
-    <>
-      <Vector src={vectors.Lamp} left={0} top={0} size={40} />
-      <Vector src={vectors.Book} left={28.7} top={14.4} size={60} />
-      <Message>
-        <TitleLogo>
-          모여서 도란도란 코딩,<span>Modoco</span>
-        </TitleLogo>
-        <TitleStart>시작하기</TitleStart>
-      </Message>
-      <Form onSubmit={onSubmit}>
+    <Form onSubmit={onSubmit}>
+      <Settings>
+        <Avater />
         <Input
           autoComplete="off"
           value={nickname}
@@ -86,73 +82,36 @@ export default function InputNickname({
           placeholder="Enter Nickname"
           id="nickname"
         />
-        <Button disabled={nickname === null || !nickname.length}>Enter</Button>
-        {/* <Button>GitHub 계정</Button> */}
-      </Form>
-    </>
+      </Settings>
+      <Buttons />
+      {/* <Button>GitHub 계정</Button> */}
+    </Form>
   );
 }
 
-interface Position {
-  size?: number;
-  left?: number;
-  top: number;
-  right?: number;
-}
-
-const Vector = styled.img<Position>`
-  position: absolute;
-  width: ${(props) => props.size}rem;
-  left: ${(props) => props.left}%;
-  top: ${(props) => props.top}%;
-  opacity: 0.5;
-  z-index: 1000;
-`;
-
-const Message = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  width: 100%;
-  z-index: 1001;
-`;
-
-const TitleLogo = styled.div`
-  font-size: 18px;
-  font-family: IBMPlexMonoRegular;
-`;
-
-const TitleStart = styled.div`
-  font-family: PretendardRegular;
-  font-weight: 500;
-  font-size: 4rem;
-  margin-top: 2rem;
-`;
-
 const Form = styled.form`
   margin-top: 15rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   z-index: 1001;
+  width: 35rem;
   button,
   input {
     font-family: PretendardRegular;
     font-weight: 600;
     height: 6rem;
-    width: 40rem;
+    width: 17rem;
     border-radius: 0.8rem;
   }
 `;
 
-const Button = styled.button`
-  font-size: 1.5rem;
-  background-color: white;
-  margin-top: 2rem;
-  cursor: pointer;
+const Settings = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 `;
 
 const Input = styled.input`

src/components/main/Header.tsx

@@ -9,7 +9,7 @@ export default function Header() {
       <Logo>modoco</Logo>
       <Profile>
         <AvatarContainer>
-          <MyAvatar num={avatar} />
+          <MyAvatar num={Number(avatar)} />
         </AvatarContainer>
         {nickname}
       </Profile>

src/pages/Login.tsx

@@ -5,8 +5,8 @@ import { ScrollMenu } from 'react-horizontal-scrolling-menu';
 import vectors from '../components/atoms/Vectors';
 import Blocks from '../components/main/Blocks';
 import Search from '../components/main/Search';
-import InputNickname from '../components/login/InputNickname';
 import Modal from '../components/layout/Modal';
+import LoginModal from '../components/login/LoginModal';
 
 export default function Main() {
   const navigate = useNavigate();
@@ -48,7 +48,7 @@ export default function Main() {
       </ScrollContainer>
       {isModal && (
         <Modal modalHandler={closeModalHandler}>
-          <InputNickname modalHandler={closeModalHandler} />
+          <LoginModal modalHandler={closeModalHandler} />
         </Modal>
       )}
     </Container>

src/pages/Main.tsx

@@ -3,14 +3,19 @@ import styled from 'styled-components';
 import Scrolls from '../components/main/Scrolls';
 import Header from '../components/main/Header';
 import Title from '../components/main/TitleContainer';
-import Modal from '../components/atoms/Modal';
-import InputNickname from '../components/login/InputNickname';
+import Modal from '../components/layout/Modal';
+import InputNickname from '../components/login/UserInput';
 
 export default function Main() {
   const [isModal, setIsModal] = useState(true);
-  const modalHandler = () => {
+  const closeModalHandler = () => {
     setIsModal(false);
   };
+
+  // const openModalHandler = () => {
+  //   setIsModal(true);
+  // };
+
   return (
     <>
       <Container>
@@ -19,8 +24,8 @@ export default function Main() {
         <Scrolls />
       </Container>
       {isModal && (
-        <Modal modalHandler={modalHandler}>
-          <InputNickname />
+        <Modal modalHandler={closeModalHandler}>
+          <InputNickname modalHandler={closeModalHandler} />
         </Modal>
       )}
     </>

src/stores/userStore.ts

@@ -1,17 +1,17 @@
 import create from 'zustand';
 
 interface User {
-  avatar: number;
+  avatar: string;
   nickname: string;
   uid: string;
   setNickname: (_by: string) => void;
   setUid: (_by: string) => void;
-  setAvatar: (_by: number) => void;
+  setAvatar: (_by: string) => void;
 }
 const UserStore = create<User>((set) => ({
   nickname: '',
   uid: '',
-  avatar: 1,
+  avatar: '1',
   setNickname: (by) => {
     set(() => ({ nickname: by }));
   },