[#5] TextField component 개발

[cskime]

📝 작업 내용

• TextField component 구현
• TEXT_FIELD_TYPE 값으로 입력 방식 설정
  • TEXT_FIELD_TYPE.input : Text를 직접 입력하는 TextInput 구현
  • TEXT_FIELD_TYPE.dropdown : Dropdown에서 선택한 값을 입력하는 DropdownInput 구현
• react-router package를 설치하고 component를 test하기 위한 page에 대해 route 분기

📷 스크린샷 (선택)

👀 새로 알게 된 내용 (선택)

• 멘토님이 알려주신 React portal을 dropdown type의 text field에 적용해 보았습니다.
• State, prop 등 React component tree 안에서 값을 사용하거나 event handling이 가능하면서도, React component tree를 벗어나서 임의의 DOM node 하위에 component를 render 해 주는 기술입니다.
• 나중에 Toast나 Modal을 구현할 때에도 비슷한 방법을 사용해서 구현할 수 있을 것 같습니다.
• 참고
  • createPortal(children, domNode, key?)
  • React portal을 활용한 드롭다운 컴포넌트 구현하기

💬 리뷰어에게 남길 말 (선택)

• 구체적인 사용 방법은 TestPage component의 예시 코드를 확인해주세요.

[cskime]

• Merge branch 'develop' into feature/codeit-FE-18-part2#5 commit은 App component에서 발생한 conflict를 해결하기 위한 merge commit 입니다.
• Component test page(TestPage)와 @nidor022 님이 개발하신 MessagePage가 App component에서 충돌해서 react-router를 사용해서 route를 분기해 두었습니다.
• 이 과정에서 react-router package를 설치했습니다. 이 PR이 merge된 후에 page를 개발하는 PR을 생성하신다면 아래 내용을 참고해주세요. (@gummmmmy0v0, @onesiin)
  • PR을 만들기 전에 작업하시던 branch를 upstream:develop으로 rebase 해주세요.
  • 이 과정에서 App component에서 발생하는 conflict를 수정해주세요.
  • Conflict 수정 시, 각자 개발하는 화면에 대한 path로 <Route path="/some/path" element={<SomePage />} />와 같이 route를 추가해주세요.
  • Conflict를 해결한 다음 PR을 생성해주세요.

[nidor022]

👍

[gummmmmy0v0]

🫡