Resizable

// 컬럼 정의
() => {
	const defaultStyle = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '24px',
    height: '100%'
  }
  const fontWeight = { fontWeight: 600 }
  return (
    <Resizable.Root
      direction='horizontal'
      style={{
        maxWidth: '28rem',
        borderRadius: '0.5rem',
        border: '1px solid #d1d5db',
        minWidth: '450px',
        minHeight: '370px',
        display: 'flex',
        flexDirection: 'row'
      }}
    >
      <Resizable.Contents defaultSize={50}>
        <div
          style={{
            ...defaultStyle,
            height: '200px'
          }}
        >
          <span style={fontWeight}>One</span>
        </div>
      </Resizable.Contents>
      <Resizable.Trigger />
      <Resizable.Contents defaultSize={50}>
        <Resizable.Root
          direction='vertical'
          style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
        >
          <Resizable.Contents defaultSize={25}>
            <div style={defaultStyle}>
              <span style={fontWeight}>Two</span>
            </div>
          </Resizable.Contents>
          <Resizable.Trigger />
          <Resizable.Contents defaultSize={75}>
            <div style={defaultStyle}>
              <span style={fontWeight}>Three</span>
            </div>
          </Resizable.Contents>
        </Resizable.Root>
      </Resizable.Contents>
    </Resizable.Root>
  )
}