; + + case 'table': + return
+ {block.children.map((childBlock: any, index: number) => (
+
+ );
+};
+
+export default Column;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Column/ColumnList.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Column/ColumnList.tsx
new file mode 100644
index 0000000..5e273bf
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Column/ColumnList.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import Column from './Column';
+import { columnListContainer } from './styles.css';
+
+export interface ColumnListProps {
+ block: any;
+ onFocus?: () => void;
+}
+
+const ColumnList: React.FC
+ {block.children.map((column: any) => (
+
+ );
+};
+
+export default ColumnList;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Column/index.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Column/index.tsx
new file mode 100644
index 0000000..57c2139
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Column/index.tsx
@@ -0,0 +1,5 @@
+import Column from './Column';
+import ColumnList from './ColumnList';
+
+export { Column, ColumnList };
+export default ColumnList;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Column/styles.css.ts b/packages/notion-to-jsx/src/components/Renderer/components/Column/styles.css.ts
new file mode 100644
index 0000000..f53ec16
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Column/styles.css.ts
@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css';
+
+export const columnContainer = style({
+ flex: 1,
+ minWidth: 0,
+});
+
+export const columnListContainer = style({
+ display: 'flex',
+ flexDirection: 'row',
+ gap: '1rem',
+ marginBottom: '1rem',
+ width: '100%',
+ '@media': {
+ '(max-width: 420px)': {
+ flexDirection: 'column',
+ },
+ },
+});
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/LinkPreview.tsx b/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/LinkPreview.tsx
index f540ae6..ef4f4f7 100644
--- a/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/LinkPreview.tsx
+++ b/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/LinkPreview.tsx
@@ -1,13 +1,5 @@
import React, { useState, useEffect } from 'react';
-import {
- link,
- card,
- content,
- iconContainer,
- icon,
- title,
- updatedText,
-} from './styles.css';
+import * as styles from './styles.css';
export interface LinkPreviewProps {
url: string;
@@ -22,6 +14,12 @@ interface RepoData {
updated_at: string;
}
+interface FigmaData {
+ name: string;
+ url: string;
+ thumbnailUrl?: string;
+}
+
// GitHub 레포지토리 데이터를 가져오는 함수
const fetchGitHubRepoData = async (
repoPath: string
@@ -42,6 +40,67 @@ const fetchGitHubRepoData = async (
}
};
+// Figma 파일 정보 추출 함수
+const extractFigmaData = (url: string): FigmaData | null => {
+ try {
+ const parsedUrl = new URL(url);
+ if (parsedUrl.hostname.includes('figma.com')) {
+ // URL에서 파일 이름 추출
+ const pathSegments = parsedUrl.pathname.split('/');
+ const fileSegment = pathSegments.find((segment) =>
+ segment.includes('file')
+ );
+
+ if (!fileSegment) return null;
+
+ // 파일 ID와 이름 파싱
+ const fileIdMatch = fileSegment.match(/file\/([^/]+)/);
+ const fileId = fileIdMatch ? fileIdMatch[1] : '';
+
+ // URL에서 파일 이름 추출 (URL 파라미터에서)
+ let fileName = '';
+ let mode = '';
+
+ // URL 경로에서 파일 이름 추출 시도
+ if (pathSegments.length > 3) {
+ // URL 경로에서 이름 부분 추출 (/file/ID/NAME 형식)
+ const encodedName = pathSegments[3];
+ if (encodedName) {
+ // URL 디코딩 및 하이픈을 공백으로 변환
+ fileName = decodeURIComponent(encodedName).replace(/-/g, ' ');
+ }
+ }
+
+ // 파일 이름이 추출되지 않았으면 URL에서 직접 찾기
+ if (!fileName && parsedUrl.pathname.includes('-')) {
+ const nameMatch = parsedUrl.pathname.match(/\/([^/]+)(?:\?|$)/);
+ if (nameMatch && nameMatch[1]) {
+ fileName = decodeURIComponent(nameMatch[1].replace(/-/g, ' '));
+ }
+ }
+
+ // 파라미터에서 모드 추출 (dev, design 등)
+ if (parsedUrl.search) {
+ const searchParams = new URLSearchParams(parsedUrl.search);
+ mode = searchParams.get('mode') || '';
+ }
+
+ // 이름이 추출되지 않았으면 기본값 사용
+ fileName = fileName || 'Figma Design';
+
+ return {
+ name: fileName,
+ url: url,
+ thumbnailUrl: 'https://static.figma.com/app/icon/1/favicon.svg',
+ };
+ }
+ return null;
+ } catch (error) {
+ console.error('Error parsing Figma URL:', error);
+ return null;
+ }
+};
+
// GitHub URL에서 레포지토리 경로 추출
const extractRepoPathFromUrl = (url: string): string | null => {
try {
@@ -62,6 +121,21 @@ const extractRepoPathFromUrl = (url: string): string | null => {
}
};
+// URL이 어떤 타입의 링크인지 확인
+const getLinkType = (url: string): 'github' | 'figma' | 'unknown' => {
+ try {
+ const parsedUrl = new URL(url);
+ if (parsedUrl.hostname === 'github.com') {
+ return 'github';
+ } else if (parsedUrl.hostname.includes('figma.com')) {
+ return 'figma';
+ }
+ return 'unknown';
+ } catch {
+ return 'unknown';
+ }
+};
+
// 날짜 포맷팅 함수
const formatUpdatedTime = (dateString: string): string => {
const date = new Date(dateString);
@@ -100,22 +174,33 @@ const formatUpdatedTime = (dateString: string): string => {
const LinkPreview: React.FC
-
- 
+
+ {linkType === 'figma' && figmaData ? (
+ // Figma 프리뷰 렌더링
+
+
+ ) : linkType === 'github' ? (
+ // GitHub 프리뷰 렌더링
+
+
+
+
+
+ {figmaData.name}
+ www.figma.com
+
+
-
+
+
+
+
{repoName}
+
+ {loading ? 'Loading...' : `${repoName} • ${updatedTimeText}`}
+
+
- = ({ richTexts, tabIndex }) => {
+ return (
+ = ({ richTexts }) => {
return (
<>
{richTexts.map((text, index) => {
- const { bold, italic, strikethrough, underline, code, color } =
+ const { bold, italic, strikethrough, underline, code } =
text.annotations;
- const content = text.text.link ? (
-
- {text.text.content}
-
- ) : (
- text.text.content
- );
+ // 컨텐츠 렌더링 로직
+ let content: React.ReactNode;
+
+ // TODO: Refactor
+ switch (text.type) {
+ case 'text': {
+ if (text.text) {
+ const { text: textData } = text;
+ content = textData.link
+ ? renderLink(textData.link, textData.content)
+ : textData.content;
+ } else {
+ content = text.plain_text;
+ }
+ break;
+ }
+
+ case 'mention': {
+ content = text.href
+ ? renderLink(text.href, text.plain_text)
+ : text.plain_text;
+ break;
+ }
+
+ default: {
+ content = text.plain_text;
+ }
+ }
// TODO: NOTION COLOR 적용
// const colorValue =
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Table/Table.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Table/Table.tsx
new file mode 100644
index 0000000..78f5af0
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Table/Table.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { tableContainer, table, headerCell, hasRowHeader } from './styles.css';
+import TableRow from './TableRow';
+import { NotionBlock } from '../../../../types';
+
+interface TableProps {
+ block: NotionBlock;
+ tabIndex?: number;
+}
+
+const Table: React.FC = ({ block, tabIndex = 0 }) => {
+ if (!block.table || !block.children) {
+ return null;
+ }
+
+ const { table_width, has_column_header, has_row_header } = block.table;
+ const rows =
+ block.children?.filter(
+ (child: NotionBlock) => child.type === 'table_row'
+ ) || [];
+
+ return (
+ = ({
+ rowBlock,
+ cellClassName = '',
+ rowHeaderIndex = -1,
+}) => {
+ if (!rowBlock.table_row?.cells) {
+ return null;
+ }
+
+ const { cells } = rowBlock.table_row;
+
+ return (
+
+ {cells.map((cell: RichTextItem[], index: number) => {
+ const isFirstCell = index === 0;
+ const isLastCell = index === cells.length - 1;
+ const isRowHeader = index === rowHeaderIndex;
+
+ let cellClasses = [tableCell, cellClassName];
+
+ if (isFirstCell) cellClasses.push(firstCell);
+ if (isLastCell) cellClasses.push(lastCell);
+ if (isRowHeader) cellClasses.push(hasRowHeader);
+
+ return (
+
+
+ );
+ })}
+
+ );
+};
+
+export default TableRow;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Table/index.ts b/packages/notion-to-jsx/src/components/Renderer/components/Table/index.ts
new file mode 100644
index 0000000..7d14179
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Table/index.ts
@@ -0,0 +1,5 @@
+import Table from './Table';
+import TableRow from './TableRow';
+
+export { TableRow };
+export default Table;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Table/styles.css.ts b/packages/notion-to-jsx/src/components/Renderer/components/Table/styles.css.ts
new file mode 100644
index 0000000..78d9c38
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Table/styles.css.ts
@@ -0,0 +1,48 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../../../styles/theme.css';
+
+export const tableContainer = style({
+ width: '100%',
+ marginTop: vars.spacing.xs,
+ marginBottom: vars.spacing.xs,
+ borderRadius: vars.borderRadius.sm,
+ overflow: 'hidden',
+});
+
+export const table = style({
+ width: '100%',
+ borderCollapse: 'collapse',
+ borderSpacing: 0,
+ fontSize: vars.typography.fontSize.small,
+ color: 'inherit',
+});
+
+export const headerCell = style({
+ backgroundColor: '#f7f6f3',
+ fontWeight: vars.typography.fontWeight.semibold,
+});
+
+export const tableCell = style({
+ position: 'relative',
+ padding: `${vars.spacing.xs} ${vars.spacing.sm}`,
+ minHeight: '2rem',
+ border: '1px solid rgba(55, 53, 47, 0.09)',
+ borderLeft: 'none',
+ borderRight: 'none',
+ verticalAlign: 'top',
+ textAlign: 'left',
+ userSelect: 'text',
+});
+
+export const firstCell = style({
+ borderLeft: '1px solid rgba(55, 53, 47, 0.09)',
+});
+
+export const lastCell = style({
+ borderRight: '1px solid rgba(55, 53, 47, 0.09)',
+});
+
+export const hasRowHeader = style({
+ backgroundColor: '#f7f6f3',
+ fontWeight: vars.typography.fontWeight.semibold,
+});
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Toggle/Toggle.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Toggle/Toggle.tsx
new file mode 100644
index 0000000..9cfe515
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Toggle/Toggle.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { NotionBlock } from '../../../../types';
+import {
+ toggleContainer,
+ toggleHeader,
+ toggleIcon,
+ toggleIconOpen,
+ toggleContent
+} from './styles.css';
+import { RichTexts } from '../../components/RichText';
+import BlockRenderer from '../../components/Block/BlockRenderer';
+
+interface ToggleProps {
+ block: NotionBlock;
+ tabIndex?: number;
+ onFocus?: () => void;
+}
+
+const Toggle: React.FC = ({ block, tabIndex = 0, onFocus }) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ // Toggle이 없거나 children이 없는 경우 렌더링하지 않음
+ if (!block.toggle || !block.children) {
+ return null;
+ }
+
+ const handleToggle = () => {
+ setIsOpen(!isOpen);
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleToggle();
+ }
+ };
+
+ return (
+
{repoName}
-
- {loading ? 'Loading...' : `NotionX • ${updatedTimeText}`}
+ ) : (
+ // 기본 링크 프리뷰 렌더링
+
+ )}
);
};
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/styles.css.ts b/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/styles.css.ts
index 1fa9871..4f88a4f 100644
--- a/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/styles.css.ts
+++ b/packages/notion-to-jsx/src/components/Renderer/components/LinkPreview/styles.css.ts
@@ -8,16 +8,14 @@ export const link = style({
paddingBottom: vars.spacing.xxs,
});
-export const card = style({
+export const preview = style({
display: 'flex',
border: `1px solid ${vars.colors.border}`,
borderRadius: vars.borderRadius.md,
overflow: 'hidden',
transition: 'box-shadow 0.2s ease',
alignItems: 'center',
- maxHeight: '4rem',
padding: vars.spacing.base,
- paddingLeft: vars.spacing.md,
gap: vars.spacing.md,
':hover': {
boxShadow: vars.shadows.md,
@@ -28,7 +26,6 @@ export const content = style({
display: 'flex',
flex: '1 1 auto',
flexDirection: 'column',
- justifyContent: 'space-between',
overflow: 'hidden',
});
@@ -36,14 +33,14 @@ export const iconContainer = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
- maxWidth: '2.5rem',
- height: '100%',
+ width: '2.5rem',
+ height: '2.5rem',
flexShrink: 0,
});
export const icon = style({
- width: '2.5rem',
- height: '2.5rem',
+ width: '100%',
+ height: '100%',
objectFit: 'contain',
borderRadius: vars.borderRadius.sm,
});
@@ -57,10 +54,25 @@ export const title = style({
whiteSpace: 'nowrap',
});
-export const updatedText = style({
+export const description = style({
fontSize: vars.typography.fontSize.xs,
color: vars.colors.secondary,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
});
+
+/**
+ * 타입별 특수 스타일: 각 링크 타입에만 필요한 추가 스타일
+ */
+
+// GitHub 프리뷰에만 필요한 스타일
+export const githubPreview = style({
+ maxHeight: '4rem',
+ paddingLeft: vars.spacing.md,
+});
+
+// GitHub 컨텐츠에만 필요한 스타일
+export const githubContent = style({
+ justifyContent: 'space-between',
+});
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/List/ListBlocksRenderer.tsx b/packages/notion-to-jsx/src/components/Renderer/components/List/ListBlocksRenderer.tsx
index de1253e..4a258b6 100644
--- a/packages/notion-to-jsx/src/components/Renderer/components/List/ListBlocksRenderer.tsx
+++ b/packages/notion-to-jsx/src/components/Renderer/components/List/ListBlocksRenderer.tsx
@@ -15,7 +15,6 @@ const RecursiveListItem: React.FC<{
}> = ({ block, index }) => {
const blockProps = {
tabIndex: 0,
- 'data-block-id': block.id,
};
const blockType = block.type;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Quote/Quote.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Quote/Quote.tsx
new file mode 100644
index 0000000..05ba591
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Quote/Quote.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { MemoizedRichText } from '../MemoizedComponents';
+import { container } from './styles.css';
+import { RichTextItem } from '../RichText/RichTexts';
+import { richText } from '../RichText/styles.css';
+
+export interface QuoteProps {
+ richTexts: RichTextItem[];
+ tabIndex?: number;
+}
+
+const Quote: React.FC
+
-
+
{url}
++ ); +}; + +export default Quote; diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Quote/index.ts b/packages/notion-to-jsx/src/components/Renderer/components/Quote/index.ts new file mode 100644 index 0000000..ecbadeb --- /dev/null +++ b/packages/notion-to-jsx/src/components/Renderer/components/Quote/index.ts @@ -0,0 +1 @@ +export { default as Quote } from './Quote'; diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Quote/styles.css.ts b/packages/notion-to-jsx/src/components/Renderer/components/Quote/styles.css.ts new file mode 100644 index 0000000..e509316 --- /dev/null +++ b/packages/notion-to-jsx/src/components/Renderer/components/Quote/styles.css.ts @@ -0,0 +1,13 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '../../../../styles/theme.css'; + +export const container = style({ + position: 'relative', + margin: `${vars.spacing.xs} 0`, + padding: `${vars.spacing.xs} 0 ${vars.spacing.xs} 1rem`, + borderLeft: '3px solid #e1e1e1', + color: '#37352f', + fontSize: vars.typography.fontSize.base, + lineHeight: vars.typography.lineHeight.base, + fontStyle: 'italic', +}); 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 01b02fc..31de5e8 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 @@ -2,13 +2,7 @@ import React from 'react'; import { richText, link } from './styles.css'; export interface RichTextItem { - type: 'text'; - text: { - content: string; - link: string | null; - }; - content: string; - link: string | null; + type: 'text' | 'mention' | string; annotations: { bold: boolean; italic: boolean; @@ -25,31 +19,61 @@ export interface RichTextItem { color: string; plain_text: string; href: string | null; + + text?: { + content: string; + link: string | null; + }; } export interface RichTextProps { richTexts: RichTextItem[]; } +/** + * 링크 컴포넌트를 생성하는 함수 + */ +const renderLink = (href: string, content: React.ReactNode) => ( + + {content} + +); + const RichTexts: React.FC+
+
+ {rows.length > 0 && (
+ <>
+ {has_column_header && rows[0] && (
+
+
+
+ );
+};
+
+export default Table;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Table/TableRow.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Table/TableRow.tsx
new file mode 100644
index 0000000..d5ecae2
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Table/TableRow.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { tableCell, firstCell, lastCell, hasRowHeader } from './styles.css';
+import { MemoizedRichText } from '../MemoizedComponents';
+import { NotionBlock } from '../../../../types';
+import { RichTextItem } from '../RichText/RichTexts';
+
+interface TableRowProps {
+ rowBlock: NotionBlock;
+ cellClassName?: string;
+ rowHeaderIndex?: number;
+}
+
+const TableRow: React.FC
+
+ );
+};
+
+export default Toggle;
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Toggle/index.ts b/packages/notion-to-jsx/src/components/Renderer/components/Toggle/index.ts
new file mode 100644
index 0000000..8a9212c
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Toggle/index.ts
@@ -0,0 +1,3 @@
+import Toggle from './Toggle';
+
+export { Toggle };
diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Toggle/styles.css.ts b/packages/notion-to-jsx/src/components/Renderer/components/Toggle/styles.css.ts
new file mode 100644
index 0000000..527bfd3
--- /dev/null
+++ b/packages/notion-to-jsx/src/components/Renderer/components/Toggle/styles.css.ts
@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../../../styles/theme.css';
+
+export const toggleContainer = style({
+ position: 'relative',
+});
+
+export const toggleHeader = style({
+ display: 'flex',
+ alignItems: 'center',
+ cursor: 'pointer',
+ fontSize: vars.typography.fontSize.base,
+ fontWeight: vars.typography.fontWeight.normal,
+ color: 'inherit',
+ padding: `${vars.spacing.xs} 0`,
+ borderRadius: vars.borderRadius.sm,
+ ':hover': {
+ background: 'rgba(55, 53, 47, 0.08)',
+ },
+});
+
+export const toggleIcon = style({
+ marginRight: vars.spacing.sm,
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ transition: 'transform 0.2s ease',
+ width: '1.2rem',
+ height: '1.2rem',
+});
+
+export const toggleIconOpen = style({
+ transform: 'rotate(90deg)',
+});
+
+export const toggleContent = style({
+ paddingLeft: vars.spacing.lg,
+ marginTop: vars.spacing.xs,
+ overflow: 'hidden',
+});
diff --git a/packages/notion-to-jsx/src/types/index.ts b/packages/notion-to-jsx/src/types/index.ts
index 2ead73c..da22fe2 100644
--- a/packages/notion-to-jsx/src/types/index.ts
+++ b/packages/notion-to-jsx/src/types/index.ts
@@ -12,7 +12,11 @@ export interface NotionBlock {
| 'numbered_list_item'
| 'code'
| 'image'
- | 'bookmark';
+ | 'bookmark'
+ | 'table'
+ | 'table_row'
+ | 'quote'
+ | 'toggle';
paragraph?: {
rich_text: RichTextItem[];
color: string;
@@ -52,4 +56,26 @@ export interface NotionBlock {
url: string;
caption: RichTextItem[];
};
+ table?: {
+ table_width: number;
+ has_column_header: boolean;
+ has_row_header: boolean;
+ };
+ table_row?: {
+ cells: RichTextItem[][];
+ };
+ quote?: {
+ rich_text: RichTextItem[];
+ color: string;
+ };
+ toggle?: {
+ rich_text: RichTextItem[];
+ color: string;
+ };
+ children?: NotionBlock[];
+ has_children?: boolean;
+ parent?: {
+ type: string;
+ [key: string]: any;
+ };
}
+
+ ▶
+
+
+
+ {isOpen && block.children && (
+
+ {block.children.map((childBlock, index) => (
+
+ )}
+