[FEAT] Tab

[Farmer-Kim]

FEAT |

기능에 대한 설명

• tabs prop으로 전달된 배열에 따라 탭 버튼을 렌더링하고 선택된 탭을 관리합니다.
• 각 탭 버튼을 클릭하면 해당 탭이 활성화되며, 해당하는 탭의 컨텐츠가 표시됩니다.
• 선택된 탭의 인덱스는 activeTab 상태로 관리되며, 상태 업데이트에 따라 컴포넌트가 리렌더링됩니다.

interface TabMenuProps {
  tabs: string[];
  initialTab?: number;
}

이 컴포넌트는 TabMenuProps 인터페이스를 통해 tabs 배열과 선택된 초기 탭의 인덱스(initialTab)를 입력으로 받습니다.

const TabMenu: React.FC<TabMenuProps> = ({ tabs, initialTab = 0 }) => {
  const [activeTab, setActiveTab] = useState(initialTab);

  const handleTabClick = (index: number) => {
    setActiveTab(index);
  };

  return (
    <div className="tab-menu">
      <div className="tab-buttons">
        {tabs.map((tab, index) => (
          <button
            key={index}
            className={index === activeTab ? 'active' : ''}
            onClick={() => handleTabClick(index)}
          >
            {tab}
          </button>
        ))}
      </div>
      <div className="tab-content">
        {tabs[activeTab] && (
          <div>
            <h2>{tabs[activeTab]}</h2>
            <p>Content for {tabs[activeTab]}</p>
          </div>
        )}
      </div>
    </div>
  );
};
}

컴포넌트는 내부적으로 useState 훅을 사용하여 activeTab 상태를 관리합니다. 이 상태는 현재 활성화된 탭의 인덱스를 나타냅니다. 초기 탭은 initialTab prop에 따라 설정되며, 사용자의 클릭에 따라 탭이 변경될 때마다 이 상태가 업데이트됩니다.

탭 메뉴 컴포넌트는 다음과 같은 구조로 작성되어 있습니다:

1. 탭 버튼 렌더링: tabs 배열을 순회하면서 각 탭에 대한 버튼을 렌더링합니다. 버튼의 클래스명은 현재 활성화된 탭인 경우에는 'active' 클래스를 추가하여 스타일링을 변경합니다. 각 버튼을 클릭하면 handleTabClick 함수가 호출되어 해당 탭을 활성화합니다.

2. 탭 컨텐츠 렌더링: activeTab 상태에 해당하는 탭의 컨텐츠를 렌더링합니다. 선택된 탭의 제목과 컨텐츠가 표시됩니다. 선택된 탭의 인덱스가 tabs 배열의 범위를 벗어나지 않도록 체크하고, 해당하는 탭의 컨텐츠를 표시합니다.

컴포넌트는 각 탭의 버튼을 클릭하면 해당 탭의 내용이 동적으로 변경되는 간단한 탭 메뉴 기능을 제공합니다. 사용자가 원하는 탭을 선택하여 해당하는 콘텐츠를 보거나 조작할 수 있도록 구현되었습니다. 이 컴포넌트는 Tab.css 스타일시트를 통해 탭 메뉴의 외형을 스타일링할 수 있습니다.

• [ ] 하나의 기능만 담당하는가?