feat: #8 - 탭 컴포넌트 구현

탭 컴포넌트 구현

src/app/(routes)/bomiTest/tabTest/comment/page.tsx

@@ -0,0 +1,5 @@
+const CommentTest = () => {
+  return <div>댓글 페이지</div>
+}
+
+export default CommentTest

src/app/(routes)/bomiTest/tabTest/layout.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React, { useState } from 'react'
+import Tab from '@/components/common/Tab/Tab'
+import TabItem from '@/components/common/Tab/TabItem'
+
+const TabTestPage = ({ children }: { children: React.ReactNode }) => {
+  const [currentTab, setCurrentTab] = useState(0)
+
+  const tabArr = [
+    { text: '스페이스', content: '스페이스 페이지', dest: '/bomiTest/tabTest' },
+    { text: '댓글', content: '댓글 페이지', dest: '/bomiTest/tabTest/comment' },
+    { text: '설정', content: '설정 페이지', dest: '/bomiTest/tabTest/setting' },
+  ]
+
+  return (
+    <div className="m-2">
+      <Tab>
+        {tabArr.map((tabItem, index) => (
+          <TabItem
+            key={index}
+            active={currentTab === index ? true : false}
+            dest={tabItem.dest}
+            text={tabItem.text}
+            onClick={() => setCurrentTab(index)}
+          />
+        ))}
+      </Tab>
+      {children}
+    </div>
+  )
+}
+
+export default TabTestPage

src/app/(routes)/bomiTest/tabTest/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const SpaceTest = () => {
+  return <div>스페이스 페이지</div>
+}
+
+export default SpaceTest

src/app/(routes)/bomiTest/tabTest/setting/page.tsx

@@ -0,0 +1,5 @@
+const SettingTest = () => {
+  return <div>세팅 페이지</div>
+}
+
+export default SettingTest

src/components/common/Tab/Tab.tsx

@@ -0,0 +1,9 @@
+interface TabProps {
+  children?: React.ReactNode
+}
+
+const Tab = ({ children }: TabProps) => {
+  return <div className="flex transition ease-in-out">{children}</div>
+}
+
+export default Tab

src/components/common/Tab/TabItem.tsx

@@ -0,0 +1,28 @@
+import { cls } from '@/utils'
+import Link from 'next/link'
+
+interface TabItemProps {
+  active?: boolean
+  text?: string
+  dest: string
+  onClick: (_e?: React.MouseEvent<HTMLDivElement>) => void
+}
+
+const TabItem = ({ active, text, dest, onClick }: TabItemProps) => {
+  return (
+    <Link
+      style={{ width: '100%' }}
+      href={dest}>
+      <div
+        onClick={onClick}
+        className={cls(
+          active ? 'border-emerald5' : 'border-slate3',
+          `flex w-[100%] cursor-pointer items-center justify-center border-b py-4 text-sm font-bold text-gray9 transition ease-in-out`,
+        )}>
+        {text}
+      </div>
+    </Link>
+  )
+}
+
+export default TabItem