refactor: 폴더 구조 개선, Typography, RichText migration

01-binary · 01-binary · commit fc5ab2d5350a · 2025-02-23T20:45:50.000+09:00
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Block/BlockRenderer.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Block/BlockRenderer.tsx
@@ -4,7 +4,7 @@ import {
   MemoizedRichText,
   MemoizedImage,
   MemoizedBookmark,
-} from '../../../MemoizedComponents';
+} from '../MemoizedComponents';
 import { CodeBlock } from '../Code';
 import { Heading1, Heading2, Heading3, Paragraph } from '../Typography';
 import { BookmarkCard, BookmarkLink, ImageWrapper } from '../Media';
@@ -67,44 +67,44 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
         </div>
       );
 
-    case 'code':
-      return (
-        <div {...blockProps}>
-          <CodeBlock
-            code={block.code.rich_text[0].text.content}
-            language={block.code.language}
-            caption={block.code.caption?.[0]?.plain_text}
-          />
-        </div>
-      );
+    // case 'code':
+    //   return (
+    //     <div {...blockProps}>
+    //       <CodeBlock
+    //         code={block.code.rich_text[0].text.content}
+    //         language={block.code.language}
+    //         caption={block.code.caption?.[0]?.plain_text}
+    //       />
+    //     </div>
+    //   );
 
-    case 'image':
-      return (
-        <ImageWrapper {...blockProps}>
-          <MemoizedImage
-            src={block.image.file?.url || block.image.external?.url}
-            alt={block.image.caption?.[0]?.plain_text || ''}
-          />
-          {block.image.caption && (
-            <figcaption>
-              <MemoizedRichText richTexts={block.image.caption} />
-            </figcaption>
-          )}
-        </ImageWrapper>
-      );
+    // case 'image':
+    //   return (
+    //     <ImageWrapper {...blockProps}>
+    //       <MemoizedImage
+    //         src={block.image.file?.url || block.image.external?.url}
+    //         alt={block.image.caption?.[0]?.plain_text || ''}
+    //       />
+    //       {block.image.caption && (
+    //         <figcaption>
+    //           <MemoizedRichText richTexts={block.image.caption} />
+    //         </figcaption>
+    //       )}
+    //     </ImageWrapper>
+    //   );
 
-    case 'bookmark':
-      return (
-        <BookmarkCard {...blockProps}>
-          <BookmarkLink
-            href={block.bookmark.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <MemoizedBookmark url={block.bookmark.url} />
-          </BookmarkLink>
-        </BookmarkCard>
-      );
+    // case 'bookmark':
+    //   return (
+    //     <BookmarkCard {...blockProps}>
+    //       <BookmarkLink
+    //         href={block.bookmark.url}
+    //         target="_blank"
+    //         rel="noopener noreferrer"
+    //       >
+    //         <MemoizedBookmark url={block.bookmark.url} />
+    //       </BookmarkLink>
+    //     </BookmarkCard>
+    //   );
 
     default:
       return null;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Bookmark/Bookmark.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Bookmark/Bookmark.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { type RichTextItem } from '../types';
-import RichTexts from './RichTexts';
+import { type RichTextItem } from '../../../../types';
+import RichTexts from '../RichText/RichTexts';
 
 interface OpenGraphData {
   title: string;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Bookmark/index.ts b/packages/notion-to-jsx/src/components/Renderer/components/Bookmark/index.ts
@@ -0,0 +1 @@
+export { default as Bookmark } from './Bookmark';
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Code/CodeBlock.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Code/CodeBlock.tsx
@@ -6,7 +6,7 @@ import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-tsx';
 
-import { MemoizedRichText } from '../../../MemoizedComponents';
+import { MemoizedRichText } from '../MemoizedComponents';
 import { CodeBlockWrapper } from './styles';
 import { RichTextItem } from '../../../../types';
 import { Caption } from '../Media';
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { RichTextItem } from '../types';
-import RichTexts from './RichTexts';
+import { RichTextItem } from '../../../../types';
+import RichTexts from '../RichText/RichTexts';
 
 export interface ImageProps {
   src: string;
@@ -46,7 +46,7 @@ const Caption = styled.figcaption`
   font-size: ${({ theme }) => theme.typography.fontSize.small};
 `;
 
-export const Image: React.FC<ImageProps> = ({
+const Image: React.FC<ImageProps> = ({
   src,
   alt,
   caption,
@@ -82,3 +82,5 @@ export const Image: React.FC<ImageProps> = ({
     </figure>
   );
 };
+
+export default Image;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Image/index.ts b/packages/notion-to-jsx/src/components/Renderer/components/Image/index.ts
@@ -0,0 +1,2 @@
+export { default as Image } from './Image';
+export type { ImageProps } from './Image';
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/MemoizedComponents.tsx b/packages/notion-to-jsx/src/components/Renderer/components/MemoizedComponents.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import RichText, { RichTextProps } from './RichTexts';
+import RichText, { RichTextProps } from './RichText/RichTexts';
 import { Image, ImageProps } from './Image';
-import Bookmark, { type BookmarkProps } from './Bookmark';
-import { RichTextItem } from '../types';
+import Bookmark, { type BookmarkProps } from './Bookmark/Bookmark';
+import { RichTextItem } from '../../../types';
 
 export const MemoizedRichText = React.memo<RichTextProps>(
   RichText,
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx b/packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { RichTextItem } from '../../../../types';
+import { richText, link } from './styles.css';
+
+export interface RichTextProps {
+  richTexts: RichTextItem[];
+}
+
+const RichTexts: React.FC<RichTextProps> = ({ richTexts }) => {
+  return (
+    <>
+      {richTexts.map((text, index) => {
+        const { bold, italic, strikethrough, underline, code, color } =
+          text.annotations;
+
+        const content = text.text.link ? (
+          <a
+            href={text.text.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={link}
+          >
+            {text.text.content}
+          </a>
+        ) : (
+          text.text.content
+        );
+
+        const colorValue =
+          color === 'default'
+            ? 'inherit'
+            : color?.includes('_background')
+              ? `var(--notion-${color})`
+              : `var(--notion-${color})`;
+
+        return (
+          <span
+            key={index}
+            className={richText({
+              bold,
+              italic,
+              strikethrough,
+              underline,
+              code,
+            })}
+            style={{ color: colorValue }}
+          >
+            {content}
+          </span>
+        );
+      })}
+    </>
+  );
+};
+
+export default RichTexts;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/RichText/index.ts b/packages/notion-to-jsx/src/components/Renderer/components/RichText/index.ts
@@ -0,0 +1 @@
+export { default as RichTexts } from './RichTexts';
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/RichText/styles.css.ts b/packages/notion-to-jsx/src/components/Renderer/components/RichText/styles.css.ts
@@ -0,0 +1,58 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { vars } from '../../../../styles/theme.css';
+
+export const richText = recipe({
+  base: {
+    fontFamily: 'inherit',
+  },
+
+  variants: {
+    bold: {
+      true: {
+        fontWeight: 'bold',
+      },
+    },
+    italic: {
+      true: {
+        fontStyle: 'italic',
+      },
+    },
+    strikethrough: {
+      true: {
+        textDecoration: 'line-through',
+      },
+    },
+    underline: {
+      true: {
+        textDecoration: 'underline',
+      },
+    },
+    code: {
+      true: {
+        background: vars.colors.code.background,
+        padding: '0.2em 0.4em',
+        borderRadius: vars.borderRadius.sm,
+        fontFamily: vars.typography.fontFamily.code,
+        fontSize: '0.85em',
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      variants: {
+        strikethrough: true,
+        underline: true,
+      },
+      style: {
+        textDecoration: 'line-through underline',
+      },
+    },
+  ],
+});
+
+export const link = style({
+  color: 'inherit',
+  textDecoration: 'underline',
+});
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Typography/Typography.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Typography/Typography.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { paragraph, heading1, heading2, heading3 } from './styles.css';
+
+interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+}
+
+export const Paragraph: React.FC<TypographyProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <p className={paragraph} {...props}>
+      {children}
+    </p>
+  );
+};
+
+export const Heading1: React.FC<TypographyProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <h1 className={heading1} {...props}>
+      {children}
+    </h1>
+  );
+};
+
+export const Heading2: React.FC<TypographyProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <h2 className={heading2} {...props}>
+      {children}
+    </h2>
+  );
+};
+
+export const Heading3: React.FC<TypographyProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <h3 className={heading3} {...props}>
+      {children}
+    </h3>
+  );
+};
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Typography/index.ts b/packages/notion-to-jsx/src/components/Renderer/components/Typography/index.ts
@@ -1 +1 @@
-export * from './styles';
+export * from './Typography';
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Typography/styles.css.ts b/packages/notion-to-jsx/src/components/Renderer/components/Typography/styles.css.ts
@@ -0,0 +1,47 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../../../styles/theme.css';
+
+// 공통 타이포그래피 스타일
+const baseTypography = {
+  color: vars.colors.text,
+  fontFamily: vars.typography.fontFamily.base,
+  lineHeight: vars.typography.lineHeight.base,
+  ':hover': {
+    backgroundColor: vars.colors.background,
+    opacity: 0.8,
+  },
+  selectors: {
+    '&:focus-visible': {
+      outline: `2px solid ${vars.colors.primary}`,
+      outlineOffset: '2px',
+      borderRadius: vars.borderRadius.sm,
+    },
+  },
+};
+
+export const paragraph = style({
+  ...baseTypography,
+  margin: `${vars.spacing.sm} 0`,
+  fontSize: vars.typography.fontSize.base,
+});
+
+export const heading1 = style({
+  ...baseTypography,
+  fontSize: vars.typography.fontSize.h1,
+  // fontWeight: vars.typography.fontWeight.bold,
+  margin: `${vars.spacing.lg} 0 ${vars.spacing.md}`,
+});
+
+export const heading2 = style({
+  ...baseTypography,
+  fontSize: vars.typography.fontSize.h2,
+  // fontWeight: vars.typography.fontWeight.semibold,
+  margin: `${vars.spacing.md} 0 ${vars.spacing.sm}`,
+});
+
+export const heading3 = style({
+  ...baseTypography,
+  fontSize: vars.typography.fontSize.h3,
+  // fontWeight: vars.typography.fontWeight.medium,
+  margin: `${vars.spacing.sm} 0 ${vars.spacing.xs}`,
+});
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Typography/styles.ts b/packages/notion-to-jsx/src/components/Renderer/components/Typography/styles.ts
diff --git a/packages/notion-to-jsx/src/components/Renderer/index.tsx b/packages/notion-to-jsx/src/components/Renderer/index.tsx
diff --git a/packages/notion-to-jsx/src/components/Renderer/styles.ts b/packages/notion-to-jsx/src/components/Renderer/styles.ts
diff --git a/packages/notion-to-jsx/src/components/RichTexts.tsx b/packages/notion-to-jsx/src/components/RichTexts.tsx
diff --git a/packages/notion-to-jsx/src/styles/theme.ts b/packages/notion-to-jsx/src/styles/theme.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as Bookmark } from './Bookmark';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { default as Image } from './Image';`
	`2`	`+export type { ImageProps } from './Image';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as RichTexts } from './RichTexts';`