From c0dc35326b38861e42bf163aaab9b72aedd4d67e Mon Sep 17 00:00:00 2001 From: 071yoon Date: Sun, 10 Jul 2022 20:41:09 +0900 Subject: [PATCH 1/4] FIRE-290 refactor refactor code --- src/components/{lobby => main}/Block.tsx | 0 src/components/{lobby => main}/Blocks.tsx | 0 src/components/main/Header.tsx | 60 ++++++++++ src/components/main/Scrolls.tsx | 27 +++++ src/components/{lobby => main}/Search.tsx | 1 + src/components/main/TitleContainer.tsx | 69 +++++++++++ src/interface/position.interface.ts | 6 + src/pages/Main.tsx | 137 ++-------------------- src/stores/userStore.ts | 6 + 9 files changed, 181 insertions(+), 125 deletions(-) rename src/components/{lobby => main}/Block.tsx (100%) rename src/components/{lobby => main}/Blocks.tsx (100%) create mode 100644 src/components/main/Header.tsx create mode 100644 src/components/main/Scrolls.tsx rename src/components/{lobby => main}/Search.tsx (99%) create mode 100644 src/components/main/TitleContainer.tsx create mode 100644 src/interface/position.interface.ts diff --git a/src/components/lobby/Block.tsx b/src/components/main/Block.tsx similarity index 100% rename from src/components/lobby/Block.tsx rename to src/components/main/Block.tsx diff --git a/src/components/lobby/Blocks.tsx b/src/components/main/Blocks.tsx similarity index 100% rename from src/components/lobby/Blocks.tsx rename to src/components/main/Blocks.tsx diff --git a/src/components/main/Header.tsx b/src/components/main/Header.tsx new file mode 100644 index 00000000..43fb85f1 --- /dev/null +++ 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 ( + + modoco + + + + + {nickname} + + + ); +} + +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 new file mode 100644 index 00000000..2954e97f --- /dev/null +++ b/src/components/main/Scrolls.tsx @@ -0,0 +1,27 @@ +import styled from 'styled-components'; +import { ScrollMenu } from 'react-horizontal-scrolling-menu'; +import Blocks from './Blocks'; + +export default function Scrolls() { + return ( + + + + + + ); +} +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 b/src/components/main/Search.tsx similarity index 99% rename from src/components/lobby/Search.tsx rename to src/components/main/Search.tsx index 22d93fee..7cbd81cd 100644 --- a/src/components/lobby/Search.tsx +++ b/src/components/main/Search.tsx @@ -9,6 +9,7 @@ export default function Search() { const changeTag = (event: React.ChangeEvent) => { setTag(event.target.value); }; + return ( diff --git a/src/components/main/TitleContainer.tsx b/src/components/main/TitleContainer.tsx new file mode 100644 index 00000000..0c58a5b5 --- /dev/null +++ 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 ( + + + + + + + 모여서 + 도란도란 + + 코딩해요 + + 랜덤 입장 + + ); +} + +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` + 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 new file mode 100644 index 00000000..ba17e259 --- /dev/null +++ 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/Main.tsx b/src/pages/Main.tsx index 3c6bc6d6..03552120 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -1,135 +1,22 @@ 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/layout/Modal'; export default function Main() { - const navigate = useNavigate(); - const randomEnter = () => { - navigate(`/room/random`); - }; return ( - -
- modoco - -
- - - - - - - 모여서 - 도란도란 - - 코딩해요 - - 랜덤 입장 - - - - - - - + <> + +
+ + <Scrolls /> + </Container> + <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 index 39bd3e28..7db330f3 100644 --- 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; From e87947e4aa7b553dd85386b5a113038925e587d5 Mon Sep 17 00:00:00 2001 From: 071yoon <yeonggilol@gmail.com> Date: Sun, 10 Jul 2022 20:41:36 +0900 Subject: [PATCH 2/4] FIRE-290 remove navigate modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit modal에서 enter누르면 /lobby로 이동하던거 수정 --- src/components/layout/Modal.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx index 101358b7..8cb4eefd 100644 --- a/src/components/layout/Modal.tsx +++ b/src/components/layout/Modal.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; -import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import { v4 as uuidv4 } from 'uuid'; import UserStore from '../../stores/userStore'; @@ -13,7 +12,6 @@ export default function Modal() { setIsModal((prev) => !prev); }; - const navigate = useNavigate(); const { nickname, uid, setNickname, setUid } = UserStore(); useEffect(() => { if (localStorage.getItem('uid')) { @@ -55,7 +53,7 @@ export default function Modal() { // socket.emit('ENTER_ROOM', payload, (confirmRoomId) => { // navigate(`screens`); // }); - navigate(`lobby`); + setIsModal((prev) => !prev); }; const onChange = (event: React.ChangeEvent<HTMLInputElement>) => { From eb36de12e6e149597755ecb1594d239399f832d9 Mon Sep 17 00:00:00 2001 From: 071yoon <yeonggilol@gmail.com> Date: Mon, 11 Jul 2022 01:39:09 +0900 Subject: [PATCH 3/4] refactor --- src/components/main/Scrolls.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/main/Scrolls.tsx b/src/components/main/Scrolls.tsx index 2954e97f..d48dd9ea 100644 --- a/src/components/main/Scrolls.tsx +++ b/src/components/main/Scrolls.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import styled from 'styled-components'; import { ScrollMenu } from 'react-horizontal-scrolling-menu'; import Blocks from './Blocks'; From 47b2bb6e25749d56f674969500d625f84827be39 Mon Sep 17 00:00:00 2001 From: 071yoon <yeonggilol@gmail.com> Date: Mon, 11 Jul 2022 01:45:16 +0900 Subject: [PATCH 4/4] FIRE-290 edit imports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit import 다른 directory에서 가져오는 오류 수정 --- src/pages/Login.tsx | 4 ++-- src/pages/Main.tsx | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 774bcaf5..1286c041 100644 --- 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 index 03552120..1bf17472 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -1,10 +1,16 @@ +import { useState } from 'react'; 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/layout/Modal'; +import Modal from '../components/atoms/Modal'; +import InputNickname from '../components/login/InputNickname'; export default function Main() { + const [isModal, setIsModal] = useState(true); + const modalHandler = () => { + setIsModal(false); + }; return ( <> <Container> @@ -12,7 +18,11 @@ export default function Main() { <Title /> <Scrolls /> </Container> - <Modal /> + {isModal && ( + <Modal modalHandler={modalHandler}> + <InputNickname /> + </Modal> + )} </> ); }