refactor: 용어 통일 mobile-header

BCSDLab · Apr 15, 2024 · a157150 · a157150
1 parent dacd078
commit a157150
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 28 deletions.
diff --git a/src/component/common/Header/MobilePanel/MobilePanel.module.scss b/src/component/common/Header/MobilePanel/MobilePanel.module.scss
@@ -1,4 +1,4 @@
-.mobileheader {
+.mobile-header {
   display: flex;
   width: 100%;
   height: 100%;
@@ -159,7 +159,7 @@
       margin-right: 0;
     }
 
-    .mobileheader__my-info + & {
+    .mobile-header__my-info + & {
       margin-left: 9px;
       text-align: left;
     }
@@ -191,7 +191,7 @@
     color: #252525;
     list-style: none;
 
-    .mobileheader__panel--logged-in & {
+    .mobile-header__panel--logged-in & {
       justify-content: space-around;
     }
   }

diff --git a/src/component/common/Header/MobilePanel/index.tsx b/src/component/common/Header/MobilePanel/index.tsx
@@ -39,9 +39,9 @@ export default function MobilePanel() {
   return (
     <>
       <div
-        className={styles.mobileheader}
+        className={styles['mobile-header']}
       >
-        <span className={styles.mobileheader__title}>
+        <span className={styles['mobile-header__title']}>
           {pathname === '/owner' || pathname === '/coop' ? (
             <MobileLogoIcon title="코인 로고" />
           ) : (CATEGORY
@@ -53,8 +53,8 @@ export default function MobilePanel() {
         <button
           title="메뉴 버튼"
           className={cn({
-            [styles['mobileheader__icon--right']]: true,
-            [styles.mobileheader__icon]: true,
+            [styles['mobile-header__icon--right']]: true,
+            [styles['mobile-header__icon']]: true,
           })}
           type="button"
           onClick={expandSidebar}
@@ -66,31 +66,31 @@ export default function MobilePanel() {
       {createPortal(
         (
           <nav className={cn({
-            [styles.mobileheader__panel]: true,
-            [styles['mobileheader__panel--logged-in']]: true,
-            [styles['mobileheader__panel--show']]: isMobileSidebarExpanded,
+            [styles['mobile-header__panel']]: true,
+            [styles['mobile-header__panel--logged-in']]: true,
+            [styles['mobile-header__panel--show']]: isMobileSidebarExpanded,
           })}
           >
-            <div className={styles.mobileheader__user}>
+            <div className={styles['mobile-header__user']}>
               <button
                 title="뒤로 가기 버튼"
-                className={styles.mobileheader__backspace}
+                className={styles['mobile-header__backspace']}
                 type="button"
                 onClick={hideSidebar}
               >
                 <BackArrowIcon title="뒤로 가기 버튼" />
               </button>
-              <div className={styles.mobileheader__greet}>
+              <div className={styles['mobile-header__greet']}>
                 {user?.name}
                 <span>님, 안녕하세요!</span>
               </div>
-              <ul className={styles['mobileheader__auth-menu']}>
-                <li className={styles['mobileheader__my-info']}>
+              <ul className={styles['mobile-header__auth-menu']}>
+                <li className={styles['mobile-header__my-info']}>
                   <Link to="/owner/modify-info">
                     내 정보
                   </Link>
                 </li>
-                <li className={styles.mobileheader__link}>
+                <li className={styles['mobile-header__link']}>
                   <button type="button" onClick={handleLogout}>
                     로그아웃
                   </button>
@@ -101,13 +101,13 @@ export default function MobilePanel() {
             {CATEGORY.map((categoryInfo) => (
               <div key={categoryInfo.title}>
                 <div>
-                  <div className={styles['mobileheader__category-title']}>
+                  <div className={styles['mobile-header__category-title']}>
                     {categoryInfo.title}
                   </div>
-                  <ul className={styles['mobileheader__sub-menus']}>
+                  <ul className={styles['mobile-header__sub-menus']}>
                     {categoryInfo.submenu.map((subMenu) => (
                       <li
-                        className={styles['mobileheader__sub-menu']}
+                        className={styles['mobile-header__sub-menu']}
                         key={subMenu.title}
                       >
                         <Link to={subMenu.link}>
@@ -122,17 +122,17 @@ export default function MobilePanel() {
 
             <img
               className={cn({
-                [styles.mobileheader__logo]: true,
-                [styles['mobileheader__logo--bcsd']]: true,
+                [styles['mobile-header__logo']]: true,
+                [styles['mobile-header__logo--bcsd']]: true,
               })}
               src="http://static.koreatech.in/assets/img/ic-bcsd_gray.png"
               alt="bcsd lab logo"
               title="bcsd lab logo"
             />
             <img
               className={cn({
-                [styles.mobileheader__logo]: true,
-                [styles['mobileheader__logo--koin']]: true,
+                [styles['mobile-header__logo']]: true,
+                [styles['mobile-header__logo--koin']]: true,
               })}
               src="http://static.koreatech.in/assets/img/rectangle_icon.png"
               alt="KOIN service logo"

diff --git 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
@@ -73,19 +73,19 @@ export default function MyShopPage() {
     <div>
       {isMobile ? (
         <>
-          <div className={styles.mobileheader}>
-            <Link to="shop-registration" className={styles['mobileheader__btn-add']}>가게 추가</Link>
+          <div className={styles['mobile-header']}>
+            <Link to="shop-registration" className={styles['mobile-header__btn-add']}>가게 추가</Link>
             {myShop.shops.length >= 2
               && (
                 <>
-                  <button type="button" className={styles['mobileheader__btn-add']} onClick={() => setListOpen(true)}>상점 선택</button>
+                  <button type="button" className={styles['mobile-header__btn-add']} onClick={() => setListOpen(true)}>상점 선택</button>
                   {listOpen && <MyShopList setListOpen={setListOpen} />}
                 </>
               )}
             <Link to="/owner/add-menu">
               <button
                 type="button"
-                className={styles['mobileheader__btn-add']}
+                className={styles['mobile-header__btn-add']}
               >
                 메뉴추가
               </button>