refactor : 검색페이지 리팩토링 & 탭 컴포넌트 구현

[GBAJS754]

📌 이슈번호

• close 검색페이지 리팩토링 #333

📗 요구 사항과 구현 내용

1. Tab 컴포넌트 관심사 분리

context api와 합성컴포넌트를 사용하여 코드 가독성을 높이고, 유지보수하기 쉽게 수정하였습니다.

기존의 탭 컴포넌트

<TabContextProvider>
  <Tab
    active={currentTab}
    maxWidth="23.375"
    defaultTab={`${TAB_CONSTANTS.ARTICLE_TITLE}`}
    tabItems={[
      {
        title: `${TAB_CONSTANTS.ARTICLE_TITLE}`,
        width: '11.6875',
        onClick: () => changeTab(TAB_CONSTANTS.ARTICLE_TITLE),
      },
    ]}
  />

</TabContextProvider>

변경 후

<Tabs defaultValue="title">
    <Tabs.List>
      {SEARCH_RESULT_TABS.map(({ VALUE, LABEL, INDEX }) => (
        <Tabs.Tab value={VALUE} key={INDEX}>
          {LABEL}
        </Tabs.Tab>
      ))}
    </Tabs.List>
</Tabs>

2. 검색페이지 전체 리팩토링

불필요한 css와 코드를 수정하였습니다.
기존의 코드에 영향이 가지않도록 새로 작성한 코드들은 따로 Search 폴더 안에 작성했습니다.
=> 파일이 복잡해서 일단 Search폴더에 필요한 컴포넌트를 넣어놨는데 추후 폴더 구조 변경하면서 변경 예정
문제가 없을시 기존의 코드는 삭제하도록 하겠습니다.

📖 구현 스크린샷

📖 PR 포인트 & 궁금한 점

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fedc-4-tmi-homers-off	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 1, 2024 11:23am

[github-actions]

🚀storybook: https://6512ef0b17ceaf103653abaa-unifseosmp.chromatic.com/

[DongjaJ]

LGTM!