From 35b894127f834ac8cd9564275303154401d06cbc Mon Sep 17 00:00:00 2001 From: 96uoow Date: Tue, 27 Jun 2023 17:20:55 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4?= =?UTF-8?q?=EC=85=98=EC=98=A4=EB=A5=98=ED=95=B4=EA=B2=B01=EC=B0=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.tsx | 179 +++++++++++++++--------- src/styles/components/Modal.module.scss | 3 + src/styles/layout/header.module.scss | 118 ++++++++-------- 3 files changed, 175 insertions(+), 125 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 1404248..b3d296f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,4 +1,4 @@ -import { useNavigate, Link } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import { checkIsAdmin } from 'utils/index' import { LoginedUserContext, LoginContext, CartContext } from 'contexts/index' import React, { useState, useRef, useEffect, useContext } from 'react' @@ -63,7 +63,7 @@ export const Header: React.FC = () => { setUserCart([]) localStorage.removeItem(import.meta.env.VITE_STORAGE_KEY_ACCESSTOKEN) setIsLogined(!isLogined) - navigate('/') + alert('로그아웃되었습니다.') } else { // 예외처리 } @@ -84,8 +84,8 @@ export const Header: React.FC = () => { return (
-
-
+
+
-
- -
+
+
+
) diff --git a/src/styles/components/Modal.module.scss b/src/styles/components/Modal.module.scss index eee6224..29789b2 100644 --- a/src/styles/components/Modal.module.scss +++ b/src/styles/components/Modal.module.scss @@ -10,6 +10,7 @@ position: fixed; top: 0; left: 0; + z-index:3; } .modal { @@ -20,6 +21,8 @@ display: flex; flex-direction: column; border-radius: 10px; + position:relative; + z-index:4; .title { background-color: $color-black-0; diff --git a/src/styles/layout/header.module.scss b/src/styles/layout/header.module.scss index 8ed3172..5b7351a 100644 --- a/src/styles/layout/header.module.scss +++ b/src/styles/layout/header.module.scss @@ -2,27 +2,32 @@ @import 'src/styles/common.scss'; .header { - margin-top: 30px; + font-family: 'Montserrat', sans-serif; - .inner { - width: 1240px; - margin: auto; - .headerTop { - display: flex; - justify-content: space-between; + .headerTop { + height: 180px; + display: flex; + justify-content: space-between; + .inner { + width: 1240px; + margin: auto; > a { - margin-left: 540px; + position:absolute; + top:60px; + left:50%; + transform:translate(-50%,0); .logo { width: 162px; height: 90px; } } .loginTop { - height: 130px; + height: 80px; display: flex; flex-direction: column; align-items: flex-end; overflow: hidden; + padding-bottom:20px; .inputBox { display: flex; align-items: center; @@ -82,63 +87,60 @@ } } } - .navigation{ - border-top:2px solid $color-white-ed; - border-bottom:2px solid $color-white-ed; - width:1240px; + } + .navigation{ + border-top:2px solid $color-white-ed; + border-bottom:2px solid $color-white-ed; + width:100%; + height:60px; + position:relative; + z-index:2; + &.fixed{ + position:fixed; + top:0; + } + .navInner{ + max-width:1240px; height:60px; - &.fixed{ - position:fixed; - top:0; - z-index:10; - } - .navInner{ - background-color: white; - line-height:20px; - height:20px; - display:flex; - justify-content: space-evenly; - font-weight:800; - padding:20px 100px; - >li{ - width:130px; - text-align: center; - >a{ - text-decoration: none; - color: $color-black-0; - .dropdown{ - display:none; - width:130px; - margin-top:20px; + margin:auto; + background-color: white; + line-height:20px; + height:20px; + display:flex; + justify-content: space-evenly; + font-weight:800; + padding:20px 100px; + >li{ + width:130px; + text-align: center; + height:40px; + >a{ + text-decoration: none; + color: $color-black-0; + .dropdown{ + display:none; + width:130px; + margin-top:20px; + border:1px solid $color-white-ed; + z-index: 10; + li{ + height:35px; + background-color:$color-primary; border:1px solid $color-white-ed; - z-index: 10; - li{ - height:25px; - padding:5px; - background-color:$color-primary; - border:1px solid $color-white-ed; - text-align: center; - line-height:20px; - a{ - font-size:13px; - text-decoration: none; - color:$color-black-0; - line-height:25px; - } + text-align: center; + line-height:35px; + div{ + font-size:13px; &:hover{ - display:block; + background-color: $color-white-ed; } } } } - &:hover .dropdown{ - display:block; - } } - } - a{ - text-decoration: none; - color: $color-black-0; + &:hover .dropdown{ + display:block; + } } } } From 3fbdd7020e723a9750eb72e18fbc56841236a054 Mon Sep 17 00:00:00 2001 From: 96uoow Date: Tue, 27 Jun 2023 17:34:22 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4?= =?UTF-8?q?=EC=85=98=EC=98=A4=EB=A5=98=ED=95=B4=EA=B2=B02=EC=B0=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/layout/header.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/layout/header.module.scss b/src/styles/layout/header.module.scss index 5b7351a..fed9b53 100644 --- a/src/styles/layout/header.module.scss +++ b/src/styles/layout/header.module.scss @@ -2,7 +2,6 @@ @import 'src/styles/common.scss'; .header { - font-family: 'Montserrat', sans-serif; .headerTop { height: 180px; @@ -13,7 +12,7 @@ margin: auto; > a { position:absolute; - top:60px; + top:50px; left:50%; transform:translate(-50%,0); .logo { @@ -91,6 +90,7 @@ .navigation{ border-top:2px solid $color-white-ed; border-bottom:2px solid $color-white-ed; + background-color: $color-primary; width:100%; height:60px; position:relative; From d3e113e59c8b9fa8ee999a17f4286f83d858d7d5 Mon Sep 17 00:00:00 2001 From: 96uoow Date: Tue, 27 Jun 2023 23:03:47 +0900 Subject: [PATCH 3/3] =?UTF-8?q?console=EC=A7=80=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignInPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/SignInPage.tsx b/src/pages/SignInPage.tsx index 2ea4dd4..67096ab 100644 --- a/src/pages/SignInPage.tsx +++ b/src/pages/SignInPage.tsx @@ -83,7 +83,6 @@ export const SignInPage = () => { setIsModalShow(false) } }) - console.log(error.response.data) } } )