fix: 공연 내용 웹 앱뷰 전용 페이지의 다크 모드 텍스트 적용

Author: Puterism

apps/preview/src/pages/ShowPreviewNoticePage/index.tsx

@@ -17,7 +17,7 @@ const ShowPreviewNoticePage: React.FC = () => {
         `}
         </style>
       </Helmet>
-      <ShowContentMarkdown content={notice} />
+      <ShowContentMarkdown content={notice} colorMode="dark" />
     </>
   );
 }

packages/ui/src/components/ShowContentMarkdown/ShowContentMarkdown.styles.ts

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled'
 
-const MarkdownContent = styled.div`
+const MarkdownContent = styled.div<{ colorMode?: 'dark' | 'light' }>`
+  color: ${({ colorMode, theme }) => colorMode === 'dark' ? theme.palette.mobile.grey.g30: 'inherit'};  
+  
   p, ul, ol, li, blockquote {
     font-size: 16px;
     font-style: normal;

packages/ui/src/components/ShowContentMarkdown/index.tsx

@@ -7,6 +7,7 @@ import Styled from './ShowContentMarkdown.styles'
 
 interface ShowContentMarkdownProps {
   content: string
+  colorMode?: 'light' | 'dark'
 }
 
 function remarkYoutubePlugin() {
@@ -37,9 +38,9 @@ function remarkYoutubePlugin() {
   }
 }
 
-const ShowContentMarkdown: React.FC<ShowContentMarkdownProps> = ({ content }) => {
+const ShowContentMarkdown: React.FC<ShowContentMarkdownProps> = ({ content, colorMode = 'dark' }) => {
   return (
-    <Styled.MarkdownContent>
+    <Styled.MarkdownContent colorMode={colorMode}>
       <Markdown
         components={{
           // eslint-disable-next-line @typescript-eslint/no-unused-vars