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

* fix: 월간조회 데스크탑뷰 QA 이슈 해결

* feat: 날짜 이동 버튼 추가

* feat: 엑셀 다운로드 버튼에 툴팁 추가

* fix: lint 에러 수정

* fix: lint 에러 수정

* fix: 모바일 드롭다운 컴포넌트 이름 변경

* refactor: QA 반영

* refactor: 엑셀 다운로드 기능 부분 수정

* fix: lint 에러 수정

* refactor: Setting1 네이밍 변경 및 위치 이동

* fix: 스타일 수정

* fix: 코드 중복 제거

* fix: z-index 값 수정 및 css 주석 제거

* fix: 커스텀 훅 사용

* refactor: 조건부 렌더링을 props 전달 방식으로 변경

* fix: lint 에러 수정

---------

Co-authored-by: d0dam <[email protected]>

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,50 @@
+.container {
+  position: absolute;
+  display: flex;
+  top: 80px;
+  right: 0;
+  width: 100%;
+  background-color: #f5f5f5;
+  box-shadow: 0 5px 7px rgb(0 0 0 / 10%);
+  z-index: 10;
+  flex-direction: column;
+}
+
+.setting-item__link {
+  text-decoration: none;
+  color: #333;
+  padding: 10px;
+  text-align: left;
+  width: calc(100% - 20px);
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+}
+
+.setting-item__button {
+  padding: 10px;
+  text-align: left;
+  width: 100%;
+  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/Header.module.scss

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

src/pages/Coop/components/Setting/Setting.module.scss → src/layout/Header/HeaderNavigation/HeaderNavigation.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   gap: 40px;
-  padding-right: 24px;
+  margin-right: 24px;
 }
 
 .setting-item__link,

src/pages/Coop/components/Setting/index.tsx → src/layout/Header/HeaderNavigation/index.tsx

@@ -2,9 +2,9 @@ import { Link } from 'react-router-dom';
 
 import { useLogout } from 'query/auth';
 
-import styles from './Setting.module.scss';
+import styles from './HeaderNavigation.module.scss';
 
-function Setting1() {
+function HeaderNavigation() {
   const { logout } = useLogout();
 
   const handleLogout = () => {
@@ -23,4 +23,4 @@ function Setting1() {
   );
 }
 
-export default Setting1;
+export default HeaderNavigation;

src/layout/Header/MobileDropdown.tsx

@@ -0,0 +1,34 @@
+import { Link } from 'react-router-dom';
+
+import { useLogout } from 'query/auth';
+
+import styles from './Dropdown.module.scss';
+
+interface MobileDropdownProps {
+  view: boolean;
+}
+
+function MobileDropdown({ view }: MobileDropdownProps) {
+  const { logout } = useLogout();
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  return (
+    <div>
+      {view && (
+      <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>
+      )}
+    </div>
+  );
+}
+
+export default MobileDropdown;

src/layout/Header/index.tsx

@@ -1,16 +1,45 @@
+import { Link } from 'react-router-dom';
+
+import Menu from 'assets/svg/auth/menu.svg?react';
 import Logo from 'assets/svg/common/koin-logo.svg?react';
-import Setting1 from 'pages/Coop/components/Setting';
+import useBooleanState from 'hooks/useBooleanState';
+import useMediaQuery from 'hooks/useMediaQuery';
 
 import styles from './Header.module.scss';
+import HeaderNavigation from './HeaderNavigation';
+import MobileDropdown from './MobileDropdown';
 
 function Header() {
+  const { isMobile } = useMediaQuery();
+  const [isOpen,,,, toggleIsOpen] = useBooleanState(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} /> */}
+                <button
+                  type="button"
+                  onClick={toggleIsOpen}
+                  className={styles['menu-icon']}
+                  style={{ position: 'relative' }}
+                  aria-label="메뉴 버튼"
+                >
+                  <Menu className={styles.menu} />
+                </button>
+                <MobileDropdown view={isOpen} />
+              </div>
+            </ul>
+            <Link to="/setting" />
+          </div>
+        ) : (
+          <HeaderNavigation />
+        )}
       </nav>
     </header>
   );