diff --git a/src/component/common/Header/Header.module.scss b/src/component/common/Header/Header.module.scss
index 51b22946..613c187a 100644
--- a/src/component/common/Header/Header.module.scss
+++ b/src/component/common/Header/Header.module.scss
@@ -11,20 +11,14 @@
display: block;
@include media.media-breakpoint-down(mobile) {
- height: 56px;
- border-radius: 0;
- box-shadow: none;
+ height: 77px;
+ border-radius: 0 0 20px 20px;
+ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 34%);
position: sticky;
top: 0;
left: 0;
z-index: 20;
border-bottom: none;
-
- &--main {
- height: 77px;
- border-radius: 0 0 20px 20px;
- box-shadow: 0 2px 4px 0 rgb(0 0 0 / 34%);
- }
}
&__content {
@@ -38,432 +32,6 @@
width: auto;
}
}
-
- &__logo {
- padding: 18px 35px 18px 0;
-
- & > svg {
- width: 80px;
- height: 44px;
-
- @include media.media-breakpoint-down(mobile) {
- width: 58px;
- height: 32px;
- }
- }
- }
-
- &__mega-menu {
- height: 100%;
- margin-right: auto;
- }
-
- &__auth-menu {
- display: flex;
- align-items: center;
- list-style: none;
- }
-
- &__auth-link {
- font-weight: normal;
- float: right;
- text-align: right;
- line-height: 1.35;
- font-family: "Noto Sans CJK KR", sans-serif;
- font-size: 15px;
- color: #a0d2f6;
- padding: 0 20px;
- margin: 30px 0;
- cursor: pointer;
-
- &:hover {
- font-weight: 800;
- color: #fff;
- }
-
- & > a {
- color: inherit;
- text-decoration: none;
- }
-
- & > button {
- color: inherit;
- text-decoration: none;
- font-family: "Noto Sans CJK KR", sans-serif;
- font-size: 15px;
- background-color: #175c8e;
- border: none;
- cursor: pointer;
-
- &:hover {
- font-weight: 800;
- color: #fff;
- }
- }
- }
-}
-
-.mobileheader {
- display: block;
- width: 100%;
- height: 100%;
- padding: 16px;
- box-sizing: border-box;
- text-align: center;
-
- .header--main & {
- padding: 20px;
- }
-
- &__icon {
- position: absolute;
- top: 16px;
- padding: 0;
- border: 0;
- width: 24px;
- height: 24px;
- background-color: transparent;
- cursor: pointer;
-
- & > svg {
- width: 18px;
- height: 12px;
- }
-
- .header--main & {
- top: 26px;
- }
-
- &--left {
- left: 16px;
- }
-
- &--right {
- right: 16px;
-
- .header--main & {
- right: 26px;
- }
- }
- }
-
- &__title {
- font-size: 16px;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-
- .header--main & {
- justify-content: flex-start;
- }
-
- & > svg {
- width: 58px;
- height: 32px;
- }
- }
-
- &__panel {
- position: fixed;
- top: 0;
- left: 0;
- box-sizing: border-box;
- width: 100vw;
- height: 100vh;
- min-width: 360px;
- padding-bottom: 40px;
- background-color: #fff;
- z-index: 20;
- overflow: scroll;
- transform: translateX(100%);
- transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
-
- &--show {
- transform: translateX(0);
- }
- }
-
- &__user {
- width: 100%;
- height: 111px;
- box-sizing: border-box;
- color: #175c8e;
- font-size: 14px;
- padding: 0 16px;
- background: #fff;
- position: sticky;
- top: 0;
- left: 0;
- }
-
- &__backspace {
- display: block;
- margin: 18px 0 8px -2px;
- padding: 0;
- border: 0;
- width: 28px;
- height: 28px;
- background-color: transparent;
- cursor: pointer;
-
- & > img {
- width: 100%;
- height: 100%;
- }
- }
-
- &__greet {
- font-size: 16px;
- font-family: "Noto Sans CJK KR", sans-serif;
- display: block;
- max-width: 240px;
- text-align: left;
- margin-bottom: 16px;
- font-weight: bold;
-
- & > span {
- font-size: 13px;
- font-weight: normal;
- }
- }
-
- &__my-info {
- margin-right: auto;
- width: 80px;
- font-family: "Noto Sans CJK KR", sans-serif;
- font-size: 15px;
- font-weight: normal;
- color: black;
- line-height: 24px;
-
- ::before {
- display: inline-block;
- width: 24px;
- height: 24px;
- margin-right: 4px;
- content: "";
- background: url("http://static.koreatech.in/assets/img/ic-bottom_myinfo.png")
- center/24px 24px;
- }
-
- & > a {
- display: flex;
- color: inherit;
- text-decoration: inherit;
- }
- }
-
- &__link {
- margin-right: 15px;
- font-family: "Noto Sans CJK KR", sans-serif;
- font-size: 15px;
- color: #252525;
- cursor: pointer;
-
- & + & {
- margin-left: 15px;
- margin-right: 0;
- }
-
- .mobileheader__my-info + & {
- margin-left: 9px;
- text-align: left;
- }
-
- & > a {
- background-color: transparent;
- color: inherit;
- }
-
- & > button {
- padding: 0;
- border: 0;
- background-color: transparent;
- color: inherit;
- font-size: inherit;
- font-family: inherit;
- text-decoration: inherit;
- cursor: pointer;
- }
- }
-
- &__auth-menu {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- font-family: "Noto Sans CJK KR", sans-serif;
- font-size: 15px;
- font-weight: normal;
- color: #252525;
- list-style: none;
-
- .mobileheader__panel--logged-in & {
- justify-content: space-around;
- }
- }
-
- &__category-title {
- width: 100%;
- box-sizing: border-box;
- padding: 5px 16px;
- margin-top: 8px;
- margin-bottom: 8px;
- font-family: "Noto Sans CJK KR", sans-serif;
- font-size: 15px;
- font-weight: normal;
- color: #858585;
- background-color: #f7f7f7;
- text-align: left;
- }
-
- &__sub-menus {
- display: flex;
- flex-wrap: wrap;
- width: 100%;
- list-style: none;
- }
-
- &__sub-menu {
- display: block;
- padding: 8px 20px;
- width: 50%;
- font-family: "Noto Sans CJK KR", sans-serif;
- font-size: 15px;
- background: #fff;
- box-sizing: border-box;
- border-collapse: collapse;
- text-decoration: none;
- text-align: left;
- color: #252525;
- font-weight: 500;
- cursor: pointer;
-
- & > a {
- color: inherit;
- text-decoration: inherit;
-
- &:hover {
- color: #f7941e;
- font-weight: 700;
- outline: none;
- }
- }
- }
-
- &__logo {
- position: absolute;
-
- &--koin {
- right: 16px;
- top: 16px;
- width: 40px;
- height: 40px;
- }
-
- &--bcsd {
- right: 16px;
- bottom: 20px;
- width: 33px;
- height: 33px;
- }
- }
-}
-
-.megamenu {
- &__panel {
- display: block;
- top: 80px;
- overflow: hidden;
- position: absolute;
- left: 0;
- margin: 0 auto;
- width: 100%;
- height: 0;
- min-width: 1132px;
- z-index: 4;
- background: #15507a;
- transition: height 0.5s;
- }
-
- &:hover,
- &:focus-within {
- & .megamenu__panel {
- height: 75px;
- box-sizing: border-box;
- }
- }
-
- &__trigger-list {
- list-style: none;
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex: 1;
- height: 100%;
- }
-
- &__trigger {
- display: block;
- border: none;
- float: left;
- padding: 0 20px;
- height: 80px;
- font-weight: 700;
- font-family: "Noto Sans CJK KR", sans-serif;
- font-size: 17px;
- text-align: left;
- line-height: 1;
- color: #fff;
- cursor: pointer;
- background-color: #175c8e;
-
- & > span {
- padding: 31px 0 30px;
- }
-
- &:hover,
- &:focus {
- & > span {
- padding-bottom: 28px;
- border-bottom: 2px solid #fff;
- }
- }
- }
-
- &__content {
- display: flex;
- overflow: hidden;
- width: calc(1132px - 135px);
- height: 100%;
- z-index: 5;
- padding-left: 135px;
- margin: 0 auto;
- transition: height 0.2s, -webkit-transform 0.5s;
- transition: height 0.2s, transform 0.5s;
- list-style: none;
- }
-
- &__menu {
- padding: 26px 0;
- margin-right: 38px;
- }
-
- &__link {
- line-height: 2;
- display: block;
- font-family: "Noto Sans CJK KR", sans-serif;
- font-size: 13px;
- padding-bottom: 10px;
- color: rgb(255 255 255);
- text-decoration: none;
- text-align: left;
- font-weight: 400;
-
- &:hover {
- font-weight: 800;
- }
- }
}
.add-menu-header {
@@ -475,7 +43,7 @@
align-items: center;
justify-content: center;
- &__goBackButton {
+ &__prev-button {
position: absolute;
left: 16px;
width: 24px;
diff --git a/src/component/common/Header/MobilePanel/MobilePanel.module.scss b/src/component/common/Header/MobilePanel/MobilePanel.module.scss
new file mode 100644
index 00000000..2ae8a90e
--- /dev/null
+++ b/src/component/common/Header/MobilePanel/MobilePanel.module.scss
@@ -0,0 +1,264 @@
+.mobile-header {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ text-align: center;
+ align-items: center;
+ justify-content: space-between;
+
+ .header--main & {
+ padding: 20px;
+ }
+
+ &__icon {
+ padding: 0;
+ border: 0;
+ width: 24px;
+ height: 24px;
+ background-color: transparent;
+ cursor: pointer;
+
+ & > svg {
+ width: 18px;
+ height: 12px;
+ }
+
+ .header--main & {
+ top: 26px;
+ }
+
+ &--left {
+ left: 16px;
+ }
+
+ &--right {
+ right: 16px;
+
+ .header--main & {
+ right: 26px;
+ }
+ }
+ }
+
+ &__title {
+ font-size: 16px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+
+ .header--main & {
+ justify-content: flex-start;
+ }
+
+ & > svg {
+ width: 58px;
+ height: 32px;
+ }
+ }
+
+ &__panel {
+ position: fixed;
+ top: 0;
+ left: 0;
+ box-sizing: border-box;
+ width: 100vw;
+ height: 100vh;
+ min-width: 360px;
+ padding-bottom: 40px;
+ background-color: #fff;
+ z-index: 20;
+ overflow: scroll;
+ transform: translateX(100%);
+ transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
+
+ &--show {
+ transform: translateX(0);
+ }
+ }
+
+ &__user {
+ width: 100%;
+ height: 111px;
+ box-sizing: border-box;
+ color: #175c8e;
+ font-size: 14px;
+ padding: 0 16px;
+ background: #fff;
+ position: sticky;
+ top: 0;
+ left: 0;
+ }
+
+ &__backspace {
+ display: block;
+ margin: 18px 0 8px -2px;
+ padding: 0;
+ border: 0;
+ width: 28px;
+ height: 28px;
+ background-color: transparent;
+ cursor: pointer;
+
+ & > img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &__greet {
+ font-size: 16px;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ display: block;
+ max-width: 240px;
+ text-align: left;
+ margin-bottom: 16px;
+ font-weight: bold;
+
+ & > span {
+ font-size: 13px;
+ font-weight: normal;
+ }
+ }
+
+ &__my-info {
+ margin-right: auto;
+ width: 80px;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+ color: black;
+ line-height: 24px;
+
+ ::before {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 4px;
+ content: "";
+ background: url("http://static.koreatech.in/assets/img/ic-bottom_myinfo.png") center/24px 24px;
+ }
+
+ & > a {
+ display: flex;
+ color: inherit;
+ text-decoration: inherit;
+ }
+ }
+
+ &__link {
+ margin-right: 15px;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ font-size: 15px;
+ color: #252525;
+ cursor: pointer;
+
+ & + & {
+ margin-left: 15px;
+ margin-right: 0;
+ }
+
+ .mobile-header__my-info + & {
+ margin-left: 9px;
+ text-align: left;
+ }
+
+ & > a {
+ background-color: transparent;
+ color: inherit;
+ }
+
+ & > button {
+ padding: 0;
+ border: 0;
+ background-color: transparent;
+ color: inherit;
+ font-size: inherit;
+ font-family: inherit;
+ text-decoration: inherit;
+ cursor: pointer;
+ }
+ }
+
+ &__auth-menu {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+ color: #252525;
+ list-style: none;
+
+ .mobile-header__panel--logged-in & {
+ justify-content: space-around;
+ }
+ }
+
+ &__category-title {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 5px 16px;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ font-size: 15px;
+ font-weight: normal;
+ color: #858585;
+ background-color: #f7f7f7;
+ text-align: left;
+ }
+
+ &__sub-menus {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ list-style: none;
+ }
+
+ &__sub-menu {
+ display: block;
+ padding: 8px 20px;
+ width: 50%;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ font-size: 15px;
+ background: #fff;
+ box-sizing: border-box;
+ border-collapse: collapse;
+ text-decoration: none;
+ text-align: left;
+ color: #252525;
+ font-weight: 500;
+ cursor: pointer;
+
+ & > a {
+ color: inherit;
+ text-decoration: inherit;
+
+ &:hover {
+ color: #f7941e;
+ font-weight: 700;
+ outline: none;
+ }
+ }
+ }
+
+ &__logo {
+ position: absolute;
+
+ &--koin {
+ right: 16px;
+ top: 16px;
+ width: 40px;
+ height: 40px;
+ }
+
+ &--bcsd {
+ right: 16px;
+ bottom: 20px;
+ width: 33px;
+ height: 33px;
+ }
+ }
+}
diff --git a/src/component/common/Header/MobilePanel/index.tsx b/src/component/common/Header/MobilePanel/index.tsx
new file mode 100644
index 00000000..fee90b71
--- /dev/null
+++ b/src/component/common/Header/MobilePanel/index.tsx
@@ -0,0 +1,147 @@
+import { ReactComponent as MobileLogoIcon } from 'assets/svg/common/mobile-koin-logo.svg';
+import { ReactComponent as MenuIcon } from 'assets/svg/common/hamburger-menu.svg';
+import { ReactComponent as BackArrowIcon } from 'assets/svg/common/back-arrow.svg';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import CATEGORY from 'utils/constant/category';
+import cn from 'utils/ts/className';
+import useMediaQuery from 'utils/hooks/useMediaQuery';
+import { createPortal } from 'react-dom';
+import useUserStore from 'store/user';
+import { useLogout } from 'query/auth';
+import usePrevPathStore from 'store/path';
+import useMobileSidebar from 'component/common/Header/hooks/useMobileSidebar';
+import styles from './MobilePanel.module.scss';
+
+export default function MobilePanel() {
+ const navigate = useNavigate();
+ const { pathname } = useLocation();
+ const { isMobile } = useMediaQuery();
+
+ const { user } = useUserStore();
+ const { setPrevPath } = usePrevPathStore((state) => state);
+ const { logout } = useLogout();
+
+ const {
+ isExpanded: isMobileSidebarExpanded,
+ expandSidebar,
+ hideSidebar,
+ } = useMobileSidebar(pathname, isMobile);
+
+ const handleLogout = () => {
+ logout(undefined, {
+ onSettled: () => {
+ setPrevPath('/login');
+ navigate('/login');
+ },
+ });
+ };
+
+ return (
+ <>
+
+
+ {pathname === '/owner' || pathname === '/coop' ? (
+
+ ) : (CATEGORY
+ .flatMap((categoryValue) => categoryValue.submenu)
+ .find((subMenuValue) => subMenuValue.link === pathname)
+ ?.title ?? ''
+ )}
+
+
+
+ {createPortal(
+ (
+
+ ),
+ document.body,
+ )}
+
+ );
+}
diff --git a/src/component/common/Header/PCPanel/PCPanel.module.scss b/src/component/common/Header/PCPanel/PCPanel.module.scss
new file mode 100644
index 00000000..875677e3
--- /dev/null
+++ b/src/component/common/Header/PCPanel/PCPanel.module.scss
@@ -0,0 +1,150 @@
+.header {
+ &__logo {
+ padding: 18px 35px 18px 0;
+ }
+
+ &__mega-menu {
+ height: 100%;
+ margin-right: auto;
+ }
+
+ &__auth-menu {
+ display: flex;
+ align-items: center;
+ list-style: none;
+ }
+
+ &__auth-link {
+ font-weight: normal;
+ float: right;
+ text-align: right;
+ line-height: 1.35;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ font-size: 15px;
+ color: #a0d2f6;
+ padding: 0 20px;
+ margin: 30px 0;
+ cursor: pointer;
+
+ &:hover {
+ font-weight: 800;
+ color: #fff;
+ }
+
+ & > a {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ & > button {
+ color: inherit;
+ text-decoration: none;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ font-size: 15px;
+ background-color: #175c8e;
+ border: none;
+ cursor: pointer;
+
+ &:hover {
+ font-weight: 800;
+ color: #fff;
+ }
+ }
+ }
+}
+
+.mega-menu {
+ &__panel {
+ display: block;
+ top: 80px;
+ overflow: hidden;
+ position: absolute;
+ left: 0;
+ margin: 0 auto;
+ width: 100%;
+ height: 0;
+ min-width: 1132px;
+ z-index: 4;
+ background: #15507a;
+ transition: height 0.5s;
+ }
+
+ &:hover,
+ &:focus-within {
+ & .mega-menu__panel {
+ height: 75px;
+ box-sizing: border-box;
+ }
+ }
+
+ &__trigger-list {
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex: 1;
+ height: 100%;
+ }
+
+ &__trigger {
+ display: block;
+ border: none;
+ float: left;
+ padding: 0 20px;
+ height: 80px;
+ font-weight: 700;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ font-size: 17px;
+ text-align: left;
+ line-height: 1;
+ color: #fff;
+ cursor: pointer;
+ background-color: #175c8e;
+
+ & > span {
+ padding: 31px 0 30px;
+ }
+
+ &:hover,
+ &:focus {
+ & > span {
+ padding-bottom: 28px;
+ border-bottom: 2px solid #fff;
+ }
+ }
+ }
+
+ &__content {
+ display: flex;
+ overflow: hidden;
+ width: calc(1132px - 135px);
+ height: 100%;
+ z-index: 5;
+ padding-left: 135px;
+ margin: 0 auto;
+ transition: height 0.2s, -webkit-transform 0.5s;
+ transition: height 0.2s, transform 0.5s;
+ list-style: none;
+ }
+
+ &__menu {
+ padding: 26px 0;
+ margin-right: 38px;
+ }
+
+ &__link {
+ line-height: 2;
+ display: block;
+ font-family: "Noto Sans CJK KR", sans-serif;
+ font-size: 13px;
+ padding-bottom: 10px;
+ color: rgb(255 255 255);
+ text-decoration: none;
+ text-align: left;
+ font-weight: 400;
+
+ &:hover {
+ font-weight: 800;
+ }
+ }
+}
diff --git a/src/component/common/Header/PCPanel/index.tsx b/src/component/common/Header/PCPanel/index.tsx
new file mode 100644
index 00000000..4cee330e
--- /dev/null
+++ b/src/component/common/Header/PCPanel/index.tsx
@@ -0,0 +1,113 @@
+import { ReactComponent as LogoIcon } from 'assets/svg/common/koin-logo.svg';
+import { Link, useNavigate } from 'react-router-dom';
+import CATEGORY from 'utils/constant/category';
+import cn from 'utils/ts/className';
+import { useLogout } from 'query/auth';
+import usePrevPathStore from 'store/path';
+import useMegaMenu from 'component/common/Header/hooks/useMegaMenu';
+import styles from './PCPanel.module.scss';
+
+const ID: { [key: string]: string; } = {
+ PANEL: 'mega-menu-panel',
+ LABEL1: 'mega-menu-label-1',
+ LABEL2: 'mega-menu-label-2',
+};
+
+export default function PCPanel() {
+ const navigate = useNavigate();
+
+ const { setPrevPath } = usePrevPathStore((state) => state);
+ const { logout } = useLogout();
+
+ const {
+ panelMenuList,
+ isExpanded: isMegaMenuExpanded,
+ createOnChangeMenu,
+ onFocusPanel,
+ hideMegaMenu,
+ } = useMegaMenu(CATEGORY);
+
+ const handleLogout = () => {
+ logout(undefined, {
+ onSettled: () => {
+ setPrevPath('/login');
+ navigate('/login');
+ },
+ });
+ };
+
+ return (
+ <>
+
+
+
+
+
+ {CATEGORY.map((category) => (
+ -
+
+
+ ))}
+
+
ID[`LABEL${index + 1}`]).join(' ')}
+ >
+
+ {panelMenuList?.map((menu) => (
+ -
+
+ {menu.title === '가게정보' && menu.title}
+
+
+ ))}
+
+
+
+ {/* Auth 완료시 수정 필요 */}
+ -
+
+ 정보수정
+
+
+ -
+
+
+
+
+ );
+}
diff --git a/src/component/common/Header/index.tsx b/src/component/common/Header/index.tsx
index 61af039e..d103edaf 100644
--- a/src/component/common/Header/index.tsx
+++ b/src/component/common/Header/index.tsx
@@ -1,59 +1,23 @@
-import { ReactComponent as LogoIcon } from 'assets/svg/common/koin-logo.svg';
-import { ReactComponent as MobileLogoIcon } from 'assets/svg/common/mobile-koin-logo.svg';
-import { ReactComponent as MenuIcon } from 'assets/svg/common/hamburger-menu.svg';
import { ReactComponent as BackArrowIcon } from 'assets/svg/common/back-arrow.svg';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-import CATEGORY from 'utils/constant/category';
-import cn from 'utils/ts/className';
+import { useLocation } from 'react-router-dom';
import useMediaQuery from 'utils/hooks/useMediaQuery';
-import { createPortal } from 'react-dom';
-import useUserStore from 'store/user';
-import { useLogout } from 'query/auth';
-import usePrevPathStore from 'store/path';
import styles from './Header.module.scss';
-import useMobileSidebar from './hooks/useMobileSidebar';
-import useMegaMenu from './hooks/useMegaMenu';
-
-const ID: { [key: string]: string; } = {
- PANEL: 'megamenu-panel',
- LABEL1: 'megamenu-label-1',
- LABEL2: 'megamenu-label-2',
-};
+import MobilePanel from './MobilePanel';
+import PCPanel from './PCPanel';
function Header() {
const { pathname } = useLocation();
- const {
- panelMenuList,
- isExpanded: isMegaMenuExpanded,
- createOnChangeMenu,
- onFocusPanel,
- hideMegaMenu,
- } = useMegaMenu(CATEGORY);
const { isMobile } = useMediaQuery();
- const {
- isExpanded: isMobileSidebarExpanded,
- expandSidebar,
- hideSidebar,
- } = useMobileSidebar(pathname, isMobile);
- const isMain = true;
- const { user } = useUserStore();
- const { logout } = useLogout();
- const navigate = useNavigate();
- const { setPrevPath } = usePrevPathStore((state) => state);
- const handleLogout = () => {
- logout(undefined, {
- onSettled: () => {
- setPrevPath('/login');
- navigate('/login');
- },
- });
- };
- if ((pathname === '/owner/add-menu' || pathname.startsWith('/owner/modify-menu/') || pathname.startsWith('/owner/event-add/')) && isMobile) {
+ if ((pathname === '/owner/add-menu'
+ || pathname.startsWith('/owner/modify-menu/')
+ || pathname.startsWith('/owner/event-add/'))
+ && isMobile) {
return (
);
@@ -70,199 +34,13 @@ function Header() {
return (
diff --git a/src/page/MyShopPage/MyShopPage.module.scss b/src/page/MyShopPage/MyShopPage.module.scss
index ddb57d2e..2547707b 100644
--- a/src/page/MyShopPage/MyShopPage.module.scss
+++ b/src/page/MyShopPage/MyShopPage.module.scss
@@ -5,7 +5,7 @@
margin: 0 auto;
}
-.mobileheader {
+.mobile-header {
display: flex;
padding: 10px;
align-items: center;
diff --git a/src/page/MyShopPage/index.tsx b/src/page/MyShopPage/index.tsx
index f70a2bda..e10e78ff 100644
--- a/src/page/MyShopPage/index.tsx
+++ b/src/page/MyShopPage/index.tsx
@@ -73,19 +73,19 @@ export default function MyShopPage() {
{isMobile ? (
<>
-
-
가게 추가
+
+ 가게 추가
{myShop.shops.length >= 2
&& (
<>
-
+
{listOpen && }
)}