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

BCSDLab · Oct 15, 2024 · 78f9e6a · 78f9e6a
1 parent 7cc0159
commit 78f9e6a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/layout/Header/MobileDropdown.tsx b/src/layout/Header/MobileDropdown.tsx
@@ -4,21 +4,29 @@ import { useLogout } from 'query/auth';
 
 import styles from './Dropdown.module.scss';
 
-function MobileDropdown() {
+interface MobileDropdownProps {
+  view: boolean;
+}
+
+function MobileDropdown({ view }: MobileDropdownProps) {
   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>
+      {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>
   );
 }

diff --git a/src/layout/Header/index.tsx b/src/layout/Header/index.tsx
@@ -34,10 +34,9 @@ function Header() {
                 >
                   <Menu className={styles.menu} />
                 </button>
-                {view && <MobileDropdown />}
+                <MobileDropdown view={view} />
               </div>
             </ul>
-
             <Link to="/setting" />
           </div>
         ) : (