마크업 숫자 리스트 스타일 추가

Author: constmoon

frontend/assets/styles/markdown.ts

@@ -22,6 +22,11 @@ const MarkdownStyle = styled.div`
     li {
         margin: 0.3rem 0.6rem;
         padding: 0;
+    }
+    ol li {
+        list-style: numeric;
+    }
+    ul li {
         list-style: circle;
     }
     hr {

frontend/pages/coc/index.tsx

@@ -10,14 +10,18 @@ import matter from 'gray-matter'
 import ReactMarkdown from 'react-markdown'
 import HeadingComponents from '../../components/core/MarkdownHeadings'
 import MarkdownStyle from '../../assets/styles/markdown'
+import remarkGfm from 'remark-gfm'
 
 const CoC: NextPage = (props: any) => {
     const { t } = useTranslation()
 
     return (
         <div>
             <MarkdownStyle>
-                <ReactMarkdown components={HeadingComponents}>
+                <ReactMarkdown
+                    components={HeadingComponents}
+                    remarkPlugins={[remarkGfm]}
+                >
                     {props.content}
                 </ReactMarkdown>
             </MarkdownStyle>

frontend/pages/sponsor/benefit.tsx

@@ -3,10 +3,11 @@ import type { NextPage, GetServerSideProps } from 'next'
 import { PageName } from '../../data/enums/PageName'
 import { SponsorPage } from '../../interfaces/PageProps'
 import { GetServerSidePropsContext } from 'next'
-import { getSponsorBenefit, getSponsorTerms } from '../api/sponsor'
+import { getSponsorBenefit } from '../api/sponsor'
 import ReactMarkdown from 'react-markdown'
 import HeadingComponents from '../../components/core/MarkdownHeadings'
 import MarkdownStyle from '../../assets/styles/markdown'
+import remarkGfm from 'remark-gfm'
 
 interface SponsorBenefitPage extends SponsorPage {
     locale: string
@@ -16,7 +17,10 @@ const SponsorBenefit: NextPage = (props: SponsorBenefitPage) => {
     return (
         <div>
             <MarkdownStyle>
-                <ReactMarkdown components={HeadingComponents}>
+                <ReactMarkdown
+                    components={HeadingComponents}
+                    remarkPlugins={[remarkGfm]}
+                >
                     {props.content[props.locale]}
                 </ReactMarkdown>
             </MarkdownStyle>

frontend/pages/sponsor/faq.tsx

@@ -8,6 +8,7 @@ import ReactMarkdown from 'react-markdown'
 import HeadingComponents from '../../components/core/MarkdownHeadings'
 import MarkdownStyle from '../../assets/styles/markdown'
 import PageTitle from '../../components/core/PageTitle'
+import remarkGfm from 'remark-gfm'
 
 interface SponsorSponsorFaqPage extends SponsorPage {
     locale: string
@@ -18,7 +19,10 @@ const SponsorFaq: NextPage = (props: SponsorSponsorFaqPage) => {
         <div>
             <PageTitle title={props.pageName} />
             <MarkdownStyle>
-                <ReactMarkdown components={HeadingComponents}>
+                <ReactMarkdown
+                    components={HeadingComponents}
+                    remarkPlugins={[remarkGfm]}
+                >
                     {props.content[props.locale]}
                 </ReactMarkdown>
             </MarkdownStyle>

frontend/pages/sponsor/index.tsx

@@ -8,6 +8,7 @@ import HeadingComponents from '../../components/core/MarkdownHeadings'
 import MarkdownStyle from '../../assets/styles/markdown'
 import PageTitle from '../../components/core/PageTitle'
 import { getSponsorJoin } from '../api/sponsor'
+import remarkGfm from 'remark-gfm'
 
 interface SponsorSponsorJoinPage extends SponsorPage {
     locale: string
@@ -18,7 +19,10 @@ const SponsorJoin: NextPage = (props: SponsorSponsorJoinPage) => {
         <div>
             <PageTitle title={props.pageName} />
             <MarkdownStyle>
-                <ReactMarkdown components={HeadingComponents}>
+                <ReactMarkdown
+                    components={HeadingComponents}
+                    remarkPlugins={[remarkGfm]}
+                >
                     {props.content[props.locale]}
                 </ReactMarkdown>
             </MarkdownStyle>

frontend/pages/sponsor/join.tsx

@@ -8,6 +8,7 @@ import MarkdownStyle from '../../assets/styles/markdown'
 import ReactMarkdown from 'react-markdown'
 import HeadingComponents from '../../components/core/MarkdownHeadings'
 import PageTitle from '../../components/core/PageTitle'
+import remarkGfm from 'remark-gfm'
 
 interface TermsOfSponsorPage extends SponsorPage {
     locale: string
@@ -20,7 +21,10 @@ const SponsorTerms: NextPage = (props: TermsOfSponsorPage) => {
         <>
             <PageTitle title={props.pageName} />
             <MarkdownStyle>
-                <ReactMarkdown components={HeadingComponents}>
+                <ReactMarkdown
+                    components={HeadingComponents}
+                    remarkPlugins={[remarkGfm]}
+                >
                     {props.content[props.locale]}
                 </ReactMarkdown>
             </MarkdownStyle>