fix: 드롭다운 메뉴 디자인 수정,

BCSDLab · Jul 13, 2023 · 0979644 · 0979644
1 parent 407826a
commit 0979644
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss b/src/pages/Home/components/Map/components/MarkerHtml/MarkerHtml.module.scss
@@ -1,13 +1,13 @@
 @use "src/utils/styles/mediaQuery" as media;
 
-.container{
+.container {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
 }
 
-.marker {  
+.marker {
   width: 69px;
   height: 69px;
 
@@ -40,7 +40,6 @@
   align-items: center;
   box-sizing: content-box;
 
-
   &__photo img {
     width: 43px;
     height: 43px;
@@ -78,7 +77,7 @@
     font-size: 18px;
     font-weight: 500;
     text-align: center;
-    
+
     @include media.media-breakpoint-down(mobile) {
       font-size: 12px;
       font-weight: 700;

diff --git a/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss b/src/pages/Home/components/Map/components/MobileOptions/MobileOptions.module.scss
@@ -1,5 +1,8 @@
-.top-options {
+.nav {
   position: absolute;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 50px;
   top: 20px;
   left: 50%;
   transform: translate(-50%);
@@ -10,7 +13,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 70%;
     height: 48px;
     background: #ffffff;
     box-shadow: 2px 3px 12px 1px rgb(0 0 0 / 10%);
@@ -20,7 +22,6 @@
     color: #666666;
     padding-left: 18px;
     padding-right: 15px;
-    margin-bottom: 10px;
   }
 
   &__filter {

diff --git a/src/pages/Home/components/Map/components/MobileOptions/index.tsx b/src/pages/Home/components/Map/components/MobileOptions/index.tsx
@@ -17,30 +17,30 @@ export default function MobileOptions(): JSX.Element {
   };
   return (
     <div className={styles.options}>
-      <div className={styles['top-options']}>
+      <div className={styles.nav}>
         <div>
-          <Link to="/search" className={styles['top-options__search']}>
+          <Link to="/search" className={styles.nav__search}>
             검색어를 입력해주세요.
             <LensIcon />
           </Link>
         </div>
         <button
           type="button"
           className={cn({
-            [styles['top-options__filter']]: true,
-            [styles['top-options__filter--clicked']]: selected !== '' && !filter,
+            [styles.nav__filter]: true,
+            [styles['nav__filter--clicked']]: selected !== '' && !filter,
           })}
           onClick={toggle}
         >
           <VerticalDot />
         </button>
         {filter && (
-        <div className={styles['top-options__list']}>
+        <div className={styles.nav__list}>
           <button
             type="button"
             className={cn({
-              [styles['top-options__text']]: true,
-              [styles['top-options__text--clicked']]: selected === 'friend',
+              [styles.nav__text]: true,
+              [styles['nav__text--clicked']]: selected === 'friend',
             })}
             onClick={() => handleClick('friend')}
           >
@@ -50,8 +50,8 @@ export default function MobileOptions(): JSX.Element {
           <button
             type="button"
             className={cn({
-              [styles['top-options__text']]: true,
-              [styles['top-options__text--clicked']]: selected === 'bookmark',
+              [styles.nav__text]: true,
+              [styles['nav__text--clicked']]: selected === 'bookmark',
             })}
             onClick={() => handleClick('bookmark')}
           >