Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui-kit): 모든 컴포넌트가 HTML 엘리먼트를 상속받도록 수정 #80

Merged
merged 4 commits into from
May 2, 2021

Conversation

evan-moon
Copy link
Member

변경사항

업데이트

  • 모든 컴포넌트들이 HTMLAttributes를 상속받도록 변경하고, className...props 를 컴포넌트에 주입받습니다.
  • Emotion, Tailwind CSS와 같이 CSS 클래스 기반으로 작동하는 녀석들을 함께 사용하기 위함.

기타

  • 슬랙 노티를 주는 깃헙 액션을 추가하였습니다. 노션 문서를 참고해주세요!

집중적으로 리뷰 받고 싶은 부분이 있나요?

전부 classNameprops를 주입하는 변경사항이기는 한데, Table 컴포넌트 같은 경우는 프로퍼티 타입 정의도 조금 바꿨습니다. 요 부분 신경써서 봐주시면 좋을 듯!

@evan-moon evan-moon requested a review from Junkim93 as a code owner May 1, 2021 08:44
@Junkim93
Copy link
Contributor

Junkim93 commented May 1, 2021

고생하셨습니다 !

@evan-moon evan-moon merged commit 885a3dc into master May 2, 2021
@evan-moon evan-moon deleted the fix/components-classnames branch May 2, 2021 03:15
@lubycon-admin
Copy link

🎉 This PR is included in version 1.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

lubycon-admin pushed a commit that referenced this pull request Sep 11, 2021
# 1.0.0 (2021-09-11)

### Bug Fixes

* build error ([3dba1ee](3dba1ee))
* build 스크립트가 workspace를 보고 있던 이슈 수정 ([ac5dd43](ac5dd43))
* install @semantic-release/exec ([3e0f0dc](3e0f0dc))
* package name is changed ([#128](#128)) ([d6394be](d6394be))
* Storybook 빌드 에러 수정 ([#118](#118)) ([da5586e](da5586e))
* vscode에서 typescript 모듈을 찾지 못하는 이슈 수정 [skip ci] ([#98](#98)) ([fbd7fb7](fbd7fb7))
* yarn 빌드 꺠지는 이슈 수정 ([#97](#97)) ([b98721a](b98721a))
* 배포 때 semantic-release 플러그인 못 찾는 이슈 수정 ([#120](#120)) ([175a937](175a937)), closes [#118](#118) [#98](#98) [#97](#97) [#119](#119) [#92](#92) [#114](#114) [#106](#106) [#103](#103)
* 배포 에러 수정 ([cbf557b](cbf557b))
* 배포 테스트 ([4897c0f](4897c0f))
* 빌드 에러 수정 ([#127](#127)) ([372e697](372e697))
* **icon:** Icon 컴포넌트가 화면에 노출되었을 때 SVG 요청을 시작하도록 변경 ([#121](#121)) ([cb7ecb4](cb7ecb4))
* **Icon:** 아이콘이 깨지는 이슈 수정 ([#119](#119)) ([369808d](369808d))
* **Icon:** 필요없는 style 어트리뷰트 제거 ([#124](#124)) ([0fa565a](0fa565a))
* 빌드에러 수정 ([2fe086d](2fe086d))
* 빌드에러 수정 ([274ce7d](274ce7d))
* **docs:** remove nojekyll ([67419f0](67419f0))
* **ui-kit:** apple-logo-ar 아이콘의 경우에는 무조건 outline으로 타입이 지정되도록 수정 ([#91](#91)) ([c89b966](c89b966))
* **ui-kit:** checkbox 스토리 수정 ([#92](#92)) ([8182cbf](8182cbf))
* **ui-kit:** CSS Export 설정 변경 ([#73](#73)) ([0d2fce7](0d2fce7))
* **ui-kit:** Fix Modal Type Error ([33bc34f](33bc34f))
* **ui-kit:** Grid 컴포넌트에 클래스 넣을 수 있도록 변경 ([#61](#61)) ([cbeaf23](cbeaf23))
* **ui-kit:** remove duplicated export syntax ([b8ade40](b8ade40))
* **ui-kit:** Row 컴포넌트 상하 마진 제거 ([#60](#60)) ([8e867d1](8e867d1))
* **ui-kit:** Selection에 Disabled 안 먹는 이슈 수정 ([#86](#86)) ([fc0fa74](fc0fa74))
* **ui-kit:** 사용하지 않는 디펜던시 제거 ([#67](#67)) ([915e889](915e889))
* **ui-kit:** 타이포그래피 타입 깨지는 이슈 수정 ([41ade6b](41ade6b))
* **ui-kit:** 탭 컴포넌트 타입 깨지는 부분 수정 ([#38](#38)) ([eaa7c0f](eaa7c0f))

### Features

* Flex 컴포넌트 추가 ([#126](#126)) ([b33f747](b33f747))
* **skeleton:** Skeleton 컴포넌트 추가 ([#114](#114)) ([6d93782](6d93782))
* Snackbar 제거 및 TransitionMotion 컴포넌트 추가 ([#106](#106)) ([3900839](3900839))
* useOverlay hook 추가 ([#103](#103)) ([305adcb](305adcb))
* **docs:** Docs에 Prev, Next 버튼 추가 ([#77](#77)) ([7af14a3](7af14a3))
* **docs:** UI Kit Docs 페이지 와꾸 추가 ([#62](#62)) ([2b81488](2b81488))
* **docs:** 개발에 필요한 기본적인 세팅 완료 ([#59](#59)) ([2dca6af](2dca6af))
* **ui-kit:** Accordion 컴포넌트 추가 ([#47](#47)) ([dbdd25b](dbdd25b))
* **ui-kit:** Alert, Container 컴포넌트 추가 ([#43](#43)) ([6a2a372](6a2a372))
* **ui-kit:** Beta Release ([#68](#68)) ([8d15fe6](8d15fe6)), closes [#18](#18) [#14](#14) [#20](#20) [#21](#21) [#22](#22) [#23](#23) [#24](#24) [#25](#25) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#33](#33) [#34](#34) [#36](#36) [#35](#35) [#38](#38) [#37](#37) [#40](#40) [#41](#41) [#42](#42) [#39](#39) [#43](#43) [#44](#44) [#46](#46) [#45](#45) [#49](#49) [#47](#47) [#48](#48) [#51](#51) [#52](#52) [#50](#50) [#53](#53) [#54](#54) [#56](#56) [#57](#57) [#58](#58) [#59](#59) [#60](#60) [#61](#61) [#62](#62) [#63](#63) [#64](#64) [#65](#65) [#66](#66) [#67](#67)
* **ui-kit:** Button 컴포넌트 타입 추가 ([#51](#51)) ([f423865](f423865))
* **ui-kit:** Color 추가 ([#24](#24)) ([a92b2cd](a92b2cd))
* **ui-kit:** Grid Column ([#25](#25)) ([a5a0ff0](a5a0ff0))
* **ui-kit:** Input 컴포넌트 추가 ([#46](#46)) ([2894397](2894397))
* **ui-kit:** List, ListItem, ListItemImage 컴포넌트 추가 ([#45](#45)) ([3bda7ed](3bda7ed))
* **ui-kit:** Modal 컴포넌트 애니메이션 추가 ([#57](#57)) ([3b76bbe](3b76bbe))
* **ui-kit:** Modal 컴포넌트 추가 ([#50](#50)) ([e16beb0](e16beb0))
* **ui-kit:** ProgressBar 컴포넌트 추가 ([#48](#48)) ([75b3646](75b3646))
* **ui-kit:** Radio 컴포넌트 추가 ([#23](#23)) ([4719333](4719333))
* **ui-kit:** Row 컴포넌트 추가 및 그리드 인터페이스 확정 ([#27](#27)) ([9752aaf](9752aaf))
* **ui-kit:** Selection 컴포넌트 추가 ([#32](#32)) ([bcf8652](bcf8652))
* **ui-kit:** Tabs 컴포넌트 리팩토링 및 모바일 대응 추가 ([#58](#58)) ([5d7b916](5d7b916))
* **ui-kit:** Tag 컴포넌트 추가 ([#53](#53)) ([d37bd03](d37bd03))
* **ui-kit:** Text 컴포넌트 디자인 변경 ([#20](#20)) ([ed86aad](ed86aad))
* **ui-kit:** Text 컴포넌트 추가 ([#18](#18)) ([1c7f777](1c7f777)), closes [#14](#14)
* **ui-kit:** 공식 릴리즈 ([#69](#69)) ([f143ff1](f143ff1)), closes [#68](#68) [#18](#18) [#14](#14) [#20](#20) [#21](#21) [#22](#22) [#23](#23) [#24](#24) [#25](#25) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#33](#33) [#34](#34) [#36](#36) [#35](#35) [#38](#38) [#37](#37) [#40](#40) [#41](#41) [#42](#42) [#39](#39) [#43](#43) [#44](#44) [#46](#46) [#45](#45) [#49](#49) [#47](#47) [#48](#48) [#51](#51) [#52](#52) [#50](#50) [#53](#53) [#54](#54) [#56](#56) [#57](#57) [#58](#58) [#59](#59) [#60](#60) [#61](#61) [#62](#62) [#63](#63) [#64](#64) [#65](#65) [#66](#66) [#67](#67)
* **ui-kit:** 모든 컴포넌트가 HTML 엘리먼트를 상속받도록 수정 ([#80](#80)) ([885a3dc](885a3dc))
* **ui-kit:** 섀도우 스타일, 스토리북 추가 ([#21](#21)) ([6c5b954](6c5b954))
* **ui-kit:** 스낵바 컴포넌트 추가 ([#41](#41)) ([429a441](429a441))
* **ui-kit:** 카드 컴포넌트 추가 ([#39](#39)) ([dc8b758](dc8b758))
* **ui-kit:** 타이포그래피 디자인 변경사항 반영 ([#22](#22)) ([d4e5742](d4e5742))
* **ui-kit:** 토스트 모바일 적용 배포 트리거 ([ff62810](ff62810))
* **ui-kit:** 토스트 포지션  및 스타일 수정 ([#40](#40)) ([420bb1d](420bb1d))
* **ui-kit:** 토스트에 Align 기능 추가 ([#36](#36)) ([976ce6f](976ce6f))
* **ui-kit:** 툴팁 컴포넌트 추가 ([#37](#37)) ([be2bbb5](be2bbb5))
lubycon-admin pushed a commit that referenced this pull request Sep 11, 2021
# 1.0.0 (2021-09-11)

### Bug Fixes

* build error ([3dba1ee](3dba1ee))
* build 스크립트가 workspace를 보고 있던 이슈 수정 ([ac5dd43](ac5dd43))
* install @semantic-release/exec ([3e0f0dc](3e0f0dc))
* package name is changed ([47c63e7](47c63e7))
* package name is changed ([b54ea31](b54ea31))
* package name is changed ([#128](#128)) ([d6394be](d6394be))
* Storybook 빌드 에러 수정 ([#118](#118)) ([da5586e](da5586e))
* vscode에서 typescript 모듈을 찾지 못하는 이슈 수정 [skip ci] ([#98](#98)) ([fbd7fb7](fbd7fb7))
* yarn 빌드 꺠지는 이슈 수정 ([#97](#97)) ([b98721a](b98721a))
* 배포 때 semantic-release 플러그인 못 찾는 이슈 수정 ([#120](#120)) ([175a937](175a937)), closes [#118](#118) [#98](#98) [#97](#97) [#119](#119) [#92](#92) [#114](#114) [#106](#106) [#103](#103)
* 빌드 에러 수정 ([#127](#127)) ([372e697](372e697))
* **docs:** remove nojekyll ([67419f0](67419f0))
* **icon:** Icon 컴포넌트가 화면에 노출되었을 때 SVG 요청을 시작하도록 변경 ([#121](#121)) ([cb7ecb4](cb7ecb4))
* **Icon:** 필요없는 style 어트리뷰트 제거 ([#124](#124)) ([0fa565a](0fa565a))
* 배포 에러 수정 ([cbf557b](cbf557b))
* 배포 테스트 ([4897c0f](4897c0f))
* 빌드에러 수정 ([2fe086d](2fe086d))
* 빌드에러 수정 ([274ce7d](274ce7d))
* **Icon:** 아이콘이 깨지는 이슈 수정 ([#119](#119)) ([369808d](369808d))
* **ui-kit:** apple-logo-ar 아이콘의 경우에는 무조건 outline으로 타입이 지정되도록 수정 ([#91](#91)) ([c89b966](c89b966))
* **ui-kit:** checkbox 스토리 수정 ([#92](#92)) ([8182cbf](8182cbf))
* **ui-kit:** CSS Export 설정 변경 ([#73](#73)) ([0d2fce7](0d2fce7))
* **ui-kit:** Fix Modal Type Error ([33bc34f](33bc34f))
* **ui-kit:** Grid 컴포넌트에 클래스 넣을 수 있도록 변경 ([#61](#61)) ([cbeaf23](cbeaf23))
* **ui-kit:** remove duplicated export syntax ([b8ade40](b8ade40))
* **ui-kit:** Row 컴포넌트 상하 마진 제거 ([#60](#60)) ([8e867d1](8e867d1))
* **ui-kit:** Selection에 Disabled 안 먹는 이슈 수정 ([#86](#86)) ([fc0fa74](fc0fa74))
* **ui-kit:** 사용하지 않는 디펜던시 제거 ([#67](#67)) ([915e889](915e889))
* **ui-kit:** 타이포그래피 타입 깨지는 이슈 수정 ([41ade6b](41ade6b))
* **ui-kit:** 탭 컴포넌트 타입 깨지는 부분 수정 ([#38](#38)) ([eaa7c0f](eaa7c0f))

### Features

* Flex 컴포넌트 추가 ([#126](#126)) ([b33f747](b33f747))
* **skeleton:** Skeleton 컴포넌트 추가 ([#114](#114)) ([6d93782](6d93782))
* Snackbar 제거 및 TransitionMotion 컴포넌트 추가 ([#106](#106)) ([3900839](3900839))
* useOverlay hook 추가 ([#103](#103)) ([305adcb](305adcb))
* **docs:** Docs에 Prev, Next 버튼 추가 ([#77](#77)) ([7af14a3](7af14a3))
* **docs:** UI Kit Docs 페이지 와꾸 추가 ([#62](#62)) ([2b81488](2b81488))
* **docs:** 개발에 필요한 기본적인 세팅 완료 ([#59](#59)) ([2dca6af](2dca6af))
* **ui-kit:** Accordion 컴포넌트 추가 ([#47](#47)) ([dbdd25b](dbdd25b))
* **ui-kit:** Alert, Container 컴포넌트 추가 ([#43](#43)) ([6a2a372](6a2a372))
* **ui-kit:** Beta Release ([#68](#68)) ([8d15fe6](8d15fe6)), closes [#18](#18) [#14](#14) [#20](#20) [#21](#21) [#22](#22) [#23](#23) [#24](#24) [#25](#25) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#33](#33) [#34](#34) [#36](#36) [#35](#35) [#38](#38) [#37](#37) [#40](#40) [#41](#41) [#42](#42) [#39](#39) [#43](#43) [#44](#44) [#46](#46) [#45](#45) [#49](#49) [#47](#47) [#48](#48) [#51](#51) [#52](#52) [#50](#50) [#53](#53) [#54](#54) [#56](#56) [#57](#57) [#58](#58) [#59](#59) [#60](#60) [#61](#61) [#62](#62) [#63](#63) [#64](#64) [#65](#65) [#66](#66) [#67](#67)
* **ui-kit:** Button 컴포넌트 타입 추가 ([#51](#51)) ([f423865](f423865))
* **ui-kit:** Color 추가 ([#24](#24)) ([a92b2cd](a92b2cd))
* **ui-kit:** Grid Column ([#25](#25)) ([a5a0ff0](a5a0ff0))
* **ui-kit:** Input 컴포넌트 추가 ([#46](#46)) ([2894397](2894397))
* **ui-kit:** List, ListItem, ListItemImage 컴포넌트 추가 ([#45](#45)) ([3bda7ed](3bda7ed))
* **ui-kit:** Modal 컴포넌트 애니메이션 추가 ([#57](#57)) ([3b76bbe](3b76bbe))
* **ui-kit:** Modal 컴포넌트 추가 ([#50](#50)) ([e16beb0](e16beb0))
* **ui-kit:** ProgressBar 컴포넌트 추가 ([#48](#48)) ([75b3646](75b3646))
* **ui-kit:** Radio 컴포넌트 추가 ([#23](#23)) ([4719333](4719333))
* **ui-kit:** Row 컴포넌트 추가 및 그리드 인터페이스 확정 ([#27](#27)) ([9752aaf](9752aaf))
* **ui-kit:** Selection 컴포넌트 추가 ([#32](#32)) ([bcf8652](bcf8652))
* **ui-kit:** Tabs 컴포넌트 리팩토링 및 모바일 대응 추가 ([#58](#58)) ([5d7b916](5d7b916))
* **ui-kit:** Tag 컴포넌트 추가 ([#53](#53)) ([d37bd03](d37bd03))
* **ui-kit:** Text 컴포넌트 디자인 변경 ([#20](#20)) ([ed86aad](ed86aad))
* **ui-kit:** Text 컴포넌트 추가 ([#18](#18)) ([1c7f777](1c7f777)), closes [#14](#14)
* **ui-kit:** 공식 릴리즈 ([#69](#69)) ([f143ff1](f143ff1)), closes [#68](#68) [#18](#18) [#14](#14) [#20](#20) [#21](#21) [#22](#22) [#23](#23) [#24](#24) [#25](#25) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#33](#33) [#34](#34) [#36](#36) [#35](#35) [#38](#38) [#37](#37) [#40](#40) [#41](#41) [#42](#42) [#39](#39) [#43](#43) [#44](#44) [#46](#46) [#45](#45) [#49](#49) [#47](#47) [#48](#48) [#51](#51) [#52](#52) [#50](#50) [#53](#53) [#54](#54) [#56](#56) [#57](#57) [#58](#58) [#59](#59) [#60](#60) [#61](#61) [#62](#62) [#63](#63) [#64](#64) [#65](#65) [#66](#66) [#67](#67)
* **ui-kit:** 모든 컴포넌트가 HTML 엘리먼트를 상속받도록 수정 ([#80](#80)) ([885a3dc](885a3dc))
* **ui-kit:** 섀도우 스타일, 스토리북 추가 ([#21](#21)) ([6c5b954](6c5b954))
* **ui-kit:** 스낵바 컴포넌트 추가 ([#41](#41)) ([429a441](429a441))
* **ui-kit:** 카드 컴포넌트 추가 ([#39](#39)) ([dc8b758](dc8b758))
* **ui-kit:** 타이포그래피 디자인 변경사항 반영 ([#22](#22)) ([d4e5742](d4e5742))
* **ui-kit:** 토스트 모바일 적용 배포 트리거 ([ff62810](ff62810))
* **ui-kit:** 토스트 포지션  및 스타일 수정 ([#40](#40)) ([420bb1d](420bb1d))
* **ui-kit:** 토스트에 Align 기능 추가 ([#36](#36)) ([976ce6f](976ce6f))
* **ui-kit:** 툴팁 컴포넌트 추가 ([#37](#37)) ([be2bbb5](be2bbb5))
@lubycon-admin
Copy link

🎉 This PR is included in version 1.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants