ISSUE : PDP내 markdown parsing 관련 문제

[hongregii]

PDP 내에서도 chatpair 안에 markdown -> html을 적용해야 하는데, 성우님이 적용하신거 그대로 쓰려니까 CSR에서만 사용할 수 있다는 문제가 있었어요 SEO면에서 PDP는 SSR 컴포인게 맞아서, 대안을 찾아보는 중인데 마뜩찮네요...

일단 더 알아보겠습니다. @ABizCho

[ABizCho]

@hongregii react-markdown 사용상의 문제인가요? https://velog.io/@rieulp/ReactMarkdownAndSyntaxHighlighter 맞다면 이 블로그 글 한번 참고해보십사 합니다!

[ABizCho]

아 그리고 관련 컴포넌트는 아래처럼 분리해둬서 조금 보류해뒀다가, 컴포넌트 가져다가 쓰시는게 더 나으실 수도 있습니다!

import { TLoadChatStatus } from "@/atoms/chat";
import CircularCheckbox from "@/components/common/CheckBox/CircularCheckBox";
import { ReactMarkdown } from "react-markdown/lib/react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { gruvboxDark } from "react-syntax-highlighter/dist/esm/styles/prism";

const ChatContent = ({
  chatPairs,
  loadChatStatus,
  chatSavedStatus,
  onChangeCheckBox,
  scrollRef,
}: any) => {
  return (
    <div className="chatCont flex-grow overflow-y-auto flex justify-center mb-[96px]">
      <div className="chatBox w-full" ref={scrollRef}>
        {chatPairs?.map((chatLine: any, index: any) => (
          <ChatPairWrapper key={index} index={index}>
            <div className="chatPairBox w-full flex flex-col justify-center self-center">
              {chatLine.question && (
                <MsgBox isQuestion={true}>{chatLine.question}</MsgBox>
              )}

              {chatLine.answer && (
                <MsgBox isQuestion={false}>
                  <MarkdownWrapper>{chatLine.answer}</MarkdownWrapper>
                </MsgBox>
              )}
            </div>
            {!(loadChatStatus.status === TLoadChatStatus.SHOWING) && (
              <div className="checkboxContainer ml-12 w-full sm:w-3 sm:h-full">
                <div className="flex flex-row justify-end w-full h-full">
                  <CircularCheckbox
                    isDisabled={chatSavedStatus}
                    isChecked={!!chatLine.isChecked}
                    onChangeCheckBox={() => onChangeCheckBox(index)}
                  />
                </div>
              </div>
            )}
          </ChatPairWrapper>
        ))}
      </div>
    </div>
  );
};

export default ChatContent;

//
const ChatPairWrapper = ({ children, index }: any) => {
  return (
    <div
      key={index}
      className={`w-full py-5 ${
        index % 2 === 0
          ? "bg-gray-300 dark:bg-[#2c2c33]"
          : "bg-gray-200 dark:bg-[#202024]" // 홀짝 배경색 변경
      } flex flex-row
      `}
    >
      <div className="chatPairContainer h-full flex flex-col sm:flex-row items-center w-full md:w-2/5 m-auto">
        {children}
      </div>
    </div>
  );
};

const MsgBox = ({ children, isQuestion }: any) => {
  const styleClass = isQuestion
    ? "rounded-chat-question bg-primary text-white self-end"
    : "rounded-chat-answer bg-gray-500 text-white self-start";
  return (
    <div className={`msgBox mt-4 p-5 max-w-sm text-xs ${styleClass}`}>
      {children}
    </div>
  );
};

const MarkdownWrapper = ({ children }: any) => {
  return (
    <div className="overflow-auto max-w-full rounded-md">
      <ReactMarkdown
        components={{
          p({ node, children }: any) {
            return <p className="answer-p !text-left ml-1">{children}</p>;
          },
          ol({ node, children }: any) {
            return (
              <ol className="answer-ol font-bold mb-2 ml-1">{children}</ol>
            );
          },
          li({ node, children }: any) {
            return <li className="answer-li text-left">{children}</li>;
          },
          code({ node, inline, className, children, ...props }: any) {
            const match = /language-(\w+)/.exec(className || "");
            const language = match ? match[1] : null;

            if (!inline) {
              return (
                <SyntaxHighlighter
                  style={
                    gruvboxDark as {
                      [key: string]: React.CSSProperties;
                    }
                  }
                  language={language || "javascript"}
                  PreTag="div"
                  {...props}
                >
                  {String(children).replace(/\n$/, "")}
                </SyntaxHighlighter>
              );
            } else {
              return (
                <code className={className} {...props}>
                  {children}
                </code>
              );
            }
          },
        }}
      >
        {children}
      </ReactMarkdown>
    </div>
  );
};

[hongregii]

https://github.com/modulersYJ/ganoverflow-front/pull/89#issue-1856027397