const [gotALottoCount, setGotALottoCount] = useState(false)

const onSubmitPurchaseAmount = (e: any) => {
  e.preventDefault()
  setGotALottoCount(false)

  //...
  setGotALottoCount(true)
}

return
{
  gotALottoCount && (
    <form onSubmit={onSubmitManualLottoCount}>
      <label htmlFor="manualLottoCountInput">
        수동으로 구매할 로또 수를 입력해주세요.{' '}
      </label>
      <input
        id="manualLottoCountInput"
        type="text"
        value={manualLottoCount}
        onChange={onChangeManualLottoCount}
      ></input>
      <button type="submit">입력</button>
    </form>
  )
}

const [purchaseAmountError, setPurchaseAmountError] = useState('')

return
{
  purchaseAmountError === 'PURCHASE_AMOUNT_IS_BLANK_ERROR' && (
    <div style={{ color: 'red' }}>구입 금액을 입력하지 않았습니다.</div>
  )
}
{
  purchaseAmountError === 'PURCHASE_AMOUNT_IS_NOT_NUMBER_ERROR' && (
    <div style={{ color: 'red' }}>구입 금액은 숫자로 입력해주세요.</div>
  )
}
{
  purchaseAmountError ===
    'PURCHASE_AMOUNT_IS_LESS_THAN_MINIMUM_AMOUNT_ERROR' && (
    <div style={{ color: 'red' }}>
      로또 최소 구입 가격은 {LOTTO_PRICE}원입니다.
    </div>
  )
}

// App.tsx

import { validatePurchaseAmountInput } from './modules/formValidator'

const onSubmitPurchaseAmount = (e: any) => {
  e.preventDefault()
  setPurchaseAmountError('')
  setGotALottoCount(false)

  const validatedPurchaseAmount = validatePurchaseAmountInput(
    purchaseAmount,
    LOTTO_PRICE
  )
  if (validatedPurchaseAmount === 'PURCHASE_AMOUNT_IS_BLANK_ERROR') {
    return setPurchaseAmountError('PURCHASE_AMOUNT_IS_BLANK_ERROR')
  }
  if (validatedPurchaseAmount === 'PURCHASE_AMOUNT_IS_NOT_NUMBER_ERROR') {
    return setPurchaseAmountError('PURCHASE_AMOUNT_IS_NOT_NUMBER_ERROR')
  }
  if (
    validatedPurchaseAmount ===
    'PURCHASE_AMOUNT_IS_LESS_THAN_MINIMUM_AMOUNT_ERROR'
  ) {
    return setPurchaseAmountError(
      'PURCHASE_AMOUNT_IS_LESS_THAN_MINIMUM_AMOUNT_ERROR'
    )
  }
  const _purchaseAmount = Number(validatedPurchaseAmount)
  const lottoCount = Math.floor(_purchaseAmount / LOTTO_PRICE)
  setLottoCount(lottoCount)
  setGotALottoCount(true)
}

// formValidator.ts

export const validatePurchaseAmountInput = (
  purchaseAmount: string,
  lottoPrice: number
) => {
  let _purchaseAmount = purchaseAmount.trim()

  if (_purchaseAmount.length === 0) {
    return 'PURCHASE_AMOUNT_IS_BLANK_ERROR'
  }

  const purchaseAmountHasString =
    _purchaseAmount && _purchaseAmount.match(/\D/g)
  if (purchaseAmountHasString !== null && purchaseAmountHasString.length >= 0) {
    return 'PURCHASE_AMOUNT_IS_NOT_NUMBER_ERROR'
  }
  if (_purchaseAmount.length < String(lottoPrice).length) {
    return 'PURCHASE_AMOUNT_IS_LESS_THAN_MINIMUM_AMOUNT_ERROR'
  }

  return _purchaseAmount
}

export class Lotto {
  numbers: number[] = []

  constructor(numbers: number[]) {
    this.numbers = numbers
  }
}

const _myLottos: Lotto[] = []
for (let i = 0; i < Number(manualLottoCount); i++) {
  const _manualLotto = manualLottos[i].split(',')
  const manualLottoNumbers = _manualLotto.map(lottoNumber =>
    Number(lottoNumber)
  )
  const sortedManualLottoNumbers = manualLottoNumbers.sort((a, b) => a - b)
  _myLottos.push(new Lotto(sortedManualLottoNumbers))
}

import { Lotto } from './Lotto'

export class WinningLotto {
  lotto: Lotto
  bonusNo: number = 0

  constructor(lotto: Lotto, bonusNo: number) {
    this.lotto = lotto
    this.bonusNo = bonusNo
  }

  match(userLotto: Lotto) {
    let count = 0
    let bonusCount = 0
    this.lotto.numbers.map(number => {
      userLotto.numbers.indexOf(number) >= 0 && count++
    })
    userLotto.numbers.indexOf(this.bonusNo) >= 0 && bonusCount++
    if (count === 6) return 'FIRST'
    if (count === 5 && bonusCount) return 'SECOND'
    if (count + bonusCount === 5) return 'THIRD'
    if (count + bonusCount === 4) return 'FOURTH'
    if (count + bonusCount === 3) return 'FIFTH'
    return 'MISS'
  }
}

const RANKS = {
  FIRST: 0,
  SECOND: 0,
  THIRD: 0,
  FOURTH: 0,
  FIFTH: 0,
  MISS: 0,
}

for (let i = 0; i < myLottos.length; i++) {
  RANKS[winningLotto.match(myLottos[i])]++
}

// lottoFunctions.ts
import { Lotto } from './Lotto'

export const makeAutomaticLotto = (
  lottoCount: number,
  LOTTO_NUMBERS: number[],
  LOTTO_COUNT: number
) => {
  const lottos: Lotto[] = []
  for (let i = 0; i < lottoCount; i++) {
    lottos.push(
      new Lotto(
        setRandomNumbers(LOTTO_NUMBERS, LOTTO_COUNT).sort(
          (a: number, b: number) => a - b
        )
      )
    )
  }
  return lottos
}

export const setRandomNumbers = (
  LOTTO_NUMBERS: number[],
  LOTTO_COUNT: number
) => {
  let takenLottoNumbers = [...LOTTO_NUMBERS]
  const resultNumbers: number[] = []
  for (let j = 0; j < LOTTO_COUNT; j++) {
    const randomNumber = Math.floor(
      Math.random() * (LOTTO_NUMBERS[LOTTO_NUMBERS.length - 1] - j)
    )
    const chosen = takenLottoNumbers.splice(randomNumber, 1)[0]
    resultNumbers.push(Number(chosen))
  }
  return resultNumbers
}

// WinningLotto.test.ts

import { WinningLotto } from './WinningLotto'
import { Lotto } from './Lotto'

describe('WinningLotto객체 match메소드', () => {
  // given
  const FirstLotto = new Lotto([1, 2, 3, 4, 5, 6])
  const winningLotto = new WinningLotto(FirstLotto, 7)
  it('WinningLotto객체에 6개의 숫자 모두 맞을 경우, 1등을 리턴하는지 확인', () => {
    // when
    const myLotto = new Lotto([1, 2, 3, 4, 5, 6])
    const result = winningLotto.match(myLotto)
    // then
    expect(result).toStrictEqual('FIRST')
  })
  it('WinningLotto객체에 5개의 숫자, 1개의 보너스볼이 맞을 경우, 2등을 리턴하는지 확인', () => {
    // when
    const myLotto = new Lotto([1, 2, 3, 4, 5, 7])
    const result = winningLotto.match(myLotto)
    // then
    expect(result).toStrictEqual('SECOND')
  })
  it('WinningLotto객체에 5개의 숫자만 맞을 경우, 3등을 리턴하는지 확인', () => {
    // when
    const myLotto = new Lotto([1, 2, 3, 4, 5, 8])
    const result = winningLotto.match(myLotto)
    // then
    expect(result).toStrictEqual('THIRD')
  })
  it('WinningLotto객체에 4개의 숫자만 맞을 경우, 4등을 리턴하는지 확인', () => {
    // when
    const myLotto = new Lotto([1, 2, 3, 4, 8, 9])
    const result = winningLotto.match(myLotto)
    // then
    expect(result).toStrictEqual('FOURTH')
  })
  it('WinningLotto객체에 3개의 숫자만 맞을 경우, 5등을 리턴하는지 확인', () => {
    // when
    const myLotto = new Lotto([1, 2, 3, 8, 9, 10])
    const result = winningLotto.match(myLotto)
    // then
    expect(result).toStrictEqual('FIFTH')
  })
  it('WinningLotto객체에 맞는 숫자가 3개도 없을 경우 MISS를 리턴하는지 확인', () => {
    // when
    const myLotto = new Lotto([8, 9, 10, 11, 12, 13])
    const result = winningLotto.match(myLotto)
    // then
    expect(result).toStrictEqual('MISS')
  })
})

// App.tsx

import { validatePurchaseAmountInput } from './modules/formValidator'

const [purchaseAmountIsBlankError, setPurchaseAmountIsBlankError] = useState(
  false
)
const [
  purchaseAmountIsNotNumberError,
  setPurchaseAmountIsNotNumberError,
] = useState(false)
const [
  purchaseAmountIsLessThanMinimumAmountError,
  setPurchaseAmountIsLessThanMinimumAmountError,
] = useState(false)

const onSubmitPurchaseAmount = (e: any) => {
  e.preventDefault()
  setPurchaseAmountIsBlankError(true)
  setPurchaseAmountIsNotNumberError(true)
  setPurchaseAmountIsLessThanMinimumAmountError(true)

  const validatedPurchaseAmount = validatePurchaseAmountInput(
    purchaseAmount,
    LOTTO_PRICE
  )
  if (validatedPurchaseAmount === 'PURCHASE_AMOUNT_IS_BLANK_ERROR') {
    return setPurchaseAmountIsBlankError(true)
  }
  if (validatedPurchaseAmount === 'PURCHASE_AMOUNT_IS_NOT_NUMBER_ERROR') {
    return setPurchaseAmountIsNotNumberError(true)
  }
  if (
    validatedPurchaseAmount ===
    'PURCHASE_AMOUNT_IS_LESS_THAN_MINIMUM_AMOUNT_ERROR'
  ) {
    return setPurchaseAmountIsLessThanMinimumAmountError(true)
  }
}

// App.tsx

import { validatePurchaseAmountInput } from './modules/formValidator'

const [purchaseAmountError, setPurchaseAmountError] = useState('')

const onSubmitPurchaseAmount = (e: any) => {
  e.preventDefault()
  setPurchaseAmountError('')

  const validatedPurchaseAmount = validatePurchaseAmountInput(
    purchaseAmount,
    LOTTO_PRICE
  )
  if (validatedPurchaseAmount === 'PURCHASE_AMOUNT_IS_BLANK_ERROR') {
    return setPurchaseAmountError('PURCHASE_AMOUNT_IS_BLANK_ERROR')
  }
  if (validatedPurchaseAmount === 'PURCHASE_AMOUNT_IS_NOT_NUMBER_ERROR') {
    return setPurchaseAmountError('PURCHASE_AMOUNT_IS_NOT_NUMBER_ERROR')
  }
  if (
    validatedPurchaseAmount ===
    'PURCHASE_AMOUNT_IS_LESS_THAN_MINIMUM_AMOUNT_ERROR'
  ) {
    return setPurchaseAmountError(
      'PURCHASE_AMOUNT_IS_LESS_THAN_MINIMUM_AMOUNT_ERROR'
    )
  }
}