feat: change wordcloud package

Author: kim

package.json

@@ -24,6 +24,8 @@
     "@tanstack/react-query": "4.40.1",
     "@tanstack/react-query-devtools": "4.40.1",
     "@uiw/react-codemirror": "4.23.13",
+    "@visx/scale": "3.12.0",
+    "@visx/wordcloud": "3.12.0",
     "date-fns": "4.1.0",
     "file-saver": "2.0.5",
     "i18next": "24.2.3",
@@ -38,7 +40,6 @@
     "react-markdown": "9.1.0",
     "react-mde": "12.0.8",
     "react-toastify": "11.0.5",
-    "react-wordcloud": "1.2.7",
     "remark-breaks": "4.0.0",
     "remark-gfm": "4.0.1",
     "stopword": "3.1.5"

src/modules/analytics/WordCloud.tsx

@@ -1,10 +1,18 @@
-import type { MinMaxPair } from 'react-wordcloud';
-import ReactWordcloud from 'react-wordcloud';
-
 import { Dialog } from '@mui/material';
 
+import { scaleLog } from '@visx/scale';
+import { Wordcloud as VWordCloud } from '@visx/wordcloud';
+
 import { ANALYTICS_WORDS_CLOUD_MODAL_ID } from '@/config/selectors';
 
+type WordData = {
+  text: string;
+  value: number;
+};
+
+const colors = ['#143059', '#2F6B9A', '#82a6c2'];
+const fixedValueGenerator = () => 2.5;
+
 type Props = {
   wordCounts: { [key: string]: number };
   open: boolean;
@@ -20,15 +28,45 @@ function WordCloud({
     value,
   }));
 
-  const options = {
-    fontSizes: [20, 50] as MinMaxPair,
-    rotations: 2.5,
-    rotationAngles: [0, 45] as [number, number],
-  };
+  const fontScale = scaleLog({
+    domain: [
+      Math.min(...words.map((w) => w.value)),
+      Math.max(...words.map((w) => w.value)),
+    ],
+    range: [20, 50],
+  });
+  const fontSizeSetter = (datum: WordData) => fontScale(datum.value);
 
   return (
     <Dialog open={open} onClose={onClose} id={ANALYTICS_WORDS_CLOUD_MODAL_ID}>
-      <ReactWordcloud words={words} options={options} size={[600, 400]} />
+      <div className="wordcloud">
+        <VWordCloud
+          words={words}
+          width={600}
+          height={400}
+          fontSize={fontSizeSetter}
+          font={'Nunito'}
+          padding={2}
+          spiral={'archimedean'}
+          rotate={0}
+          random={fixedValueGenerator}
+        >
+          {(cloudWords) =>
+            cloudWords.map((w, i) => (
+              <text
+                key={w.text}
+                color={colors[i % colors.length]}
+                textAnchor={'middle'}
+                transform={`translate(${w.x}, ${w.y}) rotate(${w.rotate})`}
+                fontSize={w.size}
+                fontFamily={w.font}
+              >
+                {w.text}
+              </text>
+            ))
+          }
+        </VWordCloud>
+      </div>
     </Dialog>
   );
 }

src/modules/common/useSendMessage.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 
+import { AppActionsType } from '@/config/appActions';
 import { AppDataTypes } from '@/config/appData';
 import { mutations } from '@/config/queryClient';
 
@@ -10,6 +11,7 @@ import { mutations } from '@/config/queryClient';
 export const useSendMessage = () => {
   const { mutateAsync: postAppDataAsync, isLoading } =
     mutations.usePostAppData();
+  const { mutateAsync: postAppActionAsync } = mutations.usePostAppAction();
 
   const sendMessage = useCallback(
     async (newUserComment: string) => {
@@ -21,9 +23,14 @@ export const useSendMessage = () => {
         type: AppDataTypes.UserComment,
       });
 
+      await postAppActionAsync({
+        type: AppActionsType.Reply,
+        data: { content: newUserComment },
+      });
+
       return userMessage;
     },
-    [postAppDataAsync],
+    [postAppDataAsync, postAppActionAsync],
   );
 
   return { sendMessage, isLoading };