[월간조회] 데스크탑뷰 QA이슈 해결

package.json

@@ -37,6 +37,7 @@
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^10.0.4",
+    "react-tooltip": "^5.28.0",
     "sass": "^1.60.0",
     "typescript": "^4.4.2",
     "vite": "^5.2.12",

src/index.scss

@@ -36,3 +36,7 @@ button {
 ul {
   list-style: none;
 }
+
+input::-webkit-inner-spin-button {
+  appearance: none;
+}

src/layout/Header/Dropdown.module.scss

@@ -0,0 +1,51 @@
+.container {
+  position: absolute;
+  top: 100px;
+  right: 0;
+  width: 100%;
+  background-color: #f5f5f5;
+  box-shadow: 0 5px 7px rgb(0 0 0 / 10%);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+}
+
+.setting-item__link,
+.setting-item__button {
+  padding: 10px;
+  text-align: left;
+  width: 100%;
+}
+
+.setting-item__link {
+  text-decoration: none;
+  color: #333;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+}
+
+.setting-item__button {
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+}
+
+.setting-item__word {
+  font-size: 16px;
+  height: 30px;
+  color: #1f1f1f;
+  padding-left: 20px;
+}
+
+.setting-item__warning {
+  font-size: 16px;
+  height: 30px;
+  color: #ec2d30;
+  padding-left: 20px;
+}

src/layout/Header/Dropdown.tsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+
+import { useLogout } from 'query/auth';
+
+import styles from './Dropdown.module.scss';
+
+function Dropdown() {
+  const { logout } = useLogout();
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  return (
+    <div className={styles.container}>
+      <Link className={styles['setting-item__link']} to="https://forms.gle/wqD6PkjZoaaHJ1bo8" target="_blank" rel="noopener noreferrer">
+        <div className={styles['setting-item__word']}>BCSD Lab에 문의하기</div>
+      </Link>
+      <button type="button" className={styles['setting-item__button']} onClick={handleLogout}>
+        <div className={styles['setting-item__warning']}>로그아웃</div>
+      </button>
+    </div>
+  );
+}
+
+export default Dropdown;

src/layout/Header/Header.module.scss

@@ -19,8 +19,23 @@
   }
 }
 
+.logo__icon {
+  margin-left: 24px;
+}
+
 .header__content {
   display: flex;
   gap: 8px;
   align-items: center;
 }
+
+.menu-container {
+  display: flex;
+  gap: 8px;
+  margin-right: 24px;
+}
+
+.search,
+.menu {
+  cursor: pointer;
+}

src/layout/Header/index.tsx

@@ -1,16 +1,49 @@
+import { useState } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import Menu from 'assets/svg/auth/menu.svg?react';
+import SearchIcon from 'assets/svg/auth/search-icon.svg?react';
 import Logo from 'assets/svg/common/koin-logo.svg?react';
+import useMediaQuery from 'hooks/useMediaQuery';
 import Setting1 from 'pages/Coop/components/Setting';
 
+import Dropdown from './Dropdown';
 import styles from './Header.module.scss';
 
 function Header() {
+  const { isMobile } = useMediaQuery();
+  const [view, setView] = useState(false);
+
   return (
-    <header
-      className={styles.header}
-    >
-      <Logo />
+    <header className={styles.header}>
+      <Logo className={styles.logo__icon} />
       <nav className={styles.header__content}>
-        <Setting1 />
+        {isMobile ? (
+          <div>
+            <ul>
+              <div className={styles['menu-container']}>
+                <SearchIcon className={styles.search} />
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions,
+                jsx-a11y/click-events-have-key-events */}
+                <div
+                  onClick={() => setView(!view)}
+                  className={styles['menu-icon']}
+                  style={{ position: 'relative' }}
+                >
+                  <Menu className={styles.menu} />
+                </div>
+                {view && <Dropdown />}
+              </div>
+            </ul>
+
+            <Link to="/setting" />
+          </div>
+        ) : (
+          <div>
+            <Setting1 />
+          </div>
+        )}
       </nav>
     </header>
   );

src/pages/Coop/Coop.module.scss

@@ -2,13 +2,15 @@
 
 .container {
   display: flex;
+  justify-content: center;
   max-width: 989px;
   width: 100%;
   margin: 0 auto;
+  gap: 10px;
 
   @include media.media-breakpoint-down(mobile) {
     flex-direction: column;
-    max-width: 480px; // 모바일 뷰에서는 너비 제한
+    max-width: 100%;
     width: 100%;
   }
 }
@@ -20,17 +22,35 @@
 
 .content {
   display: flex;
-  flex-grow: 2; // 2배 공간
   flex-direction: column;
   padding: 16px 24px;
   gap: 12px;
+  width: 100%;
+
+  @include media.media-breakpoint-down(mobile) {
+    box-sizing: border-box;
+  }
 }
 
 .calendarWrapper {
-  flex-grow: 1; // 1:2 비율에서 1배의 공간
-  max-width: 989px;
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+
+  @include media.media-breakpoint-down(mobile) {
+    flex-direction: column;
+    max-width: 480px;
+    width: 100%;
+  }
 }
 
 .diningTypeWrapper {
-  flex-grow: 2; // 1:2 비율에서 2배 공간
+  @include media.media-breakpoint-down(mobile) {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 100%;
+    width: 100%;
+  }
 }