[FE] feat: NavigationTab 컴포넌트 구현

frontend/src/components/common/NavigationTab/NavItem/index.tsx

@@ -0,0 +1,17 @@
+import * as S from './styles';
+
+interface NavItemProps {
+  label: string;
+  $isSelected: boolean;
+  onClick: () => void;
+}
+
+const NavItem = ({ label, $isSelected, onClick }: NavItemProps) => {
+  return (
+    <S.NavItem $isSelected={$isSelected}>
+      <button onClick={onClick}>{label}</button>
+    </S.NavItem>
+  );
+};
+
+export default NavItem;

frontend/src/components/common/NavigationTab/NavItem/styles.ts

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+interface NavItemProps {
+  $isSelected: boolean;
+}
+
+export const NavItem = styled.li<NavItemProps>`
+  border-bottom: 0.3rem solid ${({ theme, $isSelected }) => ($isSelected ? theme.colors.primary : 'none')};
+  padding: 0 1rem 1.3rem 1rem;
+
+  button {
+    font-weight: ${({ theme }) => theme.fontWeight.semibold};
+    color: ${({ theme, $isSelected }) => ($isSelected ? theme.colors.black : theme.colors.disabled)};
+
+    &:hover {
+      color: ${({ theme }) => theme.colors.black};
+    }
+  }
+
+  ${media.xSmall} {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+
+    margin: 0 2rem;
+  }
+
+  ${media.xxSmall} {
+    margin: 0 1.6rem;
+  }
+`;

frontend/src/components/common/NavigationTab/index.tsx

@@ -1,69 +1,25 @@
-import { useEffect, useRef, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
+import useNavigationTabs from '@/hooks/useNavigationTabs';
 
+import NavItem from './NavItem';
 import * as S from './styles';
 
-interface TabInfoItem {
-  name: string;
-  path: string;
-  param: string;
-}
-
-interface NavigationTabProps {
-  tabInfoList: TabInfoItem[];
-}
-
-const NavigationTab = ({ tabInfoList }: NavigationTabProps) => {
-  const activeTab = sessionStorage.getItem('activeTab');
-
-  const [currentIndex, setCurrentIndex] = useState(Number(activeTab) || 0);
-  const [currentTabWidth, setCurrentTabWidth] = useState(0);
-  const [currentTabLeft, setCurrentTabLeft] = useState(0);
-  const [isTransitionEnabled, setIsTransitionEnabled] = useState(false);
-
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const currentItemRef = useRef<HTMLUListElement>(null);
-
-  // URL의 쿼리 파라미터 값을 읽어, 탭 인덱스 업데이트
-  useEffect(() => {
-    const queryParams = new URLSearchParams(location.search);
-    const tabParam = queryParams.get('tab');
-    const tabIndex = tabInfoList.findIndex((item) => item.param === tabParam);
-
-    if (tabIndex >= 0) {
-      setCurrentIndex(tabIndex);
-      sessionStorage.setItem('activeTab', String(tabIndex));
-    }
-  }, [location.search]);
-
-  // 탭이 변경될 때마다 현재 탭의 크기와 위치 업데이트
-  useEffect(() => {
-    if (currentItemRef.current) {
-      const currentTab = currentItemRef.current.children[currentIndex];
-      const { width, left } = currentTab.getBoundingClientRect();
-      setCurrentTabWidth(width);
-      setCurrentTabLeft(left);
-    }
-  }, [currentIndex]);
-
-  const handleTabClick = (path: string, index: number) => {
-    setCurrentIndex(index);
-    setIsTransitionEnabled(true);
-    navigate(`${path}?tab=${tabInfoList[index].param}`);
-  };
+const NavigationTab = () => {
+  const { currentTabIndex, tabList } = useNavigationTabs();
 
   return (
     <S.NavContainer>
-      <S.NavList ref={currentItemRef}>
-        {tabInfoList.map((item, index) => (
-          <S.NavItem key={index} selected={currentIndex === index}>
-            <button onClick={() => handleTabClick(item.path, index)}>{item.name}</button>
-          </S.NavItem>
-        ))}
+      <S.NavList>
+        {tabList.map((tab, index) => {
+          return (
+            <NavItem
+              key={tab.label}
+              label={tab.label}
+              $isSelected={currentTabIndex === index}
+              onClick={tab.handleTabClick}
+            />
+          );
+        })}
       </S.NavList>
-      <S.CurrentNavBar width={currentTabWidth} left={currentTabLeft} isTransitionEnabled={isTransitionEnabled} />
     </S.NavContainer>
   );
 };

frontend/src/components/common/NavigationTab/styles.ts

@@ -21,39 +21,3 @@ export const NavList = styled.ul`
     padding: 0;
   }
 `;
-
-export const NavItem = styled.li<{ selected: boolean }>`
-  margin-bottom: 1rem;
-  padding: 0.7rem 1rem;
-  border-radius: 0.5rem;
-
-  button {
-    font-weight: ${({ theme }) => theme.fontWeight.semibold};
-    color: ${({ theme, selected }) => (selected ? theme.colors.black : theme.colors.disabled)};
-
-    &:hover {
-      color: ${({ theme }) => theme.colors.black};
-    }
-  }
-
-  ${media.xSmall} {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    padding: 0.7rem 0;
-  }
-`;
-
-export const CurrentNavBar = styled.div<{ width: number; left: number; isTransitionEnabled: boolean }>`
-  position: absolute;
-  bottom: 0;
-  left: ${({ left }) => `${left}px`};
-
-  width: ${({ width }) => `${width}px`};
-  height: 0.3rem;
-
-  background-color: ${({ theme }) => theme.colors.primary};
-  border-radius: 0.1rem;
-
-  transition: ${({ isTransitionEnabled }) => (isTransitionEnabled ? 'all 0.2s ease-in-out' : 'none')};
-`;

frontend/src/hooks/useNavigationTabs.ts

@@ -0,0 +1,33 @@
+import { useLocation, useNavigate } from 'react-router';
+
+const useNavigationTabs = () => {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const navigateReviewLinkManagementPage = () => {
+    navigate('/user/review-link-management');
+  };
+
+  const navigateWrittenReviewConfirmPage = () => {
+    navigate('/user/written-review-confirm');
+  };
+
+  const tabList = [
+    {
+      label: '리뷰 링크 관리',
+      path: '/user/review-link-management',
+      handleTabClick: navigateReviewLinkManagementPage,
+    },
+    {
+      label: '작성한 리뷰 확인',
+      path: '/user/written-review-confirm',
+      handleTabClick: navigateWrittenReviewConfirmPage,
+    },
+  ];
+
+  const currentTabIndex = tabList.findIndex((tab) => tab.path === pathname);
+
+  return { currentTabIndex, tabList };
+};
+
+export default useNavigationTabs;