탭 클릭시, 다른 컴포넌트 렌더링 해주는 형태!

<Home/>

type tabType = "near" | "new";

const Home = (props: Props) => {
  useEffect(() => {
    const homeTab = localStorage.getItem("homeTab") as tabType | null;
    setCurrentTab(homeTab ?? "near");
  }, []);

  const [currentTab, setCurrentTab] = useState<tabType>("near");
  const clickTab = (tab: tabType) => {
    setCurrentTab(tab);
    localStorage.setItem("homeTab", tab);
  };

  return (
    <Layout>
      <SearchHeader currentTab={currentTab} clickTab={clickTab}></SearchHeader>
      {currentTab === "near" ? <NearFeed /> : <NewFeed />}
    </Layout>
  );
};

export default Home;

먼저, 탭이 그려지는 제일 위 컴포넌트에서 tab의 상태를 관리해준다.

두개의 탭 밖에 없기에, 탭의 타입을 먼저 지정해주고,
clickTab 이라는 함수로 클릭시, tab의 상태를 변경해준다.
여기서 localstorage로 새로고침시 상태를 유지시켜준다!

currentTab부분의 값을 통해 조건부렌더링을 해준다!

SearchHeader

type tabType = "near" | "new";

type Props = {
  currentTab: tabType;
  clickTab: (tab: tabType) => void;
};

const SearchHeader = ({ currentTab, clickTab }: Props) => {
 return (
    <SearchHeaderSec>
      <NoticeIcon />
      <SearchTabMenu>
        <SearchTab
          className={currentTab === "near" ? "active" : ""}
          onClick={() => clickTab("near")}
        >
          내 근처
        </SearchTab>
        <SearchTab
          className={currentTab === "new" ? "active" : ""}
          onClick={() => clickTab("new")}
        >
          최신
        </SearchTab>
      </SearchTabMenu>
      <SearchIcon />
    </SearchHeaderSec>
  );
};

export { SearchHeader };

<SearchTabMenu/>

const SearchTabMenu = styled.ul`
  display: flex;
  gap: 2rem;
  justify-content: center;
`;

ul 태그로 tab을 감싸는 컴포넌트를 만들어준다.

<SearchTab/>

<SearchTab className={currentTab === "near" ? "active" : ""} 
	onClick={() => clickTab("near")}>
내 근처
</SearchTab>

const SearchTab = styled.li`
  min-width: 5rem;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-gray);
  padding: 1rem;
  list-style: none;
  cursor: pointer;
  &.active {
    border-bottom: 2px solid var(--color-border);
  }
`;

li태그로, active상태일때의 css값을 바꿔줄 수 있다!
className 또한 삼항연산자로 줄수있다는것을 알았다!