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

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

@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+
+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}`);
+  };
+
+  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>
+      <S.CurrentNavBar width={currentTabWidth} left={currentTabLeft} isTransitionEnabled={isTransitionEnabled} />
+    </S.NavContainer>
+  );
+};
+
+export default NavigationTab;

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

@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+
+import media from '@/utils/media';
+
+export const NavContainer = styled.nav`
+  position: relative;
+  display: flex;
+  width: 100vw;
+  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.lightGray};
+`;
+
+export const NavList = styled.ul`
+  display: flex;
+  gap: 3rem;
+  padding: 0 2.5rem;
+  list-style-type: none;
+
+  ${media.xSmall} {
+    gap: 0;
+    width: 100%;
+    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/components/common/OptionSwitch/styles.ts

@@ -10,13 +10,12 @@ export const OptionSwitchContainer = styled.ul`
 
   width: 20rem;
   height: 4.4rem;
+  margin-top: 0.9rem;
   padding: 0.7rem;
 
   background-color: ${({ theme }) => theme.colors.lightGray};
   border-radius: ${({ theme }) => theme.borderRadius.basic};
 
-  margin-top: 0.9rem;
-
   @media screen and (max-width: 530px) {
     width: 100%;
   }