🛠 fix(#137): 드롭다운 클릭효과 범위 수정

[un0211]

연관된 이슈

• close #137

작업 내용

• 드롭다운 클릭효과 범위 수정

스크린샷

https://github.com/Part3-Team15/taskify/assets/24778465/63d6913f-d075-4ae3-9e63-cd88e4b402db

[un0211]

그것도 바로 수정해서 머지할게요~~

[un0211]

제가 외부 클릭시에도 드롭다운 닫히게 하려고 시도해봤는데, 잘 안 되네요..ㅠ 9d6567e 커밋 보시고 혹시 이유를 알 것 같은 분 있으면 도움요청 드립니다!!

대양님이 auth redirection 하셨던 것에서 아이디어를 얻어 관리해줄 함수를 만들어봤습니다! isOpen의 값만 복사되어서 변화가 안되는 건 아닐까 하고 getIsOpen = () => isOpen도 해보고, 객체로도 바꿔봤는데 잘 안되네요 ㅠ (포인터 넘겨주고 싶은 심정..) UserMenuDropdown 내에서는 잘 동작하는데 밖에서 setIsOpen(false)로 해도 닫히지 않습니다.. (useRef는 시도하지 않았는데, onClick 자체가 안먹히는 건 아니고(콘솔 로그 찍으면 찍힘), setIsOpen이 잘 안되는 것 같아서입니다!)

다른 괜찮은 방법 있으시면 9d6567e 날려버리고 force push 하셔도 됩니다!! Context나 redux 쓰는 게 나으려나요...

[wjsdncl]

멘토님이 말씀해주신 것 처럼 ref 사용해서 수정하니까 잘 작동합니다 🫡👍

import Link from 'next/link';

import UserProfile from './UserProfile';

import useUserDropdown from '@/hooks/useUserDropdown';

export default function UserMenuDropdown() {
  const { status, handleDropdownClick, handleMenuClick, handleLogoutClick, dropdownRef } = useUserDropdown();

  return (
    <div className='flex items-center' ref={dropdownRef}>
      <button type='button' onClick={handleDropdownClick}>
        <UserProfile />
      </button>
      {status.isOpen && (
        <ul className='dd-container absolute right-2 top-14 w-28 bg-white text-sm md:top-16 md:w-[150px] md:text-base'>
          <li className='dd-menu md:h-10' onClick={handleMenuClick}>
            <Link href='/mydashboard' className='align-center size-full'>
              내 대시보드
            </Link>
          </li>
          <li className='dd-menu md:h-10' onClick={handleMenuClick}>
            <Link href='/mypage' className='align-center size-full'>
              계정관리
            </Link>
          </li>
          <li className='dd-menu md:h-10'>
            <button type='button' className='align-center size-full' onClick={handleLogoutClick}>
              로그아웃
            </button>
          </li>
        </ul>
      )}
    </div>
  );
}

import { useRouter } from 'next/router';
import { MouseEventHandler, useState, useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';

import { clearUser } from '@/store/reducers/userSlice';

const useUserDropdown = () => {
  const router = useRouter();
  const dispatch = useDispatch();
  const [status, setStatus] = useState({ isOpen: false });
  const dropdownRef = useRef<HTMLDivElement | null>(null);

  const handleOutsideClick = (event: MouseEvent) => {
    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
      setStatus({ isOpen: false });
    }
  };

  useEffect(() => {
    if (status.isOpen) {
      document.addEventListener('mousedown', handleOutsideClick);
    } else {
      document.removeEventListener('mousedown', handleOutsideClick);
    }

    return () => {
      document.removeEventListener('mousedown', handleOutsideClick);
    };
  }, [status.isOpen]);

  const handleDropdownClick: MouseEventHandler<HTMLButtonElement> = (e) => {
    e.stopPropagation();
    setStatus((prev) => ({ isOpen: !prev.isOpen }));
  };

  const handleMenuClick: MouseEventHandler<HTMLLIElement> = (e) => {
    e.stopPropagation();
    setStatus({ isOpen: false });
  };

  const handleLogoutClick: MouseEventHandler<HTMLButtonElement> = (e) => {
    e.stopPropagation();
    dispatch(clearUser());
    setStatus({ isOpen: false });
    router.push('/');
  };

  return {
    status,
    handleDropdownClick,
    handleMenuClick,
    handleLogoutClick,
    dropdownRef,
  };
};

export default useUserDropdown;

[wjsdncl]

ref 없이 그냥 useEffect로 전역에 이벤트 넣어주면 해결이 되네요

import { useRouter } from 'next/router';
import { MouseEventHandler, useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';

import { clearUser } from '@/store/reducers/userSlice';

const useUserDropdown = () => {
  const router = useRouter();
  const dispatch = useDispatch();
  const [status, setStatus] = useState({ isOpen: false });

  const handleOutsideClick = () => {
    console.log(status.isOpen);
    setStatus({ isOpen: false });
  };

  useEffect(() => {
    if (status.isOpen) {
      document.addEventListener('mousedown', handleOutsideClick);
    } else {
      document.removeEventListener('mousedown', handleOutsideClick);
    }

    return () => {
      document.removeEventListener('mousedown', handleOutsideClick);
    };
  }, [status.isOpen]);

  const handleDropdownClick: MouseEventHandler<HTMLButtonElement> = (e) => {
    e.stopPropagation();
    setStatus((prev) => ({ isOpen: !prev.isOpen }));
  };

  const handleMenuClick: MouseEventHandler<HTMLLIElement> = (e) => {
    e.stopPropagation();
    setStatus({ isOpen: false });
  };

  const handleLogoutClick: MouseEventHandler<HTMLButtonElement> = (e) => {
    e.stopPropagation();
    dispatch(clearUser());
    setStatus({ isOpen: false });
    router.push('/');
  };

  return { status, handleOutsideClick, handleDropdownClick, handleMenuClick, handleLogoutClick };
};

export default useUserDropdown;

[un0211]

오...!! 이런 걸 이제야 봤네요!! 확인해보고 반영하겠습니다!

[un0211]

addEventListener 하니까 드롭다운이 동작을 안하네요ㅠ 모두 드롭다운을 끄기만 해요ㅠ 첫번째처럼 useRef 써야 하려나 봐요

[un0211]

민재님 알려주신 코드로 dropdown 전역에서 닫히도록 설정했습니다!! 제가 실수로 .env를 올려버려서 없는 버전으로 force push 해버렸어요...ㅋㅋㅋ

[un0211]

작은 크기에서 absolute 때문에 위치 이상하게 된 거 고친다는 게 다른 얘기하다가 깜빡했네요......! 이미 닫아버렸으니 디자인 수정사항에 추가할게요