From 3086379d0c1f9422d7f0c805bc2360bedab64725 Mon Sep 17 00:00:00 2001
From: tamagoyakii <rlawlgus4063@naver.com>
Date: Wed, 23 Mar 2022 18:45:18 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20=EB=A1=9C=EA=B3=A0=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=8F=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Header/Header.tsx | 27 ++++++++++----
 client/src/components/Header/styled.ts  | 47 +++++++++++++++++++------
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
index e6f38a1..b29a1c9 100644
--- a/client/src/components/Header/Header.tsx
+++ b/client/src/components/Header/Header.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useQuery } from 'react-query';
 import { useNavigate } from 'react-router-dom';
+import { useMediaQuery } from 'react-responsive';
 import Menubar from 'components/Menubar/Menubar';
 import Notificationbar from 'components/Notificationbar/Notificationbar';
 import instance from 'utils/functions/axios';
@@ -8,9 +9,11 @@ import Clock from './Clock';
 import { NotificationData } from 'utils/functions/type';
 import {
   HeaderContainer,
-  MenubarLogoWrap,
+  MenubarNotificationWrap,
+  LogoClockWrap,
   MenubarButton,
   UtilButton,
+  Logo,
   HeaderBackdrop,
 } from './styled';
 
@@ -37,6 +40,10 @@ export default function Header() {
     },
   );
 
+  const isMobile = useMediaQuery({
+    query: '(max-width:767px)',
+  });
+
   const showMenubarHandler = () => {
     setShowMenu(!showMenu);
   };
@@ -48,16 +55,13 @@ export default function Header() {
   return (
     <>
       <HeaderContainer>
-        <MenubarLogoWrap>
+        <MenubarNotificationWrap>
           <MenubarButton onClick={showMenubarHandler}>MENU</MenubarButton>
           {showMenu && (
             <HeaderBackdrop onClick={showMenubarHandler}>
               <Menubar menubarHandler={showMenubarHandler} />
             </HeaderBackdrop>
           )}
-          <UtilButton onClick={() => navigate('/')}>
-            <img src="images/BLogo.png" alt="LOGO" />
-          </UtilButton>
           {total ? (
             <UtilButton onClick={showNotificationHandler}>
               <img src="images/notice_on.png" alt="notice" />
@@ -76,8 +80,17 @@ export default function Header() {
               />
             </HeaderBackdrop>
           )}
-        </MenubarLogoWrap>
-        <Clock />
+        </MenubarNotificationWrap>
+        <LogoClockWrap>
+          <Logo onClick={() => navigate('/')}>
+            {isMobile ? (
+              <img src="images/BLogo.png" alt="LOGO" />
+            ) : (
+              <img src="images/42byteLogo.png" alt="LOGO" />
+            )}
+          </Logo>
+          <Clock />
+        </LogoClockWrap>
       </HeaderContainer>
     </>
   );
diff --git a/client/src/components/Header/styled.ts b/client/src/components/Header/styled.ts
index 53e7c93..9313bb3 100644
--- a/client/src/components/Header/styled.ts
+++ b/client/src/components/Header/styled.ts
@@ -20,11 +20,16 @@ export const HeaderContainer = styled.div`
 	`}
 `;
 
-export const MenubarLogoWrap = styled.div`
+export const MenubarNotificationWrap = styled.div`
   display: flex;
   justify-content: flex-start;
 `;
 
+export const LogoClockWrap = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
 export const MenubarButton = styled.div`
   cursor: pointer;
   display: flex;
@@ -62,19 +67,42 @@ export const HeaderBackdrop = styled.div`
   height: 100vh;
 `;
 
+export const Logo = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 12px;
+  img {
+    height: 2.4rem;
+  }
+  ${({ theme }) => theme.media.tablet`
+		margin: 0 6px;
+		img {
+			height: 1.8rem;
+		}
+	`}
+  ${({ theme }) => theme.media.desktop`
+		margin: 0 6px;
+		img {
+			height: 1.8rem;
+		}
+	`}
+`;
+
 export const UtilButton = styled.div`
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-left: 3px;
+  margin: 0 3px;
   padding: 3px;
   border-top: solid 2px #fff;
   border-left: solid 2px #fff;
   border-right: solid 2px #000;
   border-bottom: solid 2px #000;
-  /* padding: 0 0.6rem; */
-  width: 3.7rem;
+  padding: 0 0.6rem;
+  // width: 3.7rem;
   img {
     height: 2rem;
   }
@@ -98,22 +126,22 @@ export const UtilButton = styled.div`
     background: #d5d5d5;
   }
   ${({ theme }) => theme.media.tablet`
-	width: 2.7rem;
+		padding: 0 0.5rem;
+		// width: 2.7rem;
 		img {
-			height: 1.3rem;
+			height: 1.4rem;
 		}
 		div {
 			margin-left: 1.3rem;
 			margin-bottom: 0.5rem;
 			font-size: 0.7rem;
-			font-weight: 500;
 			width: 0.9rem;
 			height: 0.9rem;
 		}
 	`}
   ${({ theme }) => theme.media.desktop`
-		// padding: 0 0.6rem;
-		width: 2.7rem;
+		padding: 0 0.5rem;
+		// width: 2.7rem;
 		img {
 			height: 1.4rem;
 		}
@@ -121,7 +149,6 @@ export const UtilButton = styled.div`
 			margin-left: 1.3rem;
 			margin-bottom: 0.5rem;
 			font-size: 0.7rem;
-			font-weight: 500;
 			width: 1rem;
 			height: 1rem;
 		}