feat: 공통컴포넌트 tabs 구현

[cindycho0423]

#️⃣ 이슈

• close feat: tab 공용컴포넌트 구현 #20

📝 작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요.

• tabs 구현했습니다.

📸 스크린샷

✅ 체크 리스트

• 적절한 Title 작성
• 적절한 Label 지정
• Assignee 및 Reviewer 지정
• 로컬 작동 확인
• Merge 되는 브랜치 확인

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

트리거 버튼의 css를 className으로 사용자가 알아서 지정하게 할지,

buttonColor?: "green" | "red" | "blue";
  rounded?: "sm" | "md";
  padding?: "sm" | "md";

이렇게 하나하나 프롭으로 받게할지 고민하다가 후자로 했어요. 어떤 방법이 좋을지 얘기해주시면 감사하겠습니당

[github-actions]

💄 Storybook: https://66e95dd74f88edf048011168-bbruodpjzb.chromatic.com/

[JayChae]

여기서 Memo 하면 뭐가 좋은가요?

[cindycho0423]

activeTab 또는 setActiveTab이 변경될 때만 contextValue를 생성할 수 있도록 하여 불필요한 리렌더링을 방지합니당ㅎㅂㅎ 린트에러가 메모 쓰라고 알려줫어연🛠️

[JayChae]

사용법이 아주 좋네요! 🧐🧐🧐이게 그 컴파운드 패턴인가요?

[cindycho0423]

넹!!@🥳🎉

[JayChae]

context 활용도 하고 좋네여~~ prop으로 받게 한 거 좋은 것 같아요.
round랑 padding은 prop으로 받아서 사용하는 곳마다 통일감을 주는 게 좋은 것 같아요.

플러스로 className도 prop으로 받고, 그 받은 prop을 cn 후순위에 넣으면 어떨까요? 사용하는 사람이 커스텀이 필요하면 할 수 있어도 좋을 것 같아서요. 그러면 통일감을 주면서도 확장성도 😙

[cindycho0423]

context 활용도 하고 좋네여~~ prop으로 받게 한 거 좋은 것 같아요. round랑 padding은 prop으로 받아서 사용하는 곳마다 통일감을 주는 게 좋은 것 같아요.

플러스로 className도 prop으로 받고, 그 받은 prop을 cn 후순위에 넣으면 어떨까요? 사용하는 사람이 커스텀이 필요하면 할 수 있어도 좋을 것 같아서요. 그러면 통일감을 주면서도 확장성도 😙

쪼아용~~!!@@!!

[Han-wo]

고생하셨습니다~~