issue #144 design: move notification button to Header

[2Junsu]

설명

• [FRONT-TASK] 알림탭 위치 변경 #144
• FEED IN SELODY 내에 있던 알림 탭을 헤더로 이동

테스트

Demo

2023-10-26.3.14.32.mov

[sikkzz]

const handleDropdown = (e) => {
  const { target } = e;

  if (isProfileDropdownOpen && !profileRef.current.contains(target)) {
    setIsProfileDropdownOpen(false);
  }
};

const handleNotification = (e) => {
  const { target } = e;

  if (isNotiDropdownOpen && !notiRef.current.contains(target)) {
    setIsNotiDropdownOpen(false);
  }
};

useEffect(() => {
  window.addEventListener("click", handleDropdown);

  return () => {
    window.removeEventListener("click", handleDropdown);
  };
});

useEffect(() => {
  window.addEventListener("click", handleNotification);

  return () => {
    window.removeEventListener("click", handleNotification);
  };
});

<NotificationDiv>
  <NotificationButton
    ref={notiRef}
    onClick={() => {
      setIsNotiDropdownOpen(!isNotiDropdownOpen);
    }}
  >
    <NotificationIcon />
  </NotificationButton>
  {isNotiDropdownOpen && <NotificationDropdown />}
</NotificationDiv>

<ProfileDiv>
  <ProfileImg
    ref={profileRef}
    src="https://yt3.ggpht.com/ytc/AOPolaSlb8-cH_rN_lZDD1phXr7aHFpoOqMVoepaGuTm=s48-c-k-c0x00ffffff-no-rj"
    alt="user-profile"
    onClick={() => {
      setIsProfileDropdownOpen(!isProfileDropdownOpen);
    }}
  />
  {isProfileDropdownOpen && <ProfileDropdown />}
</ProfileDiv>

여기도 이렇게 작성하면 fowardRef랑 불필요 ref 제거하고 사용할 수 있을 거 같아요