feat: Implement Korean profanity filter for words theme (#39)

rhino-ty · web-flow · commit 74e58972270c · 2025-02-19T17:28:26.000+09:00
* chore: Add korcen Korean profanity filter library for content moderation

- Detect various Korean slang patterns (syllable separation, special chars)
- Prevent sensitive content from being stored in Git history

* feat: Add type and constant for WordsTheme

* feat: Refactor theme validation utility to use korcen filter

- Replace static word lists with korcen's pattern detection
- Keep basic validation rules (length, chars, numbers)
- Add real-time validation feedback
- Improve validation message handling

* feat: Improve theme validation with korcen and add new logic(state, type, ui etc) for user feedback

- Add real-time input validation with error handling
- Improve validation message display with visual feedback
- Update input field styles based on validation state
- Add clear validation rules display in UI
diff --git a/client/src/components/room-setting/Setting.tsx b/client/src/components/room-setting/Setting.tsx
@@ -1,7 +1,7 @@
 import { HTMLAttributes, memo, useCallback, useEffect, useState } from 'react';
 import { RoomSettings } from '@troublepainter/core';
 import { SettingContent } from '@/components/room-setting/SettingContent';
-import { WordsThemeModalContentContent } from '@/components/room-setting/WordsThemeModalContent';
+import { WordsThemeModalContent } from '@/components/room-setting/WordsThemeModalContent';
 import { Button } from '@/components/ui/Button';
 import { Modal } from '@/components/ui/Modal';
 import { SHORTCUT_KEYS } from '@/constants/shortcutKeys';
@@ -93,7 +93,7 @@ const Setting = memo(({ className, ...props }: HTMLAttributes<HTMLDivElement>) =
         handleKeyDown={handleKeyDown} // handleKeyDown 추가
         className="min-w-72 max-w-lg"
       >
-        <WordsThemeModalContentContent isModalOpened={isModalOpened} closeModal={closeModal} />
+        <WordsThemeModalContent isModalOpened={isModalOpened} closeModal={closeModal} />
       </Modal>
       <SettingContent
         settings={ROOM_SETTINGS}
diff --git a/client/src/components/room-setting/WordsThemeModalContent.tsx b/client/src/components/room-setting/WordsThemeModalContent.tsx
@@ -1,75 +1,155 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { gameSocketHandlers } from '@/handlers/socket/gameSocket.handler';
 import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
+import { useToastStore } from '@/stores/toast.store';
+import { WordsThemeValidationMessage } from '@/types/wordsTheme.types';
+import { cn } from '@/utils/cn';
+import { validateWordsTheme } from '@/utils/wordsThemeValidation';
 
-interface WordsThemeModalContentContentProps {
+interface WordsThemeModalContentProps {
   isModalOpened: boolean;
   closeModal: () => void;
 }
 
-const WordsThemeModalContentContent = ({ isModalOpened, closeModal }: WordsThemeModalContentContentProps) => {
+const WordsThemeModalContent = ({ isModalOpened, closeModal }: WordsThemeModalContentProps) => {
   const roomSettings = useGameSocketStore((state) => state.roomSettings);
   const actions = useGameSocketStore((state) => state.actions);
   const [wordsTheme, setWordsTheme] = useState(roomSettings?.wordsTheme || '');
+  const [validationMessages, setValidationMessages] = useState<WordsThemeValidationMessage[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const addToast = useToastStore((state) => state.actions.addToast);
 
   useEffect(() => {
-    // 모달이 열릴 때마다 현재 제시어 테마로 초기화
     if (isModalOpened) {
       setWordsTheme(roomSettings?.wordsTheme || '');
     }
   }, [isModalOpened, roomSettings?.wordsTheme]);
 
+  // 실시간 입력 검증
+  const handleThemeChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.replace(/\s+/g, ' ');
+    setWordsTheme(value);
+    setValidationMessages(validateWordsTheme(value));
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (!wordsTheme.trim()) return;
+    if (isSubmitting) return;
 
-    const trimmedWordsTheme = wordsTheme.trim();
+    // 현재 validationMessages 상태를 활용하여 검증
+    const hasErrors = validationMessages.some((msg) => msg.type === 'error');
+    if (hasErrors || !wordsTheme.trim()) {
+      addToast({
+        title: '입력 오류',
+        description: '모든 입력 조건을 만족해야 합니다.',
+        variant: 'error',
+        duration: 3000,
+      });
+      return;
+    }
 
-    // 서버에 업데이트 요청
-    await gameSocketHandlers.updateSettings({
-      settings: { wordsTheme: trimmedWordsTheme },
-    });
+    try {
+      setIsSubmitting(true);
 
-    // 로컬 상태 업데이트
-    if (roomSettings) {
-      actions.updateRoomSettings({
-        ...roomSettings,
-        wordsTheme: trimmedWordsTheme,
+      await gameSocketHandlers.updateSettings({
+        settings: { wordsTheme: wordsTheme.trim() },
+      });
+
+      if (roomSettings) {
+        actions.updateRoomSettings({
+          ...roomSettings,
+          wordsTheme: wordsTheme.trim(),
+        });
+      }
+
+      addToast({
+        title: '테마 설정 완료',
+        description: `제시어 테마가 '${wordsTheme.trim()}'(으)로 설정되었습니다.`,
+        variant: 'success',
+        duration: 2000,
       });
-    }
 
-    closeModal();
+      closeModal();
+    } catch (err) {
+      console.error(err);
+      addToast({
+        title: '설정 실패',
+        description: '테마 설정 중 오류가 발생했습니다. 다시 시도해주세요.',
+        variant: 'error',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
+  // 제출 가능 여부 확인
+  const isSubmitDisabled = validationMessages.some((msg) => msg.type === 'error') || !wordsTheme.trim() || isSubmitting;
+
   return (
-    <form onSubmit={(e: React.FormEvent<HTMLFormElement>) => void handleSubmit(e)} className="flex flex-col gap-3">
+    <form onSubmit={(e: React.FormEvent<HTMLFormElement>) => void handleSubmit(e)} className="flex flex-col">
       <span className="text-center text-lg text-eastbay-800">
         게임에서 사용될 제시어의 테마를 설정해보세요!
         <br />
         <span className="text-base text-eastbay-600">예시) 동물, 음식, 직업, 캐릭터, 스포츠 등 1가지 테마 입력</span>
       </span>
 
-      <Input
-        placeholder="동물, 음식, 직업, 캐릭터, 스포츠 등"
-        value={wordsTheme}
-        onChange={(e) => setWordsTheme(e.target.value)}
-      />
+      <div className="space-y-2">
+        <Input
+          placeholder="동물, 음식, 직업, 캐릭터, 스포츠 등"
+          value={wordsTheme}
+          onChange={handleThemeChange}
+          maxLength={20}
+          disabled={isSubmitting}
+          className={cn(
+            validationMessages.some((msg) => msg.type === 'error') && 'border-red-500',
+            validationMessages.some((msg) => msg.type === 'success') && 'border-green-500',
+          )}
+        />
+
+        {/* 입력 조건 안내 */}
+        <div className="rounded-md bg-violet-50 p-3 text-sm">
+          <p className="font-medium">입력 조건:</p>
+          <ul className="ml-4 list-disc space-y-1 text-eastbay-700">
+            <li>2자 이상 20자 이하로 입력해주세요</li>
+            <li>초성만 사용할 수 없습니다</li>
+            <li>일부 특수문자(.,:? 등)만 사용할 수 있습니다</li>
+            <li>부적절한 단어는 사용할 수 없습니다</li>
+          </ul>
+        </div>
 
-      {/* 입력 가이드 메시지 추가 */}
-      <span className="text-center text-base text-eastbay-500">입력한 테마를 바탕으로 AI가 제시어를 생성합니다.</span>
+        {/* 실시간 검증 메시지 */}
+        <div className="space-y-1">
+          {validationMessages.map((msg, index) => (
+            <p
+              key={index}
+              className={cn(
+                'text-sm',
+                msg.type === 'error' && 'text-red-500',
+                msg.type === 'warning' && 'text-yellow-600',
+                msg.type === 'success' && 'text-green-500',
+              )}
+            >
+              {msg.type === 'error' && '❌ '}
+              {msg.type === 'warning' && '⚠️ '}
+              {msg.type === 'success' && '✅ '}
+              {msg.message}
+            </p>
+          ))}
+        </div>
+      </div>
 
-      <div className="flex gap-2">
-        <Button type="button" onClick={closeModal} variant="secondary" className="flex-1">
+      <div className="mt-3 flex gap-2">
+        <Button type="button" onClick={closeModal} variant="secondary" className="flex-1" disabled={isSubmitting}>
           취소
         </Button>
-        <Button type="submit" disabled={!wordsTheme.trim()} className="flex-1">
-          확인
+        <Button type="submit" disabled={isSubmitDisabled} className="flex-1">
+          {isSubmitting ? '처리 중...' : '확인'}
         </Button>
       </div>
     </form>
   );
 };
 
-export { WordsThemeModalContentContent };
+export { WordsThemeModalContent };
diff --git a/client/src/constants/wordsThemeValidation.ts b/client/src/constants/wordsThemeValidation.ts
@@ -0,0 +1,8 @@
+// 단순한 값이 아니라 배열, 정규식 등이라 const 객체 리터럴 사용
+export const VALIDATION_REGEX = {
+  KOREAN_INITIAL_SOUND: /[ㄱ-ㅎ]/,
+  SPECIAL_CHARS: /[!@#$%^&*()+\-=\[\]{};'"\\|<>]/,
+  NUMBERS_ONLY: /^\d+$/,
+} as const;
+
+// 부적절한 단어 목록은 외부 라이브러리로 대체
diff --git a/client/src/types/wordsTheme.types.ts b/client/src/types/wordsTheme.types.ts
@@ -0,0 +1,4 @@
+export interface WordsThemeValidationMessage {
+  type: 'error' | 'warning' | 'success';
+  message: string;
+}
diff --git a/client/src/utils/wordsThemeValidation.ts b/client/src/utils/wordsThemeValidation.ts
@@ -0,0 +1,31 @@
+import { check } from 'korcen';
+import { VALIDATION_REGEX } from '@/constants/wordsThemeValidation';
+import { WordsThemeValidationMessage } from '@/types/wordsTheme.types';
+
+export const validateWordsTheme = (theme: string): WordsThemeValidationMessage[] => {
+  if (!theme.trim()) {
+    return [{ type: 'warning', message: '테마를 입력해주세요.' }];
+  }
+
+  // 기본 유효성 검사
+  const validations: Array<[boolean, string]> = [
+    [theme.length < 2, '테마는 최소 2자 이상이어야 합니다.'],
+    [theme.length > 20, '테마는 20자를 초과할 수 없습니다.'],
+    [VALIDATION_REGEX.KOREAN_INITIAL_SOUND.test(theme), '초성은 테마에 사용할 수 없습니다.'],
+    [VALIDATION_REGEX.SPECIAL_CHARS.test(theme), '일부 특수문자는 사용할 수 없습니다.'],
+    [VALIDATION_REGEX.NUMBERS_ONLY.test(theme), '숫자로만 이루어진 테마는 사용할 수 없습니다.'],
+  ];
+
+  // korcen을 사용한 비속어 검사
+  const detectedBadWord = check(theme);
+  if (detectedBadWord) {
+    return [{ type: 'error', message: '부적절한 단어가 포함되어 있습니다.' }];
+  }
+
+  // 기본 유효성 검사 결과 처리
+  const errors = validations
+    .filter(([condition]) => condition)
+    .map(([, message]) => ({ type: 'error' as const, message }));
+
+  return errors.length ? errors : [{ type: 'success', message: '올바른 테마입니다!' }];
+};
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "typedoc-plugin-extras": "^3.1.0"
   },
   "dependencies": {
-    "@troublepainter/core": "workspace:*"
+    "@troublepainter/core": "workspace:*",
+    "korcen": "^0.2.4"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@`
`21`	`21`	`"typedoc-plugin-extras": "^3.1.0"`
`22`	`22`	`},`
`23`	`23`	`"dependencies": {`
`24`		`- "@troublepainter/core": "workspace:*"`
	`24`	`+ "@troublepainter/core": "workspace:*",`
	`25`	`+ "korcen": "^0.2.4"`
`25`	`26`	`}`
`26`	`27`	`}`