Skip to content

Commit 795ba95

Browse files
01-binary01-binary
committed
refactor: 폴더 구조 개선
1 parent 3574af4 commit 795ba95

File tree

1 file changed

+100
-97
lines changed
  • packages/notion-to-jsx/src/components/Renderer

1 file changed

+100
-97
lines changed

‎packages/notion-to-jsx/src/components/Renderer/index.tsx

Lines changed: 100 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -27,117 +27,120 @@ const notion = {
2727
// }
2828
// `;
2929

30-
export const Renderer: React.FC<{
30+
interface Props {
3131
isDarkMode?: boolean;
3232
onBlockFocus?: (index: number) => void;
33-
}> = React.memo(({ isDarkMode = false, onBlockFocus }) => {
34-
const [blocks, setBlocks] = useState<NotionBlock[]>([]);
35-
const theme = isDarkMode ? darkTheme : lightTheme;
36-
const [focusedIndex, setFocusedIndex] = useState<number>(-1);
33+
}
34+
export const Renderer: React.FC<Props> = React.memo(
35+
({ isDarkMode = false, onBlockFocus }) => {
36+
const [blocks, setBlocks] = useState<NotionBlock[]>([]);
37+
const theme = isDarkMode ? darkTheme : lightTheme;
38+
const [focusedIndex, setFocusedIndex] = useState<number>(-1);
3739

38-
// For test
39-
useEffect(() => {
40-
const fetchBlocks = async () => {
41-
const result = await notion.getPageBlocks();
42-
setBlocks(result);
43-
};
40+
// For test
41+
useEffect(() => {
42+
const fetchBlocks = async () => {
43+
const result = await notion.getPageBlocks();
44+
setBlocks(result);
45+
};
4446

45-
fetchBlocks();
46-
}, []);
47+
fetchBlocks();
48+
}, []);
4749

48-
const handleBlockFocus = useCallback(
49-
(index: number) => {
50-
setFocusedIndex(index);
51-
onBlockFocus?.(index);
52-
},
53-
[onBlockFocus]
54-
);
50+
const handleBlockFocus = useCallback(
51+
(index: number) => {
52+
setFocusedIndex(index);
53+
onBlockFocus?.(index);
54+
},
55+
[onBlockFocus]
56+
);
5557

56-
const renderedBlocks = useMemo(() => {
57-
const result: JSX.Element[] = [];
58+
const renderedBlocks = useMemo(() => {
59+
const result: JSX.Element[] = [];
5860

59-
for (let i = 0; i < blocks.length; i++) {
60-
const block = blocks[i];
61-
if (!block) break;
61+
for (let i = 0; i < blocks.length; i++) {
62+
const block = blocks[i];
63+
if (!block) break;
6264

63-
if (
64-
block.type === 'bulleted_list_item' &&
65-
(i === 0 || blocks[i - 1]?.type !== 'bulleted_list_item')
66-
) {
67-
result.push(
68-
<List
69-
as="ul"
70-
type="bulleted"
71-
role="list"
72-
aria-label="Bulleted list"
73-
key={block.id}
74-
>
75-
<ListBlocksRenderer
76-
blocks={blocks}
77-
startIndex={i}
65+
if (
66+
block.type === 'bulleted_list_item' &&
67+
(i === 0 || blocks[i - 1]?.type !== 'bulleted_list_item')
68+
) {
69+
result.push(
70+
<List
71+
as="ul"
7872
type="bulleted"
79-
/>
80-
</List>
81-
);
82-
while (
83-
i + 1 < blocks.length &&
84-
blocks[i + 1] &&
85-
blocks[i + 1]?.type === 'bulleted_list_item'
73+
role="list"
74+
aria-label="Bulleted list"
75+
key={block.id}
76+
>
77+
<ListBlocksRenderer
78+
blocks={blocks}
79+
startIndex={i}
80+
type="bulleted"
81+
/>
82+
</List>
83+
);
84+
while (
85+
i + 1 < blocks.length &&
86+
blocks[i + 1] &&
87+
blocks[i + 1]?.type === 'bulleted_list_item'
88+
) {
89+
i++;
90+
}
91+
} else if (
92+
block.type === 'numbered_list_item' &&
93+
(i === 0 || blocks[i - 1]?.type !== 'numbered_list_item')
8694
) {
87-
i++;
88-
}
89-
} else if (
90-
block.type === 'numbered_list_item' &&
91-
(i === 0 || blocks[i - 1]?.type !== 'numbered_list_item')
92-
) {
93-
result.push(
94-
<List
95-
as="ol"
96-
type="1"
97-
role="list"
98-
aria-label="Numbered list"
99-
key={block.id}
100-
>
101-
<ListBlocksRenderer
102-
blocks={blocks}
103-
startIndex={i}
104-
type="numbered"
105-
/>
106-
</List>
107-
);
108-
while (
109-
i + 1 < blocks.length &&
110-
blocks[i + 1] &&
111-
blocks[i + 1]?.type === 'numbered_list_item'
95+
result.push(
96+
<List
97+
as="ol"
98+
type="1"
99+
role="list"
100+
aria-label="Numbered list"
101+
key={block.id}
102+
>
103+
<ListBlocksRenderer
104+
blocks={blocks}
105+
startIndex={i}
106+
type="numbered"
107+
/>
108+
</List>
109+
);
110+
while (
111+
i + 1 < blocks.length &&
112+
blocks[i + 1] &&
113+
blocks[i + 1]?.type === 'numbered_list_item'
114+
) {
115+
i++;
116+
}
117+
} else if (
118+
block.type !== 'bulleted_list_item' &&
119+
block.type !== 'numbered_list_item'
112120
) {
113-
i++;
121+
result.push(
122+
<BlockRenderer
123+
key={block.id}
124+
block={block}
125+
index={i}
126+
onFocus={() => handleBlockFocus(i)}
127+
/>
128+
);
114129
}
115-
} else if (
116-
block.type !== 'bulleted_list_item' &&
117-
block.type !== 'numbered_list_item'
118-
) {
119-
result.push(
120-
<BlockRenderer
121-
key={block.id}
122-
block={block}
123-
index={i}
124-
onFocus={() => handleBlockFocus(i)}
125-
/>
126-
);
127130
}
128-
}
129131

130-
return result;
131-
}, [blocks, handleBlockFocus]);
132+
return result;
133+
}, [blocks, handleBlockFocus]);
132134

133-
return (
134-
<ThemeProvider theme={theme}>
135-
{/* <GlobalStyle /> */}
136-
<Container role="main" aria-label="Notion page content">
137-
{renderedBlocks}
138-
</Container>
139-
</ThemeProvider>
140-
);
141-
});
135+
return (
136+
<ThemeProvider theme={theme}>
137+
{/* <GlobalStyle /> */}
138+
<Container role="main" aria-label="Notion page content">
139+
{renderedBlocks}
140+
</Container>
141+
</ThemeProvider>
142+
);
143+
}
144+
);
142145

143146
Renderer.displayName = 'Renderer';

0 commit comments

Comments
 (0)