✨ feat: Tabs 컴포넌트 및 스토리북 작성

[bbearcookie]

🧩 이슈 번호

• close Tab 컴포넌트 #24

✅ 작업 사항

• Tabs 컴포넌트 작성
  • 탭의 디자인이 MUI 기본 형태와는 많이 달라보여서, radix ui 기반으로 작성했어요.
  • 현재는 variant 는 primary 하나로 되어있긴 한데.. 추후에 새로운 탭 디자인이 추가될 것을 고려해서 props를 만들어두었어요.

👩‍💻 공유 포인트 및 논의 사항

Tabs 컴포넌트 사용 예시

<Tabs
  tabItems={[
    {
      key: '1',
      label: '첫 번째',
      content: <div>컨텐츠 1</div>,
    },
    {
      key: '2',
      label: '두 번째',
      content: <div>컨텐츠 2</div>,
    },
    {
      key: '3',
      label: '세 번째',
      content: <div>컨텐츠 3</div>,
    },
  ]}
/>;

background-clip 속성 관련

테두리가 피그마와 미세하게 다른 것 같아서 크기를 키워보았는데, 상하좌우의 색상이 다른 걸 발견했었어요. 😮

원인은 배경 색상이 테두리 영역까지 적용되는 것 이었는데, background-clip 속성을 부여하니 해결됐어요.

그런데.. 사파리 브라우저에서는 -webkit-background-clip 속성으로 부여해줘야 하는데, emotion 공식문서 를 찾아보니 브라우저 별로 알아서 vendor-prefixing 를 붙혀준다는 것 같네요.. 그래서 background-clip 속성만 입력했어요.

제가 윈도우 환경이라 사파리 브라우저로는 실행을 못해봤지만.. 이 글을 참고해서 사파리랑 같은 Webkit 기반의 브라우저인 에피파니로 실행해보았을 때 이상은 없었어요!

크롬에서 실행 결과 (확대)

[github-actions]

🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-vvqbmgnyus.chromatic.com/
🚀 React Preview 보러가기: https://sea-of-my-heart-d7pqfyzke-dnd-sea-of-my-heart.vercel.app

[bbearcookie]

스토리북에서만 사용되는 컴포넌트이긴 한데..
스토리가 표현하려는 상황을 영어로 적는 것 보다는 한글 그대로 적는게 의미 전달에 도움이 될 것 같아서 한글로 표현해보았어요 😅

[easyhyun00]

오 저도 한글로 적어봐야겠네요!

[easyhyun00]

사파리 브라우저로

저도 사파리 브라우저로 들어갔을 때 별 이상 없었습니다!

[easyhyun00]

Approve 입니다!