[Fix] 로고 이미지 및 위치 수정

blind-42 · Mar 23, 2022 · 3086379 · 3086379
1 parent cf60f08
commit 3086379
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 17 deletions.
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
@@ -1,16 +1,19 @@
 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';
 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
@@ -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,30 +126,29 @@ 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;
 		}
 		div {
 			margin-left: 1.3rem;
 			margin-bottom: 0.5rem;
 			font-size: 0.7rem;
-			font-weight: 500;
 			width: 1rem;
 			height: 1rem;
 		}