Storybook renderer test

apps/storybook/package.json

@@ -10,9 +10,13 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@types/prismjs": "^1.26.5",
+    "@types/styled-components": "^5.1.34",
     "notion-to-utils": "workspace:*",
+    "prismjs": "^1.29.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.14"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",

apps/storybook/src/components/Bookmark.tsx

@@ -0,0 +1,116 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { RichTextItem } from '../types';
+import { RichText } from './RichText';
+
+interface OpenGraphData {
+  title: string;
+  description: string;
+  image: string;
+  siteName: string;
+}
+
+interface BookmarkProps {
+  url: string;
+  caption?: RichTextItem[];
+}
+
+const Card = styled.div`
+  margin: ${({ theme }) => theme.spacing.md} 0;
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  border-radius: ${({ theme }) => theme.borderRadius.md};
+  overflow: hidden;
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow: ${({ theme }) => theme.shadows.md};
+  }
+`;
+
+const Content = styled.div`
+  padding: ${({ theme }) => theme.spacing.md};
+`;
+
+const PreviewImage = styled.img`
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  background: ${({ theme }) => theme.colors.code.background};
+`;
+
+const Title = styled.h4`
+  margin: 0 0 ${({ theme }) => theme.spacing.xs};
+  font-size: ${({ theme }) => theme.typography.fontSize.base};
+  color: ${({ theme }) => theme.colors.text};
+`;
+
+const Description = styled.p`
+  margin: 0;
+  font-size: ${({ theme }) => theme.typography.fontSize.small};
+  color: ${({ theme }) => theme.colors.secondary};
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+
+const SiteName = styled.div`
+  margin-top: ${({ theme }) => theme.spacing.sm};
+  font-size: ${({ theme }) => theme.typography.fontSize.small};
+  color: ${({ theme }) => theme.colors.primary};
+`;
+
+const Caption = styled.div`
+  margin-top: ${({ theme }) => theme.spacing.sm};
+  padding-top: ${({ theme }) => theme.spacing.sm};
+  border-top: 1px solid ${({ theme }) => theme.colors.border};
+  font-size: ${({ theme }) => theme.typography.fontSize.small};
+  color: ${({ theme }) => theme.colors.secondary};
+`;
+
+// 실제 프로덕션에서는 서버 사이드에서 처리하거나 전용 API를 사용해야 합니다
+const fetchOpenGraphData = async (url: string): Promise<OpenGraphData> => {
+  // 임시로 더미 데이터를 반환
+  return {
+    title: new URL(url).hostname,
+    description: 'No description available',
+    image: '',
+    siteName: new URL(url).hostname.split('.')[1]
+  };
+};
+
+export const Bookmark: React.FC<BookmarkProps> = ({ url, caption }) => {
+  const [ogData, setOgData] = useState<OpenGraphData | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const loadOgData = async () => {
+      try {
+        const data = await fetchOpenGraphData(url);
+        setOgData(data);
+      } catch (err) {
+        setError(true);
+      }
+    };
+
+    loadOgData();
+  }, [url]);
+
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+      <Card>
+        {ogData?.image && <PreviewImage src={ogData.image} alt={ogData.title} loading="lazy" />}
+        <Content>
+          <Title>{ogData?.title || url}</Title>
+          {ogData?.description && <Description>{ogData.description}</Description>}
+          {ogData?.siteName && <SiteName>{ogData.siteName}</SiteName>}
+          {caption && caption.length > 0 && (
+            <Caption>
+              <RichText richText={caption} />
+            </Caption>
+          )}
+        </Content>
+      </Card>
+    </a>
+  );
+};

apps/storybook/src/components/Image.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { RichTextItem } from '../types';
+import { RichText } from './RichText';
+
+interface ImageProps {
+  src: string;
+  alt: string;
+  caption?: RichTextItem[];
+  priority?: boolean;
+}
+
+const ImageContainer = styled.div`
+  position: relative;
+  width: 100%;
+  background: ${({ theme }) => theme.colors.code.background};
+  border-radius: ${({ theme }) => theme.borderRadius.md};
+  overflow: hidden;
+`;
+
+const StyledImage = styled.img<{ $isLoaded: boolean }>`
+  width: 100%;
+  height: auto;
+  display: block;
+  opacity: ${({ $isLoaded }) => ($isLoaded ? 1 : 0)};
+  transition: opacity 0.3s ease;
+`;
+
+const Placeholder = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${({ theme }) => theme.colors.code.background};
+  color: ${({ theme }) => theme.colors.secondary};
+`;
+
+const Caption = styled.figcaption`
+  text-align: center;
+  color: ${({ theme }) => theme.colors.secondary};
+  margin-top: ${({ theme }) => theme.spacing.sm};
+  font-size: ${({ theme }) => theme.typography.fontSize.small};
+`;
+
+export const Image: React.FC<ImageProps> = ({ src, alt, caption, priority = false }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    setIsLoaded(false);
+    setError(false);
+  }, [src]);
+
+  return (
+    <figure>
+      <ImageContainer>
+        {!isLoaded && !error && (
+          <Placeholder>
+            Loading...
+          </Placeholder>
+        )}
+        {error && (
+          <Placeholder>
+            Failed to load image
+          </Placeholder>
+        )}
+        <StyledImage
+          src={src}
+          alt={alt}
+          $isLoaded={isLoaded}
+          loading={priority ? 'eager' : 'lazy'}
+          onLoad={() => setIsLoaded(true)}
+          onError={() => setError(true)}
+        />
+      </ImageContainer>
+      {caption && caption.length > 0 && (
+        <Caption>
+          <RichText richText={caption} />
+        </Caption>
+      )}
+    </figure>
+  );
+};

apps/storybook/src/components/MemoizedComponents.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { RichText } from './RichText';
+import { Image } from './Image';
+import { Bookmark } from './Bookmark';
+import { RichTextItem } from '../types';
+
+export const MemoizedRichText = React.memo(RichText, (prev, next) => {
+  return JSON.stringify(prev.richText) === JSON.stringify(next.richText);
+});
+
+export const MemoizedImage = React.memo(Image, (prev, next) => {
+  return (
+    prev.src === next.src &&
+    prev.alt === next.alt &&
+    JSON.stringify(prev.caption) === JSON.stringify(next.caption)
+  );
+});
+
+export const MemoizedBookmark = React.memo(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'
+  );
+};