🚨 경고 해결 or 미해결

1. Warning: Received true for a non-boolean attribute inline. If you want to write it to the DOM, pass a string instead: inline="true" or inline={value.toString()}.

이전에 다른 프로젝트를 할 때도 styled-components를 사용하면서 경고가 발생했었습니다.
그때는 여기를 보고 prefix로 $를 주는 것으로 해결했었는데 이번에는 에러 문구 제대로 읽어보고 react-markdown으로 처리한 구문에서 커스터마이징할 때 문제가 발생했다고 판단해서 하나하나 변경하면서 실험해보면서 경고를 제거했습니다.

// 경고가 일어나는 부분만 가져왔습니다.
// code에서 inline을 제외시키고 props로 넣어주니 경고가 사라졌습니다.
<ReactMarkdown
  className="py-4 px-8 prose dark:prose-invert whitespace-normal max-w-full"
  remarkPlugins={[remarkGfm]}
  components={{
    code: ({ node, inline, ...props }) => (
      <code
        {...props}
        className="bg-indigo-700 px-2 py-1 rounded-sm text-white after:contents before:contents group-odd:p-0 group-even:p-0 group-odd:bg-transparent group-even:bg-transparent"
      />
    ),
>
  {markdown}
</ReactMarkdown>

2. Warning: validateDOMNesting(...): <figure> cannot appear as a descendant of <p>.

react-markdown을 사용하면서 발생한 경고입니다.
react-markdown에서 이미지를 처리할 때 자동으로 <p>에 넣어서 처리해주는데 이미지는 <figure>내부에서 그려져서 자동으로 <p>내부에 <figure>이 들어가서 발생하는 경고입니다.
현재는 어떻게 해결할지 떠오르지 않아서 일단은 기록만 하겠습니다.

3. Warning: Prop d did not match.

흑색화면으로 시작할 경우 아이콘이 즉시 변하지 않고 경고가 발생합니다.

추측으로는 Next.js는 미리 html을 만들기 때문에 localstorage에 저장된 theme값을 미리 불러올 때 값을 제대로 불러오지 못해서 경고가 발생하는 것으로 생각됩니다. ( next-theme 사용중 )