From 10904ee98b48cd6af76bc8d87d8b9d5197687e63 Mon Sep 17 00:00:00 2001
From: pearpearB <smilyoung@gmail.com>
Date: Fri, 21 Apr 2023 12:38:21 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20Guest=EB=A1=9C=20=EC=9E=85=EC=9E=A5?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EA=B5=AC=ED=98=84=20#49?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/buttons/ShiningButton.tsx  |  10 +-
 hybrid/src/components/layout/Footer.tsx       |   6 +-
 hybrid/src/components/layout/Header.tsx       |  38 +------
 hybrid/src/components/layout/LoginLayout.tsx  |  25 ++++-
 hybrid/src/components/layout/Logo.tsx         |  58 ++++++++++
 .../src/components/layout/SocketConnect.tsx   |  39 +++----
 hybrid/src/pages/404.tsx                      |   4 +-
 hybrid/src/pages/login.tsx                    | 100 ++++++++++++++++--
 hybrid/src/socket/responseHandler.tsx         |   6 +-
 hybrid/src/styles/common-style.ts             |   1 +
 hybrid/src/styles/global-style.tsx            |   4 +-
 hybrid/src/styles/theme.ts                    |   1 +
 12 files changed, 213 insertions(+), 79 deletions(-)
 create mode 100644 hybrid/src/components/layout/Logo.tsx

diff --git a/hybrid/src/components/buttons/ShiningButton.tsx b/hybrid/src/components/buttons/ShiningButton.tsx
index 495a6ae..d5cdcff 100644
--- 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
index 7360179..b709578 100644
--- 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
index 8c24fff..0d6e1cd 100644
--- 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
index 6a87e29..855cbb4 100644
--- 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
new file mode 100644
index 0000000..1a2d471
--- /dev/null
+++ 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
index f601f8d..2a8b924 100644
--- 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
index d32c4bf..dcf4f04 100644
--- 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
index 22f4919..b7e14c6 100644
--- 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};
+  }
+`;
diff --git a/hybrid/src/socket/responseHandler.tsx b/hybrid/src/socket/responseHandler.tsx
index 9a7cfc9..9b94987 100644
--- a/hybrid/src/socket/responseHandler.tsx
+++ b/hybrid/src/socket/responseHandler.tsx
@@ -1,11 +1,11 @@
 import { routeResponseProps, room, putInfo } from '@/utils/type/socketType';
 
 export function loginHandler({
-  packet: { data, id, option },
+  packet: { data, id, option, router },
   setResponse,
 }: routeResponseProps) {
   if (!option) {
-    alert('Failed to login');
+    router.push({ pathname: '/login', query: { state: 'full' } });
     return;
   }
 
@@ -16,6 +16,8 @@ export function loginHandler({
     packetId: id,
     data: { id: userId, nickname },
   }));
+
+  router.push('/');
 }
 
 /** room 관련 */
diff --git a/hybrid/src/styles/common-style.ts b/hybrid/src/styles/common-style.ts
index 0071edf..2e4ee04 100644
--- a/hybrid/src/styles/common-style.ts
+++ b/hybrid/src/styles/common-style.ts
@@ -19,6 +19,7 @@ export const LayoutContainer = styled.div`
   }
 `;
 
+/** min-height: calc(100% - ${headerHeight + footerHeight + layoutMargin}rem) */
 export const ContentContainer = styled.main`
   width: calc(75rem - 30rem);
   min-height: calc(100% - (8rem + 6rem + 0.6rem));
diff --git a/hybrid/src/styles/global-style.tsx b/hybrid/src/styles/global-style.tsx
index 7e27346..511bf2f 100644
--- a/hybrid/src/styles/global-style.tsx
+++ b/hybrid/src/styles/global-style.tsx
@@ -3,8 +3,10 @@ import { createGlobalStyle } from 'styled-components';
 const GlobalStyle = createGlobalStyle`
   * {
     margin: 0;
-    padding: 0;  
+    padding: 0;
+		border: 0;
     box-sizing: border-box;
+		font-size: 100%;
   }
 
 	body {
diff --git a/hybrid/src/styles/theme.ts b/hybrid/src/styles/theme.ts
index 3a647e9..a68c439 100644
--- a/hybrid/src/styles/theme.ts
+++ b/hybrid/src/styles/theme.ts
@@ -25,6 +25,7 @@ const colors = {
 };
 
 const fontsizes = {
+  giantlarge: '6rem',
   xxlarge: '3rem',
   xlarge: '2rem',
   large: '1.2rem',