Merge pull request #56 from 01-binary/jsx-update

Jsx update

Author: 01-binary

.changeset/witty-lands-mix.md

@@ -0,0 +1,5 @@
+---
+"notion-to-jsx": patch
+---
+
+Column인 경우 Image size 조절

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);
 
@@ -39,39 +79,15 @@ const Image: React.FC<ImageProps> = ({
   }, [src]);
 
   return (
-    <figure className={imageContainer}>
+    <div className={imageContainer}>
       <div
         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%',
-        }}
+        style={getImageStyles(format, isColumn)}
       >
         {!isLoaded && (
-          <div
-            className={placeholder}
-            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',
-            }}
-          >
+          <div className={placeholder} style={getImageStyles(format, isColumn)}>
             <svg
               width="38"
               height="38"
@@ -104,23 +120,19 @@ const Image: React.FC<ImageProps> = ({
           })}
           src={src}
           alt={alt}
-          loading={priority ? 'eager' : 'lazy'}
+          loading="lazy"
           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 && (
         <figcaption className={caption}>
           <MemoizedRichText richTexts={imageCaption} />
         </figcaption>
       )}
-    </figure>
+    </div>
   );
 };
 

packages/notion-to-jsx/src/components/Renderer/components/Image/styles.css.ts

@@ -23,9 +23,6 @@ export const imageWrapper = recipe({
     position: 'relative',
     maxWidth: '100%',
     width: fallbackVar(imageWidthVar, '100%'),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   variants: {
     hasWidth: {
@@ -51,9 +48,12 @@ export const styledImage = recipe({
   },
   variants: {
     loaded: {
-      true: {},
+      true: {
+        opacity: 1,
+      },
       false: {
-        display: 'none',
+        opacity: 0,
+        height: 0,
       },
     },
     hasAspectRatio: {