뷰포트 및 UI 컴포넌트

import {
  Box, Button, Badge, Inline, Banner,
} from '@stripe/ui-extension-sdk/ui';
import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const CustomerDetailView = ({ environment, userContext }: ExtensionContextValue) => {
  return (
    <Box css={{ padding: 'large' }}>
      <Inline css={{ fontWeight: 'bold', marginBottom: 'medium' }}>
        Brevo 연락처 동기화
      </Inline>
      <Banner
        title="Brevo에 동기화됨"
        description="이 고객은 Brevo에 동기화되어 있습니다."
        variant="default"
      />
      <Button type="primary" css={{ marginTop: 'medium' }}>
        Brevo에 동기화
      </Button>
    </Box>
  );
};