Requirement 필수 제출 사항

• 원티드 이력서
• 과제 (아래에 자세한 안내가 있습니다.)
  • Github Repository 주소
  • README 파일
    • 구현한 방법과 이유에 대한 간략한 내용
    • 구현하면서 어려웠던 점과 해결 방법 (Error Handling Log)
    • 자세한 실행 방법

과제 안내

• 아래에 여섯 가지의 프론트엔드에서 자주 사용하는 컴포넌트 예시 GIF 가 있습니다.

  • Toggle.js
  • Modal.js
  • Tab.js
  • Tag.js
  • AutoComplete.js
  • ClickToEdit.js

• 여섯 가지의 예시 중에서 2가지 이상을 구현한 결과물을 Github Repository 하나에 담아서 제출하세요.

• 2가지는 필수이며, 그 이상을 구현하실 경우 가산점이 있습니다.

• Create React App 을 활용합니다.

• CSS는 어떤 것을 써도 괜찮습니다. (Tailwind, Styled-component 등)

• 하지만 기능 구현에 직접적으로 영향을 주는 라이브러리는 사용하실 수 없습니다.

• Github Repository 안내

  • Github Repository 이름: wanted_pre_onboarding
  • 꼭 public 으로 생성하세요.
  • Add a README file 버튼을 클릭해서 README 파일을 생성하세요.

  

  • Repository 를 Clone 합니다.

  • npx create-react-app custom-component 명령어를 이용해 React 프로젝트를 생성합니다.

  • src 폴더 내부의 폴더 구조는 다음과 같이 생성합니다. 큰 구조는 다음 예시와 같이 component 폴더 내부에 컴포넌트 파일들을 담아주시면 되고, 나머지는 CSS 선택에 따라 자유롭게 구성해 주시면 되겠습니다.

    (예시)
    /src
    	App.js
    	App.css
    	/component
    		Toggle.js
    		Modal.js
    		Tab.js
    		Tag.js
    		AutoComplete.js
    		ClickToEdit.js
    

  • App.js 에서 모든 컴포넌트들을 눈으로 확인할 수 있도록 렌더링까지 완료해 주세요.

사용 권장 기술

• JavaScript
• HTML5
• React
• CSS

애플리케이션 예시 이미지

Toggle