feat: Column인 경우 Image size 조절

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/Block/BlockRenderer.tsx

@@ -17,9 +17,15 @@ export interface Props {
   block: any;
   onFocus?: () => void;
   index: number;
+  isColumn?: boolean;
 }
 
-const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
+const BlockRenderer: React.FC<Props> = ({
+  block,
+  onFocus,
+  index,
+  isColumn = false,
+}) => {
   if (!block) return null;
 
   const blockProps = {
@@ -79,6 +85,7 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
             alt={block.image.caption?.[0]?.plain_text || ''}
             caption={block.image.caption}
             format={block.image.format}
+            isColumn={isColumn}
           />
         </figure>
       );

packages/notion-to-jsx/src/components/Renderer/components/Column/Column.tsx

@@ -18,6 +18,7 @@ const Column: React.FC<ColumnProps> = ({ block, onFocus }) => {
           block={childBlock}
           onFocus={onFocus}
           index={index}
+          isColumn
         />
       ))}
     </div>

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

@@ -21,16 +21,56 @@ export interface ImageProps {
   caption?: RichTextItem[];
   priority?: boolean;
   format?: ImageFormat;
+  isColumn?: boolean;
 }
 
 const MAX_WIDTH = 720;
 
+// 이미지 스타일 유틸리티 함수
+const getImageStyles = (format?: ImageFormat, isColumn: boolean = false) => {
+  // width 계산 로직
+  const getWidthStyle = () => {
+    if (
+      !isColumn &&
+      format?.block_aspect_ratio &&
+      format.block_aspect_ratio < 1
+    ) {
+      return `${format.block_aspect_ratio * 100}%`;
+    }
+
+    if (format?.block_width) {
+      return format.block_width > MAX_WIDTH
+        ? '100%'
+        : `${format.block_width}px`;
+    }
+
+    return '100%';
+  };
+
+  // aspectRatio 계산 로직
+  const getAspectRatioStyle = () => {
+    return format?.block_aspect_ratio ? `${format.block_aspect_ratio}` : 'auto';
+  };
+
+  return {
+    width: getWidthStyle(),
+    aspectRatio: getAspectRatioStyle(),
+  };
+};
+
+// 이미지 태그에 사용되는 aspectRatio 스타일
+const getImageTagStyle = (format?: ImageFormat) => {
+  return format?.block_aspect_ratio
+    ? { aspectRatio: `${format.block_aspect_ratio}` }
+    : undefined;
+};
+
 const Image: React.FC<ImageProps> = ({
   src,
   alt,
   caption: imageCaption,
-  priority = false,
   format,
+  isColumn = false,
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
 
@@ -44,34 +84,10 @@ const Image: React.FC<ImageProps> = ({
         className={imageWrapper({
           hasWidth: !!format?.block_width,
         })}
-        style={{
-          width:
-            format?.block_aspect_ratio && format.block_aspect_ratio < 1
-              ? `${format.block_aspect_ratio * 100}%`
-              : format?.block_width
-                ? format.block_width > MAX_WIDTH
-                  ? '100%'
-                  : `${format.block_width}px`
-                : '100%',
-          aspectRatio: format?.block_aspect_ratio
-            ? `${format.block_aspect_ratio}`
-            : 'auto',
-        }}
+        style={getImageStyles(format, isColumn)}
       >
         {!isLoaded && (
-          <div
-            className={placeholder}
-            style={{
-              width: format?.block_width
-                ? format.block_width > MAX_WIDTH
-                  ? '100%'
-                  : `${format.block_width}px`
-                : '100%',
-              aspectRatio: format?.block_aspect_ratio
-                ? `${format.block_aspect_ratio}`
-                : 'auto',
-            }}
-          >
+          <div className={placeholder} style={getImageStyles(format, isColumn)}>
             <svg
               width="38"
               height="38"
@@ -108,11 +124,7 @@ const Image: React.FC<ImageProps> = ({
           onLoad={() => setIsLoaded(true)}
           width={format?.block_width}
           height={format?.block_height}
-          style={
-            format?.block_aspect_ratio
-              ? { aspectRatio: `${format.block_aspect_ratio}` }
-              : undefined
-          }
+          style={getImageTagStyle(format)}
         />
       </div>
       {imageCaption && imageCaption.length > 0 && (