[Feat] 로그인페이지 Guest로 입장하기 구현 #49

OkMoK-co · Apr 21, 2023 · 10904ee · 10904ee
1 parent e45245d
commit 10904ee
Show file tree

Hide file tree

Showing 12 changed files with 213 additions and 79 deletions.
diff --git a/hybrid/src/components/buttons/ShiningButton.tsx b/hybrid/src/components/buttons/ShiningButton.tsx
@@ -3,12 +3,18 @@ import styled from 'styled-components';
 
 interface ShinningButtonProps {
   value: string;
+  moveTo: string;
+  clickHandler?: () => void;
 }
 
-export default function ShiningButton({ value }: ShinningButtonProps) {
+export default function ShiningButton({
+  value,
+  moveTo,
+  clickHandler,
+}: ShinningButtonProps) {
   return (
     <ShinningEffect>
-      <Link href='/login'>
+      <Link href={moveTo} onClick={clickHandler}>
         <span></span>
         <span></span>
         <span></span>

diff --git a/hybrid/src/components/layout/Footer.tsx b/hybrid/src/components/layout/Footer.tsx
@@ -2,14 +2,14 @@ import styled from 'styled-components';
 
 export default function Footer() {
   return (
-    <FooterContainer>
+    <Container>
       <p>GitHub | Rule | Contact</p>
       <p>Copyright © 2023 OkMoK. All rights reserved.</p>
-    </FooterContainer>
+    </Container>
   );
 }
 
-const FooterContainer = styled.footer`
+const Container = styled.footer`
   ${({ theme }) => theme.flexs.centerColumn};
   height: 3rem;
   margin: 1.5rem;

diff --git a/hybrid/src/components/layout/Header.tsx b/hybrid/src/components/layout/Header.tsx
@@ -1,17 +1,14 @@
 import styled from 'styled-components';
+import Logo from './Logo';
+
 interface HeaderProps {
   children?: React.ReactNode;
 }
+
 export default function Header({ children }: HeaderProps) {
   return (
     <Container>
-      <h1>
-        <span>O</span>
-        <span>k</span>
-        <span>M</span>
-        <span>o</span>
-        <span>K</span>
-      </h1>
+      <Logo />
       {children}
     </Container>
   );
@@ -21,35 +18,8 @@ const Container = styled.header`
   ${({ theme }) => theme.flexs.center};
   height: 5rem;
   margin: 1.5rem;
-  h1 {
-    font-size: ${({ theme }) => theme.fontsizes.xxlarge};
-    span {
-      margin: 0 0.2rem;
-    }
-    span:nth-child(1) {
-      color: ${({ theme }) => theme.colors.red};
-    }
-    span:nth-child(2) {
-      color: ${({ theme }) => theme.colors.green};
-    }
-    span:nth-child(3) {
-      color: ${({ theme }) => theme.colors.blue};
-    }
-    span:nth-child(4) {
-      color: ${({ theme }) => theme.colors.yellow};
-    }
-    span:nth-child(5) {
-      color: ${({ theme }) => theme.colors.aqua};
-    }
-  }
   @media (${({ theme: { device } }) => device.mobile}) {
     height: 2.5rem;
     margin: 0.8rem;
-    h1 {
-      font-size: ${({ theme }) => theme.fontsizes.xlarge};
-      span {
-        margin: 0 0.1rem;
-      }
-    }
   }
 `;
diff --git a/hybrid/src/components/layout/LoginLayout.tsx b/hybrid/src/components/layout/LoginLayout.tsx
@@ -1,4 +1,6 @@
-import Header from './Header';
+import styled from 'styled-components';
+import { LayoutContainer } from '@/styles/common-style';
+import Logo from './Logo';
 import Footer from './Footer';
 
 interface LoginLayoutProps {
@@ -7,10 +9,23 @@ interface LoginLayoutProps {
 
 export default function LoginLayout({ children }: LoginLayoutProps) {
   return (
-    <>
-      <Header />
-      <main>{children}</main>
+    <Container>
+      <LogoTitleWrap>
+        <Logo size={'big'} />
+      </LogoTitleWrap>
+      {children}
       <Footer />
-    </>
+    </Container>
   );
 }
+
+const Container = styled(LayoutContainer)``;
+
+const LogoTitleWrap = styled.div`
+  margin-top: 8rem;
+  height: 15rem;
+  @media (${({ theme: { device } }) => device.mobile}) {
+    margin-top: 6.6rem;
+    height: 5rem;
+  }
+`;
diff --git a/hybrid/src/components/layout/Logo.tsx b/hybrid/src/components/layout/Logo.tsx
@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+interface LogoProps {
+  size?: string;
+}
+
+export default function Logo({ size }: LogoProps) {
+  return (
+    <Container size={size || 'normal'}>
+      <span>O</span>
+      <span>k</span>
+      <span>M</span>
+      <span>o</span>
+      <span>K</span>
+    </Container>
+  );
+}
+
+const Container = styled.h1<{ size: string }>`
+  font-size: ${({ size, theme }) =>
+    theme.fontsizes[logoFontSize.desktop[size]]};
+  span {
+    margin: 0 0.2rem;
+  }
+  span:nth-child(1) {
+    color: ${({ theme }) => theme.colors.red};
+  }
+  span:nth-child(2) {
+    color: ${({ theme }) => theme.colors.green};
+  }
+  span:nth-child(3) {
+    color: ${({ theme }) => theme.colors.blue};
+  }
+  span:nth-child(4) {
+    color: ${({ theme }) => theme.colors.yellow};
+  }
+  span:nth-child(5) {
+    color: ${({ theme }) => theme.colors.aqua};
+  }
+  @media (${({ theme: { device } }) => device.mobile}) {
+    font-size: ${({ size, theme }) =>
+      theme.fontsizes[logoFontSize.mobile[size]]};
+    span {
+      margin: 0 0.1rem;
+    }
+  }
+`;
+
+const logoFontSize: { [key: string]: { [key: string]: string } } = {
+  desktop: {
+    normal: `xxlarge`,
+    big: `giantlarge`,
+  },
+  mobile: {
+    normal: `xlarge`,
+    big: `xxlarge`,
+  },
+};
diff --git a/hybrid/src/components/layout/SocketConnect.tsx b/hybrid/src/components/layout/SocketConnect.tsx
@@ -11,51 +11,42 @@ interface SocketConnectProps {
 }
 
 export default function SocketConnect({ children }: SocketConnectProps) {
+  const loginHandler = useRequest({ id: socketVar.LOGIN_REQUEST });
   const [socket, setSocket] = useRecoilState(socketState);
   const [response, setResponse] = useRecoilState(responseState);
   const router = useRouter();
 
   useEffect(() => {
-    if (!socket) {
-      const newSocket = new WebSocket('ws://localhost:8080');
-
-      newSocket.binaryType = 'arraybuffer';
-
-      newSocket.addEventListener('open', () => {
+    if (socket) {
+      socket.binaryType = 'arraybuffer';
+      socket.onopen = () => {
         console.log('WebSocket connection opened!');
-        setSocket(newSocket);
-        const buffer = new ArrayBuffer(5);
-        const data = new DataView(buffer);
-        data.setInt16(0, 5, true);
-        data.setInt16(2, socketVar.LOGIN_REQUEST, true);
-        data.setInt8(4, 0);
-        newSocket.send(data);
-      });
-
-      newSocket.addEventListener('message', (event) => {
+        loginHandler();
+      };
+      socket.onmessage = (event) => {
         console.log('Received message:', event.data);
-
         const data = new DataView(event.data);
-
         const size = data.getUint16(0, true);
         const id = data.getUint16(2, true);
         const option = data.getUint8(4);
-
         routeResponse[id]({
           packet: { data, id, option, router },
           setResponse,
         });
-      });
-
-      newSocket.addEventListener('close', () => {
+      };
+      socket.onclose = () => {
         console.log('WebSocket connection closed!');
-      });
+        setSocket(null);
+      };
+    } else {
+      /** todo: 연결이 끊기면 모달로 안내창 띄워준 후 로그인페이지로 이동 필요*/
+      router.push('/login');
     }
 
     return () => {
       socket?.close();
     };
-  }, []);
+  }, [socket]);
 
   return <>{children}</>;
 }
diff --git a/hybrid/src/pages/404.tsx b/hybrid/src/pages/404.tsx
@@ -1,5 +1,5 @@
-import { ContentContainer } from '@/styles/common-style';
 import styled from 'styled-components';
+import { ContentContainer } from '@/styles/common-style';
 import ShiningBackground from '@/components/animation/ShiningBackground';
 import ShiningButton from '@/components/buttons/ShiningButton';
 
@@ -10,7 +10,7 @@ export default function Page404() {
       <Content>
         <h1> 404 </h1>
         <p> Page Not Found </p>
-        <ShiningButton value={'Go Home'} />
+        <ShiningButton value={'Go Home'} moveTo={'/login'} />
       </Content>
     </Container>
   );

diff --git a/hybrid/src/pages/login.tsx b/hybrid/src/pages/login.tsx
@@ -1,14 +1,53 @@
-import type { ReactElement } from 'react';
+import { useRouter } from 'next/router';
+import { ReactElement } from 'react';
+import { useRecoilState } from 'recoil';
+import styled from 'styled-components';
 import type { NextPageWithLayout } from '@/pages/_app';
+import { socketState } from '@/utils/recoil/socket';
 import LoginLayout from '@/components/layout/LoginLayout';
+import ShiningButton from '@/components/buttons/ShiningButton';
+import { ContentContainer } from '@/styles/common-style';
 
 const Login: NextPageWithLayout = () => {
+  const [socket, setSocket] = useRecoilState(socketState);
+  const router = useRouter();
+  const contentKey = String(router.query.state);
+  const contentList: { [key: string]: { [key: string]: string } } = {
+    undefined: {
+      content: 'Welcome',
+      subContent: 'Enjoy your game!',
+      buttonValue: 'Enter',
+    },
+    full: {
+      content: 'Room is Full',
+      subContent: 'Please try again...',
+      buttonValue: 'Re-Enter',
+    },
+  };
+
+  const connectSocket = () => {
+    if (!socket) {
+      const newSocket = new WebSocket('ws://localhost:8080');
+      setSocket(newSocket);
+    }
+  };
+
   return (
-    <main>
-      <h1>- - Welcome - -</h1>
-      <h2>Enjoy your game!</h2>
-      <button>Enter ...</button>
-    </main>
+    <Container>
+      <Section>
+        <Content>
+          <hr /> <hr />
+          {contentList[contentKey].content}
+          <hr /> <hr />
+        </Content>
+        <SubContent>{contentList[contentKey].subContent}</SubContent>
+        <ShiningButton
+          value={contentList[contentKey].buttonValue}
+          moveTo={''}
+          clickHandler={connectSocket}
+        />
+      </Section>
+    </Container>
   );
 };
 
@@ -17,3 +56,52 @@ Login.getLayout = function getLayout(page: ReactElement) {
 };
 
 export default Login;
+
+const Container = styled(ContentContainer)`
+  ${({ theme }) => theme.flexs.centerColumn}
+  justify-content: start;
+  min-height: calc(100% - (23rem + 6rem + 0.6rem));
+  @media (${({ theme: { device } }) => device.mobile}) {
+    min-height: calc(100% - (9.1rem + 3.4rem + 0.6rem));
+  }
+`;
+
+const Section = styled.section`
+  ${({ theme }) => theme.flexs.centerColumn}
+  width: 70%;
+  height: 70%;
+  border: ${({ theme }) => `${theme.thick.bold} solid ${theme.colors.green}`};
+  color: ${({ theme }) => theme.colors.green};
+  letter-spacing: 4px;
+  @media (${({ theme: { device } }) => device.mobile}) {
+    width: 100%;
+    height: 80%;
+    margin-top: 2rem;
+  }
+`;
+
+const Content = styled.h1`
+  ${({ theme }) => theme.flexs.center}
+  width: 100%;
+  margin-bottom: 2rem;
+  font-size: ${({ theme }) => theme.fontsizes.xxlarge};
+  hr {
+    width: 0.7rem;
+    margin: 0 0.3rem;
+    border: ${({ theme }) => `${theme.thick.thin} solid ${theme.colors.green}`};
+  }
+  @media (${({ theme: { device } }) => device.mobile}) {
+    margin: 1rem 0;
+    font-size: ${({ theme }) => theme.fontsizes.xlarge};
+  }
+`;
+
+const SubContent = styled.h2`
+  margin-bottom: 4rem;
+  font-size: ${({ theme }) => theme.fontsizes.large};
+  color: ${({ theme }) => theme.colors.white};
+  @media (${({ theme: { device } }) => device.mobile}) {
+    margin-bottom: 2rem;
+    font-size: ${({ theme }) => theme.fontsizes.medium};
+  }
+`;