[다섯번째 프로젝트/개인] UI Kit 만들기

• Lv 3 과제: UI Kit 만들기 
• 작업 기간: 6/23(1일)

 

요청사항

1. 모달:
   취소, 확인이 있고, overlay를 클릭했을 때 모달이 닫히지 않는 형태,
   닫기 버튼만 있고, overlay를 클릭했을 때 모달이 닫히는 형태
2. 버튼: 6가지
3. 인풋:
   일반 input,
   금액 콤마가 찍히는 input,
   버튼 클릭 시 입력값이 객체형태로 alert에 표시
4. 셀렉트: select option을 직접 div와 ul을 사용하여 구현

 

결과물

막바지에 지쳐서 이번 과제는 시간 관리를 잘 하지 못하였고, 그렇다보니 퀄리티가 스스로 만족스럽지 못했다.. 🥺

https://github.com/lizzieFEstudy/ui-kit

GitHub - lizzieFEstudy/ui-kit: 과제 Lv 3. UI Kit 만들기

 

 

 

---

배운 점

모달 컴포넌트

https://velog.io/@fejigu/React-Modal-Component

[React] Modal Component 구현하기

 

글로벌 모달

https://velog.io/@younoah/waffle-card-modal

여러개의 모달을 전역 상태로 관리하기 (feat. context)

https://velog.io/@woohobi/Redux-toolkit%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-%EB%AA%A8%EB%8B%AC%EC%B0%BD-%EA%B4%80%EB%A6%AC

Redux toolkit을 이용한 효율적인 모달창 관리

 

버튼 컴포넌트

https://www.daleseo.com/react-button-component/

React로 버튼 컴포넌트 만들기

 

리액트 아이콘 사용하기

https://kimyang-sun.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%84%EC%9D%B4%EC%BD%98react-icons-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

(React) 리액트 아이콘(react-icons) 사용하기

 

버튼 상태별 props를 이용한 스타일드 컴포넌트

https://velog.io/@1703979/TIL-50

TIL 50 | Styled Component Helper - css

 

스타일드 컴포넌트 심화

https://www.zigae.com/styled-components-abstract/

우리가 몰랐던 styled-components 동작원리

 

필터링 참고

https://d-dual.tistory.com/48

[ React / Select ] Select의 defaultValue 를 state를 이용하여 동적 변경 시키기.

 

셀렉트 만들기

https://blog.toycrane.xyz/react%EC%97%90%EC%84%9C-select-box-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-a20e2bf082b2

React에서 Select Box 컴포넌트 만들기

 

리액트 라이브러리 셀렉트?

https://boseuleeee.tistory.com/33

React-Select 구현 하기

 

JS Doc 사용해서 타입 힌트 주기