yisu-kim/pre-onboarding-solarconnect-2

프리온보딩 코스 SolarConnect 기업 과제

View Demo · Original Team Repo

📋 과제 요구사항 보기

타이머
- [1, 6. 타이머]는 재활용이 가능한 Component로 구성합니다.
- [1. 타이머]는 “ko-KR” 지역시간 표기법으로 나타냅니다. (예> 2021년 7월 20일 화요일)
- [6. 타이머]는 “en-US” 지역시간 표기법으로 나타냅니다. (예> Tuesday July 20, 2021)
- 한국 표준시를 기준으로 나타냅니다.
입력
- 사용자의 입력을 받습니다.
- 입력 데이터의 형식은 “숫자, 숫자, 숫자…” 입니다. (예> 1,2,3,4)
- 잘못된 형식의 입력데이터는 예외처리하여 사용합니다.
시작
- 사용자가 버튼을 누르면 소팅이 시작됩니다.
- [4. 결과 필드]에 바로 노출 되고 3초 후에 [5. 결과 필드]에 결과가 노출 됩니다.
결과
- 결과 데이터의 형식은 “숫자, 숫자, 숫자…” 입니다. (예> 1, 2, 3, 4)
- [4. 결과 필드]에서는 오름차순 결과를 나타냅니다.
- [5. 결과 필드]에서는 내림차순 결과를 나타냅니다.
- 알고리즘은 소팅알고리즘을 사용하지 않고, 본인이 구현할 수 있는 정렬 방법으로 직접 구현합니다.
기타 조건
- ReactJS로 구현합니다.
- 과제를 위한 추가적인 패키지 설치는 자유입니다.
- 레이아웃은 그림을 참고하되, UI 및 UX는 작성자 편의에 맞게 구현합니다.
- 상기 조건을 제외한 모든 부분들은 작성자 편의에 맞게 구현합니다.

About The Project

To install packages:

npm install

To serve the app:

npm start

제가 개발에 참여한 기능은 ✅로 표시했습니다.

✅ 타이머
- toLocaleDateString, toLocaleTimeString 함수로 locale 날짜 및 시간 util 작성
- 현재 시각을 표시하는 한국어/영어 타이머 구현
✅ 입력 필드
- 입력 데이터는 정수로 가정하고 쉼표(,) 및 모든 문자열로 숫자를 구분
- 숫자는 두 개 이상 입력하도록 검증
✅ 시작 버튼
- Sort 버튼 클릭 시 정렬 시작
결과 필드
- 입력된 데이터는 ex) 1, 9, 45, 3, 2 와 같이 구분되어 나타남
- 버블정렬을 이용하여 정렬 기능 구현
- 오름차순, 내림차순 순서로 렌더링되어 화면에 나타남
- ✅ 내림차순 결과 렌더링 3초 딜레이