오픈소스 컨트리뷰션 결과 보고서

1. Support Expo Snack for [Button] sample code

#101 https://github.com/dooboolab/dooboo-ui/pull/101

요약: dooboo-ui 스토리북의 Button 컴포넌트 예제를 사용해 볼 수 있도록 Snack 연결 버튼을 추가하였습니다.

상세내용:

a) Challenges 프로그램에서, 컴포넌트에 대한 좋은 샘플을 제공하자는 논의를 진행했 었습니다.

 

b) 사용자가 새로운 컴포넌트를 개인 프로젝트에서 사용하기에 앞서, 미리 각각의 props를 사용해보며 테스트 해볼 수 있다면 좋을 것이라고 생각했습니다.

아래 사진은 react-native 공식 홈페이지의 문서 캡처화면입니다.

위 사진에서 보이듯이 React-native 홈페이지에선 expo snack을 활용하여, 각 컴포넌트마다 사용자가 코드를 수정하면서 사용해 볼 수 있도록 되어있습니다.

 

c) 따라서 각 컴포넌트 예제에 관한 snack을 각각 생성하여 스토리북에 바로가기 링크를 생성하여 추가하였습니다. 먼저, Button 컴포넌트 예제를 다루었습니다.

• 아래 사진에서 보이는 Try this example on Snack 버튼(Button컴포넌트 예제 중 Solid Color type)

 

 

• 버튼 클릭시 해당 snack으로 이동, 해당화면에서 자유롭게 테스트 가능

d) 각각의 Snack에서 다른 컴포넌트도 사용해 볼 수 있도록, dooboo-ui를 사용할 수 있는 환경을 설정하여 제공하였습니다.

 

e) 스토리북 내에서 바로가기 버튼을 추가하기 위해서 link(이동할 url)라는 props가 포함된 <Link>라는 컴포넌트를 생성했습니다.

 

f) 최종적으로 해당 PR은 Merge되었습니다.

 

2. Add Expo Snack for [LoadingIndicator] sample code

#137 https://github.com/dooboolab/dooboo-ui/pull/137

요약: dooboo-ui 스토리북의 LoadingIndicator 컴포넌트 예제를 사용해 볼 수 있도록 Snack 연결버튼을 추가하였습니다.

상세내용:

a) LoadingIndicator 컴포넌트 예제를 테스트해 볼 수 있는 Snack을 생성했습니다.

 

b) 위 컨트리뷰션 과정에서 생성한 <Link>컴포넌트를 사용하여 해당 snack을 연결시켜 스토리북에 버튼을 추가하였습니다.

 

c) 최종적으로 해당 PR은 Merge되었습니다.

 

 

 

 

- 제출한 결과보고서중 일부