Merge pull request #27 from SkyLightQP/develop

feat: implement collapse markdown
SkyLightQP · Nov 13, 2024 · 361ef8d · 361ef8d
2 parents 3a738d1 + e32cc0a
commit 361ef8d
Show file tree

Hide file tree

Showing 6 changed files with 818 additions and 389 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,10 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.33.1",
     "react-hotkeys-hook": "^3.4.6",
-    "react-markdown": "^8.0.5",
+    "react-markdown": "^9.0.1",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.0",
     "sharp": "^0.33.5"
   },
   "devDependencies": {

diff --git a/src/app/admin/content/page.tsx b/src/app/admin/content/page.tsx
@@ -35,7 +35,6 @@ interface AddForm {
   readonly title: string;
   readonly subtitle: string;
   readonly description: string;
-  readonly stack: string;
   readonly section: string;
   readonly hasMargin: boolean;
   readonly isHidden: boolean;
@@ -45,7 +44,6 @@ const DEFAULT_VALUE: AddForm = {
   title: '',
   subtitle: '',
   description: '',
-  stack: '',
   section: '',
   hasMargin: true,
   isHidden: false
@@ -96,7 +94,7 @@ const Page: React.FC = () => {
       title: values.title,
       subtitle: values.subtitle,
       description: values.description,
-      stack: values.stack,
+      stack: '',
       sectionId: Number(values.section),
       order: data.length + 1,
       hasMargin: values.hasMargin,
@@ -163,22 +161,7 @@ const Page: React.FC = () => {
             `}
             {...register('subtitle')}
           />
-          <Input
-            placeholder="스택"
-            background="white"
-            css={css`
-              grid-column: 1 / 3;
-            `}
-            {...register('stack')}
-          />
-          <Select
-            placeholder="섹션"
-            background="white"
-            css={css`
-              grid-column: 3 / 4;
-            `}
-            {...register('section', { required: true })}
-          >
+          <Select placeholder="섹션" background="white" {...register('section', { required: true })}>
             <SectionOptions />
           </Select>
           <Checkbox
@@ -236,7 +219,6 @@ const Page: React.FC = () => {
                 title: item.title,
                 subtitle: item.subtitle,
                 description: item.description,
-                stack: item.stack,
                 section: String(item.sections.id),
                 hasMargin: item.hasMargin,
                 isHidden: item.isHidden
@@ -251,7 +233,6 @@ const Page: React.FC = () => {
                 title: item.title,
                 subtitle: item.subtitle,
                 description: item.description,
-                stack: item.stack,
                 section: String(item.sections.id),
                 hasMargin: item.hasMargin,
                 isHidden: item.isHidden
@@ -294,19 +275,17 @@ const Page: React.FC = () => {
       <UpdateModal
         modalController={updateDialog}
         fields={[
-          { id: 'title', label: '제목', component: Input },
-          { id: 'subtitle', label: '부제목', component: Input },
-          { id: 'description', label: '내용', component: Textarea },
-          { id: 'stack', label: '스택', component: Input },
-          { id: 'section', label: '섹션', component: Select, option: <SectionOptions /> },
-          { id: 'hasMargin', label: '컨텐츠 간 간격 추가', component: Checkbox },
-          { id: 'isHidden', label: '숨김', component: Checkbox }
+          { id: 'title', label: '제목', component: <Input /> },
+          { id: 'subtitle', label: '부제목', component: <Input /> },
+          { id: 'description', label: '내용', component: <Textarea height="sm" /> },
+          { id: 'section', label: '섹션', component: <Select />, option: <SectionOptions /> },
+          { id: 'hasMargin', label: '컨텐츠 간 간격 추가', component: <Checkbox /> },
+          { id: 'isHidden', label: '숨김', component: <Checkbox /> }
         ]}
         defaultValue={[
           modalData.value.title,
           modalData.value.subtitle,
           modalData.value.description,
-          modalData.value.stack,
           modalData.value.section,
           modalData.value.hasMargin,
           modalData.value.isHidden
@@ -318,7 +297,6 @@ const Page: React.FC = () => {
               title: values.title,
               subtitle: values.subtitle,
               description: values.description,
-              stack: values.stack,
               sectionId: Number(values.section),
               hasMargin: values.hasMargin,
               isHidden: values.isHidden

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
@@ -151,7 +151,7 @@ const Page: React.FC = () => {
           {
             id: 'title',
             label: '제목',
-            component: Input
+            component: <Input />
           }
         ]}
         defaultValue={[modalData.title]}

diff --git a/src/components/ContentView/DescriptionView/index.tsx b/src/components/ContentView/DescriptionView/index.tsx
@@ -3,6 +3,9 @@
 import { FC } from 'react';
 import ReactMarkdown from 'react-markdown';
 import styled from '@emotion/styled';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
 
 interface DescriptionViewProps {
   readonly description: string;
@@ -22,16 +25,27 @@ export const MarkdownWrapper = styled.div`
       content: '- ';
     }
 
+    &:lang(ko) {
+      word-break: keep-all;
+    }
+
     @media screen and (max-width: 700px) {
       width: 300px;
     }
   }
+
+  & summary {
+    cursor: pointer;
+    padding-left: 2px;
+  }
 `;
 
 export const DescriptionView: FC<DescriptionViewProps> = ({ description }) => {
   return (
     <MarkdownWrapper>
-      <ReactMarkdown>{description}</ReactMarkdown>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw, rehypeSanitize]}>
+        {description}
+      </ReactMarkdown>
     </MarkdownWrapper>
   );
 };
diff --git a/src/components/Dialogs/UpdateModal.tsx b/src/components/Dialogs/UpdateModal.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { Fragment, useEffect, useRef } from 'react';
+import React, { cloneElement, FC, Fragment, useEffect, useRef } from 'react';
 import {
   Button,
   ComponentWithAs,
@@ -23,7 +23,7 @@ import { Space } from '../Space';
 interface FieldType {
   readonly id: string;
   readonly label: string;
-  readonly component: ComponentWithAs<any>;
+  readonly component: JSX.Element;
   readonly option?: JSX.Element;
 }
 
@@ -58,20 +58,18 @@ const UpdateModal: React.FC<UpdateModalProps> = ({ modalController, fields, defa
         isFirstOpen.current = false;
       }}
       isCentered
-      size="2xl"
+      size="4xl"
     >
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>수정하기</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
           <FormControl>
-            {fields.map(({ id, label, component: Component, option }) => (
+            {fields.map(({ id, label, component, option }) => (
               <Fragment key={id}>
                 <FormLabel htmlFor={id}>{label}</FormLabel>
-                <Component id={id} placeholder={label} {...register(id)}>
-                  {option && option}
-                </Component>
+                {cloneElement(component, { id, placeholder: label, ...register(id), children: option && option })}
                 <Space y={10} />
               </Fragment>
             ))}