feat: Bookmark styling

01-binary · 01-binary · commit fdc85f5e4f8f · 2025-03-06T22:30:14.000+09:00
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,54 +1,78 @@
 import React, { useState, useEffect } from 'react';
-import { MemoizedRichText } from '../MemoizedComponents';
 import {
   link,
   card,
   content,
+  previewContainer,
   previewImage,
   title,
   description,
   siteName,
-  caption,
+  favicon,
+  urlText,
 } from './styles.css';
-import { RichTextItem } from '../RichText/RichTexts';
 
 interface OpenGraphData {
   title: string;
   description: string;
   image: string;
   siteName: string;
+  url: string;
+  favicon?: string;
 }
 
 export interface BookmarkProps {
   url: string;
-  caption?: RichTextItem[];
 }
 
-// 실제 프로덕션에서는 서버 사이드에서 처리하거나 전용 API를 사용해야 합니다
+// OpenGraph 데이터를 가져오는 함수
 const fetchOpenGraphData = async (url: string): Promise<OpenGraphData> => {
   try {
+    const apiUrl = `https://api.microlink.io/?url=${encodeURIComponent(url)}`;
+    const response = await fetch(apiUrl);
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch metadata');
+    }
+
+    const { status, data: metaData } = data;
+
+    if (status !== 'success') {
+      throw new Error('API returned error status');
+    }
+
     const parsedUrl = new URL(url);
     const domain = parsedUrl.hostname;
-    const siteName = domain.split('.')[1] || domain;
 
-    // 임시로 더미 데이터를 반환
     return {
-      title: domain,
-      description: 'No description available',
-      image: '',
-      siteName: siteName,
+      title: metaData.title || domain,
+      description: metaData.description || 'No description available',
+      image: metaData.image?.url || '',
+      siteName: metaData.publisher || domain,
+      url: metaData.url || '',
+      favicon:
+        metaData.logo?.url ||
+        `https://www.google.com/s2/favicons?domain=${domain}&sz=64`,
     };
-  } catch {
+  } catch (error) {
+    console.error('Error fetching OpenGraph data:', error);
+
+    const parsedUrl = new URL(url);
+    const domain = parsedUrl.hostname;
+
     return {
-      title: url,
-      description: 'Invalid URL',
+      title: domain,
+      description: 'No description available',
       image: '',
-      siteName: 'Unknown',
+      url: '',
+      siteName: domain,
+      favicon: `https://www.google.com/s2/favicons?domain=${domain}&sz=64`,
     };
   }
 };
 
-const Bookmark: React.FC<BookmarkProps> = ({ url, caption }) => {
+const Bookmark: React.FC<BookmarkProps> = ({ url }) => {
   const [ogData, setOgData] = useState<OpenGraphData | null>(null);
   const [error, setError] = useState(false);
 
@@ -68,28 +92,33 @@ const Bookmark: React.FC<BookmarkProps> = ({ url, caption }) => {
   return (
     <a href={url} target="_blank" rel="noopener noreferrer" className={link}>
       <div className={card}>
-        {ogData?.image && (
-          <img
-            className={previewImage}
-            src={ogData.image}
-            alt={ogData.title}
-            loading="lazy"
-          />
-        )}
         <div className={content}>
-          <h4 className={title}>{ogData?.title || url}</h4>
-          {ogData?.description && (
-            <p className={description}>{ogData.description}</p>
-          )}
-          {ogData?.siteName && (
-            <div className={siteName}>{ogData.siteName}</div>
-          )}
-          {/* {caption && caption.length > 0 && (
-            <div className={caption}>
-              <MemoizedRichText richTexts={caption} />
-            </div>
-          )} */}
+          <div>
+            <h4 className={title}>{ogData?.title || url}</h4>
+            <p className={description}>{ogData?.description || ''}</p>
+          </div>
+          <div className={siteName}>
+            {ogData?.favicon && (
+              <img src={ogData.favicon} alt="" className={favicon} />
+            )}
+            <span className={urlText}>{ogData?.url || ''}</span>
+          </div>
         </div>
+        {ogData?.image && (
+          <div className={previewContainer}>
+            <img
+              className={previewImage}
+              src={ogData.image}
+              alt={ogData.title}
+              loading="lazy"
+              onError={(e) => {
+                // 이미지 로드 실패 시 처리
+                const target = e.target as HTMLImageElement;
+                target.style.display = 'none';
+              }}
+            />
+          </div>
+        )}
       </div>
     </a>
   );
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Bookmark/styles.css.ts b/packages/notion-to-jsx/src/components/Renderer/components/Bookmark/styles.css.ts
@@ -3,47 +3,94 @@ import { vars } from '../../../../styles/theme.css';
 
 export const link = style({
   textDecoration: 'none',
+  display: 'block',
+  paddingTop: vars.spacing.xs,
+  paddingBottom: vars.spacing.xs,
 });
 
 export const card = style({
+  display: 'flex',
   border: `1px solid ${vars.colors.border}`,
   borderRadius: vars.borderRadius.md,
   overflow: 'hidden',
   transition: 'box-shadow 0.2s ease',
+  maxHeight: '8rem',
   ':hover': {
     boxShadow: vars.shadows.md,
   },
 });
 
 export const content = style({
   padding: vars.spacing.base,
+  display: 'flex',
+  flex: '4 1 180px',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  overflow: 'hidden',
+});
+
+export const previewContainer = style({
+  display: 'flex',
+  flex: '1 1 180px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  maxHeight: '8rem',
+  overflow: 'hidden',
 });
 
 export const previewImage = style({
   width: '100%',
-  height: '200px',
+  height: '100%',
   objectFit: 'cover',
-  background: vars.colors.code.background,
+  objectPosition: 'center',
+  borderRadius: vars.borderRadius.sm,
 });
 
 export const title = style({
-  padding: `0 0 ${vars.spacing.xs}`,
+  padding: 0,
+  paddingBottom: vars.spacing.xs,
   fontSize: vars.typography.fontSize.base,
+  fontWeight: vars.typography.fontWeight.semibold,
   color: vars.colors.text,
+  minHeight: '1.5rem',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 });
 
 export const description = style({
   padding: 0,
-  fontSize: vars.typography.fontSize.small,
+  paddingBottom: vars.spacing.xs,
+  fontSize: vars.typography.fontSize.xs,
   color: vars.colors.secondary,
+  height: '2.25rem',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
   display: '-webkit-box',
   WebkitLineClamp: 2,
   WebkitBoxOrient: 'vertical',
-  overflow: 'hidden',
 });
 
 export const siteName = style({
+  minHeight: '1rem',
   paddingTop: vars.spacing.sm,
-  fontSize: vars.typography.fontSize.small,
+  fontSize: vars.typography.fontSize.xs,
   color: vars.colors.primary,
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing.sm,
+  width: '100%',
+});
+
+export const favicon = style({
+  width: '1rem',
+  height: '1rem',
+  flexShrink: 0,
+});
+
+export const urlText = style({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  maxWidth: '100%',
 });
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
@@ -2,13 +2,13 @@ import React, { useMemo } from 'react';
 import { codeBlock } from './styles.css';
 import Prism, { Grammar } from 'prismjs';
 import { MemoizedRichText } from '../MemoizedComponents';
+import { RichTextItem } from '../RichText/RichTexts';
 
 import 'prismjs/themes/prism.css';
 import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-tsx';
-import { RichTextItem } from '../RichText/RichTexts';
 
 if (typeof window !== 'undefined') {
   window.Prism = Prism;
