refactor: Header 컴포넌트를 범용적으로 사용할 수 있도록 추가 수정

sprint-team3 · Apr 15, 2024 · 501e70c · 501e70c
1 parent 8847a63
commit 501e70c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 145 deletions.
diff --git a/src/components/header/Header/Header.module.scss b/src/components/header/Header/Header.module.scss
@@ -73,34 +73,5 @@
         @include flexbox($gap: 0.8rem);
       }
     }
-
-    &-alarm-list,
-    &-user-menu {
-      @include responsive(T) {
-        right: 1.5rem;
-      }
-
-      position: absolute;
-      top: 100%;
-      right: 0;
-      margin-top: 0.8rem;
-    }
-  }
-}
-
-.drawer-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translateX(-100%);
-
-  &.open {
-    transform: translateX(0);
-    animation: slide-in-left ease-in-out 0.3s;
-  }
-
-  &.close {
-    transform: translateX(-100%);
-    animation: slide-out-left ease-in-out 0.3s;
   }
 }
diff --git a/src/components/header/Header/index.tsx b/src/components/header/Header/index.tsx
@@ -1,135 +1,39 @@
-import { useEffect, useState } from 'react';
-
 import classNames from 'classnames/bind';
 
 import { PAGE_PATHS, SVGS } from '@/constants/index';
 
-import Alarm from '@/components/header/Alarm';
-import AlarmList from '@/components/header/AlarmList';
-import { HeaderSigninButton, HeaderSignupButton } from '@/components/header/buttons';
-import DrawerMenu from '@/components//header/DrawerMenu';
-import HeaderProfile from '@/components/header/HeaderProfile';
 import Menu from '@/components/header/Menu';
-import UserMenu from '@/components/header/UserMenu';
-import { useDeviceType } from '@/hooks/useDeviceType';
-import useTogglePopup from '@/hooks/useTogglePopup';
-
-import { UsersResponse, MyNotifications } from '@/types/index';
 
 import styles from './Header.module.scss';
 
 const cx = classNames.bind(styles);
 const { url, alt } = SVGS.drawerMenu;
 
 type HeaderProps = {
-  userData: UsersResponse;
-  alarmData: MyNotifications;
-  isLoggedIn: boolean;
+  children: React.ReactNode;
+  logoName: string;
+  menuList: string[];
+  onClick: () => void;
 };
 
-const Header = ({ userData, alarmData, isLoggedIn }: HeaderProps) => {
-  const currentDeviceType = useDeviceType();
-  const isMobileHidden = currentDeviceType !== 'Mobile';
-
-  const [isVisible, setIsVisible] = useState<boolean>();
-  const [isAlarmExisted, setIsAlarmExisted] = useState(false);
-
-  useEffect(() => {
-    if (isMobileHidden) {
-      setIsVisible(undefined);
-    }
-  }, [isMobileHidden]);
-
-  const handleToggleDrawerMenu = () => {
-    setIsVisible((prev) => !prev);
-  };
-
-  const {
-    isOpen: isAlarmActivated,
-    popupRef: alarmListRef,
-    buttonRef: alarmRef,
-    togglePopup: handleAlarmActivation,
-  } = useTogglePopup();
-
-  const {
-    isOpen: isHeaderProfileActivated,
-    popupRef: userMenuRef,
-    buttonRef: headerProfileRef,
-    togglePopup: handleHeaderProfileActivation,
-  } = useTogglePopup();
-
-  const totalCount = alarmData?.totalCount;
-  const notifications = alarmData?.notifications;
-
-  useEffect(() => {
-    setIsAlarmExisted(totalCount > 0);
-  }, [totalCount]);
-
-  const email = userData?.email;
-  const nickname = userData?.nickname;
-  const profileImageUrl = userData?.profileImageUrl || '';
-
+const Header = ({ children, logoName, menuList, onClick }: HeaderProps) => {
   return (
-    <>
-      <div className={cx('container')}>
-        <header className={cx('header')}>
-          <button className={cx('header-menu-button', 'sm-only')} onClick={handleToggleDrawerMenu}>
-            <img src={url} alt={alt} width={24} height={24}></img>
-          </button>
-          <a className={cx('header-logo')} href={PAGE_PATHS.landing}>
-            GGF
-          </a>
-          <div className={cx('header-container-outer')}>
-            <div className={cx('sm-hidden')}>
-              <Menu />
-            </div>
-            <div className={cx('header-container-inner')}>
-              {isLoggedIn && alarmData && userData ? (
-                <>
-                  <Alarm
-                    isActivated={isAlarmActivated}
-                    isAlarmExisted={isAlarmExisted}
-                    onClick={handleAlarmActivation}
-                    alarmRef={alarmRef}
-                  />
-                  <HeaderProfile
-                    nickname={nickname}
-                    profileImageUrl={profileImageUrl}
-                    isActivated={isHeaderProfileActivated}
-                    onClick={handleHeaderProfileActivation}
-                    headerProfileRef={headerProfileRef}
-                  />
-                </>
-              ) : (
-                <>
-                  <HeaderSigninButton />
-                  <HeaderSignupButton />
-                </>
-              )}
-            </div>
-          </div>
-        </header>
-        {isAlarmActivated && (
-          <div className={cx('header-alarm-list')}>
-            <AlarmList notifications={notifications} totalCount={totalCount} alarmListRef={alarmListRef} />
-          </div>
-        )}
-        {isHeaderProfileActivated && (
-          <div className={cx('header-user-menu')}>
-            <UserMenu
-              profileImageUrl={profileImageUrl || ''}
-              nickname={nickname}
-              email={email || ''}
-              userMenuRef={userMenuRef}
-              onClick={handleHeaderProfileActivation}
-            />
+    <div className={cx('container')}>
+      <header className={cx('header')}>
+        <button className={cx('header-menu-button', 'sm-only')} onClick={onClick}>
+          <img src={url} alt={alt} width={24} height={24}></img>
+        </button>
+        <a className={cx('header-logo')} href={PAGE_PATHS.landing}>
+          {logoName}
+        </a>
+        <div className={cx('header-container-outer')}>
+          <div className={cx('sm-hidden')}>
+            <Menu menuList={menuList} />
           </div>
-        )}
-      </div>
-      <div className={cx('drawer-menu', { open: isVisible }, { close: isVisible === false })}>
-        <DrawerMenu onClick={handleToggleDrawerMenu} />
-      </div>
-    </>
+          <div className={cx('header-container-inner')}>{children}</div>
+        </div>
+      </header>
+    </div>
   );
 };