App in TOSS

function App() {
  const [page, setPage] = useState('intro');
  const [category, setCategory] = useState<string>('');
  const [detail, setDetail] = useState<string>('');
  const [destination, setDestination] = useState<{ name: string; phone: string; address: string; detail: string }>({
    name: '',
    phone: '',
    address: '',
    detail: '',
  });
  const [origin, setOrigin] = useState<string>('');
  const [openModalReceipt, setOpenModalReceipt] = useState<boolean>(false);
  return (
    <div>
      {page === 'intro' && <Intro onNext={() => setPage('selectCategory')} />}
      {page === 'selectCategory' && (
        <SelectCategory
          onNext={(category) => {
            setCategory(category);
            setPage('selectDetail');
          }}
          onBack={() => setPage('intro')}
        />
      )}
      {page === 'selectDetail' && (
        <SelectDetail
          category={category}
          onNext={(selectedDetail) => {
            setDetail(selectedDetail);
            setPage('destination');
          }}
          onBack={() => setPage('selectCategory')}
        />
      )}
      {page === 'destination' && (
        <Destination
          onNext={(destinationName, destinationPhone, destinationAddress, destinationDetail) => {
            setDestination({
              name: destinationName,
              phone: destinationPhone,
              address: destinationAddress,
              detail: destinationDetail,
            });
            setPage('origin');
          }}
          onBack={() => setPage('selectDetail')}
        />
      )}
      {page === 'origin' && (
        <Origin
          onNext={() => setOpenModalReceipt(true)}
          onBack={() => setPage('destination')}
        />
      )}
      {openModalReceipt && (
        <ReceiptModal
          onClose={() => setOpenModalReceipt(false)}
          onNext={() => {
            setPage('complete');
            setOpenModalReceipt(false);
          }}
        />
      )}
      {page === 'complete' && <Complete />}
    </div>
  );
}