From 8eacc8fd328d5f34e41deee139db77b0d2f37762 Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Thu, 5 Dec 2024 08:12:19 +0900
Subject: [PATCH] Add logics for picking random name

---
 .../blog/src/components/CommentForm/index.tsx | 19 +++++--
 packages/utils/src/index.ts                   |  1 +
 packages/utils/src/lib/random.ts              | 52 +++++++++++++++++++
 3 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 packages/utils/src/lib/random.ts

diff --git a/apps/blog/src/components/CommentForm/index.tsx b/apps/blog/src/components/CommentForm/index.tsx
index b0e3627e..6dc00bba 100644
--- a/apps/blog/src/components/CommentForm/index.tsx
+++ b/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")}
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 2d5720c9..6175df98 100644
--- a/packages/utils/src/index.ts
+++ b/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";
diff --git a/packages/utils/src/lib/random.ts b/packages/utils/src/lib/random.ts
new file mode 100644
index 00000000..dbfe15d6
--- /dev/null
+++ b/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}`;
+};