+
+
+
![]()
= ({
};
export default Image;
+
+// 이미지 스타일 유틸리티 함수
+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(),
+ };
+};
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 35ef958..969f0ff 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
@@ -1,6 +1,5 @@
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({
@@ -15,36 +14,18 @@ export const imageContainer = style({
alignItems: 'center',
});
-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 imageWrapper = style({
+ position: 'relative',
+ maxWidth: '100%',
});
-export const styledImage = recipe({
+export const imageStyle = recipe({
base: {
width: '100%',
height: 'auto',
display: 'block',
transition: 'opacity 0.3s ease',
objectFit: 'contain',
- aspectRatio: fallbackVar(imageAspectRatioVar, 'auto'),
},
variants: {
loaded: {
@@ -53,12 +34,16 @@ export const styledImage = recipe({
},
false: {
opacity: 0,
- height: 0,
},
},
hasAspectRatio: {
- true: {},
- false: {},
+ true: {
+ // aspectRatio는 recipe 단계에서는 빈 객체로 두고
+ // 컴포넌트에서 동적으로 계산된 값으로 채워집니다
+ },
+ false: {
+ aspectRatio: 'auto',
+ },
},
},
defaultVariants: {
@@ -67,15 +52,34 @@ export const styledImage = recipe({
},
});
-export const placeholder = style({
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
-});
-
export const caption = style({
textAlign: 'center',
color: vars.colors.secondary,
marginTop: vars.spacing.sm,
fontSize: vars.typography.fontSize.small,
});
+
+export const skeletonWrapper = recipe({
+ base: {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ zIndex: 1,
+ transition: 'opacity 0.3s ease',
+ },
+ variants: {
+ isLoaded: {
+ true: {
+ opacity: 0,
+ },
+ false: {
+ opacity: 1,
+ },
+ },
+ },
+ defaultVariants: {
+ isLoaded: false,
+ },
+});
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx b/packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx
index ea562c7..6c5005f 100644
--- a/packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx
+++ b/packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx
@@ -44,7 +44,9 @@ export interface RichTextItem {
text?: {
content: string;
- link: string | null;
+ link: {
+ url: string | null;
+ } | null;
};
}
@@ -76,8 +78,9 @@ const RichTexts: React.FC
= ({ richTexts }) => {
case 'text': {
if (text.text) {
const { text: textData } = text;
- content = textData.link
- ? renderLink(textData.link, textData.content)
+
+ content = textData.link?.url
+ ? renderLink(textData.link.url, textData.content)
: textData.content;
} else {
content = text.plain_text;
diff --git a/packages/notion-to-jsx/src/components/Skeleton/index.tsx b/packages/notion-to-jsx/src/components/Skeleton/index.tsx
new file mode 100644
index 0000000..d5b0132
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Skeleton/index.tsx
@@ -0,0 +1,57 @@
+import { FC } from 'react';
+import * as styles from './styles.css';
+
+type SkeletonProps = {
+ /**
+ * 스켈레톤 형태 - 직사각형, 원형, 이미지 크기
+ * @default 'rect'
+ */
+ variant?: 'rect' | 'circle' | 'image';
+ /**
+ * 커스텀 너비 (px 또는 %)
+ */
+ width?: string;
+ /**
+ * 커스텀 높이 (px 또는 %)
+ */
+ height?: string;
+ /**
+ * 추가 CSS 클래스명
+ */
+ className?: string;
+};
+
+/**
+ * 콘텐츠 로딩 중에 표시되는 물결 효과가 있는 스켈레톤 컴포넌트입니다.
+ * 이미지, 텍스트 등의 로딩 상태를 표시하는 데 사용합니다.
+ */
+const Skeleton: FC = ({
+ variant = 'rect',
+ width,
+ height,
+ className,
+}) => {
+ const getVariantClass = () => {
+ switch (variant) {
+ case 'circle':
+ return styles.circle;
+ case 'image':
+ return styles.image;
+ case 'rect':
+ default:
+ return styles.rect;
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default Skeleton;
diff --git a/packages/notion-to-jsx/src/components/Skeleton/styles.css.ts b/packages/notion-to-jsx/src/components/Skeleton/styles.css.ts
new file mode 100644
index 0000000..01b907c
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Skeleton/styles.css.ts
@@ -0,0 +1,50 @@
+import { style, keyframes } from '@vanilla-extract/css';
+
+const shimmer = keyframes({
+ '0%': {
+ transform: 'translateX(-100%)',
+ },
+ '100%': {
+ transform: 'translateX(100%)',
+ },
+});
+
+export const skeleton = style({
+ display: 'inline-block',
+ height: '100%',
+ width: '100%',
+ backgroundColor: '#f0f0f0',
+ borderRadius: '4px',
+ position: 'relative',
+ overflow: 'hidden',
+ '::after': {
+ content: '""',
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ backgroundImage:
+ 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0))',
+ animation: `${shimmer} .8s infinite linear`,
+ backgroundSize: '100% 100%',
+ backgroundRepeat: 'no-repeat',
+ },
+});
+
+export const rect = style({
+ width: '100%',
+ height: '20px',
+ marginBottom: '8px',
+});
+
+export const circle = style({
+ width: '50px',
+ height: '50px',
+ borderRadius: '50%',
+});
+
+export const image = style({
+ width: '100%',
+ borderRadius: '8px',
+});