[Assignment 6] 솔라커넥트 - Sorting Machine

1. 타이머

• 재사용 가능한 Timer 컴포넌트 만들기
• 한국 표준 시 기준으로 타이머 생성
  “ko-KR” 지역시간 표기법 (예> 2021년 7월 20일 화요일),
  “en-US” 지역시간 표기법 (예> Tuesday July 20, 2021)

// Timer 컴포넌트
const Timer = ({ type }) => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setDate(new Date());
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <Wrapper type={type}>
      <h2>{dateLocalFunc(date, type)}</h2>
    </Wrapper>
  );
};

//utils/constant.js
export const DATE_LOCAL_OPTIONS_KR = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  timeZone: 'Asia/seoul',
};

//utils/date.js
export const dateLocalFunc = (date, type) =>
  type === 'KR'
    ? date.toLocaleString('ko-KR', DATE_LOCAL_OPTIONS_KR)
    : date.toLocaleString('en-US', DATE_LOCAL_OPTIONS_KR);

---

2. 입력

• 입력 데이터의 형식은 “숫자,숫자,숫자…” (예> 1,2,3,4)
• 잘못된 형식의 입력 데이터는 예외처리 필요

//utils/regex.js
export const inputRegEx = /^(([0-9])+[\s]?,[\s]?)*([0-9]+)$/;

const inputValidator = (str) => setInputError(!inputRegEx.test(str));

const onInputChange = (e) => {
  setInputTxt(e.target.value);
  inputValidator(e.target.value);
};

const onInputKeyPress = (e) => {
  if (e.key === 'Enter') {
    onSort();
  }
};

//생략..
//jsx 부분
<InputNums
  value={inputTxt}
  ref={inputRef}
  onChange={onInputChange}
  onKeyPress={onInputKeyPress}
  />

<Error isError={inputError && inputTxt} />

---

3. 시작 버튼 및 결과

• 사용자가 시작 버튼을 누르면 소팅이 시작.
• 오름차순 결과가 바로 보여지고, 3초 후 내림차순 결과 보여주기
• 결과 데이터의 형식은 “숫자, 숫자, 숫자…” (예> 1, 2, 3, 4)

//utils/stringToArray.js
export const stringToArray = (str) =>
  str
    .trim()
    .split(',')
    .map((str) => parseInt(str));

const onSort = () => {
  const target = stringToArray(inputTxt);

  setAscend('Loading...');
  setDescend('Loading...');

  new Promise((resolve, _reject) => {
    setAscend(bubbleSort(target, 'asc').join(', '));
    btnRef.current.disabled = true;
    inputRef.current.disabled = true;
    setTimeout(() => {
      resolve();
    }, 3000);
  }).then(() => {
    setDescend(bubbleSort(target, 'desc').join(', '));
    btnRef.current.disabled = false;
    inputRef.current.disabled = false;
  });
};

//생략..
//jsx 부분
<StartButton
  type="button"
  ref={btnRef}
  disabled={inputError}
  onClick={onSort}>
  시작 버튼
</StartButton>

• 알고리즘은 소팅알고리즘(sort)을 사용하지 않고, 본인이 구현할 수 있는 정렬 방법으로 직접 구현

//utils/constant.js
export const SORT = {
  ASC: 'asc',
  DESC: 'desc',
};

export const bubbleSort = (arr, sortType) => {
  let result = [...arr];

  for (let i = 0; i < result.length - 1; i++) {
    for (let j = 0; j < result.length - i; j++) {
      if (
        sortType === SORT.ASC
          ? result[j] > result[j + 1]
          : result[j] < result[j + 1]
      ) {
        [result[j], result[j + 1]] = [result[j + 1], result[j]];
      }
    }
  }

  return result;
};