CorePortal

import { CorePortal } from '@featuring-corp/components';

<CorePortal containerId="my-portal">
  <div>포털 내용</div>
</CorePortal>

import { CorePortal } from '@featuring-corp/components';

<CorePortal>
  <div>포털 내용 (기본 containerId: "portal")</div>
</CorePortal>

import { useState } from 'react';
import { CorePortal } from '@featuring-corp/components';
import { CoreModal, CoreButton } from '@featuring-corp/components';

const [open, setOpen] = useState(false);

<>
  <CoreButton text="모달 열기" onClick={() => setOpen(true)} />
  {open && (
    <CorePortal>
      <CoreModal
        size="md"
        title="타이틀"
        handleClose={() => setOpen(false)}
      >
        <div>모달 내용</div>
      </CoreModal>
    </CorePortal>
  )}
</>

import { useState, useRef } from 'react';
import { CorePortal } from '@featuring-corp/components';
import { CoreDropdown } from '@featuring-corp/components';

const [open, setOpen] = useState(false);
const ref = useRef(null);

<>
  <button ref={ref} onClick={() => setOpen(!open)}>
    드롭다운 열기
  </button>
  {open && (
    <CorePortal>
      <CoreDropdown
        open={open}
        handler={setOpen}
        placement="bottom-center"
        targetRef={ref}
      >
        <div>드롭다운 내용</div>
      </CoreDropdown>
    </CorePortal>
  )}
</>

import { CorePortal } from '@featuring-corp/components';

// HTML에 <div id="custom-portal"></div>가 있어야 함
<CorePortal containerId="custom-portal">
  <div>커스텀 포털 내용</div>
</CorePortal>