refactor: 폴더 구조 개선

Author: 01-binary

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "turbo build --filter=!./apps/storybook",
     "dev": "turbo dev --filter=!./apps/storybook",
+    "dev:storybook": "turbo run dev storybook --filter=notion-to-jsx --filter=storybook",
     "storybook": "turbo run storybook",
     "build-storybook": "turbo run build-storybook",
     "lint": "turbo lint --filter=!./apps/storybook",

packages/notion-to-jsx/src/components/Bookmark.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { RichTextItem } from '../types';
-import { RichText } from './RichText';
+import { type RichTextItem } from '../types';
+import RichTexts from './RichTexts';
 
 interface OpenGraphData {
   title: string;
@@ -79,7 +79,7 @@ const fetchOpenGraphData = async (url: string): Promise<OpenGraphData> => {
   };
 };
 
-export const Bookmark: React.FC<BookmarkProps> = ({ url, caption }) => {
+const Bookmark: React.FC<BookmarkProps> = ({ url, caption }) => {
   const [ogData, setOgData] = useState<OpenGraphData | null>(null);
   const [error, setError] = useState(false);
 
@@ -115,11 +115,13 @@ export const Bookmark: React.FC<BookmarkProps> = ({ url, caption }) => {
           {ogData?.siteName && <SiteName>{ogData.siteName}</SiteName>}
           {caption && caption.length > 0 && (
             <Caption>
-              <RichText richText={caption} />
+              <RichTexts richTexts={caption} />
             </Caption>
           )}
         </Content>
       </Card>
     </a>
   );
 };
+
+export default Bookmark;

packages/notion-to-jsx/src/components/Image.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { RichTextItem } from '../types';
-import { RichText } from './RichText';
+import RichTexts from './RichTexts';
 
 export interface ImageProps {
   src: string;
@@ -76,7 +76,7 @@ export const Image: React.FC<ImageProps> = ({
       </ImageContainer>
       {caption && caption.length > 0 && (
         <Caption>
-          <RichText richText={caption} />
+          <RichTexts richTexts={caption} />
         </Caption>
       )}
     </figure>

packages/notion-to-jsx/src/components/MemoizedComponents.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import { RichText, RichTextProps } from './RichText';
+import RichText, { RichTextProps } from './RichTexts';
 import { Image, ImageProps } from './Image';
-import { Bookmark, BookmarkProps } from './Bookmark';
+import Bookmark, { type BookmarkProps } from './Bookmark';
 import { RichTextItem } from '../types';
 
-export const MemoizedRichText = React.memo<RichTextProps>(RichText, (prev, next) => {
-  return JSON.stringify(prev.richText) === JSON.stringify(next.richText);
-});
+export const MemoizedRichText = React.memo<RichTextProps>(
+  RichText,
+  (prev, next) => {
+    return JSON.stringify(prev.richTexts) === JSON.stringify(next.richTexts);
+  }
+);
 
 export const MemoizedImage = React.memo<ImageProps>(Image, (prev, next) => {
   return (
@@ -16,20 +19,24 @@ export const MemoizedImage = React.memo<ImageProps>(Image, (prev, next) => {
   );
 });
 
-export const MemoizedBookmark = React.memo<BookmarkProps>(Bookmark, (prev, next) => {
-  return (
-    prev.url === next.url &&
-    JSON.stringify(prev.caption) === JSON.stringify(next.caption)
-  );
-});
+export const MemoizedBookmark = React.memo<BookmarkProps>(
+  Bookmark,
+  (prev, next) => {
+    return (
+      prev.url === next.url &&
+      JSON.stringify(prev.caption) === JSON.stringify(next.caption)
+    );
+  }
+);
 
 // 타입 가드 유틸리티
 export const isRichTextArray = (value: unknown): value is RichTextItem[] => {
   if (!Array.isArray(value)) return false;
-  return value.every((item) => 
-    typeof item === 'object' &&
-    item !== null &&
-    'type' in item &&
-    item.type === 'text'
+  return value.every(
+    (item) =>
+      typeof item === 'object' &&
+      item !== null &&
+      'type' in item &&
+      item.type === 'text'
   );
 };