rose-rosie-rose/lv3-ui-components

항해99 주특기 주차 level3 pair

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

yarn build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

lv3-ui-components's Issues

fix: alert창 오류 수정

button 구현하기

• styled-components를 이용하여 구현하고 props를 활용하여 구현하기
• 버튼 lavel에 선택적으로 아이콘을 넣을 수 있도록 구현

fix: Button, Icon 콘솔 에러 메시지 사항 수정

Select 구현하기

• select box 구현하기.
  • select 클릭 시 option 리스트가 나오고 해당 option 클릭시 select 값 변경
  • select box 확장 시에도 부모 요소에 의해 가려지지 않아야 함

input 만들기

• 기본 input
• 숫자 넣었을 때, 3자리 숫자마다 콤마가 찍히는 input
• form 을 구현하고 각 input에 입력하고 저장 버튼을 눌렀을 때 {name: '아무 텍스트', price: "콤마가 없는 금액"} 을 alert에 표시

React Lv3 페어과제 리뷰

• input 세자리 수마다 콤마 찍기 작업 시 정규식 말고도 toLocaleString() 함수 사용하는 방법도 있으니 참고하시면 좋을 것 같습니다!
• README를 작성해주시면 코드를 보지 않아도 어떤 프로젝트인지 한 눈에 파악이 쉬워 좋을 것 같습니다.
• 커밋을 하나의 작업마다 잘게 쪼개서 해주셔서 추후 유지보수에 용이할 것 같아 좋았습니다.
• 재사용성을 높이고 효율적인 코드를 위해 많이 고민하신 것이 보여 좋았습니다.

Lv.3 페어 코드 리뷰

Modal

• createPortal 메서드를 활용하여 props로 값을 받아서 모달을 구현하신 점이 인상적이었습니다.
• 같은 뎁스별로 구성한 폴더가 구조를 이해하기에 수월하여 협업시 도움이 될 것 같다는 생각이 들었습니다.

Button

• 컴포넌트를 잘게 분할함으로써 버튼의 재사용성을 높인 부분이 인상적이었습니다.
• 컬러 타입별 switch문을 통해 각 색상을 반환해 주는 부분에서 많이 배우게 되었습니다. 저도 이렇게 적용해봐야겠어요 !
• 버튼 hover시 컬러 변환도 좋지만, 과제 예시 사이트에서 제시해주는 것처럼 "클릭시" 컬러 변환이 이루어지도록 적용해보는 것도 좋을 것 같습니다.

Input

• 정규표현식으로 숫자의 유효성 검사를 해주신 부분이 인상적이었습니다.
• 추가적으로 Price 앞자리에 0이 올 경우도 필터링 적용 해주시면 완성도가 높아질 것입니다.

Select

• select 와 option 태그를 이용하신 점, option을 객체로 생성하신 점에서 코드가 가독성 좋게 잘 짜여졌다고 생각합니다.
• option을 객체를 map으로 뿌려주신 부분이 추후 유지보수에도 수월할 것 같다는 생각이 들었습니다.

Overall

 전반적으로 컴포넌트를 잘게 분할하고 props를 적극 활용한 점에서 재사용성을 높이려는 노력이 보였습니다.
 이런 부분에서 저도 많이 배우게 되었습니다. 감사합니다👍
 두 분 모두 정말 고생 많으셨습니다 ! 😃

(optional) Button 구현하기

• Styled-Components를 활용하여 총 3가지 형태의 버튼을 2개 이상의 컬러로 구현 (총 6개 이상)

1. 버튼의 크기는 large, medium, small
2. 디자인 종류는 filled, lined
3. 버튼 label에 아이콘 삽입 가능

Modal 구현하기

• 2가지 형태의 모달창 구현
  1. overlay 클릭시 모달이 닫히지 않으며, 취소/확인 버튼이 있는 경우
  2. overlay 클릭시 모달이 닫히며, 닫기 버튼이 있는 경우
  • 모달을 on시키는 버튼의 형태는 각각 달라야 함