# Component/Modal/FloatingModal

> Props: component-modal-floatingmodal.props.txt

## Examples


### Bottom Left

```tsx
{
  render: (args) => {
    const [show, setShow] = useState(args.opened || false);
    const handleClose = () => setShow(false);

    useEffect(() => {
      if (args.opened !== undefined) {
        setShow(args.opened);
      }
    }, [args.opened]);

    return (
      <Stack direction='row' height={500}>
        <div
          css={[
            `
            position: fixed;
            ${args.position?.split('-')[0] || 'bottom'}: 24px;
            ${args.position?.split('-')[1] || 'right'}: 24px;
          `,
          ]}
        >
          <FloatingModal
            {...args}
            opened={show}
            trigger={
              <FloatingButton
                opened={show}
                onClick={() => {
                  setShow(true);
                }}
                startIcon={<IconColoredRobot />}
              >
                파트너센터 챗봇
              </FloatingButton>
            }
            backButton
            onClose={() => {
              handleClose();
              console.log('close');
            }}
            onCancel={() => {
              console.log('cancel');
              handleClose();
            }}
            onConfirm={handleClose}
          >
            <Stack direction='column'>
              <BaseText kind='Heading_18_Bold'>타이틀을 입력하세요.</BaseText>
              <BaseText>컴포넌트 연결을 끊고 사용하세요.</BaseText>
            </Stack>
          </FloatingModal>
        </div>
      </Stack>
    );
  },
  args: {
    title: 'Title',
    position: 'bottom-left',
    confirmText: 'Label',
    cancelText: 'Label',
    width: 960
  }
}
```

### Bottom Right

```tsx
{
  render: (args) => {
    const [show, setShow] = useState(args.opened || false);
    const handleClose = () => setShow(false);

    useEffect(() => {
      if (args.opened !== undefined) {
        setShow(args.opened);
      }
    }, [args.opened]);

    return (
      <Stack direction='row' height={500}>
        <div
          css={[
            `
            position: fixed;
            ${args.position?.split('-')[0] || 'bottom'}: 24px;
            ${args.position?.split('-')[1] || 'right'}: 24px;
          `,
          ]}
        >
          <FloatingModal
            {...args}
            opened={show}
            trigger={
              <FloatingButton
                opened={show}
                onClick={() => {
                  setShow(true);
                }}
                startIcon={<IconColoredRobot />}
              >
                파트너센터 챗봇
              </FloatingButton>
            }
            backButton
            onClose={() => {
              handleClose();
              console.log('close');
            }}
            onCancel={() => {
              console.log('cancel');
              handleClose();
            }}
            onConfirm={handleClose}
          >
            <Stack direction='column'>
              <BaseText kind='Heading_18_Bold'>타이틀을 입력하세요.</BaseText>
              <BaseText>컴포넌트 연결을 끊고 사용하세요.</BaseText>
            </Stack>
          </FloatingModal>
        </div>
      </Stack>
    );
  },
  args: {
    title: 'Title',
    position: 'bottom-right',
    confirmText: 'Label',
    cancelText: 'Label',
    width: 960
  }
}
```

### Top Left

```tsx
{
  render: (args) => {
    const [show, setShow] = useState(args.opened || false);
    const handleClose = () => setShow(false);

    useEffect(() => {
      if (args.opened !== undefined) {
        setShow(args.opened);
      }
    }, [args.opened]);

    return (
      <Stack direction='row' height={500}>
        <div
          css={[
            `
            position: fixed;
            ${args.position?.split('-')[0] || 'bottom'}: 24px;
            ${args.position?.split('-')[1] || 'right'}: 24px;
          `,
          ]}
        >
          <FloatingModal
            {...args}
            opened={show}
            trigger={
              <FloatingButton
                opened={show}
                onClick={() => {
                  setShow(true);
                }}
                startIcon={<IconColoredRobot />}
              >
                파트너센터 챗봇
              </FloatingButton>
            }
            backButton
            onClose={() => {
              handleClose();
              console.log('close');
            }}
            onCancel={() => {
              console.log('cancel');
              handleClose();
            }}
            onConfirm={handleClose}
          >
            <Stack direction='column'>
              <BaseText kind='Heading_18_Bold'>타이틀을 입력하세요.</BaseText>
              <BaseText>컴포넌트 연결을 끊고 사용하세요.</BaseText>
            </Stack>
          </FloatingModal>
        </div>
      </Stack>
    );
  },
  args: {
    title: 'Title',
    position: 'top-left',
    confirmText: 'Label',
    cancelText: 'Label',
    width: 960
  }
}
```

### Top Right

```tsx
{
  render: (args) => {
    const [show, setShow] = useState(args.opened || false);
    const handleClose = () => setShow(false);

    useEffect(() => {
      if (args.opened !== undefined) {
        setShow(args.opened);
      }
    }, [args.opened]);

    return (
      <Stack direction='row' height={500}>
        <div
          css={[
            `
            position: fixed;
            ${args.position?.split('-')[0] || 'bottom'}: 24px;
            ${args.position?.split('-')[1] || 'right'}: 24px;
          `,
          ]}
        >
          <FloatingModal
            {...args}
            opened={show}
            trigger={
              <FloatingButton
                opened={show}
                onClick={() => {
                  setShow(true);
                }}
                startIcon={<IconColoredRobot />}
              >
                파트너센터 챗봇
              </FloatingButton>
            }
            backButton
            onClose={() => {
              handleClose();
              console.log('close');
            }}
            onCancel={() => {
              console.log('cancel');
              handleClose();
            }}
            onConfirm={handleClose}
          >
            <Stack direction='column'>
              <BaseText kind='Heading_18_Bold'>타이틀을 입력하세요.</BaseText>
              <BaseText>컴포넌트 연결을 끊고 사용하세요.</BaseText>
            </Stack>
          </FloatingModal>
        </div>
      </Stack>
    );
  },
  args: {
    title: 'Title',
    position: 'top-right',
    confirmText: 'Label',
    cancelText: 'Label',
    width: 960
  }
}
```