[feat] 사이드바 선택된 페이지 항목 강조 표시

[dbjoung]

#️⃣ 연관된 이슈

#255

📝 작업 내용

사이드바에서 선택된 페이지 항목에 강조 표시

🖼️ 스크린샷 (선택)

💬 리뷰 요구사항 (선택)

리뷰어가 특히 봐주었으면 하는 부분이 있다면 작성해주세요

[github-actions]

🤖 AI Code Review

View results

🧠 요약

• 사이드바에서 선택된 페이지 항목을 강조 표시하는 기능이 추가되었습니다. 그러나 코드에서 몇 가지 개선할 점이 있습니다.
• NavLink를 사용하여 활성화된 링크를 강조하는 로직이 추가되었으나, className의 조건부 로직이 중복되어 가독성이 떨어질 수 있습니다.
• useEffect 내의 주석이 불필요하게 남아있어 코드의 가독성을 저해하고 있습니다.

⚠️ 세부 코드 리뷰

• [src/shared/components/SidebarDrawer.tsx:29]

  • 문제 설명: useEffect 내의 주석이 불필요하게 남아있음.
  • 원인: 주석이 코드의 의도를 명확히 설명하지 않으며, 코드가 간결하지 않음.
  • 개선 방안: 주석을 제거하거나, 필요한 경우 더 명확한 설명으로 수정합니다.

  useEffect(() => {
    getMe(client)
      .then((data) => {
        // 사용자 데이터 처리 로직
      })
      .catch((err) => {
        console.error('SidebarDrawer getMe 실패:', err);
        setUser({
          nickname: '',
          email: '',
        });
      });
  }, [client]);

• [src/shared/components/SidebarDrawer.tsx:95]

  • 문제 설명: NavLink의 className 속성이 중복되어 사용되고 있음.
  • 원인: 각 링크에 대해 동일한 스타일을 반복적으로 작성하고 있어 유지보수성이 떨어짐.
  • 개선 방안: 공통 스타일을 변수로 분리하여 재사용합니다.

  const navLinkClass = 'flex items-center gap-3 rounded-lg px-3 py-2';
  
  <NavLink
    to="/dashboard"
    className={({ isActive }) => cn(navLinkClass, isActive ? 'bg-jd-gray-light' : 'hover:bg-jd-white')}
    onClick={onClose}
  >

• [src/shared/components/SidebarDrawer.tsx:222]

  • 문제 설명: 로그아웃 처리 로직에서 주석이 불필요하게 남아있음.
  • 원인: 주석이 코드의 의도를 명확히 설명하지 않으며, 코드가 간결하지 않음.
  • 개선 방안: 주석을 제거하거나, 필요한 경우 더 명확한 설명으로 수정합니다.

  onConfirm={async () => {
    setConfirmOpen(false);
    try {
      await logout(client);
    } catch (error) {
      console.error('로그아웃 API 호출 실패:', error);
    } finally {
      localStorage.removeItem('reauthAt');
      clearToken();
      onClose();
      navigate('/login', { replace: true });
    }
  }}

🧪 테스트 제안

• 사이드바에서 각 메뉴 항목을 클릭했을 때, 해당 항목이 강조 표시되는지 확인하는 테스트를 작성합니다.
• 로그아웃 버튼 클릭 시, 로그아웃 API가 호출되고, 사용자가 로그인 페이지로 리다이렉트되는지 검증하는 테스트를 추가합니다.

🔧 자동 수정 가능 예시

const navLinkClass = 'flex items-center gap-3 rounded-lg px-3 py-2';

<NavLink
  to="/dashboard"
  className={({ isActive }) => cn(navLinkClass, isActive ? 'bg-jd-gray-light' : 'hover:bg-jd-white')}
  onClick={onClose}
>

위의 개선 사항을 적용하면 코드의 가독성과 유지보수성이 향상될 것입니다.

[github-actions]

🧪 Vercel Preview: https://jobda-15jgf41gx-aeujoungs-projects.vercel.app

[github-actions]

🤖 AI Code Review

View results

🧠 요약

• 이 PR은 사이드바에서 선택된 페이지 항목에 강조 표시를 추가하는 기능을 구현하고 있습니다. 주요 리스크는 다음과 같습니다:
  1. NavLink 사용으로 인해 활성화된 링크의 스타일이 올바르게 적용되지 않을 경우 사용자 경험에 부정적인 영향을 미칠 수 있습니다.
  2. API 호출 및 상태 관리 로직이 적절히 처리되지 않으면 사용자에게 잘못된 정보를 제공할 수 있습니다.

⚠️ 세부 코드 리뷰

• [src/shared/components/SidebarDrawer.tsx:1]

  • 문제: Link 대신 NavLink를 사용하여 활성화된 링크의 스타일을 적용하고 있습니다.
  • 원인: NavLink는 isActive prop을 통해 현재 경로와 비교하여 활성화된 상태를 관리합니다. 이를 통해 CSS 클래스를 동적으로 적용할 수 있습니다.
  • 개선 방안: NavLink의 className prop을 사용하여 활성화된 링크에 대한 스타일을 적용합니다.
  • 코드 예시:

    <NavLink
      to="/dashboard"
      className={({ isActive }) => 
        cn(
          'flex items-center gap-3 rounded-lg px-3 py-2',
          isActive ? 'bg-jd-gray-light' : 'hover:bg-jd-white'
        )
      }
      onClick={onClose}
    >

• [src/shared/components/SidebarDrawer.tsx:29]

  • 문제: getMe API 호출이 드로어가 열릴 때마다 실행됩니다.
  • 원인: useEffect의 의존성 배열에 client만 포함되어 있어, client가 변경될 때마다 호출됩니다. 드로어가 열릴 때만 호출하도록 조건을 추가해야 합니다.
  • 개선 방안: open 상태를 의존성 배열에 추가하고, open이 true일 때만 API를 호출하도록 조건을 추가합니다.
  • 코드 예시:

    useEffect(() => {
      if (open) {
        getMe(client)
          .then((data) => {
            // ...handle data
          })
          .catch((err) => {
            console.error('SidebarDrawer getMe 실패:', err);
          });
      }
    }, [client, open]);

• [src/shared/components/SidebarDrawer.tsx:222]

  • 문제: 로그아웃 처리 후 상태 정리 로직이 명확하지 않습니다.
  • 원인: 로그아웃 후 상태 정리 과정이 주석으로만 설명되어 있어, 코드의 의도를 이해하기 어렵습니다.
  • 개선 방안: 로그아웃 처리 후 상태 정리 로직을 함수로 분리하여 가독성을 높이고, 주석을 통해 각 단계의 의도를 명확히 설명합니다.
  • 코드 예시:

    const handleLogout = async () => {
      setConfirmOpen(false);
      try {
        await logout(client);
      } catch (error) {
        console.error('로그아웃 API 호출 실패:', error);
      } finally {
        localStorage.removeItem('reauthAt');
        clearToken();
        onClose();
        navigate('/login', { replace: true });
      }
    };

🧪 테스트 제안

• NavLink의 활성화 상태가 올바르게 적용되는지 확인하기 위해, 사이드바의 각 링크를 클릭했을 때 해당 링크가 활성화되는지 테스트합니다.
• API 호출이 드로어가 열릴 때만 발생하는지 확인하기 위해, 드로어의 open 상태를 변경했을 때 getMe가 호출되는지 모니터링합니다.

🔧 자동 수정 가능 예시

• NavLink의 className을 동적으로 설정하는 부분을 자동으로 수정할 수 있는 스니펫:

<NavLink
  to="/dashboard"
  className={({ isActive }) => 
    cn(
      'flex items-center gap-3 rounded-lg px-3 py-2',
      isActive ? 'bg-jd-gray-light' : 'hover:bg-jd-white'
    )
  }
  onClick={onClose}
>

• useEffect의 조건을 추가하는 부분:

useEffect(() => {
  if (open) {
    getMe(client)
      .then((data) => {
        // ...handle data
      })
      .catch((err) => {
        console.error('SidebarDrawer getMe 실패:', err);
      });
  }
}, [client, open]);

[github-actions]

🧪 Vercel Preview: https://jobda-63op88htq-aeujoungs-projects.vercel.app