fix: 텍스트 변환 후 import문이 제대로 동작하지 않을 수 있던 문제 수정

Author: MU-Software

packages/common/src/components/mdx.tsx

@@ -77,13 +77,29 @@ const InnerMDXRenderer: React.FC<{ text: string, baseUrl: string }> = ({ text, b
   return <>{data}</>;
 }
 
+const lineFormatterForMDX = (line: string) => {
+  const trimmedLine = line.trim();
+
+  if (R.isEmpty(trimmedLine)) return "\n";
+
+  // import문을 위한 꼼수 - import문 다음 줄은 반드시 빈 줄이어야 합니다.
+  // 그러나 \n\n으로 변환할 경우, 다음 단계에서 <br />로 변환되므로, import문 다음에 공백이 있는 줄을 넣어서 <br />로 변환되지 않도록 합니다.
+  if (trimmedLine.startsWith("import")) return `${trimmedLine}\n \n`;
+
+  return `${trimmedLine}  \n`;
+}
+
 export const MDXRenderer: React.FC<{ text: string }> = ({ text }) => {
   // 원래 MDX는 각 줄의 마지막에 공백 2개가 있어야 줄바꿈이 되고, 또 연속 줄바꿈은 무시되지만,
   // 편의성을 위해 렌더러 단에서 공백 2개를 추가하고 연속 줄바꿈을 <br />로 변환합니다.
   const { baseUrl, debug } = useCommonContext();
 
   const ErrorHandler = debug ? DetailedMDXErrorFallback : SimplifiedMDXErrorFallback;
-  const processedText = text.split("\n").map((line) => R.isEmpty(line.trim()) ? "" : `${line.trim()}  `).join("\n").replaceAll("\n\n", "\n<br />\n");
+  const processedText = text
+    .split("\n")
+    .map(lineFormatterForMDX)
+    .join("")
+    .replaceAll("\n\n", "\n<br />\n");
 
   return <ErrorBoundary fallback={ErrorHandler}>
     <Suspense fallback={<CircularProgress />}>