refactor: Implement custom keyword AI generation to server and client (#37)

* refactor: Use Open AI in fetchWords and apply new prompt message

* refactor: Migrate DrawingWord from Clova to OpenAI API

- Add OpenAI service with API integration
- Implement word generation using OpenAI
- Add drawing validation using OpenAI vision model
- Add random category combination feature
- Update game service to use new OpenAI implementation

* Revise the prompt so that inappropriate words trigger a response of `부적절`

* feat: Add more Korean internet slang words and memes to nickname generator

- Add modern Korean internet slang terms and memes to adjectives
- Add new nouns reflecting internet culture

* refactor: Optimize word fetching logic for immediate return on inappropriate content

- Add immediate return condition when first word is marked as '부적절'
- Before: Made 5 attempts to fetch words before falling back
- After: Returns default words immediately if inappropriate content detected

* fix: Remove inappropriate filter from Drawing Word generation prompt

- Remove explicit inappropriate return condition to allow more flexible word selection

* refactor: Change `/component/settings` to `/component/room-settings`

- Making the component's purpose more explicit as room-specific settings

* fix: Add special characters filter from Drawing Word generation prompt

- Add settings because special characters appeared

* feat: Add `category` type in game.types.ts

* feat: Add category settings with modal UI

- Add category display in Settings header
- Create CategorySettingsModalContent for category input
- Enable host to update category through modal
- Update both server and local state on category change

* refactor: Change `category` to `wordsTheme`

* feat: Add a description span for drawing word theme modal

* Fix: Lower background music and sound effects volume

Author: rhino-ty

client/src/components/setting/Setting.tsx renamed to client/src/components/room-setting/Setting.tsx

@@ -1,8 +1,12 @@
 import { HTMLAttributes, memo, useCallback, useEffect, useState } from 'react';
 import { RoomSettings } from '@troublepainter/core';
-import { SettingContent } from '@/components/setting/SettingContent';
+import { SettingContent } from '@/components/room-setting/SettingContent';
+import { WordsThemeModalContentContent } from '@/components/room-setting/WordsThemeModalContent';
+import { Button } from '@/components/ui/Button';
+import { Modal } from '@/components/ui/Modal';
 import { SHORTCUT_KEYS } from '@/constants/shortcutKeys';
 import { gameSocketHandlers } from '@/handlers/socket/gameSocket.handler';
+import { useModal } from '@/hooks/useModal';
 import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
 import { cn } from '@/utils/cn';
 
@@ -27,6 +31,8 @@ const Setting = memo(({ className, ...props }: HTMLAttributes<HTMLDivElement>) =
   const roomSettings = useGameSocketStore((state) => state.roomSettings);
   const isHost = useGameSocketStore((state) => state.isHost);
   const actions = useGameSocketStore((state) => state.actions);
+  // 모달
+  const { isModalOpened, openModal, closeModal, handleKeyDown } = useModal();
 
   const [selectedValues, setSelectedValues] = useState<RoomSettings>(
     roomSettings ?? {
@@ -56,17 +62,39 @@ const Setting = memo(({ className, ...props }: HTMLAttributes<HTMLDivElement>) =
     [selectedValues, actions],
   );
 
+  // 제시어 테마
+  const headerText = roomSettings?.wordsTheme ? roomSettings.wordsTheme : 'Setting';
+
   return (
     <section
       className={cn('flex w-full flex-col border-0 border-violet-950 sm:rounded-xl sm:border-2', className)}
       {...props}
     >
       {/* Setting title */}
-      <div className="flex h-14 w-full items-center justify-center border-0 border-violet-950 bg-violet-500 sm:h-16 sm:rounded-t-xl sm:border-b-2">
-        <h2 className="text-2xl text-white text-stroke-md sm:translate-y-1 lg:text-3xl">Setting</h2>
+      <div className="flex h-14 w-full items-center justify-between border-0 border-violet-950 bg-violet-500 px-4 sm:h-16 sm:rounded-t-[0.625rem] sm:border-b-2">
+        <h2 className="text-2xl text-white text-stroke-md sm:translate-y-1 lg:text-3xl">{headerText}</h2>
+        {isHost && (
+          <Button
+            variant="secondary"
+            size={'text'}
+            onClick={openModal}
+            className="h-10 w-28 text-lg lg:w-32 lg:text-xl"
+          >
+            제시어 테마
+          </Button>
+        )}
       </div>
 
       {/* Setting content */}
+      <Modal
+        title="제시어 테마 설정"
+        isModalOpened={isModalOpened}
+        closeModal={closeModal}
+        handleKeyDown={handleKeyDown} // handleKeyDown 추가
+        className="min-w-72 max-w-lg"
+      >
+        <WordsThemeModalContentContent isModalOpened={isModalOpened} closeModal={closeModal} />
+      </Modal>
       <SettingContent
         settings={ROOM_SETTINGS}
         values={selectedValues}

client/src/components/setting/SettingContent.tsx renamed to client/src/components/room-setting/SettingContent.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { RoomSettings } from '@troublepainter/core';
-import { RoomSettingItem } from '@/components/setting/Setting';
-import { SettingItem } from '@/components/setting/SettingItem';
+import { RoomSettingItem } from '@/components/room-setting/Setting';
+import { SettingItem } from '@/components/room-setting/SettingItem';
 
 interface SettingContentProps {
   settings: RoomSettingItem[];
@@ -11,14 +11,14 @@ interface SettingContentProps {
 }
 
 export const SettingContent = memo(({ settings, values, isHost, onSettingChange }: SettingContentProps) => (
-  <div className="flex min-h-[16.125rem] items-center justify-center bg-violet-200 sm:min-h-[18.56rem] sm:rounded-b-xl sm:px-6">
+  <div className="flex min-h-[16.125rem] items-center justify-center bg-violet-200 sm:min-h-[18.56rem] sm:rounded-b-[0.625rem] sm:px-6">
     <div className="flex min-h-[13.8rem] w-full flex-col items-center justify-center gap-4 border-0 border-violet-950 bg-violet-50 p-4 text-xl sm:h-auto sm:rounded-[0.625rem] sm:border-2 lg:gap-6 lg:text-2xl">
       {settings.map(({ label, key, options, shortcutKey }) => (
         <SettingItem
           key={key}
           label={label}
           settingKey={key}
-          value={values[key]}
+          value={values[key] as number}
           options={options}
           onSettingChange={onSettingChange}
           isHost={isHost}

client/src/components/setting/SettingItem.tsx renamed to client/src/components/room-setting/SettingItem.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } 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';
+
+interface WordsThemeModalContentContentProps {
+  isModalOpened: boolean;
+  closeModal: () => void;
+}
+
+const WordsThemeModalContentContent = ({ isModalOpened, closeModal }: WordsThemeModalContentContentProps) => {
+  const roomSettings = useGameSocketStore((state) => state.roomSettings);
+  const actions = useGameSocketStore((state) => state.actions);
+  const [wordsTheme, setWordsTheme] = useState(roomSettings?.wordsTheme || '');
+
+  useEffect(() => {
+    // 모달이 열릴 때마다 현재 제시어 테마로 초기화
+    if (isModalOpened) {
+      setWordsTheme(roomSettings?.wordsTheme || '');
+    }
+  }, [isModalOpened, roomSettings?.wordsTheme]);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!wordsTheme.trim()) return;
+
+    const trimmedWordsTheme = wordsTheme.trim();
+
+    // 서버에 업데이트 요청
+    await gameSocketHandlers.updateSettings({
+      settings: { wordsTheme: trimmedWordsTheme },
+    });
+
+    // 로컬 상태 업데이트
+    if (roomSettings) {
+      actions.updateRoomSettings({
+        ...roomSettings,
+        wordsTheme: trimmedWordsTheme,
+      });
+    }
+
+    closeModal();
+  };
+
+  return (
+    <form onSubmit={(e: React.FormEvent<HTMLFormElement>) => void handleSubmit(e)} className="flex flex-col gap-3">
+      <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)}
+      />
+
+      {/* 입력 가이드 메시지 추가 */}
+      <span className="text-center text-base text-eastbay-500">입력한 테마를 바탕으로 AI가 제시어를 생성합니다.</span>
+
+      <div className="flex gap-2">
+        <Button type="button" onClick={closeModal} variant="secondary" className="flex-1">
+          취소
+        </Button>
+        <Button type="submit" disabled={!wordsTheme.trim()} className="flex-1">
+          확인
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export { WordsThemeModalContentContent };

client/src/components/room-setting/WordsThemeModalContent.tsx

@@ -41,7 +41,7 @@ import { CDN } from '@/constants/cdn';
 export const useBackgroundMusic = () => {
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const [volume, setVolume] = useState(0); // 초기 볼륨 0으로 시작
-  const previousVolume = useRef(0.5); // 이전 볼륨값 저장용 (기본값 0.5)
+  const previousVolume = useRef(0.1); // 이전 볼륨값 저장용, 기본값 0.1 (기존 0.5에서 변경)
 
   useEffect(() => {
     audioRef.current = new Audio(CDN.BACKGROUND_MUSIC);
@@ -54,8 +54,8 @@ export const useBackgroundMusic = () => {
       try {
         // 자동 재생 시도
         await audioRef.current.play();
-        // 자동 재생 성공하면 기본 볼륨(0.5)으로 설정
-        setVolume(0.5);
+        // 자동 재생 성공하면 기본 볼륨(0.1)으로 설정
+        setVolume(0.1);
       } catch (err) {
         // 자동 재생이 차단된 경우
         console.error('Auto-play prevented:', err);

client/src/hooks/useBackgroundMusic.ts

@@ -1,6 +1,6 @@
 import { InviteButton } from '@/components/lobby/InviteButton';
 import { StartButton } from '@/components/lobby/StartButton';
-import { Setting } from '@/components/setting/Setting';
+import { Setting } from '@/components/room-setting/Setting';
 
 const LobbyPage = () => {
   return (

client/src/pages/LobbyPage.tsx

@@ -49,14 +49,14 @@ export class SoundManager {
    * 미리 로드된 사운드를 재생합니다.
    *
    * @param id - 재생할 사운드의 식별자
-   * @param volume - 볼륨 레벨 (0.0에서 1.0), 기본값은 1입니다.
+   * @param volume - 볼륨 레벨 (0.0에서 1.0), 기본값은 0.5입니다.
    * @returns 사운드가 재생되기 시작할 때까지 해결되는 Promise
    *
    * @remarks
    * - 재생이 끝나면 오디오를 처음으로 되감습니다.
    * - 자동 재생 제한을 처리하고 적절한 메시지를 로그로 남깁니다.
    */
-  async playSound(id: string, volume = 1): Promise<void> {
+  async playSound(id: string, volume = 0.5): Promise<void> {
     const audio = this.audioMap.get(id);
     if (!audio) return;
 

client/src/utils/soundManager.ts

@@ -19,6 +19,7 @@ export interface RoomSettings {
   maxPlayers: number; // 최대 플레이어 수
   drawTime: number; // 그리기 제한시간
   totalRounds: number; // 총 라운드 수
+  wordsTheme?: string; // 퀴즈 제시어 테마 입력
 }
 
 export enum PlayerStatus {

core/types/game.types.ts

@@ -121,4 +121,38 @@ export class OpenAIService {
       console.error('OpenAI API Error:', error);
     }
   }
+
+  // 제시어 생성
+  async getDrawingWords(difficulty: string, count: number, wordsTheme?: string): Promise<string[]> {
+    const categories = ['영화', '음식', '일상용품', '스포츠', '동물', '교통수단', '캐릭터', '악기', '직업', 'IT'];
+    const basicCategories = categories.sort(() => Math.random() - 0.5).slice(0, Math.floor(Math.random() * 2) + 2);
+
+    try {
+      const response = await this.openai.chat.completions.create({
+        model: 'gpt-4o-mini',
+        messages: [
+          {
+            role: 'system',
+            content:
+              '당신은 창의적인 드로잉 게임의 출제자, 재밌고 다양한 단어들을 아래처럼 생각해 출제.\n1. 추상적X, 30초 내 그리기 가능성 생각\n2. 방해 요소 존재 게임성 생각\n3. 초등학생 수준 난이도인지 생각\n4. 해당하는 단어 선택\n\n<Input>\n{난이도}, {개수}, {제시어테마들}\n<Output>\n"특수문자나 부연설명없이 단어만", 단어(Meme)를 쉼표로 구분 및 나열\nex) `사과, 컵, 우산, 모자, 엄마`',
+          },
+          {
+            role: 'user',
+            content: `난이도=${difficulty},개수=${count},제시어테마=${wordsTheme ?? basicCategories.join(',')}`,
+          },
+        ],
+        response_format: { type: 'text' },
+        temperature: 0,
+        max_tokens: 128,
+        top_p: 1,
+        frequency_penalty: 2,
+        presence_penalty: 2,
+      });
+
+      return response.choices[0].message.content.split(',').map((word) => word.trim());
+    } catch (error) {
+      console.error('OpenAI API Error:', error);
+      return []; // 에러 시 빈 배열 반환
+    }
+  }
 }

server/src/common/services/openai/openai.service.ts

@@ -21,4 +21,5 @@ export interface RoomSettings {
   maxPlayers: number;
   totalRounds: number;
   drawTime: number;
+  wordsTheme?: string;
 }