탭 컴포넌트 구현

[bomi8489]

📑 이슈 번호

#8

🚧 구현 내용

탭 컴포넌트를 구현 했습니다.

🚨 특이 사항

Tab Props

interface TabProps {
  children?: React.ReactNode
}

TabItem Props

interface TabItemProps {
  active?: boolean
  text?: string
  dest: string
  onClick: (_e?: React.MouseEvent<HTMLButtonElement>) => void
}

사용 예시

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>
)

[dudwns]

탭 깔끔하네요! 고생하셨습니다 👍

[eeseung]

탭 컴포넌트는 페이지 이동이 발생하기 때문에 <Link/>를 사용하는 건 어떨까요? 지금 구조와 달라질 것 같긴 하네요..🙈 아래 코멘트 확인 부탁드립니다!

[eeseung]

Suggested change

	`text-gray9 flex w-[100%] cursor-pointer items-center justify-center border-b py-4 font-['Pretendard'] text-sm font-bold transition ease-in-out`,
	`text-gray9 flex w-[100%] cursor-pointer items-center justify-center border-b py-4 text-sm font-bold transition ease-in-out`,

Pretendard는 빼도 될 것 같습니다!

[eeseung]

Suggested change

	active ? 'border-emerald-500' : 'border-slate-300',
	active ? 'border-emerald5' : 'border-slate3,

border에 다크 모드 적용이 필요합니다! 🌙

[eeseung]

Suggested change

	onClick={() => {
	onClick()
	}}
	onClick={onClick}

화살표 함수로 감싸지 않고 바로 넘겨줘도 되지 않을까요? 💡

[bomi8489]

모두 적용했습니다!