feat: Image 사이즈 처리

01-binary · 01-binary · commit 0e7a9b36ce54 · 2025-03-20T20:37:57.000+09:00
diff --git a/apps/storybook/src/sample-data/notionBlocks.json b/apps/storybook/src/sample-data/notionBlocks.json
@@ -69,7 +69,12 @@
       "type": "file",
       "file": {
         "url": "https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fcd7314a5-d906-43b0-81e7-42eff82c02a3%2F566f127b-9e73-491d-bee6-5afd075653a2%2Fimage.png?table=block&id=17f9c6bf-2b17-8016-bf79-dc83ab79fb78&cache=v2",
-        "expiry_time": "2025-03-19T16:01:15.810Z"
+        "expiry_time": "2025-03-20T12:10:05.408Z"
+      },
+      "format": {
+        "block_width": 2998,
+        "block_height": 1468,
+        "block_aspect_ratio": 2.042234332425068
       }
     }
   },
@@ -4561,7 +4566,12 @@
       "type": "file",
       "file": {
         "url": "https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fcd7314a5-d906-43b0-81e7-42eff82c02a3%2F10d9f59d-d3e2-429a-ad72-c8b15b1f536b%2Fimage.png?table=block&id=1809c6bf-2b17-8096-aaf4-d89c3850bed0&cache=v2",
-        "expiry_time": "2025-03-19T16:01:16.374Z"
+        "expiry_time": "2025-03-20T12:10:05.632Z"
+      },
+      "format": {
+        "block_width": 721,
+        "block_height": 473,
+        "block_aspect_ratio": 1.5243128964059196
       }
     }
   },
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
@@ -70,6 +70,7 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
             src={block.image.file?.url || block.image.external?.url}
             alt={block.image.caption?.[0]?.plain_text || ''}
             caption={block.image.caption}
+            format={block.image.format}
           />
         </figure>
       );
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
@@ -2,24 +2,33 @@ import React, { useState, useEffect } from 'react';
 import { MemoizedRichText } from '../MemoizedComponents';
 import {
   imageContainer,
+  imageWrapper,
   styledImage,
   placeholder,
   caption,
 } from './styles.css';
 import { RichTextItem } from '../RichText/RichTexts';
 
+export interface ImageFormat {
+  block_width?: number;
+  block_height?: number;
+  block_aspect_ratio?: number;
+}
+
 export interface ImageProps {
   src: string;
   alt: string;
   caption?: RichTextItem[];
   priority?: boolean;
+  format?: ImageFormat;
 }
 
 const Image: React.FC<ImageProps> = ({
   src,
   alt,
   caption: imageCaption,
   priority = false,
+  format,
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
   const [error, setError] = useState(false);
@@ -31,16 +40,124 @@ const Image: React.FC<ImageProps> = ({
 
   return (
     <figure className={imageContainer}>
-      <div>
-        {!isLoaded && !error && <div className={placeholder}>Loading...</div>}
-        {error && <div className={placeholder}>Failed to load image</div>}
+      <div
+        className={imageWrapper({
+          hasWidth: !!format?.block_width,
+        })}
+        style={
+          format?.block_width
+            ? {
+                width:
+                  format.block_width > 900 ? '100%' : `${format.block_width}px`,
+              }
+            : undefined
+        }
+      >
+        {!isLoaded && !error && (
+          <div
+            className={placeholder}
+            style={{
+              width: format?.block_width
+                ? format.block_width > 900
+                  ? '100%'
+                  : `${format.block_width}px`
+                : '100%',
+              aspectRatio: format?.block_aspect_ratio
+                ? `${format.block_aspect_ratio}`
+                : 'auto',
+            }}
+          >
+            <svg
+              width="38"
+              height="38"
+              viewBox="0 0 38 38"
+              xmlns="http://www.w3.org/2000/svg"
+              stroke="#888"
+            >
+              <g fill="none" fillRule="evenodd">
+                <g transform="translate(1 1)" strokeWidth="2">
+                  <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
+                  <path d="M36 18c0-9.94-8.06-18-18-18">
+                    <animateTransform
+                      attributeName="transform"
+                      type="rotate"
+                      from="0 18 18"
+                      to="360 18 18"
+                      dur="1s"
+                      repeatCount="indefinite"
+                    />
+                  </path>
+                </g>
+              </g>
+            </svg>
+          </div>
+        )}
+        {error && (
+          <div
+            className={placeholder}
+            style={{
+              width: format?.block_width
+                ? format.block_width > 900
+                  ? '100%'
+                  : `${format.block_width}px`
+                : '100%',
+              aspectRatio: format?.block_aspect_ratio
+                ? `${format.block_aspect_ratio}`
+                : 'auto',
+            }}
+          >
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+                stroke="#FF6B6B"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M15 9L9 15"
+                stroke="#FF6B6B"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M9 9L15 15"
+                stroke="#FF6B6B"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <div style={{ width: '10px' }} />
+            <p style={{ color: '#FF6B6B', fontSize: '14px' }}>
+              Image Load failed
+            </p>
+          </div>
+        )}
         <img
-          className={styledImage({ loaded: isLoaded })}
+          className={styledImage({
+            loaded: isLoaded,
+            hasAspectRatio: !!format?.block_aspect_ratio,
+          })}
           src={src}
           alt={alt}
           loading={priority ? 'eager' : 'lazy'}
           onLoad={() => setIsLoaded(true)}
           onError={() => setError(true)}
+          width={format?.block_width}
+          height={format?.block_height}
+          style={
+            format?.block_aspect_ratio
+              ? { aspectRatio: `${format.block_aspect_ratio}` }
+              : undefined
+          }
         />
       </div>
       {imageCaption && imageCaption.length > 0 && (
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Image/styles.css.ts b/packages/notion-to-jsx/src/components/Renderer/components/Image/styles.css.ts
@@ -1,13 +1,40 @@
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
+import { createVar, fallbackVar } from '@vanilla-extract/css';
 import { vars } from '../../../../styles/theme.css';
 
 export const imageContainer = style({
   position: 'relative',
   width: '100%',
-  background: vars.colors.code.background,
   borderRadius: vars.borderRadius.md,
   overflow: 'hidden',
+  margin: '0 auto',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});
+
+// CSS 변수 생성
+export const imageWidthVar = createVar();
+export const imageAspectRatioVar = createVar();
+
+export const imageWrapper = recipe({
+  base: {
+    position: 'relative',
+    maxWidth: '100%',
+    width: fallbackVar(imageWidthVar, '100%'),
+  },
+  variants: {
+    hasWidth: {
+      true: {},
+      false: {
+        width: '100%',
+      },
+    },
+  },
+  defaultVariants: {
+    hasWidth: false,
+  },
 });
 
 export const styledImage = recipe({
@@ -16,6 +43,8 @@ export const styledImage = recipe({
     height: 'auto',
     display: 'block',
     transition: 'opacity 0.3s ease',
+    objectFit: 'contain',
+    aspectRatio: fallbackVar(imageAspectRatioVar, 'auto'),
   },
   variants: {
     loaded: {
@@ -26,23 +55,26 @@ export const styledImage = recipe({
         opacity: 0,
       },
     },
+    hasAspectRatio: {
+      true: {},
+      false: {},
+    },
   },
   defaultVariants: {
     loaded: false,
+    hasAspectRatio: false,
   },
 });
 
 export const placeholder = style({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
+  // position: 'absolute',
+  // top: 0,
+  // left: 0,
+  // right: 0,
+  // bottom: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  background: vars.colors.code.background,
-  color: vars.colors.secondary,
 });
 
 export const caption = style({
diff --git a/packages/notion-to-utils/package.json b/packages/notion-to-utils/package.json
@@ -39,13 +39,15 @@
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@types/lqip-modern": "^1.1.7",
+    "@types/probe-image-size": "^7.2.5",
     "@vitest/coverage-v8": "2.1.2",
     "jsdom": "^26.0.0",
     "typescript": "^5.6.3",
     "vitest": "^2.1.2"
   },
   "dependencies": {
     "@notionhq/client": "^2.2.15",
-    "lqip-modern": "^2.2.1"
+    "lqip-modern": "^2.2.1",
+    "probe-image-size": "^7.2.3"
   }
 }
diff --git a/packages/notion-to-utils/src/client/getPageBlocks.ts b/packages/notion-to-utils/src/client/getPageBlocks.ts
@@ -5,6 +5,7 @@ import {
   PartialBlockObjectResponse,
 } from '@notionhq/client/build/src/api-endpoints';
 import { formatNotionImageUrl } from './formatNotionImageUrl';
+import { addMetadataToImageBlock } from '../utils';
 
 // 블록 타입 정의
 export type NotionBlock = BlockObjectResponse | PartialBlockObjectResponse;
@@ -80,6 +81,13 @@ async function fetchBlockChildren(
                 block.id
               );
             }
+
+            // 이미지 메타데이터 추출 및 추가
+            try {
+              await addMetadataToImageBlock(imageBlock);
+            } catch (metadataError) {
+              console.error('이미지 메타데이터 추출 중 오류:', metadataError);
+            }
           }
         }
 
diff --git a/packages/notion-to-utils/src/utils/getImageMetadata.ts b/packages/notion-to-utils/src/utils/getImageMetadata.ts
@@ -0,0 +1,69 @@
+import probe from 'probe-image-size';
+
+/**
+ * 이미지 URL에서 메타데이터(너비, 높이)를 추출합니다.
+ * @param url 이미지 URL
+ * @returns 이미지 메타데이터 (너비, 높이, 종횡비) 또는 null (추출 실패 시)
+ */
+export async function getImageMetadata(url: string): Promise<{
+  width: number;
+  height: number;
+  aspectRatio: number;
+} | null> {
+  try {
+    // URL이 Notion 이미지 URL인 경우 특별한 처리가 필요할 수 있음
+    const result = await probe(url);
+
+    return {
+      width: result.width,
+      height: result.height,
+      aspectRatio: result.height > 0 ? result.width / result.height : 1,
+    };
+  } catch (error) {
+    console.error('이미지 메타데이터 추출 실패:', error);
+    return null;
+  }
+}
+
+/**
+ * Notion 이미지 블록에 메타데이터를 추가합니다.
+ * @param block Notion 이미지 블록
+ * @returns 메타데이터가 추가된 이미지 블록
+ */
+export async function addMetadataToImageBlock(block: any): Promise<any> {
+  if (block.type !== 'image') {
+    return block;
+  }
+
+  try {
+    // 이미지 URL 가져오기
+    let imageUrl = '';
+    if (block.image.file && block.image.file.url) {
+      imageUrl = block.image.file.url;
+    } else if (block.image.external && block.image.external.url) {
+      imageUrl = block.image.external.url;
+    } else {
+      return block; // URL이 없는 경우 원본 블록 반환
+    }
+
+    // 이미지 메타데이터 추출
+    const metadata = await getImageMetadata(imageUrl);
+    if (!metadata) {
+      return block; // 메타데이터 추출 실패 시 원본 블록 반환
+    }
+
+    // 메타데이터 추가
+    if (!block.image.format) {
+      block.image.format = {};
+    }
+
+    block.image.format.block_width = metadata.width;
+    block.image.format.block_height = metadata.height;
+    block.image.format.block_aspect_ratio = metadata.aspectRatio;
+
+    return block;
+  } catch (error) {
+    console.error('이미지 블록 메타데이터 추가 실패:', error);
+    return block;
+  }
+}
diff --git a/packages/notion-to-utils/src/utils/index.ts b/packages/notion-to-utils/src/utils/index.ts
@@ -1 +1,2 @@
 export * from './makePreviewImage';
+export * from './getImageMetadata';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ import {`
`5`	`5`	`PartialBlockObjectResponse,`
`6`	`6`	`} from '@notionhq/client/build/src/api-endpoints';`
`7`	`7`	`import { formatNotionImageUrl } from './formatNotionImageUrl';`
	`8`	`+import { addMetadataToImageBlock } from '../utils';`
`8`	`9`
`9`	`10`	`// 블록 타입 정의`
`10`	`11`	`export type NotionBlock = BlockObjectResponse \| PartialBlockObjectResponse;`
`@@ -80,6 +81,13 @@ async function fetchBlockChildren(`
`80`	`81`	`block.id`
`81`	`82`	`);`
`82`	`83`	`}`
	`84`	`+`
	`85`	`+ // 이미지 메타데이터 추출 및 추가`
	`86`	`+ try {`
	`87`	`+ await addMetadataToImageBlock(imageBlock);`
	`88`	`+ } catch (metadataError) {`
	`89`	`+ console.error('이미지 메타데이터 추출 중 오류:', metadataError);`
	`90`	`+ }`
`83`	`91`	`}`
`84`	`92`	`}`
`85`	`93`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from './makePreviewImage';`
	`2`	`+export * from './getImageMetadata';`