feat: Cover, Title UI 추가

Author: 01-binary

packages/notion-to-jsx/src/components/Cover/index.tsx

@@ -0,0 +1,12 @@
+import { cover } from './styles.css';
+
+interface CoverProps {
+  src: string;
+  alt: string;
+}
+
+const Cover = ({ src, alt }: CoverProps) => {
+  return <img src={src} alt={alt} className={cover} />;
+};
+
+export default Cover;

packages/notion-to-jsx/src/components/Cover/styles.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const cover = style({
+  width: '100%',
+  maxWidth: '56.25rem',
+  height: '30vh',
+  display: 'block',
+  objectFit: 'cover',
+  objectPosition: 'center 50%',
+  borderRadius: '1.5rem',
+});

packages/notion-to-jsx/src/components/Renderer/index.tsx

@@ -7,14 +7,18 @@ import { ListBlocksRenderer } from './components/List';
 import { BlockRenderer } from './components/Block';
 import '../../styles/reset.css';
 import { darkTheme, lightTheme } from '../../styles/theme.css';
+import Title from '../Title';
+import Cover from '../Cover';
 
 interface Props {
   blocks: NotionBlock[];
+  title?: string;
+  cover?: string;
   isDarkMode?: boolean;
   onBlockFocus?: (index: number) => void;
 }
 export const Renderer: React.FC<Props> = React.memo(
-  ({ blocks, isDarkMode = false, onBlockFocus }) => {
+  ({ blocks, isDarkMode = false, title, cover, onBlockFocus }) => {
     const theme = isDarkMode ? darkTheme : lightTheme;
     const [focusedIndex, setFocusedIndex] = useState<number>(-1);
 
@@ -86,12 +90,16 @@ export const Renderer: React.FC<Props> = React.memo(
     }, [blocks, handleBlockFocus]);
 
     return (
-      <article
-        className={`${theme} ${container}`}
-        aria-label="Notion page content"
-      >
-        {renderedBlocks}
-      </article>
+      <>
+        {cover && <Cover src={cover} alt={title || 'Notion page content'} />}
+        <article
+          className={`${theme} ${container}`}
+          aria-label={title || 'Notion page content'}
+        >
+          {title && <Title title={title} />}
+          {renderedBlocks}
+        </article>
+      </>
     );
   }
 );

packages/notion-to-jsx/src/components/Title/index.tsx

@@ -0,0 +1,10 @@
+import { Heading1 } from '../Renderer/components/Typography';
+
+interface Props {
+  title: string;
+}
+const Title = ({ title }: Props) => {
+  return <Heading1>{title}</Heading1>;
+};
+
+export default Title;

packages/notion-to-jsx/src/styles/theme.css.ts

@@ -61,6 +61,8 @@ export const vars = createThemeContract({
     sm: null,
     md: null,
     lg: null,
+    xl: null,
+    xxl: null,
   },
   shadows: {
     sm: null,
@@ -114,6 +116,8 @@ const commonThemeValues = {
     sm: '0.25rem',
     md: '0.375rem',
     lg: '0.5rem',
+    xl: '0.75rem',
+    xxl: '1rem',
   },
 };