Feat: Tab 컴포넌트 생성

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@stomp/stompjs": "^7.0.0",
     "@svgr/rollup": "^8.1.0",

src/components/Trip/TripSectionTop.tsx

@@ -0,0 +1,15 @@
+import Tab from '@components/common/tab/Tab';
+
+const TripSectionTop = () => {
+  return (
+    <div className="min-h-[800px]">
+      <div className="my-1">여정 생성 완료 페이지</div>
+      <Tab
+        lists={['우리의 여행취향', '우리의 관심목록']}
+        contents={[<div>우리의 여행취향</div>, <div>우리의 관심목록</div>]}
+      />
+    </div>
+  );
+};
+
+export default TripSectionTop;

src/components/common/tab/Tab.tsx

@@ -0,0 +1,37 @@
+import * as Tabs from '@radix-ui/react-tabs';
+
+interface TabProps {
+  lists: string[];
+  contents: React.ReactNode[];
+}
+
+const Tab = ({ lists, contents }: TabProps) => (
+  <Tabs.Root className="flex w-full flex-col" defaultValue="tab0">
+    <Tabs.List
+      className="border-b-1 flex shrink-0 px-5"
+      aria-label="Manage your account">
+      {lists.map((list, index) => {
+        return (
+          <Tabs.Trigger
+            key={index}
+            className="headline1 flex h-[45px] flex-1 cursor-pointer select-none items-center justify-center bg-white px-5 leading-none outline-none data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+            value={`tab${index}`}>
+            {list}
+          </Tabs.Trigger>
+        );
+      })}
+    </Tabs.List>
+    {contents.map((content, index) => {
+      return (
+        <Tabs.Content
+          key={index}
+          className="grow bg-white p-5 outline-none"
+          value={`tab${index}`}>
+          {content}
+        </Tabs.Content>
+      );
+    })}
+  </Tabs.Root>
+);
+
+export default Tab;

src/pages/plan/planTrip.page.tsx

@@ -1,5 +1,15 @@
+import Tab from '@components/common/tab/Tab';
+
 const PlanTrip = () => {
-  return <div>여행 계획 페이지</div>;
+  return (
+    <>
+      <div>여행 계획 페이지</div>
+      <Tab
+        lists={['Day1', 'Day2', 'Day3']}
+        contents={[<div>Day1</div>, <div>Day2</div>, <div>Day3</div>]}
+      />
+    </>
+  );
 };
 
 export default PlanTrip;

src/pages/trip/trip.page.tsx

@@ -1,5 +1,11 @@
+import TripSectionTop from '@components/Trip/TripSectionTop';
+
 const Trip = () => {
-  return <div>여정 생성 완료 페이지</div>;
+  return (
+    <>
+      <TripSectionTop />
+    </>
+  );
 };
 
 export default Trip;

src/router/socketRouter.tsx

@@ -3,18 +3,21 @@ import PlanPlaceTrip from '@pages/plan/planPlaceTrip.page';
 import PlanTrip from '@pages/plan/planTrip.page';
 import Trip from '@pages/trip/trip.page';
 import { Route, Routes } from 'react-router-dom';
+import MainLayout from './routerLayout';
 
 const SocketRouter = () => {
   return (
     <>
       <Routes>
-        <Route path="/trip/:id" element={<Trip />} />
-        <Route path="/trip/:id/plan" element={<PlanTrip />} />
-        <Route path="/trip/:id/plan/place" element={<PlanPlaceTrip />} />
-        <Route
-          path="/trip/:id/plan/place/search"
-          element={<PlanPlaceSearch />}
-        />
+        <Route path="/" element={<MainLayout />}>
+          <Route path="/trip/:id" element={<Trip />} />
+          <Route path="/trip/:id/plan" element={<PlanTrip />} />
+          <Route path="/trip/:id/plan/place" element={<PlanPlaceTrip />} />
+          <Route
+            path="/trip/:id/plan/place/search"
+            element={<PlanPlaceSearch />}
+          />
+        </Route>
       </Routes>
     </>
   );