카운터 만들기 UI

생각해야할것

• RentModal의 Step 3
• 비슷한 카운터 UI
• 각각의 value가 독립적으로 존재해야함.

Counter 컴포넌트의 역할

• 각각의 Counter 들은 react-hook-form으로부터 value를 전달 받는다.

  • roomCount
  • bathroomCount
  • guestCount

• 각각의 Counter들은 react-hook-form으로부터 onChange를 전달 받는다.

  • roomCount
  • bathroomCount
  • guestCount

• value를 react-hook-form의 onChange 함수에서 바꾼다.

  const onAdd = useCallback(() => {
      onChange(value + 1);
    }, [onChange, value]);
  
    const onReduce = useCallback(() => {
      if (value === 1) {
        return;
      }
  
      onChange(value - 1);
    }, [onChange, value]);
  

RentModal의 세번째 스텝

// 3번째 스텝
  if (step === STEPS.INFO) {
    bodyContent = (
      <div className='flex flex-col gap-8'>
        <Heading
          title='Share some basic about your place'
          subtitle='What amenities do you have?'
        />
        <Counter
          title='Guests'
          subtitle='How many guest do you allow?'
          value={guestCount}
          onChange={(value) => setCustomValue('guestCount', value)}
        />
        <hr />
        <Counter
          title='Rooms'
          subtitle='How many Rooms do you have'
          value={roomCount}
          onChange={(value) => setCustomValue('roomCount', value)}
        />
        <hr />
        <Counter
          title='Bathrooms'
          subtitle='How many Bathroom do you have'
          value={bathroomCount}
          onChange={(value) => setCustomValue('bathroomCount', value)}
        />
      </div>
    );