Merge pull request #40 from SWM-FIRE/FIRE-290-fe-리팩토링

FIRE-290-fe-리팩토링
SWM-FIRE · Jul 11, 2022 · 56cca9b · 56cca9b · vercel · Jul 11, 2022
2 parents d3d07d3 + 47b2bb6
commit 56cca9b
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 126 deletions.
diff --git a/src/components/lobby/Block.tsx → src/components/main/Block.tsx b/src/components/lobby/Block.tsx → src/components/main/Block.tsx
diff --git a/src/components/lobby/Blocks.tsx → src/components/main/Blocks.tsx b/src/components/lobby/Blocks.tsx → src/components/main/Blocks.tsx
diff --git a/src/components/main/Header.tsx b/src/components/main/Header.tsx
@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+import UserStore from '../../stores/userStore';
+import MyAvatar from '../../assets/avatar/MyAvatar';
+
+export default function Header() {
+  const { nickname, avatar } = UserStore();
+  return (
+    <Container>
+      <Logo>modoco</Logo>
+      <Profile>
+        <AvatarContainer>
+          <MyAvatar num={avatar} />
+        </AvatarContainer>
+        {nickname}
+      </Profile>
+    </Container>
+  );
+}
+
+const Logo = styled.div`
+  font-size: 2.4rem;
+  position: absolute;
+  width: 9.2rem;
+  height: 2.2rem;
+  font-family: PretendardRegular, Arial;
+  color: white;
+  left: 4rem;
+`;
+
+const AvatarContainer = styled.div`
+  height: 4rem;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const Profile = styled.div`
+  right: 4rem;
+  position: absolute;
+  height: 4rem;
+  width: 9rem;
+  border-radius: 4.8rem;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  align-items: center;
+  font-family: IBMPlexSansKRRegular;
+  font-size: 1.5rem;
+  color: white;
+`;
+
+const Container = styled.div`
+  width: 100vw;
+  height: 10rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: solid #2b2e41 0.1rem;
+`;
diff --git a/src/components/main/Scrolls.tsx b/src/components/main/Scrolls.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ScrollMenu } from 'react-horizontal-scrolling-menu';
+import Blocks from './Blocks';
+
+export default function Scrolls() {
+  return (
+    <Container>
+      <ScrollMenu>
+        <Blocks />
+      </ScrollMenu>
+    </Container>
+  );
+}
+const Container = styled.div`
+  margin-top: 3.6rem;
+  width: calc(100% - 10rem);
+  overflow: hidden;
+  .react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar {
+    display: none;
+  }
+  .react-horizontal-scrolling-menu--scroll-container {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  align-self: start;
+  margin-left: 10rem;
+`;
diff --git a/src/components/lobby/Search.tsx → src/components/main/Search.tsx b/src/components/lobby/Search.tsx → src/components/main/Search.tsx
@@ -9,6 +9,7 @@ export default function Search() {
   const changeTag = (event: React.ChangeEvent<HTMLInputElement>) => {
     setTag(event.target.value);
   };
+
   return (
     <SearchContainer>
       <SearhIconContainer>

diff --git a/src/components/main/TitleContainer.tsx b/src/components/main/TitleContainer.tsx
@@ -0,0 +1,69 @@
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import vectors from '../atoms/Vectors';
+import Search from './Search';
+import PositionInterface from '../../interface/position.interface';
+
+export default function TitleContainer() {
+  const navigate = useNavigate();
+  const randomEnter = () => {
+    navigate(`/room/random`);
+  };
+
+  return (
+    <Container>
+      <Vector src={vectors.Circle} left={15} top={61} size={7} />
+      <Vector src={vectors.Z} left={10} top={23} size={11} />
+      <Vector src={vectors.Triangle} left={85} top={18} size={10} />
+      <Vector src={vectors.Plus} left={84} top={58} size={11} />
+      <TitleFlex>
+        <Title color="ffffff">모여서</Title>
+        <Title color="96CEB4">도란도란</Title>
+      </TitleFlex>
+      <Title color="ffffff">코딩해요</Title>
+      <Search />
+      <RandomEnter onClick={randomEnter}>랜덤 입장</RandomEnter>
+    </Container>
+  );
+}
+
+const RandomEnter = styled.button`
+  width: 16.1rem;
+  height: 5.4rem;
+  background-color: white;
+  margin-top: 4rem;
+  border-radius: 6.2rem;
+  cursor: pointer;
+  color: black;
+  font-size: 1.8rem;
+  font-family: JostRegular;
+  font-weight: 700;
+`;
+
+const Container = styled.div`
+  margin-top: 6rem;
+  width: 62rem;
+  height: 35rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Title = styled.h1<{ color: string }>`
+  font-family: GmarketSansTTFBold;
+  margin-left: 2rem;
+  font-size: 7.2rem;
+  align-self: center;
+  color: #${(props) => props.color};
+`;
+
+const Vector = styled.img<PositionInterface>`
+  position: absolute;
+  width: ${(props) => props.size}rem;
+  left: ${(props) => props.left}%;
+  top: ${(props) => props.top}%;
+`;
+
+const TitleFlex = styled.div`
+  display: flex;
+`;
diff --git a/src/interface/position.interface.ts b/src/interface/position.interface.ts
@@ -0,0 +1,6 @@
+export default interface Position {
+  size?: number;
+  left?: number;
+  top: number;
+  right?: number;
+}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ScrollMenu } from 'react-horizontal-scrolling-menu';
 import vectors from '../components/atoms/Vectors';
-import Blocks from '../components/lobby/Blocks';
-import Search from '../components/lobby/Search';
+import Blocks from '../components/main/Blocks';
+import Search from '../components/main/Search';
 import InputNickname from '../components/login/InputNickname';
 import Modal from '../components/atoms/Modal';
 

diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
@@ -1,135 +1,32 @@
+import { useState } from 'react';
 import styled from 'styled-components';
-import { useNavigate } from 'react-router-dom';
-import { ScrollMenu } from 'react-horizontal-scrolling-menu';
-import vectors from '../components/atoms/Vectors';
-import Blocks from '../components/lobby/Blocks';
-import Search from '../components/lobby/Search';
+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';
 
 export default function Main() {
-  const navigate = useNavigate();
-  const randomEnter = () => {
-    navigate(`/room/random`);
+  const [isModal, setIsModal] = useState(true);
+  const modalHandler = () => {
+    setIsModal(false);
   };
   return (
-    <Container>
-      <Header>
-        <Logo>modoco</Logo>
-        <Profile />
-      </Header>
-      <TitleContainer>
-        <Vector src={vectors.Circle} left={15} top={61} size={7} />
-        <Vector src={vectors.Z} left={10} top={23} size={11} />
-        <Vector src={vectors.Triangle} left={85} top={18} size={10} />
-        <Vector src={vectors.Plus} left={84} top={58} size={11} />
-        <TitleFlex>
-          <Title color="ffffff">모여서</Title>
-          <Title color="96CEB4">도란도란</Title>
-        </TitleFlex>
-        <Title color="ffffff">코딩해요</Title>
-        <Search />
-        <RandomEnter onClick={randomEnter}>랜덤 입장</RandomEnter>
-      </TitleContainer>
-      <ScrollContainer>
-        <ScrollMenu>
-          <Blocks />
-        </ScrollMenu>
-      </ScrollContainer>
-    </Container>
+    <>
+      <Container>
+        <Header />
+        <Title />
+        <Scrolls />
+      </Container>
+      {isModal && (
+        <Modal modalHandler={modalHandler}>
+          <InputNickname />
+        </Modal>
+      )}
+    </>
   );
 }
 
-interface Position {
-  size?: number;
-  left?: number;
-  top: number;
-  right?: number;
-}
-
-const TitleFlex = styled.div`
-  display: flex;
-  z-index: 999;
-`;
-
-const Vector = styled.img<Position>`
-  position: absolute;
-  width: ${(props) => props.size}rem;
-  left: ${(props) => props.left}%;
-  top: ${(props) => props.top}%;
-`;
-
-const ScrollContainer = styled.div`
-  margin-top: 3.6rem;
-  width: calc(100% - 10rem);
-  overflow: hidden;
-  .react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar {
-    display: none;
-  }
-  .react-horizontal-scrolling-menu--scroll-container {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-  align-self: start;
-  margin-left: 10rem;
-`;
-
-const RandomEnter = styled.button`
-  width: 16.1rem;
-  height: 5.4rem;
-  background-color: white;
-  margin-top: 4rem;
-  border-radius: 6.2rem;
-  cursor: pointer;
-  color: black;
-  font-size: 1.8rem;
-  font-family: JostRegular;
-  font-weight: 700;
-`;
-
-const TitleContainer = styled.div`
-  margin-top: 6rem;
-  width: 62rem;
-  height: 35rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Title = styled.h1<{ color: string }>`
-  font-family: GmarketSansTTFBold;
-  margin-left: 2rem;
-  font-size: 7.2rem;
-  align-self: center;
-  color: #${(props) => props.color};
-`;
-
-const Logo = styled.div`
-  font-size: 2.4rem;
-  position: absolute;
-  width: 9.2rem;
-  height: 2.2rem;
-  font-family: PretendardRegular, Arial;
-  color: white;
-  left: 4rem;
-`;
-
-const Profile = styled.div`
-  background-color: gray;
-  right: 4rem;
-  position: absolute;
-  height: 4rem;
-  width: 9rem;
-  border-radius: 4.8rem;
-`;
-
-const Header = styled.div`
-  width: 100vw;
-  height: 10rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-bottom: solid #2b2e41 0.1rem;
-`;
-
 const Container = styled.div`
   margin: 0;
   padding: 0;

diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
@@ -1,20 +1,26 @@
 import create from 'zustand';
 
 interface User {
+  avatar: number;
   nickname: string;
   uid: string;
   setNickname: (_by: string) => void;
   setUid: (_by: string) => void;
+  setAvatar: (_by: number) => void;
 }
 const UserStore = create<User>((set) => ({
   nickname: '',
   uid: '',
+  avatar: 1,
   setNickname: (by) => {
     set(() => ({ nickname: by }));
   },
   setUid: (by) => {
     set(() => ({ uid: by }));
   },
+  setAvatar: (by) => {
+    set(() => ({ avatar: by }));
+  },
 }));
 
 export default UserStore;