네 번째 hacktoberfest 기여를 위한 새 구성 요소 추가

Awesome-Adoption: 프로필에 모달 추가

#207은 사용자가 프로필을 편집할 수 있는 모달의 필요성을 강조했습니다. Awesome-Adoption는 React 기반 애플리케이션이며 Hacktoberfest에 대한 4번째 기여를 위해 작업하기로 결정했습니다.

이 문제는 모달에 2개의 편집 가능한 필드가 포함되기를 원했습니다.

사용자 이름

설명
요구 사항은 또한 사용자 이름에 대한 유효성 검사가 필요하며 취소 버튼은 모달을 닫기 전에 프롬프트로 사용자에게 경고해야 함을 나타냅니다.

로컬에서 프로젝트를 설정하고 개발 서버를 시작한 후 사용자가 Edit에 액세스할 수 있는 프로필 페이지에 Edit Profile Modal 버튼을 추가하여 시작했습니다.


그런 다음 Modal에서 작업할 시간이었습니다. 코드를 체계적으로 유지하기 위해 EditProfileModal.jsx라는 편집 프로필 모달에 대한 별도의 구성 요소를 만들기로 결정했습니다. 이 프로젝트는 React-Bootstrap을 사용하여 웹 사이트의 스타일을 지정했기 때문에 전용.css 파일이 전혀 필요 없이 내 변경 사항에도 사용했습니다.
Cancel 및 Save 편집 워크플로에 두 개의 버튼이 있는 모달을 추가했습니다.


요청에 따라 비어 있을 수 없도록 사용자 이름에 유효성 검사를 추가했습니다.


이 시점에서 양식이 UI를 통해 제대로 제출되는지 확인하기 위해 약간 테스트했습니다. 그런 다음 Cancel 버튼을 추가로 작업하고 사용자가 종료할지 확인하는 경고 프롬프트를 추가했습니다.

EditProfileModal.jsx를 설정한 후 프로필 페이지와 통합할 수 있었습니다.

<Button variant="primary" onClick={handleShow}>
        Edit
</Button>
<EditProfileModal
        show={showModal}
        handleClose={handleClose}
></EditProfileModal>

검토 및 병합

빠른 온전성 테스트 후 변경 사항을 푸시하고 Awesome-Adoption에 풀 리퀘스트를 생성했습니다.

병합된 풀 요청에 대한 링크: #210

모든 변경 사항을 강조 표시하고 풀 리퀘스트에 스크린샷을 포함하여 완료된 작업을 강조 표시했습니다. 검토를 위해 문제에 대해 언급한 후 repo 관리자는 변경 사항 없이 내 풀 요청을 수락했습니다.

Hacktoberfest 2021에 대한 네 번째 기여

이것은 Hacktoberfest 2021에 대한 저의 네 번째 기여였습니다! 처음으로 오픈 소스 프로젝트에 기여하면서 확실히 많은 것을 배웠습니다. 해결해야 할 문제를 찾는 동안 열린 마음가짐을 갖는 것이 특히 중요하다는 것을 알았습니다.
작업할 이상적인 이슈를 기다리며 많은 시간을 보냈지만 오픈소스 작업의 핵심은 이슈를 고르는 동안 열린 마음을 갖는 것임을 깨달았습니다. 익숙한 영역을 벗어나 흥미로운 프로젝트를 발견할 수 있을 뿐만 아니라 재미있고 보람 있는 경험이기도 합니다.