fix: 리스트로 작성된 콘텐츠가 렌더링되지 않는 문제 해결 (#8)

블록 요소는 `p` 태그의 자식 요소로 사용할 수 없기 때문에 `gatsby-config.js`에서 `ul` 요소로 작성한 부분이 `p` 태그의 자식으로 주입될 시 정상적으로 렌더링되지 않는 문제가 발생했고, `<ul>`로 시작할 경우 `p` 대신 `div`로 렌더링하도록 함으로써 문제를 해결 resolves #8 Signed-off-by: chayeoi <[email protected]>
chayeoi · Dec 28, 2020 · 5456de1 · 5456de1
1 parent d5ec73f
commit 5456de1
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/components/Activities/Activities.tsx b/src/components/Activities/Activities.tsx
@@ -54,7 +54,7 @@ function Activities() {
               {splitParagraph(activity.description).map((paragraph, index) => (
                 <Text
                   key={index}
-                  as="p"
+                  as={paragraph.startsWith('<ul>') ? 'div' : 'p'}
                   variant="p"
                   dangerouslySetInnerHTML={{ __html: paragraph }}
                   sx={{

diff --git a/src/components/Projects/Projects.tsx b/src/components/Projects/Projects.tsx
@@ -87,7 +87,7 @@ function Projects() {
                 {splitParagraph(project.description).map((paragraph, index) => (
                   <Text
                     key={index}
-                    as="p"
+                    as={paragraph.startsWith('<ul>') ? 'div' : 'p'}
                     dangerouslySetInnerHTML={{ __html: paragraph }}
                     variant="p"
                     sx={{