diff --git a/.changeset/witty-lands-mix.md b/.changeset/witty-lands-mix.md new file mode 100644 index 0000000..942e5d2 --- /dev/null +++ b/.changeset/witty-lands-mix.md @@ -0,0 +1,5 @@ +--- +"notion-to-jsx": patch +--- + +Column인 경우 Image size 조절 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 index 16c9e4a..d5b3656 100644 --- a/packages/notion-to-jsx/src/components/Renderer/components/Block/BlockRenderer.tsx +++ b/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 = ({ block, onFocus, index }) => { +const BlockRenderer: React.FC = ({ + block, + onFocus, + index, + isColumn = false, +}) => { if (!block) return null; const blockProps = { @@ -79,6 +85,7 @@ const BlockRenderer: React.FC = ({ block, onFocus, index }) => { alt={block.image.caption?.[0]?.plain_text || ''} caption={block.image.caption} format={block.image.format} + isColumn={isColumn} /> ); diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Column/Column.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Column/Column.tsx index 06533fd..5017b5a 100644 --- a/packages/notion-to-jsx/src/components/Renderer/components/Column/Column.tsx +++ b/packages/notion-to-jsx/src/components/Renderer/components/Column/Column.tsx @@ -18,6 +18,7 @@ const Column: React.FC = ({ block, onFocus }) => { block={childBlock} onFocus={onFocus} index={index} + isColumn /> ))} 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 index 10e28a3..3a5bd90 100644 --- a/packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx +++ b/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 = ({ src, alt, caption: imageCaption, - priority = false, format, + isColumn = false, }) => { const [isLoaded, setIsLoaded] = useState(false); @@ -39,39 +79,15 @@ const Image: React.FC = ({ }, [src]); return ( -
+
MAX_WIDTH - ? '100%' - : `${format.block_width}px` - : '100%', - }} + style={getImageStyles(format, isColumn)} > {!isLoaded && ( -
MAX_WIDTH - ? '100%' - : `${format.block_width}px` - : '100%', - aspectRatio: format?.block_aspect_ratio - ? `${format.block_aspect_ratio}` - : 'auto', - }} - > +
= ({ })} 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)} />
{imageCaption && imageCaption.length > 0 && ( @@ -120,7 +132,7 @@ const Image: React.FC = ({ )} -
+ ); }; 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 index a364afa..35ef958 100644 --- 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 @@ -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: {