만들려고 하는것

• Rent Modal은 우리가 Airbnb 방을 예약하기 위해 작성하는 Form 이다.

1. Rent Modal을 관리하는 상태를 다루는 zustand store를 하나 만든다.

   import { create } from 'zustand';
   
   interface RegisterModalStore {
     isOpen: boolean;
     onOpen: () => void;
     onClose: () => void;
   }
   
   const useRegisterModal = create<RegisterModalStore>((set) => ({
     isOpen: false,
     onOpen: () => set({ isOpen: true }),
     onClose: () => set({ isOpen: false }),
   }));
   
   export default useRegisterModal;
   

2. 기본적인 Modal을 만들고, 그것을 import 하여 RentModal을 만든다. (아직은 기본적인 Modal임)

   'use client';
   
   import Modal from './Modal';
   import useRentModal from '@/app/hooks/useRentModal';
   
   function RentModal() {
     const rentModal = useRentModal();
   
     return (
       <Modal
         isOpen={rentModal.isOpen}
         title='Airbnb your home'
         onClose={rentModal.onClose}
         onSubmit={rentModal.onClose}
         actionLabel='Submit'
       ></Modal>
     );
   }
   
   export default RentModal;
   

3. Layout.tsx에서 <RentModal/>을 import하여 선언해 놓는다.

만들려고 하는 것 2

• 약간 예약 폼처럼 단계별로 input을 받아서 최종 Step에 제출을 하는 방향으로 가려고한다.
• 처음으로 Enum이라는 것을 써봤다.

enum STEPS {
  CATEGORY = 0,
  LOCATION = 1,
  INFO = 2,
  IMAGES = 3,
  DESCRIPTION = 4,
  PRICE = 5,
}

• step에 따라서 다른 화면을 보여줄 예정이다. 이럴때 Enum을 쓰면되는것같다
• Step 별화면을 다르게 보여주는 방식은 최초 let bodyContent를 선언해놓고, STEP이 바뀔때마다 다시 bodycontent에 jsx를 할당해주는 방식

let bodyContent = (
    <div className='flex flex-col gap-8'>
      <Heading
        title='Which of these best describes your place?'
        subtitle='Pick a category'
      />
      <div className='grid grid-cols-1 md:grid-cols-2 gap-3 max-h-[50vh] overflow-y-auto'>
        {categories.map((item) => (
          <div key={item.label} className='col-span-1'>
            <CategoryInput
              onClick={(category) => setCustomValue('category', category)}
              selected={category === item.label}
              label={item.label}
              icon={item.icon}
            />
          </div>
        ))}
      </div>
    </div>
  );

// 2번째 스텝일때
if (step === STEPS.LOCATION) {
    bodyContent = (
      <div className='flex flex-col gap-8'>
        <Heading
          title='Where is your place located'
          subtitle='Help guests find you!'
        />
        <CountrySelect />
      </div>
    );
  }