Add logics for picking random name

apps/blog/src/components/CommentForm/index.tsx

@@ -2,15 +2,15 @@
 
 import { FormEventHandler, useCallback, useRef, useState } from "react";
 import { MutateOptions } from "@tanstack/react-query";
-import Typography from "@marshallku/ui/Typography";
 import Input from "@marshallku/ui/Input";
 import Textarea from "@marshallku/ui/Textarea";
 import { Icon } from "@marshallku/icon";
-import { classNames } from "@marshallku/utils";
+import { classNames, generateRandomName } from "@marshallku/utils";
 import { type CommentRequest } from "#api";
 import CommentAvatar from "#components/CommentAvatar";
 import styles from "./index.module.scss";
 import { toast } from "@marshallku/toast";
+import Button from "@marshallku/ui/Button";
 
 interface CommentFormProps {
     slug: string;
@@ -21,7 +21,7 @@ interface CommentFormProps {
 const cx = classNames(styles, "comment-form");
 
 function CommentForm({ slug, submit, isClientSide = false }: CommentFormProps) {
-    const [name, setName] = useState("");
+    const [name, setName] = useState("익명");
     const [body, setBody] = useState("");
     const formRef = useRef<HTMLFormElement>(null);
 
@@ -83,12 +83,21 @@ function CommentForm({ slug, submit, isClientSide = false }: CommentFormProps) {
                 <Input
                     className={cx("__input")}
                     name="name"
-                    placeholder="이름 (미입력시 '익명')"
+                    placeholder="이름"
                     value={name}
                     onChange={({ currentTarget: { value } }) => {
                         setName(value);
                     }}
-                />
+                >
+                    <Button
+                        size="small"
+                        onClick={() => {
+                            setName(generateRandomName());
+                        }}
+                    >
+                        무작위 생성
+                    </Button>
+                </Input>
                 <Input className={cx("__input")} name="url" inputMode="url" placeholder="웹사이트" />
                 <Textarea
                     className={cx("__textarea")}

packages/utils/src/index.ts

@@ -3,5 +3,6 @@ export { default as classNames } from "./lib/classNames";
 export * from "./lib/date";
 export * from "./lib/object";
 export * from "./lib/query";
+export * from "./lib/random";
 export { default as to } from "./lib/to";
 export * from "./lib/url";

packages/utils/src/lib/random.ts

@@ -0,0 +1,52 @@
+export const pickRandom = <T>(array: T[]): T => array[Math.floor(Math.random() * array.length)];
+
+export const generateRandomName = () => {
+    const adjectives = [
+        "빠른",
+        "느린",
+        "큰",
+        "작은",
+        "아름다운",
+        "멋진",
+        "귀여운",
+        "똑똑한",
+        "게으른",
+        "용감한",
+        "겁많은",
+        "행복한",
+        "슬픈",
+        "재미있는",
+        "지루한",
+        "친절한",
+        "사나운",
+        "순한",
+    ];
+
+    const animals = [
+        "호랑이",
+        "사자",
+        "곰",
+        "토끼",
+        "여우",
+        "늑대",
+        "고양이",
+        "강아지",
+        "코끼리",
+        "기린",
+        "원숭이",
+        "팬더",
+        "소",
+        "양",
+        "닭",
+        "돼지",
+        "오리",
+        "뱀",
+        "개구리",
+        "물고기",
+    ];
+
+    const randomAdjective = pickRandom(adjectives);
+    const randomAnimal = pickRandom(animals);
+
+    return `${randomAdjective} ${randomAnimal}`;
+};