Markdown 새부 스타일 수정 (10.06)

Markdown 새부 스타일 수정 (10.06)

src/components/ui/Markdown/overrides/code/index.tsx

@@ -34,9 +34,6 @@ const code = ({ children, className = "", ...props }: IProps) => {
   const language = className?.replace("lang-", "");
 
   const isText = language === "txt" || language === "text";
-  const TXT_CLASS = isText
-    ? "!text-markdown1 !transition-[color,background-color] !bg-markdown"
-    : "";
 
   return language ? (
     <SyntaxHighlighter
@@ -46,7 +43,7 @@ const code = ({ children, className = "", ...props }: IProps) => {
       showInlineLineNumbers={true}
       style={oneDark}
       codeTagProps={{ className: "text-sm" }}
-      className={`relative w-full rounded-md !p-4 shadow-md !transition-[background-color] !text-shadow-none ${TXT_CLASS}`}
+      className="relative w-full rounded-md !p-4 shadow-md !transition-[background-color] !text-shadow-none"
     >
       {String(children).replace(/\n$/, "")}
     </SyntaxHighlighter>

src/components/ui/Markdown/overrides/img.tsx

@@ -21,14 +21,17 @@ const img = (props: ImageProps) => {
   }
 
   return (
-    <NextImage
-      alt={alt ?? "post_image"}
-      loading="lazy"
-      {...rest}
-      width={1000}
-      height={1000}
-      className="mx-auto my-0 h-auto w-auto max-w-full rounded-sm shadow-md"
-    />
+    <>
+      <NextImage
+        alt={alt ?? "post_image"}
+        loading="lazy"
+        {...rest}
+        width={1000}
+        height={1000}
+        className="mx-auto my-0 h-auto w-auto max-w-full rounded-md shadow-sm"
+      />
+      {alt && <p className="mt-2 text-center text-sm text-gray-400">{alt}</p>}
+    </>
   );
 };
 

src/components/ui/Markdown/overrides/p.tsx

@@ -1,15 +1,7 @@
 import React from "react";
 
-const p = (props: JSX.IntrinsicElements["p"]) => {
-  const { children, ...rest } = props;
-
-  const child = (children as JSX.Element[])?.[0];
-
-  if ((child && child.type === "p") || child.type === "div") {
-    return <>{props.children}</>;
-  }
-
-  return <p {...rest}>{props.children}</p>;
+const p = ({ children, ...rest }: JSX.IntrinsicElements["p"]) => {
+  return <div {...rest}>{children}</div>;
 };
 
 export default p;

src/components/ui/client/post/PostContent/Toc/item.tsx

@@ -16,7 +16,7 @@ const TocItem = ({ item, isActive, onClick }: IProps) => {
   return (
     <li
       style={{ paddingLeft: `${level * 0.8}rem` }}
-      className={`${className} w-full [&.active>a]:text-primary [&.active]:-translate-x-1`}
+      className={`${className} w-full [&.active>a]:text-effect1`}
     >
       <a
         id={id}

src/styles/globals.css

@@ -146,7 +146,7 @@
       @apply mt-0;
     }
 
-    & p {
+    & div {
       @apply relative;
     }
 
@@ -187,7 +187,7 @@
     & h4,
     & h5,
     & h6,
-    & p,
+    & div,
     & td,
     & ul,
     & ol {
@@ -196,7 +196,7 @@
       @apply break-all transition-[color];
     }
 
-    & p,
+    & div,
     & ul,
     & ol,
     & table,
@@ -235,5 +235,18 @@
     & a {
       @apply text-teal-400 hover:underline;
     }
+
+    & table {
+      @apply w-full text-primary transition-[color];
+
+      & td {
+        @apply border-x-0;
+      }
+
+      & td,
+      & th {
+        @apply p-2;
+      }
+    }
   }
 }

src/utils/getChildrenText.ts

@@ -1,6 +1,8 @@
+import removeMd from "remove-markdown";
+
 const getChildrenText = (node: React.ReactElement): string => {
   if (typeof node === "string") {
-    const text = (node as string).replace(/[{}[\]/?.,;:|)*~`!^\-_+<>@#$%&\\=('"]/g, " ");
+    const text = removeMd(node);
     return text;
   }