[#x] 추가기능 구현

package.json

@@ -16,6 +16,7 @@
     "@tanstack/react-query": "^5.90.5",
     "@tanstack/react-query-devtools": "^5.90.2",
     "axios": "^1.13.1",
+    "badwords-ko": "^1.0.4",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
     "jotai": "^2.15.1",

src/app/(auth)/signup/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import SingUpInFormWrapper from "../_components/form_wrapper";
 import { useForm } from "react-hook-form";
 import {
@@ -12,6 +12,7 @@ import { Button, Icon, TextInput, LoadingSpinner } from "@/components";
 import { useSignupQuery } from "@/hooks/auth/use-signup-query";
 import type { SignupRequest } from "@/api/auth/signup-action";
 import SimpleSignUpIn from "../_components/simple-signUpIn";
+import { hasProfanity } from "@/utils/profanityFilter";
 
 const Page = () => {
   const [showPassword, setShowPassword] = useState(false);
@@ -57,6 +58,10 @@ const Page = () => {
               aria-describedby={errors.nickname ? "nickname-error" : undefined}
               {...register("nickname", {
                 required: "닉네임을 입력해주세요.",
+                validate: {
+                  noProfanity: (value) =>
+                    !hasProfanity(value) || "부적절한 닉네임입니다.",
+                },
               })}
             />
           </div>
@@ -75,6 +80,15 @@ const Page = () => {
                   value: EMAIL_REGEX,
                   message: "이메일 형식이 올바르지 않습니다.",
                 },
+                validate: {
+                  noProfanityInEmail: (value) => {
+                    const localPart = value.split("@")[0];
+                    return (
+                      !hasProfanity(localPart) ||
+                      "이메일에 부적절한 단어가 포함되어 있습니다."
+                    );
+                  },
+                },
               })}
             />
           </div>

src/app/boards/[articleId]/_components/article-comments/article-comments.tsx

@@ -13,6 +13,7 @@ import usePatchArticleComment from "@/hooks/api/articles/use-patch-article-comme
 import useDeleteArticleComment from "@/hooks/api/articles/use-delete-article-comment";
 import LikeButton from "@/components/lottie/LikeButton";
 import DefaultProfile from "@/assets/icons/ic-user.svg";
+import { filterProfanity } from "@/utils/profanityFilter";
 
 interface ArticleCommentsProps {
   article: Article;
@@ -61,10 +62,12 @@ const ArticleComments = ({ article }: ArticleCommentsProps) => {
   }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
 
   const handleCommentSubmit = (content: string) => {
+    const filteredContent = filterProfanity(content);
+
     mutate({
       articleId: article.id,
       data: {
-        content,
+        content: filteredContent,
       },
     });
   };
@@ -135,9 +138,10 @@ const ArticleComments = ({ article }: ArticleCommentsProps) => {
               <hr className="border-gray-300 pb-5" />
               <Reply
                 comment={comment}
-                onEdit={(commentId, content) =>
-                  patchComment({ commentId, content })
-                }
+                onEdit={(commentId, content) => {
+                  const filteredContent = filterProfanity(content);
+                  patchComment({ commentId, content: filteredContent });
+                }}
                 onDelete={(commentId) =>
                   deleteComment({ commentId, articleId: article.id })
                 }

src/app/boards/[articleId]/edit/_components/article-edit-contents/article-edit-contents.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/index";
 import usePatchArticle from "@/hooks/api/articles/use-patch-article";
 import { Article } from "@/types/article";
+import { filterProfanity } from "@/utils/profanityFilter";
 
 interface ArticleEditContentsProps {
   article: Article;
@@ -44,12 +45,15 @@ const ArticleEditContents = ({ article }: ArticleEditContentsProps) => {
   }, []);
 
   const onSubmit = (data: EditFormData) => {
+    const filteredTitle = filterProfanity(data.title);
+    const filteredContent = filterProfanity(data.content);
+
     mutate(
       {
         articleId: article.id,
         data: {
-          title: data.title,
-          content: data.content,
+          title: filteredTitle,
+          content: filteredContent,
           image: images[0] || undefined,
         },
       },

src/app/boards/page.tsx

@@ -24,8 +24,8 @@ const Page = () => {
       <BoardsBest />
       <BoardsAll keyword={debounceKeyword} />
       <Link href="/boards/write">
-        <Button className="fixed bottom-10 right-[13%] z-50 h-14 w-14 rounded-full">
-          <Icon icon="pencil" className="h-6 w-6" />
+        <Button className="fixed bottom-5 right-[20%] z-50 h-11 w-11 rounded-full tablet:bottom-9 tablet:right-[13%] tablet:h-14 tablet:w-14 pc:right-[6%]">
+          <Icon icon="pencil" className="h-5 w-5 tablet:h-6 tablet:w-6" />
         </Button>
       </Link>
     </div>

src/app/boards/write/_components/article-write-contents/article-write-contents.tsx

@@ -11,6 +11,7 @@ import {
   LoadingSpinner,
 } from "@/components/index";
 import { usePostArticle } from "@/hooks/api/articles/use-post-article";
+import { filterProfanity } from "@/utils/profanityFilter";
 
 interface WriteFormData {
   title: string;
@@ -32,10 +33,13 @@ const ArticleWriteContents = () => {
   }, []);
 
   const onSubmit = (data: WriteFormData) => {
+    const filteredTitle = filterProfanity(data.title);
+    const filteredContent = filterProfanity(data.content);
+
     mutate(
       {
-        title: data.title,
-        content: data.content,
+        title: filteredTitle,
+        content: filteredContent,
         image: images[0] || undefined,
       },
       {

src/app/globals.css

@@ -27,3 +27,26 @@
 ::backdrop {
   background-color: rgba(0, 0, 0, 0.5);
 }
+
+#ch-plugin {
+  bottom: 20px !important;
+  animation: channelFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@media (max-width: 743px) {
+  #ch-plugin {
+    right: calc(20% + 60px) !important;
+  }
+}
+
+@media (min-width: 744px) {
+  #ch-plugin {
+    right: calc(20% + 72px) !important;
+  }
+}
+
+@media (min-width: 1280px) {
+  #ch-plugin {
+    right: calc(20% + 72px) !important;
+  }
+}

src/app/mypage/_components/user-setting-contents.tsx

@@ -17,8 +17,11 @@ import usePatchUserPassword from "@/hooks/api/user/use-patch-user-password";
 import usePatchUser from "@/hooks/api/user/use-patch-user";
 import { useGetUserInfoQuery } from "@/hooks/api/user/use-get-user-info-query";
 import isSocialLogin from "@/utils/auth-helper";
+import { hasProfanity } from "@/utils/profanityFilter";
+import useToast from "@/hooks/use-toast";
 
 const UserSettingContents = () => {
+  const toast = useToast();
   const {
     Modal: DeleteModal,
     openPrompt: openDeleteModal,
@@ -59,13 +62,13 @@ const UserSettingContents = () => {
     profileImage !== (userInfo?.image || "");
 
   const handleSaveChanges = () => {
-    if (!nickname.trim()) {
-      return;
-    }
-
     const updates: { nickname?: string; image?: string } = {};
 
     if (nickname !== (userInfo?.nickname || "")) {
+      if (hasProfanity(nickname)) {
+        toast.error("부적절한 닉네임입니다. 닉네임을 변경해주세요.");
+        return;
+      }
       updates.nickname = nickname;
     }
 

src/components/calendar-time/calendar-time.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@/components/index";
+import Button from "../button/button";
 import { TIME_LIST } from "@/constants/time-list";
 import cn from "@/utils/clsx";
 import { useEffect, useState } from "react";

src/components/calendar/calendar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, Icon } from "@/components/index";
+import Button from "../button/button";
+import Icon from "../icon/Icon";
 import cn from "@/utils/clsx";
 import type { CSSProperties } from "react";
 import { useState } from "react";