diff --git a/.gitignore b/.gitignore
index 7553d92..938355a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
 /.pnp
 .pnp.*
 .yarn/*
+/.next
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
@@ -42,4 +43,7 @@ next-env.d.ts
 
 # Test
 app/test/
-app/api/test
\ No newline at end of file
+app/api/test
+
+# Idea
+/.idea
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9e46ab5..759123b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -21,5 +21,9 @@
     "http",
     "net"
   ],
-  "discord.enabled": true
+  "discord.enabled": true,
+  "chat.tools.terminal.autoApprove": {
+    "npx jest": true,
+    "npm run lint": true
+  }
 }
diff --git a/__tests__/kkuko/KkukoHome.test.tsx b/__tests__/kkuko/KkukoHome.test.tsx
new file mode 100644
index 0000000..74e8343
--- /dev/null
+++ b/__tests__/kkuko/KkukoHome.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import KkukoHome from '@/app/kkuko/KkukoHome'; // Adjust import path if needed
+
+describe('KkukoHome', () => {
+    it('should render the title and description', () => {
+        render(<KkukoHome />);
+
+        expect(screen.getByText('끄코 정보')).toBeInTheDocument();
+        expect(screen.getByText('끄투코리아의 유저정보와 랭킹을 조회 할 수 있습니다.')).toBeInTheDocument();
+    });
+
+    it('should render the Profile section with link', () => {
+        render(<KkukoHome />);
+
+        expect(screen.getByRole('heading', { name: '프로필' })).toBeInTheDocument();
+        expect(screen.getByText('끄투코리아의 유저 정보와 전적 등을 확인할 수 있습니다.')).toBeInTheDocument();
+        
+        const profileLink = screen.getByRole('link', { name: /둘러보기/i });
+        expect(profileLink).toHaveAttribute('href', '/kkuko/profile');
+    });
+
+    it('should render the Ranking section with link', () => {
+        render(<KkukoHome />);
+
+        expect(screen.getByRole('heading', { name: '랭킹' })).toBeInTheDocument();
+        expect(screen.getByText('각 모드별로 승리가 많은 유저들의 랭킹을 확인할 수 있습니다.')).toBeInTheDocument();
+        
+        const rankingLink = screen.getByRole('link', { name: /구경하기/i });
+        expect(rankingLink).toHaveAttribute('href', '/kkuko/ranking');
+    });
+});
diff --git a/__tests__/kkuko/profile/components/ItemModal.test.tsx b/__tests__/kkuko/profile/components/ItemModal.test.tsx
new file mode 100644
index 0000000..f859dbd
--- /dev/null
+++ b/__tests__/kkuko/profile/components/ItemModal.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ItemModal from '@/app/kkuko/profile/components/ItemModal';
+import { ItemInfo, ProfileData } from '@/app/types/kkuko.types';
+
+jest.mock('@/app/kkuko/shared/components/TryRenderImg', () => () => <div data-testid="item-img" />);
+jest.mock('@/app/kkuko/profile/utils/profileHelper', () => ({
+    getSlotName: (slot: string) => slot,
+    extractColorFromLabel: () => [],
+    parseDescription: (desc: string) => [{ text: desc, colorKey: null }],
+    getOptionName: (key: string) => key,
+    formatNumber: (num: number) => num.toString(),
+}));
+jest.mock('@/app/kkuko/shared/lib/const', () => ({
+    NICKNAME_COLORS: {},
+}));
+
+describe('ItemModal', () => {
+    const mockProfileData: ProfileData = {
+        equipment: [
+            { itemId: 'item1', slot: 'head' },
+        ],
+    } as any;
+
+    const mockItemsData: ItemInfo[] = [
+        { 
+            id: 'item1', 
+            name: 'Cool Hat', 
+            image: 'hat.png',
+            desc: 'A nice hat',
+            options: { score: 10 }
+        },
+    ] as any;
+
+    it('should render items in modal', () => {
+        const onClose = jest.fn();
+        render(<ItemModal itemsData={mockItemsData} profileData={mockProfileData} onClose={onClose} />);
+        
+        expect(screen.getByText('장착 아이템 목록')).toBeInTheDocument();
+        expect(screen.getByText('Cool Hat')).toBeInTheDocument();
+        expect(screen.getByText('score:')).toBeInTheDocument();
+        expect(screen.getByText('+10000')).toBeInTheDocument();
+    });
+
+    it('should call onClose when close button is clicked', () => {
+        const onClose = jest.fn();
+        render(<ItemModal itemsData={mockItemsData} profileData={mockProfileData} onClose={onClose} />);
+        
+        const closeButtons = screen.getAllByRole('button');
+        // Usually the first one or the "X" button.
+        fireEvent.click(closeButtons[0]);
+        expect(onClose).toHaveBeenCalled();
+    });
+});
diff --git a/__tests__/kkuko/profile/components/ProfileHeader.test.tsx b/__tests__/kkuko/profile/components/ProfileHeader.test.tsx
new file mode 100644
index 0000000..fbf1518
--- /dev/null
+++ b/__tests__/kkuko/profile/components/ProfileHeader.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ProfileHeader from '@/app/kkuko/profile/components/ProfileHeader';
+import { ProfileData, ItemInfo } from '@/types/kkuko.types';
+import * as profileHelper from '@/app/kkuko/profile/utils/profileHelper';
+
+jest.mock('@/app/kkuko/profile/utils/profileHelper');
+jest.mock('@/app/kkuko/shared/components/ProfileAvatar', () => () => <div data-testid="profile-avatar" />);
+jest.mock('@/app/kkuko/shared/components/TryRenderImg', () => (props: any) => <img alt={props.alt} src={props.url} />);
+
+describe('ProfileHeader', () => {
+    const mockProfileData: ProfileData = {
+        user: { 
+            id: 'test_user', 
+            nickname: 'Test Nick', 
+            level: 10, 
+            exp: 1000, 
+            exordial: 'Hello World' 
+        },
+        equipment: [
+            { id: 1, itemId: 'badge1', slot: 'pbdg', stat: {} }
+        ],
+        presence: { updatedAt: new Date().toISOString() },
+        game: {
+             win: 10, lose: 5, draw: 0,
+             max_combo: 100, max_score: 50000 
+        }
+    } as any; // Partial mock
+
+    const mockItemsData: ItemInfo[] = [
+        { id: 'badge1', name: 'Best Badge', description: '', group: 'pbdg', options: {}, updatedAt: 1 }
+    ];
+
+    beforeEach(() => {
+        (profileHelper.getNicknameColor as jest.Mock).mockReturnValue('#000000');
+        (profileHelper.formatLastSeen as jest.Mock).mockReturnValue('1분 전');
+    });
+
+    it('should render user info', () => {
+        render(<ProfileHeader profileData={mockProfileData} itemsData={mockItemsData} expRank={1} />);
+        
+        expect(screen.getByText('Test Nick')).toBeInTheDocument();
+        expect(screen.getByText('Hello World')).toBeInTheDocument();
+        expect(screen.getByText('ID: test_user')).toBeInTheDocument();
+        expect(screen.getByText('Lv. 10')).toBeInTheDocument();
+        expect(screen.getByText('경험치 랭킹: #1')).toBeInTheDocument();
+    });
+
+    it('should render badges', () => {
+        render(<ProfileHeader profileData={mockProfileData} itemsData={mockItemsData} expRank={null} />);
+        
+        expect(screen.getByAltText('Best Badge')).toBeInTheDocument();
+    });
+});
diff --git a/__tests__/kkuko/profile/components/ProfileRecords.test.tsx b/__tests__/kkuko/profile/components/ProfileRecords.test.tsx
new file mode 100644
index 0000000..d71300b
--- /dev/null
+++ b/__tests__/kkuko/profile/components/ProfileRecords.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ProfileRecords from '@/app/kkuko/profile/components/ProfileRecords';
+import { Mode } from '@/app/types/kkuko.types';
+
+// Mock helper functions
+jest.mock('@/app/kkuko/profile/utils/profileHelper', () => ({
+  groupRecordsByMode: jest.fn(() => ({
+    kor: [
+      { id: '1', modeId: 'kr_word', total: 10, win: 5, exp: 100 },
+    ],
+    eng: [],
+  })),
+  getModeName: jest.fn(() => '한국어 끝말잇기'),
+  calculateWinRate: jest.fn(() => '50.0'),
+}));
+
+describe('ProfileRecords', () => {
+    const mockModesData: Mode[] = [
+        { id: 'kr_word', name: '한국어 끝말잇기', category: 'kor' },
+    ];
+    const mockProfileData: any = {
+        record: [
+            { id: '1', modeId: 'kr_word', total: 10, win: 5, exp: 100 },
+        ],
+    };
+
+    it('should render records correctly', () => {
+        render(<ProfileRecords profileData={mockProfileData} modesData={mockModesData} />);
+
+        expect(screen.getByText('전적')).toBeInTheDocument();
+        expect(screen.getByText('한국어')).toBeInTheDocument();
+        expect(screen.getByText('한국어 끝말잇기')).toBeInTheDocument();
+        expect(screen.getByText('10')).toBeInTheDocument(); // total
+        expect(screen.getByText('5')).toBeInTheDocument(); // win
+        expect(screen.getByText('50.0%')).toBeInTheDocument(); // rate
+        expect(screen.getByText('100')).toBeInTheDocument(); // exp
+    });
+});
diff --git a/__tests__/kkuko/profile/components/ProfileSearch.test.tsx b/__tests__/kkuko/profile/components/ProfileSearch.test.tsx
new file mode 100644
index 0000000..0e69b4c
--- /dev/null
+++ b/__tests__/kkuko/profile/components/ProfileSearch.test.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import ProfileSearch from '@/app/kkuko/profile/components/ProfileSearch';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+  useSearchParams: jest.fn(),
+}));
+
+describe('ProfileSearch', () => {
+    const mockRouter = { push: jest.fn(), replace: jest.fn() };
+    const mockSearchParams = { get: jest.fn() };
+    const mockOnRemoveRecentSearch = jest.fn();
+    const mockOnSearch = jest.fn();
+
+    beforeEach(() => {
+        (useRouter as jest.Mock).mockReturnValue(mockRouter);
+        (useSearchParams as jest.Mock).mockReturnValue(mockSearchParams);
+        mockRouter.push.mockClear();
+        mockRouter.replace.mockClear();
+        mockSearchParams.get.mockClear();
+        mockOnRemoveRecentSearch.mockClear();
+        mockOnSearch.mockClear();
+    });
+
+    it('should render search input and button', () => {
+        const { container } = render(<ProfileSearch loading={false} recentSearches={[]} onRemoveRecentSearch={mockOnRemoveRecentSearch} onSearch={mockOnSearch} />);
+        expect(screen.getByPlaceholderText('유저 검색...')).toBeInTheDocument();
+        // search button check
+        const button = container.querySelector('button.bg-blue-500');
+        expect(button).toBeInTheDocument();
+    });
+
+    it('should change search type', () => {
+        render(<ProfileSearch loading={false} recentSearches={[]} onRemoveRecentSearch={mockOnRemoveRecentSearch} onSearch={mockOnSearch} />);
+        // By default 'nick' is selected (label usually '닉네임')
+        // const select = screen.getByRole('combobox'); // If it is a select
+        // Or buttons if it's a toggle.
+        // Let's assume there is a select element based on typical UI or check code more deeply if needed.
+        // Reading code... `const [searchType, setSearchType] = useState<'nick' | 'id'>('nick');`
+        // It likely uses a select dropdown.
+        const select = screen.getByRole('combobox');
+        fireEvent.change(select, { target: { value: 'id' } });
+        expect(select).toHaveValue('id');
+    });
+
+    it('should submit search', () => {
+        const { container } = render(<ProfileSearch loading={false} recentSearches={[]} onRemoveRecentSearch={mockOnRemoveRecentSearch} onSearch={mockOnSearch} />);
+        const input = screen.getByPlaceholderText('유저 검색...');
+        fireEvent.change(input, { target: { value: 'testuser' } });
+        
+        const button = container.querySelector('button.bg-blue-500');
+        if (button) {
+            fireEvent.click(button);
+        } else {
+            throw new Error('Search button not found');
+        }
+
+        expect(mockOnSearch).toHaveBeenCalledWith('testuser', 'nick');
+    });
+
+    it('should show recent searches on focus', () => {
+        const recentSearches = [{ query: 'past', type: 'nick', timestamp: 123 } as any];
+        render(<ProfileSearch loading={false} recentSearches={recentSearches} onRemoveRecentSearch={mockOnRemoveRecentSearch} onSearch={mockOnSearch} />);
+        
+        const input = screen.getByPlaceholderText('유저 검색...');
+        fireEvent.focus(input);
+        
+        expect(screen.getByText('past')).toBeInTheDocument();
+    });
+});
diff --git a/__tests__/kkuko/profile/components/ProfileStats.test.tsx b/__tests__/kkuko/profile/components/ProfileStats.test.tsx
new file mode 100644
index 0000000..a927a1e
--- /dev/null
+++ b/__tests__/kkuko/profile/components/ProfileStats.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ProfileStats from '@/app/kkuko/profile/components/ProfileStats';
+import { ItemInfo } from '@/types/kkuko.types';
+import * as profileHelper from '@/app/kkuko/profile/utils/profileHelper';
+
+jest.mock('@/app/kkuko/profile/utils/profileHelper');
+
+describe('ProfileStats', () => {
+    const mockItemsData: ItemInfo[] = [
+        { id: '1', name: 'Item 1', description: '', group: '', options: { str: 10 }, updatedAt: 1 }
+    ];
+    const mockOnShowDetail = jest.fn();
+
+    beforeEach(() => {
+        (profileHelper.calculateTotalOptions as jest.Mock).mockReturnValue({
+            'str': 10000,
+            'gEXP': 5000 
+        });
+        (profileHelper.getOptionName as jest.Mock).mockImplementation((key) => key);
+        (profileHelper.formatNumber as jest.Mock).mockImplementation((val) => (val / 1000).toString());
+    });
+
+    it('should render total options correctly', () => {
+        render(<ProfileStats itemsData={mockItemsData} onShowDetail={mockOnShowDetail} />);
+        
+        // STR: 10000 -> +10
+        expect(screen.getByText('str')).toBeInTheDocument();
+        expect(screen.getByText('+10')).toBeInTheDocument();
+
+        // gEXP: 5000 -> +5%p
+        expect(screen.getByText('gEXP')).toBeInTheDocument();
+        expect(screen.getByText('+5%p')).toBeInTheDocument();
+    });
+
+    it('should call onShowDetail when button clicked', () => {
+        render(<ProfileStats itemsData={mockItemsData} onShowDetail={mockOnShowDetail} />);
+        
+        const button = screen.getByRole('button', { name: '보기' });
+        fireEvent.click(button);
+        
+        expect(mockOnShowDetail).toHaveBeenCalled();
+    });
+});
diff --git a/__tests__/kkuko/profile/hooks/useKkukoProfile.test.ts b/__tests__/kkuko/profile/hooks/useKkukoProfile.test.ts
new file mode 100644
index 0000000..6e20ec3
--- /dev/null
+++ b/__tests__/kkuko/profile/hooks/useKkukoProfile.test.ts
@@ -0,0 +1,90 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useKkukoProfile } from '@/app/kkuko/profile/hooks/useKkukoProfile';
+import * as api from '@/app/kkuko/shared/lib/api';
+
+// Mock API
+jest.mock('@/app/kkuko/shared/lib/api', () => ({
+    fetchModes: jest.fn(),
+    fetchTotalUsers: jest.fn(),
+    fetchProfile: jest.fn(),
+    fetchItems: jest.fn(),
+    fetchExpRank: jest.fn()
+}));
+
+// Mock useRecentSearches
+const mockSaveToRecentSearches = jest.fn();
+const mockRemoveFromRecentSearches = jest.fn();
+jest.mock('@/app/kkuko/profile/hooks/useRecentSearches', () => ({
+    useRecentSearches: jest.fn(() => ({
+        recentSearches: [],
+        saveToRecentSearches: mockSaveToRecentSearches,
+        removeFromRecentSearches: mockRemoveFromRecentSearches
+    }))
+}));
+
+describe('useKkukoProfile', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (api.fetchModes as jest.Mock).mockResolvedValue({ data: { status: 200, data: [] } });
+        (api.fetchTotalUsers as jest.Mock).mockResolvedValue({ data: { status: 200, data: { totalUsers: 100 } } });
+    });
+
+    it('should fetch modes and total users on mount', async () => {
+        const { result } = renderHook(() => useKkukoProfile());
+        
+        await waitFor(() => {
+             expect(api.fetchModes).toHaveBeenCalled();
+             expect(api.fetchTotalUsers).toHaveBeenCalled();
+             expect(result.current.totalUserCount).toBe(100);
+        });
+    });
+
+    it('should fetch profile successfully', async () => {
+        const mockProfileData = {
+            user: { id: 'test', nickname: 'Test', level: 1, exp: 0, exordial: '' },
+            equipment: [{ itemId: 'item1', slot: 'head' }],
+            presence: { updatedAt: new Date().toISOString() }
+        };
+        const mockItemsData = [{ id: 'item1', name: 'Item 1' }];
+
+        (api.fetchProfile as jest.Mock).mockResolvedValue({ status: 200, data: { status: 200, data: mockProfileData } });
+        (api.fetchItems as jest.Mock).mockResolvedValue({ data: { status: 200, data: mockItemsData } });
+        (api.fetchExpRank as jest.Mock).mockResolvedValue({ data: { rank: 5 } });
+
+        const { result } = renderHook(() => useKkukoProfile());
+
+        await act(async () => {
+            await result.current.fetchProfile('Test', 'nick');
+        });
+
+        expect(result.current.profileData).toEqual(mockProfileData);
+        expect(result.current.itemsData).toEqual(mockItemsData);
+        expect(result.current.expRank).toBe(5);
+        expect(mockSaveToRecentSearches).toHaveBeenCalledWith('Test', 'nick');
+    });
+
+    it('should handle profile not found (status 404)', async () => {
+         (api.fetchProfile as jest.Mock).mockResolvedValue({ status: 404 });
+         
+         const { result } = renderHook(() => useKkukoProfile());
+
+         await act(async () => {
+            await result.current.fetchProfile('Unknown', 'nick');
+        });
+
+        expect(result.current.error).toBe('등록된 유저가 아닙니다.');
+        expect(result.current.profileData).toBeNull();
+    });
+
+    it('should handle API errors', async () => {
+        (api.fetchProfile as jest.Mock).mockRejectedValue(new Error('Network Error'));
+
+        const { result } = renderHook(() => useKkukoProfile());
+
+        await act(async () => {
+            await result.current.fetchProfile('Test', 'nick');
+        });
+
+        expect(result.current.error).toBe('프로필을 불러오는데 실패했습니다.');
+    });
+});
diff --git a/__tests__/kkuko/profile/hooks/useRecentSearches.test.ts b/__tests__/kkuko/profile/hooks/useRecentSearches.test.ts
new file mode 100644
index 0000000..f530b3a
--- /dev/null
+++ b/__tests__/kkuko/profile/hooks/useRecentSearches.test.ts
@@ -0,0 +1,71 @@
+import { renderHook, act } from '@testing-library/react';
+import { useRecentSearches } from '@/app/kkuko/profile/hooks/useRecentSearches';
+
+describe('useRecentSearches', () => {
+    beforeEach(() => {
+        localStorage.clear();
+    });
+
+    it('should initialize with empty array if nothing in localStorage', () => {
+        const { result } = renderHook(() => useRecentSearches());
+        expect(result.current.recentSearches).toEqual([]);
+    });
+
+    it('should load recent searches from localStorage', () => {
+        const initialData = [{ query: 'test', type: 'nick' }];
+        localStorage.setItem('kkuko-recent-searches', JSON.stringify(initialData));
+        const { result } = renderHook(() => useRecentSearches());
+        expect(result.current.recentSearches).toEqual(initialData);
+    });
+
+    it('should save to recent searches', () => {
+        const { result } = renderHook(() => useRecentSearches());
+
+        act(() => {
+            result.current.saveToRecentSearches('test1', 'nick');
+        });
+
+        expect(result.current.recentSearches).toHaveLength(1);
+        expect(result.current.recentSearches[0]).toEqual({ query: 'test1', type: 'nick' });
+        expect(JSON.parse(localStorage.getItem('kkuko-recent-searches') || '[]')).toHaveLength(1);
+    });
+
+    it('should move duplicate search to top', () => {
+        const { result } = renderHook(() => useRecentSearches());
+
+        act(() => {
+            result.current.saveToRecentSearches('test1', 'nick');
+            result.current.saveToRecentSearches('test2', 'id');
+            result.current.saveToRecentSearches('test1', 'nick');
+        });
+
+        expect(result.current.recentSearches).toHaveLength(2);
+        expect(result.current.recentSearches[0]).toEqual({ query: 'test1', type: 'nick' });
+    });
+
+    it('should remove from recent searches', () => {
+        const { result } = renderHook(() => useRecentSearches());
+
+        act(() => {
+            result.current.saveToRecentSearches('test1', 'nick');
+            result.current.removeFromRecentSearches('test1', 'nick');
+        });
+
+        expect(result.current.recentSearches).toHaveLength(0);
+        expect(JSON.parse(localStorage.getItem('kkuko-recent-searches') || '[]')).toHaveLength(0);
+    });
+
+    it('should limit history to 7 items', () => {
+        const { result } = renderHook(() => useRecentSearches());
+
+        act(() => {
+            for (let i = 0; i < 10; i++) {
+                result.current.saveToRecentSearches(`test${i}`, 'nick');
+            }
+        });
+
+        expect(result.current.recentSearches).toHaveLength(7);
+        // The last one added (test9) should be first
+        expect(result.current.recentSearches[0].query).toBe('test9');
+    });
+});
diff --git a/__tests__/kkuko/profile/utils/profileHelper.test.ts b/__tests__/kkuko/profile/utils/profileHelper.test.ts
new file mode 100644
index 0000000..cddc8d3
--- /dev/null
+++ b/__tests__/kkuko/profile/utils/profileHelper.test.ts
@@ -0,0 +1,219 @@
+// __tests__/kkuko/profile/utils/profileHelper.test.ts
+import {
+    getNicknameColor,
+    extractColorFromLabel,
+    formatNumber,
+    calculateTotalOptions,
+    getModeName,
+    getModeGroup,
+    groupRecordsByMode,
+    calculateWinRate,
+    formatObservedAt,
+    getSlotName,
+    getOptionName,
+    formatLastSeen,
+    parseDescription
+} from '@/app/kkuko/profile/utils/profileHelper';
+import { Equipment, ItemInfo, Mode, KkukoRecord } from '@/types/kkuko.types';
+import { NICKNAME_COLORS, SLOT_NAMES, OPTION_NAMES } from '@/app/kkuko/shared/lib/const';
+
+describe('profileHelper', () => {
+
+    describe('getNicknameColor', () => {
+        const isDarkTheme = false;
+        const equipment: Equipment[] = [
+            { itemId: 'normal_item', slot: 'Mhead', userId: 'user1' },
+            { itemId: 'red_name', slot: 'NIK', userId: 'user1' }
+        ];
+
+        it('should return correct color for NIK slot', () => {
+            const color = getNicknameColor(equipment, isDarkTheme);
+            expect(color).toBe(NICKNAME_COLORS['red']);
+        });
+
+        it('should return default color if no NIK slot', () => {
+            const color = getNicknameColor([], isDarkTheme);
+            expect(color).toBe('#000000');
+        });
+
+        it('should return white default for dark theme', () => {
+             const color = getNicknameColor([], true);
+             expect(color).toBe('#FFFFFF');
+        });
+
+        it('should return default color if color key not found', () => {
+             const badEquip: Equipment[] = [{ userId: 'user1', itemId: 'unknown_color', slot: 'NIK' }];
+             const color = getNicknameColor(badEquip, false);
+             expect(color).toBe('#000000');
+        });
+    });
+
+    describe('extractColorFromLabel', () => {
+        it('should extract color from label', () => {
+            const desc = "<label class='x-blue_name'>Some Text</label>";
+            const color = extractColorFromLabel(desc, false);
+            expect(color).toBe(NICKNAME_COLORS['blue']);
+        });
+
+        it('should return default if no match', () => {
+            const desc = "Simple text";
+            const color = extractColorFromLabel(desc, false);
+            expect(color).toBe('#000000');
+        });
+    });
+
+    describe('formatNumber', () => {
+        it('should divide by 1000 and return string', () => {
+             expect(formatNumber(1500)).toBe('1.5');
+             expect(formatNumber(10000)).toBe('10');
+        });
+    });
+
+    describe('calculateTotalOptions', () => {
+        it('should calculate totals correctly for normal options', () => {
+            const items: ItemInfo[] = [
+                { id: '1', name: 'Item1', description: '', group: '', options: { str: 1, dex: 2 }, updatedAt: 1 },
+                { id: '2', name: 'Item2', description: '', group: '', options: { str: 3 }, updatedAt: 1 }
+            ];
+            const result = calculateTotalOptions(items);
+            // 1 * 1000 + 3 * 1000 = 4000
+            expect(result['str']).toBe(4000);
+            expect(result['dex']).toBe(2000);
+        });
+
+        it('should handle special options', () => {
+            const now = Date.now();
+            const items: ItemInfo[] = [
+                {
+                    id: '3', name: 'Special', description: '', group: '',
+                    options: {
+                        date: now - 10000, // Past
+                        before: { str: 1 },
+                        after: { str: 5 }
+                    }, updatedAt: 1
+                }
+            ];
+            const result = calculateTotalOptions(items);
+            // Should use 'after'
+            expect(result['str']).toBe(5000);
+        });
+        
+         it('should handle special options (before)', () => {
+            const now = Date.now();
+            const items: ItemInfo[] = [
+                {
+                    id: '3', name: 'Special', description: '', group: '',
+                    options: {
+                        date: now + 10000, // Future
+                        before: { str: 1 },
+                        after: { str: 5 }
+                    }, updatedAt: 1
+                }
+            ];
+            const result = calculateTotalOptions(items);
+            // Should use 'before'
+            expect(result['str']).toBe(1000);
+        });
+    });
+
+    describe('getModeName & getModeGroup', () => {
+        const modes: Mode[] = [
+             { modeId: 'm1', modeName: 'Mode 1', group: 'kor' },
+             { modeId: 'm2', modeName: 'Mode 2', group: 'eng' }
+        ];
+
+        it('should return mode name', () => {
+            expect(getModeName('m1', modes)).toBe('Mode 1');
+            expect(getModeName('unknown', modes)).toBe('unknown');
+        });
+
+        it('should return mode group', () => {
+            expect(getModeGroup('m1', modes)).toBe('kor');
+            expect(getModeGroup('unknown', modes)).toBe('unknown');
+        });
+    });
+
+     describe('groupRecordsByMode', () => {
+        const modes: Mode[] = [
+             { modeId: 'm1', modeName: 'Mode 1', group: 'kor' },
+             { modeId: 'm2', modeName: 'Mode 2', group: 'eng' },
+             { modeId: 'm3', modeName: 'Mode 3', group: 'event' }
+        ];
+        const records: KkukoRecord[] = [
+            { modeId: 'm1', win: 10, lose: 5, draw: 0 },
+            { modeId: 'm2', win: 20, lose: 5, draw: 0 },
+            { modeId: 'm3', win: 5, lose: 5, draw: 0 },
+            { modeId: 'm1', win: 1, lose: 1, draw: 0 }
+        ] as any;
+
+        it('should group records', () => {
+            const grouped = groupRecordsByMode(records, modes);
+            expect(grouped['kor']).toHaveLength(2);
+            expect(grouped['eng']).toHaveLength(1);
+            expect(grouped['event']).toHaveLength(1);
+        });
+    });
+
+    describe('calculateWinRate', () => {
+        it('should calculate win rate', () => {
+            expect(calculateWinRate(50, 100)).toBe('50.00');
+            expect(calculateWinRate(1, 3)).toBe('33.33');
+            expect(calculateWinRate(0, 0)).toBe('0.00');
+        });
+    });
+
+    describe('formatObservedAt', () => {
+        it('should format date', () => {
+            const dateStr = '2023-01-01T12:00:00.000Z';
+            const formatted = formatObservedAt(dateStr);
+            // This might depend on locale, checking for basic structure or parts
+            expect(formatted).toContain('2023');
+            expect(formatted).toContain('01');
+        });
+    });
+    
+    describe('formatLastSeen', () => {
+        it('should format days ago', () => {
+             const twoDaysAgo = new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString();
+             expect(formatLastSeen(twoDaysAgo)).toBe('2일 전');
+        });
+         it('should format hours ago', () => {
+             const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString();
+             expect(formatLastSeen(twoHoursAgo)).toBe('2시간 전');
+        });
+         it('should format minutes ago', () => {
+             const twoMinutesAgo = new Date(Date.now() - 2 * 60 * 1000).toISOString();
+             expect(formatLastSeen(twoMinutesAgo)).toBe('2분 전');
+        });
+    });
+
+    describe('parseDescription', () => {
+        it('should parse description with colors', () => {
+             const desc = "Hello <label class='x-red_name'>World</label>!";
+             const parts = parseDescription(desc);
+             expect(parts).toHaveLength(3);
+             expect(parts[0].text).toBe('Hello ');
+             expect(parts[1].text).toBe('World');
+             expect(parts[1].colorKey).toBe('red');
+             expect(parts[2].text).toBe('!');
+        });
+        
+         it('should parse plain text', () => {
+             const parts = parseDescription("Hello World");
+             expect(parts).toHaveLength(1);
+             expect(parts[0].text).toBe("Hello World");
+        });
+    });
+
+    describe('getSlotName & getOptionName', () => {
+         it('should get slot name', () => {
+             expect(getSlotName('NIK')).toBe(SLOT_NAMES['NIK']);
+             expect(getSlotName('Unknown')).toBe('Unknown');
+         });
+         it('should get option name', () => {
+             expect(getOptionName('gEXP')).toBe(OPTION_NAMES['gEXP']);
+             expect(getOptionName('Unknown')).toBe('Unknown');
+         });
+    });
+
+});
diff --git a/__tests__/kkuko/ranking/components/ModeSelector.test.tsx b/__tests__/kkuko/ranking/components/ModeSelector.test.tsx
new file mode 100644
index 0000000..2768eb3
--- /dev/null
+++ b/__tests__/kkuko/ranking/components/ModeSelector.test.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ModeSelector } from '@/app/kkuko/ranking/components/ModeSelector';
+import { Mode } from '@/app/types/kkuko.types';
+
+describe('ModeSelector', () => {
+    const mockModes: Mode[] = [
+        { id: 'kor1', name: 'Korean Mode 1', group: 'kor', category: 'kor' },
+        { id: 'eng1', name: 'English Mode 1', group: 'eng', category: 'eng' },
+        { id: 'event1', name: 'Event Mode 1', group: 'event', category: 'event' },
+    ];
+    const mockOnModeChange = jest.fn();
+
+    beforeEach(() => {
+        mockOnModeChange.mockClear();
+    });
+
+    it('should render trigger with selected mode', () => {
+        // Since Select trigger shows the selected value's label, we need to see how Radix UI Select works in test.
+        // Or assume the trigger text reflects selected value.
+        // However, we pass 'selectedMode' as a string ID. The SelectValue component displays the content of SelectItem.
+        // Testing Radix Select is tricky without user interaction to open it.
+        // But we can check if it renders.
+        render(<ModeSelector modes={mockModes} selectedMode="kor1" onModeChange={mockOnModeChange} />);
+        
+        // The trigger usually displays the selected value.
+        // Depending on implementation, it might show "Korean Mode 1".
+        // Let's check for the existence of the select trigger.
+        expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    // Radix UI Select interaction test requires "pointer-events: none" handling setup in JSDOM sometimes, 
+    // but basic click + click option usually works.
+});
diff --git a/__tests__/kkuko/ranking/components/Podium.test.tsx b/__tests__/kkuko/ranking/components/Podium.test.tsx
new file mode 100644
index 0000000..dc2ab36
--- /dev/null
+++ b/__tests__/kkuko/ranking/components/Podium.test.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Podium } from '@/app/kkuko/ranking/components/Podium';
+import { RankingEntry, ProfileData } from '@/app/types/kkuko.types';
+import * as api from '@/app/kkuko/shared/lib/api';
+
+jest.mock('@/app/kkuko/shared/lib/api');
+jest.mock('@/app/kkuko/shared/components/ProfileAvatar', () => () => <div data-testid="profile-avatar" />);
+
+describe('Podium', () => {
+    const mockEntries: RankingEntry[] = [
+        {
+            rank: 1,
+            userRecord: { id: 1, userId: 'u1', modeId: 'm', win: 10, total: 10, exp: 1000, playtime: 0 },
+            userInfo: { id: 'u1', nickname: 'User1', level: 10, exp: 1000, exordial: 'Hi', observedAt: '' }
+        },
+        {
+            rank: 2,
+            userRecord: { id: 2, userId: 'u2', modeId: 'm', win: 5, total: 10, exp: 500, playtime: 0 },
+            userInfo: { id: 'u2', nickname: 'User2', level: 5, exp: 500, exordial: 'Hello', observedAt: '' }
+        },
+        {
+            rank: 3,
+            userRecord: { id: 3, userId: 'u3', modeId: 'm', win: 1, total: 10, exp: 100, playtime: 0 },
+            userInfo: { id: 'u3', nickname: 'User3', level: 1, exp: 100, exordial: 'Hey', observedAt: '' }
+        }
+    ];
+
+    const mockProfileData: ProfileData = {
+        equipment: []
+    } as any;
+
+    beforeEach(() => {
+        (api.fetchProfile as jest.Mock).mockResolvedValue({
+            data: { status: 200, data: mockProfileData }
+        });
+        (api.fetchItems as jest.Mock).mockResolvedValue({
+            data: { status: 200, data: [] }
+        });
+    });
+
+    it('should calculate style correctly', () => {
+        // Just checking rendering to ensure no crashes
+        render(<Podium topThree={mockEntries} option="win" />);
+        // Wait for effects
+    });
+
+    it('should render top 3 users', async () => {
+        render(<Podium topThree={mockEntries} option="win" />);
+        
+        await waitFor(() => {
+            expect(screen.getByText('User1')).toBeInTheDocument();
+            expect(screen.getByText('User2')).toBeInTheDocument();
+            expect(screen.getByText('User3')).toBeInTheDocument();
+        });
+    });
+
+    it('should fetch profile data on mount', async () => {
+        render(<Podium topThree={mockEntries} option="win" />);
+        
+        await waitFor(() => {
+            expect(api.fetchProfile).toHaveBeenCalledTimes(3);
+        });
+    });
+});
diff --git a/__tests__/kkuko/ranking/components/RankingCard.test.tsx b/__tests__/kkuko/ranking/components/RankingCard.test.tsx
new file mode 100644
index 0000000..b499c0f
--- /dev/null
+++ b/__tests__/kkuko/ranking/components/RankingCard.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { RankingCard } from '@/app/kkuko/ranking/components/RankingCard';
+import { RankingEntry } from '@/app/types/kkuko.types';
+
+describe('RankingCard', () => {
+    const mockEntry: RankingEntry = {
+        rank: 1,
+        userRecord: {
+            id: 1,
+            userId: 'user1',
+            modeId: 'mode1',
+            win: 10,
+            total: 20,
+            exp: 1000,
+            playtime: 0
+        },
+        userInfo: {
+            id: 'user1',
+            nickname: 'User One',
+            level: 5,
+            exp: 1000,
+            exordial: 'Hello',
+            observedAt: ''
+        }
+    };
+
+    it('should render user info', () => {
+        render(<RankingCard entry={mockEntry} option="win" />);
+        expect(screen.getByText('User One')).toBeInTheDocument();
+        // User ID is not displayed
+        // expect(screen.getByText('user1')).toBeInTheDocument();
+        expect(screen.getByText(/Lv\.\s*5\s*•\s*Hello/)).toBeInTheDocument();
+    });
+
+    it('should display win rate when option is win', () => {
+        render(<RankingCard entry={mockEntry} option="win" />);
+        // 10/20 = 50.0%
+        expect(screen.getByText('50.0%')).toBeInTheDocument();
+        expect(screen.getByText('10')).toBeInTheDocument();
+        expect(screen.getByText('승리')).toBeInTheDocument();
+    });
+
+    it('should display exp when option is exp', () => {
+        render(<RankingCard entry={mockEntry} option="exp" />);
+        expect(screen.getByText('1,000')).toBeInTheDocument();
+        expect(screen.getByText('경험치')).toBeInTheDocument();
+    });
+});
diff --git a/__tests__/kkuko/ranking/components/RankingList.test.tsx b/__tests__/kkuko/ranking/components/RankingList.test.tsx
new file mode 100644
index 0000000..b7ad05b
--- /dev/null
+++ b/__tests__/kkuko/ranking/components/RankingList.test.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { RankingList } from '@/app/kkuko/ranking/components/RankingList';
+import { RankingEntry } from '@/app/types/kkuko.types';
+
+// Mock RankingCard to avoid nested complexity
+jest.mock('@/app/kkuko/ranking/components/RankingCard', () => ({
+    RankingCard: ({ entry }: { entry: RankingEntry }) => (
+        <div data-testid="ranking-card">{entry.userInfo.nickname}</div>
+    )
+}));
+
+describe('RankingList', () => {
+    const mockRankings: RankingEntry[] = [
+        {
+            rank: 1,
+            userRecord: { userId: '1', modeId: 'm', win: 1, total: 2, exp: 100 },
+            userInfo: { id: '1', nickname: 'User1', level: 1, exp: 100, exordial: '' }
+        },
+        {
+            rank: 2,
+            userRecord: { userId: '2', modeId: 'm', win: 1, total: 2, exp: 100 },
+            userInfo: { id: '2', nickname: 'User2', level: 1, exp: 100, exordial: '' }
+        },
+    ];
+
+    it('should render list of cards', () => {
+        render(<RankingList rankings={mockRankings} option="win" />);
+        const cards = screen.getAllByTestId('ranking-card');
+        expect(cards).toHaveLength(2);
+        expect(cards[0]).toHaveTextContent('User1');
+        expect(cards[1]).toHaveTextContent('User2');
+    });
+
+    it('should render empty state when no rankings', () => {
+        render(<RankingList rankings={[]} option="win" />);
+        expect(screen.getByText('랭킹 데이터가 없습니다.')).toBeInTheDocument();
+    });
+});
diff --git a/__tests__/kkuko/ranking/components/RankingPagination.test.tsx b/__tests__/kkuko/ranking/components/RankingPagination.test.tsx
new file mode 100644
index 0000000..86e0706
--- /dev/null
+++ b/__tests__/kkuko/ranking/components/RankingPagination.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { RankingPagination } from '@/app/kkuko/ranking/components/RankingPagination';
+
+describe('RankingPagination', () => {
+    const mockOnPageChange = jest.fn();
+
+    beforeEach(() => {
+        mockOnPageChange.mockClear();
+    });
+
+    it('should render current page number', () => {
+        render(<RankingPagination currentPage={2} onPageChange={mockOnPageChange} hasNextPage={true} />);
+        expect(screen.getByText('2')).toBeInTheDocument();
+        expect(screen.getByText('페이지')).toBeInTheDocument();
+    });
+
+    it('should disable prev button on page 1', () => {
+        render(<RankingPagination currentPage={1} onPageChange={mockOnPageChange} hasNextPage={true} />);
+        // Usually buttons inside are found by role 'button'.
+        // There are 2 buttons. Prev and Next.
+        const buttons = screen.getAllByRole('button');
+        // First button is prev
+        expect(buttons[0]).toBeDisabled();
+        expect(buttons[1]).toBeEnabled();
+    });
+
+    it('should call onPageChange when buttons clicked', () => {
+        render(<RankingPagination currentPage={2} onPageChange={mockOnPageChange} hasNextPage={true} />);
+        const buttons = screen.getAllByRole('button');
+        
+        // Click prev
+        fireEvent.click(buttons[0]);
+        expect(mockOnPageChange).toHaveBeenCalledWith(1);
+
+        // Click next
+        fireEvent.click(buttons[1]);
+        expect(mockOnPageChange).toHaveBeenCalledWith(3);
+    });
+
+    it('should disable next button if hasNextPage is false', () => {
+        render(<RankingPagination currentPage={2} onPageChange={mockOnPageChange} hasNextPage={false} />);
+        const buttons = screen.getAllByRole('button');
+        expect(buttons[1]).toBeDisabled();
+    });
+});
diff --git a/__tests__/kkuko/ranking/lib/cache.test.ts b/__tests__/kkuko/ranking/lib/cache.test.ts
new file mode 100644
index 0000000..e1f2332
--- /dev/null
+++ b/__tests__/kkuko/ranking/lib/cache.test.ts
@@ -0,0 +1,100 @@
+import { rankingCache } from '@/app/kkuko/ranking/lib/cache';
+import { RankingEntry } from '@/app/types/kkuko.types';
+
+describe('RankingCache', () => {
+    const mockData: RankingEntry[] = [
+        {
+            rank: 1,
+            userRecord: {
+                id: 1,
+                userId: 'user1',
+                modeId: 'mode1',
+                win: 10,
+                total: 20,
+                exp: 1000,
+                playtime: 0
+            },
+            userInfo: {
+                id: 'user1',
+                nickname: 'User One',
+                level: 5,
+                exp: 1000,
+                exordial: 'Hello',
+                observedAt: ''
+            }
+        }
+    ];
+
+    const cacheKey = {
+        mode: 'test-mode',
+        page: 1,
+        option: 'win' as const
+    };
+
+    beforeEach(() => {
+        rankingCache.clear();
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    it('should return null for non-existent key', () => {
+        expect(rankingCache.get(cacheKey)).toBeNull();
+    });
+
+    it('should store and retrieve data', () => {
+        rankingCache.set(cacheKey, mockData);
+        expect(rankingCache.get(cacheKey)).toEqual(mockData);
+    });
+
+    it('should return null for expired data', () => {
+        rankingCache.set(cacheKey, mockData);
+        
+        // Fast-forward time by 5 minutes + 1 ms (TTL is 5 minutes)
+        jest.advanceTimersByTime(5 * 60 * 1000 + 1);
+
+        expect(rankingCache.get(cacheKey)).toBeNull();
+    });
+
+    it('should return data if not expired', () => {
+        rankingCache.set(cacheKey, mockData);
+        
+        // Fast-forward time by 4 minutes 59 seconds
+        jest.advanceTimersByTime(5 * 60 * 1000 - 1000);
+
+        expect(rankingCache.get(cacheKey)).toEqual(mockData);
+    });
+
+    it('should clear all data', () => {
+        rankingCache.set(cacheKey, mockData);
+        rankingCache.clear();
+        expect(rankingCache.get(cacheKey)).toBeNull();
+    });
+
+    it('should cleanup expired entries only', () => {
+        const key1 = { ...cacheKey, mode: 'mode1' };
+        const key2 = { ...cacheKey, mode: 'mode2' };
+
+        rankingCache.set(key1, mockData);
+
+        // Advance time partially
+        jest.advanceTimersByTime(2 * 60 * 1000); // 2 mins elapsed
+
+        rankingCache.set(key2, mockData); // key2 created 2 mins late
+
+        // Advance time to expire key1 but not key2
+        // key1 age: 2min + 3min + 1ms = 5min 1ms (Expired)
+        // key2 age: 3min + 1ms (Valid)
+        jest.advanceTimersByTime(3 * 60 * 1000 + 1);
+
+        rankingCache.cleanup();
+
+        // Testing internal state via public get method
+        // get() also checks expiry, but cleanup() should have removed it from the map internally
+        // We can verify behavior is correct regardless
+        expect(rankingCache.get(key1)).toBeNull();
+        expect(rankingCache.get(key2)).toEqual(mockData);
+    });
+});
diff --git a/__tests__/kkuko/shared/components/ProfileAvatar.test.tsx b/__tests__/kkuko/shared/components/ProfileAvatar.test.tsx
new file mode 100644
index 0000000..1be27a3
--- /dev/null
+++ b/__tests__/kkuko/shared/components/ProfileAvatar.test.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ProfileAvatar from '@/app/kkuko/shared/components/ProfileAvatar';
+import { ItemInfo, ProfileData } from '@/app/types/kkuko.types';
+
+jest.mock('@/app/kkuko/shared/components/TryRenderImg', () => {
+    return function MockTryRenderImg(props: any) {
+        return <img alt={props.alt} src={props.src} data-testid="avatar-layer" />;
+    };
+});
+
+describe('ProfileAvatar', () => {
+    const mockProfileData: ProfileData = {
+        equipment: [
+            { itemId: 'item1', slot: 'head' },
+            { itemId: 'item2', slot: 'hairdeco' },
+        ],
+    } as any;
+
+    const mockItemsData: ItemInfo[] = [
+        { id: 'item1', name: 'Cool Hat', image: 'hat.png' },
+        { id: 'item2', name: 'Ribbon', image: 'ribbon.png' },
+    ] as any;
+
+    it('should render avatar layers', () => {
+        render(<ProfileAvatar profileData={mockProfileData} itemsData={mockItemsData} />);
+        
+        // Check if layers are rendered
+        // Note: The logic in ProfileAvatar groups items by slot and renders them in order.
+        // We mock TryRenderImg so we expect to see images.
+        const layers = screen.getAllByTestId('avatar-layer');
+        expect(layers.length).toBeGreaterThan(0);
+    });
+});
diff --git a/__tests__/kkuko/shared/components/TryRenderImg.test.tsx b/__tests__/kkuko/shared/components/TryRenderImg.test.tsx
new file mode 100644
index 0000000..e38b4a6
--- /dev/null
+++ b/__tests__/kkuko/shared/components/TryRenderImg.test.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import TryRenderImg from '@/app/kkuko/shared/components/TryRenderImg';
+
+// Mock next/image
+jest.mock("next/image", () => ({ src, alt, onError, onLoad, ...props }: any) => (
+  // eslint-disable-next-line @next/next/no-img-element
+  <img 
+    src={src} 
+    alt={alt} 
+    onError={onError} 
+    onLoad={onLoad} 
+    data-testid="next-image"
+    {...props} 
+  />
+));
+
+describe('TryRenderImg', () => {
+    const defaultProps = {
+        url: 'https://example.com/image.png',
+        alt: 'Test Image',
+        width: 100,
+        height: 100,
+        maxRetries: 2,
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        // Date.now mock to have deterministic timestamps for src verification
+        jest.spyOn(Date, 'now').mockReturnValue(1234567890);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it('should render the image initially', () => {
+        render(<TryRenderImg {...defaultProps} />);
+        const img = screen.getByTestId('next-image');
+        expect(img).toBeInTheDocument();
+        expect(img).toHaveAttribute('src', defaultProps.url);
+        expect(img).toHaveAttribute('alt', defaultProps.alt);
+    });
+
+    it('should call handleLoad when image loads successfully', () => {
+        const handleLoad = jest.fn();
+        render(<TryRenderImg {...defaultProps} hanldeLoad={handleLoad} />);
+        const img = screen.getByTestId('next-image');
+        
+        fireEvent.load(img);
+        
+        expect(handleLoad).toHaveBeenCalled();
+    });
+
+    it('should retry loading on error up to maxRetries', () => {
+        render(<TryRenderImg {...defaultProps} />);
+        const img = screen.getByTestId('next-image');
+        
+        // First error -> retry 1
+        fireEvent.error(img);
+        
+        // Expect src to have changed
+        // url + ?r=1&ts=...
+        const expectedSrc1 = `${defaultProps.url}?r=1&ts=1234567890`;
+        expect(img).toHaveAttribute('src', expectedSrc1);
+
+        // Second error -> retry 2
+        fireEvent.error(img);
+        const expectedSrc2 = `${defaultProps.url}?r=2&ts=1234567890`;
+        expect(img).toHaveAttribute('src', expectedSrc2);
+    });
+
+    it('should show placeholder and call onFailure after maxRetries exceeded', () => {
+        const onFailure = jest.fn();
+        const placeholderText = "Placeholder Content";
+        
+        render(
+            <TryRenderImg 
+                {...defaultProps} 
+                onFailure={onFailure} 
+                placeholder={<div>{placeholderText}</div>} 
+            />
+        );
+        
+        const img = screen.getByTestId('next-image');
+        
+        // Retry 1
+        fireEvent.error(img);
+        // Retry 2
+        fireEvent.error(img);
+        
+        // Final error (attempt becomes 2 (which is < maxRetries if maxRetries is 3, but here props says 2?))
+        // Logic check:
+        // attempt starts at 0.
+        // handleError: if (attempt < maxRetries) { ... setAttempt(attempt + 1) ... } else { fail }
+        // props.maxRetries = 2.
+        // 1. attempt 0 < 2 -> setAttempt(1), retry.
+        // 2. attempt 1 < 2 -> setAttempt(2), retry.
+        // 3. attempt 2 is NOT < 2 -> fail.
+        
+        // So we need 3 errors to fail.
+        fireEvent.error(img);
+
+        expect(onFailure).toHaveBeenCalled();
+        expect(screen.queryByTestId('next-image')).not.toBeInTheDocument();
+        expect(screen.getByText(placeholderText)).toBeInTheDocument();
+    });
+
+    it('should reset state when url prop changes', () => {
+        const { rerender } = render(<TryRenderImg {...defaultProps} />);
+        const img = screen.getByTestId('next-image');
+        
+        // Trigger one error to change state
+        fireEvent.error(img);
+        expect(img).toHaveAttribute('src', expect.stringContaining('?r=1'));
+        
+        // Change URL
+        const newUrl = 'https://example.com/new.png';
+        rerender(<TryRenderImg {...defaultProps} url={newUrl} />);
+        
+        const newImg = screen.getByTestId('next-image');
+        expect(newImg).toHaveAttribute('src', newUrl);
+        // Should not have query params yet
+        expect(newImg).not.toHaveAttribute('src', expect.stringContaining('?r='));
+    });
+});
diff --git a/__tests__/lib/hangulUtils.test.ts b/__tests__/lib/hangulUtils.test.ts
new file mode 100644
index 0000000..41fc3d8
--- /dev/null
+++ b/__tests__/lib/hangulUtils.test.ts
@@ -0,0 +1,92 @@
+import { duemLaw, reverDuemLaw, isHangul } from '@/lib/hangulUtils';
+
+describe('duemLaw', () => {
+    it('should apply duem law correctly for rule 1 (ㄹ -> ㄴ)', () => {
+        // Rule 1: ㄹ followed by [ㅏ,ㅐ,ㅗ,ㅚ,ㅜ,ㅡ] becomes ㄴ
+        expect(duemLaw('락')).toBe('낙');
+        expect(duemLaw('로')).toBe('노');
+        expect(duemLaw('루')).toBe('누');
+        expect(duemLaw('뢰')).toBe('뇌');
+    });
+
+    it('should apply duem law correctly for rule 2 (ㄹ -> ㅇ)', () => {
+        // Rule 2: ㄹ followed by [ㅑ,ㅕ,ㅖ,ㅛ,ㅠ,ㅣ] becomes ㅇ
+        expect(duemLaw('량')).toBe('양');
+        expect(duemLaw('려')).toBe('여');
+        expect(duemLaw('례')).toBe('예');
+        expect(duemLaw('료')).toBe('요');
+        expect(duemLaw('류')).toBe('유');
+        expect(duemLaw('리')).toBe('이');
+    });
+
+    it('should apply duem law correctly for rule 3 (ㄴ -> ㅇ)', () => {
+        // Rule 3: ㄴ followed by [ㅕ,ㅛ,ㅠ,ㅣ] becomes ㅇ
+        expect(duemLaw('녀')).toBe('여');
+        expect(duemLaw('뇨')).toBe('요');
+        expect(duemLaw('뉴')).toBe('유');
+        expect(duemLaw('니')).toBe('이');
+    });
+
+    it('should not change characters that do not match rules', () => {
+        expect(duemLaw('가')).toBe('가');
+        expect(duemLaw('바')).toBe('바');
+        // '나' (ㄴ + ㅏ) is not in rule 3 (only ㅕ,ㅛ,ㅠ,ㅣ)
+        expect(duemLaw('나')).toBe('나'); 
+    });
+
+    it('should throw error for non-single character input', () => {
+        expect(() => duemLaw('가나')).toThrow('한글자만 입력해주세요');
+    });
+
+    it('should return input if ignoreError is true for non-single character', () => {
+        expect(duemLaw('가나', true)).toBe('가나');
+    });
+    
+    it('should return input if it is not hangul', () => {
+        expect(duemLaw('A')).toBe('A');
+    });
+});
+
+describe('reverDuemLaw', () => {
+    it('should return original and possible precedents for ㄴ -> ㄹ (rule 1)', () => {
+        // '낙' (ㄴ + ㅏ) can come from '락'
+        expect(reverDuemLaw('낙')).toEqual(['낙', '락']);
+    });
+
+    it('should return original and possible precedents for ㅇ -> ㄹ (rule 2)', () => {
+        // '양' (ㅇ + ㅑ) can come from '량'
+        expect(reverDuemLaw('양')).toEqual(['양', '량']);
+    });
+
+    it('should return original and possible precedents for ㅇ -> ㄴ (rule 3)', () => {
+        // '여' (ㅇ + ㅕ) can come from '녀'
+        expect(reverDuemLaw('여')).toEqual(['여', '려', '녀']);
+    });
+
+    it('should return only the input when no reversal applies', () => {
+        expect(reverDuemLaw('가')).toEqual(['가']);
+    });
+
+    it('should throw error for non-single character input', () => {
+        expect(() => reverDuemLaw('가나')).toThrow('한글자만 입력해주세요');
+    });
+
+    it('should return input array if ignoreError is true for non-single character', () => {
+        expect(reverDuemLaw('가나', true)).toEqual(['가나']);
+    });
+});
+
+describe('isHangul', () => {
+    it('should return true for Hangul characters', () => {
+        expect(isHangul('가')).toBe(true);
+        expect(isHangul('한글')).toBe(true);
+        expect(isHangul('ㄱ')).toBe(true);
+    });
+
+    it('should return false for non-Hangul characters', () => {
+        expect(isHangul('A')).toBe(false);
+        expect(isHangul('123')).toBe(false);
+        expect(isHangul('!@#')).toBe(false);
+        expect(isHangul('가A')).toBe(false);
+    });
+});
\ No newline at end of file
diff --git a/__tests__/manager-tool/extract/Loop.test.tsx b/__tests__/manager-tool/extract/Loop.test.tsx
index 1c4cd89..4cb390a 100644
--- a/__tests__/manager-tool/extract/Loop.test.tsx
+++ b/__tests__/manager-tool/extract/Loop.test.tsx
@@ -25,7 +25,7 @@ jest.mock("@/app/manager-tool/extract/components/FileContentDisplay", () => {
 });
 
 // DuemLaw 함수 모킹
-jest.mock("@/app/lib/DuemLaw", () => {
+jest.mock("@/app/lib/hangulUtils", () => {
 	return jest.fn((char: string) => {
 		// 두음법칙 매핑
 		const duemMap: { [key: string]: string } = {
diff --git a/__tests__/mini-game/MobileUnsupported.test.tsx b/__tests__/mini-game/MobileUnsupported.test.tsx
new file mode 100644
index 0000000..be5c80f
--- /dev/null
+++ b/__tests__/mini-game/MobileUnsupported.test.tsx
@@ -0,0 +1,44 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import MobileUnsupported from '@/app/mini-game/MobileUnsupported';
+import { useRouter } from 'next/navigation';
+
+// Mock next/navigation
+jest.mock('next/navigation', () => ({
+    useRouter: jest.fn(),
+}));
+
+describe('MobileUnsupported', () => {
+    const mockBack = jest.fn();
+
+    beforeEach(() => {
+        (useRouter as jest.Mock).mockReturnValue({
+            back: mockBack,
+        });
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders the unsupported message correctly', () => {
+        render(<MobileUnsupported />);
+
+        expect(screen.getByText('PC 환경에서 이용해주세요')).toBeInTheDocument();
+        expect(screen.getByText(/이 게임은 모바일 환경을 지원하지 않습니다/)).toBeInTheDocument();
+    });
+
+    it('calls router.back() when back button is clicked', () => {
+        render(<MobileUnsupported />);
+
+        const backButton = screen.getByRole('button', { name: /뒤로가기/ });
+        fireEvent.click(backButton);
+
+        expect(mockBack).toHaveBeenCalledTimes(1);
+    });
+
+    it('has the correct CSS classes for mobile visibility', () => {
+        const { container } = render(<MobileUnsupported />);
+        // The outer div should have md:hidden
+        expect(container.firstChild).toHaveClass('md:hidden');
+    });
+});
diff --git a/__tests__/mini-game/game/Game.test.tsx b/__tests__/mini-game/game/Game.test.tsx
new file mode 100644
index 0000000..ece0954
--- /dev/null
+++ b/__tests__/mini-game/game/Game.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Game from '@/app/mini-game/game/Game';
+import { useGameState } from '@/app/mini-game/game/hooks/useGameState';
+import { soundManager } from '@/app/mini-game/game/lib/SoundManager';
+
+jest.mock('@/app/mini-game/game/hooks/useGameState');
+jest.mock('@/app/mini-game/game/lib/SoundManager');
+jest.mock('@/app/mini-game/game/hooks/useChat', () => ({
+    ChatProvider: ({ children }: any) => <div data-testid="chat-provider">{children}</div>
+}));
+jest.mock('@/app/mini-game/game/components/KkutuMenu', () => () => <div data-testid="kkutu-menu">Menu</div>);
+jest.mock('@/app/mini-game/game/GameBox', () => ({ children }: any) => <div data-testid="game-box">{children}</div>);
+jest.mock('@/app/mini-game/game/GameBody', () => () => <div data-testid="game-body">Head</div>);
+jest.mock('@/app/mini-game/game/GameSetup', () => () => <div data-testid="game-setup">Setup</div>);
+jest.mock('@/app/mini-game/game/GameChat', () => () => <div data-testid="game-chat">Chat</div>);
+
+describe('Game', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render setup when not playing', () => {
+        (useGameState as unknown as jest.Mock).mockReturnValue({ isPlaying: false });
+        render(<Game />);
+        
+        expect(soundManager.load).toHaveBeenCalled();
+        expect(screen.getByTestId('kkutu-menu')).toBeInTheDocument();
+        expect(screen.getByTestId('game-setup')).toBeInTheDocument();
+        expect(screen.getByTestId('game-chat')).toBeInTheDocument();
+        expect(screen.queryByTestId('game-box')).not.toBeInTheDocument();
+    });
+
+    it('should render game box when playing', () => {
+        (useGameState as unknown as jest.Mock).mockReturnValue({ isPlaying: true });
+        render(<Game />);
+        
+        expect(screen.getByTestId('game-box')).toBeInTheDocument();
+        expect(screen.getByTestId('game-body')).toBeInTheDocument();
+        expect(screen.queryByTestId('game-setup')).not.toBeInTheDocument();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/GameBody.test.tsx b/__tests__/mini-game/game/GameBody.test.tsx
new file mode 100644
index 0000000..88877b4
--- /dev/null
+++ b/__tests__/mini-game/game/GameBody.test.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import GameHead from '@/app/mini-game/game/GameBody';
+import { useChat } from '@/app/mini-game/game/hooks/useChat';
+import { useGameLogic } from '@/app/mini-game/game/hooks/useGameLogic';
+
+jest.mock('@/app/mini-game/game/hooks/useChat');
+jest.mock('@/app/mini-game/game/hooks/useGameLogic');
+jest.mock('@/app/mini-game/game/components/HistoryHolder', () => () => <div data-testid="history-holder">History</div>);
+jest.mock('@/app/mini-game/game/components/GameInput', () => ({ value, onChange, onKeyDown }: any) => (
+    <input 
+        data-testid="game-input" 
+        value={value} 
+        onChange={onChange} 
+        onKeyDown={onKeyDown} 
+    />
+));
+jest.mock('@/app/mini-game/game/components/GraphBar', () => ({ label }: any) => <div data-testid="graph-bar">{label}</div>);
+jest.mock('@/app/mini-game/game/components/GameResultModal', () => () => <div data-testid="game-result-modal">Result</div>);
+
+describe('GameHead', () => {
+    const mockHandleChatInputChange = jest.fn();
+    const mockSendHint = jest.fn();
+    const mockSetChatInput = jest.fn();
+    const mockRegisterGameHandleInput = jest.fn();
+    const mockSetGameInputVisible = jest.fn();
+    const mockHandleInput = jest.fn();
+    const mockCloseGameResult = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (useChat as jest.Mock).mockReturnValue({
+            chatInput: '',
+            handleChatInputChange: mockHandleChatInputChange,
+            sendHint: mockSendHint,
+            setChatInput: mockSetChatInput,
+            registerGameHandleInput: mockRegisterGameHandleInput,
+            setGameInputVisible: mockSetGameInputVisible,
+        });
+        (useGameLogic as jest.Mock).mockReturnValue({
+            word: '가방',
+            isFail: false,
+            chainCount: 5,
+            turnTime: 3.5,
+            roundTime: 50.0,
+            missionChar: '가',
+            historyItems: [],
+            inputVisible: true,
+            turnInstant: false,
+            animatingWord: null,
+            visibleChars: [],
+            pulseOn: false,
+            inputRef: { current: null },
+            handleInput: mockHandleInput,
+            TURN_TIME_LIMIT: 5,
+            ROUND_TIME_LIMIT: 60,
+            hintVisible: false,
+            gameResult: null,
+            closeGameResult: mockCloseGameResult,
+        });
+    });
+
+    it('should render correctly', () => {
+        render(<GameHead />);
+        expect(screen.getByText('가방')).toBeInTheDocument();
+        expect(screen.getByText('가')).toBeInTheDocument(); // Mission char
+        expect(screen.getByText('5')).toBeInTheDocument(); // Chain count
+        expect(screen.getByText('3.5초')).toBeInTheDocument(); // Turn time
+        expect(screen.getByText('50.0초')).toBeInTheDocument(); // Round time
+        expect(screen.getByTestId('history-holder')).toBeInTheDocument();
+        expect(screen.getByTestId('game-input')).toBeInTheDocument();
+    });
+
+    it('should handle input change', () => {
+        render(<GameHead />);
+        const input = screen.getByTestId('game-input');
+        fireEvent.change(input, { target: { value: 'test' } });
+        expect(mockHandleChatInputChange).toHaveBeenCalled();
+    });
+
+    it('should handle enter key', () => {
+        (useChat as jest.Mock).mockReturnValue({
+            chatInput: 'word',
+            handleChatInputChange: mockHandleChatInputChange,
+            sendHint: mockSendHint,
+            setChatInput: mockSetChatInput,
+            registerGameHandleInput: mockRegisterGameHandleInput,
+            setGameInputVisible: mockSetGameInputVisible,
+        });
+        render(<GameHead />);
+        const input = screen.getByTestId('game-input');
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+        expect(mockHandleInput).toHaveBeenCalledWith('word');
+    });
+
+    it('should handle hint command', () => {
+        (useChat as jest.Mock).mockReturnValue({
+            chatInput: '/ㅍ',
+            handleChatInputChange: mockHandleChatInputChange,
+            sendHint: mockSendHint,
+            setChatInput: mockSetChatInput,
+            registerGameHandleInput: mockRegisterGameHandleInput,
+            setGameInputVisible: mockSetGameInputVisible,
+        });
+        render(<GameHead />);
+        const input = screen.getByTestId('game-input');
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+        expect(mockSendHint).toHaveBeenCalled();
+        expect(mockSetChatInput).toHaveBeenCalledWith('');
+    });
+
+    it('should show game result modal when gameResult is present', () => {
+        (useGameLogic as jest.Mock).mockReturnValue({
+            word: '가방',
+            isFail: false,
+            chainCount: 5,
+            turnTime: 3.5,
+            roundTime: 50.0,
+            missionChar: '가',
+            historyItems: [],
+            inputVisible: true,
+            turnInstant: false,
+            animatingWord: null,
+            visibleChars: [],
+            pulseOn: false,
+            inputRef: { current: null },
+            handleInput: mockHandleInput,
+            TURN_TIME_LIMIT: 5,
+            ROUND_TIME_LIMIT: 60,
+            hintVisible: false,
+            gameResult: [],
+            closeGameResult: mockCloseGameResult,
+        });
+        render(<GameHead />);
+        expect(screen.getByTestId('game-result-modal')).toBeInTheDocument();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/GameBox.test.tsx b/__tests__/mini-game/game/GameBox.test.tsx
new file mode 100644
index 0000000..e1d89b0
--- /dev/null
+++ b/__tests__/mini-game/game/GameBox.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import GameBox from '@/app/mini-game/game/GameBox';
+
+describe('GameBox', () => {
+    it('should render children', () => {
+        render(<GameBox><div>Child</div></GameBox>);
+        expect(screen.getByText('Child')).toBeInTheDocument();
+    });
+
+    it('should have background image', () => {
+        const { container } = render(<GameBox><div>Child</div></GameBox>);
+        expect(container.firstChild).toHaveClass("bg-[url('/img/gamebg.png')]");
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/GameChat.test.tsx b/__tests__/mini-game/game/GameChat.test.tsx
new file mode 100644
index 0000000..c003cd1
--- /dev/null
+++ b/__tests__/mini-game/game/GameChat.test.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import KkutuChat from '@/app/mini-game/game/GameChat';
+import { useChat } from '@/app/mini-game/game/hooks/useChat';
+import { useChatLog } from '@/app/mini-game/game/hooks/useChatLog';
+
+jest.mock('@/app/mini-game/game/hooks/useChat');
+jest.mock('@/app/mini-game/game/hooks/useChatLog');
+
+describe('KkutuChat', () => {
+    const mockHandleChatInputChange = jest.fn();
+    const mockCallGameInput = jest.fn();
+    const mockHandleSendMessage = jest.fn();
+    const mockSendHint = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (useChat as jest.Mock).mockReturnValue({
+            chatInput: '',
+            handleChatInputChange: mockHandleChatInputChange,
+            callGameInput: mockCallGameInput,
+            gameInputVisible: false,
+        });
+        (useChatLog as jest.Mock).mockReturnValue({
+            messages: [
+                { id: 1, timestamp: '12:00', username: 'User1', message: 'Hello', isNotice: false },
+                { id: 2, timestamp: '12:01', username: 'System', message: 'Welcome', isNotice: true },
+            ],
+            chatRef: { current: null },
+            handleSendMessage: mockHandleSendMessage,
+            sendHint: mockSendHint,
+        });
+    });
+
+    it('should render correctly', () => {
+        render(<KkutuChat />);
+        expect(screen.getByText('Hello')).toBeInTheDocument();
+        expect(screen.getByText('Welcome')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText('메시지를 입력하세요...')).toBeInTheDocument();
+    });
+
+    it('should handle input change', () => {
+        render(<KkutuChat />);
+        const input = screen.getByPlaceholderText('메시지를 입력하세요...');
+        fireEvent.change(input, { target: { value: 'test' } });
+        expect(mockHandleChatInputChange).toHaveBeenCalled();
+    });
+
+    it('should handle send message on button click', () => {
+        render(<KkutuChat />);
+        const button = screen.getByRole('button'); // Send button
+        fireEvent.click(button);
+        expect(mockHandleSendMessage).toHaveBeenCalled();
+    });
+
+    it('should handle send message on Enter key when game input is not visible', () => {
+        render(<KkutuChat />);
+        const input = screen.getByPlaceholderText('메시지를 입력하세요...');
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+        expect(mockHandleSendMessage).toHaveBeenCalled();
+    });
+
+    it('should call game input on Enter key when game input is visible', () => {
+        (useChat as jest.Mock).mockReturnValue({
+            chatInput: 'word',
+            handleChatInputChange: mockHandleChatInputChange,
+            callGameInput: mockCallGameInput,
+            gameInputVisible: true,
+        });
+        render(<KkutuChat />);
+        const input = screen.getByPlaceholderText('메시지를 입력하세요...');
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+        expect(mockCallGameInput).toHaveBeenCalledWith('word');
+        expect(mockHandleSendMessage).not.toHaveBeenCalled();
+    });
+
+    it('should send hint on Enter key when input is /ㅍ', () => {
+        (useChat as jest.Mock).mockReturnValue({
+            chatInput: '/ㅍ',
+            handleChatInputChange: mockHandleChatInputChange,
+            callGameInput: mockCallGameInput,
+            gameInputVisible: true,
+        });
+        render(<KkutuChat />);
+        const input = screen.getByPlaceholderText('메시지를 입력하세요...');
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+        expect(mockSendHint).toHaveBeenCalled();
+        expect(mockCallGameInput).not.toHaveBeenCalled();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/GameSetup.test.tsx b/__tests__/mini-game/game/GameSetup.test.tsx
new file mode 100644
index 0000000..05aee5c
--- /dev/null
+++ b/__tests__/mini-game/game/GameSetup.test.tsx
@@ -0,0 +1,189 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor, act, within } from '@testing-library/react';
+import GameSetup from '@/app/mini-game/game/GameSetup';
+import * as wordDB from '@/app/mini-game/game/lib/wordDB';
+import gameManager from '@/app/mini-game/game/lib/GameManager';
+
+jest.mock('@/app/mini-game/game/lib/wordDB');
+jest.mock('@/app/mini-game/game/lib/GameManager');
+jest.mock('@/app/mini-game/game/lib/SoundManager');
+jest.mock('@/app/mini-game/game/components/WordManagerModal', () => ({ onClose }: any) => (
+    <div data-testid="word-manager-modal"><button onClick={onClose}>Close</button></div>
+));
+jest.mock('@/app/mini-game/game/components/ConfirmModal', () => ({ onConfirm, onCancel }: any) => (
+    <div data-testid="confirm-modal">
+        <button onClick={onConfirm}>Confirm</button>
+        <button onClick={onCancel}>Cancel</button>
+    </div>
+));
+jest.mock('@/app/mini-game/game/components/StartCharModal', () => ({ onClose, onSave }: any) => (
+    <div data-testid="start-char-modal">
+        <button onClick={() => onSave('가나다')}>Save</button>
+        <button onClick={onClose}>Close</button>
+    </div>
+));
+
+describe('GameSetup', () => {
+    const mockUpdateSetting = jest.fn();
+    const mockLoadWordDB = jest.fn();
+    const mockGameStart = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        
+        // Mock localStorage
+        const localStorageMock = (function() {
+            let store: any = {};
+            return {
+                getItem: jest.fn((key) => store[key] || null),
+                setItem: jest.fn((key, value) => {
+                    store[key] = value.toString();
+                }),
+                clear: jest.fn(() => {
+                    store = {};
+                }),
+                removeItem: jest.fn((key) => {
+                    delete store[key];
+                })
+            };
+        })();
+        Object.defineProperty(window, 'localStorage', { value: localStorageMock, writable: true });
+
+        // Mock GameManager
+        (gameManager.getSetting as jest.Mock).mockReturnValue({
+            roundTime: 60000,
+            notAgainSameChar: false,
+            lang: 'ko',
+            mode: 'normal',
+            hintMode: 'auto',
+            wantStartChar: new Set(['가']),
+        });
+        gameManager.updateSetting = mockUpdateSetting;
+        gameManager.loadWordDB = mockLoadWordDB;
+        gameManager.gameStart = mockGameStart;
+        gameManager.clearDB = jest.fn();
+
+        // Mock wordDB
+        (wordDB.hasWords as jest.Mock).mockResolvedValue(false);
+        (wordDB.getAllWords as jest.Mock).mockResolvedValue([]);
+        (wordDB.loadWordsFromFile as jest.Mock).mockResolvedValue(100);
+        (wordDB.clearAllWords as jest.Mock).mockResolvedValue(undefined);
+    });
+
+    it('should render correctly', async () => {
+        await act(async () => {
+            render(<GameSetup />);
+        });
+        expect(screen.getByText(/게임 설정/i)).toBeInTheDocument();
+        expect(screen.getByText(/단어 데이터베이스 설정/i)).toBeInTheDocument();
+    });
+
+    it('should load existing words on mount', async () => {
+        (wordDB.hasWords as jest.Mock).mockResolvedValue(true);
+        (wordDB.getAllWords as jest.Mock).mockResolvedValue([{ word: '사과', theme: 'fruit' }]);
+        
+        await act(async () => {
+            render(<GameSetup />);
+        });
+        
+        await waitFor(() => {
+            expect(wordDB.hasWords).toHaveBeenCalled();
+            expect(wordDB.getAllWords).toHaveBeenCalled();
+            expect(mockLoadWordDB).toHaveBeenCalled();
+            expect(screen.getByText(/저장된 단어가 1개 있습니다/i)).toBeInTheDocument();
+        });
+    });
+
+    it('should handle file upload', async () => {
+        await act(async () => {
+            render(<GameSetup />);
+        });
+        
+        const file = new File(['test'], 'test.txt', { type: 'text/plain' });
+        const input = screen.getByLabelText(/단어 파일 업로드/i);
+        
+        await act(async () => {
+            fireEvent.change(input, { target: { files: [file] } });
+        });
+        
+        expect(screen.getByText(/선택된 파일: test.txt/i)).toBeInTheDocument();
+        
+        const uploadButton = screen.getByText('단어 불러오기');
+        await act(async () => {
+            fireEvent.click(uploadButton);
+        });
+        
+        await waitFor(() => {
+            expect(wordDB.loadWordsFromFile).toHaveBeenCalledWith(file);
+            expect(screen.getByText(/100개의 단어를 성공적으로 불러왔습니다/i)).toBeInTheDocument();
+        });
+    });
+
+    it('should handle setting changes', async () => {
+        await act(async () => {
+            render(<GameSetup />);
+        });
+        
+        // Find select by display value since label is not associated
+        const roundTimeSelect = screen.getByDisplayValue('60초');
+        fireEvent.change(roundTimeSelect, { target: { value: '30' } });
+        
+        expect(mockUpdateSetting).toHaveBeenCalledWith(expect.objectContaining({
+            roundTime: 30000
+        }));
+    });
+
+    it('should open and close word manager modal', async () => {
+        await act(async () => {
+            render(<GameSetup />);
+        });
+        
+        fireEvent.click(screen.getByText(/단어 목록 조회/i));
+        const modal = screen.getByTestId('word-manager-modal');
+        expect(modal).toBeInTheDocument();
+        
+        fireEvent.click(within(modal).getByText('Close'));
+        expect(screen.queryByTestId('word-manager-modal')).not.toBeInTheDocument();
+    });
+
+    it('should handle clear words', async () => {
+        (wordDB.hasWords as jest.Mock).mockResolvedValue(true);
+        (wordDB.getAllWords as jest.Mock).mockResolvedValue([{ word: '사과', theme: 'fruit' }]);
+        
+        await act(async () => {
+            render(<GameSetup />);
+        });
+        
+        await waitFor(() => {
+            expect(screen.getByText('모든 단어 삭제')).toBeInTheDocument();
+        });
+
+        fireEvent.click(screen.getByText('모든 단어 삭제'));
+        expect(screen.getByTestId('confirm-modal')).toBeInTheDocument();
+        
+        await act(async () => {
+            fireEvent.click(screen.getByText('Confirm'));
+        });
+        
+        expect(wordDB.clearAllWords).toHaveBeenCalled();
+        expect(gameManager.clearDB).toHaveBeenCalled();
+        expect(screen.getByText('모든 단어가 삭제되었습니다.')).toBeInTheDocument();
+    });
+
+    it('should handle start char modal', async () => {
+        await act(async () => {
+            render(<GameSetup />);
+        });
+        
+        fireEvent.click(screen.getByRole('button', { name: '제시어 설정' }));
+        expect(screen.getByTestId('start-char-modal')).toBeInTheDocument();
+        
+        await act(async () => {
+            fireEvent.click(screen.getByText('Save'));
+        });
+        
+        expect(mockUpdateSetting).toHaveBeenCalledWith(expect.objectContaining({
+            wantStartChar: new Set(['가', '나', '다'])
+        }));
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/ConfirmModal.test.tsx b/__tests__/mini-game/game/components/ConfirmModal.test.tsx
new file mode 100644
index 0000000..b83e5aa
--- /dev/null
+++ b/__tests__/mini-game/game/components/ConfirmModal.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ConfirmModal from '@/app/mini-game/game/components/ConfirmModal';
+
+describe('ConfirmModal', () => {
+    it('should render message', () => {
+        render(<ConfirmModal message="Are you sure?" onConfirm={() => {}} onCancel={() => {}} />);
+        expect(screen.getByText('Are you sure?')).toBeInTheDocument();
+    });
+
+    it('should call onConfirm when confirm button is clicked', () => {
+        const onConfirm = jest.fn();
+        render(<ConfirmModal message="Test" onConfirm={onConfirm} onCancel={() => {}} />);
+        // Use regex or exact match depending on button text
+        fireEvent.click(screen.getByRole('button', { name: '확인' }));
+        expect(onConfirm).toHaveBeenCalled();
+    });
+
+    it('should call onCancel when cancel button is clicked', () => {
+        const onCancel = jest.fn();
+        render(<ConfirmModal message="Test" onConfirm={() => {}} onCancel={onCancel} />);
+        fireEvent.click(screen.getByRole('button', { name: '취소' }));
+        expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('should call onCancel when clicking backdrop', () => {
+        const onCancel = jest.fn();
+        const { container } = render(<ConfirmModal message="Test" onConfirm={() => {}} onCancel={onCancel} />);
+        // The backdrop is the outer div
+        fireEvent.click(container.firstChild as Element);
+        expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('should not call onCancel when clicking modal content', () => {
+        const onCancel = jest.fn();
+        render(<ConfirmModal message="Test" onConfirm={() => {}} onCancel={onCancel} />);
+        // Click on the message div which is inside the modal
+        fireEvent.click(screen.getByText('Test'));
+        expect(onCancel).not.toHaveBeenCalled();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/DictionaryModal.test.tsx b/__tests__/mini-game/game/components/DictionaryModal.test.tsx
new file mode 100644
index 0000000..86adbbe
--- /dev/null
+++ b/__tests__/mini-game/game/components/DictionaryModal.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import DictionaryModal from '@/app/mini-game/game/components/DictionaryModal';
+import gameManager from '@/app/mini-game/game/lib/GameManager';
+
+jest.mock('@/app/mini-game/game/lib/GameManager');
+
+describe('DictionaryModal', () => {
+    it('should render correctly', () => {
+        render(<DictionaryModal onClose={() => {}} />);
+        expect(screen.getByText('사전 검색')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText('단어를 입력하세요')).toBeInTheDocument();
+    });
+
+    it('should search for a word', () => {
+        (gameManager.getWordTheme as jest.Mock).mockReturnValue(['자유']);
+        render(<DictionaryModal onClose={() => {}} />);
+        
+        const input = screen.getByPlaceholderText('단어를 입력하세요');
+        fireEvent.change(input, { target: { value: '가방' } });
+        fireEvent.click(screen.getByText('검색'));
+        
+        expect(gameManager.getWordTheme).toHaveBeenCalledWith('가방');
+        expect(screen.getByText('주제: 자유')).toBeInTheDocument();
+    });
+
+    it('should show message for unknown word', () => {
+        (gameManager.getWordTheme as jest.Mock).mockReturnValue([]);
+        render(<DictionaryModal onClose={() => {}} />);
+        
+        const input = screen.getByPlaceholderText('단어를 입력하세요');
+        fireEvent.change(input, { target: { value: '없는단어' } });
+        fireEvent.click(screen.getByText('검색'));
+        
+        expect(screen.getByText('없는 단어입니다')).toBeInTheDocument();
+    });
+
+    it('should handle enter key', () => {
+        (gameManager.getWordTheme as jest.Mock).mockReturnValue(['자유']);
+        render(<DictionaryModal onClose={() => {}} />);
+        
+        const input = screen.getByPlaceholderText('단어를 입력하세요');
+        fireEvent.change(input, { target: { value: '가방' } });
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+        
+        expect(gameManager.getWordTheme).toHaveBeenCalledWith('가방');
+    });
+
+    it('should close when close button is clicked', () => {
+        const onClose = jest.fn();
+        render(<DictionaryModal onClose={onClose} />);
+        fireEvent.click(screen.getByText('닫기'));
+        expect(onClose).toHaveBeenCalled();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/GameInput.test.tsx b/__tests__/mini-game/game/components/GameInput.test.tsx
new file mode 100644
index 0000000..a140c17
--- /dev/null
+++ b/__tests__/mini-game/game/components/GameInput.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import GameInput from '@/app/mini-game/game/components/GameInput';
+
+describe('GameInput', () => {
+    it('should render correctly', () => {
+        render(<GameInput />);
+        const input = screen.getByRole('textbox');
+        expect(input).toBeInTheDocument();
+        expect(input).toHaveAttribute('placeholder', 'Your turn - Input chat');
+    });
+
+    it('should handle value change', () => {
+        const handleChange = jest.fn();
+        render(<GameInput value="test" onChange={handleChange} />);
+        const input = screen.getByRole('textbox');
+        expect(input).toHaveValue('test');
+        fireEvent.change(input, { target: { value: 'new value' } });
+        expect(handleChange).toHaveBeenCalled();
+    });
+
+    it('should handle key down', () => {
+        const handleKeyDown = jest.fn();
+        render(<GameInput onKeyDown={handleKeyDown} />);
+        const input = screen.getByRole('textbox');
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+        expect(handleKeyDown).toHaveBeenCalled();
+    });
+
+    it('should apply custom class name', () => {
+        const { container } = render(<GameInput className="custom-class" />);
+        expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('should be readonly when readonly prop is true', () => {
+        render(<GameInput readonly />);
+        const input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('readonly');
+    });
+
+    it('should forward ref', () => {
+        const ref = React.createRef<HTMLInputElement>();
+        render(<GameInput inputRef={ref} />);
+        expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/GameResultModal.test.tsx b/__tests__/mini-game/game/components/GameResultModal.test.tsx
new file mode 100644
index 0000000..2d31eff
--- /dev/null
+++ b/__tests__/mini-game/game/components/GameResultModal.test.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import GameResultModal from '@/app/mini-game/game/components/GameResultModal';
+
+describe('GameResultModal', () => {
+    const mockUsedWords = [
+        { char: '가', word: '가방', missionChar: null, useHintCount: 0 },
+        { char: '방', word: '방구', missionChar: '구', useHintCount: 1 },
+        { char: '구', word: '구슬', missionChar: null, useHintCount: 0, isFailed: true }
+    ];
+
+    it('should render correctly', () => {
+        render(<GameResultModal usedWords={mockUsedWords} onClose={() => {}} />);
+        expect(screen.getByText('🎮 게임 결과')).toBeInTheDocument();
+        expect(screen.getByText('3')).toBeInTheDocument(); // Total count
+        expect(screen.getByText('가방')).toBeInTheDocument();
+        expect(screen.getByText('방구')).toBeInTheDocument();
+        expect(screen.getByText('구슬')).toBeInTheDocument();
+        expect(screen.getByText('미션: 구')).toBeInTheDocument();
+        expect(screen.getByText('힌트 1회')).toBeInTheDocument();
+        expect(screen.getByText('입력 실패')).toBeInTheDocument();
+    });
+
+    it('should handle minimize/maximize', () => {
+        render(<GameResultModal usedWords={mockUsedWords} onClose={() => {}} />);
+        
+        // Minimize
+        const minimizeBtn = screen.getByTitle('최소화');
+        fireEvent.click(minimizeBtn);
+        
+        expect(screen.queryByText('가방')).not.toBeInTheDocument();
+        expect(screen.getByText('총 3개의 단어 사용')).toBeInTheDocument();
+        
+        // Maximize
+        const maximizeBtn = screen.getByTitle('펼치기');
+        fireEvent.click(maximizeBtn);
+        
+        expect(screen.getByText('가방')).toBeInTheDocument();
+    });
+
+    it('should close when close button is clicked', () => {
+        const onClose = jest.fn();
+        render(<GameResultModal usedWords={mockUsedWords} onClose={onClose} />);
+        fireEvent.click(screen.getByTitle('닫기'));
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    it('should show empty message if no words used', () => {
+        render(<GameResultModal usedWords={[]} onClose={() => {}} />);
+        expect(screen.getByText('사용한 단어가 없습니다.')).toBeInTheDocument();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/GraphBar.test.tsx b/__tests__/mini-game/game/components/GraphBar.test.tsx
new file mode 100644
index 0000000..53ed6d8
--- /dev/null
+++ b/__tests__/mini-game/game/components/GraphBar.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import GraphBar from '@/app/mini-game/game/components/GraphBar';
+
+describe('GraphBar', () => {
+    it('should render correctly', () => {
+        render(<GraphBar className="test-class" min={0} max={100} val={50} label="50%" />);
+        const bar = screen.getByText('50%');
+        expect(bar).toBeInTheDocument();
+        expect(bar).toHaveStyle('width: 50%');
+    });
+
+    it('should handle custom background color', () => {
+        render(<GraphBar className="test-class" val={50} bgc="blue" label="test" />);
+        const innerDiv = screen.getByText('test');
+        expect(innerDiv.style.backgroundColor).toBe('blue');
+    });
+
+    it('should clamp percentage between 0 and 100', () => {
+        const { rerender } = render(<GraphBar className="test-class" min={0} max={100} val={-10} label="Low" />);
+        expect(screen.getByText('Low')).toHaveStyle({ width: '0%' });
+        
+        rerender(<GraphBar className="test-class" min={0} max={100} val={150} label="High" />);
+        expect(screen.getByText('High')).toHaveStyle({ width: '100%' });
+    });
+
+    it('should handle noTransition prop', () => {
+        render(<GraphBar className="test-class" val={50} noTransition={true} label="test-trans" />);
+        const innerDiv = screen.getByText('test-trans');
+        expect(innerDiv).toHaveStyle({ transition: 'none' });
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/HelpModal.test.tsx b/__tests__/mini-game/game/components/HelpModal.test.tsx
new file mode 100644
index 0000000..1d55d94
--- /dev/null
+++ b/__tests__/mini-game/game/components/HelpModal.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import HelpModal from '@/app/mini-game/game/components/HelpModal';
+
+describe('HelpModal', () => {
+    it('should render correctly', () => {
+        render(<HelpModal onClose={() => {}} />);
+        expect(screen.getByText('📖 도움말')).toBeInTheDocument();
+        expect(screen.getByText('🎮 게임시작 관련')).toBeInTheDocument();
+        expect(screen.getByText('⚙️ 설정 관련')).toBeInTheDocument();
+        expect(screen.getByText('🎯 게임중/종료 관련')).toBeInTheDocument();
+        expect(screen.getByText('💡 기타 도움말')).toBeInTheDocument();
+    });
+
+    it('should close when close button is clicked', () => {
+        const onClose = jest.fn();
+        render(<HelpModal onClose={onClose} />);
+        
+        // Header button (×)
+        const headerClose = screen.getByText('×');
+        fireEvent.click(headerClose);
+        expect(onClose).toHaveBeenCalledTimes(1);
+        
+        // Footer button
+        const footerClose = screen.getByText('닫기');
+        fireEvent.click(footerClose);
+        expect(onClose).toHaveBeenCalledTimes(2);
+    });
+
+    it('should close when clicking backdrop', () => {
+        const onClose = jest.fn();
+        const { container } = render(<HelpModal onClose={onClose} />);
+        fireEvent.click(container.firstChild as Element);
+        expect(onClose).toHaveBeenCalled();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/HistoryHolder.test.tsx b/__tests__/mini-game/game/components/HistoryHolder.test.tsx
new file mode 100644
index 0000000..77ac004
--- /dev/null
+++ b/__tests__/mini-game/game/components/HistoryHolder.test.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen, fireEvent, act, within } from '@testing-library/react';
+import HistoryHolder from '@/app/mini-game/game/components/HistoryHolder';
+
+describe('HistoryHolder', () => {
+    const mockItems = [
+        { word: '사과', meaning: '사과나무의 열매', theme: ['fruit'], wordType: 'm1' as const },
+        { word: '바나나', meaning: '바나나나무의 열매', theme: ['fruit'], wordType: 'm2' as const },
+    ];
+
+    it('should render correctly', () => {
+        render(<HistoryHolder historyItems={mockItems} />);
+        expect(screen.getByText('사과')).toBeInTheDocument();
+        expect(screen.getByText('바나나')).toBeInTheDocument();
+    });
+
+    it('should show tooltip on hover', async () => {
+        render(<HistoryHolder historyItems={mockItems} />);
+        const item = screen.getByText('사과');
+        
+        await act(async () => {
+            fireEvent.mouseEnter(item, { clientX: 100, clientY: 100 });
+        });
+
+        // Tooltip content
+        const tooltipRoot = document.getElementById('history-tooltip-root');
+        expect(tooltipRoot).toBeInTheDocument();
+        
+        // Use within to check inside the tooltip
+        const tooltipContent = within(tooltipRoot!).getByText('사과나무의 열매');
+        expect(tooltipContent).toBeInTheDocument();
+
+        await act(async () => {
+            fireEvent.mouseLeave(item);
+        });
+
+        expect(within(tooltipRoot!).queryByText('사과나무의 열매')).not.toBeInTheDocument();
+    });
+
+    it('should handle empty items', () => {
+        const { container } = render(<HistoryHolder historyItems={[]} />);
+        expect(container.firstChild).toBeInTheDocument();
+        expect(screen.queryByText('사과')).not.toBeInTheDocument();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/KkutuMenu.test.tsx b/__tests__/mini-game/game/components/KkutuMenu.test.tsx
new file mode 100644
index 0000000..74d834e
--- /dev/null
+++ b/__tests__/mini-game/game/components/KkutuMenu.test.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import KkutuMenu from '@/app/mini-game/game/components/KkutuMenu';
+import { useGameState } from '@/app/mini-game/game/hooks/useGameState';
+
+jest.mock('@/app/mini-game/game/hooks/useGameState');
+jest.mock('@/app/mini-game/game/components/HelpModal', () => () => <div data-testid="help-modal">Help Modal</div>);
+jest.mock('@/app/mini-game/game/components/SettingsModal', () => () => <div data-testid="settings-modal">Settings Modal</div>);
+jest.mock('@/app/mini-game/game/components/DictionaryModal', () => () => <div data-testid="dict-modal">Dictionary Modal</div>);
+jest.mock('@/app/mini-game/game/components/ConfirmModal', () => ({ message, onConfirm }: any) => (
+    <div data-testid="confirm-modal">
+        {message}
+        <button onClick={onConfirm}>Confirm</button>
+    </div>
+));
+
+describe('KkutuMenu', () => {
+    const mockRequestStart = jest.fn();
+    const mockExitGame = jest.fn();
+    const mockDismissStartBlocked = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (useGameState as unknown as jest.Mock).mockReturnValue({
+            isPlaying: false,
+            requestStart: mockRequestStart,
+            exitGame: mockExitGame,
+            startBlocked: false,
+            startBlockedMessage: null,
+            dismissStartBlocked: mockDismissStartBlocked,
+        });
+    });
+
+    it('should render buttons correctly when not playing', () => {
+        render(<KkutuMenu />);
+        expect(screen.getByText('도움말')).toBeInTheDocument();
+        expect(screen.getByText('설정')).toBeInTheDocument();
+        expect(screen.getByText('사전')).toBeInTheDocument();
+        expect(screen.getByText('시작')).toBeInTheDocument();
+        expect(screen.queryByText('나가기')).not.toBeInTheDocument();
+    });
+
+    it('should render buttons correctly when playing', () => {
+        (useGameState as unknown as jest.Mock).mockReturnValue({
+            isPlaying: true,
+            requestStart: mockRequestStart,
+            exitGame: mockExitGame,
+            startBlocked: false,
+            startBlockedMessage: null,
+            dismissStartBlocked: mockDismissStartBlocked,
+        });
+        render(<KkutuMenu />);
+        expect(screen.queryByText('시작')).not.toBeInTheDocument();
+        expect(screen.getByText('나가기')).toBeInTheDocument();
+    });
+
+    it('should open help modal', () => {
+        render(<KkutuMenu />);
+        fireEvent.click(screen.getByText('도움말'));
+        expect(screen.getByTestId('help-modal')).toBeInTheDocument();
+    });
+
+    it('should open settings modal', () => {
+        render(<KkutuMenu />);
+        fireEvent.click(screen.getByText('설정'));
+        expect(screen.getByTestId('settings-modal')).toBeInTheDocument();
+    });
+
+    it('should open dictionary modal', () => {
+        render(<KkutuMenu />);
+        fireEvent.click(screen.getByText('사전'));
+        expect(screen.getByTestId('dict-modal')).toBeInTheDocument();
+    });
+
+    it('should call requestStart when start button is clicked', () => {
+        render(<KkutuMenu />);
+        fireEvent.click(screen.getByText('시작'));
+        expect(mockRequestStart).toHaveBeenCalled();
+    });
+
+    it('should call exitGame when exit button is clicked', () => {
+        (useGameState as unknown as jest.Mock).mockReturnValue({
+            isPlaying: true,
+            requestStart: mockRequestStart,
+            exitGame: mockExitGame,
+            startBlocked: false,
+            startBlockedMessage: null,
+            dismissStartBlocked: mockDismissStartBlocked,
+        });
+        render(<KkutuMenu />);
+        fireEvent.click(screen.getByText('나가기'));
+        expect(mockExitGame).toHaveBeenCalled();
+    });
+
+    it('should show confirm modal when start is blocked', () => {
+        (useGameState as unknown as jest.Mock).mockReturnValue({
+            isPlaying: false,
+            requestStart: mockRequestStart,
+            exitGame: mockExitGame,
+            startBlocked: true,
+            startBlockedMessage: 'Blocked',
+            dismissStartBlocked: mockDismissStartBlocked,
+        });
+        render(<KkutuMenu />);
+        expect(screen.getByTestId('confirm-modal')).toBeInTheDocument();
+        expect(screen.getByText('Blocked')).toBeInTheDocument();
+        
+        fireEvent.click(screen.getByText('Confirm'));
+        expect(mockDismissStartBlocked).toHaveBeenCalled();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/SettingsModal.test.tsx b/__tests__/mini-game/game/components/SettingsModal.test.tsx
new file mode 100644
index 0000000..4380717
--- /dev/null
+++ b/__tests__/mini-game/game/components/SettingsModal.test.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import SettingsModal from '@/app/mini-game/game/components/SettingsModal';
+import { soundManager } from '@/app/mini-game/game/lib/SoundManager';
+
+jest.mock('@/app/mini-game/game/lib/SoundManager');
+
+describe('SettingsModal', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        Object.defineProperty(window, 'localStorage', {
+            value: {
+                getItem: jest.fn().mockReturnValue(null),
+                setItem: jest.fn(),
+            },
+            writable: true
+        });
+    });
+
+    it('should render correctly', () => {
+        render(<SettingsModal onClose={() => {}} />);
+        expect(screen.getByText('설정')).toBeInTheDocument();
+        expect(screen.getByText('효과음/배경음 볼륨')).toBeInTheDocument();
+    });
+
+    it('should load volume from localStorage', () => {
+        (window.localStorage.getItem as jest.Mock).mockReturnValue('50');
+        render(<SettingsModal onClose={() => {}} />);
+        expect(screen.getByText('50%')).toBeInTheDocument();
+    });
+
+    it('should change volume', () => {
+        render(<SettingsModal onClose={() => {}} />);
+        const slider = screen.getByRole('slider');
+        fireEvent.change(slider, { target: { value: '80' } });
+        expect(screen.getByText('80%')).toBeInTheDocument();
+        expect(soundManager.setAllVolume).toHaveBeenCalledWith(0.8);
+    });
+
+    it('should save volume and close', () => {
+        const onClose = jest.fn();
+        render(<SettingsModal onClose={onClose} />);
+        const slider = screen.getByRole('slider');
+        fireEvent.change(slider, { target: { value: '80' } });
+        
+        fireEvent.click(screen.getByText('저장'));
+        
+        expect(window.localStorage.setItem).toHaveBeenCalledWith('kkutuVolume', '80');
+        expect(soundManager.setAllVolume).toHaveBeenCalledWith(0.8);
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    it('should close without saving when cancel is clicked', () => {
+        const onClose = jest.fn();
+        render(<SettingsModal onClose={onClose} />);
+        fireEvent.click(screen.getByText('취소'));
+        expect(onClose).toHaveBeenCalled();
+        expect(window.localStorage.setItem).not.toHaveBeenCalled();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/StartCharModal.test.tsx b/__tests__/mini-game/game/components/StartCharModal.test.tsx
new file mode 100644
index 0000000..4d09fd4
--- /dev/null
+++ b/__tests__/mini-game/game/components/StartCharModal.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import StartCharModal from '@/app/mini-game/game/components/StartCharModal';
+
+describe('StartCharModal', () => {
+    it('should not render when open is false', () => {
+        render(<StartCharModal value="" open={false} onClose={() => {}} onChange={() => {}} onSave={() => {}} />);
+        expect(screen.queryByText('제시어 시작글자 설정')).not.toBeInTheDocument();
+    });
+
+    it('should render correctly when open is true', () => {
+        render(<StartCharModal value="가나다" open={true} onClose={() => {}} onChange={() => {}} onSave={() => {}} />);
+        expect(screen.getByText('제시어 시작글자 설정')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('가나다')).toBeInTheDocument();
+    });
+
+    it('should call onChange when typing', () => {
+        const onChange = jest.fn();
+        render(<StartCharModal value="" open={true} onClose={() => {}} onChange={onChange} onSave={() => {}} />);
+        const textarea = screen.getByPlaceholderText('예: 가나다');
+        fireEvent.change(textarea, { target: { value: '라' } });
+        expect(onChange).toHaveBeenCalledWith('라');
+    });
+
+    it('should call onSave when save button is clicked', () => {
+        const onSave = jest.fn();
+        render(<StartCharModal value="" open={true} onClose={() => {}} onChange={() => {}} onSave={onSave} />);
+        fireEvent.click(screen.getByText('저장'));
+        expect(onSave).toHaveBeenCalled();
+    });
+
+    it('should call onClose when cancel button is clicked', () => {
+        const onClose = jest.fn();
+        render(<StartCharModal value="" open={true} onClose={onClose} onChange={() => {}} onSave={() => {}} />);
+        fireEvent.click(screen.getByText('취소'));
+        expect(onClose).toHaveBeenCalled();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/components/WordManagerModal.test.tsx b/__tests__/mini-game/game/components/WordManagerModal.test.tsx
new file mode 100644
index 0000000..9deecc5
--- /dev/null
+++ b/__tests__/mini-game/game/components/WordManagerModal.test.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import WordManagerModal from '@/app/mini-game/game/components/WordManagerModal';
+import * as wordDB from '@/app/mini-game/game/lib/wordDB';
+import gameManager from '@/app/mini-game/game/lib/GameManager';
+
+jest.mock('@/app/mini-game/game/lib/wordDB');
+jest.mock('@/app/mini-game/game/lib/GameManager');
+jest.mock('@/app/mini-game/game/components/ConfirmModal', () => ({ message, onConfirm, onCancel }: any) => (
+    <div data-testid="confirm-modal">
+        {message}
+        <button onClick={onConfirm}>Confirm</button>
+        <button onClick={onCancel}>Cancel</button>
+    </div>
+));
+
+// Mock useVirtualizer
+jest.mock('@tanstack/react-virtual', () => ({
+    useVirtualizer: ({ count, getScrollElement }: any) => ({
+        getVirtualItems: () => Array.from({ length: count }).map((_, i) => ({
+            index: i,
+            start: i * 56,
+            size: 56,
+            measureElement: jest.fn(),
+        })),
+        getTotalSize: () => count * 56,
+    }),
+}));
+
+describe('WordManagerModal', () => {
+    const mockWords = [
+        { word: '가방', theme: '자유' },
+        { word: '나비', theme: '자유' },
+    ];
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (wordDB.getAllWords as jest.Mock).mockResolvedValue(mockWords);
+        (wordDB.searchWordsByPrefix as jest.Mock).mockResolvedValue([mockWords[0]]);
+    });
+
+    it('should render and load words', async () => {
+        await act(async () => {
+            render(<WordManagerModal onClose={() => {}} />);
+        });
+        
+        expect(screen.getByText('단어 목록 관리')).toBeInTheDocument();
+        expect(wordDB.getAllWords).toHaveBeenCalled();
+        expect(screen.getByText('가방')).toBeInTheDocument();
+        expect(screen.getByText('나비')).toBeInTheDocument();
+    });
+
+    it('should search words', async () => {
+        jest.useFakeTimers();
+        await act(async () => {
+            render(<WordManagerModal onClose={() => {}} />);
+        });
+        
+        const searchInput = screen.getByPlaceholderText('예: 끝말, 게임...');
+        fireEvent.change(searchInput, { target: { value: '가' } });
+        
+        act(() => {
+            jest.advanceTimersByTime(300);
+        });
+        
+        await waitFor(() => {
+            expect(wordDB.searchWordsByPrefix).toHaveBeenCalledWith('가');
+        });
+        
+        jest.useRealTimers();
+    });
+
+    it('should add a word', async () => {
+        await act(async () => {
+            render(<WordManagerModal onClose={() => {}} />);
+        });
+        
+        const addInput = screen.getByPlaceholderText('새 단어 추가...');
+        fireEvent.change(addInput, { target: { value: '다람쥐' } });
+        
+        await act(async () => {
+            fireEvent.click(screen.getByText('추가'));
+        });
+        
+        expect(wordDB.addWord).toHaveBeenCalledWith('다람쥐');
+        expect(gameManager.addWordToDB).toHaveBeenCalledWith('다람쥐', ['자유']);
+        expect(wordDB.getAllWords).toHaveBeenCalledTimes(2); // Initial + after add
+    });
+
+    it('should delete a word', async () => {
+        await act(async () => {
+            render(<WordManagerModal onClose={() => {}} />);
+        });
+        
+        // Find delete button for '가방'
+        const deleteBtns = screen.getAllByText('삭제');
+        fireEvent.click(deleteBtns[0]); // First one
+        
+        expect(screen.getByTestId('confirm-modal')).toBeInTheDocument();
+        
+        await act(async () => {
+            fireEvent.click(screen.getByText('Confirm'));
+        });
+        
+        expect(wordDB.deleteWord).toHaveBeenCalledWith('가방');
+        expect(gameManager.deleteWordFromDB).toHaveBeenCalledWith('가방');
+    });
+
+    it('should edit a word', async () => {
+        await act(async () => {
+            render(<WordManagerModal onClose={() => {}} />);
+        });
+        
+        const editBtns = screen.getAllByText('수정');
+        fireEvent.click(editBtns[0]); // '가방'
+        
+        const editInput = screen.getByDisplayValue('가방');
+        fireEvent.change(editInput, { target: { value: '가방끈' } });
+        
+        await act(async () => {
+            fireEvent.click(screen.getByText('저장'));
+        });
+        
+        expect(wordDB.updateWord).toHaveBeenCalledWith('가방', '가방끈');
+        expect(gameManager.editWordInDB).toHaveBeenCalledWith('가방', '가방끈');
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/hooks/useChat.test.tsx b/__tests__/mini-game/game/hooks/useChat.test.tsx
new file mode 100644
index 0000000..1883451
--- /dev/null
+++ b/__tests__/mini-game/game/hooks/useChat.test.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { ChatProvider, useChat } from '@/app/mini-game/game/hooks/useChat';
+
+describe('useChat', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ChatProvider>{children}</ChatProvider>
+    );
+
+    it('should provide initial state', () => {
+        const { result } = renderHook(() => useChat(), { wrapper });
+        expect(result.current.chatInput).toBe('');
+        expect(result.current.messages.length).toBeGreaterThan(0); // Initial notice
+        expect(result.current.gameInputVisible).toBe(false);
+    });
+
+    it('should update chat input', () => {
+        const { result } = renderHook(() => useChat(), { wrapper });
+        act(() => {
+            result.current.setChatInput('hello');
+        });
+        expect(result.current.chatInput).toBe('hello');
+    });
+
+    it('should handle chat input change event', () => {
+        const { result } = renderHook(() => useChat(), { wrapper });
+        const event = { target: { value: 'world' } } as React.ChangeEvent<HTMLInputElement>;
+        act(() => {
+            result.current.handleChatInputChange(event);
+        });
+        expect(result.current.chatInput).toBe('world');
+    });
+
+    it('should register and call game input handler', () => {
+        const { result } = renderHook(() => useChat(), { wrapper });
+        const handler = jest.fn();
+        
+        act(() => {
+            result.current.registerGameHandleInput(handler);
+        });
+        
+        act(() => {
+            result.current.callGameInput('test');
+        });
+        
+        expect(handler).toHaveBeenCalledWith('test');
+    });
+
+    it('should register and call send hint', () => {
+        const { result } = renderHook(() => useChat(), { wrapper });
+        const handler = jest.fn();
+        
+        act(() => {
+            result.current.registerSendHint(handler);
+        });
+        
+        act(() => {
+            result.current.sendHint();
+        });
+        
+        expect(handler).toHaveBeenCalled();
+    });
+
+    it('should clear messages and show start notice', () => {
+        const { result } = renderHook(() => useChat(), { wrapper });
+        act(() => {
+            result.current.setMessages([]);
+            result.current.setChatInput('some input');
+        });
+        
+        act(() => {
+            result.current.clearMessagesAndShowStartNotice();
+        });
+        
+        expect(result.current.messages.length).toBe(1);
+        expect(result.current.messages[0].message).toBe('게임을 시작합니다!');
+        expect(result.current.chatInput).toBe('');
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/hooks/useChatLog.test.tsx b/__tests__/mini-game/game/hooks/useChatLog.test.tsx
new file mode 100644
index 0000000..fbe55c8
--- /dev/null
+++ b/__tests__/mini-game/game/hooks/useChatLog.test.tsx
@@ -0,0 +1,148 @@
+import { renderHook, act } from '@testing-library/react';
+import { useChatLog } from '@/app/mini-game/game/hooks/useChatLog';
+import { useChat } from '@/app/mini-game/game/hooks/useChat';
+import { useGameState } from '@/app/mini-game/game/hooks/useGameState';
+import gameManager from '@/app/mini-game/game/lib/GameManager';
+
+jest.mock('@/app/mini-game/game/hooks/useChat');
+jest.mock('@/app/mini-game/game/hooks/useGameState');
+jest.mock('@/app/mini-game/game/lib/GameManager');
+describe('useChatLog', () => {
+    const mockSetMessages = jest.fn();
+    const mockSetChatInput = jest.fn();
+    const mockCallGameInput = jest.fn();
+    const mockRegisterSendHint = jest.fn();
+    const mockRequestStart = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (useChat as jest.Mock).mockReturnValue({
+            messages: [],
+            setMessages: mockSetMessages,
+            chatInput: '',
+            setChatInput: mockSetChatInput,
+            callGameInput: mockCallGameInput,
+            registerSendHint: mockRegisterSendHint,
+            chatRef: { current: null },
+        });
+        (useGameState as unknown as jest.Mock).mockImplementation((selector) => {
+            const state = {
+                requestStart: mockRequestStart,
+                isPlaying: false,
+            };
+            return selector ? selector(state) : state;
+        });
+    });
+
+    it('should handle send message (normal)', () => {
+        (useChat as jest.Mock).mockReturnValue({
+            messages: [],
+            setMessages: mockSetMessages,
+            chatInput: 'hello',
+            setChatInput: mockSetChatInput,
+            callGameInput: mockCallGameInput,
+            registerSendHint: mockRegisterSendHint,
+            chatRef: { current: null },
+        });
+
+        const { result } = renderHook(() => useChatLog());
+        
+        act(() => {
+            result.current.handleSendMessage();
+        });
+        
+        expect(mockSetMessages).toHaveBeenCalled();
+        expect(mockSetChatInput).toHaveBeenCalledWith('');
+    });
+
+    it('should handle start command when not playing', () => {
+        (useChat as jest.Mock).mockReturnValue({
+            messages: [],
+            setMessages: mockSetMessages,
+            chatInput: '/시작',
+            setChatInput: mockSetChatInput,
+            callGameInput: mockCallGameInput,
+            registerSendHint: mockRegisterSendHint,
+            chatRef: { current: null },
+        });
+
+        const { result } = renderHook(() => useChatLog());
+        
+        act(() => {
+            result.current.handleSendMessage();
+        });
+        
+        expect(mockRequestStart).toHaveBeenCalled();
+        expect(mockSetMessages).toHaveBeenCalled(); // Notice message
+    });
+
+    it('should handle start command when playing', () => {
+        (useChat as jest.Mock).mockReturnValue({
+            messages: [],
+            setMessages: mockSetMessages,
+            chatInput: '/시작',
+            setChatInput: mockSetChatInput,
+            callGameInput: mockCallGameInput,
+            registerSendHint: mockRegisterSendHint,
+            chatRef: { current: null },
+        });
+        (useGameState as unknown as jest.Mock).mockImplementation((selector) => {
+            const state = {
+                requestStart: mockRequestStart,
+                isPlaying: true,
+            };
+            return selector ? selector(state) : state;
+        });
+
+        const { result } = renderHook(() => useChatLog());
+        
+        act(() => {
+            result.current.handleSendMessage();
+        });
+        
+        expect(mockCallGameInput).toHaveBeenCalledWith('/시작');
+    });
+
+    it('should handle gg command', () => {
+        (useChat as jest.Mock).mockReturnValue({
+            messages: [],
+            setMessages: mockSetMessages,
+            chatInput: '/gg',
+            setChatInput: mockSetChatInput,
+            callGameInput: mockCallGameInput,
+            registerSendHint: mockRegisterSendHint,
+            chatRef: { current: null },
+        });
+
+        const { result } = renderHook(() => useChatLog());
+        
+        act(() => {
+            result.current.handleSendMessage();
+        });
+        
+        expect(mockCallGameInput).toHaveBeenCalledWith('/gg');
+        expect(mockSetMessages).toHaveBeenCalled(); // Notice message
+    });
+
+    it('should handle hint command', () => {
+        (useChat as jest.Mock).mockReturnValue({
+            messages: [],
+            setMessages: mockSetMessages,
+            chatInput: '/ㅍ',
+            setChatInput: mockSetChatInput,
+            callGameInput: mockCallGameInput,
+            registerSendHint: mockRegisterSendHint,
+            chatRef: { current: null },
+        });
+        (gameManager.getHintWord as jest.Mock).mockReturnValue('힌트단어');
+
+        const { result } = renderHook(() => useChatLog());
+        
+        act(() => {
+            result.current.handleSendMessage();
+        });
+        
+        expect(mockSetMessages).toHaveBeenCalled();
+        expect(mockSetChatInput).toHaveBeenCalledWith('');
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/hooks/useGameLogic.test.tsx b/__tests__/mini-game/game/hooks/useGameLogic.test.tsx
new file mode 100644
index 0000000..394a620
--- /dev/null
+++ b/__tests__/mini-game/game/hooks/useGameLogic.test.tsx
@@ -0,0 +1,189 @@
+import { renderHook, act } from '@testing-library/react';
+import { useGameLogic } from '@/app/mini-game/game/hooks/useGameLogic';
+import { useChat } from '@/app/mini-game/game/hooks/useChat';
+import { soundManager } from '@/app/mini-game/game/lib/SoundManager';
+import gameManager from '@/app/mini-game/game/lib/GameManager';
+import { useGameState } from '@/app/mini-game/game/hooks/useGameState';
+
+jest.mock('@/app/mini-game/game/hooks/useChat');
+jest.mock('@/app/mini-game/game/lib/SoundManager');
+jest.mock('@/app/mini-game/game/lib/GameManager');
+jest.mock('@/app/mini-game/game/hooks/useGameState');
+
+describe('useGameLogic', () => {
+    const mockSetChatInput = jest.fn();
+    const mockClearMessagesAndShowStartNotice = jest.fn();
+    
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.useFakeTimers();
+        
+        (useChat as jest.Mock).mockReturnValue({
+            chatInput: '',
+            setChatInput: mockSetChatInput,
+            clearMessagesAndShowStartNotice: mockClearMessagesAndShowStartNotice,
+        });
+        
+        (useGameState as unknown as jest.Mock).mockImplementation((selector) => {
+            const state = {
+                pendingStart: false,
+                clearPendingStart: jest.fn(),
+                blockStart: jest.fn(),
+            };
+            return selector ? selector(state) : state;
+        });
+
+        (gameManager.getSetting as jest.Mock).mockReturnValue({ roundTime: 60000 });
+        (gameManager.canGameStart as jest.Mock).mockReturnValue(true);
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    it('should initialize correctly', () => {
+        const { result } = renderHook(() => useGameLogic());
+        expect(result.current.word).toBe("/시작을 입력하면 게임시작!");
+        expect(result.current.isGameStarted).toBe(false);
+    });
+
+    it('should handle start command', () => {
+        const { result } = renderHook(() => useGameLogic());
+        
+        (gameManager.gameStart as jest.Mock).mockReturnValue({
+            startChar: '가',
+            missionChar: null,
+            turnTime: 5000,
+            turnSpeed: 5
+        });
+        (gameManager.getCurrentState as jest.Mock).mockReturnValue({
+            startChar: '가',
+            missionChar: null
+        });
+
+        act(() => {
+            result.current.handleInput('/시작');
+        });
+        
+        expect(mockClearMessagesAndShowStartNotice).toHaveBeenCalled();
+        expect(soundManager.playWithEnd).toHaveBeenCalledWith('game_start', expect.any(Function));
+        
+        // Trigger callback manually
+        const call = (soundManager.playWithEnd as jest.Mock).mock.calls.find(c => c[0] === 'game_start');
+        if (call) {
+            act(() => {
+                call[1]();
+            });
+        }
+        
+        // Trigger round_start callback
+        const call2 = (soundManager.playWithEnd as jest.Mock).mock.calls.find(c => c[0] === 'round_start');
+        if (call2) {
+            act(() => {
+                call2[1]();
+            });
+        }
+
+        expect(result.current.isGameStarted).toBe(true);
+        expect(result.current.word).toBe('가');
+    });
+
+    it('should handle valid word submission', () => {
+        const { result } = renderHook(() => useGameLogic());
+        
+        // Start game first
+        (gameManager.gameStart as jest.Mock).mockReturnValue({
+            startChar: '가',
+            missionChar: null,
+            turnTime: 5000,
+            turnSpeed: 5
+        });
+        (gameManager.getCurrentState as jest.Mock).mockReturnValue({
+            startChar: '가',
+            missionChar: null
+        });
+        
+        act(() => {
+            result.current.handleInput('/시작');
+        });
+        
+        // Trigger callbacks
+        const call = (soundManager.playWithEnd as jest.Mock).mock.calls.find(c => c[0] === 'game_start');
+        if (call) act(() => { call[1](); });
+        const call2 = (soundManager.playWithEnd as jest.Mock).mock.calls.find(c => c[0] === 'round_start');
+        if (call2) act(() => { call2[1](); });
+
+        // Submit word
+        (gameManager.submitWord as jest.Mock).mockReturnValue({
+            ok: true,
+            wordEntry: { theme: ['자유'] },
+            nextChar: '나',
+            nextMissionChar: null,
+            turnSpeed: 5,
+            trunTime: 5000
+        });
+        (gameManager.getCurrentState as jest.Mock).mockReturnValue({
+            startChar: '나',
+            missionChar: null
+        });
+
+        act(() => {
+            result.current.handleInput('가방');
+        });
+        
+        expect(gameManager.submitWord).toHaveBeenCalledWith('가방', expect.any(Number));
+        expect(result.current.chainCount).toBe(1);
+        
+        // Animation logic uses setTimeout
+        act(() => {
+            jest.advanceTimersByTime(5000);
+        });
+        
+        expect(result.current.word).toBe('나');
+    });
+
+    it('should handle invalid word submission', () => {
+        const { result } = renderHook(() => useGameLogic());
+        
+        // Start game
+        (gameManager.gameStart as jest.Mock).mockReturnValue({
+            startChar: '가',
+            missionChar: null,
+            turnTime: 5000,
+            turnSpeed: 5
+        });
+        (gameManager.getCurrentState as jest.Mock).mockReturnValue({
+            startChar: '가',
+            missionChar: null
+        });
+        
+        act(() => {
+            result.current.handleInput('/시작');
+        });
+        
+        // Trigger callbacks
+        const call = (soundManager.playWithEnd as jest.Mock).mock.calls.find(c => c[0] === 'game_start');
+        if (call) act(() => { call[1](); });
+        const call2 = (soundManager.playWithEnd as jest.Mock).mock.calls.find(c => c[0] === 'round_start');
+        if (call2) act(() => { call2[1](); });
+
+        // Submit invalid word
+        (gameManager.submitWord as jest.Mock).mockReturnValue({
+            ok: false,
+            reason: 'Invalid'
+        });
+
+        act(() => {
+            result.current.handleInput('다람쥐');
+        });
+        
+        expect(result.current.isFail).toBe(true);
+        expect(soundManager.play).toHaveBeenCalledWith('fail');
+        
+        act(() => {
+            jest.advanceTimersByTime(2500);
+        });
+        
+        expect(result.current.isFail).toBe(false);
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/hooks/useGameState.test.tsx b/__tests__/mini-game/game/hooks/useGameState.test.tsx
new file mode 100644
index 0000000..171b4de
--- /dev/null
+++ b/__tests__/mini-game/game/hooks/useGameState.test.tsx
@@ -0,0 +1,109 @@
+import { renderHook, act } from '@testing-library/react';
+import { useGameState } from '@/app/mini-game/game/hooks/useGameState';
+import gameManager from '@/app/mini-game/game/lib/GameManager';
+import * as hooks from '@/app/mini-game/game/store/hooks';
+import { setPlaying, setPendingStart, setStartBlocked, resetGame } from '@/app/mini-game/game/store/gameSlice';
+
+jest.mock('@/app/mini-game/game/lib/GameManager', () => ({
+    __esModule: true,
+    default: {
+        canGameStart: jest.fn(),
+    },
+}));
+
+jest.mock('@/app/mini-game/game/store/hooks');
+
+describe('useGameState', () => {
+    const mockDispatch = jest.fn();
+    const mockSelector = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (hooks.useAppDispatch as jest.Mock).mockReturnValue(mockDispatch);
+        (hooks.useAppSelector as jest.Mock).mockImplementation((selector) => mockSelector(selector));
+        
+        // Default selector behavior
+        mockSelector.mockImplementation((selector) => selector({
+            game: {
+                isPlaying: false,
+                pendingStart: false,
+                startBlocked: false,
+                startBlockedMessage: null,
+            }
+        }));
+    });
+
+    it('should return current state', () => {
+        const { result } = renderHook(() => useGameState());
+        
+        expect(result.current.isPlaying).toBe(false);
+        expect(result.current.pendingStart).toBe(false);
+        expect(result.current.startBlocked).toBe(false);
+        expect(result.current.startBlockedMessage).toBeNull();
+    });
+
+    it('should request start successfully', () => {
+        (gameManager.canGameStart as jest.Mock).mockReturnValue(true);
+        
+        const { result } = renderHook(() => useGameState());
+        
+        act(() => {
+            result.current.requestStart();
+        });
+        
+        expect(mockDispatch).toHaveBeenCalledWith(setPlaying(true));
+        expect(mockDispatch).toHaveBeenCalledWith(setPendingStart(true));
+    });
+
+    it('should block start if gameManager says no', () => {
+        (gameManager.canGameStart as jest.Mock).mockReturnValue(false);
+        
+        const { result } = renderHook(() => useGameState());
+        
+        act(() => {
+            result.current.requestStart();
+        });
+        
+        expect(mockDispatch).toHaveBeenCalledWith(setStartBlocked({ blocked: true, message: '게임을 시작할 수 없습니다.' }));
+    });
+
+    it('should clear pending start', () => {
+        const { result } = renderHook(() => useGameState());
+        
+        act(() => {
+            result.current.clearPendingStart();
+        });
+        
+        expect(mockDispatch).toHaveBeenCalledWith(setPendingStart(false));
+    });
+
+    it('should exit game', () => {
+        const { result } = renderHook(() => useGameState());
+        
+        act(() => {
+            result.current.exitGame();
+        });
+        
+        expect(mockDispatch).toHaveBeenCalledWith(resetGame());
+    });
+
+    it('should dismiss start blocked', () => {
+        const { result } = renderHook(() => useGameState());
+        
+        act(() => {
+            result.current.dismissStartBlocked();
+        });
+        
+        expect(mockDispatch).toHaveBeenCalledWith(setStartBlocked({ blocked: false, message: null }));
+    });
+
+    it('should block start with message', () => {
+        const { result } = renderHook(() => useGameState());
+        
+        act(() => {
+            result.current.blockStart('Custom message');
+        });
+        
+        expect(mockDispatch).toHaveBeenCalledWith(setStartBlocked({ blocked: true, message: 'Custom message' }));
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/lib/GameLogic.test.ts b/__tests__/mini-game/game/lib/GameLogic.test.ts
new file mode 100644
index 0000000..6acae76
--- /dev/null
+++ b/__tests__/mini-game/game/lib/GameLogic.test.ts
@@ -0,0 +1,132 @@
+import { GameLogic } from '@/app/mini-game/game/lib/GameLogic';
+import { WordService } from '@/app/mini-game/game/services/WordService';
+import { GameSetting, CurrentState } from '@/app/mini-game/game/types/game.types';
+
+// Mock WordService
+const mockWordService = {
+    hasWord: jest.fn(),
+    NormalStartCharSet: new Set(['가', '나', '다']),
+    MissionStartCharSet: new Set([['가', '나'], ['다', '라']]),
+    NormalEngStartCharSet: new Set(['a', 'b', 'c']),
+    MissionEngStartCharSet: new Set([['a', 'b'], ['c', 'd']]),
+} as unknown as WordService;
+
+describe('GameLogic', () => {
+    describe('getTurnSpeed', () => {
+        it('should return correct speed based on round time', () => {
+            expect(GameLogic.getTurnSpeed(0)).toBe(0);
+            expect(GameLogic.getTurnSpeed(4000)).toBe(10);
+            expect(GameLogic.getTurnSpeed(10000)).toBe(9);
+            expect(GameLogic.getTurnSpeed(17000)).toBe(8);
+            expect(GameLogic.getTurnSpeed(25000)).toBe(7);
+            expect(GameLogic.getTurnSpeed(34000)).toBe(6);
+            expect(GameLogic.getTurnSpeed(44000)).toBe(5);
+            expect(GameLogic.getTurnSpeed(55000)).toBe(4);
+            expect(GameLogic.getTurnSpeed(67000)).toBe(3);
+            expect(GameLogic.getTurnSpeed(80000)).toBe(2);
+            expect(GameLogic.getTurnSpeed(94000)).toBe(1);
+            expect(GameLogic.getTurnSpeed(100000)).toBe(0);
+        });
+    });
+
+    describe('isValidWord', () => {
+        const nowState: CurrentState = { startChar: '가', missionChar: null };
+
+        it('should return false if nowState is null', () => {
+            expect(GameLogic.isValidWord('가방', null, mockWordService)).toBe(false);
+        });
+
+        it('should return false if word length is <= 1', () => {
+            expect(GameLogic.isValidWord('가', nowState, mockWordService)).toBe(false);
+        });
+
+        it('should return false if word is not in DB', () => {
+            (mockWordService.hasWord as jest.Mock).mockReturnValue(false);
+            expect(GameLogic.isValidWord('가방', nowState, mockWordService)).toBe(false);
+        });
+
+        it('should return false if start char does not match', () => {
+            (mockWordService.hasWord as jest.Mock).mockReturnValue(true);
+            expect(GameLogic.isValidWord('나비', nowState, mockWordService)).toBe(false);
+        });
+
+        it('should return true if word is valid', () => {
+            (mockWordService.hasWord as jest.Mock).mockReturnValue(true);
+            expect(GameLogic.isValidWord('가방', nowState, mockWordService)).toBe(true);
+        });
+
+        it('should handle duem law', () => {
+            // Assuming duemLaw('리') returns '이' (or similar logic if implemented)
+            // But here we test if it checks against validStartChars
+            // Let's assume '리' -> '이' mapping exists in duemLaw implementation
+            // Since we are using real duemLaw from import, we rely on its behavior.
+            // If duemLaw is simple, we can test it.
+            // For now, let's just test basic start char match.
+            const state: CurrentState = { startChar: '리', missionChar: null };
+            (mockWordService.hasWord as jest.Mock).mockReturnValue(true);
+            
+            // If '이발소' is input for '리' start char, it should be valid if duemLaw works
+            // But we need to know what duemLaw returns.
+            // Let's stick to basic matching for now.
+            expect(GameLogic.isValidWord('리본', state, mockWordService)).toBe(true);
+        });
+    });
+
+    describe('getStartChar', () => {
+        it('should return a valid start char for Korean Normal mode', () => {
+            const setting: GameSetting = {
+                lang: 'ko',
+                mode: 'normal',
+                notAgainSameChar: false,
+                wantStartChar: new Set(),
+                // ... other props
+            } as unknown as GameSetting;
+
+            const result = GameLogic.getStartChar(setting, mockWordService);
+            expect(['가', '나', '다']).toContain(result.startChar);
+            expect(result.missionChar).toBeNull();
+        });
+
+        it('should return a valid start char for Korean Mission mode', () => {
+            const setting: GameSetting = {
+                lang: 'ko',
+                mode: 'mission',
+                notAgainSameChar: false,
+                wantStartChar: new Set(),
+            } as unknown as GameSetting;
+
+            const result = GameLogic.getStartChar(setting, mockWordService);
+            // MissionStartCharSet has [['가', '나'], ['다', '라']]
+            // So startChar should be '가' or '다'
+            expect(['가', '다']).toContain(result.startChar);
+            expect(result.missionChar).not.toBeNull();
+        });
+
+        it('should return a valid start char for English Normal mode', () => {
+            const setting: GameSetting = {
+                lang: 'en',
+                mode: 'normal',
+                notAgainSameChar: false,
+                wantStartChar: new Set(),
+            } as unknown as GameSetting;
+
+            const result = GameLogic.getStartChar(setting, mockWordService);
+            expect(['a', 'b', 'c']).toContain(result.startChar);
+            expect(result.missionChar).toBeNull();
+        });
+
+        it('should respect exclusion list in Normal mode', () => {
+            const setting: GameSetting = {
+                lang: 'ko',
+                mode: 'normal',
+                notAgainSameChar: true,
+                wantStartChar: new Set(['가', '나', '다']),
+            } as unknown as GameSetting;
+            
+            const exclusion = new Set(['가', '나']);
+            const result = GameLogic.getStartChar(setting, mockWordService, exclusion);
+            
+            expect(result.startChar).toBe('다');
+        });
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/lib/GameManager.test.ts b/__tests__/mini-game/game/lib/GameManager.test.ts
new file mode 100644
index 0000000..b627ff4
--- /dev/null
+++ b/__tests__/mini-game/game/lib/GameManager.test.ts
@@ -0,0 +1,190 @@
+import gameManager from '@/app/mini-game/game/lib/GameManager';
+
+describe('GameManager', () => {
+    beforeEach(() => {
+        gameManager.clearDB();
+        gameManager.updateSetting({
+            lang: 'ko',
+            mode: 'normal',
+            hintMode: 'auto',
+            notAgainSameChar: false,
+            roundTime: 60000,
+            wantStartChar: new Set()
+        });
+        jest.restoreAllMocks();
+    });
+
+    it('should be a singleton', () => {
+        expect(gameManager).toBeDefined();
+    });
+
+    it('should load word DB correctly', () => {
+        const words = [
+            { word: '가방', theme: ['자유'] },
+            { word: '나비', theme: ['자유'] },
+            { word: 'apple', theme: ['english'] }
+        ];
+        gameManager.loadWordDB(words, {});
+        
+        gameManager.updateSetting({ lang: 'ko', mode: 'normal' });
+        expect(gameManager.canGameStart()).toBe(true);
+        
+        gameManager.updateSetting({ lang: 'en', mode: 'normal' });
+        expect(gameManager.canGameStart()).toBe(true);
+    });
+
+    it('should handle game flow (normal mode)', () => {
+        const words = [
+            { word: '가방', theme: ['자유'] },
+            { word: '방구', theme: ['자유'] }
+        ];
+        gameManager.loadWordDB(words, { lang: 'ko', mode: 'normal' });
+        
+        const startState = gameManager.gameStart();
+        expect(['가', '방']).toContain(startState.startChar);
+        
+        let wordToSubmit = '';
+        if (startState.startChar === '가') wordToSubmit = '가방';
+        else if (startState.startChar === '방') wordToSubmit = '방구';
+        
+        const result = gameManager.submitWord(wordToSubmit, 50000);
+        if (result.ok) {
+            expect(result.ok).toBe(true);
+            expect(typeof result.nextChar).toBe('string');
+            expect(result.nextChar.length).toBeGreaterThan(0);
+        } else {
+            fail('Submit word failed');
+        }
+    });
+
+    it('should handle duem law', () => {
+        // '리본' starts with '리'. '이발' starts with '이'.
+        // '리' -> '이' via duem law.
+        const words = [
+            { word: '리본', theme: ['자유'] },
+            { word: '이발', theme: ['자유'] }
+        ];
+        gameManager.loadWordDB(words, { lang: 'ko', mode: 'normal' });
+        
+        // Force start char to '리' by mocking Math.random if needed, 
+        // or just retry until we get '리' (but that's flaky).
+        // Better: clear DB and load only '리본' first to force start char '리', 
+        // then add '이발' dynamically? No, gameStart picks from existing DB.
+        
+        // Let's mock Math.random to pick the index corresponding to '리'.
+        // We don't know the order in Set.
+        // But we can check the start char and if it is '리', submit '이발'.
+        // If it is '이', submit '리본' (Wait, '이' -> '리' is not duem law, duem law is one way usually? 
+        // Actually duemLaw function converts '리' to '이'.
+        // isValidWord checks: [startChar, duemLaw(startChar)].includes(word[0])
+        // So if startChar is '리', word can start with '리' or '이'.
+        // If startChar is '이', word can start with '이' or duemLaw('이')='이'.
+        
+        // So we need startChar='리'.
+        
+        // Hack: Load only '리본'. Start game. Then add '이발'.
+        gameManager.clearDB();
+        gameManager.loadWordDB([{ word: '리본', theme: ['자유'] }], { lang: 'ko', mode: 'normal' });
+        const startState = gameManager.gameStart();
+        expect(startState.startChar).toBe('리');
+        
+        gameManager.addWordToDB('이발', ['자유']);
+        
+        const result = gameManager.submitWord('이발', 50000);
+        expect(result.ok).toBe(true);
+    });
+
+    it('should add/edit/delete words', () => {
+        gameManager.addWordToDB('테스트', ['테마']);
+        
+        // Check if added by trying to start game with it
+        gameManager.updateSetting({ lang: 'ko', mode: 'normal' });
+        const startState = gameManager.gameStart();
+        expect(startState.startChar).toBe('테');
+        
+        // Edit
+        gameManager.editWordInDB('테스트', '수정된');
+        // Now start char should be '수' (if we restart game or check DB)
+        // Note: gameStart resets state based on current DB.
+        const startState2 = gameManager.gameStart();
+        expect(startState2.startChar).toBe('수');
+        
+        // Delete
+        gameManager.deleteWordFromDB('수정된');
+        expect(gameManager.canGameStart()).toBe(false);
+    });
+
+    it('should handle mission mode', () => {
+        // Mission mode: start char and mission char.
+        // Word must include mission char.
+        const words = [
+            { word: '가방', theme: ['자유'] } // Contains '가', '방'
+        ];
+        gameManager.loadWordDB(words, { lang: 'ko', mode: 'mission' });
+        
+        const startState = gameManager.gameStart();
+        expect(startState.startChar).toBe('가');
+        expect(startState.missionChar).toMatch(/[가방]/);
+        
+        const result = gameManager.submitWord('가방', 50000);
+        expect(result.ok).toBe(true);
+    });
+
+    it('should fail if mission char is missing in mission mode', () => {
+        const words = [
+            { word: '가방', theme: ['자유'] }, // Contains '가', '방'
+            { word: '가위', theme: ['자유'] }  // Contains '가', '위'
+        ];
+        // We want startChar='가', missionChar='방'.
+        // '가위' does not have '방'.
+        
+        // Force mission char to be '방'.
+        // We can filter DB to only have words with '방' to force it? 
+        // No, MissionStartCharSet contains [start, mission] pairs.
+        // If we have '가방', pairs are ('가', '가'), ('가', '방').
+        
+        // Let's just check the result reason if we fail.
+        gameManager.loadWordDB(words, { lang: 'ko', mode: 'mission' });
+        
+        // Try until we get a mission char that is NOT in '가위' (e.g. '방')
+        // Or just mock Math.random.
+        
+        // Let's try to submit '가위' when mission char is '방'.
+        // We can manually set `nowState` if we could, but it's private.
+        // We can loop gameStart until we get desired state?
+        
+        let found = false;
+        for(let i=0; i<100; i++) {
+            const state = gameManager.gameStart();
+            if (state.startChar === '가' && state.missionChar === '방') {
+                found = true;
+                break;
+            }
+        }
+        
+        if (found) {
+            const result = gameManager.submitWord('가위', 50000);
+            expect(result.ok).toBe(false);
+            if (!result.ok) { // Type guard
+                expect(result.reason).toBe('미션 글자 미포함!');
+            }
+        }
+    });
+
+    it('should provide hints', () => {
+        const words = [
+            { word: '가방', theme: ['자유'] }
+        ];
+        gameManager.loadWordDB(words, { lang: 'ko', mode: 'normal', hintMode: 'auto' });
+        gameManager.gameStart();
+        
+        const hint = gameManager.getHint();
+        expect(hint).toBe('가방');
+        
+        const hintWord = gameManager.getHintWord();
+        // hintStack 0 -> disassembled first char? No, loop over word length.
+        // hintWord is '가방'.
+        // hintStack 0: disassemble('가')[0] + disassemble('방')[0] = 'ㄱ' + 'ㅂ'
+        expect(hintWord).toBe('ㄱㅂ');
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/lib/SoundManager.test.ts b/__tests__/mini-game/game/lib/SoundManager.test.ts
new file mode 100644
index 0000000..f2dd499
--- /dev/null
+++ b/__tests__/mini-game/game/lib/SoundManager.test.ts
@@ -0,0 +1,109 @@
+import { soundManager } from '@/app/mini-game/game/lib/SoundManager';
+import { Howl } from 'howler';
+
+jest.mock('howler');
+
+describe('SoundManager', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        // Ensure sounds are loaded for each test if needed, or just once.
+        // Since soundManager is a singleton, we might want to reset it or just call load() again.
+        // The load method overwrites properties in `sounds` object, so calling it again is fine.
+    });
+
+    it('should load sounds correctly', () => {
+        soundManager.load();
+        expect(Howl).toHaveBeenCalled();
+        const sounds = (soundManager as any).sounds;
+        expect(Object.keys(sounds).length).toBeGreaterThan(0);
+    });
+
+    it('should play a sound', () => {
+        soundManager.load();
+        const soundName = 'game_start';
+        soundManager.play(soundName);
+        
+        const sounds = (soundManager as any).sounds;
+        expect(sounds[soundName]).toBeDefined();
+        expect(sounds[soundName].stop).toHaveBeenCalled();
+        expect(sounds[soundName].play).toHaveBeenCalled();
+    });
+
+    it('should playOnce correctly', () => {
+        soundManager.load();
+        const soundName = 'fail';
+        const sounds = (soundManager as any).sounds;
+        
+        // Mock Date.now
+        let now = 1000;
+        jest.spyOn(Date, 'now').mockImplementation(() => now);
+
+        // First play
+        soundManager.playOnce(soundName);
+        expect(sounds[soundName].play).toHaveBeenCalledTimes(1);
+        
+        // Immediate second play (should be ignored)
+        now += 10; // +10ms
+        soundManager.playOnce(soundName);
+        expect(sounds[soundName].play).toHaveBeenCalledTimes(1);
+        
+        // Play after delay
+        now += 100; // +100ms (total 110ms > 80ms)
+        soundManager.playOnce(soundName);
+        expect(sounds[soundName].play).toHaveBeenCalledTimes(2);
+        
+        jest.restoreAllMocks();
+    });
+
+    it('should stop a sound', () => {
+        soundManager.load();
+        const soundName = 'game_start';
+        soundManager.stop(soundName);
+        const sounds = (soundManager as any).sounds;
+        expect(sounds[soundName].stop).toHaveBeenCalled();
+    });
+
+    it('should set volume', () => {
+        soundManager.load();
+        const soundName = 'game_start';
+        soundManager.setVolume(soundName, 0.5);
+        const sounds = (soundManager as any).sounds;
+        expect(sounds[soundName].volume).toHaveBeenCalledWith(0.5);
+    });
+
+    it('should set all volume', () => {
+        soundManager.load();
+        soundManager.setAllVolume(0.5);
+        const sounds = (soundManager as any).sounds;
+        Object.values(sounds).forEach((s: any) => {
+            expect(s.volume).toHaveBeenCalledWith(0.5);
+        });
+    });
+
+    it('should stop all sounds', () => {
+        soundManager.load();
+        soundManager.stopAllSounds();
+        const sounds = (soundManager as any).sounds;
+        Object.values(sounds).forEach((s: any) => {
+            expect(s.stop).toHaveBeenCalled();
+        });
+    });
+
+    it('should playWithEnd and trigger callback', () => {
+        soundManager.load();
+        const soundName = 'game_start';
+        const cb = jest.fn();
+        soundManager.playWithEnd(soundName, cb);
+        
+        const sounds = (soundManager as any).sounds;
+        expect(sounds[soundName].play).toHaveBeenCalled();
+        expect(sounds[soundName].once).toHaveBeenCalledWith('end', expect.any(Function));
+        
+        // Manually trigger the callback
+        const call = sounds[soundName].once.mock.calls.find((c: any) => c[0] === 'end');
+        if (call) {
+            call[1](); // Execute the callback passed to 'once'
+        }
+        expect(cb).toHaveBeenCalled();
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/lib/fileUtils.test.ts b/__tests__/mini-game/game/lib/fileUtils.test.ts
new file mode 100644
index 0000000..00ca523
--- /dev/null
+++ b/__tests__/mini-game/game/lib/fileUtils.test.ts
@@ -0,0 +1,42 @@
+import { parseWordsFromFile } from '@/app/mini-game/game/lib/fileUtils';
+
+describe('fileUtils', () => {
+    describe('parseWordsFromFile', () => {
+        it('should throw error if file size exceeds 1MB', async () => {
+            const file = new File(['a'.repeat(1024 * 1024 + 1)], 'test.txt', { type: 'text/plain' });
+            await expect(parseWordsFromFile(file)).rejects.toThrow('파일 크기는 1MB를 초과할 수 없습니다.');
+        });
+
+        it('should throw error if file extension is not .txt', async () => {
+            const file = new File(['content'], 'test.csv', { type: 'text/csv' });
+            await expect(parseWordsFromFile(file)).rejects.toThrow('txt 파일만 업로드 가능합니다.');
+        });
+
+        it('should parse words correctly', async () => {
+            const content = 'Apple\nBanana\nC\nHello World!';
+            const file = new File([content], 'words.txt', { type: 'text/plain' });
+            // Mock text() method since jsdom File might not support it
+            Object.defineProperty(file, 'text', {
+                value: async () => content
+            });
+            
+            const result = await parseWordsFromFile(file);
+            
+            // "C" is filtered out because length <= 1
+            // "Hello World!" -> "helloworld" (special chars removed, lowercase)
+            expect(result).toEqual(['apple', 'banana', 'helloworld']);
+        });
+
+        it('should remove special characters and convert to lowercase', async () => {
+            const content = 'Ap@#ple\nBa_na-na';
+            const file = new File([content], 'words.txt', { type: 'text/plain' });
+            Object.defineProperty(file, 'text', {
+                value: async () => content
+            });
+            
+            const result = await parseWordsFromFile(file);
+            
+            expect(result).toEqual(['apple', 'banana']);
+        });
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/lib/wordDB.test.ts b/__tests__/mini-game/game/lib/wordDB.test.ts
new file mode 100644
index 0000000..668bf00
--- /dev/null
+++ b/__tests__/mini-game/game/lib/wordDB.test.ts
@@ -0,0 +1,126 @@
+import * as wordDB from '@/app/mini-game/game/lib/wordDB';
+import { openDB } from 'idb';
+
+jest.mock('idb');
+
+describe('wordDB', () => {
+    const mockDB = {
+        transaction: jest.fn(),
+        getAll: jest.fn(),
+        put: jest.fn(),
+        delete: jest.fn(),
+        count: jest.fn(),
+        clear: jest.fn(),
+        objectStoreNames: {
+            contains: jest.fn(),
+        },
+        createObjectStore: jest.fn(),
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (openDB as jest.Mock).mockResolvedValue(mockDB);
+    });
+
+    it('should load words from file', async () => {
+        const file = new File(['word1\nword2'], 'test.txt', { type: 'text/plain' });
+        Object.defineProperty(file, 'text', {
+            value: () => Promise.resolve('word1\nword2')
+        });
+
+        const mockTx = {
+            objectStore: jest.fn().mockReturnValue({
+                put: jest.fn(),
+            }),
+            done: Promise.resolve(),
+        };
+        mockDB.transaction.mockReturnValue(mockTx);
+
+        const count = await wordDB.loadWordsFromFile(file);
+        
+        expect(openDB).toHaveBeenCalled();
+        expect(mockDB.transaction).toHaveBeenCalledWith('words', 'readwrite');
+        expect(mockTx.objectStore).toHaveBeenCalledWith('words');
+        // word1, word2 are valid.
+        expect(mockTx.objectStore().put).toHaveBeenCalledTimes(2);
+        expect(count).toBe(2);
+    });
+
+    it('should throw error if file is too large', async () => {
+        const file = new File([''], 'test.txt', { type: 'text/plain' });
+        Object.defineProperty(file, 'size', { value: 1024 * 1024 + 1 });
+
+        await expect(wordDB.loadWordsFromFile(file)).rejects.toThrow('파일 크기는 1MB를 초과할 수 없습니다.');
+    });
+
+    it('should throw error if file is not txt', async () => {
+        const file = new File(['content'], 'test.png', { type: 'image/png' });
+        await expect(wordDB.loadWordsFromFile(file)).rejects.toThrow('txt 파일만 업로드 가능합니다.');
+    });
+
+    it('should get all words', async () => {
+        const mockWords = [
+            { word: '나비', theme: '자유' },
+            { word: '가방', theme: '자유' },
+        ];
+        mockDB.getAll.mockResolvedValue(mockWords);
+
+        const words = await wordDB.getAllWords();
+        
+        expect(mockDB.getAll).toHaveBeenCalledWith('words');
+        expect(words[0].word).toBe('가방'); // Sorted
+        expect(words[1].word).toBe('나비');
+    });
+
+    it('should search words by prefix', async () => {
+        const mockWords = [
+            { word: '가방', theme: '자유' },
+            { word: '가위', theme: '자유' },
+            { word: '나비', theme: '자유' },
+        ];
+        mockDB.getAll.mockResolvedValue(mockWords);
+
+        const results = await wordDB.searchWordsByPrefix('가');
+        expect(results.length).toBe(2);
+        expect(results[0].word).toBe('가방');
+        expect(results[1].word).toBe('가위');
+    });
+
+    it('should update word', async () => {
+        const mockTx = {
+            objectStore: jest.fn().mockReturnValue({
+                delete: jest.fn(),
+                put: jest.fn(),
+            }),
+            done: Promise.resolve(),
+        };
+        mockDB.transaction.mockReturnValue(mockTx);
+
+        await wordDB.updateWord('old', 'new');
+        
+        expect(mockTx.objectStore().delete).toHaveBeenCalledWith('old');
+        expect(mockTx.objectStore().put).toHaveBeenCalledWith({ word: 'new', theme: '자유' });
+    });
+
+    it('should delete word', async () => {
+        await wordDB.deleteWord('word');
+        expect(mockDB.delete).toHaveBeenCalledWith('words', 'word');
+    });
+
+    it('should add word', async () => {
+        await wordDB.addWord('word');
+        expect(mockDB.put).toHaveBeenCalledWith('words', { word: 'word', theme: '자유' });
+    });
+
+    it('should check if has words', async () => {
+        mockDB.count.mockResolvedValue(1);
+        const has = await wordDB.hasWords();
+        expect(has).toBe(true);
+        expect(mockDB.count).toHaveBeenCalledWith('words');
+    });
+
+    it('should clear all words', async () => {
+        await wordDB.clearAllWords();
+        expect(mockDB.clear).toHaveBeenCalledWith('words');
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/game/services/services.test.ts b/__tests__/mini-game/game/services/services.test.ts
new file mode 100644
index 0000000..0a79c74
--- /dev/null
+++ b/__tests__/mini-game/game/services/services.test.ts
@@ -0,0 +1,117 @@
+import { WordService } from "@/app/mini-game/game/services/WordService";
+
+describe('WordService', () => {
+    let wordService: WordService;
+
+    beforeEach(() => {
+        wordService = WordService.getInstance();
+        wordService.clearDB();
+    });
+
+    it('should be a singleton', () => {
+        const instance1 = WordService.getInstance();
+        const instance2 = WordService.getInstance();
+        expect(instance1).toBe(instance2);
+    });
+
+    describe('loadWordDB', () => {
+        it('should load words correctly', () => {
+            const data = [
+                { word: 'apple', theme: ['fruit'] },
+                { word: 'banana', theme: ['fruit'] },
+                { word: '가방', theme: ['object'] }
+            ];
+            wordService.loadWordDB(data);
+
+            expect(wordService.hasWord('apple')).toBe(true);
+            expect(wordService.hasWord('banana')).toBe(true);
+            expect(wordService.hasWord('가방')).toBe(true);
+            expect(wordService.hasWord('grape')).toBe(false);
+        });
+
+        it('should filter out invalid words', () => {
+            const data = [
+                { word: 'a', theme: [] }, // too short
+                { word: '!', theme: [] }, // special char only
+                { word: 'valid', theme: [] }
+            ];
+            wordService.loadWordDB(data);
+
+            expect(wordService.hasWord('a')).toBe(false);
+            expect(wordService.hasWord('!')).toBe(false);
+            expect(wordService.hasWord('valid')).toBe(true);
+        });
+    });
+
+    describe('addWordToDB', () => {
+        it('should add a new word', () => {
+            const result = wordService.addWordToDB('newword', ['test']);
+            expect(result).toBe(true);
+            expect(wordService.hasWord('newword')).toBe(true);
+        });
+
+        it('should not add duplicate word', () => {
+            wordService.addWordToDB('word', ['test']);
+            const result = wordService.addWordToDB('word', ['test']);
+            expect(result).toBe(false);
+        });
+
+        it('should not add invalid word', () => {
+            const result = wordService.addWordToDB('a', ['test']);
+            expect(result).toBe(false);
+        });
+    });
+
+    describe('editWordInDB', () => {
+        beforeEach(() => {
+            wordService.addWordToDB('oldword', ['test']);
+        });
+
+        it('should edit an existing word', () => {
+            const result = wordService.editWordInDB('oldword', 'newword');
+            expect(result).toBe(true);
+            expect(wordService.hasWord('oldword')).toBe(false);
+            expect(wordService.hasWord('newword')).toBe(true);
+        });
+
+        it('should fail if old word does not exist', () => {
+            const result = wordService.editWordInDB('nonexistent', 'newword');
+            expect(result).toBe(false);
+        });
+
+        it('should fail if new word is invalid', () => {
+            const result = wordService.editWordInDB('oldword', 'a');
+            expect(result).toBe(false);
+        });
+    });
+
+    describe('deleteWordFromDB', () => {
+        beforeEach(() => {
+            wordService.addWordToDB('todelete', ['test']);
+        });
+
+        it('should delete an existing word', () => {
+            const result = wordService.deleteWordFromDB('todelete');
+            expect(result).toBe(true);
+            expect(wordService.hasWord('todelete')).toBe(false);
+        });
+
+        it('should fail if word does not exist', () => {
+            const result = wordService.deleteWordFromDB('nonexistent');
+            expect(result).toBe(false);
+        });
+    });
+
+    describe('getWordTheme', () => {
+        it('should return themes for a word', () => {
+            wordService.addWordToDB('themedword', ['theme1', 'theme2']);
+            const themes = wordService.getWordTheme('themedword');
+            expect(themes).toEqual(['theme1', 'theme2']);
+        });
+
+        it('should return empty array for nonexistent word', () => {
+            const themes = wordService.getWordTheme('nonexistent');
+            expect(themes).toEqual([]);
+        });
+    });
+});
\ No newline at end of file
diff --git a/__tests__/mini-game/page.test.tsx b/__tests__/mini-game/page.test.tsx
new file mode 100644
index 0000000..1f696c3
--- /dev/null
+++ b/__tests__/mini-game/page.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import MiniGamePage from '@/app/mini-game/page';
+
+// Mock child components
+jest.mock('@/app/mini-game/game/Game', () => {
+    return function MockGame() {
+        return <div data-testid="mock-game">Game Component</div>;
+    };
+});
+
+jest.mock('@/app/mini-game/MobileUnsupported', () => {
+    return function MockMobileUnsupported() {
+        return <div data-testid="mock-mobile-unsupported">MobileUnsupported Component</div>;
+    };
+});
+
+jest.mock('@/app/mini-game/providers', () => {
+    return function MockProviders({ children }: { children: React.ReactNode }) {
+        return <div data-testid="mock-providers">{children}</div>;
+    };
+});
+
+describe('MiniGamePage', () => {
+    it('renders Game and MobileUnsupported components wrapped in Providers', () => {
+        render(<MiniGamePage />);
+
+        expect(screen.getByTestId('mock-providers')).toBeInTheDocument();
+        expect(screen.getByTestId('mock-game')).toBeInTheDocument();
+        expect(screen.getByTestId('mock-mobile-unsupported')).toBeInTheDocument();
+    });
+
+    it('renders Game with desktop visibility classes', () => {
+        render(<MiniGamePage />);
+        const gameContainer = screen.getByTestId('mock-game').parentElement;
+        expect(gameContainer).toHaveClass('hidden');
+        expect(gameContainer).toHaveClass('md:flex');
+    });
+});
diff --git a/app/AutoLogin.tsx b/app/AutoLogin.tsx
index db9cfb3..8d30791 100644
--- a/app/AutoLogin.tsx
+++ b/app/AutoLogin.tsx
@@ -14,15 +14,15 @@ const AutoLogin = () => {
 
             if (!data || !data.session || error) return;
 
-            const { data: ddata, error: err } = await SCM.get().userById(data.session.user.id);
+            const { data: dbdata, error: err } = await SCM.get().userById(data.session.user.id);
             
-            if (err || !ddata) return;
+            if (err || !dbdata) return;
 
             dispatch(
                 userAction.setInfo({
-                    username: ddata.nickname,
-                    role: ddata.role ?? "guest",
-                    uuid: ddata.id,
+                    username: dbdata.nickname,
+                    role: dbdata.role ?? "guest",
+                    uuid: dbdata.id,
                 })
             );
         }
diff --git a/app/ErrorPage.tsx b/app/ErrorPage.tsx
index 5a1054b..1ac6b1e 100644
--- a/app/ErrorPage.tsx
+++ b/app/ErrorPage.tsx
@@ -6,7 +6,7 @@ import type { ErrorMessage } from "./types/type";
 import { useRouter } from "next/navigation";
 
 const ErrorPage:React.FC<{e:ErrorMessage}> = ({e}) => {
-    const [errork,setError] = useState<ErrorMessage | null>(null);
+    const [error,setError] = useState<ErrorMessage | null>(null);
     const router = useRouter();
 
     const goBack = () => {
@@ -19,7 +19,7 @@ const ErrorPage:React.FC<{e:ErrorMessage}> = ({e}) => {
 
     return (
         <div className="flex flex-col flex-grow min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
-            {errork && <ErrorModal error={e} onClose={()=>setError(null)} /> }
+            {error && <ErrorModal error={e} onClose={()=>setError(null)} /> }
 
             <button
                 onClick={goBack}
diff --git a/app/admin/AdminPage.tsx b/app/admin/AdminPage.tsx
index 4ea5998..edffbdd 100644
--- a/app/admin/AdminPage.tsx
+++ b/app/admin/AdminPage.tsx
@@ -105,13 +105,13 @@ const AdminDashboard = () => {
             borderColor: 'border-orange-200'
         },
         {
-            title: '사용자 관리',
-            description: '등록된 사용자들의 정보와 기여도를 관리합니다',
-            icon: Users,
-            path: '/admin/users',
-            color: 'text-indigo-600',
-            bgColor: 'bg-indigo-50 hover:bg-indigo-100',
-            borderColor: 'border-indigo-200'
+            title: 'api-server 관리',
+            description: 'api-server 관련 주요 기능들을 관리합니다',
+            icon: Activity,
+            path: '/admin/api-server',
+            color: 'text-yellow-600',
+            bgColor: 'bg-yellow-50 hover:bg-yellow-100',
+            borderColor: 'border-yellow-200'
         }
     ];
 
diff --git a/app/admin/add-words/AddWordsHome.tsx b/app/admin/add-words/AddWordsHome.tsx
index 6c71c86..b8cc61b 100644
--- a/app/admin/add-words/AddWordsHome.tsx
+++ b/app/admin/add-words/AddWordsHome.tsx
@@ -400,7 +400,7 @@ export default function WordsAddHome() {
         const insertThemeMap: Record<string, string[]> = {}; // 단어 - 추가된 주제이름들 맵
 
         // 단어 주제 추가
-        const { data: insertedThemesData, error: inseredThemeError } = await supabaseInQueryChunk(
+        const { data: insertedThemesData, error: insertedThemeError } = await supabaseInQueryChunk(
             themesAddQuery,
             async (chunk) => {
                 const r = await SCM.add().wordsThemes(chunk);
@@ -412,7 +412,7 @@ export default function WordsAddHome() {
                 }
             }
         )
-        if (inseredThemeError) return makeError(inseredThemeError)
+        if (insertedThemeError) return makeError(insertedThemeError)
         for (const data of insertedThemesData ?? []) {
             insertThemeMap[data.words.word] = [...(insertThemeMap[data.words.word] ?? []), data.themes.name]
         }
@@ -438,9 +438,9 @@ export default function WordsAddHome() {
         // JSON에 없는 단어-주제 쌍 제거
         setCurrentTask('파일에 없는 단어-주제 쌍 제거 중...');
         if (wordThemeDelQuery.length > 0) {
-            const { data: wordthemeDeletedData, error: wordThemeDeleteError } = await SCM.delete().wordTheme(wordThemeDelQuery);
+            const { data: wordThemeDeletedData, error: wordThemeDeleteError } = await SCM.delete().wordTheme(wordThemeDelQuery);
             if (wordThemeDeleteError) return makeError(wordThemeDeleteError);
-            for (const data of wordthemeDeletedData) {
+            for (const data of wordThemeDeletedData) {
                 const docsId = themeDocsInfo[data.theme_name]
                 if (docsId) {
                     docsLogsQuery.push({
diff --git a/app/admin/api-server/ApiServerMangerHome.tsx b/app/admin/api-server/ApiServerMangerHome.tsx
new file mode 100644
index 0000000..0c7e330
--- /dev/null
+++ b/app/admin/api-server/ApiServerMangerHome.tsx
@@ -0,0 +1,46 @@
+'use client';
+import { Button } from "@/app/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import Link from 'next/link';
+
+export default function ApiServerAdminHome() {
+  const sections = [
+    {
+      title: 'Crawler 관리',
+      description: '크롤러 Health 상태 확인 및 세션 관리',
+      href: '/admin/api-server/crawler',
+    },
+    {
+      title: 'Logs 조회',
+      description: 'API Server 및 Crawler 로그 조회',
+      href: '/admin/api-server/logs',
+    },
+  ];
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* 관리자 대시보드로 이동 버튼 */}
+      <Link href={'/admin'} className="mb-4 flex">
+          <Button variant="outline">
+              <ArrowLeft />
+              관리자 대시보드로 이동
+          </Button>
+      </Link>
+      <h1 className="text-3xl font-bold mb-2 dark:text-gray-100">API Server 관리</h1>
+      <p className="text-gray-600 dark:text-gray-300 mb-8">API 서버 관리 도구</p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {sections.map((section) => (
+          <Link
+            key={section.href}
+            href={section.href}
+            className="block p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400 hover:shadow-lg transition-all"
+          >
+            <h2 className="text-xl font-semibold mb-2 dark:text-gray-100">{section.title}</h2>
+            <p className="text-gray-600 dark:text-gray-300">{section.description}</p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/admin/api-server/api.ts b/app/admin/api-server/api.ts
new file mode 100644
index 0000000..3980133
--- /dev/null
+++ b/app/admin/api-server/api.ts
@@ -0,0 +1,86 @@
+// API Server Admin API Functions
+import axios from 'axios';
+import type { CrawlerHealthResponse, SaveSessionRequest, SaveSessionResponse, RestartCrawlerResponse } from './types';
+import { SCM } from '@/app/lib/supabaseClient';
+import zlib from 'zlib';
+
+const BASE_URL = 'https://api.solidloop-studio.xyz/api/v1';
+
+// Get JWT token from Supabase session
+const getAuthHeaders = async () => {
+  // This should be replaced with actual Supabase session retrieval
+  const token = await SCM.getJWT(); // TODO: Get from Supabase session
+  return {
+    Authorization: `${token}`,
+  };
+};
+
+// Crawler APIs
+export const fetchCrawlerHealth = async (): Promise<CrawlerHealthResponse> => {
+  const headers = await getAuthHeaders();
+  const response = await axios.get<CrawlerHealthResponse>(
+    `${BASE_URL}/admin/crawler/health`,
+    { headers }
+  );
+  return response.data;
+};
+
+export const saveCrawlerSession = async (
+  data: SaveSessionRequest
+): Promise<SaveSessionResponse> => {
+  const headers = await getAuthHeaders();
+  const response = await axios.post<SaveSessionResponse>(
+    `${BASE_URL}/admin/crawler/session`,
+    data,
+    { headers }
+  );
+  return response.data;
+};
+
+export const restartCrawler = async (
+  channelId: string
+): Promise<RestartCrawlerResponse> => {
+  const headers = await getAuthHeaders();
+  const response = await axios.post<RestartCrawlerResponse>(
+    `${BASE_URL}/admin/crawler/restart/${channelId}`,
+    {},
+    { headers }
+  );
+  return response.data;
+};
+
+// Logs APIs
+const isGzip = (u8: Uint8Array) => u8 && u8.length >= 2 && u8[0] === 0x1f && u8[1] === 0x8b;
+
+const arrayBufferToString = async (buf: ArrayBuffer): Promise<string> => {
+  const u8 = new Uint8Array(buf);
+  console.log(isGzip(u8));
+  if (isGzip(u8)) {
+    const decompressed = zlib.gunzipSync(Buffer.from(buf));
+    return decompressed.toString('utf-8');
+
+  }
+
+  // Not gzipped, decode as UTF-8
+  return new TextDecoder().decode(buf);
+};
+
+export const fetchApiServerLogs = async (date?: string): Promise<string> => {
+  const headers = await getAuthHeaders();
+  const params = date ? { date } : {};
+  const response = await axios.get<ArrayBuffer>(
+    `${BASE_URL}/admin/logs/api-server`,
+    { headers, params, responseType: 'arraybuffer' }
+  );
+  return await arrayBufferToString(response.data);
+};
+
+export const fetchCrawlerLogs = async (date?: string): Promise<string> => {
+  const headers = await getAuthHeaders();
+  const params = date ? { date } : {};
+  const response = await axios.get<ArrayBuffer>(
+    `${BASE_URL}/admin/logs/crawler`,
+    { headers, params, responseType: 'arraybuffer' }
+  );
+  return await arrayBufferToString(response.data);
+};
diff --git a/app/admin/api-server/crawler/CrawlerManager.tsx b/app/admin/api-server/crawler/CrawlerManager.tsx
new file mode 100644
index 0000000..0e51f23
--- /dev/null
+++ b/app/admin/api-server/crawler/CrawlerManager.tsx
@@ -0,0 +1,291 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { fetchCrawlerHealth, saveCrawlerSession, restartCrawler } from '../api';
+import type { ChannelHealth } from '../types';
+import { Button } from '@/app/components/ui/button';
+import ConfirmModal from '@/app/components/ConfirmModal';
+import CompleteModal from '@/app/components/CompleteModal';
+import FailModal from '@/app/components/FailModal';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+
+export default function CrawlerManager() {
+  const [channels, setChannels] = useState<ChannelHealth[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
+  const [showSessionForm, setShowSessionForm] = useState(false);
+  const [sessionData, setSessionData] = useState({
+    channelId: '',
+    jwtToken: '',
+    refreshToken: '',
+  });
+  const [saveLoading, setSaveLoading] = useState(false);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+
+  const [selectedChannel, setSelectedChannel] = useState<string | null>(null);
+  const [restartLoading, setRestartLoading] = useState<string | null>(null);
+
+  // Modal states
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [successOpen, setSuccessOpen] = useState(false);
+  const [failOpen, setFailOpen] = useState(false);
+  const [modalMessage, setModalMessage] = useState('');
+  const [targetChannel, setTargetChannel] = useState<string | null>(null);
+
+  const loadCrawlerHealth = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError('');
+      const data = await fetchCrawlerHealth();
+      setChannels(data.channels);
+      setLastUpdated(new Date());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '크롤러 상태를 불러오는데 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadCrawlerHealth();
+    const interval = setInterval(() => {
+      void loadCrawlerHealth();
+    }, 10 * 60 * 1000); // 10 minutes
+
+    return () => clearInterval(interval);
+  }, [loadCrawlerHealth]);
+
+  const initiateRestart = (channelId: string) => {
+    setTargetChannel(channelId);
+    setConfirmOpen(true);
+  };
+
+  const handleRestartConfirm = async () => {
+    if (!targetChannel) return;
+    
+    // Close confirm modal
+    setConfirmOpen(false);
+    
+    try {
+      setRestartLoading(targetChannel);
+      await restartCrawler(targetChannel);
+      await loadCrawlerHealth();
+      setModalMessage(`${targetChannel} 채널 재시작 요청을 완료했습니다.`);
+      setSuccessOpen(true);
+    } catch (err) {
+      setModalMessage(err instanceof Error ? err.message : '재시작 요청에 실패했습니다.');
+      setFailOpen(true);
+    } finally {
+      setRestartLoading(null);
+      setTargetChannel(null);
+    }
+  };
+
+  const handleSessionSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaveLoading(true);
+    setSaveSuccess(false);
+    setError('');
+
+    try {
+      await saveCrawlerSession(sessionData);
+      setSaveSuccess(true);
+      setSessionData({ channelId: '', jwtToken: '', refreshToken: '' });
+      setTimeout(() => {
+        setShowSessionForm(false);
+        setSaveSuccess(false);
+      }, 2000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '세션 저장에 실패했습니다.');
+    } finally {
+      setSaveLoading(false);
+    }
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Link href={'/admin/api-server'} className="mb-4 flex">
+        <Button variant="outline">
+          <ArrowLeft />
+          api-server admin 홈으로 이동
+        </Button>
+      </Link>
+      <div className="mb-6">
+        <h1 className="text-3xl font-bold mb-2 dark:text-gray-100">Crawler 관리</h1>
+        <p className="text-gray-600 dark:text-gray-300">크롤러 Health 상태 및 세션 관리</p>
+      </div>
+
+      {error && (
+        <div className="mb-4 p-4 bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-200 rounded">
+          {error}
+        </div>
+      )}
+
+      {/* Health Status Section */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold dark:text-gray-100">채널 Health 상태</h2>
+          <div className="flex items-center space-x-4">
+            <button
+              onClick={() => void loadCrawlerHealth()}
+              disabled={loading}
+              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600"
+            >
+              {loading ? '로딩중...' : '새로고침'}
+            </button>
+            <div className="text-sm text-gray-600 dark:text-gray-400">
+              마지막 갱신: {lastUpdated ? lastUpdated.toLocaleString() : '—'}
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="text-center py-8 dark:text-gray-300">로딩 중...</div>
+        ) : channels.length === 0 ? (
+          <div className="text-center py-8 text-gray-500 dark:text-gray-400">채널 정보가 없습니다.</div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {channels.map((channel) => (
+              <div
+                key={channel.id}
+                className={`flex flex-col p-4 border rounded cursor-pointer transition-colors ${
+                  selectedChannel === channel.id
+                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                    : 'dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700'
+                }`}
+                onClick={() => setSelectedChannel(selectedChannel === channel.id ? null : channel.id)}
+              >
+                <div className="flex items-center justify-between w-full">
+                  <span className="font-medium dark:text-gray-200">{channel.id}</span>
+                  <span
+                    className={`px-3 py-1 rounded-full text-sm font-semibold ${
+                      channel.healthy
+                        ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
+                        : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200'
+                    }`}
+                  >
+                    {channel.healthy ? 'Healthy' : 'Unhealthy'}
+                  </span>
+                </div>
+                
+                {selectedChannel === channel.id && (
+                  <div className="mt-4 pt-4 border-t dark:border-gray-600 animate-in fade-in slide-in-from-top-2">
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      className="w-full"
+                      disabled={restartLoading === channel.id}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        initiateRestart(channel.id);
+                      }}
+                    >
+                      {restartLoading === channel.id ? '요청 중...' : '크롤러 재시작'}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Session Management Section */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold dark:text-gray-100">세션 관리</h2>
+          <button
+            onClick={() => setShowSessionForm(!showSessionForm)}
+            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
+          >
+            {showSessionForm ? '취소' : '세션 저장'}
+          </button>
+        </div>
+
+        {showSessionForm && (
+          <form onSubmit={handleSessionSave} className="space-y-4">
+            <div>
+              <label htmlFor="channelId" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Channel ID
+              </label>
+              <input
+                type="text"
+                id="channelId"
+                value={sessionData.channelId}
+                onChange={(e) => setSessionData({ ...sessionData, channelId: e.target.value })}
+                required
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="jwtToken" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                JWT Token
+              </label>
+              <textarea
+                id="jwtToken"
+                value={sessionData.jwtToken}
+                onChange={(e) => setSessionData({ ...sessionData, jwtToken: e.target.value })}
+                required
+                rows={3}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="refreshToken" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Refresh Token
+              </label>
+              <textarea
+                id="refreshToken"
+                value={sessionData.refreshToken}
+                onChange={(e) => setSessionData({ ...sessionData, refreshToken: e.target.value })}
+                required
+                rows={3}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={saveLoading}
+              className="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600"
+            >
+              {saveLoading ? '저장 중...' : '저장'}
+            </button>
+
+            {saveSuccess && (
+              <div className="p-4 bg-green-100 dark:bg-green-900 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-200 rounded">
+                세션이 성공적으로 저장되었습니다!
+              </div>
+            )}
+          </form>
+        )}
+      </div>
+
+      <ConfirmModal
+        open={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        onConfirm={handleRestartConfirm}
+        title="크롤러 재시작"
+        description={`${targetChannel} 채널의 크롤러를 재시작하시겠습니까?`}
+      />
+
+      <CompleteModal
+        open={successOpen}
+        onClose={() => setSuccessOpen(false)}
+        title="요청 성공"
+        description={modalMessage}
+      />
+
+      <FailModal
+        open={failOpen}
+        onClose={() => setFailOpen(false)}
+        title="요청 실패"
+        description={modalMessage}
+      />
+    </div>
+  );
+}
diff --git a/app/admin/api-server/crawler/page.tsx b/app/admin/api-server/crawler/page.tsx
new file mode 100644
index 0000000..80af17f
--- /dev/null
+++ b/app/admin/api-server/crawler/page.tsx
@@ -0,0 +1,5 @@
+import CrawlerManager from './CrawlerManager';
+
+export default function CrawlerPage() {
+  return <CrawlerManager />;
+}
diff --git a/app/admin/api-server/logs/LogsViewer.tsx b/app/admin/api-server/logs/LogsViewer.tsx
new file mode 100644
index 0000000..761db4f
--- /dev/null
+++ b/app/admin/api-server/logs/LogsViewer.tsx
@@ -0,0 +1,254 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { fetchApiServerLogs, fetchCrawlerLogs } from '../api';
+import { parsePinoLogs, calculateLogStatistics, ParsedLogEntry } from './utils/pinoLogParser';
+import StatisticsCards from './components/StatisticsCards';
+import LogCharts from './components/LogCharts';
+import LogsTable from './components/LogsTable';
+import LogDetailModal from './components/LogDetailModal';
+import { BarChart3, Table2, FileText, Download, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { Button } from '@/app/components/ui/button';
+
+type LogType = 'api-server' | 'crawler';
+type ViewMode = 'dashboard' | 'table' | 'raw';
+
+export default function LogsViewer() {
+  const [logType, setLogType] = useState<LogType>('api-server');
+  const [date, setDate] = useState('');
+  const [rawLogs, setRawLogs] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [viewMode, setViewMode] = useState<ViewMode>('dashboard');
+  const [selectedLog, setSelectedLog] = useState<ParsedLogEntry | null>(null);
+
+  const parsedLogs = useMemo<ParsedLogEntry[]>(() => {
+    if (!rawLogs) return [];
+    return parsePinoLogs(rawLogs);
+  }, [rawLogs]);
+
+  const statistics = useMemo(() => {
+    return calculateLogStatistics(parsedLogs);
+  }, [parsedLogs]);
+
+  const handleFetchLogs = async () => {
+    setLoading(true);
+    setError('');
+    setRawLogs('');
+
+    try {
+      const data = logType === 'api-server' 
+        ? await fetchApiServerLogs(date || undefined)
+        : await fetchCrawlerLogs(date || undefined);
+      setRawLogs(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '로그를 불러오는데 실패했습니다.');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleExportData = () => {
+    const data = {
+      metadata: {
+        logType,
+        date: date || new Date().toISOString().split('T')[0],
+        exportedAt: new Date().toISOString(),
+        totalLogs: parsedLogs.length,
+      },
+      statistics,
+      logs: parsedLogs,
+    };
+
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `logs-${logType}-${date || 'today'}-${Date.now()}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const formatDate = () => {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-[1600px]">
+      {/* Header */}
+      <div className="mb-6">
+        <Link href={'/admin/api-server'} className="mb-4 flex">
+          <Button variant="outline">
+            <ArrowLeft />
+            api-server admin 홈으로 이동
+          </Button>
+        </Link>
+        <h1 className="text-3xl font-bold mb-2 dark:text-gray-100">
+          Pino Logs Dashboard
+        </h1>
+        <p className="text-gray-600 dark:text-gray-300">
+          API Server 및 Crawler 로그 분석 및 관리
+        </p>
+      </div>
+
+      {/* Error Display */}
+      {error && (
+        <div className="mb-4 p-4 bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-200 rounded-lg">
+          {error}
+        </div>
+      )}
+
+      {/* Controls */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6 border border-gray-200 dark:border-gray-700">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
+          <div>
+            <label htmlFor="logType" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              로그 타입
+            </label>
+            <select
+              id="logType"
+              value={logType}
+              onChange={(e) => setLogType(e.target.value as LogType)}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+            >
+              <option value="api-server">API Server</option>
+              <option value="crawler">Crawler</option>
+            </select>
+          </div>
+
+          <div>
+            <label htmlFor="date" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              날짜 (YYYY-MM-DD)
+            </label>
+            <input
+              type="date"
+              id="date"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+              placeholder={formatDate()}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+            />
+          </div>
+
+          <div className="flex items-end">
+            <button
+              onClick={handleFetchLogs}
+              disabled={loading}
+              className="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600 transition-colors"
+            >
+              {loading ? '로딩중...' : '로그 조회'}
+            </button>
+          </div>
+
+          
+        </div>
+
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          * 날짜를 입력하지 않으면 오늘 날짜의 로그를 조회합니다.
+        </div>
+      </div>
+
+      {/* View Mode Tabs */}
+      {parsedLogs.length > 0 && (
+        <div className="mb-6">
+          <div className="flex gap-2 border-b border-gray-200 dark:border-gray-700">
+            <button
+              onClick={() => setViewMode('dashboard')}
+              className={`px-4 py-2 font-medium transition-colors flex items-center gap-2 ${
+                viewMode === 'dashboard'
+                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+              }`}
+            >
+              <BarChart3 className="w-4 h-4" />
+              Dashboard
+            </button>
+            <button
+              onClick={() => setViewMode('table')}
+              className={`px-4 py-2 font-medium transition-colors flex items-center gap-2 ${
+                viewMode === 'table'
+                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+              }`}
+            >
+              <Table2 className="w-4 h-4" />
+              Table View
+            </button>
+            <button
+              onClick={() => setViewMode('raw')}
+              className={`px-4 py-2 font-medium transition-colors flex items-center gap-2 ${
+                viewMode === 'raw'
+                  ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+              }`}
+            >
+              <FileText className="w-4 h-4" />
+              Raw Logs
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Content Based on View Mode */}
+      {parsedLogs.length > 0 && viewMode === 'dashboard' && (
+        <div className="space-y-6">
+          <StatisticsCards statistics={statistics} />
+          <LogCharts statistics={statistics} />
+        </div>
+      )}
+
+      {parsedLogs.length > 0 && viewMode === 'table' && (
+        <LogsTable logs={parsedLogs} onLogClick={setSelectedLog} />
+      )}
+
+      {parsedLogs.length > 0 && viewMode === 'raw' && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-xl font-semibold dark:text-gray-100">
+              {logType === 'api-server' ? 'API Server' : 'Crawler'} 로그
+              {date && ` (${date})`}
+            </h2>
+            {parsedLogs.length > 0 && (
+              <div className="flex items-end">
+                <button
+                  onClick={handleExportData}
+                  className="w-full px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors flex items-center justify-center gap-2"
+                >
+                  <Download className="w-4 h-4" />
+                  Export JSON
+                </button>
+              </div>
+            )}
+          </div>
+          <pre className="bg-gray-900 dark:bg-gray-950 text-gray-100 dark:text-gray-200 p-4 rounded overflow-x-auto text-sm whitespace-pre-wrap break-words max-h-[600px] overflow-y-auto border border-gray-700 dark:border-gray-600">
+            {rawLogs}
+          </pre>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!rawLogs && !loading && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-12 text-center border border-gray-200 dark:border-gray-700">
+          <BarChart3 className="w-16 h-16 mx-auto mb-4 text-gray-400" />
+          <p className="text-gray-500 dark:text-gray-400 text-lg">
+            로그 타입과 날짜를 선택한 후 &quot;로그 조회&quot; 버튼을 클릭하세요.
+          </p>
+          <p className="text-gray-400 dark:text-gray-500 text-sm mt-2">
+            대시보드에서 로그를 분석하고 시각화할 수 있습니다.
+          </p>
+        </div>
+      )}
+
+      {/* Log Detail Modal */}
+      <LogDetailModal log={selectedLog} onClose={() => setSelectedLog(null)} />
+    </div>
+  );
+}
diff --git a/app/admin/api-server/logs/components/LogCharts.tsx b/app/admin/api-server/logs/components/LogCharts.tsx
new file mode 100644
index 0000000..d7b2b59
--- /dev/null
+++ b/app/admin/api-server/logs/components/LogCharts.tsx
@@ -0,0 +1,383 @@
+/**
+ * Charts Component
+ * Visualizes log data using various chart types from recharts
+ */
+
+'use client';
+
+import {
+    BarChart,
+    Bar,
+    LineChart,
+    Line,
+    AreaChart,
+    Area,
+    PieChart,
+    Pie,
+    Cell,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    Legend,
+    ResponsiveContainer,
+} from 'recharts';
+import { LogStatistics } from '../utils/pinoLogParser';
+
+interface LogChartsProps {
+    statistics: LogStatistics;
+}
+
+const COLORS = {
+    primary: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'],
+    status: {
+        '2xx': '#10b981',
+        '3xx': '#3b82f6',
+        '4xx': '#f59e0b',
+        '5xx': '#ef4444',
+    },
+};
+
+export default function LogCharts({ statistics }: LogChartsProps) {
+    // Prepare method distribution data
+    const methodData = Object.entries(statistics.methodDistribution).map(([method, count]) => ({
+        name: method,
+        value: count,
+        count,
+    }));
+
+    // Prepare status code distribution data
+    const statusData = Object.entries(statistics.statusCodeDistribution)
+        .map(([code, count]) => ({
+            name: code,
+            value: count,
+            count,
+            fill: getStatusColor(parseInt(code)),
+        }))
+        .sort((a, b) => parseInt(a.name) - parseInt(b.name));
+
+    // Prepare hourly distribution data
+    const hourlyData = Object.entries(statistics.hourlyDistribution)
+        .map(([hour, count]) => ({
+            hour: `${hour}:00`,
+            requests: count,
+        }))
+        .sort((a, b) => a.hour.localeCompare(b.hour));
+
+    // Prepare error type data
+    const errorData = Object.entries(statistics.errorsByType)
+        .map(([type, count]) => ({
+            name: type,
+            value: count,
+            count,
+        }))
+        .sort((a, b) => b.count - a.count)
+        .slice(0, 10); // Top 10 errors
+
+    // Prepare level distribution data
+    const levelData = Object.entries(statistics.levelDistribution)
+        .map(([level, count]) => ({
+            name: level,
+            value: count,
+            count,
+            fill: getLevelColor(level),
+        }))
+        .sort((a, b) => {
+            const order = ['TRACE', 'DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL'];
+            return order.indexOf(a.name) - order.indexOf(b.name);
+        });
+
+    // Prepare timeline data (log levels over time)
+    const allHours = Array.from(
+        new Set([
+            ...Object.keys(statistics.hourlyDistribution),
+            ...Object.values(statistics.timelineByLevel).flatMap(level => Object.keys(level))
+        ])
+    ).sort();
+
+    const timelineData = allHours.map(hour => {
+        const dataPoint: Record<string, string | number> = { hour: `${hour}:00` };
+        
+        // Add count for each log level at this hour
+        Object.entries(statistics.timelineByLevel).forEach(([level, hourData]) => {
+            dataPoint[level] = hourData[hour] || 0;
+        });
+        
+        return dataPoint;
+    });
+
+    const logLevels = Object.keys(statistics.timelineByLevel).sort((a, b) => {
+        const order = ['TRACE', 'DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL'];
+        return order.indexOf(a) - order.indexOf(b);
+    });
+
+    function getLevelColor(level: string): string {
+        const colors: Record<string, string> = {
+            TRACE: '#6b7280',
+            DEBUG: '#3b82f6',
+            INFO: '#10b981',
+            WARN: '#f59e0b',
+            ERROR: '#ef4444',
+            FATAL: '#7f1d1d',
+        };
+        return colors[level] || '#6b7280';
+    }
+
+    function getStatusColor(code: number): string {
+        if (code >= 200 && code < 300) return COLORS.status['2xx'];
+        if (code >= 300 && code < 400) return COLORS.status['3xx'];
+        if (code >= 400 && code < 500) return COLORS.status['4xx'];
+        return COLORS.status['5xx'];
+    }
+
+    interface TooltipPayload {
+        name: string;
+        value: number;
+        [key: string]: unknown;
+    }
+
+    interface TooltipProps {
+        active?: boolean;
+        payload?: TooltipPayload[];
+        label?: string;
+    }
+
+    const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
+        if (active && payload && payload.length) {
+            return (
+                <div className="bg-white dark:bg-gray-800 p-3 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
+                    <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{label}</p>
+                    {payload.map((entry, index: number) => (
+                        <p key={index} className="text-sm text-gray-600 dark:text-gray-400">
+                            {entry.name}: <span className="font-semibold">{entry.value}</span>
+                        </p>
+                    ))}
+                </div>
+            );
+        }
+        return null;
+    };
+
+    return (
+        <div className="space-y-6">
+            {/* Log Timeline */}
+            {timelineData.length > 0 && logLevels.length > 0 && (
+                <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                        Log Timeline by Level
+                    </h3>
+                    <ResponsiveContainer width="100%" height={400}>
+                        <AreaChart data={timelineData}>
+                            <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                            <XAxis
+                                dataKey="hour"
+                                stroke="#9ca3af"
+                                style={{ fontSize: '12px' }}
+                            />
+                            <YAxis stroke="#9ca3af" style={{ fontSize: '12px' }} />
+                            <Tooltip content={<CustomTooltip />} />
+                            <Legend />
+                            {logLevels.map((level, idx) => (
+                                <Area
+                                    key={level}
+                                    type="monotone"
+                                    dataKey={level}
+                                    stroke={getLevelColor(level)}
+                                    fill={getLevelColor(level)}
+                                    strokeWidth={2}
+                                    fillOpacity={0.18 + idx * 0.02}
+                                    dot={false}
+                                    name={level}
+                                />
+                            ))}
+                        </AreaChart>
+                    </ResponsiveContainer>
+                </div>
+            )}
+
+            {/* Request Distribution Charts */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {/* Hourly Distribution */}
+                {hourlyData.length > 0 && (
+                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
+                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                            Hourly Request Distribution
+                        </h3>
+                        <ResponsiveContainer width="100%" height={300}>
+                            <LineChart data={hourlyData}>
+                                <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                                <XAxis
+                                    dataKey="hour"
+                                    stroke="#9ca3af"
+                                    style={{ fontSize: '12px' }}
+                                />
+                                <YAxis stroke="#9ca3af" style={{ fontSize: '12px' }} />
+                                <Tooltip content={<CustomTooltip />} />
+                                <Legend />
+                                <Line
+                                    type="monotone"
+                                    dataKey="requests"
+                                    stroke="#3b82f6"
+                                    strokeWidth={2}
+                                    dot={{ fill: '#3b82f6', r: 4 }}
+                                    activeDot={{ r: 6 }}
+                                />
+                            </LineChart>
+                        </ResponsiveContainer>
+                    </div>
+                )}
+
+                {/* Log Level Distribution */}
+                {levelData.length > 0 && (
+                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
+                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                            Log Level Distribution
+                        </h3>
+                        <ResponsiveContainer width="100%" height={300}>
+                            <BarChart data={levelData}>
+                                <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                                <XAxis
+                                    dataKey="name"
+                                    stroke="#9ca3af"
+                                    style={{ fontSize: '12px' }}
+                                />
+                                <YAxis stroke="#9ca3af" style={{ fontSize: '12px' }} />
+                                <Tooltip content={<CustomTooltip />} />
+                                <Legend />
+                                <Bar dataKey="count" name="Logs">
+                                    {levelData.map((entry, index) => (
+                                        <Cell key={`cell-${index}`} fill={entry.fill} />
+                                    ))}
+                                </Bar>
+                            </BarChart>
+                        </ResponsiveContainer>
+                    </div>
+                )}
+            </div>
+
+            {/* Method and Status Charts */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {/* HTTP Method Distribution */}
+                {methodData.length > 0 && (
+                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
+                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                            HTTP Method Distribution
+                        </h3>
+                        <ResponsiveContainer width="100%" height={300}>
+                            <PieChart>
+                                <Pie
+                                    data={methodData}
+                                    cx="50%"
+                                    cy="50%"
+                                    labelLine={false}
+                                    label={({ name, percent }) =>
+                                        `${name} (${(percent * 100).toFixed(0)}%)`
+                                    }
+                                    outerRadius={100}
+                                    fill="#8884d8"
+                                    dataKey="value"
+                                >
+                                    {methodData.map((entry, index) => (
+                                        <Cell
+                                            key={`cell-${index}`}
+                                            fill={COLORS.primary[index % COLORS.primary.length]}
+                                        />
+                                    ))}
+                                </Pie>
+                                <Tooltip content={<CustomTooltip />} />
+                            </PieChart>
+                        </ResponsiveContainer>
+                    </div>
+                )}
+
+                {/* Status Code Distribution */}
+                {statusData.length > 0 && (
+                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
+                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                            Status Code Distribution
+                        </h3>
+                        <ResponsiveContainer width="100%" height={300}>
+                            <BarChart data={statusData}>
+                                <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                                <XAxis
+                                    dataKey="name"
+                                    stroke="#9ca3af"
+                                    style={{ fontSize: '12px' }}
+                                />
+                                <YAxis stroke="#9ca3af" style={{ fontSize: '12px' }} />
+                                <Tooltip content={<CustomTooltip />} />
+                                <Legend />
+                                <Bar dataKey="count" name="Requests">
+                                    {statusData.map((entry, index) => (
+                                        <Cell key={`cell-${index}`} fill={entry.fill} />
+                                    ))}
+                                </Bar>
+                            </BarChart>
+                        </ResponsiveContainer>
+                    </div>
+                )}
+            </div>
+
+            {/* Status Code and Error Charts */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+
+                {/* Error Type Distribution */}
+                {errorData.length > 0 && (
+                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
+                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                            Top Error Types
+                        </h3>
+                        <ResponsiveContainer width="100%" height={300}>
+                            <BarChart data={errorData} layout="vertical">
+                                <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                                <XAxis type="number" stroke="#9ca3af" style={{ fontSize: '12px' }} />
+                                <YAxis
+                                    type="category"
+                                    dataKey="name"
+                                    stroke="#9ca3af"
+                                    style={{ fontSize: '12px' }}
+                                    width={120}
+                                />
+                                <Tooltip content={<CustomTooltip />} />
+                                <Legend />
+                                <Bar dataKey="count" fill="#ef4444" name="Errors" />
+                            </BarChart>
+                        </ResponsiveContainer>
+                    </div>
+                )}
+            </div>
+
+            {/* Success vs Error Chart */}
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                    Success vs Error Rate
+                </h3>
+                <ResponsiveContainer width="100%" height={300}>
+                    <PieChart>
+                        <Pie
+                            data={[
+                                { name: 'Success', value: statistics.successCount },
+                                { name: 'Error', value: statistics.errorCount },
+                            ]}
+                            cx="50%"
+                            cy="50%"
+                            labelLine={false}
+                            label={({ name, percent, value }) =>
+                                `${name}: ${value} (${(percent * 100).toFixed(1)}%)`
+                            }
+                            outerRadius={100}
+                            fill="#8884d8"
+                            dataKey="value"
+                        >
+                            <Cell fill="#10b981" />
+                            <Cell fill="#ef4444" />
+                        </Pie>
+                        <Tooltip content={<CustomTooltip />} />
+                        <Legend />
+                    </PieChart>
+                </ResponsiveContainer>
+            </div>
+        </div>
+    );
+}
diff --git a/app/admin/api-server/logs/components/LogDetailModal.tsx b/app/admin/api-server/logs/components/LogDetailModal.tsx
new file mode 100644
index 0000000..e6726d0
--- /dev/null
+++ b/app/admin/api-server/logs/components/LogDetailModal.tsx
@@ -0,0 +1,296 @@
+/**
+ * Log Detail Modal Component
+ * Displays comprehensive details of a single log entry
+ */
+
+'use client';
+
+import { ParsedLogEntry } from '../utils/pinoLogParser';
+import { X, Calendar, Activity, Globe, AlertCircle, Code, Database } from 'lucide-react';
+
+interface LogDetailModalProps {
+  log: ParsedLogEntry | null;
+  onClose: () => void;
+}
+
+export default function LogDetailModal({ log, onClose }: LogDetailModalProps) {
+  if (!log) return null;
+
+  const getLevelColor = (level: string) => {
+    const colors: Record<string, string> = {
+      TRACE: 'text-gray-500 bg-gray-100 dark:bg-gray-700',
+      DEBUG: 'text-blue-500 bg-blue-100 dark:bg-blue-900',
+      INFO: 'text-green-500 bg-green-100 dark:bg-green-900',
+      WARN: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-900',
+      ERROR: 'text-red-500 bg-red-100 dark:bg-red-900',
+      FATAL: 'text-red-700 bg-red-200 dark:bg-red-800',
+    };
+    return colors[level] || 'text-gray-500 bg-gray-100 dark:bg-gray-700';
+  };
+
+  const getStatusColor = (status?: number) => {
+    if (!status) return 'text-gray-500';
+    if (status >= 200 && status < 300) return 'text-green-600 dark:text-green-400';
+    if (status >= 300 && status < 400) return 'text-blue-600 dark:text-blue-400';
+    if (status >= 400 && status < 500) return 'text-yellow-600 dark:text-yellow-400';
+    return 'text-red-600 dark:text-red-400';
+  };
+
+  const formatJSON = (obj: unknown) => {
+    try {
+      return JSON.stringify(obj, null, 2);
+    } catch {
+      return String(obj);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-3">
+            <Activity className="w-6 h-6 text-blue-500" />
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              Log Entry Details
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+          >
+            <X className="w-6 h-6 text-gray-500 dark:text-gray-400" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-6">
+          {/* Basic Info */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex items-start gap-3">
+              <Calendar className="w-5 h-5 text-gray-400 mt-1" />
+              <div>
+                <p className="text-sm font-medium text-gray-500 dark:text-gray-400">Timestamp</p>
+                <p className="text-base font-mono text-gray-900 dark:text-gray-100">
+                  {log.timestamp.toLocaleString()}
+                </p>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  {log.timestamp.toISOString()}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3">
+              <Activity className="w-5 h-5 text-gray-400 mt-1" />
+              <div>
+                <p className="text-sm font-medium text-gray-500 dark:text-gray-400">Log Level</p>
+                <span className={`inline-block px-3 py-1 rounded-full text-sm font-semibold ${getLevelColor(log.levelName)}`}>
+                  {log.levelName}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3">
+              <Database className="w-5 h-5 text-gray-400 mt-1" />
+              <div>
+                <p className="text-sm font-medium text-gray-500 dark:text-gray-400">Process ID</p>
+                <p className="text-base font-mono text-gray-900 dark:text-gray-100">{log.pid}</p>
+              </div>
+            </div>
+
+            {log.hostname && (
+              <div className="flex items-start gap-3">
+                <Globe className="w-5 h-5 text-gray-400 mt-1" />
+                <div>
+                  <p className="text-sm font-medium text-gray-500 dark:text-gray-400">Hostname</p>
+                  <p className="text-base font-mono text-gray-900 dark:text-gray-100">{log.hostname}</p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Log Type Badge */}
+          <div className="flex items-center gap-2">
+            <span className={`inline-block px-3 py-1 rounded-full text-sm font-semibold ${
+              log.isHttpLog 
+                ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200'
+                : 'bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-200'
+            }`}>
+              {log.isHttpLog ? 'HTTP Request Log' : 'Application Log'}
+            </span>
+          </div>
+
+          {/* Message */}
+          {log.msg && (
+            <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+              <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Message</p>
+              <p className="text-gray-900 dark:text-gray-100">{log.msg}</p>
+            </div>
+          )}
+
+          {/* HTTP Request Details */}
+          {log.isHttpLog && (
+            <div className="bg-blue-50 dark:bg-blue-950 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+                <Globe className="w-5 h-5" />
+                HTTP Request
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                {log.method && (
+                  <div>
+                    <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Method</p>
+                    <p className="text-base font-mono font-semibold text-gray-900 dark:text-gray-100">
+                      {log.method}
+                    </p>
+                  </div>
+                )}
+                {log.statusCode && (
+                  <div>
+                    <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Status Code</p>
+                    <p className={`text-base font-mono font-semibold ${getStatusColor(log.statusCode)}`}>
+                      {log.statusCode}
+                    </p>
+                  </div>
+                )}
+                {log.duration !== undefined && (
+                  <div>
+                    <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Response Time</p>
+                    <p className="text-base font-mono text-gray-900 dark:text-gray-100">
+                      {log.duration}ms
+                    </p>
+                  </div>
+                )}
+                {log.url && (
+                  <div className="col-span-2">
+                    <p className="text-sm font-medium text-gray-600 dark:text-gray-400">URL</p>
+                    <p className="text-base font-mono text-gray-900 dark:text-gray-100 break-all">
+                      {log.url}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* Request Details */}
+              {log.req && (
+                <div className="mt-4">
+                  <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Request Details</p>
+                  <div className="bg-white dark:bg-gray-800 rounded p-3 text-xs">
+                    {log.req.remoteAddress && (
+                      <p className="text-gray-700 dark:text-gray-300">
+                        <span className="font-semibold">Remote:</span> {log.req.remoteAddress}
+                        {log.req.remotePort && `:${log.req.remotePort}`}
+                      </p>
+                    )}
+                    {log.req.id && (
+                      <p className="text-gray-700 dark:text-gray-300">
+                        <span className="font-semibold">Request ID:</span> {log.req.id}
+                      </p>
+                    )}
+                    {log.req.headers && (
+                      <details className="mt-2">
+                        <summary className="cursor-pointer font-semibold text-gray-700 dark:text-gray-300">
+                          Headers
+                        </summary>
+                        <pre className="mt-2 text-gray-600 dark:text-gray-400 overflow-x-auto">
+                          {formatJSON(log.req.headers)}
+                        </pre>
+                      </details>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Response Details */}
+              {log.res && log.res.headers && (
+                <div className="mt-4">
+                  <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Response Headers</p>
+                  <div className="bg-white dark:bg-gray-800 rounded p-3">
+                    <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-x-auto">
+                      {formatJSON(log.res.headers)}
+                    </pre>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Error Details */}
+          {log.err && (
+            <div className="bg-red-50 dark:bg-red-950 rounded-lg p-4 border border-red-200 dark:border-red-800">
+              <h3 className="text-lg font-semibold text-red-900 dark:text-red-100 mb-4 flex items-center gap-2">
+                <AlertCircle className="w-5 h-5" />
+                Error Details
+              </h3>
+              <div className="space-y-3">
+                {log.err.type && (
+                  <div>
+                    <p className="text-sm font-medium text-red-700 dark:text-red-300">Type</p>
+                    <p className="text-base font-mono text-red-900 dark:text-red-100">{log.err.type}</p>
+                  </div>
+                )}
+                {log.err.message && (
+                  <div>
+                    <p className="text-sm font-medium text-red-700 dark:text-red-300">Message</p>
+                    <p className="text-base text-red-900 dark:text-red-100">{log.err.message}</p>
+                  </div>
+                )}
+                {log.err.stack && (
+                  <div>
+                    <p className="text-sm font-medium text-red-700 dark:text-red-300 mb-2">Stack Trace</p>
+                    <pre className="text-xs text-red-800 dark:text-red-200 bg-red-100 dark:bg-red-900 p-3 rounded overflow-x-auto whitespace-pre-wrap break-words">
+                      {log.err.stack}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Custom Fields */}
+          {Object.keys(log.customFields).length > 0 && (
+            <div className="bg-purple-50 dark:bg-purple-950 rounded-lg p-4 border border-purple-200 dark:border-purple-800">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+                <Code className="w-5 h-5" />
+                Custom Fields
+              </h3>
+              <pre className="text-sm text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-800 p-3 rounded overflow-x-auto">
+                {formatJSON(log.customFields)}
+              </pre>
+            </div>
+          )}
+
+          {/* Raw Log Data */}
+          <details className="bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700">
+            <summary className="cursor-pointer p-4 font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              View Raw Log Data (JSON)
+            </summary>
+            <div className="p-4 pt-0">
+              <pre className="text-xs text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 p-3 rounded overflow-x-auto max-h-96">
+                {formatJSON(log)}
+              </pre>
+            </div>
+          </details>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700">
+          <button
+            onClick={() => {
+              navigator.clipboard.writeText(formatJSON(log));
+              alert('Log data copied to clipboard!');
+            }}
+            className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors"
+          >
+            Copy JSON
+          </button>
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/api-server/logs/components/LogsTable.tsx b/app/admin/api-server/logs/components/LogsTable.tsx
new file mode 100644
index 0000000..1f2f5e2
--- /dev/null
+++ b/app/admin/api-server/logs/components/LogsTable.tsx
@@ -0,0 +1,303 @@
+/**
+ * Logs Table Component
+ * Displays parsed log entries in a sortable, filterable table with virtualization
+ */
+
+'use client';
+
+import { useState, useMemo, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { ParsedLogEntry } from '../utils/pinoLogParser';
+import { ArrowUpDown, ArrowUp, ArrowDown, Filter, Search } from 'lucide-react';
+
+interface LogsTableProps {
+  logs: ParsedLogEntry[];
+  maxRows?: number;
+  onLogClick?: (log: ParsedLogEntry) => void;
+}
+
+type SortField = 'timestamp' | 'level' | 'method' | 'url' | 'statusCode' | 'duration';
+type SortDirection = 'asc' | 'desc';
+
+export default function LogsTable({ logs, maxRows = 10000, onLogClick }: LogsTableProps) {
+  const [sortField, setSortField] = useState<SortField>('timestamp');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+  const [filterLevel, setFilterLevel] = useState<string>('all');
+  const [filterStatus, setFilterStatus] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortDirection('desc');
+    }
+  };
+
+  const filteredAndSortedLogs = useMemo(() => {
+    let filtered = [...logs];
+
+    // Filter by level
+    if (filterLevel !== 'all') {
+      filtered = filtered.filter(log => log.levelName === filterLevel);
+    }
+
+    // Filter by status code
+    if (filterStatus !== 'all') {
+      if (filterStatus === '2xx') {
+        filtered = filtered.filter(log => log.statusCode && log.statusCode >= 200 && log.statusCode < 300);
+      } else if (filterStatus === '4xx') {
+        filtered = filtered.filter(log => log.statusCode && log.statusCode >= 400 && log.statusCode < 500);
+      } else if (filterStatus === '5xx') {
+        filtered = filtered.filter(log => log.statusCode && log.statusCode >= 500);
+      }
+    }
+
+    // Search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(log =>
+        log.url?.toLowerCase().includes(query) ||
+        log.method?.toLowerCase().includes(query) ||
+        log.msg?.toLowerCase().includes(query)
+      );
+    }
+
+    // Sort
+    filtered.sort((a, b) => {
+      let aVal: string | number | Date | undefined = a[sortField];
+      let bVal: string | number | Date | undefined = b[sortField];
+
+      if (sortField === 'timestamp') {
+        aVal = a.timestamp.getTime();
+        bVal = b.timestamp.getTime();
+      }
+
+      if (aVal === undefined) return 1;
+      if (bVal === undefined) return -1;
+
+      if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
+      if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
+      return 0;
+    });
+
+    return filtered.slice(0, maxRows);
+  }, [logs, sortField, sortDirection, filterLevel, filterStatus, searchQuery, maxRows]);
+
+  // Virtual scrolling setup
+  const rowVirtualizer = useVirtualizer({
+    count: filteredAndSortedLogs.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => 45, // Estimated row height in pixels
+    overscan: 10, // Number of items to render outside visible area
+  });
+
+  const SortIcon = ({ field }: { field: SortField }) => {
+    if (sortField !== field) return <ArrowUpDown className="w-4 h-4" />;
+    return sortDirection === 'asc' 
+      ? <ArrowUp className="w-4 h-4" />
+      : <ArrowDown className="w-4 h-4" />;
+  };
+
+  const getLevelColor = (level: string) => {
+    const colors: Record<string, string> = {
+      TRACE: 'text-gray-500',
+      DEBUG: 'text-blue-500',
+      INFO: 'text-green-500',
+      WARN: 'text-yellow-500',
+      ERROR: 'text-red-500',
+      FATAL: 'text-red-700 font-bold',
+    };
+    return colors[level] || 'text-gray-500';
+  };
+
+  const getStatusColor = (status?: number) => {
+    if (!status) return 'text-gray-500';
+    if (status >= 200 && status < 300) return 'text-green-600';
+    if (status >= 300 && status < 400) return 'text-blue-600';
+    if (status >= 400 && status < 500) return 'text-yellow-600';
+    return 'text-red-600';
+  };
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+  const paddingBottom = virtualRows.length > 0 ? totalSize - virtualRows[virtualRows.length - 1].end : 0;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
+      {/* Filters */}
+      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex flex-wrap gap-4 items-center">
+          <div className="flex items-center gap-2">
+            <Filter className="w-4 h-4 text-gray-500" />
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Filters:</span>
+          </div>
+
+          <select
+            value={filterLevel}
+            onChange={(e) => setFilterLevel(e.target.value)}
+            className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+          >
+            <option value="all">All Levels</option>
+            <option value="TRACE">TRACE</option>
+            <option value="DEBUG">DEBUG</option>
+            <option value="INFO">INFO</option>
+            <option value="WARN">WARN</option>
+            <option value="ERROR">ERROR</option>
+            <option value="FATAL">FATAL</option>
+          </select>
+
+          <select
+            value={filterStatus}
+            onChange={(e) => setFilterStatus(e.target.value)}
+            className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+          >
+            <option value="all">All Status</option>
+            <option value="2xx">2xx Success</option>
+            <option value="4xx">4xx Client Error</option>
+            <option value="5xx">5xx Server Error</option>
+          </select>
+
+          <div className="flex-1 min-w-[200px] relative">
+            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search URL, method, message..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+            />
+          </div>
+
+          <span className="text-sm text-gray-500 dark:text-gray-400">
+            Showing {filteredAndSortedLogs.length} of {logs.length} logs
+          </span>
+        </div>
+      </div>
+
+      {/* Virtualized Table */}
+      <div 
+        ref={tableContainerRef}
+        className="overflow-auto"
+        style={{ maxHeight: '600px' }}
+      >
+        <table className="w-full text-sm">
+            <thead className="bg-gray-50 dark:bg-gray-900 sticky top-0 z-10">
+              <tr>
+                <th
+                  onClick={() => handleSort('timestamp')}
+                  className="px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                  <div className="flex items-center gap-2">
+                    Timestamp
+                    <SortIcon field="timestamp" />
+                  </div>
+                </th>
+                <th
+                  onClick={() => handleSort('level')}
+                  className="px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                  <div className="flex items-center gap-2">
+                    Level
+                    <SortIcon field="level" />
+                  </div>
+                </th>
+                <th
+                  onClick={() => handleSort('method')}
+                  className="px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                  <div className="flex items-center gap-2">
+                    Method
+                    <SortIcon field="method" />
+                  </div>
+                </th>
+                <th className="px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300">
+                  URL / Message
+                </th>
+                <th
+                  onClick={() => handleSort('statusCode')}
+                  className="px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                  <div className="flex items-center gap-2">
+                    Status
+                    <SortIcon field="statusCode" />
+                  </div>
+                </th>
+                <th
+                  onClick={() => handleSort('duration')}
+                  className="px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                  <div className="flex items-center gap-2">
+                    Duration
+                    <SortIcon field="duration" />
+                  </div>
+                </th>
+                <th className="px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300">
+                  Message
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredAndSortedLogs.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="text-center py-12 text-gray-500 dark:text-gray-400">
+                    No logs found matching your filters
+                  </td>
+                </tr>
+              ) : (
+                <>
+                  {paddingTop > 0 && (
+                    <tr>
+                      <td style={{ height: `${paddingTop}px` }} />
+                    </tr>
+                  )}
+                  {virtualRows.map((virtualRow) => {
+                    const log = filteredAndSortedLogs[virtualRow.index];
+                    return (
+                      <tr
+                        key={virtualRow.index}
+                        onClick={() => onLogClick?.(log)}
+                        className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer border-b border-gray-200 dark:border-gray-700"
+                        style={{ height: `${virtualRow.size}px` }}
+                      >
+                        <td className="px-4 py-3 whitespace-nowrap text-gray-600 dark:text-gray-400 font-mono text-xs">
+                          {log.timestamp.toLocaleString()}
+                        </td>
+                        <td className={`px-4 py-3 whitespace-nowrap font-semibold ${getLevelColor(log.levelName)}`}>
+                          {log.levelName}
+                        </td>
+                        <td className="px-4 py-3 whitespace-nowrap text-gray-900 dark:text-gray-100 font-mono">
+                          {log.method || '-'}
+                        </td>
+                        <td className="px-4 py-3 text-gray-900 dark:text-gray-100 font-mono text-xs max-w-xs truncate">
+                          {log.url || log.msg || '-'}
+                        </td>
+                        <td className={`px-4 py-3 whitespace-nowrap font-semibold ${getStatusColor(log.statusCode)}`}>
+                          {log.statusCode || '-'}
+                        </td>
+                        <td className="px-4 py-3 whitespace-nowrap text-gray-900 dark:text-gray-100">
+                          {log.duration !== undefined ? `${log.duration}ms` : '-'}
+                        </td>
+                        <td className="px-4 py-3 text-gray-600 dark:text-gray-400 max-w-md truncate">
+                          {log.msg || log.err?.message || '-'}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                  {paddingBottom > 0 && (
+                    <tr>
+                      <td style={{ height: `${paddingBottom}px` }} />
+                    </tr>
+                  )}
+                </>
+              )}
+            </tbody>
+          </table>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/api-server/logs/components/StatisticsCards.tsx b/app/admin/api-server/logs/components/StatisticsCards.tsx
new file mode 100644
index 0000000..9279d1b
--- /dev/null
+++ b/app/admin/api-server/logs/components/StatisticsCards.tsx
@@ -0,0 +1,103 @@
+/**
+ * Statistics Cards Component
+ * Displays key metrics from log analysis in card format
+ */
+
+'use client';
+
+import { LogStatistics } from '../utils/pinoLogParser';
+import { Activity, CheckCircle, XCircle, Clock, TrendingUp, Zap } from 'lucide-react';
+
+interface StatisticsCardsProps {
+  statistics: LogStatistics;
+}
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  icon: React.ReactNode;
+  description?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  colorClass?: string;
+}
+
+function StatCard({ title, value, icon, description, colorClass = 'bg-blue-500' }: StatCardProps) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 border border-gray-200 dark:border-gray-700">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</h3>
+        <div className={`${colorClass} p-2 rounded-lg`}>
+          {icon}
+        </div>
+      </div>
+      <div className="mt-2">
+        <p className="text-3xl font-bold text-gray-900 dark:text-gray-100">{value}</p>
+        {description && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{description}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function StatisticsCards({ statistics }: StatisticsCardsProps) {
+  const successRate = statistics.totalRequests > 0
+    ? ((statistics.successCount / statistics.totalRequests) * 100).toFixed(1)
+    : '0.0';
+
+  const errorRate = statistics.totalRequests > 0
+    ? ((statistics.errorCount / statistics.totalRequests) * 100).toFixed(1)
+    : '0.0';
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-6">
+      <StatCard
+        title="Total Logs"
+        value={statistics.totalRequests.toLocaleString()}
+        icon={<Activity className="w-5 h-5 text-white" />}
+        colorClass="bg-blue-500"
+        description={`${statistics.httpRequests} HTTP, ${statistics.nonHttpLogs} app logs`}
+      />
+      
+      <StatCard
+        title="Success Rate"
+        value={`${successRate}%`}
+        icon={<CheckCircle className="w-5 h-5 text-white" />}
+        colorClass="bg-green-500"
+        description={`${statistics.successCount} successful`}
+      />
+      
+      <StatCard
+        title="Error Rate"
+        value={`${errorRate}%`}
+        icon={<XCircle className="w-5 h-5 text-white" />}
+        colorClass="bg-red-500"
+        description={`${statistics.errorCount} errors`}
+      />
+      
+      <StatCard
+        title="Avg Response Time"
+        value={statistics.avgResponseTime > 0 ? `${statistics.avgResponseTime}ms` : 'N/A'}
+        icon={<Clock className="w-5 h-5 text-white" />}
+        colorClass="bg-yellow-500"
+        description={statistics.avgResponseTime > 0 ? "Average duration" : "No HTTP logs"}
+      />
+      
+      <StatCard
+        title="Max Response Time"
+        value={statistics.maxResponseTime > 0 ? `${statistics.maxResponseTime}ms` : 'N/A'}
+        icon={<TrendingUp className="w-5 h-5 text-white" />}
+        colorClass="bg-orange-500"
+        description={statistics.maxResponseTime > 0 ? "Slowest request" : "No HTTP logs"}
+      />
+      
+      <StatCard
+        title="Min Response Time"
+        value={statistics.minResponseTime > 0 ? `${statistics.minResponseTime}ms` : 'N/A'}
+        icon={<Zap className="w-5 h-5 text-white" />}
+        colorClass="bg-purple-500"
+        description={statistics.minResponseTime > 0 ? "Fastest request" : "No HTTP logs"}
+      />
+    </div>
+  );
+}
diff --git a/app/admin/api-server/logs/page.tsx b/app/admin/api-server/logs/page.tsx
new file mode 100644
index 0000000..abda980
--- /dev/null
+++ b/app/admin/api-server/logs/page.tsx
@@ -0,0 +1,5 @@
+import LogsViewer from './LogsViewer';
+
+export default function LogsPage() {
+  return <LogsViewer />;
+}
diff --git a/app/admin/api-server/logs/utils/pinoLogParser.ts b/app/admin/api-server/logs/utils/pinoLogParser.ts
new file mode 100644
index 0000000..0c28768
--- /dev/null
+++ b/app/admin/api-server/logs/utils/pinoLogParser.ts
@@ -0,0 +1,293 @@
+/**
+ * Pino Log Parser Utility
+ * Parses Pino JSON log format and extracts meaningful data
+ */
+
+export interface PinoLogEntry {
+  level: number;
+  time: number;
+  pid: number;
+  hostname?: string;
+  req?: {
+    id?: string;
+    method?: string;
+    url?: string;
+    headers?: Record<string, string>;
+    remoteAddress?: string;
+    remotePort?: number;
+  };
+  res?: {
+    statusCode?: number;
+    headers?: Record<string, string>;
+  };
+  responseTime?: number;
+  msg?: string;
+  err?: {
+    type?: string;
+    message?: string;
+    stack?: string;
+  };
+  [key: string]: unknown;
+}
+
+export interface ParsedLogEntry extends PinoLogEntry {
+  timestamp: Date;
+  levelName: string;
+  method?: string;
+  url?: string;
+  statusCode?: number;
+  duration?: number;
+  isHttpLog: boolean;
+  customFields: Record<string, unknown>;
+}
+
+export interface LogStatistics {
+  totalRequests: number;
+  httpRequests: number;
+  nonHttpLogs: number;
+  successCount: number;
+  errorCount: number;
+  avgResponseTime: number;
+  maxResponseTime: number;
+  minResponseTime: number;
+  methodDistribution: Record<string, number>;
+  statusCodeDistribution: Record<string, number>;
+  hourlyDistribution: Record<string, number>;
+  errorsByType: Record<string, number>;
+  levelDistribution: Record<string, number>;
+  timelineByLevel: Record<string, Record<string, number>>;
+}
+
+const LOG_LEVELS: Record<number, string> = {
+  10: 'TRACE',
+  20: 'DEBUG',
+  30: 'INFO',
+  40: 'WARN',
+  50: 'ERROR',
+  60: 'FATAL',
+};
+
+/**
+ * Parse raw Pino log string (newline-delimited JSON)
+ */
+export function parsePinoLogs(logText: string): ParsedLogEntry[] {
+  if (!logText || !logText.trim()) {
+    return [];
+  }
+
+  const lines = logText.trim().split('\n');
+  const parsed: ParsedLogEntry[] = [];
+
+  const standardFields = new Set([
+    'level', 'time', 'pid', 'hostname', 'req', 'res', 
+    'responseTime', 'msg', 'err', 'name', 'v'
+  ]);
+
+  for (const line of lines) {
+    if (!line.trim()) continue;
+
+    try {
+      const entry: PinoLogEntry = JSON.parse(line);
+      
+      // Extract custom fields (anything not in standard Pino/pino-http fields)
+      const customFields: Record<string, unknown> = {};
+      for (const [key, value] of Object.entries(entry)) {
+        if (!standardFields.has(key)) {
+          customFields[key] = value;
+        }
+      }
+
+      const isHttpLog = !!(entry.req || entry.res || entry.responseTime);
+
+      parsed.push({
+        ...entry,
+        timestamp: new Date(entry.time),
+        levelName: LOG_LEVELS[entry.level] || `LEVEL_${entry.level}`,
+        method: entry.req?.method,
+        url: entry.req?.url,
+        statusCode: entry.res?.statusCode,
+        duration: entry.responseTime,
+        isHttpLog,
+        customFields,
+      });
+    } catch (error) {
+      console.warn('Failed to parse log line:', line, error);
+    }
+  }
+
+  return parsed;
+}
+
+/**
+ * Calculate comprehensive statistics from parsed logs
+ */
+export function calculateLogStatistics(logs: ParsedLogEntry[]): LogStatistics {
+  if (logs.length === 0) {
+    return {
+      totalRequests: 0,
+      httpRequests: 0,
+      nonHttpLogs: 0,
+      successCount: 0,
+      errorCount: 0,
+      avgResponseTime: 0,
+      maxResponseTime: 0,
+      minResponseTime: 0,
+      methodDistribution: {},
+      statusCodeDistribution: {},
+      hourlyDistribution: {},
+      errorsByType: {},
+      levelDistribution: {},
+      timelineByLevel: {},
+    };
+  }
+
+  const methodDistribution: Record<string, number> = {};
+  const statusCodeDistribution: Record<string, number> = {};
+  const hourlyDistribution: Record<string, number> = {};
+  const errorsByType: Record<string, number> = {};
+  const levelDistribution: Record<string, number> = {};
+  const timelineByLevel: Record<string, Record<string, number>> = {};
+
+  let totalResponseTime = 0;
+  const responseTimes: number[] = [];
+  let successCount = 0;
+  let errorCount = 0;
+  let httpRequests = 0;
+  let nonHttpLogs = 0;
+
+  for (const log of logs) {
+    // Track HTTP vs non-HTTP logs
+    if (log.isHttpLog) {
+      httpRequests++;
+    } else {
+      nonHttpLogs++;
+    }
+
+    // Level distribution
+    levelDistribution[log.levelName] = (levelDistribution[log.levelName] || 0) + 1;
+
+    // Method distribution (HTTP only)
+    if (log.method) {
+      methodDistribution[log.method] = (methodDistribution[log.method] || 0) + 1;
+    }
+
+    // Status code distribution (HTTP only)
+    if (log.statusCode) {
+      const statusKey = `${log.statusCode}`;
+      statusCodeDistribution[statusKey] = (statusCodeDistribution[statusKey] || 0) + 1;
+
+      // Count success vs errors
+      if (log.statusCode >= 200 && log.statusCode < 400) {
+        successCount++;
+      } else {
+        errorCount++;
+      }
+    } else {
+      // For non-HTTP logs, count errors by level
+      if (log.level >= 50) {
+        errorCount++;
+      } else if (log.level <= 30) {
+        successCount++;
+      }
+    }
+
+    // Hourly distribution
+    const hour = log.timestamp.getHours().toString().padStart(2, '0');
+    hourlyDistribution[hour] = (hourlyDistribution[hour] || 0) + 1;
+
+    // Timeline by level
+    if (!timelineByLevel[log.levelName]) {
+      timelineByLevel[log.levelName] = {};
+    }
+    timelineByLevel[log.levelName][hour] = (timelineByLevel[log.levelName][hour] || 0) + 1;
+
+    // Response time tracking (HTTP only)
+    if (log.duration !== undefined && log.duration > 0) {
+      totalResponseTime += log.duration;
+      responseTimes.push(log.duration);
+    }
+
+    // Error tracking
+    if (log.err) {
+      const errorType = log.err.type || log.err.message?.split(':')[0] || 'Unknown';
+      errorsByType[errorType] = (errorsByType[errorType] || 0) + 1;
+    }
+  }
+
+  const avgResponseTime = responseTimes.length > 0 
+    ? totalResponseTime / responseTimes.length 
+    : 0;
+
+  return {
+    totalRequests: logs.length,
+    httpRequests,
+    nonHttpLogs,
+    successCount,
+    errorCount,
+    avgResponseTime: Math.round(avgResponseTime * 100) / 100,
+    maxResponseTime: responseTimes.length > 0 ? Math.max(...responseTimes) : 0,
+    minResponseTime: responseTimes.length > 0 ? Math.min(...responseTimes) : 0,
+    methodDistribution,
+    statusCodeDistribution,
+    hourlyDistribution,
+    errorsByType,
+    levelDistribution,
+    timelineByLevel,
+  };
+}
+
+/**
+ * Filter logs by level
+ */
+export function filterByLevel(logs: ParsedLogEntry[], levels: string[]): ParsedLogEntry[] {
+  return logs.filter(log => levels.includes(log.levelName));
+}
+
+/**
+ * Filter logs by status code range
+ */
+export function filterByStatusCode(
+  logs: ParsedLogEntry[], 
+  minCode: number, 
+  maxCode: number
+): ParsedLogEntry[] {
+  return logs.filter(log => 
+    log.statusCode !== undefined && 
+    log.statusCode >= minCode && 
+    log.statusCode <= maxCode
+  );
+}
+
+/**
+ * Filter logs by time range
+ */
+export function filterByTimeRange(
+  logs: ParsedLogEntry[], 
+  startTime: Date, 
+  endTime: Date
+): ParsedLogEntry[] {
+  return logs.filter(log => 
+    log.timestamp >= startTime && log.timestamp <= endTime
+  );
+}
+
+/**
+ * Get top N slowest requests
+ */
+export function getTopSlowestRequests(logs: ParsedLogEntry[], n: number = 10): ParsedLogEntry[] {
+  return logs
+    .filter(log => log.duration !== undefined)
+    .sort((a, b) => (b.duration || 0) - (a.duration || 0))
+    .slice(0, n);
+}
+
+/**
+ * Get logs with errors only
+ */
+export function getErrorLogs(logs: ParsedLogEntry[]): ParsedLogEntry[] {
+  return logs.filter(log => 
+    log.level >= 50 || // ERROR or FATAL
+    (log.statusCode && log.statusCode >= 400) ||
+    log.err !== undefined
+  );
+}
diff --git a/app/admin/api-server/page.tsx b/app/admin/api-server/page.tsx
new file mode 100644
index 0000000..ce5a5f8
--- /dev/null
+++ b/app/admin/api-server/page.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import ApiServerManagerHome from "./ApiServerMangerHome";
+
+export async function generateMetadata() {
+    return {
+        title: "끄코 유틸리티 - 관리자 페이지",
+        description: `끄코 유틸리티 - 관리자 페이지`,
+        openGraph: {
+            title: "끄코 유틸리티 - 관리자 페이지",
+            description: "끄코 유틸리티 - 관리자 페이지",
+            type: "website",
+            url: "https://kkuko-utils.vercel.app/admin/api-server",
+            siteName: "끄코 유틸리티",
+            locale: "ko_KR",
+        },
+    };
+}
+
+export default function Page() {
+    return <ApiServerManagerHome />;
+}
\ No newline at end of file
diff --git a/app/admin/api-server/types.ts b/app/admin/api-server/types.ts
new file mode 100644
index 0000000..6f9678f
--- /dev/null
+++ b/app/admin/api-server/types.ts
@@ -0,0 +1,25 @@
+// API Server Admin Types
+
+export interface ChannelHealth {
+  id: string;
+  healthy: boolean;
+}
+
+export interface CrawlerHealthResponse {
+  channels: ChannelHealth[];
+}
+
+export interface SaveSessionRequest {
+  channelId: string;
+  jwtToken: string;
+  refreshToken: string;
+}
+
+export interface SaveSessionResponse {
+  message: string;
+}
+
+export interface RestartCrawlerResponse {
+  status: string;
+  channel: string;
+}
diff --git a/app/admin/del-words/DelWordsHome.tsx b/app/admin/del-words/DelWordsHome.tsx
index fa8741f..62413b3 100644
--- a/app/admin/del-words/DelWordsHome.tsx
+++ b/app/admin/del-words/DelWordsHome.tsx
@@ -129,7 +129,7 @@ export default function WordsDelHome() {
 
         setCurrentTask("필요한 정보 가져오는 중...");
         setProgress(0);
-        const { data: docsDatas, error: docsDataError } = await SCM.get().allDocs();
+        const { data: docsData, error: docsDataError } = await SCM.get().allDocs();
         if (docsDataError) return makeError(docsDataError);
 
         const { data: waitWords, error: waitWordsError } = await SCM.get().allWaitWords('delete');
@@ -156,10 +156,10 @@ export default function WordsDelHome() {
         const themeDocsInfo: Record<string, number> = {};
 
 
-        docsDatas.filter(({ typez }) => typez === "letter").forEach(({ id, name }) => {
+        docsData.filter(({ typez }) => typez === "letter").forEach(({ id, name }) => {
             letterDocsInfo[name] = id
         })
-        docsDatas.filter(({ typez }) => typez === "theme").forEach(({ id, name }) => {
+        docsData.filter(({ typez }) => typez === "theme").forEach(({ id, name }) => {
             themeDocsInfo[name] = id
         })
 
diff --git a/app/admin/logs/AdminLogsHome.tsx b/app/admin/logs/AdminLogsHome.tsx
index 9176ba0..d0b83d3 100644
--- a/app/admin/logs/AdminLogsHome.tsx
+++ b/app/admin/logs/AdminLogsHome.tsx
@@ -207,7 +207,7 @@ export default function AdminLogsHome({ initialWordLogs, initialDocsLogs, allDoc
         setLoading(true);
         try {
             if (selectedTab === "word_logs") {
-                const { data, error } = await SCM.get().logsByFillter({ 
+                const { data, error } = await SCM.get().logsByFilter({
                     filterState: wordLogState, 
                     filterType: wordLogType, 
                     from: 0, 
diff --git a/app/admin/logs/AdminLogsWrapper.tsx b/app/admin/logs/AdminLogsWrapper.tsx
index 400337f..029f4f8 100644
--- a/app/admin/logs/AdminLogsWrapper.tsx
+++ b/app/admin/logs/AdminLogsWrapper.tsx
@@ -83,7 +83,7 @@ export default function AdminLogsWrapper(){
                 { data: allDocsLogs, error: docsLogsError },
                 { data: allDocs, error: allDocsError }
             ] = await Promise.all([
-                SCM.get().logsByFillter({ filterState: "all", filterType: "all", from: 0, to: 999 }),
+                SCM.get().logsByFilter({ filterState: "all", filterType: "all", from: 0, to: 999 }),
                 SCM.get().docsLogsByFilter({ logType: "all", from: 0, to: 999 }),
                 SCM.get().allDocs()
             ]);
diff --git a/app/admin/request-words/AdminRequestHome.tsx b/app/admin/request-words/AdminRequestHome.tsx
index f60408c..1b659f2 100644
--- a/app/admin/request-words/AdminRequestHome.tsx
+++ b/app/admin/request-words/AdminRequestHome.tsx
@@ -59,7 +59,7 @@ type WordRequest = {
     word_id?: number; // 주제 변경 요청에서만 사용
 }
 
-export default function AdminHome({ requestDatas, refreshFn }: { requestDatas: WordRequest[], refreshFn: () => Promise<void> }) {
+export default function AdminHome({ requestData: requestData, refreshFn }: { requestData: WordRequest[], refreshFn: () => Promise<void> }) {
     const [selectedTab, setSelectedTab] = useState<string>("all");
     const [selectedRequests, setSelectedRequests] = useState<Set<number>>(new Set());
     const [selectedThemes, setSelectedThemes] = useState<Record<number, Set<number>>>({});
@@ -85,7 +85,7 @@ export default function AdminHome({ requestDatas, refreshFn }: { requestDatas: W
     }, []);
 
     // 요청 타입별 필터링
-    const filteredRequests = requestDatas.filter(request => {
+    const filteredRequests = requestData.filter(request => {
         if (selectedTab === "all") return true;
         return request.request_type === selectedTab;
     });
@@ -169,7 +169,7 @@ export default function AdminHome({ requestDatas, refreshFn }: { requestDatas: W
 
         // 승인 처리할 요청과 선택된 주제 정보 구성
         const requestsToApprove = Array.from(selectedRequests).map(reqId => {
-            const request = requestDatas.find(r => r.id === reqId);
+            const request = requestData.find(r => r.id === reqId);
             const selectedThemeIds = selectedThemes[reqId] || new Set<number>();
 
             // allThemes에서 선택된 주제 정보 가져오기
@@ -427,7 +427,7 @@ export default function AdminHome({ requestDatas, refreshFn }: { requestDatas: W
 
         // 거절할 처리할 요청과 선택된 주제 정보 구성
         const requestsToReject = Array.from(selectedRequests).map(reqId => {
-            const request = requestDatas.find(r => r.id === reqId);
+            const request = requestData.find(r => r.id === reqId);
             const selectedThemeIds = selectedThemes[reqId] || new Set<number>();
 
             return {
diff --git a/app/admin/request-words/AdminWrapper.tsx b/app/admin/request-words/AdminWrapper.tsx
index c9fdb04..d1ae083 100644
--- a/app/admin/request-words/AdminWrapper.tsx
+++ b/app/admin/request-words/AdminWrapper.tsx
@@ -28,7 +28,7 @@ type WordRequest = {
 export default function AdminHomeWrapper(){
     const { loadingState, updateLoadingState } = useLoadingState();
     const [errorMessage,setErrorMessage] = useState<string|null>(null);
-    const [waitDatas,setWaitDatas] = useState<WordRequest[] | null>(null);
+    const [waitData,setWaitData] = useState<WordRequest[] | null>(null);
 
     const MakeError = (error: PostgrestError) => {
         setErrorMessage(`문서 정보 데이터 로드중 오류.\nErrorName: ${error.name ?? "알수없음"}\nError Message: ${error.message ?? "없음"}\nError code: ${error.code}`)
@@ -123,7 +123,7 @@ export default function AdminHomeWrapper(){
             waitQueue.push(r);
         });
 
-        setWaitDatas(waitQueue);
+        setWaitData(waitQueue);
         updateLoadingState(100, "완료!")
     }
 
@@ -141,7 +141,7 @@ export default function AdminHomeWrapper(){
         return <ErrorPage message={errorMessage}/>
     }
 
-    if (waitDatas){
-        return <AdminHome requestDatas={waitDatas} refreshFn={getWaitQueue} />
+    if (waitData){
+        return <AdminHome requestData={waitData} refreshFn={getWaitQueue} />
     }
 }
\ No newline at end of file
diff --git a/app/api/auth/update_nickname/route.ts b/app/api/auth/update_nickname/route.ts
index 5a95f0c..53f05ba 100644
--- a/app/api/auth/update_nickname/route.ts
+++ b/app/api/auth/update_nickname/route.ts
@@ -11,7 +11,7 @@ export async function POST(request: NextRequest){
     if (!body){
         return NextResponse.json({
             data: null,
-            error: "invaild data"
+            error: "invalid data"
         })
     }
 
@@ -19,7 +19,7 @@ export async function POST(request: NextRequest){
     if (!nickname){
         return NextResponse.json({
             data: null,
-            error: "invaild data"
+            error: "invalid data"
         })
     }
 
diff --git a/app/api/kkuko/api/ranking/route.ts b/app/api/kkuko/api/ranking/route.ts
new file mode 100644
index 0000000..edf8f40
--- /dev/null
+++ b/app/api/kkuko/api/ranking/route.ts
@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+import axios from 'axios';
+
+type RankingResponse = {
+    target: string;
+    data: {
+        id: string,
+        rank: number,
+        score: number,
+        nick: string
+        diff: string
+    }[]
+};
+
+export async function GET(request: NextRequest){
+    try {
+        const id = request.nextUrl.searchParams.get('id');
+        if (!id || isNaN(Number(id))){
+            return NextResponse.json(
+                { error: 'Invalid ranking ID' },
+                { status: 400 }
+            );
+        }
+        const res = await axios.get<RankingResponse>(`https://kkutu.co.kr/o/ranking?id=${id}`);
+        const rankingData = res.data.data.find(user => user.id === id);
+        if (!rankingData) {
+            return NextResponse.json(
+                { error: 'User not found in ranking data' },
+                { status: 404 }
+            );
+        } else {
+            return NextResponse.json({rank: rankingData.rank + 1, id: rankingData.id});
+        }
+    } catch {
+        return NextResponse.json(
+            { error: 'Failed to fetch ranking data' },
+            { status: 500 }
+        );
+    }
+}
\ No newline at end of file
diff --git a/app/api/kkuko/image/route.ts b/app/api/kkuko/image/route.ts
new file mode 100644
index 0000000..b4969d5
--- /dev/null
+++ b/app/api/kkuko/image/route.ts
@@ -0,0 +1,39 @@
+import { NextRequest } from "next/server";
+
+export const runtime = 'edge';
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const imageUrl = searchParams.get("url");
+
+  const controller = new AbortController();
+  const signal = controller.signal;
+
+  const timer = setTimeout(() => controller.abort(), 5000);
+
+  if (!imageUrl) {
+    return new Response("Missing image url", { status: 400 });
+  }
+
+  if (!imageUrl.startsWith("https://cdn.kkutu.co.kr/img/")) {
+    return new Response("Invalid image url", { status: 400 });
+  }
+
+  const imageResponse = await fetch(imageUrl, { signal }).finally(() => clearTimeout(timer));
+
+  if (!imageResponse.ok) {
+    return new Response("Failed to fetch image", {
+      status: imageResponse.status,
+    });
+  }
+
+  const contentType = imageResponse.headers.get("content-type") ?? "image/jpeg";
+  const buffer = await imageResponse.arrayBuffer();
+
+  return new Response(buffer, {
+    headers: {
+      "Content-Type": contentType,
+      "Cache-Control": "public, s-maxage=31536000, max-age=86400, stale-while-revalidate=59",
+    },
+  });
+}
diff --git a/app/api/words/README.md b/app/api/words/README.md
new file mode 100644
index 0000000..9c89860
--- /dev/null
+++ b/app/api/words/README.md
@@ -0,0 +1,59 @@
+
+---
+
+## 엔드포인트
+- **URL**: `/api/words/search`
+- **Method**: `GET`
+- **Description**: 모드별 필터링 및 정렬 옵션을 적용한 단어 리스트 반환
+
+---
+
+## 쿼리 파라미터
+
+### 1. 필수 및 공통 옵션
+| 파라미터 | 타입 | 설명 | 기본값 |
+| :--- | :--- | :--- | :--- |
+| `mode` | `string` | 게임 모드 (`kor-start`, `kor-end`, `kung`, `hunmin`, `jaqi`) | `kor-start` |
+| `q` | `string` | **검색어.** 모드에 따라 시작자, 끝자, 또는 초성으로 동작 | - |
+| `limit` | `number` | 최대 검색 결과 수 | `100` |
+| `sortBy` | `string` | 정렬 기준 (`abc`: 가나다순, `length`: 글자수순, `attack`: 한방단어) | `length` |
+
+### 2. 세부 필터링 (Advanced Options)
+| 파라미터 | 타입 | 설명 | 기본값 |
+| :--- | :--- | :--- | :--- |
+| `manner` | `string` | 단어 필터 (`man`: 매너어, `jen`: 전어, `eti`: 에티켓) | `man` |
+| `minLength` | `number` | 최소 글자 수 | `2` |
+| `maxLength` | `number` | 최대 글자 수 | `100` |
+| `duem` | `boolean` | 두음법칙 적용 여부 (`true`/`false`) | `true` |
+| `mission` | `string` | 포함해야 할 특정 글자 (미션 파괴용) | `""` |
+| `themeId` | `number` | `jaqi` 모드 사용 시 필수 테마 고유 ID | - |
+
+---
+
+## 예제
+
+### A. 일반적인 끝말잇기 (시작 단어 찾기)
+`가`로 시작하는 매너어 50개 검색 (글자수 순 정렬)
+```http request
+GET /api/words/search?mode=kor-start&q=가&manner=man&limit=50&sortBy=length
+```
+### B. 쿵쿵따 모드
+`나`로 시작하는 3글자 단어 검색 (자동으로 3글자로 설정)
+```http request
+GET /api/words/search?mode=hunmin&q=ㄱㄴ
+```
+### C. 훈민정음 (초성 퀴즈)
+`ㄱㄴ` 초성을 가진 단어 검색
+```http request
+GET /api/words/search?mode=hunmin&q=ㄱㄴ
+```
+
+## Response Status Code
+
+ * 200: OK
+ * 400: Bad Request
+   * 필수 파라미터(q) 누락
+   * 훈민정음 모드에서 2글자가 아닌 쿼리 전송
+   * 주제어 모드에서 themeId 누락
+ * 500: Internal Server Error
+   * 서버 내부 또는 데이터베이스 오류.
\ No newline at end of file
diff --git a/app/api/words/search/route.ts b/app/api/words/search/route.ts
new file mode 100644
index 0000000..7b29461
--- /dev/null
+++ b/app/api/words/search/route.ts
@@ -0,0 +1,97 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { SCM } from '@/app/lib/supabaseClient';
+import { advancedQueryType } from '@/app/types/type';
+import { GameMode } from '@/app/word/search/types';
+
+export async function GET(request: NextRequest) {
+    const { searchParams } = new URL(request.url);
+
+    const gameMode = (searchParams.get('mode') || 'kor-start') as GameMode;
+    const searchQuery = searchParams.get('q') || '';
+    const missionLetter = searchParams.get('mission') || '';
+    const minimumLength = parseInt(searchParams.get('minLength') || '2');
+    const maximumLength = parseInt(searchParams.get('maxLength') || '100');
+    const sortOrder = (searchParams.get('sortBy') || 'length') as 'abc' | 'length' | 'attack';
+    const isDuemApplied = searchParams.get('duem') !== 'false';
+    const hasMiniInfo = searchParams.get('miniInfo') === 'true';
+    const mannerMode = searchParams.get('manner') || 'man';
+    const isAcceptedOnly = searchParams.get('ingjung') !== 'false';
+    const displayLimit = parseInt(searchParams.get('limit') || '100');
+    const themeId = searchParams.get('themeId');
+
+    try {
+        let searchOptions: advancedQueryType;
+
+        if (gameMode === 'kor-start' || gameMode === 'kor-end') {
+            const startLetter = gameMode === 'kor-start' ? searchQuery : searchParams.get('start') || undefined;
+            const endLetter = gameMode === 'kor-end' ? searchQuery : searchParams.get('end') || undefined;
+
+            if (gameMode === 'kor-start' && !startLetter) return handleErrorResponse('시작 초성이 필요합니다.');
+            if (gameMode === 'kor-end' && !endLetter) return handleErrorResponse('끝 초성이 필요합니다.');
+
+            searchOptions = {
+                mode: gameMode,
+                start: startLetter?.trim(),
+                end: endLetter?.trim(),
+                mission: missionLetter,
+                ingjung: isAcceptedOnly,
+                man: mannerMode === 'man',
+                jen: mannerMode === 'jen',
+                eti: mannerMode === 'eti',
+                duem: isDuemApplied,
+                miniInfo: hasMiniInfo,
+                length_min: minimumLength,
+                length_max: maximumLength,
+                sort_by: sortOrder,
+                limit: isNaN(displayLimit) ? 100 : displayLimit
+            };
+        } else if (gameMode === 'kung') {
+            if (!searchQuery) return handleErrorResponse('단어가 필요합니다.');
+            searchOptions = {
+                mode: 'kung',
+                start: searchQuery.trim().slice(0, 3),
+                mission: missionLetter,
+                ingjung: isAcceptedOnly,
+                man: mannerMode === 'man',
+                jen: mannerMode === 'jen',
+                eti: mannerMode === 'eti',
+                duem: isDuemApplied,
+                miniInfo: hasMiniInfo,
+                length_min: 3,
+                length_max: 3,
+                sort_by: sortOrder,
+                limit: isNaN(displayLimit) ? 100 : displayLimit
+            };
+        } else if (gameMode === 'hunmin') {
+            if (searchQuery.trim().length !== 2) return handleErrorResponse('훈민정음 쿼리는 2글자여야 합니다.');
+            searchOptions = {
+                mode: 'hunmin',
+                query: searchQuery.trim(),
+                mission: missionLetter,
+                limit: isNaN(displayLimit) ? 100 : displayLimit
+            };
+        } else if (gameMode === 'jaqi') {
+            if (!themeId) return handleErrorResponse('주제 ID가 필요합니다.');
+            searchOptions = {
+                mode: 'jaqi',
+                query: searchQuery.trim(),
+                theme: Number(themeId),
+                limit: isNaN(displayLimit) ? 100 : displayLimit
+            };
+        } else {
+            return handleErrorResponse('유효하지 않은 모드입니다.');
+        }
+
+        const { data, error } = await SCM.get().wordsByAdvancedQuery(searchOptions);
+
+        if (error) throw error;
+
+        return NextResponse.json(data);
+    } catch (error) {
+        return NextResponse.json({ error: error }, { status: 500 });
+    }
+}
+
+function handleErrorResponse(message: string) {
+    return NextResponse.json({ error: message }, { status: 400 });
+}
\ No newline at end of file
diff --git a/app/auth/auth.tsx b/app/auth/auth.tsx
index 7565392..79961c9 100644
--- a/app/auth/auth.tsx
+++ b/app/auth/auth.tsx
@@ -13,8 +13,8 @@ import { Input } from "@/app/components/ui/input";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/app/components/ui/card";
 import { Alert, AlertDescription } from "@/app/components/ui/alert";
 import ErrorModal from '../components/ErrModal';
-import type { ErrorMessage } from "../types/type";
-import { SCM } from "../lib/supabaseClient";
+import type { ErrorMessage } from "@/types/type";
+import { SCM } from "@/lib/supabaseClient";
 
 const AuthPage = () => {
     const router = useRouter();
@@ -23,7 +23,7 @@ const AuthPage = () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [nicknameError, setNicknameError] = useState("");
     const dispatch = useDispatch<AppDispatch>();
-    const [errorModalView, seterrorModalView] = useState<ErrorMessage | null>(null);
+    const [errorModalView, setErrorModalView] = useState<ErrorMessage | null>(null);
 
     useEffect(() => {
         
@@ -36,7 +36,7 @@ const AuthPage = () => {
             const { data, error: err } = await SCM.get().userById(session.user.id);
     
             if (err) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name ?? null,
                     ErrMessage: err.message ?? null,
                     ErrStackRace: err.stack ?? null,
@@ -76,7 +76,7 @@ const AuthPage = () => {
         const { error: err } = await SCM.loginByGoogle(location.origin);
         if (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -84,7 +84,7 @@ const AuthPage = () => {
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -107,7 +107,7 @@ const AuthPage = () => {
         // 닉네임 중복 확인
         const { data: checkData, error: checkErr } = await SCM.get().usersByNickname(nickname);
         if (checkErr) {
-            seterrorModalView({
+            setErrorModalView({
                 ErrName: checkErr.name,
                 ErrMessage: checkErr.message,
                 ErrStackRace: checkErr.stack,
@@ -127,7 +127,7 @@ const AuthPage = () => {
         const { data, error:err } = await SCM.add().nickname(session.data.session.user.id, nickname)
 
         if (err) {
-            seterrorModalView({
+            setErrorModalView({
                 ErrName: err.name,
                 ErrMessage: err.message,
                 ErrStackRace: err.stack,
@@ -267,7 +267,7 @@ const AuthPage = () => {
                 {errorModalView && (
                     <ErrorModal 
                         error={errorModalView} 
-                        onClose={() => seterrorModalView(null)} 
+                        onClose={() => setErrorModalView(null)}
                     />
                 )}
             </div>
diff --git a/app/auth/page.tsx b/app/auth/page.tsx
index 102b7fb..7055cf7 100644
--- a/app/auth/page.tsx
+++ b/app/auth/page.tsx
@@ -16,10 +16,10 @@ export async function generateMetadata() {
 	};
 }
 
-const OAuthpage: React.FC = () => {
+const OAuthPage: React.FC = () => {
     return (
         <AuthPage />
     )
 }
 
-export default OAuthpage;
\ No newline at end of file
+export default OAuthPage;
\ No newline at end of file
diff --git a/app/extra-features/page.tsx b/app/extra-features/page.tsx
index 4a6ce87..45661b7 100644
--- a/app/extra-features/page.tsx
+++ b/app/extra-features/page.tsx
@@ -28,7 +28,7 @@ const features = [
     { 
         title: "미니게임", 
         description: "다양한 미니게임을 하며 실력을 늘려보세요.", 
-        link: null,
+        link: '/mini-game',
         icon: Gamepad2,
         color: "from-purple-500 to-pink-500",
         bgColor: "group-hover:bg-purple-50 dark:group-hover:bg-purple-950/20"
diff --git a/app/footer.tsx b/app/footer.tsx
index 6a57060..9c15665 100644
--- a/app/footer.tsx
+++ b/app/footer.tsx
@@ -103,7 +103,7 @@ const Footer = () => {
         <div className="mt-8 text-center">
           <p className="text-sm text-gray-400">
             © {new Date().getFullYear()} 
-            <span className="font-medium text-gray-300 mx-1">hafskjfha</span>
+            <span className="font-medium text-gray-300 mx-1">SolidLoop-studio</span>
             All rights reserved.
           </p>
           <p className="text-xs text-gray-500 mt-1">
diff --git a/app/header.tsx b/app/header.tsx
index b433cea..063a24d 100644
--- a/app/header.tsx
+++ b/app/header.tsx
@@ -64,22 +64,33 @@ const Header = () => {
         setTheme(theme === 'dark' ? 'light' : 'dark');
     }
 
+    type NavItem = {
+        href: string;
+        label: string;
+        match: (pathname: string) => boolean;
+    };
+
+    const navDefs: NavItem[] = [
+        { href: "/word-combiner", label: "단어조합기", match: p => p === "/word-combiner" },
+        { href: "/manager-tool", label: "단어장 관리 도구", match: p => p.includes("/manager-tool") },
+        { href: "/words-docs", label: "단어장 공유", match: p => p.includes("/words-docs") },
+        { href: "/word", label: "오픈DB", match: p => p === "/word" || p.includes("/word/") },
+        { href: "/kkuko", label: "끄코", match: p => p === "/kkuko" || p.includes("/kkuko/") },
+    ];
+
+    const activeIndex = pathname === "/" ? -2 : pathname.includes("/admin") ? -3 : navDefs.findIndex(item => item.match(pathname));
+
     const navItems = [
-        { href: "/word-combiner", label: "단어조합기", isActive: pathname === "/word-combiner" },
-        { href: "/manager-tool", label: "단어장 관리 도구", isActive: pathname.includes('manager-tool') },
-        { href: "/words-docs", label: "단어장 공유", isActive: pathname.includes('words-docs') },
-        { href: "/word", label: "오픈DB", isActive: pathname==='/word' || pathname.includes('/word/') },
-        { 
-            href: "/extra-features", 
-            label: "기타 기능", 
-            isActive: !(pathname === "/word-combiner") && 
-            !(pathname.includes('manager-tool')) && 
-            !(pathname.includes('words-docs')) && 
-            !(pathname === "/") && 
-            !(pathname.includes('admin')) &&
-            !(pathname.includes('/word/')) &&
-            pathname !=='/word'
-        }
+        ...navDefs.map((item, i) => ({
+            href: item.href,
+            label: item.label,
+            isActive: i === activeIndex,
+        })),
+        {
+            href: "/extra-features",
+            label: "기타 기능",
+            isActive: activeIndex === -1,
+        },
     ];
 
     return (
diff --git a/app/kkuko/KkukoHome.tsx b/app/kkuko/KkukoHome.tsx
new file mode 100644
index 0000000..f39132c
--- /dev/null
+++ b/app/kkuko/KkukoHome.tsx
@@ -0,0 +1,70 @@
+"use client";
+import { ArrowRight, Trophy, User } from "lucide-react";
+import Link from "next/link";
+
+export default function KkukoHome() {
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-slate-900 dark:to-indigo-950 flex flex-col items-center justify-start">
+            {/* 제목 영역 */}
+            <header className="text-center mt-16 px-4 relative">
+                <h1 className="text-4xl md:text-5xl font-extrabold mb-6 bg-gradient-to-r from-indigo-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
+                    끄코 정보
+                </h1>
+                <p className="text-slate-600 dark:text-slate-300 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed">
+                    끄투코리아의 유저정보와 랭킹을 조회 할 수 있습니다.
+                </p>
+            </header>
+
+            {/* 기능 설명 영역 */}
+            <main className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8 px-4 w-full max-w-6xl">
+                {/* 프로필 */}
+                <div className="group bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm p-8 shadow-xl dark:shadow-2xl rounded-2xl border border-slate-200/50 dark:border-slate-700/50 hover:shadow-2xl dark:hover:shadow-indigo-500/10 transition-all duration-300 hover:-translate-y-1">
+                    <div className="flex items-center justify-center mb-6">
+                        <div className="p-4 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
+                            <User className="w-8 h-8 text-white" />
+                        </div>
+                    </div>
+
+                    <h2 className="text-2xl md:text-3xl font-bold text-slate-800 dark:text-slate-100 mb-4 text-center">
+                        프로필
+                    </h2>
+
+                    <p className="text-slate-600 dark:text-slate-300 mb-6 text-center leading-relaxed">
+                        끄투코리아의 유저 정보와 전적 등을 확인할 수 있습니다.
+                    </p>
+
+                    <Link href="/kkuko/profile" className="block">
+                        <button className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white px-6 py-4 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center group">
+                            둘러보기
+                            <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
+                        </button>
+                    </Link>
+                </div>
+
+                {/* 랭킹*/}
+                <div className="group bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm p-8 shadow-xl dark:shadow-2xl rounded-2xl border border-slate-200/50 dark:border-slate-700/50 hover:shadow-2xl dark:hover:shadow-emerald-500/10 transition-all duration-300 hover:-translate-y-1">
+                    <div className="flex items-center justify-center mb-6">
+                        <div className="p-4 bg-gradient-to-br from-emerald-500 to-green-600 rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
+                            <Trophy className="w-8 h-8 text-white" />
+                        </div>
+                    </div>
+
+                    <h2 className="text-2xl md:text-3xl font-bold text-slate-800 dark:text-slate-100 mb-4 text-center">
+                        랭킹
+                    </h2>
+
+                    <p className="text-slate-600 dark:text-slate-300 mb-6 text-center leading-relaxed">
+                        각 모드별로 승리가 많은 유저들의 랭킹을 확인할 수 있습니다.
+                    </p>
+
+                    <Link href="/kkuko/ranking" className="block">
+                        <button className="w-full bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-600 hover:to-green-700 text-white px-6 py-4 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center group">
+                            구경하기
+                            <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
+                        </button>
+                    </Link>
+                </div>
+            </main>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/app/kkuko/page.tsx b/app/kkuko/page.tsx
new file mode 100644
index 0000000..9bf003e
--- /dev/null
+++ b/app/kkuko/page.tsx
@@ -0,0 +1,20 @@
+import KkukoHome from "./KkukoHome";
+
+export async function generateMetadata() {
+	return {
+		title: "끄코 유틸리티 - 끄코 정보",
+		description: '끄코 유틸리티 - 끄코 정보',
+		openGraph: {
+			title: "끄코 유틸리티 - 끄코 정보",
+			description: "끄코 유틸리티 - 끄코 정보",
+			type: "website",
+			url: "https://kkuko-utils.vercel.app/kkuko",
+			siteName: "끄코 유틸리티",
+			locale: "ko_KR",
+		},
+	};
+}
+
+export default function KkukoPage() {
+	return <KkukoHome />;
+}
\ No newline at end of file
diff --git a/app/kkuko/profile/KkukoProfile.tsx b/app/kkuko/profile/KkukoProfile.tsx
new file mode 100644
index 0000000..23d21d3
--- /dev/null
+++ b/app/kkuko/profile/KkukoProfile.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Search } from 'lucide-react';
+
+import { useKkukoProfile } from './hooks/useKkukoProfile';
+import ProfileSearch from './components/ProfileSearch';
+import ProfileHeader from './components/ProfileHeader';
+import ProfileStats from './components/ProfileStats';
+import ProfileRecords from './components/ProfileRecords';
+import ItemModal from './components/ItemModal';
+import ErrorModal from '../../components/ErrModal';
+
+export default function KkukoProfile() {
+    const searchParams = useSearchParams();
+    const {
+        profileData,
+        itemsData,
+        modesData,
+        loading,
+        error,
+        detailedError,
+        setDetailedError,
+        totalUserCount,
+        expRank,
+        recentSearches,
+        fetchProfile,
+        removeFromRecentSearches
+    } = useKkukoProfile();
+
+    const [showItemModal, setShowItemModal] = useState(false);
+
+    // Handle URL query parameters to trigger fetch
+    useEffect(() => {
+        const nick = searchParams.get('nick');
+        const id = searchParams.get('id');
+
+        if (nick) {
+            fetchProfile(nick, 'nick');
+        } else if (id) {
+            fetchProfile(id, 'id');
+        }
+    }, [searchParams, fetchProfile]);
+
+    return (
+        <div className="container mx-auto px-4 py-8 max-w-6xl">
+            {/* Title Section */}
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-6">
+                끄투코리아 유저 조회 {totalUserCount > 0 && `(등록된 유저수 ${totalUserCount.toLocaleString()})`}
+            </h1>
+
+            {/* Search Section */}
+            <ProfileSearch 
+                loading={loading}
+                recentSearches={recentSearches}
+                onRemoveRecentSearch={removeFromRecentSearches}
+                onSearch={fetchProfile}
+            />
+
+            {/* Loading State */}
+            {loading && (
+                <div className="text-center py-8">
+                    <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+                    <p className="mt-2 text-gray-600 dark:text-gray-400">로딩 중...</p>
+                </div>
+            )}
+
+            {/* Error State */}
+            {error && (
+                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+                    <p className="text-red-700 dark:text-red-400 font-semibold">{error}</p>
+                    <p className="text-red-600 dark:text-red-500 text-sm mt-2">
+                        2026-01-18 17시 이후 게임 접속한 유저에 대해서 조회할 수 있습니다.
+                    </p>
+                </div>
+            )}
+
+            {/* Empty State - No search yet */}
+            {!loading && !error && !profileData && (
+                <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-12 text-center">
+                    <div className="max-w-md mx-auto">
+                        <Search className="w-16 h-16 mx-auto mb-4 text-gray-400 dark:text-gray-500" />
+                        <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                            유저 검색
+                        </h2>
+                        <p className="text-gray-600 dark:text-gray-400 mb-6">
+                            닉네임 또는 ID로 끄투코리아 유저의 프로필을 조회할 수 있습니다.
+                        </p>
+                        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 text-left">
+                            <p className="text-sm text-blue-700 dark:text-blue-400 font-semibold mb-2">📌 안내</p>
+                            <ul className="text-sm text-blue-600 dark:text-blue-300 space-y-1">
+                                <li>• 2026-01-18 17시 이후 게임 접속한 유저만 조회 가능합니다</li>
+                                <li>• 검색 후 최근 검색 기록이 표시됩니다</li>
+                                <li>• 실시간 접속 상태와 게임 전적을 확인할 수 있습니다</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Profile Data */}
+            {profileData && !loading && (
+                <div className="space-y-6">
+                    {/* User Profile Section */}
+                    <ProfileHeader 
+                        profileData={profileData}
+                        itemsData={itemsData}
+                        expRank={expRank}
+                    />
+
+                    {/* Equipment Section */}
+                    <ProfileStats 
+                        itemsData={itemsData}
+                        onShowDetail={() => setShowItemModal(true)}
+                    />
+
+                    {/* Records Section */}
+                    <ProfileRecords 
+                        profileData={profileData}
+                        modesData={modesData}
+                    />
+                </div>
+            )}
+
+            {/* Item Modal */}
+            {showItemModal && (
+                <ItemModal 
+                    itemsData={itemsData}
+                    profileData={profileData}
+                    onClose={() => setShowItemModal(false)}
+                />
+            )}
+
+            {/* Error Modal */}
+            {detailedError && (
+                <ErrorModal 
+                    error={detailedError} 
+                    onClose={() => setDetailedError(null)} 
+                />
+            )}
+
+            {/* Warning Message */}
+            <div className="mt-8 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+                <p className="text-sm text-yellow-800 dark:text-yellow-300 text-center">
+                    ⚠️ 해당 데이터는 비공식 API를 사용하여 만들었으며 데이터가 항상 최신이거나 정확하다고 할 수 없습니다. 참고용으로만 사용해주세요.
+                </p>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/app/kkuko/profile/components/ItemModal.tsx b/app/kkuko/profile/components/ItemModal.tsx
new file mode 100644
index 0000000..4e6e5cd
--- /dev/null
+++ b/app/kkuko/profile/components/ItemModal.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { ItemInfo, ProfileData, isSpecialOptions, ItemOption, SpecialOptions } from '@/types/kkuko.types';
+import TryRenderImg from '../../shared/components/TryRenderImg'
+import { getSlotName, extractColorFromLabel, parseDescription, getOptionName, formatNumber } from '../utils/profileHelper';
+import { NICKNAME_COLORS } from '../../shared/lib/const';
+
+interface ItemModalProps {
+    itemsData: ItemInfo[];
+    profileData: ProfileData | null;
+    onClose: () => void;
+}
+
+export default function ItemModal({ itemsData, profileData, onClose }: ItemModalProps) {
+    const isDarkTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') === 'dark' : false;
+
+    const itemOptionsUI = (options: ItemOption | SpecialOptions) => {
+        const itemOptionUI = (key: string, value: number) => (
+            <div key={key} className="bg-gray-50 dark:bg-gray-700 rounded px-3 py-2">
+                <span className="text-sm text-gray-600 dark:text-gray-400">{getOptionName(key)}: </span>
+                <span className="font-semibold text-gray-900 dark:text-gray-100">{value > 0 ? '+' : ''}{formatNumber(value * 1000)}{key[0] === 'g' ? '%p' : ''}</span>
+            </div>
+        )
+
+        if (isSpecialOptions(options)) {
+            const relevantOptions = Date.now() >= options.date ? options.after : options.before;
+            return Object.entries(relevantOptions).filter(([_, v]) => v !== undefined && typeof v === 'number').map(([k, v]) =>
+                itemOptionUI(k, v as number)
+            );
+        } else {
+            return Object.entries(options).filter(([_, v]) => v !== undefined && typeof v === 'number').map(([k, v]) =>
+                itemOptionUI(k, v as number)
+            );
+        }
+    }
+
+    const itemImgPlaceholder = () => (
+        <div className="absolute inset-0 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+            <span className="text-xs text-gray-400 dark:text-gray-500 text-center">아이템<br />이미지</span>
+        </div>
+    )
+
+    return (
+        <div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center z-50 p-4">
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
+                <div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-between items-center z-30">
+                    <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">장착 아이템 목록</h3>
+                    <button
+                        onClick={onClose}
+                        className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl"
+                    >
+                        ×
+                    </button>
+                </div>
+                <div className="p-6 space-y-4 relative">
+                    {itemsData.map((item) => {
+                        const equipment = profileData?.equipment.find(eq => eq.itemId === item.id);
+                        const slotName = equipment ? getSlotName(equipment.slot) : '알 수 없음';
+                        const isNikItem = equipment?.slot === 'NIK';
+                        const nikColor = isNikItem ? extractColorFromLabel(item.description, isDarkTheme) : undefined;
+
+                        // Get the image group from equipment slot
+                        const getImageGroup = () => {
+                            if (!equipment) return null;
+                            if (equipment.slot === 'NIK') return null; // No image for nickname items
+                            if (equipment.slot === 'BDG' || equipment.slot === 'pbdg') return 'badge';
+                            if (equipment.slot.startsWith('Ml') || equipment.slot.startsWith('Mr')) return 'hand';
+                            // Remove 'M' prefix from slot name (e.g., 'Mavatar' -> 'avatar')
+                            return equipment.slot.startsWith('M') ? equipment.slot.substring(1).toLowerCase() : equipment.slot.toLowerCase();
+                        };
+
+                        const imageGroup = getImageGroup();
+
+                        return (
+                            <div key={item.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                                <div className="flex gap-4">
+                                    {/* Item Image */}
+                                    {imageGroup && (
+                                        <div className="relative w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
+                                            <TryRenderImg
+                                                placeholder={itemImgPlaceholder()}
+                                                url={`/api/kkuko/image?url=https://cdn.kkutu.co.kr/img/kkutu/moremi/${imageGroup}/${item.id}.png`}
+                                                alt={item.name}
+                                                width={80}
+                                                height={80}
+                                                className="transition-opacity duration-300"
+                                            />
+                                        </div>
+                                    )}
+
+                                    <div className="flex-1">
+                                        <div className="flex items-center gap-2 mb-1">
+                                            <h4
+                                                className="font-bold text-lg"
+                                                style={isNikItem ? { color: nikColor } : {}}
+                                            >
+                                                {item.name}
+                                            </h4>
+                                            <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
+                                                {slotName}
+                                            </span>
+                                        </div>
+                                        <p className="text-gray-600 dark:text-gray-400 text-sm mb-3">
+                                            {parseDescription(item.description).map((part, i) => (
+                                                <span key={i} style={{ color: part.colorKey ? (NICKNAME_COLORS[part.colorKey] || (isDarkTheme ? '#FFFFFF' : '#000000')) : undefined }}>
+                                                    {part.text}
+                                                </span>
+                                            ))}
+                                        </p>
+                                        <div className="grid grid-cols-2 gap-2">
+                                            {itemOptionsUI(item.options)}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/app/kkuko/profile/components/ProfileHeader.tsx b/app/kkuko/profile/components/ProfileHeader.tsx
new file mode 100644
index 0000000..af2d1a0
--- /dev/null
+++ b/app/kkuko/profile/components/ProfileHeader.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import { ItemInfo, ProfileData } from '@/types/kkuko.types';
+import TryRenderImg from '../../shared/components/TryRenderImg';
+import ProfileAvatar from '../../shared/components/ProfileAvatar';
+import { getNicknameColor } from '../utils/profileHelper';
+
+interface ProfileHeaderProps {
+    profileData: ProfileData;
+    itemsData: ItemInfo[];
+    expRank: number | null;
+}
+
+export default function ProfileHeader({ profileData, itemsData, expRank }: ProfileHeaderProps) {
+    const isDarkTheme = typeof window !== 'undefined' ? localStorage.getItem('theme') === 'dark' : false;
+
+    const lvImgPlaceholder = () => (
+        <div className="absolute inset-0 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center z-10">
+            <span className="text-xs text-gray-400 dark:text-gray-500">Lv</span>
+        </div>
+    );
+
+    return (
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
+            <div className="flex gap-6">
+                {/* Left: Character Image and Badges */}
+                <div className="flex flex-col gap-3 flex-shrink-0">
+                    <ProfileAvatar profileData={profileData} itemsData={itemsData} />
+
+                    {/* Badges (pbdg slot items) */}
+                    {profileData.equipment.filter(eq => eq.slot === 'pbdg').length > 0 && (
+                        <div className="flex flex-wrap gap-2 w-48">
+                            {profileData.equipment
+                                .filter(eq => eq.slot === 'pbdg')
+                                .map(eq => {
+                                    const item = itemsData.find(i => i.id === eq.itemId);
+                                    if (!item) return null;
+                                    return (
+                                        <div
+                                            key={eq.itemId}
+                                            className="relative group"
+                                            title={item.name}
+                                        >
+                                            <div className="relative w-10 h-10 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center overflow-hidden">
+                                                <TryRenderImg
+                                                    placeholder={<div className="w-10 h-10" />}
+                                                    url={`/api/kkuko/image?url=https://cdn.kkutu.co.kr/img/kkutu/moremi/badge/${item.id}.png`}
+                                                    alt={item.name}
+                                                    width={40}
+                                                    height={40}
+                                                    className="transition-opacity duration-300"
+                                                />
+                                            </div>
+                                            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+                                                {item.name}
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                        </div>
+                    )}
+                </div>
+
+                {/* Right: User Info */}
+                <div className="flex-1 space-y-3">
+                    <div>
+                        <h2
+                            className="text-3xl font-bold"
+                            style={{ color: getNicknameColor(profileData.equipment, isDarkTheme) }}
+                        >
+                            {profileData.user.nickname}
+                        </h2>
+                        <p className="text-gray-600 dark:text-gray-400 mt-1">{profileData.user.exordial}</p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">ID: {profileData.user.id}</p>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <p className="text-sm text-gray-500 dark:text-gray-400">경험치</p>
+                            <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{profileData.user.exp.toLocaleString()} EXP</p>
+                            {expRank !== null && (
+                                <p className="text-xs text-gray-400 dark:text-gray-500">경험치 랭킹: #{expRank.toLocaleString()}</p>
+                            )}
+                        </div>
+
+                        <div>
+                            <p className="text-sm text-gray-500 dark:text-gray-400">레벨</p>
+                            <div className="flex items-center gap-2">
+                                <div className="relative w-8 h-8 flex-shrink-0">
+                                    <TryRenderImg
+                                        placeholder={lvImgPlaceholder()}
+                                        url={`/api/kkuko/image?url=https://cdn.kkutu.co.kr/img/kkutu/lv/lv${String(profileData.user.level).padStart(4, '0')}.png`}
+                                        alt="Level Icon"
+                                        width={32}
+                                        height={32}
+                                        className={`rounded transition-opacity duration-300`}
+                                    />
+                                </div>
+                                <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                                    Lv. {profileData.user.level}
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* <div className="col-span-2">
+                            <p className="text-sm text-gray-500 dark:text-gray-400">마지막 관측</p>
+                            <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{formatObservedAt(profileData.user.observedAt)}</p>
+                        </div> */}
+
+                        <div>
+                            <p className="text-sm text-gray-500 dark:text-gray-400">접속 상태</p>
+                            <p className="text-lg font-semibold">
+                                {profileData.presence.channelId ? (
+                                    <span className="text-green-600 dark:text-green-400">온라인</span>
+                                ) : (
+                                    <span className="text-gray-500 dark:text-gray-400">오프라인</span>
+                                )}
+                            </p>
+                            {profileData.presence.channelId ? (
+                                <p className="text-xs text-gray-600 dark:text-gray-400">채널: {profileData.presence.channelId}</p>
+                            ) : (
+                                // <p className="text-xs text-gray-600 dark:text-gray-400">마지막 접속: {formatLastSeen(profileData.presence.updatedAt)}</p>
+                                <></>
+                            )}
+                        </div>
+
+                        <div>
+                            <p className="text-sm text-gray-500 dark:text-gray-400">방 정보</p>
+                            <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                                {profileData.presence.roomId ? (
+                                    <span>방 {profileData.presence.roomId}</span>
+                                ) : (
+                                    <span className="text-gray-400 dark:text-gray-500">미입장</span>
+                                )}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/app/kkuko/profile/components/ProfileRecords.tsx b/app/kkuko/profile/components/ProfileRecords.tsx
new file mode 100644
index 0000000..1678298
--- /dev/null
+++ b/app/kkuko/profile/components/ProfileRecords.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { ProfileData, Mode } from '@/types/kkuko.types';
+import { groupRecordsByMode, getModeName, calculateWinRate } from '../utils/profileHelper';
+
+interface ProfileRecordsProps {
+    profileData: ProfileData;
+    modesData: Mode[];
+}
+
+export default function ProfileRecords({ profileData, modesData }: ProfileRecordsProps) {
+    const recordsByMode = groupRecordsByMode(profileData.record, modesData);
+
+    return (
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
+            <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">전적</h3>
+            <div className="space-y-6">
+                {Object.entries(recordsByMode).map(([groupName, records]) => (
+                    records.length > 0 && (
+                        <div key={groupName}>
+                            <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3 capitalize">
+                                {groupName === 'kor' ? '한국어' : groupName === 'eng' ? '영어' : '이벤트'}
+                            </h4>
+                            <div className="overflow-x-auto">
+                                <table className="w-full">
+                                    <thead>
+                                        <tr className="border-b border-gray-200 dark:border-gray-700">
+                                            <th className="text-left py-3 px-4 text-gray-900 dark:text-gray-100">모드</th>
+                                            <th className="text-right py-3 px-4 text-gray-900 dark:text-gray-100">총 게임</th>
+                                            <th className="text-right py-3 px-4 text-gray-900 dark:text-gray-100">승리</th>
+                                            <th className="text-right py-3 px-4 text-gray-900 dark:text-gray-100">승률</th>
+                                            <th className="text-right py-3 px-4 text-gray-900 dark:text-gray-100">경험치</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {records.map((rec) => (
+                                            <tr key={rec.id} className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
+                                                <td className="py-3 px-4 text-gray-900 dark:text-gray-100">{getModeName(rec.modeId, modesData)}</td>
+                                                <td className="text-right py-3 px-4 text-gray-900 dark:text-gray-100">{rec.total.toLocaleString()}</td>
+                                                <td className="text-right py-3 px-4 text-gray-900 dark:text-gray-100">{rec.win.toLocaleString()}</td>
+                                                <td className="text-right py-3 px-4 text-gray-900 dark:text-gray-100">{calculateWinRate(rec.win, rec.total)}%</td>
+                                                <td className="text-right py-3 px-4 text-gray-900 dark:text-gray-100">{rec.exp.toLocaleString()}</td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    )
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/app/kkuko/profile/components/ProfileSearch.tsx b/app/kkuko/profile/components/ProfileSearch.tsx
new file mode 100644
index 0000000..bc91c84
--- /dev/null
+++ b/app/kkuko/profile/components/ProfileSearch.tsx
@@ -0,0 +1,178 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Search } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { SearchHistoryItem } from '../hooks/useRecentSearches';
+import { normalizeHangul } from '@/app/lib/hangulUtils';
+
+interface ProfileSearchProps {
+    loading: boolean;
+    recentSearches: SearchHistoryItem[];
+    onRemoveRecentSearch: (query: string, type: 'nick' | 'id') => void;
+    onSearch: (query: string, type: 'nick' | 'id') => void;
+}
+
+export default function ProfileSearch({ loading, recentSearches, onRemoveRecentSearch, onSearch }: ProfileSearchProps) {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchType, setSearchType] = useState<'nick' | 'id'>('nick');
+    const [showDropdown, setShowDropdown] = useState(false);
+    
+    const inputRef = useRef<HTMLInputElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // Sync input with query params
+    useEffect(() => {
+        const nick = searchParams.get('nick');
+        const id = searchParams.get('id');
+
+        if (nick) {
+            setSearchQuery(nick);
+            setSearchType('nick');
+            // We assume parent handles the actual fetch via its own effect or we call onSearch here?
+            // Since the hook in parent reads useSearchParams, we DON'T need to call onSearch here.
+            // Just update UI state.
+        } else if (id) {
+            setSearchQuery(id);
+            setSearchType('id');
+        }
+    }, [searchParams]);
+
+    // Handle click outside to close dropdown
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                dropdownRef.current &&
+                !dropdownRef.current.contains(event.target as Node) &&
+                inputRef.current &&
+                !inputRef.current.contains(event.target as Node)
+            ) {
+                setShowDropdown(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    const handleSearch = () => {
+        if (!searchQuery.trim()) return;
+
+        const trimmed = searchQuery.trim();
+        // Call parent fetch immediately so UI shows loading without waiting for navigation
+        onSearch(trimmed, searchType);
+
+        const queryParam = searchType === 'nick' ? 'nick' : 'id';
+        // update URL without adding a history entry
+        router.replace(`/kkuko/profile?${queryParam}=${encodeURIComponent(trimmed)}`);
+        setShowDropdown(false);
+    };
+
+    const handleRecentSearchClick = (search: SearchHistoryItem) => {
+        setSearchQuery(search.query);
+        setSearchType(search.type);
+        // call parent fetch immediately to reduce perceived latency
+        onSearch(search.query, search.type);
+        const queryParam = search.type === 'nick' ? 'nick' : 'id';
+        router.replace(`/kkuko/profile?${queryParam}=${encodeURIComponent(search.query)}`);
+        setShowDropdown(false);
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    };
+
+    const getFilteredSearches = () => {
+        if (!searchQuery.trim()) {
+            return recentSearches;
+        }
+
+        const normalizedQuery = normalizeHangul(searchQuery);
+
+        return recentSearches.filter(search => {
+            if (search.type !== searchType) return false;
+
+            const normalizedTarget = normalizeHangul(search.query);
+            return normalizedTarget.startsWith(normalizedQuery);
+        });
+    };
+
+    return (
+        <div className="mb-8 relative">
+            <div className="flex gap-2 items-center">
+                <div className="flex-1 relative">
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        onKeyDown={handleKeyPress}
+                        onFocus={() => setShowDropdown(true)}
+                        placeholder="유저 검색..."
+                        className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                    
+                    {/* Dropdown */}
+                    {showDropdown && recentSearches.length > 0 && getFilteredSearches().length > 0 && (
+                        <div
+                            ref={dropdownRef}
+                            className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-64 overflow-y-auto z-50"
+                        >
+                            <div className="py-2">
+                                <div className="px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 font-semibold">
+                                    최근 검색
+                                </div>
+                                {getFilteredSearches().map((search, index) => (
+                                    <div
+                                        key={index}
+                                        className="flex items-center justify-between px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer group"
+                                    >
+                                        <button
+                                            onClick={() => handleRecentSearchClick(search)}
+                                            className="flex-1 text-left flex items-center gap-2"
+                                        >
+                                            <Search className="w-4 h-4 text-gray-400 dark:text-gray-500" />
+                                            <span className="text-gray-900 dark:text-gray-100">{search.query}</span>
+                                            <span className="text-xs text-gray-500 dark:text-gray-400">({search.type === 'nick' ? '닉네임' : 'ID'})</span>
+                                        </button>
+                                        <button
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                onRemoveRecentSearch(search.query, search.type);
+                                            }}
+                                            className="text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity px-2"
+                                        >
+                                            ×
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                </div>
+                <select
+                    value={searchType}
+                    onChange={(e) => setSearchType(e.target.value as 'nick' | 'id')}
+                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                    <option value="nick">닉네임</option>
+                    <option value="id">ID</option>
+                </select>
+                <button
+                    onClick={handleSearch}
+                    className="p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                    disabled={loading}
+                >
+                    <Search className="w-5 h-5" />
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/app/kkuko/profile/components/ProfileStats.tsx b/app/kkuko/profile/components/ProfileStats.tsx
new file mode 100644
index 0000000..b577b81
--- /dev/null
+++ b/app/kkuko/profile/components/ProfileStats.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { ItemInfo } from '@/types/kkuko.types';
+import { calculateTotalOptions, getOptionName, formatNumber } from '../utils/profileHelper';
+
+interface ProfileStatsProps {
+    itemsData: ItemInfo[];
+    onShowDetail: () => void;
+}
+
+export default function ProfileStats({ itemsData, onShowDetail }: ProfileStatsProps) {
+    const totalOptions = calculateTotalOptions(itemsData);
+
+    return (
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
+            <div className="flex justify-between items-center mb-4">
+                <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">착용 아이템 정보</h3>
+                <button
+                    onClick={onShowDetail}
+                    className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+                >
+                    보기
+                </button>
+            </div>
+
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                {Object.entries(totalOptions).map(([key, value]) => (
+                    <div key={key} className="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
+                        <p className="text-sm text-gray-500 dark:text-gray-400">{getOptionName(key)}</p>
+                        <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{value > 0 ? '+' : ''}{formatNumber(value)}{key[0] === 'g' ? '%p' : ''}</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
diff --git a/app/kkuko/profile/hooks/useKkukoProfile.ts b/app/kkuko/profile/hooks/useKkukoProfile.ts
new file mode 100644
index 0000000..a333708
--- /dev/null
+++ b/app/kkuko/profile/hooks/useKkukoProfile.ts
@@ -0,0 +1,147 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+    fetchModes as fetchModesApi,
+    fetchTotalUsers as fetchTotalUsersApi,
+    fetchProfile as fetchProfileApi,
+    fetchItems as fetchItemsApi,
+    fetchExpRank as fetchExpRankApi
+} from '../../shared/lib/api';
+import { Equipment, ItemInfo, Mode, ProfileData } from '@/types/kkuko.types';
+import { useRecentSearches } from './useRecentSearches';
+
+export const useKkukoProfile = () => {
+    const [profileData, setProfileData] = useState<ProfileData | null>(null);
+    const [itemsData, setItemsData] = useState<ItemInfo[]>([]);
+    const [modesData, setModesData] = useState<Mode[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [detailedError, setDetailedError] = useState<ErrorMessage | null>(null);
+    const [totalUserCount, setTotalUserCount] = useState<number>(0);
+    const [expRank, setExpRank] = useState<number | null>(null);
+    
+    // Recent searches hook integration
+    const { recentSearches, saveToRecentSearches, removeFromRecentSearches } = useRecentSearches();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleError = useCallback((err: any, inputValue: string, location: string) => {
+        const errorMsg: ErrorMessage = {
+            ErrName: err.name || "Error",
+            ErrMessage: err.message || "Unknown error",
+            ErrStackRace: err.stack || null,
+            inputValue: inputValue,
+            location: location
+        };
+        setDetailedError(errorMsg);
+        console.error(`Failed at ${location}:`, err);
+    }, []);
+
+    const fetchModes = useCallback(async () => {
+        try {
+            const response = await fetchModesApi();
+            const result = await response.data;
+            if (result.status === 200) {
+                setModesData(result.data);
+            }
+        } catch (err) {
+            handleError(err, 'fetchModes', 'fetchModes');
+        }
+    }, [handleError]);
+
+    const fetchTotalUsers = useCallback(async () => {
+        try {
+            const response = await fetchTotalUsersApi();
+            const result = await response.data;
+            if (result.status === 200) {
+                setTotalUserCount(result.data.totalUsers);
+            }
+        } catch (err) {
+            handleError(err, 'fetchTotalUsers', 'fetchTotalUsers');
+        }
+    }, [handleError]);
+
+
+    const fetchItems = useCallback(async (itemIds: string) => {
+        try {
+            const response = await fetchItemsApi(itemIds);
+            const result = await response.data;
+            if (result.status === 200) {
+                const newItems = Array.isArray(result.data) ? result.data : [result.data];
+                setItemsData(newItems);
+            }
+        } catch (err) {
+            handleError(err, itemIds, 'fetchItems');
+        }
+    }, [handleError]);
+
+    const fetchExpRank = useCallback(async (userId: string) => {
+        try {
+            const response = await fetchExpRankApi(userId);
+            setExpRank(response.data.rank);
+        } catch (err) {
+            handleError(err, userId, 'fetchExpRank');
+        }
+    }, [handleError]);
+
+    const fetchProfile = useCallback(async (query: string, type: 'nick' | 'id') => {
+        setLoading(true);
+        setError(null);
+        setDetailedError(null);
+        setProfileData(null);
+        setItemsData([]); 
+        setExpRank(null);
+
+        try {
+            const response = await fetchProfileApi(query, type);
+
+            if (response.status === 404) {
+                setError('등록된 유저가 아닙니다.');
+                setLoading(false);
+                return;
+            }
+
+            const result = await response.data;
+
+            if (result.status === 200) {
+                setProfileData(result.data);
+
+                // Fetch items data
+                if (result.data.equipment.length > 0) {
+                    const itemIds = result.data.equipment.map((eq: Equipment) => eq.itemId).join(',');
+                    fetchItems(itemIds);
+                }
+
+                // Fetch exp rank
+                fetchExpRank(result.data.user.id);
+                
+                // Save to recent searches
+                saveToRecentSearches(query, type);
+            }
+        } catch (err) {
+            setError('프로필을 불러오는데 실패했습니다.');
+            handleError(err, query, 'fetchProfile');
+        } finally {
+            setLoading(false);
+        }
+    }, [fetchItems, fetchExpRank, saveToRecentSearches, handleError]);
+
+    // Initial load
+    useEffect(() => {
+        fetchModes();
+        fetchTotalUsers();
+    }, [fetchModes, fetchTotalUsers]);
+
+    return {
+        profileData,
+        itemsData,
+        modesData,
+        loading,
+        error,
+        detailedError,
+        setDetailedError,
+        totalUserCount,
+        expRank,
+        recentSearches,
+        fetchProfile,
+        removeFromRecentSearches
+    };
+};
diff --git a/app/kkuko/profile/hooks/useRecentSearches.ts b/app/kkuko/profile/hooks/useRecentSearches.ts
new file mode 100644
index 0000000..66cde87
--- /dev/null
+++ b/app/kkuko/profile/hooks/useRecentSearches.ts
@@ -0,0 +1,49 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export type SearchHistoryItem = {
+    query: string;
+    type: 'nick' | 'id';
+};
+
+export const useRecentSearches = () => {
+    const [recentSearches, setRecentSearches] = useState<SearchHistoryItem[]>([]);
+
+    useEffect(() => {
+        const saved = localStorage.getItem('kkuko-recent-searches');
+        if (saved) {
+            try {
+                setRecentSearches(JSON.parse(saved));
+            } catch (e) {
+                console.error('Failed to parse recent searches:', e);
+            }
+        }
+    }, []);
+
+    const saveToRecentSearches = useCallback((query: string, type: 'nick' | 'id') => {
+        setRecentSearches(prev => {
+            const newSearch = { query, type };
+            const filtered = prev.filter(
+                s => !(s.query === query && s.type === type)
+            );
+            const updated = [newSearch, ...filtered].slice(0, 7);
+            localStorage.setItem('kkuko-recent-searches', JSON.stringify(updated));
+            return updated;
+        });
+    }, []);
+
+    const removeFromRecentSearches = useCallback((query: string, type: 'nick' | 'id') => {
+        setRecentSearches(prev => {
+            const updated = prev.filter(
+                s => !(s.query === query && s.type === type)
+            );
+            localStorage.setItem('kkuko-recent-searches', JSON.stringify(updated));
+            return updated;
+        });
+    }, []);
+
+    return {
+        recentSearches,
+        saveToRecentSearches,
+        removeFromRecentSearches
+    };
+};
diff --git a/app/kkuko/profile/page.tsx b/app/kkuko/profile/page.tsx
new file mode 100644
index 0000000..0736c69
--- /dev/null
+++ b/app/kkuko/profile/page.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react'
+import KkukoProfile from './KkukoProfile'
+
+export async function generateMetadata() {
+	return {
+		title: "끄코 유틸리티 - 끄코 유저 정보",
+		description: '끄코 유틸리티 - 끄코 유저 정보',
+		openGraph: {
+			title: "끄코 유틸리티 - 끄코 유저 정보",
+			description: "끄코 유틸리티 - 끄코 유저 정보",
+			type: "website",
+			url: "https://kkuko-utils.vercel.app/kkuko/profile",
+			siteName: "끄코 유틸리티",
+			locale: "ko_KR",
+		},
+	};
+}
+
+export default function KkukoProfilePage() {
+    return (
+        <Suspense fallback={<div>Loading...</div>}>
+            <KkukoProfile />
+        </Suspense>
+    );
+}
\ No newline at end of file
diff --git a/app/kkuko/profile/utils/profileHelper.ts b/app/kkuko/profile/utils/profileHelper.ts
new file mode 100644
index 0000000..e5f7b79
--- /dev/null
+++ b/app/kkuko/profile/utils/profileHelper.ts
@@ -0,0 +1,156 @@
+import { Equipment, ItemInfo, KkukoRecord, Mode, isSpecialOptions } from '@/types/kkuko.types';
+import { NICKNAME_COLORS, OPTION_NAMES, SLOT_NAMES } from '../../shared/lib/const';
+
+export const getNicknameColor = (equipment: Equipment[], isDarkTheme: boolean): string => {
+    const nikItem = equipment.find(eq => eq.slot === 'NIK');
+    const defaultColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    
+    if (!nikItem) return defaultColor;
+
+    const colorKey = nikItem.itemId.toLowerCase().replace('_name', '');
+    return NICKNAME_COLORS[colorKey] || defaultColor;
+};
+
+export const extractColorFromLabel = (description: string, isDarkTheme: boolean): string => {
+    const defaultColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const match = description.match(/<label class='x-([^']+)'>.*?<\/label>/);
+    if (!match) return defaultColor;
+
+    const colorKey = match[1].toLowerCase().replace('_name', '');
+    return NICKNAME_COLORS[colorKey] || defaultColor;
+};
+
+export const formatNumber = (num: number): string => {
+    return (num / 1000).toString();
+};
+
+export const calculateTotalOptions = (itemsData: ItemInfo[]) => {
+    const totals: Record<string, number> = {};
+
+    itemsData.forEach(item => {
+        if (isSpecialOptions(item.options)) {
+            const relevantOptions = Date.now() >= item.options.date ? item.options.after : item.options.before;
+            Object.entries(relevantOptions).forEach(([key, value]) => {
+                if (value !== undefined && typeof value === 'number' && !isNaN(value)) {
+                    totals[key] = (totals[key] || 0) + Number(value) * 1000;
+                }
+            });
+        } else {
+            Object.entries(item.options).forEach(([key, value]) => {
+                if (value !== undefined && typeof value === 'number' && !isNaN(value)) {
+                    totals[key] = (totals[key] || 0) + Number(value) * 1000;
+                }
+            });
+        }
+    });
+
+    return totals;
+};
+
+export const getModeName = (modeId: string, modesData: Mode[]): string => {
+    const mode = modesData.find(m => m.modeId === modeId);
+    return mode ? mode.modeName : modeId;
+};
+
+export const getModeGroup = (modeId: string, modesData: Mode[]): string => {
+    const mode = modesData.find(m => m.modeId === modeId);
+    return mode ? mode.group : 'unknown';
+};
+
+export const groupRecordsByMode = (records: KkukoRecord[], modesData: Mode[]) => {
+    const groups: Record<string, KkukoRecord[]> = {
+        kor: [],
+        eng: [],
+        event: []
+    };
+
+    records.forEach(rec => {
+        const group = getModeGroup(rec.modeId, modesData);
+        if (groups[group]) {
+            groups[group].push(rec);
+        }
+    });
+
+    return groups;
+};
+
+export const calculateWinRate = (win: number, total: number): string => {
+    if (total === 0) return '0.00';
+    return ((win / total) * 100).toFixed(2);
+};
+
+export const formatObservedAt = (dateString: string): string => {
+    const date = new Date(dateString);
+    return date.toLocaleString('ko-KR', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    });
+};
+
+export const getSlotName = (slot: string): string => {
+    return SLOT_NAMES[slot] || slot;
+};
+
+export const getOptionName = (key: string): string => {
+    return OPTION_NAMES[key] || key;
+};
+
+export const formatLastSeen = (updatedAt: string): string => {
+    const lastSeen = new Date(updatedAt);
+    const now = new Date();
+    const diffMs = now.getTime() - lastSeen.getTime();
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffDays > 0) {
+        return `${diffDays}일 전`;
+    } else if (diffHours > 0) {
+        return `${diffHours}시간 전`;
+    } else {
+        const diffMinutes = Math.floor(diffMs / (1000 * 60));
+        return `${diffMinutes}분 전`;
+    }
+};
+
+export interface DescriptionPart {
+    text: string;
+    colorKey?: string;
+}
+
+export const parseDescription = (description: string): DescriptionPart[] => {
+    const parts: DescriptionPart[] = [];
+    const regex = /<label class='x-([^']+)'>([^<]*)<\/label>/g;
+    let lastIndex = 0;
+    let match;
+
+    while ((match = regex.exec(description)) !== null) {
+        // Add text before the label
+        if (match.index > lastIndex) {
+            parts.push({
+                text: description.substring(lastIndex, match.index)
+            });
+        }
+
+        // Add colored label text
+        const colorKey = match[1].toLowerCase().replace('_name', '');
+        parts.push({
+            text: match[2],
+            colorKey
+        });
+
+        lastIndex = regex.lastIndex;
+    }
+
+    // Add remaining text
+    if (lastIndex < description.length) {
+        parts.push({
+            text: description.substring(lastIndex)
+        });
+    }
+
+    return parts;
+};
diff --git a/app/kkuko/ranking/KkukoRaking.tsx b/app/kkuko/ranking/KkukoRaking.tsx
new file mode 100644
index 0000000..506a2f4
--- /dev/null
+++ b/app/kkuko/ranking/KkukoRaking.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import { Trophy, TrendingUp, Target } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/app/components/ui/tabs';
+import { ModeSelector } from './components/ModeSelector';
+import { RankingList } from './components/RankingList';
+import { RankingPagination } from './components/RankingPagination';
+import { Podium } from './components/Podium';
+import { useKkukoRanking } from './hooks/useKkukoRanking';
+import ErrorModal from '../../components/ErrModal';
+
+export default function KkukoRanking() {
+    const {
+        modes,
+        selectedMode,
+        rankings,
+        option,
+        page,
+        loading,
+        modesLoading,
+        detailedError,
+        setDetailedError,
+        handleModeChange,
+        handleOptionChange,
+        handlePageChange: onPageChange
+    } = useKkukoRanking();
+
+    const handlePageChange = (newPage: number) => {
+        onPageChange(newPage);
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    if (modesLoading) {
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-gray-100 to-gray-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 flex items-center justify-center">
+                <div className="text-gray-900 dark:text-white text-lg">로딩 중...</div>
+            </div>
+        );
+    }
+
+    const hasNextPage = rankings.length === 30;
+    const topThree = page === 1 ? rankings.filter(r => r.rank <= 3) : [];
+    const remainingRankings = page === 1 ? rankings.filter(r => r.rank > 3) : rankings;
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-gray-100 to-gray-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 py-8 px-4">
+            <div className="max-w-7xl mx-auto">
+                {/* Header */}
+                <div className="text-center mb-8">
+                    <div className="flex items-center justify-center gap-3 mb-4">
+                        <Trophy className="w-12 h-12 text-yellow-600 dark:text-yellow-500" />
+                        <h1 className="text-4xl font-bold text-gray-900 dark:text-white">끄투코리아 랭킹</h1>
+                    </div>
+                    <p className="text-gray-700 dark:text-gray-400 text-lg">모드별 최고의 플레이어들을 만나보세요</p>
+                </div>
+
+                {/* Controls */}
+                <div className="flex flex-wrap items-center justify-between gap-4 mb-6 bg-white/80 dark:bg-slate-800/50 p-4 rounded-lg border border-gray-300 dark:border-slate-700 shadow-sm">
+                    <div className="flex items-center gap-3">
+                        <Target className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+                        <span className="text-gray-900 dark:text-white font-semibold">모드 선택:</span>
+                        <ModeSelector 
+                            modes={modes}
+                            selectedMode={selectedMode}
+                            onModeChange={handleModeChange}
+                        />
+                    </div>
+
+                    <Tabs value={option} onValueChange={handleOptionChange}>
+                        <TabsList className="bg-gray-100 dark:bg-slate-900 border border-gray-300 dark:border-slate-700">
+                            <TabsTrigger 
+                                value="win"
+                                className="data-[state=active]:bg-blue-600 data-[state=active]:text-white"
+                            >
+                                <TrendingUp className="w-4 h-4 mr-2" />
+                                승리 순위
+                            </TabsTrigger>
+                            <TabsTrigger 
+                                value="exp"
+                                className="data-[state=active]:bg-purple-600 data-[state=active]:text-white"
+                            >
+                                <Trophy className="w-4 h-4 mr-2" />
+                                경험치 순위
+                            </TabsTrigger>
+                        </TabsList>
+                    </Tabs>
+                </div>
+
+                {/* Rankings */}
+                {loading ? (
+                    <div className="text-center py-12">
+                        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 dark:border-white"></div>
+                        <p className="text-gray-900 dark:text-white mt-4">랭킹을 불러오는 중...</p>
+                    </div>
+                ) : (
+                    <>
+                        {/* Podium for top 3 on first page */}
+                        {topThree.length > 0 && <Podium topThree={topThree} option={option} />}
+                        
+                        {/* Remaining rankings */}
+                        <RankingList rankings={remainingRankings} option={option} />
+                        
+                        <RankingPagination 
+                            currentPage={page}
+                            onPageChange={handlePageChange}
+                            hasNextPage={hasNextPage}
+                        />
+                    </>
+                )}
+            </div>
+
+            {/* Error Modal */}
+            {detailedError && (
+                <ErrorModal 
+                    error={detailedError} 
+                    onClose={() => setDetailedError(null)} 
+                />
+            )}
+        </div>
+    );
+}
diff --git a/app/kkuko/ranking/components/ModeSelector.tsx b/app/kkuko/ranking/components/ModeSelector.tsx
new file mode 100644
index 0000000..5e2fde4
--- /dev/null
+++ b/app/kkuko/ranking/components/ModeSelector.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '@/app/components/ui/select';
+import type { Mode } from '@/app/types/kkuko.types';
+
+interface ModeSelectorProps {
+    modes: Mode[];
+    selectedMode: string;
+    onModeChange: (modeId: string) => void;
+}
+
+const GROUP_LABELS: Record<string, string> = {
+    kor: '🇰🇷 한국어 모드',
+    eng: '🇺🇸 영어 모드',
+    event: '🎉 이벤트 모드',
+};
+
+export function ModeSelector({ modes, selectedMode, onModeChange }: ModeSelectorProps) {
+    // Group modes by category
+    const groupedModes = modes.reduce((acc, mode) => {
+        const group = mode.group || 'other';
+        if (!['kor', 'eng', 'event'].includes(group)) return acc;
+        if (!acc[group]) {
+            acc[group] = [];
+        }
+        acc[group].push(mode);
+        return acc;
+    }, {} as Record<string, Mode[]>);
+
+    // Sort groups: kor, eng, event, others
+    const sortedGroups = Object.keys(groupedModes).sort((a, b) => {
+        const order = ['kor', 'eng', 'event'];
+        const indexA = order.indexOf(a);
+        const indexB = order.indexOf(b);
+        if (indexA === -1 && indexB === -1) return a.localeCompare(b);
+        if (indexA === -1) return 1;
+        if (indexB === -1) return -1;
+        return indexA - indexB;
+    });
+
+    return (
+        <Select value={selectedMode} onValueChange={onModeChange}>
+            <SelectTrigger className="w-[280px] bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-700 text-gray-900 dark:text-white">
+                <SelectValue placeholder="모드를 선택하세요" />
+            </SelectTrigger>
+            <SelectContent className="bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-700">
+                {sortedGroups.map((group) => (
+                    <SelectGroup key={group}>
+                        <SelectLabel className="text-gray-700 dark:text-gray-300 font-semibold">
+                            {GROUP_LABELS[group] || group.toUpperCase()}
+                        </SelectLabel>
+                        {groupedModes[group].map((mode) => (
+                            <SelectItem 
+                                key={mode.modeId} 
+                                value={mode.modeId}
+                                className="focus:bg-blue-100 dark:focus:bg-slate-700 text-gray-900 dark:text-white"
+                            >
+                                {mode.modeName}
+                            </SelectItem>
+                        ))}
+                    </SelectGroup>
+                ))}
+            </SelectContent>
+        </Select>
+    );
+}
diff --git a/app/kkuko/ranking/components/Podium.tsx b/app/kkuko/ranking/components/Podium.tsx
new file mode 100644
index 0000000..53eed03
--- /dev/null
+++ b/app/kkuko/ranking/components/Podium.tsx
@@ -0,0 +1,233 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { TrendingUp, User, Crown } from 'lucide-react';
+import { Card } from '@/app/components/ui/card';
+import type { RankingEntry, RankingOption, ProfileData, ItemInfo } from '@/app/types/kkuko.types';
+import ProfileAvatar from '../../shared/components/ProfileAvatar';
+import { fetchProfile, fetchItems } from '../../shared/lib/api';
+
+interface PodiumProps {
+    topThree: RankingEntry[];
+    option: RankingOption;
+}
+
+export function Podium({ topThree, option }: PodiumProps) {
+    const [profiles, setProfiles] = useState<Record<string, ProfileData>>({});
+    const [itemsData, setItemsData] = useState<ItemInfo[]>([]);
+
+    useEffect(() => {
+        if (topThree.length === 0) return;
+
+        const loadProfiles = async () => {
+            try {
+                // Fetch profiles for all top 3 users parallel
+                const validEntries = topThree.slice(0, 3);
+                
+                const profilePromises = validEntries.map(entry => 
+                    fetchProfile(entry.userInfo.id, 'id')
+                        .then(res => (res.data && res.data.status === 200) ? res.data.data : null)
+                        .catch(err => {
+                            console.error(`Failed to fetch profile for ${entry.userInfo.nickname}`, err);
+                            return null;
+                        })
+                );
+
+                const resolvedProfiles = (await Promise.all(profilePromises)).filter((p): p is ProfileData => p !== null);
+                
+                const newProfiles: Record<string, ProfileData> = {};
+                const allItemIds = new Set<string>();
+
+                resolvedProfiles.forEach(p => {
+                    if (!p || !p.user) return;
+                    newProfiles[p.user.id] = p;
+                    
+                    // Collect item IDs
+                    if (p.equipment) {
+                        p.equipment.forEach(e => {
+                            if (e.itemId) allItemIds.add(e.itemId);
+                        });
+                    }
+                });
+
+                setProfiles(newProfiles);
+
+                // Fetch items details needed for rendering avatars
+                if (allItemIds.size > 0) {
+                    const idsString = Array.from(allItemIds).join(',');
+                    const itemsResponse = await fetchItems(idsString);
+                    if (itemsResponse.data && itemsResponse.data.status === 200) {
+                        setItemsData(itemsResponse.data.data);
+                    }
+                }
+            } catch (error) {
+                console.error("Failed to load podium profiles", error);
+            }
+        };
+
+        loadProfiles();
+    }, [topThree]);
+
+    if (topThree.length === 0) return null;
+
+    // Ensure we have the entries for 1st, 2nd, 3rd
+    const first = topThree.find(e => e.rank === 1);
+    const second = topThree.find(e => e.rank === 2);
+    const third = topThree.find(e => e.rank === 3);
+
+    // Order: 2nd, 1st, 3rd
+    const orderedEntries = [second, first, third].filter(Boolean) as RankingEntry[];
+
+    const getPodiumConfig = (rank: number) => {
+        switch (rank) {
+            case 1:
+                return {
+                    height: 'h-[400px]',
+                    width: 'scale-110 z-10', // Slightly larger and in front
+                    color: 'bg-gradient-to-b from-yellow-400 to-yellow-600',
+                    border: 'border-yellow-200',
+                    textGlow: 'drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]',
+                    badge: 'bg-yellow-500 text-white shadow-yellow-900/20'
+                };
+            case 2:
+                return {
+                    height: 'h-[340px]',
+                    width: 'scale-100',
+                    color: 'bg-gradient-to-b from-gray-300 to-gray-500', 
+                    border: 'border-gray-200',
+                    textGlow: 'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]',
+                    badge: 'bg-gray-500 text-white shadow-gray-900/20'
+                };
+            case 3:
+                return {
+                    height: 'h-[280px]',
+                    width: 'scale-100',
+                    color: 'bg-gradient-to-b from-amber-600 to-amber-800', 
+                    border: 'border-amber-400',
+                    textGlow: 'drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]',
+                    badge: 'bg-amber-700 text-white shadow-amber-900/20'
+                };
+            default:
+                return {
+                    height: 'h-[200px]',
+                    width: 'scale-100',
+                    color: 'bg-slate-700',
+                    border: 'border-slate-600',
+                    textGlow: '',
+                    badge: 'bg-slate-700 text-white'
+                };
+        }
+    };
+
+    const winRate = (entry: RankingEntry) => {
+        return entry.userRecord.total > 0 
+            ? ((entry.userRecord.win / entry.userRecord.total) * 100).toFixed(1) 
+            : '0.0';
+    };
+
+    return (
+        <div className="flex items-end justify-center w-full max-w-5xl mx-auto px-4 gap-2 sm:gap-4 mb-8 pt-10">
+            {orderedEntries.map((entry) => {
+                const config = getPodiumConfig(entry.rank);
+                const isFirst = entry.rank === 1;
+                const userProfile = profiles[entry.userInfo.id];
+
+                return (
+                    <div 
+                        key={entry.rank} 
+                        className={`flex flex-col items-center flex-1 min-w-[100px] transition-all duration-500 ease-out hover:-translate-y-2 ${config.width}`}
+                    >
+                        {/* Avatar Group - Consistent Size */}
+                        <div className="relative mb-4 flex flex-col items-center">
+                            {isFirst && (
+                                <Crown className="absolute -top-10 w-10 h-10 text-yellow-500 fill-yellow-400 animate-bounce" />
+                            )}
+                            
+                            {/* Avatar Container: Square with rounded corners */}
+                            <div className={`
+                                w-32 h-32 rounded-2xl flex items-center justify-center overflow-hidden
+                                border-4 bg-white dark:bg-slate-800 shadow-xl
+                                ${entry.rank === 1 ? 'border-yellow-400 ring-4 ring-yellow-400/30' : 
+                                  entry.rank === 2 ? 'border-gray-300' : 'border-amber-600'}
+                            `}>
+                                {userProfile ? (
+                                    <div className="transform scale-[0.65] origin-center -mt-2">
+                                        <ProfileAvatar 
+                                            profileData={userProfile}
+                                            itemsData={itemsData}
+                                        />
+                                    </div>
+                                ) : (
+                                    <User className={`w-14 h-14 ${
+                                        entry.rank === 1 ? 'text-yellow-600' : 
+                                        entry.rank === 2 ? 'text-gray-500' : 'text-amber-700'
+                                    }`} />
+                                )}
+                            </div>
+
+                            <div className={`
+                                absolute -bottom-3 px-3 py-0.5 rounded-full text-xs font-bold shadow-lg
+                                ${config.badge}
+                            `}>
+                                #{entry.rank}
+                            </div>
+                        </div>
+
+                        {/* Podium Block */}
+                        <Card className={`
+                            w-full ${config.height} rounded-t-xl rounded-b-none border-t-[6px] border-x-0 border-b-0
+                            ${config.color} ${config.border} shadow-2xl relative overflow-hidden group
+                            flex flex-col items-center pt-8 pb-4
+                        `}>
+                            {/* Shine effect */}
+                            <div className="absolute top-0 right-0 -mr-8 -mt-8 w-24 h-24 bg-white opacity-10 blur-xl rounded-full pointer-events-none group-hover:scale-150 transition-transform duration-700" />
+
+                            {/* User Content */}
+                            <div className="flex flex-col items-center w-full px-3 z-10 text-white h-full">
+                                <Link 
+                                    href={`/kkuko/profile?nick=${encodeURIComponent(entry.userInfo.nickname)}`}
+                                    className={`font-bold hover:underline decoration-white/50 text-center truncate max-w-full mb-1 ${config.textGlow} ${isFirst ? 'text-2xl' : 'text-xl'}`}
+                                >
+                                    {entry.userInfo.nickname}
+                                </Link>
+                                
+                                <span className={`text-sm font-medium opacity-90 mb-6 ${config.textGlow}`}>
+                                    Lv.{entry.userInfo.level}
+                                </span>
+
+                                {/* Stats box */}
+                                <div className="bg-black/20 backdrop-blur-sm rounded-lg p-3 w-full max-w-[160px] border border-white/10 mb-4">
+                                    <div className="flex flex-col items-center gap-1">
+                                        <div className="flex items-center gap-2">
+                                            <TrendingUp className="w-5 h-5" />
+                                            <span className="font-bold text-base">
+                                                {option === 'win' 
+                                                    ? entry.userRecord.win.toLocaleString() 
+                                                    : entry.userRecord.exp.toLocaleString()}
+                                            </span>
+                                        </div>
+                                        <div className="text-xs opacity-90 font-medium">
+                                            승률 {winRate(entry)}%
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Exordial (User Status Message) */}
+                                {entry.userInfo.exordial && (
+                                    <div className="mt-auto mb-4 px-2 text-center w-full">
+                                        <div className="bg-white/10 rounded-lg p-2 backdrop-blur-sm">
+                                            <p className="text-xs italic text-white/90 line-clamp-3 font-medium break-keep">
+                                                &quot;{entry.userInfo.exordial}&quot;
+                                            </p>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </Card>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
diff --git a/app/kkuko/ranking/components/RankingCard.tsx b/app/kkuko/ranking/components/RankingCard.tsx
new file mode 100644
index 0000000..db6d6d0
--- /dev/null
+++ b/app/kkuko/ranking/components/RankingCard.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import Link from 'next/link';
+import { Trophy, TrendingUp } from 'lucide-react';
+import { Card } from '@/app/components/ui/card';
+import type { RankingEntry } from '@/app/types/kkuko.types';
+
+interface RankingCardProps {
+    entry: RankingEntry;
+    option: 'win' | 'exp';
+}
+
+export function RankingCard({ entry, option }: RankingCardProps) {
+    const { rank, userRecord, userInfo } = entry;
+
+    const getRankColor = (rank: number) => {
+        if (rank === 1) return 'text-yellow-500 dark:text-yellow-400';
+        if (rank === 2) return 'text-gray-500 dark:text-gray-400';
+        if (rank === 3) return 'text-amber-700 dark:text-amber-600';
+        return 'text-gray-600 dark:text-gray-500';
+    };
+
+    const getRankBg = (rank: number) => {
+        if (rank === 1) return 'bg-gradient-to-r from-yellow-100/50 to-yellow-200/30 dark:from-yellow-500/20 dark:to-yellow-600/10';
+        if (rank === 2) return 'bg-gradient-to-r from-gray-100/50 to-gray-200/30 dark:from-gray-400/20 dark:to-gray-500/10';
+        if (rank === 3) return 'bg-gradient-to-r from-amber-100/50 to-amber-200/30 dark:from-amber-700/20 dark:to-amber-800/10';
+        return 'bg-gradient-to-r from-gray-50/50 to-gray-100/30 dark:from-slate-800/50 dark:to-slate-900/30';
+    };
+
+    const winRate = userRecord.total > 0 
+        ? ((userRecord.win / userRecord.total) * 100).toFixed(1) 
+        : '0.0';
+
+    return (
+        <Card className={`${getRankBg(rank)} border-gray-300 dark:border-slate-700 hover:border-gray-400 dark:hover:border-slate-600 transition-all duration-300 hover:scale-[1.02]`}>
+            <div className="p-4 flex items-center gap-4">
+                {/* Rank */}
+                <div className={`flex-shrink-0 w-12 h-12 rounded-full ${getRankColor(rank)} flex items-center justify-center font-bold text-xl bg-white dark:bg-slate-900/50 border-2 border-gray-200 dark:border-slate-700`}>
+                    {rank <= 3 ? <Trophy className="w-6 h-6" /> : rank}
+                </div>
+
+                {/* User Info */}
+                <div className="flex-grow min-w-0">
+                    <Link 
+                        href={`/kkuko/profile?nick=${encodeURIComponent(userInfo.nickname)}`}
+                        className="text-lg font-bold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors block truncate"
+                    >
+                        {userInfo.nickname}
+                    </Link>
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                        Lv.{userInfo.level} • {userInfo.exordial}
+                    </div>
+                </div>
+
+                {/* Stats */}
+                <div className="flex-shrink-0 flex gap-6 text-sm">
+                    <div className="text-center">
+                        <div className="text-gray-600 dark:text-gray-400 mb-1">{option === 'win' ? '승리' : '경험치'}</div>
+                        <div className="text-gray-900 dark:text-white font-bold flex items-center gap-1">
+                            <TrendingUp className="w-4 h-4 text-green-600 dark:text-green-500" />
+                            {option === 'win' ? userRecord.win.toLocaleString() : userRecord.exp.toLocaleString()}
+                        </div>
+                    </div>
+                    <div className="text-center">
+                        <div className="text-gray-600 dark:text-gray-400 mb-1">승률</div>
+                        <div className="text-gray-900 dark:text-white font-bold">
+                            {winRate}%
+                        </div>
+                    </div>
+                    <div className="text-center">
+                        <div className="text-gray-600 dark:text-gray-400 mb-1">총 게임</div>
+                        <div className="text-gray-900 dark:text-white font-bold">
+                            {userRecord.total.toLocaleString()}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Card>
+    );
+}
diff --git a/app/kkuko/ranking/components/RankingList.tsx b/app/kkuko/ranking/components/RankingList.tsx
new file mode 100644
index 0000000..5547960
--- /dev/null
+++ b/app/kkuko/ranking/components/RankingList.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { RankingCard } from './RankingCard';
+import type { RankingEntry, RankingOption } from '@/app/types/kkuko.types';
+
+interface RankingListProps {
+    rankings: RankingEntry[];
+    option: RankingOption;
+}
+
+export function RankingList({ rankings, option }: RankingListProps) {
+    if (rankings.length === 0) {
+        return (
+            <div className="text-center py-12 text-gray-600 dark:text-gray-400">
+                <p className="text-lg">랭킹 데이터가 없습니다.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-3">
+            {rankings.map((entry) => (
+                <RankingCard 
+                    key={`${entry.userRecord.userId}-${entry.rank}`} 
+                    entry={entry} 
+                    option={option}
+                />
+            ))}
+        </div>
+    );
+}
diff --git a/app/kkuko/ranking/components/RankingPagination.tsx b/app/kkuko/ranking/components/RankingPagination.tsx
new file mode 100644
index 0000000..5ca06a0
--- /dev/null
+++ b/app/kkuko/ranking/components/RankingPagination.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@/app/components/ui/button';
+
+interface RankingPaginationProps {
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    hasNextPage: boolean;
+}
+
+export function RankingPagination({ currentPage, onPageChange, hasNextPage }: RankingPaginationProps) {
+    return (
+        <div className="flex items-center justify-center gap-4 mt-8">
+            <Button
+                variant="outline"
+                size="icon"
+                onClick={() => onPageChange(currentPage - 1)}
+                disabled={currentPage === 1}
+                className="bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-700 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700 disabled:opacity-50"
+            >
+                <ChevronLeft className="h-4 w-4" />
+            </Button>
+            
+            <div className="flex items-center gap-2">
+                <span className="text-gray-900 dark:text-white font-semibold">{currentPage}</span>
+                <span className="text-gray-600 dark:text-gray-400">페이지</span>
+            </div>
+            
+            <Button
+                variant="outline"
+                size="icon"
+                onClick={() => onPageChange(currentPage + 1)}
+                disabled={!hasNextPage}
+                className="bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-700 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-slate-700 disabled:opacity-50"
+            >
+                <ChevronRight className="h-4 w-4" />
+            </Button>
+        </div>
+    );
+}
diff --git a/app/kkuko/ranking/hooks/useKkukoRanking.ts b/app/kkuko/ranking/hooks/useKkukoRanking.ts
new file mode 100644
index 0000000..fa391d9
--- /dev/null
+++ b/app/kkuko/ranking/hooks/useKkukoRanking.ts
@@ -0,0 +1,109 @@
+import { useState, useEffect, useCallback } from 'react';
+import { rankingCache } from '../lib/cache';
+import { fetchModes as fetchModesApi, fetchRanking as fetchRankingApi } from '../../shared/lib/api';
+import type { RankingEntry, RankingOption, Mode } from '@/app/types/kkuko.types';
+
+export const useKkukoRanking = () => {
+    const [modes, setModes] = useState<Mode[]>([]);
+    const [selectedMode, setSelectedMode] = useState<string>('');
+    const [rankings, setRankings] = useState<RankingEntry[]>([]);
+    const [option, setOption] = useState<RankingOption>('win');
+    const [page, setPage] = useState(1);
+    const [loading, setLoading] = useState(false);
+    const [modesLoading, setModesLoading] = useState(true);
+    const [detailedError, setDetailedError] = useState<ErrorMessage | null>(null);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleError = useCallback((err: any, inputValue: string, location: string) => {
+        const errorMsg: ErrorMessage = {
+            ErrName: err.name || "Error",
+            ErrMessage: err.message || "Unknown error",
+            ErrStackRace: err.stack || null,
+            inputValue: inputValue,
+            location: location
+        };
+        setDetailedError(errorMsg);
+        console.error(`Failed at ${location}:`, err);
+    }, []);
+
+    const fetchModes = useCallback(async () => {
+        setModesLoading(true);
+        try {
+            const response = await fetchModesApi();
+            const modesData = response.data.data as Mode[];
+            setModes(modesData);
+            if (modesData.length > 0) {
+                setSelectedMode(modesData[0].modeId);
+            }
+        } catch (error) {
+            handleError(error, 'fetchModes', 'fetchModes');
+            setModes([]);
+        } finally {
+            setModesLoading(false);
+        }
+    }, [handleError]);
+
+    const fetchRankings = useCallback(async () => {
+        if (!selectedMode) return;
+
+        const cacheKey = { mode: selectedMode, page, option };
+        const cachedData = rankingCache.get(cacheKey);
+
+        if (cachedData) {
+            setRankings(cachedData);
+            return;
+        }
+
+        setLoading(true);
+        try {
+            const response = await fetchRankingApi(selectedMode, page, option);
+            const rankingsData = response.data.data as RankingEntry[];
+            setRankings(rankingsData);
+            rankingCache.set(cacheKey, rankingsData);
+        } catch (error) {
+            handleError(error, `mode: ${selectedMode}, page: ${page}, option: ${option}`, 'fetchRankings');
+            setRankings([]);
+        } finally {
+            setLoading(false);
+        }
+    }, [selectedMode, page, option, handleError]);
+
+    // Fetch modes on mount
+    useEffect(() => {
+        fetchModes();
+    }, [fetchModes]);
+
+    // Fetch rankings when dependencies change
+    useEffect(() => {
+        fetchRankings();
+    }, [fetchRankings]);
+
+    const handleModeChange = useCallback((modeId: string) => {
+        setSelectedMode(modeId);
+        setPage(1);
+    }, []);
+
+    const handleOptionChange = useCallback((value: string) => {
+        setOption(value as RankingOption);
+        setPage(1);
+    }, []);
+
+    const handlePageChange = useCallback((newPage: number) => {
+        setPage(newPage);
+    }, []);
+
+    return {
+        modes,
+        selectedMode,
+        rankings,
+        option,
+        page,
+        loading,
+        modesLoading,
+        detailedError,
+        setDetailedError,
+        handleModeChange,
+        handleOptionChange,
+        handlePageChange
+    };
+};
\ No newline at end of file
diff --git a/app/kkuko/ranking/lib/cache.ts b/app/kkuko/ranking/lib/cache.ts
new file mode 100644
index 0000000..138e0b9
--- /dev/null
+++ b/app/kkuko/ranking/lib/cache.ts
@@ -0,0 +1,69 @@
+import type { RankingEntry } from '@/app/types/kkuko.types';
+
+interface CacheEntry {
+    data: RankingEntry[];
+    timestamp: number;
+}
+
+interface CacheKey {
+    mode: string;
+    page: number;
+    option: 'win' | 'exp';
+}
+
+class RankingCache {
+    private cache: Map<string, CacheEntry> = new Map();
+    private readonly TTL = 5 * 60 * 1000; // 5 minutes
+
+    private getCacheKey(key: CacheKey): string {
+        return `${key.mode}-${key.page}-${key.option}`;
+    }
+
+    get(key: CacheKey): RankingEntry[] | null {
+        const cacheKey = this.getCacheKey(key);
+        const entry = this.cache.get(cacheKey);
+
+        if (!entry) {
+            return null;
+        }
+
+        const now = Date.now();
+        if (now - entry.timestamp > this.TTL) {
+            this.cache.delete(cacheKey);
+            return null;
+        }
+
+        return entry.data;
+    }
+
+    set(key: CacheKey, data: RankingEntry[]): void {
+        const cacheKey = this.getCacheKey(key);
+        this.cache.set(cacheKey, {
+            data,
+            timestamp: Date.now(),
+        });
+    }
+
+    clear(): void {
+        this.cache.clear();
+    }
+
+    // Clean up expired entries periodically
+    cleanup(): void {
+        const now = Date.now();
+        for (const [key, entry] of this.cache.entries()) {
+            if (now - entry.timestamp > this.TTL) {
+                this.cache.delete(key);
+            }
+        }
+    }
+}
+
+export const rankingCache = new RankingCache();
+
+// Clean up expired cache entries every minute
+if (typeof window !== 'undefined') {
+    setInterval(() => {
+        rankingCache.cleanup();
+    }, 60 * 1000);
+}
diff --git a/app/kkuko/ranking/page.tsx b/app/kkuko/ranking/page.tsx
new file mode 100644
index 0000000..040f923
--- /dev/null
+++ b/app/kkuko/ranking/page.tsx
@@ -0,0 +1,20 @@
+import KkukoRaking from "./KkukoRaking";
+
+export async function generateMetadata() {
+	return {
+		title: "끄코 유틸리티 - 끄코 랭킹",
+		description: '끄코 유틸리티 - 끄코 랭킹',
+		openGraph: {
+			title: "끄코 유틸리티 - 끄코 랭킹",
+			description: "끄코 유틸리티 - 끄코 랭킹",
+			type: "website",
+			url: "https://kkuko-utils.vercel.app/kkuko/ranking",
+			siteName: "끄코 유틸리티",
+			locale: "ko_KR",
+		},
+	};
+}
+
+export default function KkukoRakingPage() {
+    return <KkukoRaking />;
+}
\ No newline at end of file
diff --git a/app/kkuko/shared/components/ProfileAvatar.tsx b/app/kkuko/shared/components/ProfileAvatar.tsx
new file mode 100644
index 0000000..da7c010
--- /dev/null
+++ b/app/kkuko/shared/components/ProfileAvatar.tsx
@@ -0,0 +1,120 @@
+import React, { useMemo, useState } from 'react';
+import { ItemInfo, ProfileData } from '@/types/kkuko.types';
+import TryRenderImg from './TryRenderImg';
+
+interface ProfileAvatarProps {
+    profileData: ProfileData;
+    itemsData: ItemInfo[];
+}
+
+export default function ProfileAvatar({ profileData, itemsData }: ProfileAvatarProps) {
+    const [imgLoadedCount, setImgLoadedCount] = useState(0);
+
+    const characterLayers = useMemo(() => {
+        if (!profileData) return [];
+
+        const layerOrder = ['back', 'avatar', 'eye', 'mouth', 'facedeco', 'eyedeco', 'shoes', 'clothes', 'dressdeco', 'head', 'hairdeco', 'hand', 'front', 'badge'];
+        
+        // Group items by their slot for proper identification
+        const itemsBySlot: Record<string, ItemInfo> = {};
+        const currentItems = itemsData || [];
+
+        profileData.equipment.forEach(equipment => {
+            if (equipment.slot === 'NIK') return;
+            const item = currentItems.find(i => i.id === equipment.itemId);
+            if (!item) return;
+            if (equipment.slot === 'BDG') itemsBySlot['badge'] = item;
+            else itemsBySlot[equipment.slot] = item;
+        });
+
+        // Render layers in order
+        const layers: { key: string; url: string; alt: string; className?: string }[] = [];
+        
+        layerOrder.forEach((group, index) => {
+            // Check for left hand and right hand separately if group is 'hand'
+            if (group === 'hand') {
+                // Render left hand (Mlhand)
+                const leftHandItem = itemsBySlot['Mlhand'];
+                if (leftHandItem) {
+                    const imageName = leftHandItem.id;
+                    const imageUrl = `/api/kkuko/image?url=https://cdn.kkutu.co.kr/img/kkutu/moremi/hand/${imageName}.png`;
+                    
+                    layers.push({
+                        key: `hand-left-${index}`,
+                        url: imageUrl,
+                        alt: "left hand layer",
+                        className: "transition-opacity duration-300"
+                    });
+                }
+                
+                // Render right hand (Mrhand)
+                const rightHandItem = itemsBySlot['Mrhand'];
+                if (rightHandItem) {
+                    const imageName = rightHandItem.id;
+                    const imageUrl = `/api/kkuko/image?url=https://cdn.kkutu.co.kr/img/kkutu/moremi/hand/${imageName}.png`;
+                    
+                    layers.push({
+                        key: `hand-right-${index}`,
+                        url: imageUrl,
+                        alt: "right hand layer",
+                        className: "transition-opacity duration-300 scale-x-[-1]"
+                    });
+                }
+            } else {
+                // For other groups, check with M prefix
+                const slotKey = `M${group}`;
+                const item = itemsBySlot[slotKey] || itemsBySlot[group];
+                
+                if (item) {
+                    const imageName = item.name === 'def' ? 'def' : item.id;
+                    const imageUrl = `/api/kkuko/image?url=https://cdn.kkutu.co.kr/img/kkutu/moremi/${group}/${imageName}.png`;
+
+                    layers.push({
+                        key: `${group}-${index}`,
+                        url: imageUrl,
+                        alt: `${group} layer`,
+                        className: "transition-opacity duration-300"
+                    });
+                } else if (group !== 'badge' && item === undefined) {
+                    const itemId = 'def';
+                    const imageUrl = `/api/kkuko/image?url=https://cdn.kkutu.co.kr/img/kkutu/moremi/${group}/${itemId}.png`;
+                    layers.push({
+                        key: `${group}-${index}`,
+                        url: imageUrl,
+                        alt: `${group} default layer`,
+                        className: "transition-opacity duration-300"
+                    });
+                }
+            }
+        });
+        
+        return layers;
+    }, [profileData, itemsData]);
+
+    return (
+        <div className="relative w-48 h-48 bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden">
+            {imgLoadedCount < characterLayers.length && (
+                <div className="absolute inset-0 z-20 flex items-center justify-center bg-gray-100 dark:bg-gray-700">
+                    <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+                </div>
+            )}
+            {characterLayers.map((layer) => (
+                <div
+                    key={layer.key}
+                    className="absolute inset-0 flex items-center justify-center"
+                >
+                    <TryRenderImg
+                        placeholder={<div className="w-48 h-48" />}
+                        url={layer.url}
+                        alt={layer.alt}
+                        width={192}
+                        height={192}
+                        className={layer.className}
+                        hanldeLoad={() => setImgLoadedCount(prev => prev + 1)}
+                        onFailure={() => setImgLoadedCount(prev => prev + 1)}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+}
diff --git a/app/kkuko/shared/components/TryRenderImg.tsx b/app/kkuko/shared/components/TryRenderImg.tsx
new file mode 100644
index 0000000..ad3f5bf
--- /dev/null
+++ b/app/kkuko/shared/components/TryRenderImg.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+
+type Props = {
+	placeholder?: React.ReactNode;
+	url: string;
+	alt?: string;
+	width?: number;
+	height?: number;
+	className?: string;
+	maxRetries?: number;
+	hanldeLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+	onFailure?: () => void;
+};
+
+export default function TryRenderImg({
+	placeholder = null,
+	url,
+	alt = "",
+	width,
+	height,
+	className,
+	hanldeLoad,
+	onFailure,
+	maxRetries = 3,
+}: Props) {
+	const [attempt, setAttempt] = useState(0);
+	const [failed, setFailed] = useState(false);
+	const [src, setSrc] = useState(url);
+
+	useEffect(() => {
+		setSrc(url);
+		setAttempt(0);
+		setFailed(false);
+	}, [url]);
+
+	const handleError = () => {
+		if (attempt < maxRetries) {
+			const next = attempt + 1;
+			setAttempt(next);
+			const separator = url.includes("?") ? "&" : "?";
+			setSrc(`${url}${separator}r=${next}&ts=${Date.now()}`);
+		} else {
+			setFailed(true);
+			onFailure?.();
+		}
+	};
+
+	const onLoad = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+		if (failed) setFailed(false);
+		hanldeLoad?.(e);
+	};
+
+	if (failed) return <>{placeholder ?? null}</>;
+
+	return (
+		<>
+			{width && height ? (
+				<Image
+					src={src}
+					alt={alt}
+					width={width}
+					height={height}
+					className={className}
+					onError={handleError}
+					onLoad={onLoad}
+				/>
+			) : (
+				<div style={{ position: "relative" }} className={className}>
+					<Image
+						src={src}
+						alt={alt}
+						fill
+						sizes="100vw"
+						style={{ objectFit: "cover" }}
+						onError={handleError}
+						onLoad={onLoad}
+					/>
+				</div>
+			)}
+		</>
+	);
+}
+
diff --git a/app/kkuko/shared/lib/api.ts b/app/kkuko/shared/lib/api.ts
new file mode 100644
index 0000000..5b65c88
--- /dev/null
+++ b/app/kkuko/shared/lib/api.ts
@@ -0,0 +1,54 @@
+import axios from "axios";
+import axiosRetry from "axios-retry";
+
+axiosRetry(axios, {
+    retries: 5,
+    retryCondition: (error) => {
+        return axiosRetry.isNetworkOrIdempotentRequestError(error) || error.response?.status === 500;
+    },
+    retryDelay: (retryCount) => {
+        return axiosRetry.exponentialDelay(retryCount);
+    }
+});
+
+const client = axios.create({
+    baseURL: 'https://api.solidloop-studio.xyz/api/v1',
+    timeout: 5000,
+});
+
+export async function fetchModes() {
+    return await client.get('/mode')
+}
+
+export async function fetchTotalUsers() {
+    return await client.get('/profile/total');
+}
+
+export async function fetchProfile(query: string, type: 'nick' | 'id') {
+    return await client.get(`/profile/${encodeURIComponent(query)}`, {
+        params: { type }
+    })
+}
+
+export async function fetchItems(itemsIds: string) {
+    return await client.get(`/item?query=${encodeURIComponent(itemsIds)}`);
+}
+
+export async function fetchExpRank(userId: string) {
+    return await axios.get<{rank: number, id: string}>('/api/kkuko/api/ranking', {
+        params: { id: userId }
+    });
+}
+
+export async function fetchRanking(
+    mode: string, 
+    page: number = 1, 
+    option: 'win' | 'exp' = 'win'
+) {
+    return await client.get(`/ranking/${mode}`, {
+        params: {
+            page,
+            option
+        }
+    });
+}
\ No newline at end of file
diff --git a/app/kkuko/shared/lib/const.ts b/app/kkuko/shared/lib/const.ts
new file mode 100644
index 0000000..1c8657e
--- /dev/null
+++ b/app/kkuko/shared/lib/const.ts
@@ -0,0 +1,42 @@
+// Nickname color mapping
+export const NICKNAME_COLORS: Record<string, string> = {
+    red: '#FF3333',
+    orange: '#FFA533',
+    green: '#43C227',
+    blue: '#2F77D9',
+    indigo: '#1C18B9',
+    purple: '#A939CC',
+    pink: '#F15F9A',
+    gray: '#616161',
+    mint: '#33AF8E',
+    wine: '#971145',
+    cyangreen: '#1D5740',
+    brown: '#613B3B',
+};
+
+// Option name mapping
+export const OPTION_NAMES: Record<string, string> = {
+    gEXP: '획득 경험치',
+    hEXP: '분당 추가 경험치',
+    gMNY: '획득 핑',
+    hMNY: '분당 추가 핑'
+};
+
+export const SLOT_NAMES: Record<string, string> = {
+    NIK: '닉네임',
+    BDG: '배경/휘장',
+    Meyedeco: '눈장식',
+    Mhairdeco: '머리장식',
+    Mlhand: '왼손',
+    Mrhand: '오른손',
+    Mavatar: '아바타',
+    Mshoes: '발',
+    Mdressdeco: '옷장식',
+    Mback: '배경',
+    Mhead: '머리',
+    Mfacedeco: '얼굴장식',
+    Mmouth: '입',
+    Mclothes: '옷',
+    Meye: '눈',
+    pbdg: '배지'
+};
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index ba152fb..658921a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,6 +8,7 @@ import { Providers } from "./providers";
 import AutoLogin from "./AutoLogin";
 import NoticeProvider from "./components/NoticeProvider";
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import { Analytics } from "@vercel/analytics/next"
 
 
 const geistSans = Geist({
@@ -89,6 +90,7 @@ export default function RootLayout({
 				</Providers>
 				<Footer />
 				{process.env.NODE_ENV === "production" && <SpeedInsights />}
+				{process.env.NODE_ENV === "production" && <Analytics />}
 			</body>
 		</html>
 	);
diff --git a/app/lib/CombinationsManger.ts b/app/lib/CombinationsManger.ts
index 3f0949f..a820158 100644
--- a/app/lib/CombinationsManger.ts
+++ b/app/lib/CombinationsManger.ts
@@ -145,7 +145,7 @@ class CombinationManager {
     }
 
     /**
-     * 단어 사전의 단어들의 글자 출현 횟수 countting 함수 (나중에 단어들의 점수로 활용됨)
+     * 단어 사전의 단어들의 글자 출현 횟수 counting 함수 (나중에 단어들의 점수로 활용됨)
      */
     private countLetter() {
         this.letterCount = {};              // letterCount 초기화
@@ -158,7 +158,7 @@ class CombinationManager {
     }
 
     /**
-     * 사용가능한 음절들을 countting하는 함수(음절 문자열에서 replace하는것 보다 효율적일듯)
+     * 사용가능한 음절들을 counting하는 함수(음절 문자열에서 replace하는것 보다 효율적일듯)
      */
     private countSyllable() {
         this.syllableCount = {};
@@ -190,7 +190,7 @@ class CombinationManager {
      * 남아 있는 음절들을 정렬하여 반환하는 함수
      * @returns {string} 정렬된 음절 문자열
      */
-    public remainstr(): string {
+    public remainStr(): string {
         const result = [];
         for (const [syllable, count] of Object.entries(this.syllableCount)) {
             if (count > 0) {
diff --git a/app/lib/DuemLaw.ts b/app/lib/DuemLaw.ts
deleted file mode 100644
index 575d8dc..0000000
--- a/app/lib/DuemLaw.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { disassemble, assemble } from 'es-hangul';
-
-const ch_list1 = ['ㅏ','ㅐ','ㅗ','ㅚ','ㅜ','ㅡ'] //두음 1
-const ch_list2 = ['ㅑ','ㅕ','ㅖ','ㅛ','ㅠ','ㅣ'] //두음 2
-const ch_list3 = ['ㅕ','ㅛ','ㅠ','ㅣ'] //두음 3
-
-/**
- * 두음법칙 함수
- * 
- * @param c - 한글자 단어
- * @returns - 두음법칙 적용된 글자
- * @throws - 한글자가 아닌 경우 에러 발생
- */
-export default function DuemLaw(c:string): string {
-    if (c.length !== 1) {
-        throw new Error('한글자만 입력해주세요');
-    }
-    
-    const jamos_list = disassemble(c).split('');
-    if (jamos_list.length < 2) return c;
-    if (ch_list1.includes(assemble([jamos_list[1],jamos_list[2]])[0]) && jamos_list[0] == 'ㄹ'){
-        jamos_list[0] = 'ㄴ'
-    }
-    else if ((ch_list2.includes(assemble([jamos_list[1],jamos_list[2]])[0]) && jamos_list[0] == 'ㄹ') || (ch_list3.includes(assemble([jamos_list[1],jamos_list[2]])[0]) && jamos_list[0] == 'ㄴ')) {
-        jamos_list[0] = 'ㅇ'
-    } 
-    return assemble(jamos_list);
-}
-
-export function reverDuemLaw(c: string): string[]{
-    if (c.length !== 1) {
-        throw new Error('한글자만 입력해주세요');
-    }
-    const jamos_list = disassemble(c).split('');
-    const reversDuemLetter: string[] = [c];
-    if (jamos_list.length < 2) return reversDuemLetter;
-
-    if (jamos_list[0] == 'ㄴ' && ch_list1.includes(jamos_list[1])){
-        jamos_list[0] = 'ㄹ'
-        const i_letter = assemble(jamos_list)
-        reversDuemLetter.push(i_letter)
-        jamos_list[0] = 'ㄴ'
-    }
-    if (jamos_list[0] == 'ㅇ' && ch_list2.includes(jamos_list[1])){
-        jamos_list[0] = 'ㄹ'
-        const i_letter = assemble(jamos_list)
-        reversDuemLetter.push(i_letter)
-        jamos_list[0] = 'ㅇ'
-    }
-    if (jamos_list[0] == 'ㅇ' && ch_list3.includes(jamos_list[1])){
-        jamos_list[0] = 'ㄴ'
-        const i_letter = assemble(jamos_list)
-        reversDuemLetter.push(i_letter)
-        jamos_list[0] = 'ㅇ'
-    }
-
-    return reversDuemLetter
-
-}
\ No newline at end of file
diff --git a/app/lib/hangulUtils.ts b/app/lib/hangulUtils.ts
new file mode 100644
index 0000000..b251ae7
--- /dev/null
+++ b/app/lib/hangulUtils.ts
@@ -0,0 +1,96 @@
+import { disassemble, assemble } from 'es-hangul';
+
+const DUEM_LIST_1 = ['ㅏ','ㅐ','ㅗ','ㅚ','ㅜ','ㅡ'] //두음 1
+const DUEM_LIST_2 = ['ㅑ','ㅕ','ㅖ','ㅛ','ㅠ','ㅣ'] //두음 2
+const DUEM_LIST_3 = ['ㅕ','ㅛ','ㅠ','ㅣ'] //두음 3
+
+/**
+ * 두음법칙 함수
+ * 
+ * @param c - 한글자 단어
+ * @param ignoreError - 에러 무시 여부
+ * @returns - 두음법칙 적용된 글자
+ * @throws - 한글자가 아닌 경우 에러 발생
+ */
+export function duemLaw(c:string, ignoreError?: boolean): string {
+    if (c.length !== 1) {
+        if (ignoreError) {
+            return c;
+        }
+        throw new Error('한글자만 입력해주세요');
+    }
+    
+    const jamos_list = disassemble(c).split('');
+    if (jamos_list.length < 2) return c;
+    if (DUEM_LIST_1.includes(assemble([jamos_list[1],jamos_list[2]])[0]) && jamos_list[0] == 'ㄹ'){
+        jamos_list[0] = 'ㄴ'
+    }
+    else if ((DUEM_LIST_2.includes(assemble([jamos_list[1],jamos_list[2]])[0]) && jamos_list[0] == 'ㄹ') || (DUEM_LIST_3.includes(assemble([jamos_list[1],jamos_list[2]])[0]) && jamos_list[0] == 'ㄴ')) {
+        jamos_list[0] = 'ㅇ'
+    } 
+    return assemble(jamos_list);
+}
+
+
+/**
+ * 두음법칙 역함수
+ * 
+ * @param c - 한글자 단어
+ * @param ignoreError - 에러 무시 여부
+ * @returns - 두음법칙이 적용될 수 있는 글자 배열
+ * @throws - 한글자가 아닌 경우 에러 발생
+ */
+export function reverDuemLaw(c: string, ignoreError?: boolean): string[]{
+    if (c.length !== 1) {
+        if (ignoreError) {
+            return [c];
+        }
+        throw new Error('한글자만 입력해주세요');
+    }
+
+    const jamos_list = disassemble(c).split('');
+    const reversDuemLetter: string[] = [c];
+    if (jamos_list.length < 2) return reversDuemLetter;
+
+    if (jamos_list[0] == 'ㄴ' && DUEM_LIST_1.includes(jamos_list[1])){
+        jamos_list[0] = 'ㄹ'
+        const i_letter = assemble(jamos_list)
+        reversDuemLetter.push(i_letter)
+        jamos_list[0] = 'ㄴ'
+    }
+    if (jamos_list[0] == 'ㅇ' && DUEM_LIST_2.includes(jamos_list[1])){
+        jamos_list[0] = 'ㄹ'
+        const i_letter = assemble(jamos_list)
+        reversDuemLetter.push(i_letter)
+        jamos_list[0] = 'ㅇ'
+    }
+    if (jamos_list[0] == 'ㅇ' && DUEM_LIST_3.includes(jamos_list[1])){
+        jamos_list[0] = 'ㄴ'
+        const i_letter = assemble(jamos_list)
+        reversDuemLetter.push(i_letter)
+        jamos_list[0] = 'ㅇ'
+    }
+
+    return reversDuemLetter
+
+}
+
+/**
+ * 한글인지 확인합니다.
+ * 
+ * @param s - 확인할 문자열
+ * @returns 한글 여부
+ */
+export function isHangul(s: string): boolean {
+    const hangulRegex = /^[ㄱ-ㅎ가-힣]+$/;
+    return hangulRegex.test(s);
+}
+
+export const normalizeHangul = (text: string) => disassemble(text).toLowerCase();
+
+/**
+ * @deprecated Use deumLaw instead of dl
+ */
+export default function dl(c: string, ignoreError?: boolean): string {
+    return duemLaw(c, ignoreError);
+}
\ No newline at end of file
diff --git a/app/lib/lib.ts b/app/lib/lib.ts
index fe884a2..74f42d3 100644
--- a/app/lib/lib.ts
+++ b/app/lib/lib.ts
@@ -30,4 +30,21 @@ export function calculateKoreanInitials(word: string): string{
  */
 export function count(a: string, target: string): number{
     return (a.match(new RegExp(target, "gi")) || []).length
+}
+
+/**
+ * 미션 문자 마스크 생성 함수
+ * 
+ * @param chars 문자 배열
+ * @returns 미션 문자 마스크
+ */
+export function misssionCharMask(chars: string[]): number {
+    let base = 0;
+    const missionChars = ['가','나','다','라','마','바','사','아','자','차','카','타','파','하'];
+    for (const c of chars) {
+        if (missionChars.includes(c)) {
+            base = base | (1 << missionChars.indexOf(c));
+        }
+    }
+    return base;
 }
\ No newline at end of file
diff --git a/app/lib/supabase/ISupabaseClientManager.ts b/app/lib/supabase/ISupabaseClientManager.ts
index 57f10cc..96a3364 100644
--- a/app/lib/supabase/ISupabaseClientManager.ts
+++ b/app/lib/supabase/ISupabaseClientManager.ts
@@ -18,6 +18,7 @@ type wait_word_themes = Database['public']['Tables']['wait_word_themes']['Row'];
 type notification = Database['public']['Tables']['notification']['Row'];
 type word_first_letter_counts = Database['public']['Tables']['word_first_letter_counts']['Row'];
 type word_last_letter_counts = Database['public']['Tables']['word_last_letter_counts']['Row'];
+type okWord = Omit<word, 'mission_mark'> & { mission_mark?: number; };
 
 type delete_word_themes_bulk = Database['public']['Functions']['delete_word_themes_bulk']['Returns'];
 
@@ -55,7 +56,7 @@ export interface IGetManager{
     docsStarCount(id: number): Promise<{ data: number; error: PostgrestError | null;}>
     docsLogs(id:number): Promise<PostgrestSingleResponse<(docs_log & {users: user | null})[]>>
     docsStar(id: number): Promise<PostgrestSingleResponse<{user_id: string;}[]>>;
-    docsWords({ name, duem, typez }: { name: string; duem: boolean; typez: "letter" | "theme";} | {name: number; duem: boolean; typez: "ect";}): Promise<{data: null, error: PostgrestError} | {data: {words: word[], waitWords: ({ word: string; request_type: "add" | "delete"; requested_by: string | null; })[]}, error: null}>
+    docsWords({ name, duem, typez }: { name: string; duem: boolean; typez: "letter" | "theme";} | {name: number; duem: boolean; typez: "ect";}): Promise<{data: null, error: PostgrestError} | {data: {words: okWord[], waitWords: ({ word: string; request_type: "add" | "delete"; requested_by: string | null; })[]}, error: null}>
     allWaitWords(c?:"add" | "delete"): Promise<PostgrestSingleResponse<(wait_word & {words: word | null; users: user | null})[]>>;
     wordsThemes(wordIds: number[]): Promise<PostgrestSingleResponse<{ theme_id: number; word_id: number; words: word; themes: theme}[]>>
     allWords({ includeAddReq, includeDeleteReq, includeInjung, includeNoInjung, onlyWordChain, lenf }: { includeAddReq?: boolean; includeDeleteReq?: boolean; includeInjung?: boolean; includeNoInjung?: boolean; onlyWordChain?: boolean; lenf?: boolean; }): Promise<{ data: { word: string; noin_canuse: boolean; k_canuse: boolean; status: "ok" | "add" | "delete"; }[]; error: null } | {data: null; error: PostgrestError; }>
@@ -66,7 +67,7 @@ export interface IGetManager{
     session(): Promise<{data: {session: Session}, error: null} | {data: { session: null}, error: AuthError} | { data: {session: null}, error: null}>;
     usersByNickname(userName: string): Promise<PostgrestSingleResponse<user[]>>;
     usersLikeByNickname(q: string): Promise<PostgrestSingleResponse<user[]>>;
-    userByNickname(nicknmae: string): Promise<PostgrestSingleResponse<user | null>>;
+    userByNickname(nickname: string): Promise<PostgrestSingleResponse<user | null>>;
     monthlyConRankByUserId(userId: string): Promise<PostgrestSingleResponse<number>>;
     monthlyContributionsByUserId(userId: string): Promise<PostgrestSingleResponse<Database['public']['Tables']['user_month_contributions']['Row'][]>>
     starredDocsById(userId: string): Promise<PostgrestSingleResponse<(user_star_docs & {docs: docs})[]>>;
@@ -76,7 +77,7 @@ export interface IGetManager{
     waitWordsCount(): Promise<{count: number | null; error: PostgrestError | null}>;
     allWordWaitTheme(c?: "add" | "delete"): Promise<PostgrestSingleResponse<(word_themes_wait & {words: {word: string, id: number}; themes: theme; users: user | null})[]>>
     waitWordsThemes(waitWordIds: number[]): Promise<PostgrestSingleResponse<(wait_word_themes & {themes: theme, wait_words:{word: string}})[]>>;
-    wordsByWords(words: string[]): Promise<PostgrestSingleResponse<(word&{wthemes: number[]})[]>>;
+    wordsByWords(words: string[]): Promise<PostgrestSingleResponse<(okWord&{wthemes: number[]})[]>>;
     randomWordByFirstLetter(f: string[]): Promise<{data: string, error: null}|{data: null, error: PostgrestError}|{data: null, error: null}>;
     randomWordByLastLetter(l: string[]): Promise<{data: string, error: null}|{data: null, error: PostgrestError}|{data: null, error: null}>;
     wordThemeWaitByWordId(wordId: number): Promise<PostgrestSingleResponse<{themes: theme, typez: "add" | "delete"}[]>>;
@@ -85,7 +86,7 @@ export interface IGetManager{
     firstWordCountByLetters(letter: string): Promise<number>;
     lastWordCountByLetters(letter: string): Promise<number>;
     wordsByQuery(query: string): Promise<{data: string[], error: null} | {data: null; error: PostgrestError}>;
-    logsByFillter({filterState, filterType, from, to}:{filterState?: "approved" | "rejected" | "pending" | "all", filterType: "delete" | "add" | "all", from: number, to: number}): Promise<PostgrestSingleResponse<(log & {make_by_user: { nickname: string; } | null; processed_by_user: { nickname: string | null } | null;})[]>>
+    logsByFilter({filterState, filterType, from, to}:{filterState?: "approved" | "rejected" | "pending" | "all", filterType: "delete" | "add" | "all", from: number, to: number}): Promise<PostgrestSingleResponse<(log & {make_by_user: { nickname: string; } | null; processed_by_user: { nickname: string | null } | null;})[]>>
     docsLogsByFilter({ docsName, logType, from, to }: { docsName?: string; logType: 'add' | 'delete' | 'all'; from: number; to: number; }): Promise<PostgrestSingleResponse<(docs_log & { docs: docs; users: { nickname: string } | null })[]>>;
     notice(): Promise<PostgrestSingleResponse<notification | null>>;
     wordsThemesByWordId(wordIds: number[]): Promise<PostgrestSingleResponse<{word_id: number, themes: theme}[]>>;
@@ -93,6 +94,7 @@ export interface IGetManager{
     letterCountInfo(): Promise<{data: {firstLetterCounts: Record<string, {count: number; k_count: number; n_count: number}>; lastLetterCounts: Record<string, {count: number; k_count: number; n_count: number}>;}, error: null}|{data: null; error: PostgrestError}>;
     wordsByAdvancedQuery(input: advancedQueryType): Promise<{data: {word: string, nextWordCount: number}[], error: null} | {data: null; error: PostgrestError}>;
     wordState(): Promise<{data: {firstLetterCounts: word_first_letter_counts[]; lastLetterCounts: word_last_letter_counts[];}, error: null}|{data: null; error: PostgrestError}>;
+    docsLastUpdate(id: number): Promise<PostgrestSingleResponse<{last_update: string;} | null>>
 }
 
 // delete 관련 타입
@@ -131,4 +133,5 @@ export interface ISupabaseClientManager {
     loginByGoogle(originUrl: string): Promise<OAuthResponse>;
     onAuthStateChange(func: (session: Session | null) => Promise<void>): {data: {subscription: Subscription}}
     logout(): Promise<void>;
+    getJWT(): Promise<string | null>;
 }
diff --git a/app/lib/supabase/SupabaseClientManager.ts b/app/lib/supabase/SupabaseClientManager.ts
index 480e82d..429ad22 100644
--- a/app/lib/supabase/SupabaseClientManager.ts
+++ b/app/lib/supabase/SupabaseClientManager.ts
@@ -2,9 +2,10 @@ import { ISupabaseClientManager, IAddManager, IGetManager, IDeleteManager, IUpda
 import type { PostgrestError, PostgrestSingleResponse, Session, SupabaseClient } from '@supabase/supabase-js';
 import type { Database } from '@/app/types/database.types';
 import type { addWordQueryType, addWordThemeQueryType, DocsLogData, WordLogData, advancedQueryType } from '@/app/types/type';
-import DuemLaw, { reverDuemLaw } from '../DuemLaw';
+import DuemLaw, { reverDuemLaw } from '../hangulUtils';
 import { sum } from 'es-toolkit';
 import { StorageError } from '@supabase/storage-js';
+import { misssionCharMask } from '../lib';
 
 const CACHE_DURATION = 10 * 60 * 1000;
 
@@ -43,40 +44,40 @@ class AddManager implements IAddManager {
     public async waitWordThemes(insertWaitWordThemeData: { wait_word_id: number, theme_id: number }[]) {
         return await this.supabase.from('wait_word_themes').insert(insertWaitWordThemeData);
     }
-    public async waitDocs({docsName, userId}: {docsName: string, userId: string|undefined}) {
+    public async waitDocs({ docsName, userId }: { docsName: string, userId: string | undefined }) {
         return await this.supabase.from('docs_wait').insert({
             docs_name: docsName,
             req_by: userId ?? null,
         })
     }
-    public async docs(docsInserQuery:{ name: string, maker: string | null, duem: boolean, typez: "letter" }[]) {
+    public async docs(docsInserQuery: { name: string, maker: string | null, duem: boolean, typez: "letter" }[]) {
         return await this.supabase.from('docs').insert(docsInserQuery);
     }
-    public async nickname(userId: string, nick: string){
-        return this.supabase.from("users").insert({ id: userId, nickname: nick.trim()}).select("*").single();
+    public async nickname(userId: string, nick: string) {
+        return this.supabase.from("users").insert({ id: userId, nickname: nick.trim() }).select("*").single();
     }
-    public async words(q:addWordQueryType[]){
+    public async words(q: addWordQueryType[]) {
         return this.supabase.from('words').upsert(q, { ignoreDuplicates: true, onConflict: "word" }).select('*');
     }
-    public async wordsThemes(q: addWordThemeQueryType[]){
+    public async wordsThemes(q: addWordThemeQueryType[]) {
         return await this.supabase.from('word_themes').upsert(q, { ignoreDuplicates: true, onConflict: "word_id,theme_id" }).select('words(word),themes(name)')
     }
     public async wordThemesReq(q: { word_id: number; theme_id: number; typez: 'add' | 'delete'; req_by: string | null; }[]) {
         return await this.supabase.from('word_themes_wait').upsert(q, { onConflict: "word_id,theme_id", ignoreDuplicates: true }).select('themes(name), typez');
     }
     public async waitWords(q: { word: string; requested_by: string | null; request_type: 'add'; }[]) {
-        return this.supabase.from('wait_words').upsert(q,{ onConflict: "word", ignoreDuplicates: true }).select('*');
+        return this.supabase.from('wait_words').upsert(q, { onConflict: "word", ignoreDuplicates: true }).select('*');
     }
     public async notification(data: { title: string; body: string; img?: string | null; end_at: string }) {
         return await this.supabase.from('notification').insert(data).select('*').single();
     }
-    
+
 }
 
 class GetManager implements IGetManager {
     constructor(private readonly supabase: SupabaseClient<Database>) { }
 
-    private wordsCache: Record<string,{data: {word: string, noin_canuse: boolean, k_canuse: boolean, status: "ok" | "add" | "delete"}[], time: number}> = {};
+    private wordsCache: Record<string, { data: { word: string, noin_canuse: boolean, k_canuse: boolean, status: "ok" | "add" | "delete" }[], time: number }> = {};
     private wordFirstLetterCountsCache: Record<string, {
         count: number;
         k_count: number;
@@ -84,7 +85,7 @@ class GetManager implements IGetManager {
         len3_k_count: number;
         len3_n_count: number;
     }> = {};
-    private wordLastLetterCountsCache: Record<string,{count: number, k_count: number, n_count: number}> = {};
+    private wordLastLetterCountsCache: Record<string, { count: number, k_count: number, n_count: number }> = {};
     private wordLetterCountsCacheTime: number = 0;
 
     public async waitWordInfoByWord(word: string) {
@@ -98,7 +99,7 @@ class GetManager implements IGetManager {
     }
     public async allDocs() {
         let q = this.supabase.from('docs').select('*, users(*)');
-        if (process.env.NODE_ENV === 'production'){
+        if (process.env.NODE_ENV === 'production') {
             q = q.eq('is_hidden', false);
         }
         return await q;
@@ -109,7 +110,7 @@ class GetManager implements IGetManager {
     public async docsInfoByDocsId(docsId: number) {
         return await this.supabase.from('docs').select('*,users(*)').eq('id', docsId).maybeSingle();
     }
-    public async docsWordCount({ name, duem, typez }: { name: string, duem: boolean, typez: "letter" | "theme" }|{name:number, duem:boolean, typez:"ect"}) {
+    public async docsWordCount({ name, duem, typez }: { name: string, duem: boolean, typez: "letter" | "theme" } | { name: number, duem: boolean, typez: "ect" }) {
         if (typez === "letter") {
             if (duem) {
                 const { data, error } = await this.supabase.from('word_last_letter_counts').select('count').in('last_letter', reverDuemLaw(name[0]));
@@ -158,7 +159,7 @@ class GetManager implements IGetManager {
     public async docsWords({ name, duem, typez }: { name: string, duem: boolean, typez: "letter" | "theme" } | { name: number, duem: boolean, typez: "ect" }) {
         if (typez === "letter") {
             if (duem) {
-                const { data: wordsData, error: wordsError } = await this.supabase.from('words').select('*').in('last_letter', [...new Set([...reverDuemLaw(name[0]), DuemLaw(name[0])])]).eq('k_canuse', true).neq('length', 1); 
+                const { data: wordsData, error: wordsError } = await this.supabase.from('words').select('*').in('last_letter', [...new Set([...reverDuemLaw(name[0]), DuemLaw(name[0])])]).eq('k_canuse', true).neq('length', 1);
                 if (wordsError) return { data: null, error: wordsError }
                 let q = this.supabase.from('wait_words').select('word,requested_by,request_type');
                 for (const l of reverDuemLaw(name[0])) {
@@ -211,25 +212,132 @@ class GetManager implements IGetManager {
                 const { data: waitWordsData, error: waitWordsError } = await this.supabase.rpc('get_long_wait_words_data');
                 if (waitWordsError) return { data: null, error: waitWordsError }
                 return { data: { words: wordsData.filter(({ word }) => !waitWordsData.some(w => word === w.word)), waitWords: waitWordsData }, error: null }
+            } else if (209 <= name && name <= 222) {
+                const c = ['가', '나', '다', '라', '마', '바', '사', '아', '자', '차', '카', '타', '파', '하'][name - 209];
+                const bit = misssionCharMask([c]);
+                if (bit !== 0) {
+                    const { data: missionKWordsData, error: missionKWordsError } = await this.supabase.rpc('get_mission_words', { target_mask: bit })
+                    if (missionKWordsError) return { data: null, error: missionKWordsError }
+
+                    const grouped: Record<string, NonNullable<typeof missionKWordsData>> = {};
+                    (missionKWordsData || []).forEach(item => {
+                        const f = item.word[0];
+                        if (!grouped[f]) grouped[f] = [];
+                        grouped[f].push(item);
+                    });
+
+                    const filteredWords: NonNullable<typeof missionKWordsData> = [];
+                    Object.values(grouped).forEach(group => {
+                        const multi = group.filter(w => w.word.split(c).length - 1 >= 2);
+                        const single = group.filter(w => w.word.split(c).length - 1 === 1);
+
+                        filteredWords.push(...multi);
+
+                        if (multi.length < 10) {
+                            const needed = 10 - multi.length;
+                            single.sort((a, b) => {
+                                const lenDiff = b.word.length - a.word.length;
+                                if (lenDiff !== 0) return lenDiff;
+                                return a.word.localeCompare(b.word);
+                            });
+                            filteredWords.push(...single.slice(0, needed));
+                        }
+                    });
+
+                    return { data: { words: filteredWords, waitWords: [] }, error: null }
+                }
+            }
+            else if (224 <= name && name <= 237) {
+                const c = ['가', '나', '다', '라', '마', '바', '사', '아', '자', '차', '카', '타', '파', '하'][name - 224];
+                const bit = misssionCharMask([c]);
+                if (bit !== 0) {
+                    const { data: missionKWordsData, error: missionKWordsError } = await this.supabase.rpc('get_mission_words', { target_mask: bit })
+                    if (missionKWordsError) return { data: null, error: missionKWordsError }
+
+                    const grouped: Record<string, NonNullable<typeof missionKWordsData>> = {};
+                    (missionKWordsData || []).forEach(item => {
+                        const f = item.word[item.word.length - 1];
+                        if (!grouped[f]) grouped[f] = [];
+                        grouped[f].push(item);
+                    });
+
+                    const filteredWords: NonNullable<typeof missionKWordsData> = [];
+                    Object.values(grouped).forEach(group => {
+                        const multi = group.filter(w => w.word.split(c).length - 1 >= 2);
+                        const single = group.filter(w => w.word.split(c).length - 1 === 1);
+
+                        filteredWords.push(...multi);
+
+                        if (multi.length < 10) {
+                            const needed = 10 - multi.length;
+                            single.sort((a, b) => {
+                                const lenDiff = b.word.length - a.word.length;
+                                if (lenDiff !== 0) return lenDiff;
+                                return a.word.localeCompare(b.word);
+                            });
+                            filteredWords.push(...single.slice(0, needed));
+                        }
+                    });
+
+                    return { data: { words: filteredWords, waitWords: [] }, error: null }
+
+                }
+            } else if (239 <= name && name <= 252) {
+                const c = ['가', '나', '다', '라', '마', '바', '사', '아', '자', '차', '카', '타', '파', '하'][name - 239];
+                const bit = misssionCharMask([c]);
+                if (bit !== 0) {
+                    const { data: missionKWordsData, error: missionKWordsError } = await this.supabase.rpc('get_mission_len3_words', { target_mask: bit })
+                    if (missionKWordsError) return { data: null, error: missionKWordsError }
+
+                    const grouped: Record<string, NonNullable<typeof missionKWordsData>> = {};
+                    (missionKWordsData || []).forEach(item => {
+                        const f = item.word[0];
+                        if (!grouped[f]) grouped[f] = [];
+                        grouped[f].push(item);
+                    });
+
+                    const filteredWords: NonNullable<typeof missionKWordsData> = [];
+                    Object.values(grouped).forEach(group => {
+                        const multi = group.filter(w => w.word.split(c).length - 1 >= 2);
+                        const single = group.filter(w => w.word.split(c).length - 1 === 1);
+
+                        filteredWords.push(...multi);
+
+                        if (multi.length < 10) {
+                            const needed = 10 - multi.length;
+                            single.sort((a, b) => {
+                                const lenDiff = b.word.length - a.word.length;
+                                if (lenDiff !== 0) return lenDiff;
+                                return a.word.localeCompare(b.word);
+                            });
+                            filteredWords.push(...single.slice(0, needed));
+                        }
+                    });
+
+                    return { data: { words: filteredWords, waitWords: [] }, error: null }
+                }
             }
             return { data: null, error: { name: "unexcept", details: "", code: "", message: "", hint: "" } as PostgrestError }
         } else {
             return { data: null, error: { name: "unexcept", details: "", code: "", message: "", hint: "" } as PostgrestError }
         }
     }
-    public async allWaitWords(c?:"add" | "delete") {
-        if (c=="add"){
-            return await this.supabase.from('wait_words').select('*,words(*),users(*)').eq('request_type',"add").order('requested_at', { ascending: true });
+    public async docsLastUpdate(id: number) {
+        return await this.supabase.from('docs').select('last_update').eq('id', id).maybeSingle();
+    }
+    public async allWaitWords(c?: "add" | "delete") {
+        if (c == "add") {
+            return await this.supabase.from('wait_words').select('*,words(*),users(*)').eq('request_type', "add").order('requested_at', { ascending: true });
         }
-        else if (c=="delete"){
-            return await this.supabase.from('wait_words').select('*,words(*),users(*)').eq('request_type',"delete").order('requested_at', { ascending: true });
+        else if (c == "delete") {
+            return await this.supabase.from('wait_words').select('*,words(*),users(*)').eq('request_type', "delete").order('requested_at', { ascending: true });
         }
         return await this.supabase.from('wait_words').select('*,words(*),users(*)').order('requested_at', { ascending: true });
     }
     public async wordsThemes(wordIds: number[]) {
         return await this.supabase.from('word_themes').select('*,themes(*),words(*)').in('word_id', wordIds);
     }
-    public async allWords({ includeAddReq=false, includeDeleteReq=false, includeInjung=true, includeNoInjung=true, onlyWordChain=true, lenf=false }: {
+    public async allWords({ includeAddReq = false, includeDeleteReq = false, includeInjung = true, includeNoInjung = true, onlyWordChain = true, lenf = false }: {
         includeAddReq?: boolean;
         includeDeleteReq?: boolean;
         includeInjung?: boolean;
@@ -241,30 +349,30 @@ class GetManager implements IGetManager {
 
         const key = cacheKey();
         const know = Date.now();
-        if (this.wordsCache[key] && know - this.wordsCache[key].time < CACHE_DURATION){
-            return {data: this.wordsCache[key].data, error: null}
+        if (this.wordsCache[key] && know - this.wordsCache[key].time < CACHE_DURATION) {
+            return { data: this.wordsCache[key].data, error: null }
         }
 
         // 단어조합기 전용
-        if (lenf){
-            const {data:wordsData, error: wordsError} = await this.supabase.from('words').select('word, noin_canuse, k_canuse').in('length', [5, 6]);
+        if (lenf) {
+            const { data: wordsData, error: wordsError } = await this.supabase.from('words').select('word, noin_canuse, k_canuse').in('length', [5, 6]);
             const { data: engData, error: engError } = await this.supabase.storage.from('public_img').download('txt/eng_len_6_words.txt')
-            if (wordsError) return {data: null, error: wordsError}
-            if (engError) return {data: null, error: storageErrorToPostgresError(engError)}
+            if (wordsError) return { data: null, error: wordsError }
+            if (engError) return { data: null, error: storageErrorToPostgresError(engError) }
 
             const engText = await engData.text();
             const now = Date.now();
             const data = [
-                ...wordsData.map(({word,noin_canuse,k_canuse})=>({word,noin_canuse,k_canuse,status: "ok" as const})),
-                ...engText.split(/\r?\n/).map(word => ({word: word.trim(), noin_canuse: false, k_canuse: true, status: "ok" as const}))
+                ...wordsData.map(({ word, noin_canuse, k_canuse }) => ({ word, noin_canuse, k_canuse, status: "ok" as const })),
+                ...engText.split(/\r?\n/).map(word => ({ word: word.trim(), noin_canuse: false, k_canuse: true, status: "ok" as const }))
             ]
             this.wordsCache[key] = {
                 data,
-                time:now
+                time: now
             }
-            return {data, error:null}
+            return { data, error: null }
         }
-        
+
         let query = this.supabase.from('words').select('word, noin_canuse, k_canuse')
         if (includeInjung && includeNoInjung) { }
         else if (includeInjung || !includeNoInjung) {
@@ -274,144 +382,144 @@ class GetManager implements IGetManager {
             query = query.eq('noin_canuse', true);
         }
         if (onlyWordChain) query = query.eq('k_canuse', true);
-        const {data:wordsData, error: wordsError} = await query;
-        if (wordsError) return {data: null, error: wordsError}
+        const { data: wordsData, error: wordsError } = await query;
+        if (wordsError) return { data: null, error: wordsError }
 
         const { data: waitWordsData, error: waitWordsError } = await this.supabase.from('wait_words').select('word,request_type');
-        if (waitWordsError) return {data: null, error: waitWordsError}
+        if (waitWordsError) return { data: null, error: waitWordsError }
 
         const now = Date.now();
         const data = [
-            ...wordsData.map(({word,noin_canuse,k_canuse})=>({word,noin_canuse,k_canuse,status: "ok" as const})),
-            ...waitWordsData.map(({word,request_type})=>({word,noin_canuse:false, k_canuse:true, status: request_type}))
+            ...wordsData.map(({ word, noin_canuse, k_canuse }) => ({ word, noin_canuse, k_canuse, status: "ok" as const })),
+            ...waitWordsData.map(({ word, request_type }) => ({ word, noin_canuse: false, k_canuse: true, status: request_type }))
         ]
         this.wordsCache[key] = {
             data,
-            time:now
+            time: now
         }
-        return {data, error:null}
+        return { data, error: null }
     }
-    public async letterDocs(){
-        return await this.supabase.from('docs').select('*').eq('typez','letter');
+    public async letterDocs() {
+        return await this.supabase.from('docs').select('*').eq('typez', 'letter');
     }
-    public async addWaitDocs(){
+    public async addWaitDocs() {
         return await this.supabase.from('docs_wait').select('*,users(*)');
     }
-    public async releaseNote(){
+    public async releaseNote() {
         return await this.supabase.from('release_note').select('*').order('created_at', { ascending: false });
     }
     public async userById(userId: string) {
         return await this.supabase.from('users').select('*').eq('id', userId).maybeSingle();
     }
-    public async session(){
+    public async session() {
         return await this.supabase.auth.getSession();
     }
-    public async usersByNickname(userName: string){
+    public async usersByNickname(userName: string) {
         return await this.supabase.from("users").select("*").eq("nickname", userName.trim())
     }
-    public async usersLikeByNickname(q: string){
+    public async usersLikeByNickname(q: string) {
         return this.supabase.from("users").select("*").ilike("nickname", `%${q}%`);
     }
-    public async userByNickname(nickname: string){
-        return await this.supabase.from('users').select('*').eq('nickname',nickname).maybeSingle();
+    public async userByNickname(nickname: string) {
+        return await this.supabase.from('users').select('*').eq('nickname', nickname).maybeSingle();
     }
-    public async monthlyConRankByUserId(userId: string){
-        return await this.supabase.rpc("get_user_monthly_rank",{ uid: userId });
+    public async monthlyConRankByUserId(userId: string) {
+        return await this.supabase.rpc("get_user_monthly_rank", { uid: userId });
     }
-    public async monthlyContributionsByUserId(userId: string){
-        return await this.supabase.from('user_month_contributions').select('*').eq('user_id',userId).limit(4);
+    public async monthlyContributionsByUserId(userId: string) {
+        return await this.supabase.from('user_month_contributions').select('*').eq('user_id', userId).limit(4);
     }
-    public async starredDocsById(userId: string){
+    public async starredDocsById(userId: string) {
         return await this.supabase.from("user_star_docs").select("*,docs(*)").eq("user_id", userId);
     }
-    public async requestsListById(userId: string){
+    public async requestsListById(userId: string) {
         return await this.supabase.from("wait_words").select("*").eq("requested_by", userId).order("requested_at", { ascending: false }).limit(30);
     }
-    public async logsListById(userId: string){
+    public async logsListById(userId: string) {
         return await this.supabase.from("logs").select("*").eq("make_by", userId).order("created_at", { ascending: false }).limit(30);
     }
-    public async wordsCount(){
-        const {data, error} = await this.supabase.from('words_count').select('total_words').single();
-        if (error) return {count: null, error};
-        return {count: data?.total_words ?? 0, error: null};
+    public async wordsCount() {
+        const { data, error } = await this.supabase.from('words_count').select('total_words').single();
+        if (error) return { count: null, error };
+        return { count: data?.total_words ?? 0, error: null };
     }
     public async waitWordsCount() {
-        const {count: count1, error: error1} = await this.supabase.from('wait_words').select('word',{ count: 'exact', head: true });
-        const {count: count2, error: error2} = await this.supabase.from('word_themes_wait').select('word_id', { count: 'exact', head: true });
-        if (error1 || error2) return {count: null, error: error1 ?? error2};
-        return {count: (count1 ?? 0) + (count2 ?? 0), error: null};
+        const { count: count1, error: error1 } = await this.supabase.from('wait_words').select('word', { count: 'exact', head: true });
+        const { count: count2, error: error2 } = await this.supabase.from('word_themes_wait').select('word_id', { count: 'exact', head: true });
+        if (error1 || error2) return { count: null, error: error1 ?? error2 };
+        return { count: (count1 ?? 0) + (count2 ?? 0), error: null };
     }
     public async allWordWaitTheme(c?: "add" | "delete") {
-        if (c=="add"){
-            return await this.supabase.from('word_themes_wait').select('*,words(word,id),themes(*),users(*)').eq('typez','add');
+        if (c == "add") {
+            return await this.supabase.from('word_themes_wait').select('*,words(word,id),themes(*),users(*)').eq('typez', 'add');
         }
-        else if (c=="delete"){
-            return await this.supabase.from('word_themes_wait').select('*,words(word,id),themes(*),users(*)').eq('typez',"delete")    
+        else if (c == "delete") {
+            return await this.supabase.from('word_themes_wait').select('*,words(word,id),themes(*),users(*)').eq('typez', "delete")
         }
         return await this.supabase.from('word_themes_wait').select('*,words(word,id),themes(*),users(*)');
     }
     public async waitWordsThemes(waitWordIds: number[]) {
         return await this.supabase.from('wait_word_themes').select('*,themes(*),wait_words(word)').in('wait_word_id', waitWordIds)
     }
-    public async wordsByWords(words: string[]){
-        return await this.supabase.rpc('get_words_with_themes',{words_input: words});
+    public async wordsByWords(words: string[]) {
+        return await this.supabase.rpc('get_words_with_themes', { words_input: words });
     }
     public async randomWordByFirstLetter(f: string[]) {
-        const {data,error} = await this.supabase.rpc('random_word_ff',{fir1: f});
-        if (error) return {data: null, error}
-        const {data:data2, error:error2} = await this.supabase.rpc('random_wait_word_ff',{prefixes: f});
-        if (error2) return {data: null, error: error2}
-        if (data.length > 0) return {data: data[0].word, error: null}
-        else if (data2.length > 0) return {data: data2[0].word, error: null}
-        else return {data: null, error: null}
+        const { data, error } = await this.supabase.rpc('random_word_ff', { fir1: f });
+        if (error) return { data: null, error }
+        const { data: data2, error: error2 } = await this.supabase.rpc('random_wait_word_ff', { prefixes: f });
+        if (error2) return { data: null, error: error2 }
+        if (data.length > 0) return { data: data[0].word, error: null }
+        else if (data2.length > 0) return { data: data2[0].word, error: null }
+        else return { data: null, error: null }
     }
     public async randomWordByLastLetter(l: string[]) {
-        const {data, error} = await this.supabase.rpc('random_word_ll',{fir1:l})
-        if (error) return {data: null, error}
-        const {data:data2, error:error2} = await this.supabase.rpc('random_wait_word_ll',{prefixes: l}) 
-        if (error2) return {data: null, error: error2}
-        if (data.length > 0) return {data: data[0].word, error: null};
-        if (data2.length > 0) return {data: data2[0].word, error: null}
-        return {data: null, error: null};
+        const { data, error } = await this.supabase.rpc('random_word_ll', { fir1: l })
+        if (error) return { data: null, error }
+        const { data: data2, error: error2 } = await this.supabase.rpc('random_wait_word_ll', { prefixes: l })
+        if (error2) return { data: null, error: error2 }
+        if (data.length > 0) return { data: data[0].word, error: null };
+        if (data2.length > 0) return { data: data2[0].word, error: null }
+        return { data: null, error: null };
     }
     public async wordThemeWaitByWordId(wordId: number) {
         return await this.supabase.from('word_themes_wait').select('themes(*), typez').eq('word_id', wordId)
     }
-    public async letterDocsByWord(word: string){
-        return await this.supabase.from('docs').select('*').eq('name',word[word.length - 1]).eq('typez','letter');
+    public async letterDocsByWord(word: string) {
+        return await this.supabase.from('docs').select('*').eq('name', word[word.length - 1]).eq('typez', 'letter');
     }
-    public async themeDocsByThemeNames(themeNames: string[]){
-        return this.supabase.from('docs').select('*').eq('typez','theme').in('name',themeNames);
+    public async themeDocsByThemeNames(themeNames: string[]) {
+        return this.supabase.from('docs').select('*').eq('typez', 'theme').in('name', themeNames);
     }
     public async firstWordCountByLetters(letter: string) {
         const { data: firWordsCount1, error: firWordsError1 } = await this.supabase
-                .from('word_last_letter_counts')
-                .select('*')
-                .eq('last_letter', letter);
-                
+            .from('word_last_letter_counts')
+            .select('*')
+            .eq('last_letter', letter);
+
         const { count: firWordsCount2, error: firWordsError2 } = await this.supabase
             .from('wait_words')
             .select('*', { count: 'exact', head: true })
             .or(reverDuemLaw(letter).map(c => `word.ilike.%${c}`).join(','));
-        
+
         if (firWordsError1 || firWordsError2) return 0;
 
-        return (sum((firWordsCount1 ?? []).map(({count})=>count))) + (firWordsCount2 || 0);
+        return (sum((firWordsCount1 ?? []).map(({ count }) => count))) + (firWordsCount2 || 0);
     }
     public async lastWordCountByLetters(letter: string) {
         const { data: lasWordsCount1, error: lasWordsError1 } = await this.supabase
-                .from('word_first_letter_counts')
-                .select('*')
-                .eq('first_letter', letter);
+            .from('word_first_letter_counts')
+            .select('*')
+            .eq('first_letter', letter);
 
         const { count: lasWordsCount2, error: lasWordsError2 } = await this.supabase
             .from('wait_words')
             .select('*', { count: 'exact', head: true })
-            .or([...new Set([letter,DuemLaw(letter)])].map(c => `word.ilike.${c}%`).join(','));
-        
+            .or([...new Set([letter, DuemLaw(letter)])].map(c => `word.ilike.${c}%`).join(','));
+
         if (lasWordsError1 || lasWordsError2) return 0;
 
-        return (sum((lasWordsCount1 ?? []).map(({count})=>count))) + (lasWordsCount2 || 0)
+        return (sum((lasWordsCount1 ?? []).map(({ count }) => count))) + (lasWordsCount2 || 0)
     }
     public async wordsByQuery(query: string) {
         const startTime = Date.now();
@@ -451,24 +559,26 @@ class GetManager implements IGetManager {
         return result;
     }
 
-    public async letterCountInfo(){
+    public async letterCountInfo() {
         const now = Date.now();
-        if (this.wordLetterCountsCacheTime !== 0 && now - this.wordLetterCountsCacheTime < CACHE_DURATION){
-            return {data: {
-                firstLetterCounts: this.wordFirstLetterCountsCache,
-                lastLetterCounts: this.wordLastLetterCountsCache
-            }, error: null}
+        if (this.wordLetterCountsCacheTime !== 0 && now - this.wordLetterCountsCacheTime < CACHE_DURATION) {
+            return {
+                data: {
+                    firstLetterCounts: this.wordFirstLetterCountsCache,
+                    lastLetterCounts: this.wordLastLetterCountsCache
+                }, error: null
+            }
         }
         const { data: firstLetterCountsData, error: firstLetterCountsError } = await this.supabase.from('word_first_letter_counts').select('*');
-        if (firstLetterCountsError) return {data: null, error: firstLetterCountsError}
+        if (firstLetterCountsError) return { data: null, error: firstLetterCountsError }
         const { data: lastLetterCountsData, error: lastLetterCountsError } = await this.supabase.from('word_last_letter_counts').select('*');
-        if (lastLetterCountsError) return {data: null, error: lastLetterCountsError}
+        if (lastLetterCountsError) return { data: null, error: lastLetterCountsError }
 
-        const firstLetterCounts: Record<string,{count: number, k_count: number, n_count: number, len3_k_count: number, len3_n_count: number}> = {};
+        const firstLetterCounts: Record<string, { count: number, k_count: number, n_count: number, len3_k_count: number, len3_n_count: number }> = {};
         firstLetterCountsData?.forEach(({ first_letter, count, k_count, n_count, len3_k_count, len3_n_count }) => {
             firstLetterCounts[first_letter] = { count, k_count, n_count, len3_k_count, len3_n_count };
         });
-        const lastLetterCounts: Record<string,{count: number, k_count: number, n_count: number}> = {};
+        const lastLetterCounts: Record<string, { count: number, k_count: number, n_count: number }> = {};
         lastLetterCountsData?.forEach(({ last_letter, count, k_count, n_count }) => {
             lastLetterCounts[last_letter] = { count, k_count, n_count };
         });
@@ -477,10 +587,12 @@ class GetManager implements IGetManager {
         this.wordLastLetterCountsCache = lastLetterCounts;
         this.wordLetterCountsCacheTime = now;
 
-        return {data: {
-            firstLetterCounts,
-            lastLetterCounts
-        }, error: null}
+        return {
+            data: {
+                firstLetterCounts,
+                lastLetterCounts
+            }, error: null
+        }
     }
     public async wordsByAdvancedQuery(input: advancedQueryType) {
         const startTime = Date.now(); // 시작 시간 기록
@@ -488,7 +600,7 @@ class GetManager implements IGetManager {
         const { data: letterData, error: letterError } = await this.letterCountInfo();
         if (letterError) return { data: null, error: letterError };
 
-        let result: {data: {word: string, nextWordCount: number}[], error: null} | {data: null; error: PostgrestError} = { data: [], error: null };
+        let result: { data: { word: string, nextWordCount: number }[], error: null } | { data: null; error: PostgrestError } = { data: [], error: null };
 
         switch (input.mode) {
             case 'kor-start': {
@@ -590,7 +702,7 @@ class GetManager implements IGetManager {
         return result;
     }
 
-    public async logsByFillter({ filterState, filterType, from, to }: { filterState: 'approved' | 'rejected' | 'pending' | 'all'; filterType: 'delete' | 'add' | 'all'; from: number; to: number; }) {
+    public async logsByFilter({ filterState, filterType, from, to }: { filterState: 'approved' | 'rejected' | 'pending' | 'all'; filterType: 'delete' | 'add' | 'all'; from: number; to: number; }) {
         let query = this.supabase
             .from('logs')
             .select(`
@@ -630,7 +742,7 @@ class GetManager implements IGetManager {
 
         return await query;
     }
-    public async notice(){
+    public async notice() {
         const today = new Date();
         today.setHours(23, 59, 59, 999);
         return await this.supabase.from('notification').select('*').gte('end_at', today.toISOString()).order('created_at', { ascending: false }).limit(1).maybeSingle();
@@ -641,15 +753,15 @@ class GetManager implements IGetManager {
     public async allUser(sortField?: 'contribution' | 'month_contribution' | 'nickname', isAsc?: boolean) {
         return await this.supabase.from('users').select('*').order(sortField ?? 'contribution', { ascending: isAsc ?? false });
     }
-    public async wordState(){
-        const {data: data1, error: error1} = await this.supabase.from('word_first_letter_counts').select('*');
-        const {data: data2, error: error2} = await this.supabase.from('word_last_letter_counts').select('*');
-        if (error1) return {data: null, error: error1};
-        if (error2) return {data: null, error: error2};
-        
-        return {data: {firstLetterCounts: data1, lastLetterCounts: data2}, error: null};
+    public async wordState() {
+        const { data: data1, error: error1 } = await this.supabase.from('word_first_letter_counts').select('*');
+        const { data: data2, error: error2 } = await this.supabase.from('word_last_letter_counts').select('*');
+        if (error1) return { data: null, error: error1 };
+        if (error2) return { data: null, error: error2 };
+
+        return { data: { firstLetterCounts: data1, lastLetterCounts: data2 }, error: null };
     }
-    
+
 }
 
 class DeleteManager implements IDeleteManager {
@@ -697,16 +809,16 @@ class DeleteManager implements IDeleteManager {
     public async waitDocsByIds(id: number[]) {
         return await this.supabase.from('docs_wait').delete().in('id', id);
     }
-    public async waitWordsByWords(words: string[]){
+    public async waitWordsByWords(words: string[]) {
         return await this.supabase.from('wait_words').delete().in('word', words);
     }
     public async waitWordsByIds(ids: number[]) {
-        return await this.supabase.from('wait_words').delete().in('id',ids);
+        return await this.supabase.from('wait_words').delete().in('id', ids);
     }
     public async waitWordByWord(word: string) {
         return await this.supabase.from('wait_words').delete().eq("word", word)
     }
-    public async wordsWaitThemesByIds(ids: number[]){
+    public async wordsWaitThemesByIds(ids: number[]) {
         return await this.supabase.from('word_themes_wait').delete().in('word_id', ids);
     }
     public async logsByIds(ids: number[]) {
@@ -732,7 +844,7 @@ class UpdateManager implements IUpdateManager {
     public async docView(id: number): Promise<void> {
         await this.supabase.rpc('increment_doc_views', { doc_id: id })
     }
-    public async notification(id: number, data: { title?: string; body?: string; img?: string | null; end_at: string}) {
+    public async notification(id: number, data: { title?: string; body?: string; img?: string | null; end_at: string }) {
         return await this.supabase.from('notification').update(data).eq('id', id).select('*').single();
     }
 }
@@ -762,26 +874,26 @@ export class SupabaseClientManager implements ISupabaseClientManager {
     public update() {
         return this._update;
     }
-    public async loginByGoogle(originUrl: string){
+    public async loginByGoogle(originUrl: string) {
         return await this.supabase.auth.signInWithOAuth({
             provider: "google",
             options: {
-                redirectTo: `${originUrl}/api/auth/callback`, 
+                redirectTo: `${originUrl}/api/auth/callback`,
             },
         });
     }
-    public onAuthStateChange(func: (session: Session | null) => Promise<void>){
+    public onAuthStateChange(func: (session: Session | null) => Promise<void>) {
         return this.supabase.auth.onAuthStateChange(async (_event, session) => {
-            try{
+            try {
                 await func(session)
             }
             finally { }
         });
     }
-    public async logout(){
+    public async logout() {
         await this.supabase.auth.signOut()
     }
-    
+
     // 이미지 업로드 기능
     public async uploadImage(file: File, path: string) {
         return await this.supabase.storage
@@ -791,18 +903,23 @@ export class SupabaseClientManager implements ISupabaseClientManager {
                 upsert: false
             });
     }
-    
+
     // 이미지 삭제 기능
     public async deleteImage(path: string) {
         return await this.supabase.storage
             .from('public_img')
             .remove([path]);
     }
-    
+
     // 공개 URL 가져오기
     public getPublicUrl(path: string) {
         return this.supabase.storage
             .from('public_img')
             .getPublicUrl(path);
     }
+
+    async getJWT(){
+        const { data: { session } } = await this.supabase.auth.getSession();
+        return session?.access_token ?? null;
+    }
 }
diff --git a/app/manager-tool/arrange/ArrangeHome.tsx b/app/manager-tool/arrange/ArrangeHome.tsx
index 0369c00..f598b94 100644
--- a/app/manager-tool/arrange/ArrangeHome.tsx
+++ b/app/manager-tool/arrange/ArrangeHome.tsx
@@ -140,12 +140,12 @@ const FileSector = ({ fileContent, fileInputRef, handleFileUpload, file, lineCou
 };
 
 
-const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalView }:
+const ToolSector = ({ fileContent, setFileContent, setLineCount, setErrorModalView }:
     {
         fileContent: string,
         setFileContent: React.Dispatch<React.SetStateAction<string>>,
         setLineCount: React.Dispatch<React.SetStateAction<number>>,
-        seterrorModalView: React.Dispatch<React.SetStateAction<ErrorMessage | null>>
+        setErrorModalView: React.Dispatch<React.SetStateAction<ErrorMessage | null>>
     }
 ) => {
     const [undoStack, setUndoStack] = useState<string[]>([]);
@@ -163,7 +163,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setRedoStack([]);
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -171,7 +171,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -192,7 +192,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             }
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -200,7 +200,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -221,7 +221,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             }
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -229,7 +229,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -249,7 +249,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setLineCount(updatedContent.split("\n").length);
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -257,7 +257,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -280,7 +280,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setLineCount(updatedContent.split("\n").length);
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -288,7 +288,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -312,7 +312,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setRemoveWord("");
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -320,7 +320,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -342,7 +342,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setReplaceValue("");
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -350,7 +350,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -377,7 +377,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setLineCount(temp.length);
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -385,7 +385,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -406,7 +406,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             console.log(updatedContent)
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -414,7 +414,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -450,7 +450,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setLineCount(updatedContent.split("\n").length);
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
@@ -458,7 +458,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -495,14 +495,14 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setPatternToDelete("");
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
                     inputValue: `DeleteByPattern | ${fileContent}`
                 });
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -522,14 +522,14 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setLineCount(updatedContent.length);
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
                     inputValue: `SortByLength | ${fileContent}`
                 });
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -542,37 +542,103 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
     // 정렬 v3
     const handleSortWordv3 = () => {
         try {
-            const updatedContent = fileContent.split("\n").filter((word)=>word!=="" && !word.includes('=[')).sort((a, b) => {
+            const filtered = fileContent.split("\n").filter((word) => word !== "" && !word.includes('=['));
+            const sorted = filtered.sort((a, b) => {
                 const aFirst = a[0];
                 const bFirst = b[0];
                 if (aFirst === bFirst) {
-                    if (a.length === b.length) {
-                        return a.localeCompare(b, "ko-KR");
-                    }
+                    if (a.length === b.length) return a.localeCompare(b, "ko-KR");
                     return b.length - a.length;
                 }
                 return aFirst.localeCompare(bFirst, "ko-KR");
             });
-            if (updatedContent.join('\n') === fileContent) return;
+
+            // 그룹 헤더 추가 (=[X]= 형식)
+            let groupedText = '';
+            let currentChar: string | null = null;
+            for (const word of sorted) {
+                if (!word) continue;
+                const firstChar = word[0].toLowerCase();
+                if (currentChar !== firstChar) {
+                    if (currentChar !== null) groupedText += '\n';
+                    groupedText += `=[${firstChar.toUpperCase()}]=\n`;
+                    currentChar = firstChar;
+                }
+                groupedText += word + '\n';
+            }
+
+            const updatedContent = groupedText.trim();
+            if (updatedContent === fileContent) return;
             pushToUndoStack(fileContent);
-            setFileContent(updatedContent.join('\n'));
-            setLineCount(updatedContent.length);
-            console.log(updatedContent)
+            setFileContent(updatedContent);
+            setLineCount(updatedContent.split("\n").length);
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
-                    inputValue: `SortWordv1 | ${fileContent}`
+                    inputValue: `SortWordv3 | ${fileContent}`
                 });
 
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
-                    inputValue: `SortWordv1 | ${fileContent}`
+                    inputValue: `SortWordv3 | ${fileContent}`
+                });
+            }
+        }
+    };
+
+    // 정렬 v4: v3 방식(앞글자순, 길이별 정렬) + v2처럼 그룹헤더(=[첫글자]=) 추가
+    const handleSortWordv4 = () => {
+        try {
+            const filtered = fileContent.split("\n").filter((word) => word !== "" && !word.includes('=['));
+            const sorted = filtered.sort((a, b) => {
+                const aFirst = a[0];
+                const bFirst = b[0];
+                if (aFirst === bFirst) {
+                    if (a.length === b.length) return a.localeCompare(b, "ko-KR");
+                    return b.length - a.length;
+                }
+                return aFirst.localeCompare(bFirst, "ko-KR");
+            });
+
+            // 그룹핑하여 '=[X]=' 헤더 추가
+            let groupedText = '';
+            let currentChar: string | null = null;
+            for (const word of sorted) {
+                if (!word) continue;
+                const firstChar = word[0].toLowerCase();
+                if (currentChar !== firstChar) {
+                    if (currentChar !== null) groupedText += '\n';
+                    groupedText += `=[${firstChar.toUpperCase()}]=\n`;
+                    currentChar = firstChar;
+                }
+                groupedText += word + '\n';
+            }
+            const updatedContent = groupedText.trim();
+            if (updatedContent === fileContent) return;
+            pushToUndoStack(fileContent);
+            setFileContent(updatedContent);
+            setLineCount(updatedContent.split("\n").length);
+        } catch (err) {
+            if (err instanceof Error) {
+                setErrorModalView({
+                    ErrName: err.name,
+                    ErrMessage: err.message,
+                    ErrStackRace: err.stack,
+                    inputValue: `SortWordv4 | ${fileContent}`
+                });
+
+            } else {
+                setErrorModalView({
+                    ErrName: null,
+                    ErrMessage: null,
+                    ErrStackRace: err as string,
+                    inputValue: `SortWordv4 | ${fileContent}`
                 });
             }
         }
@@ -587,14 +653,14 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
             setLineCount(updatedContent.split("\n").length);
         } catch (err) {
             if (err instanceof Error) {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: err.name,
                     ErrMessage: err.message,
                     ErrStackRace: err.stack,
                     inputValue: `ConvertToLowercase | ${fileContent}`
                 });
             } else {
-                seterrorModalView({
+                setErrorModalView({
                     ErrName: null,
                     ErrMessage: null,
                     ErrStackRace: err as string,
@@ -634,6 +700,7 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                                         <li>• <strong>ㄱㄴㄷ순 정렬 v1:</strong> 한글 가나다순으로 정렬합니다.</li>
                                         <li>• <strong>ㄱㄴㄷ순 정렬 v2:</strong> 한글 가나다순으로 정렬하고 알파벳별로 그룹화합니다.</li>
                                         <li>• <strong>ㄱㄴㄷ순 정렬 v3:</strong> 한글 앞글자순으로 정렬하고 길이별로 정렬합니다.</li>
+                                        <li>• <strong>ㄱㄴㄷ순 정렬 v4:</strong> v3 방식(앞글자순 + 길이별)으로 정렬하고, 결과를 알파벳별로 그룹화하여 <code>=[첫글자]=</code> 헤더를 추가합니다.</li>
                                         <li>• <strong>길이 긴순 정렬:</strong> 단어의 길이가 긴 순서로 정렬합니다.</li>
                                     </ul>
                                 </div>
@@ -793,6 +860,22 @@ const ToolSector = ({ fileContent, setFileContent, setLineCount, seterrorModalVi
                             </div>
                         </div>
 
+                        {/* ㄱㄴㄷ 순 정렬 v4 */}
+                        <div className="flex items-center gap-2 p-2 bg-gray-50
+                            dark:bg-gray-900 rounded-md">
+                            <span className="text-sm font-medium text-gray-700 dark:text-gray-300 min-w-20">ㄱㄴㄷ 순 정렬 v4:</span>
+                            <button
+                                className="flex-1 bg-green-500 text-white px-3 py-1.5 rounded-md hover:bg-green-600 text-sm font-medium transition-colors disabled:bg-gray-200 dark:disabled:bg-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed"
+                                disabled={!fileContent}
+                                onClick={handleSortWordv4}
+                            >
+                                정렬하기
+                            </button>
+                            <div className="w-6 h-6 relative cursor-pointer hover:opacity-80 transition-opacity">
+                                <HelpModal wantGo={5} />
+                            </div>
+                        </div>
+
                         {/* 길이 긴순 정렬 */}
                         <div className="flex items-center gap-2 p-2 bg-gray-50
                             dark:bg-gray-900 rounded-md">
@@ -1052,7 +1135,7 @@ const ArrangeHome = () => {
                     fileContent={fileContent}
                     setFileContent={setFileContent}
                     setLineCount={setLineCount}
-                    seterrorModalView={seterrorModalView}
+                    setErrorModalView={seterrorModalView}
                 />
             </div>
 
diff --git a/app/manager-tool/arrange/HelpModal.tsx b/app/manager-tool/arrange/HelpModal.tsx
index 1c1df45..0847d3b 100644
--- a/app/manager-tool/arrange/HelpModal.tsx
+++ b/app/manager-tool/arrange/HelpModal.tsx
@@ -1,15 +1,16 @@
 import React, { useEffect, useRef } from 'react';
 import HelpModal from '@/app/components/HelpModal';
 
-interface HelpModalprop {
-    wantGo?: 1 | 2 | 3 | 4;
+interface HelpModalProp {
+    wantGo?: 1 | 2 | 3 | 4 | 5;
 }
 
-const HelpModalB = ({ wantGo }: HelpModalprop) => {
+const HelpModalB = ({ wantGo }: HelpModalProp) => {
     // 각 섹션에 대한 
     const sortRef1 = useRef<HTMLHeadingElement>(null);
     const sortRef2 = useRef<HTMLHeadingElement>(null);
     const sortRef3 = useRef<HTMLHeadingElement>(null);
+    const sortRef4 = useRef<HTMLHeadingElement>(null);
 
     const scrollToSection = (ref: React.RefObject<HTMLElement | null>) => {
         if (ref.current) {
@@ -29,6 +30,9 @@ const HelpModalB = ({ wantGo }: HelpModalprop) => {
                 case 4:
                     scrollToSection(sortRef3);
                     break;
+                case 5:
+                    scrollToSection(sortRef4);
+                    break;
             }
         }
     });
@@ -61,6 +65,14 @@ const HelpModalB = ({ wantGo }: HelpModalprop) => {
                         ㄱㄴㄷ순 정렬 v3
                     </button>
                 </li>
+                <li>
+                    <button
+                        className="text-blue-500 dark:text-blue-400 hover:underline"
+                        onClick={() => scrollToSection(sortRef4)}
+                    >
+                        ㄱㄴㄷ순 정렬 v4
+                    </button>
+                </li>
             </ul>
 
             {/* 본문 */}
@@ -109,12 +121,27 @@ const HelpModalB = ({ wantGo }: HelpModalprop) => {
                 <pre className="bg-gray-100 dark:bg-gray-800 text-sm p-3 rounded-md text-gray-800 dark:text-gray-200">
                     {`가끔가끔\n가격\n오늘\n오글오글`} <br />→<br />{`가끔가끔\n가격\n오글오글\n오늘`}
                 </pre>
+
+                <h3
+                    ref={sortRef4}
+                    className="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100"
+                >
+                    ㄱㄴㄷ순 정렬 v4
+                </h3>
+
+                <p className="text-gray-700 dark:text-gray-300">
+                    v4 버전은 한글 앞글자순으로 정렬하고 길이별로 정렬한후 그룹으로 묶습니다.
+                </p>
+
+                <pre className="bg-gray-100 dark:bg-gray-800 text-sm p-3 rounded-md text-gray-800 dark:text-gray-200">
+                    {`나비야\n가나다라마바사\n나비\n난방\n가로`} <br />→<br />{`=[가]=\n가나다라마바사\n가로\n\n=[나]=\n나비\n나비야\n\n=[난]=\n난방`}
+                </pre>
             </div>
         </div>
     )
 }
 
-export default function HelpModalC({ wantGo }: HelpModalprop) {
+export default function HelpModalC({ wantGo }: HelpModalProp) {
     return (
         <HelpModal title={"단어장 정리 도구 도움말"}>
             <HelpModalB wantGo={wantGo} />
diff --git a/app/manager-tool/extract/korean-mission-b/KoreanMissionB.tsx b/app/manager-tool/extract/korean-mission-b/KoreanMissionB.tsx
index 09afeea..b26951f 100644
--- a/app/manager-tool/extract/korean-mission-b/KoreanMissionB.tsx
+++ b/app/manager-tool/extract/korean-mission-b/KoreanMissionB.tsx
@@ -13,7 +13,7 @@ import { Download, Play, Settings, Zap, Home } from "lucide-react";
 import { DefaultDict } from "@/app/lib/collections";
 import Link from "next/link";
 import HelpModal from "@/app/components/HelpModal";
-import { reverDuemLaw } from "@/app/lib/DuemLaw";
+import { reverDuemLaw } from "@/app/lib/hangulUtils";
 
 const MISSION_LETTERS = "가나다라마바사아자차카타파하";
 
diff --git a/app/manager-tool/extract/korean-mission/KoreanMission.tsx b/app/manager-tool/extract/korean-mission/KoreanMission.tsx
index 98d6385..e85f2f5 100644
--- a/app/manager-tool/extract/korean-mission/KoreanMission.tsx
+++ b/app/manager-tool/extract/korean-mission/KoreanMission.tsx
@@ -40,6 +40,7 @@ const WordExtractorApp = () => {
     const [loading, setLoading] = useState(false);
     const [oneMissionChecked, setOneMissionChecked] = useState<boolean>(false);
     const [showMissionLetter, setShowMissionLetter] = useState<boolean>(false);
+    const [excludeFirstMissionChecked, setExcludeFirstMissionChecked] = useState<boolean>(false);
     const [selected, setSelected] = useState<op[]>([]);
 
     const options: ["미션글자 포함순", "글자길이순", "ㄱㄴㄷ순"] = ["미션글자 포함순", "글자길이순", "ㄱㄴㄷ순"];
@@ -100,11 +101,15 @@ const WordExtractorApp = () => {
     // 미션 단어들 추출
     const buildMissionMap = (
         content: string,
-        include: number
+        include: number,
+        excludeFirstMission: boolean
     ): DefaultDict<string, { word: string; mission: number }[]> => {
         const dict = new DefaultDict<string, { word: string; mission: number }[]>(() => []);
         for (const m of MISSION_CHARS) {
-            for (const word of content.split('\n')) {
+            for (const raw of content.split('\n')) {
+                const word = raw.trim();
+                if (!word) continue;
+                if (excludeFirstMission && MISSION_CHARS.includes(word[0])) continue;
                 const count = countMissionChar(word, m);
                 if (count >= include) dict.get(m).push({ word, mission: count });
             }
@@ -122,11 +127,17 @@ const WordExtractorApp = () => {
 
         // 오로지 ㄱㄴㄷ순 정렬만 있을 경우
         if (rank2 === undefined) {
+            // 중복 단어가 많이 쌓여 정렬에서 스택 오버플로우가 발생할 수 있으므로
+            // Set으로 중복을 제거하고 단순 localeCompare 정렬로 처리합니다.
+            const set = new Set<string>();
             for (const m of MISSION_CHARS) {
-                result.push(...missionMap.get(m).map(({ word }) => word))
+                for (const { word } of missionMap.get(m)) {
+                    set.add(word);
+                }
             }
-            result.sort((a, b) => sortedAlphabet({ word: a, mission: -1 }, { word: b, mission: -1 }));
-            return showMissionLetter ? result.map(word => formatWord(word)) : result
+            const arr = Array.from(set);
+            arr.sort((a, b) => a.localeCompare(b, "ko-KR"));
+            return showMissionLetter ? arr.map(word => formatWord(word)) : arr;
         }
         // 2순위가 미션글자 포함순일때
         else if (selected[1] === "미션글자 포함순") {
@@ -241,7 +252,7 @@ const WordExtractorApp = () => {
             if (!fileContent || selected.length === 0) return;
 
             const include = oneMissionChecked ? 1 : 2;
-            const missionMap = buildMissionMap(fileContent, include);
+            const missionMap = buildMissionMap(fileContent, include, excludeFirstMissionChecked);
             const rank1 = pack[selected[0]];
             const rank2 = pack[selected[1]];
             const rank3 = pack[selected[2]];
@@ -471,6 +482,20 @@ const WordExtractorApp = () => {
                                         </Label>
                                     </div>
 
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="exclude-first-mission"
+                                            checked={excludeFirstMissionChecked}
+                                            onCheckedChange={(checked) => setExcludeFirstMissionChecked(checked as boolean)}
+                                        />
+                                        <Label
+                                            htmlFor="exclude-first-mission"
+                                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-200"
+                                        >
+                                            첫글자 미션글자 제외
+                                        </Label>
+                                    </div>
+
                                     <div className="space-y-3">
                                         <div className="flex items-center gap-2">
                                             <Label className="text-sm font-medium dark:text-gray-200">정렬 모드</Label>
diff --git a/app/manager-tool/extract/loop/Loop.tsx b/app/manager-tool/extract/loop/Loop.tsx
index b9e908b..0d0cb96 100644
--- a/app/manager-tool/extract/loop/Loop.tsx
+++ b/app/manager-tool/extract/loop/Loop.tsx
@@ -4,7 +4,7 @@ import ErrorModal from "@/app/components/ErrModal";
 import type { ErrorMessage } from '@/app/types/type'
 import Spinner from "@/app/components/Spinner";
 import FileContentDisplay from "../components/FileContentDisplay";
-import DuemLaw from "@/app/lib/DuemLaw";
+import DuemLaw from "@/app/lib/hangulUtils";
 import { Card, CardContent, CardHeader, CardTitle } from "@/app/components/ui/card";
 import { Button } from "@/app/components/ui/button";
 import { Input } from "@/app/components/ui/input";
diff --git a/app/mini-game/MobileUnsupported.tsx b/app/mini-game/MobileUnsupported.tsx
new file mode 100644
index 0000000..0f01c1b
--- /dev/null
+++ b/app/mini-game/MobileUnsupported.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { ArrowLeft, Monitor } from "lucide-react";
+
+const MobileUnsupported = () => {
+    const router = useRouter();
+
+    return (
+        <div className="flex md:hidden justify-center items-center min-h-[60vh] px-4">
+            <div className="max-w-md w-full">
+                <div className="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-8">
+                    {/* Icon */}
+                    <div className="flex justify-center mb-6">
+                        <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
+                            <Monitor className="w-12 h-12 text-blue-600 dark:text-blue-400" />
+                        </div>
+                    </div>
+
+                    {/* Title */}
+                    <h2 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-3">
+                        PC 환경에서 이용해주세요
+                    </h2>
+
+                    {/* Description */}
+                    <p className="text-center text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
+                        이 게임은 모바일 환경을 지원하지 않습니다.
+                        <br />
+                        데스크톱이나 태블릿에서 접속해주세요.
+                    </p>
+
+                    {/* Back Button */}
+                    <button
+                        onClick={() => router.back()}
+                        className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg"
+                    >
+                        <ArrowLeft className="w-5 h-5" />
+                        <span>뒤로가기</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MobileUnsupported;
\ No newline at end of file
diff --git a/app/mini-game/game/Game.tsx b/app/mini-game/game/Game.tsx
new file mode 100644
index 0000000..ce6916a
--- /dev/null
+++ b/app/mini-game/game/Game.tsx
@@ -0,0 +1,41 @@
+"use client";
+import { useEffect } from "react";
+import KkutuChat from "./GameChat";
+import KkutuMenu from "./components/KkutuMenu";
+import GameBox from "./GameBox";
+import GameBody from "./GameBody";
+import GameSetup from "./GameSetup";
+import { ChatProvider } from "./hooks/useChat";
+import { soundManager } from "./lib/SoundManager";
+import { useGameState } from "./hooks/useGameState";
+
+/**
+ * 게임 전체를 감싸는 최상위 컴포넌트
+ * 사운드 로드 및 주요 컴포넌트 배치를 담당합니다.
+ */
+const Game = () => {
+    const { isPlaying } = useGameState();
+
+    // 컴포넌트 마운트 시 사운드 리소스 로드
+    useEffect(() => {
+        soundManager.load();
+    }, []);
+
+    return (
+        <ChatProvider>
+            <div>
+                <KkutuMenu />
+                {isPlaying ? (
+                    <GameBox>
+                        <GameBody />
+                    </GameBox>
+                ) : (
+                    <GameSetup />
+                )}
+                <KkutuChat />
+            </div>
+        </ChatProvider>
+    );
+};
+
+export default Game;
\ No newline at end of file
diff --git a/app/mini-game/game/GameBody.tsx b/app/mini-game/game/GameBody.tsx
new file mode 100644
index 0000000..72bff27
--- /dev/null
+++ b/app/mini-game/game/GameBody.tsx
@@ -0,0 +1,224 @@
+import React from 'react';
+import HistoryHolder from './components/HistoryHolder';
+import GameInput from './components/GameInput';
+import { useChat } from './hooks/useChat';
+import { useGameLogic } from './hooks/useGameLogic';
+import GraphBar from './components/GraphBar';
+import { useEffect } from 'react';
+import { duemLaw } from '@/lib/hangulUtils';
+import GameResultModal from './components/GameResultModal';
+
+/**
+ * 게임의 메인 화면 컴포넌트
+ * 게임 진행 상황, 캐릭터, 타이머 등을 표시합니다.
+ */
+const GameBody = () => {
+    const { chatInput, handleChatInputChange, sendHint, setChatInput } = useChat();
+    const {
+        word,
+        isFail,
+        chainCount,
+        turnTime,
+        roundTime,
+        missionChar,
+        historyItems,
+        inputVisible,
+        turnInstant,
+        animatingWord,
+        visibleChars,
+        pulseOn,
+        inputRef,
+        handleInput,
+        TURN_TIME_LIMIT,
+        ROUND_TIME_LIMIT,
+        hintVisible,
+        gameResult,
+        closeGameResult
+    } = useGameLogic();
+
+    // Register the game's input handler and visibility into chat context so
+    // the chat input can forward Enter presses to the game input when visible.
+    const { registerGameHandleInput, setGameInputVisible } = useChat();
+
+    useEffect(() => {
+        registerGameHandleInput(handleInput);
+        return () => {
+            registerGameHandleInput(null);
+        };
+    }, [handleInput, registerGameHandleInput]);
+
+    useEffect(() => {
+        setGameInputVisible(inputVisible);
+        return () => setGameInputVisible(false);
+    }, [inputVisible, setGameInputVisible]);
+
+    // 미션 글자가 포함된 단어 렌더링 (연두색 하이라이트)
+    const renderWordWithMission = (text: string, showHighlight: boolean) => {
+        if (animatingWord && text === animatingWord) {
+            const wordLength = text.length;
+            const isLongWord = wordLength >= 9;
+
+            return (
+                <span>
+                    {text.split('').map((char, idx) => {
+                        const isVisible = visibleChars[idx];
+                        const isMissionChar = showHighlight && char === missionChar;
+
+                        if (isLongWord && !isVisible) {
+                            return null;
+                        }
+
+                        return (
+                            <span
+                                key={idx}
+                                style={{
+                                    display: 'inline-block',
+                                    verticalAlign: 'middle',
+                                    lineHeight: '20px',
+                                    fontSize: isVisible && pulseOn ? '23px' : '20px',
+                                    transform: isVisible ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(1.2)',
+                                    transition: 'transform 120ms ease-out, opacity 120ms ease-out',
+                                    color: isMissionChar ? '#90EE90' : undefined,
+                                    opacity: isVisible ? 1 : 0,
+                                }}
+                            >
+                                {char}
+                            </span>
+                        );
+                    })}
+                </span>
+            );
+        }
+        if (hintVisible) {
+            return <span className="text-gray-400">{text}</span>;
+        }
+        return text && text.length === 1 && duemLaw(text, true) !== text ? `${text}(${duemLaw(text)})` : text;
+    };
+
+    return (
+        <>
+            <div className="relative">
+                <div className="game-head flex items-start">
+                    {/* 미션 글자 섹션 (왼손) */}
+                    <div
+                        className="items pt-[50px] mt-[50px] mx-[40px] ml-[105px] w-[100px] h-[110px] text-[24px] text-[#EEEEEE] font-bold text-center bg-[url('/img/lefthand.png')] bg-no-repeat"
+                        style={{ textShadow: '0px 1px 5px #141414', opacity: missionChar ? 1 : 0 }}
+                    >
+                        {missionChar}
+                    </div>
+
+                    {/* 쪼리핑 캐릭터 및 디스플레이 섹션 */}
+                    <div className="jjoriping w-[500px]">
+                        {/* 캐릭터 얼굴 */}
+                        <div className="relative">
+                            <img
+                                className="absolute top-[11px] left-[32px]"
+                                src="/img/jjoeyeL.png"
+                                alt="Left Eye"
+                            />
+                            <img
+                                className="absolute top-[48px] left-[264px]"
+                                src="/img/jjonose.png"
+                                alt="Nose"
+                            />
+                            <img
+                                className="absolute top-[11px] left-[460px]"
+                                src="/img/jjoeyeR.png"
+                                alt="Right Eye"
+                            />
+                        </div>
+
+                        {/* 게임 정보 디스플레이 */}
+                        <div className="p-[20px_5px_5px_5px] border-2 border-black rounded-bl-[10px] rounded-br-[10px] mt-[40px] w-[486px] h-[120px] bg-[#DEAF56] ml-8">
+                            {/* 단어 표시 영역 */}
+                            <div className={`p-[8px_5px] rounded-[10px] rounded-bl-none rounded-br-none w-[474px] h-[40px] text-[20px] text-center text-[#EEEEEE] bg-black/70 whitespace-nowrap overflow-hidden text-ellipsis ${isFail ? 'text-[#FF7777] line-through' : ''}`}>
+                                {renderWordWithMission(word, !isFail)}
+                            </div>
+
+                            {/* 턴 시간 그래프 */}
+                            <GraphBar
+                                className="border-l border-r border-black/70 w-[474px] h-[20px] bg-[#70712D]"
+                                min={0}
+                                val={turnTime}
+                                max={TURN_TIME_LIMIT}
+                                bgc="#E6E846"
+                                label={`${turnTime.toFixed(1)}초`}
+                                noTransition={turnInstant}
+                            />
+
+                            {/* 라운드 시간 그래프 */}
+                            <GraphBar
+                                className="border-l border-r border-b border-black/70 rounded-bl-[10px] rounded-br-[10px] w-[474px] h-[20px] bg-[#223C6C]"
+                                min={0}
+                                val={roundTime}
+                                max={ROUND_TIME_LIMIT}
+                                bgc="#3573E4"
+                                label={`${roundTime.toFixed(1)}초`}
+                            />
+                        </div>
+                    </div>
+
+                    {/* 연승 횟수 섹션 (오른손) */}
+                    <div
+                        className="chain pt-[50px] mt-[50px] mx-[105px] mr-[40px] w-[100px] h-[110px] text-[24px] text-[#EEEEEE] font-bold text-center bg-[url('/img/righthand.png')] bg-no-repeat"
+                        style={{ textShadow: '0px 1px 5px #141414' }}
+                    >
+                        {chainCount}
+                    </div>
+                </div>
+
+                {/* 게임 결과 다이얼로그 - absolute 위치로 우측 상단에 배치 */}
+                {gameResult && (
+                    <div className="absolute top-[50px] right-[40px] z-50">
+                        <GameResultModal
+                            usedWords={gameResult}
+                            onClose={closeGameResult}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* 히스토리 및 입력창 */}
+            <div className="ml-[60px]">
+                <HistoryHolder historyItems={historyItems} />
+            </div>
+            <div className='ml-[270px]'>
+                {inputVisible && (
+                    <GameInput
+                        placeholder="당신의 차례! 아래의 채팅 창에서 입력하세요."
+                        readonly={false}
+                        value={chatInput}
+                        onChange={handleChatInputChange}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                const trimmed = chatInput.trim();
+                                if (trimmed === '/ㅍ' || trimmed === '/v') {
+                                    // trigger global hint sender registered in chat log
+                                    sendHint();
+                                    setChatInput('');
+                                    return;
+                                }
+                                if (trimmed === '/gg' || trimmed === '/ㅈㅈ') {
+                                    // forward to game handler which will end the game
+                                    handleInput(trimmed);
+                                    setChatInput('');
+                                    return;
+                                }
+                                // support start aliases if user types from head input
+                                if (trimmed === '/시작') {
+                                    handleInput(trimmed);
+                                    setChatInput('');
+                                    return;
+                                }
+                                handleInput(chatInput);
+                            }
+                        }}
+                        inputRef={inputRef}
+                    />
+                )}
+            </div>
+        </>
+    );
+};
+
+export default GameBody;
\ No newline at end of file
diff --git a/app/mini-game/game/GameBox.tsx b/app/mini-game/game/GameBox.tsx
new file mode 100644
index 0000000..ba27eb8
--- /dev/null
+++ b/app/mini-game/game/GameBox.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+/**
+ * 게임 화면의 배경 및 컨테이너 역할을 하는 컴포넌트
+ */
+const GameBox = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <div
+            className="w-[1000px] h-[410px] bg-[url('/img/gamebg.png')]"
+        >
+            {children}
+        </div>
+    );
+};
+
+export default GameBox;
\ No newline at end of file
diff --git a/app/mini-game/game/GameChat.tsx b/app/mini-game/game/GameChat.tsx
new file mode 100644
index 0000000..9ec90e1
--- /dev/null
+++ b/app/mini-game/game/GameChat.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Send, MessageCircle } from 'lucide-react';
+import { useChat } from './hooks/useChat';
+import { useChatLog } from './hooks/useChatLog';
+
+/**
+ * 게임 내 채팅창 컴포넌트
+ * 메시지 목록을 표시하고 채팅 입력을 처리합니다.
+ */
+const KkutuChat = () => {
+    const { chatInput, handleChatInputChange } = useChat();
+    const { messages, chatRef, handleSendMessage, sendHint } = useChatLog();
+    const { callGameInput, gameInputVisible } = useChat();
+
+    return (
+        <div className="w-full max-w-[1000px] -mt-8 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden">
+            {/* 채팅 헤더 */}
+            <div className="flex bg-gray-100 dark:bg-gray-800 px-4 py-2 border-b border-gray-300 dark:border-gray-700">
+                <MessageCircle size={20} className="mr-2 text-gray-600 dark:text-gray-300" fill={"gray-100"} />
+                <h3 className="font-semibold text-gray-800 dark:text-gray-100">채팅</h3>
+            </div>
+
+            {/* 채팅 메시지 영역 */}
+            <div
+                ref={chatRef}
+                className="h-32 overflow-y-auto p-2 bg-gray-50 dark:bg-gray-800"
+                id="Chat"
+            >
+                {messages.map((message, index) => (
+                    <div key={message.id}>
+                        {index > 0 && (
+                            <hr className="border-0 border-b border-dashed border-gray-400 my-1" />
+                        )}
+                        <div className={`chat-item w-full overflow-hidden p-1 my-1 ${message.isNotice ? 'bg-gray-300 dark:bg-gray-700' : ''
+                            }`}>
+                            <div className="flex items-start gap-2">
+                                {/* 타임스탬프 */}
+                                <div className="chat-stamp w-16 text-xs text-gray-500 dark:text-gray-400 text-right pt-1 flex-shrink-0">
+                                    {message.timestamp}
+                                </div>
+
+                                {/* 사용자 이름 */}
+                                <div className={`chat-head w-24 font-bold text-center cursor-pointer hover:bg-white dark:hover:bg-gray-700 px-2 py-1 rounded flex-shrink-0 ${message.isNotice ? 'text-blue-600 dark:text-blue-400' : 'text-gray-800 dark:text-gray-100'
+                                    }`}>
+                                    {message.username}
+                                </div>
+
+                                {/* 메시지 내용 */}
+                                <div className="chat-body flex-1 min-h-4 py-1 text-gray-800 dark:text-gray-100">
+                                    {message.message}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* 입력 영역 */}
+            <div className="flex border-t border-gray-300 dark:border-gray-700">
+                <input
+                    type="text"
+                    value={chatInput}
+                    onChange={handleChatInputChange}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            // If the game input is visible, forward Enter to the registered game handler
+                            if (gameInputVisible) {
+                                e.preventDefault();
+                                const trimmed = chatInput.trim();
+                                if (trimmed === '/ㅍ' || trimmed === '/v') {
+                                    sendHint();
+                                    return;
+                                }
+                                if (trimmed) {
+                                    callGameInput(chatInput);
+                                }
+                                return;
+                            }
+
+                            // otherwise send as chat message
+                            handleSendMessage();
+                        }
+                    }}
+                    maxLength={200}
+                    placeholder="메시지를 입력하세요..."
+                    className="flex-1 px-4 py-2 border-0 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-none text-gray-800 dark:text-white"
+                    id="TalkX"
+                />
+                <button
+                    onClick={handleSendMessage}
+                    className="w-16 bg-blue-500 dark:bg-blue-600 text-white hover:bg-blue-600 dark:hover:bg-blue-700 flex items-center justify-center transition-colors"
+                    id="ChatBtn"
+                >
+                    <Send size={16} />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default KkutuChat;
\ No newline at end of file
diff --git a/app/mini-game/game/GameSetup.tsx b/app/mini-game/game/GameSetup.tsx
new file mode 100644
index 0000000..549f28a
--- /dev/null
+++ b/app/mini-game/game/GameSetup.tsx
@@ -0,0 +1,382 @@
+"use client";
+import React, { useState, useEffect } from 'react';
+import { loadWordsFromFile, hasWords, getAllWords, clearAllWords } from './lib/wordDB';
+import WordManagerModal from './components/WordManagerModal';
+import ConfirmModal from './components/ConfirmModal';
+import StartCharModal from './components/StartCharModal';
+import gameManager from './lib/GameManager';
+import { soundManager } from './lib/SoundManager';
+
+/**
+ * 게임 시작 전 준비 화면 컴포넌트
+ * 단어 데이터베이스 업로드 및 설정을 담당합니다.
+ */
+const GameSetup = () => {
+    const [file, setFile] = useState<File | null>(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [message, setMessage] = useState<string>('');
+    const [wordCount, setWordCount] = useState<number>(0);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [isStartCharModalOpen, setIsStartCharModalOpen] = useState(false);
+    const [startCharInput, setStartCharInput] = useState<string>('');
+    const [localSetting, setLocalSetting] = useState<{
+        roundTimeSeconds: number;
+        notAgainSameChar: boolean;
+        hintMode: 'special' | 'auto';
+        lang: 'ko' | 'en';
+        mode: 'normal' | 'mission';
+        startChars?: string;
+    } | null>(null);
+
+    // 컴포넌트 마운트 시 저장된 단어와 설정을 불러옴
+    useEffect(() => {
+        checkExistingWords();
+        loadLocalSetting();
+        soundManager.stopAllSounds();
+    }, []);
+
+    const loadLocalSetting = () => {
+        try {
+            const raw = localStorage.getItem('kkutu_game_setting');
+            if (raw) {
+                const parsed = JSON.parse(raw);
+                const merged = {
+                    roundTimeSeconds: parsed.roundTimeSeconds ?? Math.round(gameManager.getSetting().roundTime / 1000),
+                    notAgainSameChar: parsed.notAgainSameChar ?? gameManager.getSetting().notAgainSameChar,
+                    lang: parsed.lang ?? gameManager.getSetting().lang,
+                    mode: parsed.mode ?? gameManager.getSetting().mode,
+                    hintMode: parsed.hintMode ?? gameManager.getSetting().hintMode,
+                    startChars: parsed.startChars ?? Array.from(gameManager.getSetting().wantStartChar).join('')
+                };
+                setLocalSetting(merged);
+                setStartCharInput(merged.startChars);
+                gameManager.updateSetting({
+                    roundTime: merged.roundTimeSeconds * 1000,
+                    notAgainSameChar: merged.notAgainSameChar,
+                    lang: merged.lang,
+                    mode: merged.mode,
+                    hintMode: merged.hintMode,
+                    wantStartChar: new Set((merged.startChars || '').split(''))
+                });
+            } else {
+                const cur = gameManager.getSetting();
+                const startCharsStr = Array.from(cur.wantStartChar).join('');
+                setLocalSetting({ roundTimeSeconds: Math.round(cur.roundTime / 1000), notAgainSameChar: cur.notAgainSameChar, lang: cur.lang, mode: cur.mode, hintMode: cur.hintMode, startChars: startCharsStr });
+                setStartCharInput(startCharsStr);
+            }
+        } catch (e) {
+            const cur = gameManager.getSetting();
+            const startCharsStr = Array.from(cur.wantStartChar).join('');
+            setLocalSetting({ roundTimeSeconds: Math.round(cur.roundTime / 1000), notAgainSameChar: cur.notAgainSameChar, lang: cur.lang, mode: cur.mode, hintMode: cur.hintMode, startChars: startCharsStr });
+            setStartCharInput(startCharsStr);
+            console.error(e);
+        }
+    };
+    const handleSettingChange = async (partial: Partial<{ roundTimeSeconds: number; notAgainSameChar: boolean; lang: 'ko' | 'en'; mode: 'normal' | 'mission'; hintMode: 'special' | 'auto' }>) => {
+        const cur = gameManager.getSetting();
+        const merged = {
+            roundTimeSeconds: partial.roundTimeSeconds ?? localSetting?.roundTimeSeconds ?? Math.round(cur.roundTime / 1000),
+            notAgainSameChar: partial.notAgainSameChar ?? localSetting?.notAgainSameChar ?? cur.notAgainSameChar,
+            lang: partial.lang ?? localSetting?.lang ?? cur.lang,
+            mode: partial.mode ?? localSetting?.mode ?? cur.mode,
+            hintMode: partial.hintMode ?? localSetting?.hintMode ?? cur.hintMode,
+            startChars: localSetting?.startChars ?? Array.from(cur.wantStartChar).join('')
+        };
+        setLocalSetting(merged);
+        gameManager.updateSetting({ roundTime: merged.roundTimeSeconds * 1000, notAgainSameChar: merged.notAgainSameChar, lang: merged.lang, mode: merged.mode, hintMode: merged.hintMode });
+        try {
+            localStorage.setItem('kkutu_game_setting', JSON.stringify(merged));
+        } catch (e) {
+            console.error(e);
+        }
+
+        // If words exist, reload DB so maps reflect mode changes
+        try {
+            const exists = await hasWords();
+            if (exists) {
+                const words = await getAllWords();
+                gameManager.loadWordDB(words.map(({ word, theme }) => ({ word, theme: theme.split(',') })), gameManager.getSetting());
+                setWordCount(words.length);
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const openStartCharModal = () => {
+        setStartCharInput(localSetting?.startChars ?? Array.from(gameManager.getSetting().wantStartChar).join(''));
+        setIsStartCharModalOpen(true);
+    };
+
+    const saveStartChars = async () => {
+        const cleaned = (startCharInput || '').replace(/\s+/g, '');
+        const chars = cleaned.split('').filter(c => c !== '');
+        const merged = { ...localSetting, startChars: cleaned } as typeof localSetting;
+        setLocalSetting(merged);
+        gameManager.updateSetting({ wantStartChar: new Set(chars) });
+        try {
+            localStorage.setItem('kkutu_game_setting', JSON.stringify({ ...merged }));
+        } catch (e) {
+            console.error(e);
+        }
+
+        try {
+            const exists = await hasWords();
+            if (exists) {
+                const words = await getAllWords();
+                gameManager.loadWordDB(words.map(({ word, theme }) => ({ word, theme: theme.split(',') })), gameManager.getSetting());
+                setWordCount(words.length);
+            }
+        } catch (e) {
+            console.error(e);
+        }
+
+        setIsStartCharModalOpen(false);
+    };
+
+    const checkExistingWords = async () => {
+        const exists = await hasWords();
+        if (exists) {
+            const words = await getAllWords();
+            gameManager.loadWordDB(words.map(({ word, theme }) => ({ word, theme: theme.split(',') })), gameManager.getSetting());
+            setWordCount(words.length);
+            setMessage(`저장된 단어가 ${words.length}개 있습니다.`);
+        }
+    };
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const selectedFile = e.target.files?.[0];
+        if (selectedFile) {
+            if (selectedFile.size > 1024 * 1024) {
+                setMessage('파일 크기는 1MB를 초과할 수 없습니다.');
+                setFile(null);
+                return;
+            }
+            if (!selectedFile.name.endsWith('.txt')) {
+                setMessage('txt 파일만 업로드 가능합니다.');
+                setFile(null);
+                return;
+            }
+            setFile(selectedFile);
+            setMessage('');
+        }
+    };
+
+    const handleUpload = async () => {
+        if (!file) {
+            setMessage('파일을 선택해주세요.');
+            return;
+        }
+
+        setIsUploading(true);
+        setMessage('단어를 불러오는 중...');
+
+        try {
+            const count = await loadWordsFromFile(file);
+            // 불러온 후 DB에서 전체를 읽어 gameManager에 로드
+            const words = await getAllWords();
+            gameManager.loadWordDB(words.map(({ word, theme }) => ({ word, theme: theme.split(',') })), gameManager.getSetting());
+            setWordCount(words.length);
+            setMessage(`${count}개의 단어를 성공적으로 불러왔습니다!`);
+            setFile(null);
+
+            // 파일 입력 초기화
+            const fileInput = document.getElementById('word-file-input') as HTMLInputElement;
+            if (fileInput) fileInput.value = '';
+        } catch (error) {
+            setMessage(`오류: ${error instanceof Error ? error.message : '알 수 없는 오류'}`);
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    const handleClearWords = async () => {
+        setConfirmOpen(true);
+    };
+
+    const performClearWords = async () => {
+        setConfirmOpen(false);
+        try {
+            await clearAllWords();
+            gameManager.clearDB();
+            setWordCount(0);
+            setMessage('모든 단어가 삭제되었습니다.');
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    return (
+        <>
+            <div className="game-setup-container bg-white dark:bg-gray-900 h-[410px] p-2 shadow-lg dark:shadow-none w-[1000px]">
+
+                {/* 단어 로드 및 게임 설정을 가로로 배치 */}
+                <div className="mb-4 flex gap-6 flex-col md:flex-row">
+                    {/* 단어 데이터베이스 섹션 (왼쪽) */}
+                    <div className="flex-1">
+                        <h2 className="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">단어 데이터베이스 설정</h2>
+                        <div className="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6 mb-4 bg-white dark:bg-gray-800">
+                            <div className="mb-4">
+                                <label htmlFor="word-file-input" className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">단어 파일 업로드 (txt, 최대 1MB)</label>
+                                <input
+                                    id="word-file-input"
+                                    type="file"
+                                    accept=".txt"
+                                    onChange={handleFileChange}
+                                    disabled={isUploading}
+                                    className="block w-full text-sm text-gray-500 dark:text-gray-200 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 dark:file:bg-blue-700 file:text-blue-700 dark:file:text-white hover:file:bg-blue-100 dark:hover:file:bg-blue-600 disabled:opacity-50"
+                                />
+                            </div>
+
+                            {file && (<div className="text-sm text-gray-600 mb-2">선택된 파일: {file.name} ({(file.size / 1024).toFixed(2)} KB)</div>)}
+
+                            <button onClick={handleUpload} disabled={!file || isUploading} className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors">{isUploading ? '업로드 중...' : '단어 불러오기'}</button>
+                        </div>
+
+                            {message && (<div className={`p-3 rounded-lg mb-4 ${message.includes('오류') ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200' : 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200'}`}>{message}</div>)}
+
+                        <div className="flex gap-3">
+                            <button onClick={() => setIsModalOpen(true)} className="bg-purple-500 text-white px-6 py-2 rounded-lg hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 transition-colors">단어 목록 조회 ({wordCount}개)</button>
+                            {wordCount > 0 && <button onClick={handleClearWords} className="bg-red-500 text-white px-6 py-2 rounded-lg hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 transition-colors">모든 단어 삭제</button>}
+                        </div>
+                    </div>
+
+                    {/* 게임 설정 (오른쪽) */}
+                    <div className="w-[320px] p-4 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-200 max-h-[320px] overflow-auto">
+                        <h2 className="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">게임 설정</h2>
+                        <div className="space-y-3">
+                            <div>
+                                <label className="block text-sm text-gray-700 dark:text-gray-200 mb-2">라운드 시간</label>
+                                <select value={localSetting?.roundTimeSeconds ?? 60} onChange={(e) => handleSettingChange({ roundTimeSeconds: parseInt(e.target.value, 10) })} className="w-full px-3 py-2 border rounded-lg">
+                                    <option value={0}>무제한</option>
+                                    <option value={10}>10초</option>
+                                    <option value={30}>30초</option>
+                                    <option value={60}>60초</option>
+                                    <option value={90}>90초</option>
+                                    <option value={120}>120초</option>
+                                    <option value={150}>150초</option>
+                                </select>
+                            </div>
+
+                            <div>
+                                <label className="block text-sm text-gray-700 dark:text-gray-200 mb-2">언어</label>
+                                <div className="flex gap-3">
+                                    <label className="inline-flex items-center gap-2">
+                                        <input
+                                            type="radio"
+                                            name="lang"
+                                            value="ko"
+                                            checked={(localSetting?.lang ?? 'ko') === 'ko'}
+                                            onChange={() => handleSettingChange({ lang: 'ko' })}
+                                        />
+                                        <span className="text-sm text-gray-700 dark:text-gray-200">한국어</span>
+                                    </label>
+                                    <label className="inline-flex items-center gap-2">
+                                        <input
+                                            type="radio"
+                                            name="lang"
+                                            value="en"
+                                            checked={(localSetting?.lang ?? 'ko') === 'en'}
+                                            onChange={() => handleSettingChange({ lang: 'en' })}
+                                        />
+                                        <span className="text-sm text-gray-700 dark:text-gray-200">English</span>
+                                    </label>
+                                </div>
+                            </div>
+
+                            <div>
+                                <label className="block text-sm text-gray-700 dark:text-gray-200 mb-2">모드</label>
+                                <div className="flex gap-3 mb-2">
+                                    <label className="inline-flex items-center gap-2">
+                                        <input
+                                            type="radio"
+                                            name="mode"
+                                            value="normal"
+                                            checked={(localSetting?.mode ?? 'normal') === 'normal'}
+                                            onChange={() => handleSettingChange({ mode: 'normal' })}
+                                        />
+                                        <span className="text-sm text-gray-700 dark:text-gray-200">일반</span>
+                                    </label>
+                                    <label className="inline-flex items-center gap-2">
+                                        <input
+                                            type="radio"
+                                            name="mode"
+                                            value="mission"
+                                            checked={(localSetting?.mode ?? 'normal') === 'mission'}
+                                            onChange={() => handleSettingChange({ mode: 'mission' })}
+                                        />
+                                        <span className="text-sm text-gray-700 dark:text-gray-200">미션</span>
+                                    </label>
+                                </div>
+
+                                <div>
+                                    <label className="block text-sm text-gray-70 dark:text-gray-200 mb-2">힌트 모드</label>
+                                    <div className="flex gap-3">
+                                        <label className="inline-flex items-center gap-2">
+                                            <input
+                                                type="radio"
+                                                name="hintMode"
+                                                value="special"
+                                                checked={(localSetting?.hintMode ?? 'special') === 'special'}
+                                                onChange={() => handleSettingChange({ hintMode: 'special' })}
+                                            />
+                                            <span className="text-sm text-gray-700 dark:text-gray-200">특수 힌트</span>
+                                        </label>
+                                        <label className="inline-flex items-center gap-2">
+                                            <input
+                                                type="radio"
+                                                name="hintMode"
+                                                value="auto"
+                                                checked={(localSetting?.hintMode ?? 'special') === 'auto'}
+                                                onChange={() => handleSettingChange({ hintMode: 'auto' })}
+                                            />
+                                            <span className="text-sm text-gray-700 dark:text-gray-200">랜덤 힌트</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div>
+                                <label className="inline-flex items-center gap-2">
+                                    <input type="checkbox" checked={localSetting?.notAgainSameChar ?? false} onChange={(e) => handleSettingChange({ notAgainSameChar: e.target.checked })} />
+                                    <span className="text-sm text-gray-700 dark:text-gray-200">이전에 나온글자 미표시</span>
+                                </label>
+                            </div>
+                            <div>
+                                    <label className="block text-sm text-gray-700 dark:text-gray-200 mb-2">제시어 설정</label>
+                                <div className="flex items-center gap-3">
+                                        <button onClick={openStartCharModal} className="bg-indigo-600 text-white px-3 py-1.5 rounded-lg hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 transition-colors">제시어 설정</button>
+                                        <span className="text-sm text-gray-700 dark:text-gray-200">선택됨: {(localSetting?.startChars ?? Array.from(gameManager.getSetting().wantStartChar).join('')).length}개</span>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* 단어 관리 모달 */}
+            {isModalOpen && (
+                <WordManagerModal
+                    onClose={() => {
+                        setIsModalOpen(false);
+                        checkExistingWords(); // 모달 닫을 때 단어 수 업데이트
+                    }}
+                />
+            )}
+
+            {confirmOpen && (
+                <ConfirmModal
+                    message={"모든 단어를 삭제하시겠습니까?"}
+                    onConfirm={performClearWords}
+                    onCancel={() => setConfirmOpen(false)}
+                />
+            )}
+
+            <StartCharModal value={startCharInput} open={isStartCharModalOpen} onClose={() => setIsStartCharModalOpen(false)} onChange={setStartCharInput} onSave={saveStartChars} />
+        </>
+    );
+};
+
+export default GameSetup;
\ No newline at end of file
diff --git a/app/mini-game/game/components/ConfirmModal.tsx b/app/mini-game/game/components/ConfirmModal.tsx
new file mode 100644
index 0000000..5dd7329
--- /dev/null
+++ b/app/mini-game/game/components/ConfirmModal.tsx
@@ -0,0 +1,25 @@
+"use client";
+import React from 'react';
+
+interface Props {
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+const ConfirmModal = ({ message, onConfirm, onCancel }: Props) => {
+    return (
+        <div className="fixed inset-0 backdrop-blur-md bg-black/30 dark:bg-black/40 flex items-center justify-center z-60" onClick={onCancel}>
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-[420px] p-6" onClick={(e) => e.stopPropagation()}>
+                <div className="text-lg font-medium mb-4 text-gray-800 dark:text-gray-100">확인</div>
+                <div className="mb-6 text-sm text-gray-700 dark:text-gray-200">{message}</div>
+                <div className="flex gap-3 justify-end">
+                    <button onClick={onCancel} className="px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 dark:text-gray-200">취소</button>
+                    <button onClick={onConfirm} className="px-4 py-2 rounded bg-red-500 dark:bg-red-600 text-white">확인</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmModal;
\ No newline at end of file
diff --git a/app/mini-game/game/components/DictionaryModal.tsx b/app/mini-game/game/components/DictionaryModal.tsx
new file mode 100644
index 0000000..83c6e05
--- /dev/null
+++ b/app/mini-game/game/components/DictionaryModal.tsx
@@ -0,0 +1,68 @@
+"use client";
+import React, { useState } from 'react';
+import gameManager from '../lib/GameManager';
+
+interface Props {
+    onClose: () => void;
+}
+
+const DictionaryModal = ({ onClose }: Props) => {
+    const [query, setQuery] = useState('');
+    const [result, setResult] = useState<string | null>(null);
+
+    const pattern = /[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g;
+
+    const doSearch = () => {
+        const trimmed = query.trim();
+        if (!trimmed) {
+            setResult(null);
+            return;
+        }
+        const sanitized = trimmed.replace(pattern, '').toLowerCase();
+        const themes = gameManager.getWordTheme(sanitized);
+        if (themes && themes.length > 0) {
+            setResult(`주제: ${themes.join(', ')}`);
+        } else {
+            setResult('없는 단어입니다');
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 backdrop-blur-md bg-white/30 dark:bg-black/30 flex items-center justify-center z-50" onClick={onClose}>
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-[640px] p-6" onClick={(e) => e.stopPropagation()}>
+                <div className="flex justify-between items-center mb-4">
+                    <h3 className="text-lg font-semibold">사전 검색</h3>
+                    <button onClick={onClose} className="text-gray-500">×</button>
+                </div>
+
+                <div className="space-y-4">
+                    <div className="flex gap-2">
+                        <input
+                            type="text"
+                            value={query}
+                            onChange={(e) => setQuery(e.target.value)}
+                            onKeyDown={(e) => e.key === 'Enter' && doSearch()}
+                            placeholder="단어를 입력하세요"
+                            className="flex-1 px-4 py-2 border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 rounded"
+                        />
+                        <button onClick={doSearch} className="bg-green-500 dark:bg-green-600 text-white px-4 py-2 rounded">검색</button>
+                    </div>
+
+                    <div className="min-h-[56px] p-3 border rounded bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100">
+                        {result === null ? (
+                            <div className="text-sm text-gray-500">단어를 입력하고 검색하세요.</div>
+                        ) : (
+                            <div className="text-sm">{result}</div>
+                        )}
+                    </div>
+
+                    <div className="flex">
+                        <button onClick={onClose} className="ml-auto bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-100 py-2 px-4 rounded">닫기</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DictionaryModal;
\ No newline at end of file
diff --git a/app/mini-game/game/components/GameInput.tsx b/app/mini-game/game/components/GameInput.tsx
new file mode 100644
index 0000000..8540d5c
--- /dev/null
+++ b/app/mini-game/game/components/GameInput.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+interface GameInputProps {
+    placeholder?: string;
+    readonly?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    className?: string;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+}
+
+/**
+ * 게임 입력창 컴포넌트
+ * 사용자가 단어를 입력하는 필드입니다.
+ */
+const GameInput = ({
+    placeholder = "Your turn - Input chat",
+    readonly = false,
+    value,
+    onChange,
+    onKeyDown,
+    className = "",
+    inputRef
+}: GameInputProps) => {
+    return (
+        <div className={`
+        relative 
+        mt-2
+        w-[460px]
+        p-[5px] 
+        rounded-[10px] 
+        bg-white
+        border-4
+        border-black
+        ${className}
+    `}>
+            <input
+                id="game-input"
+                type="text"
+                placeholder={placeholder}
+                readOnly={readonly}
+                value={value}
+                onChange={onChange}
+                onKeyDown={onKeyDown}
+                ref={inputRef}
+                autoComplete="off"
+                className="
+            w-[420px] 
+            h-[40px] 
+            text-xl 
+            bg-transparent 
+            border-none 
+            outline-none 
+            text-black 
+            placeholder-gray-400
+            px-2
+            "
+            />
+        </div>
+    );
+};
+
+export default GameInput;
\ No newline at end of file
diff --git a/app/mini-game/game/components/GameResultModal.tsx b/app/mini-game/game/components/GameResultModal.tsx
new file mode 100644
index 0000000..eb27358
--- /dev/null
+++ b/app/mini-game/game/components/GameResultModal.tsx
@@ -0,0 +1,104 @@
+"use client";
+import React, { useState } from 'react';
+import { Minimize2, Maximize2, X } from 'lucide-react';
+
+interface GameResultModalProps {
+    usedWords: { char: string, word: string, missionChar: string | null, useHintCount: number, isFailed?: boolean }[];
+    onClose: () => void;
+}
+
+/**
+ * 게임 결과 다이얼로그 컴포넌트 (비모달)
+ * 게임 종료 후 사용한 단어 목록을 표시합니다.
+ */
+const GameResultModal = ({ usedWords, onClose }: GameResultModalProps) => {
+    const [isMinimized, setIsMinimized] = useState(false);
+
+    return (
+        <div className="w-96 bg-white rounded-lg shadow-2xl border-2 border-blue-500 flex flex-col animate-slide-in-right">
+            {/* 헤더 */}
+            <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-3 rounded-t-lg flex justify-between items-center">
+                <h2 className="text-lg font-bold">🎮 게임 결과</h2>
+                <div className="flex gap-1">
+                    <button
+                        onClick={() => setIsMinimized(!isMinimized)}
+                        className="text-white hover:bg-white/20 rounded p-1 transition-colors"
+                        title={isMinimized ? "펼치기" : "최소화"}
+                    >
+                        {isMinimized ? <Maximize2 size={16} /> : <Minimize2 size={16} />}
+                    </button>
+                    <button
+                        onClick={onClose}
+                        className="text-white hover:bg-white/20 rounded p-1 transition-colors"
+                        title="닫기"
+                    >
+                        <X size={16} />
+                    </button>
+                </div>
+            </div>
+
+            {/* 내용 */}
+            {!isMinimized && (
+                <div className="flex-1 overflow-y-auto p-4 max-h-[70vh]">
+                    <div className="mb-3">
+                        <p className="text-sm font-semibold text-gray-700">
+                            총 <span className="text-blue-600 text-lg">{usedWords.length}</span>개의 단어를 사용했습니다!
+                        </p>
+                    </div>
+
+                    {usedWords.length === 0 ? (
+                        <p className="text-gray-500 text-center py-6 text-sm">사용한 단어가 없습니다.</p>
+                    ) : (
+                        <div className="space-y-2">
+                            {usedWords.map((item, index) => (
+                                <div
+                                    key={index}
+                                    className="border border-gray-200 rounded-md p-3 hover:bg-blue-50 transition-colors"
+                                >
+                                    <div className="flex items-start gap-2">
+                                        <span className="text-xs font-semibold text-gray-400 min-w-[24px] mt-0.5">
+                                            #{index + 1}
+                                        </span>
+                                        <div className="flex-1">
+                                            <div className="flex items-center gap-2 mb-1">
+                                                <span className="text-base font-bold text-blue-600">{item.char}</span>
+                                                <span className="text-gray-400 text-xs">→</span>
+                                                <span className={`text-base font-semibold ${item?.isFailed ? "text-red-600" : "text-gray-800"}`}>{item.word}</span>
+                                            </div>
+                                            <div className="flex gap-1.5 flex-wrap">
+                                                {item.missionChar && (
+                                                    <span className="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs font-semibold">
+                                                        미션: {item.missionChar}
+                                                    </span>
+                                                )}
+                                                {item.useHintCount > 0 && (
+                                                    <span className="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded text-xs">
+                                                        힌트 {item.useHintCount}회
+                                                    </span>
+                                                )}
+                                                {item?.isFailed && (
+                                                    <span className="px-2 py-0.5 bg-red-100 text-red-700 rounded text-xs font-semibold">
+                                                        입력 실패
+                                                    </span>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* 최소화 상태일 때 요약 정보 */}
+            {isMinimized && (
+                <div className="px-4 py-3 text-sm text-gray-700 border-t border-gray-200">
+                    총 {usedWords.length}개의 단어 사용
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default GameResultModal;
\ No newline at end of file
diff --git a/app/mini-game/game/components/GraphBar.tsx b/app/mini-game/game/components/GraphBar.tsx
new file mode 100644
index 0000000..095273d
--- /dev/null
+++ b/app/mini-game/game/components/GraphBar.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface GraphBarProps {
+    className: string;
+    min?: number;
+    val?: number;
+    max?: number;
+    bgc?: string;
+    noTransition?: boolean;
+    label?: string;
+}
+
+/**
+ * 진행 상태를 나타내는 그래프 바 컴포넌트
+ */
+const GraphBar = ({ className, min = 0, val = 0, max = 100, bgc, label, noTransition = false }: GraphBarProps) => {
+    const range = max - min || 1;
+    const percentage = Math.max(0, Math.min(100, ((val - min) / range) * 100));
+
+    return (
+        <div className={`${className} text-white text-right overflow-hidden`}>
+            <div
+                className="pt-[4px] h-[20px] text-[11px] whitespace-nowrap overflow-hidden"
+                style={{
+                    width: `${percentage}%`,
+                    backgroundColor: bgc || undefined,
+                    transition: noTransition ? 'none' : 'width 120ms linear',
+                    willChange: 'width'
+                }}
+            >
+                {label}
+            </div>
+        </div>
+    );
+};
+
+export default GraphBar;
\ No newline at end of file
diff --git a/app/mini-game/game/components/HelpModal.tsx b/app/mini-game/game/components/HelpModal.tsx
new file mode 100644
index 0000000..4d4f641
--- /dev/null
+++ b/app/mini-game/game/components/HelpModal.tsx
@@ -0,0 +1,76 @@
+"use client";
+import React from 'react';
+
+interface Props { onClose: () => void }
+
+const HelpModal = ({ onClose }: Props) => {
+    return (
+        <div className="fixed inset-0 backdrop-blur-md bg-white/30 dark:bg-black/30 flex items-center justify-center z-50 p-4" onClick={onClose}>
+            <div className="bg-gradient-to-br from-white to-blue-50 dark:from-gray-800 dark:to-gray-900 rounded-2xl shadow-2xl w-[90%] max-w-[700px] max-h-[85vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
+                <div className="flex justify-between items-center p-6 pb-4 border-b border-blue-100 dark:border-gray-700">
+                    <h3 className="text-2xl font-bold text-blue-900 dark:text-gray-100 flex items-center gap-2">
+                        📖 도움말
+                    </h3>
+                    <button onClick={onClose} className="text-gray-500 dark:text-gray-300 hover:text-gray-700 text-3xl transition-colors leading-none">&times;</button>
+                </div>
+                <div className="overflow-y-auto px-6 py-4 text-sm text-gray-700 dark:text-gray-200 space-y-4">
+                    <div className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl border border-green-200 dark:border-green-700 shadow-sm">
+                        <h4 className="font-bold text-green-800 dark:text-green-200 mb-2 flex items-center gap-2 text-base">
+                            🎮 게임시작 관련
+                        </h4>
+                        <ul className="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-200 ml-2">
+                            <li>단어리스트를 txt파일을 이용하여 업로드 합니다. <span className="text-xs text-gray-600 dark:text-gray-400">(주의사항: 단어는 한줄에 하나씩, 1mb이하 / 팁: 단어는 한번 업로드 시 로컬에 저장되어 재방문 시 유지됩니다. 단어 목록 조회버튼으로 단어를 관리할 수 있습니다)</span></li>
+                            <li>자신이 원하는 대로 모드를 수정합니다. <span className="text-xs text-gray-600 dark:text-gray-400">(팁: 설정도 로컬에 저장되어 재방문 시 유지됩니다)</span></li>
+                            <li>위에 있는 시작 버튼을 누르거나 채팅창에서 <strong className="text-green-700 dark:text-green-300">/시작</strong>, <strong className="text-green-700 dark:text-green-300">/ㄱ</strong>, <strong className="text-green-700 dark:text-green-300">/r</strong> 을 입력하여 시작할 수 있습니다.</li>
+                        </ul>
+                    </div>
+
+                    <div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl border border-blue-200 dark:border-blue-700 shadow-sm">
+                        <h4 className="font-bold text-blue-800 dark:text-blue-200 mb-2 flex items-center gap-2 text-base">
+                            ⚙️ 설정 관련
+                        </h4>
+                        <ul className="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-200 ml-2">
+                            <li><strong className="text-blue-700 dark:text-blue-300">라운드 시간:</strong> 라운드 시간을 설정합니다. 라운드 시간과 턴시간은 관련이 있지만 같지는 않습니다. 무제한으로 설정 시 턴시간도 무제한이 됩니다.</li>
+                            <li><strong className="text-blue-700 dark:text-blue-300">언어:</strong> 선택된 언어의 단어와 미션단어가 나옵니다.</li>
+                            <li><strong className="text-blue-700 dark:text-blue-300">모드:</strong> 일반 선택 시 시작글자에 맞으면서 단어 목록에 있으면 되지만, 미션을 선택 시에는 입력된 단어에 반드시 제시된 미션글자가 있어야 하며 단어 목록에도 있어야 합니다.</li>
+                            <li><strong className="text-blue-700 dark:text-blue-300">힌트 모드:</strong> 게임중 또는 게임후 표시될 힌트모드를 선택합니다. 특수 선택 시에는 일반모드면 제시된 첫글자에 맞으면서 가장 긴단어, 미션 모드면 미션글자가 가장 많이 포함되면서 가장 긴단어를 힌트로 알려주고 랜덤모드는 허용되는 단어 중 랜덤으로 1개를 알려줍니다.</li>
+                            <li><strong className="text-blue-700 dark:text-blue-300">이전에 나온 글자 미표시:</strong> 게임중 한번 나왔던 글자는 해당 게임중 다시 등장하지 않습니다. 하지만 해당 글자들 외에 가능한 글자가 없다면 무시됩니다.</li>
+                            <li><strong className="text-blue-700 dark:text-blue-300">제시어 설정:</strong> 게임중 제시되는 글자를 원하는 것으로 설정합니다. 공백없이 글자들을 나열해야 합니다. 해당 글자로 시작하는 단어들이 없으면 무시됩니다.</li>
+                        </ul>
+                    </div>
+
+                    <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl border border-purple-200 dark:border-purple-700 shadow-sm">
+                        <h4 className="font-bold text-purple-800 dark:text-purple-200 mb-2 flex items-center gap-2 text-base">
+                            🎯 게임중/종료 관련
+                        </h4>
+                        <ul className="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-200 ml-2">
+                            <li>게임 시작후 나오는 시작글자에 맞춰 업로드한 파일에 있는 단어를 입력하면 됩니다.</li>
+                            <li>미션 모드에서는 미션글자가 들어가야 올바른 단어로 허용합니다.</li>
+                            <li><strong className="text-purple-700 dark:text-purple-300">/ㅈㅈ</strong> 또는 <strong className="text-purple-700 dark:text-purple-300">/gg</strong>를 활용하여 게임을 즉시 종료할 수 있습니다.</li>
+                            <li>게임중 <strong className="text-purple-700 dark:text-purple-300">/v</strong> 또는 <strong className="text-purple-700 dark:text-purple-300">/ㅍ</strong>를 입력하여 힌트를 볼 수 있습니다.</li>
+                            <li>힌트를 요청 시 해당 시작글자에 대해 처음 요청이면 초성만, 2번째면 1/3은 공개 나머지는 초성, 3번째는 절반, 4번째는 2/3, 5번째는 전체를 공개합니다.</li>
+                            <li>게임 종료 시 사용했던 단어들을 알려주며 게임후 다시 확인하여 복습할 수 있습니다.</li>
+                            <li>게임 종료후 채팅창에 <strong className="text-purple-700 dark:text-purple-300">/r</strong>, <strong className="text-purple-700 dark:text-purple-300">/ㄱ</strong>으로 게임을 나가지 않고 같은 설정으로 다시 시작할 수 있습니다.</li>
+                        </ul>
+                    </div>
+
+                    <div className="bg-gradient-to-r from-amber-50 to-orange-50 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl border border-amber-200 dark:border-amber-700 shadow-sm">
+                        <h4 className="font-bold text-amber-800 dark:text-amber-200 mb-2 flex items-center gap-2 text-base">
+                            💡 기타 도움말
+                        </h4>
+                        <ul className="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-200 ml-2">
+                            <li>올리는 단어들은 모두 정규화(공백문자, 특수문자 등을 제거)되어 저장되며, 텍스트 파일을 업로드하여 단어가 저장된 경우 주제는 모두 &lt;자유&gt;로 설정됩니다.</li>
+                            <li>설정 버튼을 통해 소리의 크기를 변경할 수 있습니다.</li>
+                            <li>사전 버튼을 통해 단어가 만들어진 DB에 존재하는지 확인할 수 있습니다.</li>
+                        </ul>
+                    </div>
+                </div>
+                <div className="p-6 pt-4 border-t border-blue-100 dark:border-gray-700">
+                    <button onClick={onClose} className="w-full px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 dark:from-gray-700 dark:to-gray-800 hover:from-blue-700 hover:to-blue-800 text-white rounded-lg font-semibold shadow-md transition-all duration-200 hover:shadow-lg">닫기</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default HelpModal;
\ No newline at end of file
diff --git a/app/mini-game/game/components/HistoryHolder.tsx b/app/mini-game/game/components/HistoryHolder.tsx
new file mode 100644
index 0000000..c7469a6
--- /dev/null
+++ b/app/mini-game/game/components/HistoryHolder.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+interface HistoryItemProps {
+    theme?: string[];
+    className?: string;
+    word: string;
+    meaning?: string;
+    wordType?: 'm1' | 'm2' | 'm3';
+    wordTheme?: string;
+}
+
+interface TooltipPortalProps {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    portalId?: string;
+    initialLeft?: number;
+    targetTop?: number;
+    targetBottom?: number;
+}
+
+/**
+ * 툴팁을 포탈로 렌더링하는 컴포넌트
+ * 부모 요소의 overflow: hidden 제약을 벗어나기 위해 사용합니다.
+ */
+const TooltipPortal = ({ children, style, portalId, initialLeft, targetTop, targetBottom }: TooltipPortalProps) => {
+    const [mountNode, setMountNode] = useState<HTMLElement | null>(null);
+    const innerRef = useRef<HTMLDivElement | null>(null);
+    const [appliedStyle, setAppliedStyle] = useState<React.CSSProperties | null>(null);
+
+    useEffect(() => {
+        let node = document.getElementById(portalId || 'history-tooltip-root');
+        let created = false;
+        if (!node) {
+            node = document.createElement('div');
+            node.id = portalId || 'history-tooltip-root';
+            document.body.appendChild(node);
+            created = true;
+        }
+        setMountNode(node);
+        return () => {
+            if (created && node && node.parentNode) node.parentNode.removeChild(node);
+        };
+    }, [portalId]);
+
+    useEffect(() => {
+        // 스타일이 직접 제공된 경우 폴백으로 사용
+        if (style && initialLeft === undefined && targetTop === undefined) {
+            setAppliedStyle(style);
+            return;
+        }
+
+        // 마운트 후 내부 콘텐츠 크기를 측정하고 뷰포트 내에 유지되도록 위치 조정
+        const measureAndAdjust = () => {
+            const el = innerRef.current;
+            if (!el || typeof initialLeft !== 'number' || typeof targetTop !== 'number' || typeof targetBottom !== 'number') return;
+            const rect = el.getBoundingClientRect();
+            const winW = window.innerWidth;
+            const margin = 8;
+            const tooltipW = Math.min(rect.width, Math.max(0, winW - margin * 2));
+
+            // 툴팁이 뷰포트 내에 머물도록 x 좌표 클램핑
+            let left = initialLeft;
+            left = Math.max(left, margin + tooltipW / 2);
+            left = Math.min(left, winW - margin - tooltipW / 2);
+
+            // 타겟 위에 표시할지 아래에 표시할지 결정
+            const tooltipH = rect.height;
+            // 위쪽 공간이 충분하면 위에 표시
+            if (targetTop - margin - tooltipH >= margin) {
+                const top = targetTop - margin; // translateY(-100%)로 바닥 정렬
+                setAppliedStyle({ position: 'fixed', left, top, transform: 'translateX(-50%) translateY(-100%)', zIndex: 9999 });
+            } else {
+                // 아래에 표시
+                const top = targetBottom + margin;
+                setAppliedStyle({ position: 'fixed', left, top, transform: 'translateX(-50%)', zIndex: 9999 });
+            }
+        };
+
+        // DOM 업데이트 보장을 위해 다음 프레임에 측정
+        const id = requestAnimationFrame(measureAndAdjust);
+        // 리사이즈/스크롤 시 재측정
+        window.addEventListener('resize', measureAndAdjust);
+        window.addEventListener('scroll', measureAndAdjust, true);
+        return () => {
+            cancelAnimationFrame(id);
+            window.removeEventListener('resize', measureAndAdjust);
+            window.removeEventListener('scroll', measureAndAdjust, true);
+        };
+    }, [style, initialLeft, targetTop, children]);
+
+    if (!mountNode) return null;
+
+    return createPortal(
+        <div ref={innerRef} style={appliedStyle || style || undefined} className="pointer-events-none">
+            {children}
+        </div>,
+        mountNode
+    );
+};
+
+/**
+ * 히스토리 아이템 컴포넌트
+ * 사용된 단어 정보를 표시하고 호버 시 상세 정보를 툴팁으로 보여줍니다.
+ */
+const HistoryItem = ({
+    theme,
+    className,
+    word,
+    meaning,
+    wordType,
+    wordTheme
+}: HistoryItemProps) => {
+    const getWordHeadStyle = () => {
+        switch (wordType) {
+            case 'm1':
+                return 'px-0.5 mx-0.5 text-black font-bold bg-gray-300';
+            case 'm2':
+                return 'text-green-400';
+            case 'm3':
+                return 'text-gray-200 before:content-["("] after:content-[")"]';
+            default:
+                return '';
+        }
+    };
+
+    const ref = useRef<HTMLDivElement | null>(null);
+    const [hover, setHover] = useState(false);
+    const [coords, setCoords] = useState({ left: 0, top: 0, bottom: 0 });
+
+    const handleEnter = (e: React.MouseEvent) => {
+        setCoords({ left: e.clientX, top: e.clientY, bottom: e.clientY });
+        setHover(true);
+    };
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+        setCoords({ left: e.clientX, top: e.clientY, bottom: e.clientY });
+    };
+
+    const handleLeave = () => setHover(false);
+
+    return (
+        <div ref={ref} onMouseEnter={handleEnter} onMouseMove={handleMouseMove} onMouseLeave={handleLeave} className="relative group h-10 w-[170px] px-3 py-1 rounded-lg m-1 text-gray-200 text-center bg-gray-800 flex flex-col justify-center items-center overflow-hidden cursor-pointer">
+            {/* 첫 번째 줄: 단어 + 품사 */}
+            <div className="flex items-center w-full overflow-hidden justify-center">
+                <span className={`mr-1 ${getWordHeadStyle()} truncate max-w-[230px] text-center text-[14px]`}>
+                    {word}
+                </span>
+                {className && (
+                    <span className="rounded ml-1 text-[10px] text-black bg-blue-400 truncate max-w-[32px]">
+                        {className}
+                    </span>
+                )}
+            </div>
+
+            {/* 두 번째 줄: 주제 + 뜻 */}
+            <div className="flex items-center text-xs overflow-hidden">
+                {theme && theme.length > 0 && (
+                    theme.map((t, index) => (
+                        <span key={index} className="mx-1 text-sky-300">
+                            &lt;{t}&gt; {index < theme.length - 1 ? ',' : ''}
+                        </span>
+                    ))
+                )}
+
+                {wordTheme && (
+                    <span className="text-sky-300 before:content-['<'] after:content-['>']">
+                        {wordTheme}
+                    </span>
+                )}
+
+                {meaning && (
+                    <span className="px-0.5 pt-0.5 pb-0 pl-0.5 text-gray-400 truncate">
+                        {meaning}
+                    </span>
+                )}
+            </div>
+
+            {/* 호버 툴팁: 포탈로 렌더링하여 오버플로우 제약 회피 */}
+            {hover && (
+                <TooltipPortal initialLeft={coords.left} targetTop={coords.top} targetBottom={coords.bottom}>
+                    <div className="bg-gray-900 text-white px-4 py-3 rounded-lg shadow-2xl border-2 border-gray-600 whitespace-normal break-words break-all max-w-[420px]">
+                        <div className="flex items-center gap-2 mb-1.5">
+                            <span className={`text-base font-semibold ${getWordHeadStyle()} break-all`}>
+                                {word}
+                            </span>
+                            {className && (
+                                <span className="rounded px-2 py-0.5 text-xs text-black bg-blue-400">
+                                    {className}
+                                </span>
+                            )}
+                        </div>
+                        <div className="flex items-center gap-2 text-sm flex-wrap">
+                            {theme && theme.length > 0 && (
+                                <span className="text-sky-300 break-words">
+                                    &lt;{theme.join(', ')}&gt;
+                                </span>
+                            )}
+                            {wordTheme && (
+                                <span className="text-sky-300 break-words">
+                                    &lt;{wordTheme}&gt;
+                                </span>
+                            )}
+                            {meaning && (
+                                <span className="text-gray-300 break-words">
+                                    {meaning}
+                                </span>
+                            )}
+                        </div>
+                    </div>
+                </TooltipPortal>
+            )}
+        </div>
+    );
+};
+
+/**
+ * 히스토리 목록 컨테이너
+ * 사용된 단어들의 목록을 가로 스크롤 가능한 영역에 표시합니다.
+ */
+const HistoryHolder = ({ historyItems }: { historyItems: { theme: string[]; word: string }[] }) => {
+    return (
+        <div className="w-[990px] h-10 relative">
+            <div className="w-[1200px] h-[42px] flex items-center overflow-x-auto overflow-y-hidden">
+                {historyItems.map((item, index) => (
+                    <HistoryItem key={index} {...item} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default HistoryHolder;
\ No newline at end of file
diff --git a/app/mini-game/game/components/KkutuMenu.tsx b/app/mini-game/game/components/KkutuMenu.tsx
new file mode 100644
index 0000000..10add5d
--- /dev/null
+++ b/app/mini-game/game/components/KkutuMenu.tsx
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { HelpCircle, Settings, Book, LogOut, Play } from 'lucide-react';
+import { useGameState } from '../hooks/useGameState';
+import HelpModal from './HelpModal';
+import SettingsModal from './SettingsModal';
+import DictionaryModal from './DictionaryModal';
+import ConfirmModal from './ConfirmModal';
+
+/**
+ * 게임 상단 메뉴 컴포넌트
+ * 도움말, 설정, 사전, 시작, 나가기 버튼을 포함합니다.
+ */
+const KkutuMenu = () => {
+    const { isPlaying, requestStart, exitGame, startBlocked, startBlockedMessage, dismissStartBlocked } = useGameState();
+
+    const [helpOpen, setHelpOpen] = useState(false);
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [dictOpen, setDictOpen] = useState(false);
+
+    // 버튼 클릭 핸들러
+    const handleButtonClick = (buttonId: string) => {
+        if (buttonId === 'start') {
+            requestStart();
+        } else if (buttonId === 'exit') {
+            exitGame();
+        } else if (buttonId === 'help') {
+            setHelpOpen(true);
+        } else if (buttonId === 'settings') {
+            setSettingsOpen(true);
+        } else if (buttonId === 'dict') {
+            setDictOpen(true);
+        }
+        // 추후 기능 구현 예정 (settings, dict)
+    };
+
+    const buttonBaseClasses = "border-none rounded-t-lg h-8 transition-all duration-200 hover:scale-115 hover:shadow-lg shadow-md px-6 mt-5 origin-bottom text-gray-800 border-gray-800";
+
+    return (
+        <div className="w-[1010px] h-[40px] flex items-end">
+            {/* 도움말 버튼 */}
+            <button
+                id="HelpBtn"
+                className={`${buttonBaseClasses} bg-gray-400 hover:bg-gray-500 flex items-center justify-center gap-1 text-sm font-medium`}
+                onClick={() => handleButtonClick('help')}
+                aria-label="도움말"
+            >
+                <HelpCircle size={16} />
+                <span className='text-gray-900'>도움말</span>
+            </button>
+
+            {/* 설정 버튼 */}
+            <button
+                id="SettingBtn"
+                className={`${buttonBaseClasses} bg-gray-500 hover:bg-gray-600 flex items-center justify-center gap-1 text-sm font-medium`}
+                onClick={() => handleButtonClick('settings')}
+                aria-label="설정"
+            >
+                <Settings size={16} color='white' />
+                <span className='text-white'>설정</span>
+            </button>
+
+            {/* 사전 버튼 */}
+            <button
+                id="DictionaryBtn"
+                className={`${buttonBaseClasses} bg-green-400 hover:bg-green-500 flex items-center justify-center gap-1 text-sm font-medium`}
+                onClick={() => handleButtonClick('dict')}
+            >
+                <Book size={14} />
+                <span>사전</span>
+            </button>
+
+            {/* 시작 버튼 (게임 시작 전에만 표시) */}
+            {!isPlaying && (
+                <button
+                    id="StartBtn"
+                    className={`${buttonBaseClasses} flex items-center justify-center gap-1 text-sm font-medium`}
+                    style={{ backgroundColor: '#FFB576' }}
+                    onClick={() => handleButtonClick('start')}
+                >
+                    <Play size={14} />
+                    <span>시작</span>
+                </button>
+            )}
+
+            {/* 나가기 버튼 (게임 시작 후에만 표시) */}
+            {isPlaying && (
+                <button
+                    id="ExitBtn"
+                    className={`${buttonBaseClasses} bg-red-300 hover:bg-red-400 flex items-center justify-center gap-1 text-sm font-medium`}
+                    onClick={() => handleButtonClick('exit')}
+                >
+                    <LogOut size={14} />
+                    <span>나가기</span>
+                </button>
+            )}
+                
+
+            {helpOpen && (
+                <HelpModal onClose={() => setHelpOpen(false)} />
+            )}
+
+            {settingsOpen && (
+                <SettingsModal onClose={() => setSettingsOpen(false)} />
+            )}
+
+            {dictOpen && (
+                <DictionaryModal onClose={() => setDictOpen(false)} />
+            )}
+
+            {startBlocked && (
+                <ConfirmModal
+                    message={startBlockedMessage ?? '게임을 시작할 수 없습니다.'}
+                    onConfirm={() => dismissStartBlocked()}
+                    onCancel={() => dismissStartBlocked()}
+                />
+            )}
+        </div>
+    );
+};
+
+export default KkutuMenu;
\ No newline at end of file
diff --git a/app/mini-game/game/components/SettingsModal.tsx b/app/mini-game/game/components/SettingsModal.tsx
new file mode 100644
index 0000000..ae97871
--- /dev/null
+++ b/app/mini-game/game/components/SettingsModal.tsx
@@ -0,0 +1,68 @@
+"use client";
+import React, { useEffect, useState } from 'react';
+import { soundManager } from '../lib/SoundManager';
+
+interface Props {
+    onClose: () => void;
+}
+
+const SettingsModal = ({ onClose }: Props) => {
+    const [volume, setVolume] = useState(100);
+
+    useEffect(() => {
+        try {
+            const v = localStorage.getItem('kkutuVolume');
+            if (v !== null) setVolume(Number(v));
+        } catch (e) { console.error(e); }
+    }, []);
+
+    const handleChange = (v: number) => {
+        setVolume(v);
+        try {
+            soundManager.setAllVolume(v / 100);
+        } catch (e) { console.error(e); }
+    };
+
+    const handleSave = () => {
+        try {
+            localStorage.setItem('kkutuVolume', String(volume));
+        } catch (e) { console.error(e); }
+        try {
+            soundManager.setAllVolume(volume / 100);
+        } catch (e) { console.error(e); }
+        onClose();
+    };
+
+    return (
+        <div className="fixed inset-0 backdrop-blur-md bg-white/30 dark:bg-black/30 flex items-center justify-center z-50" onClick={onClose}>
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-[480px] p-6" onClick={(e) => e.stopPropagation()}>
+                <div className="flex justify-between items-center mb-4">
+                    <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100">설정</h3>
+                    <button onClick={onClose} className="text-gray-500 dark:text-gray-300">×</button>
+                </div>
+
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-sm text-gray-700 dark:text-gray-200 mb-2">효과음/배경음 볼륨</label>
+                        <input
+                            type="range"
+                            min={0}
+                            max={100}
+                            value={volume}
+                            onChange={(e) => handleChange(Number(e.target.value))}
+                            className="w-full"
+                        />
+                        <div className="text-sm text-gray-600 dark:text-gray-300 mt-1">{volume}%</div>
+                    </div>
+
+                    <div className="flex gap-2">
+                        <button onClick={handleSave} className="flex-1 bg-blue-600 dark:bg-blue-500 text-white py-2 rounded">저장</button>
+                        <button onClick={onClose} className="flex-1 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-100 py-2 rounded">취소</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SettingsModal;
\ No newline at end of file
diff --git a/app/mini-game/game/components/StartCharModal.tsx b/app/mini-game/game/components/StartCharModal.tsx
new file mode 100644
index 0000000..4841d77
--- /dev/null
+++ b/app/mini-game/game/components/StartCharModal.tsx
@@ -0,0 +1,30 @@
+"use client";
+import React from 'react';
+
+type Props = {
+    value: string;
+    open: boolean;
+    onClose: () => void;
+    onChange: (v: string) => void;
+    onSave: () => void;
+};
+
+const StartCharModal = ({ value, open, onClose, onChange, onSave }: Props) => {
+    if (!open) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-md bg-white/30 dark:bg-black/30">
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-[520px] p-6">
+                <h3 className="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-100">제시어 시작글자 설정</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">원하는 시작 글자들을 공백 없이 나열해 입력하세요. 예: 한글 시작글자 `&apos;가나다&apos;` 또는 영문 시작글자 `&apos;abc&apos;`</p>
+                <textarea value={value} onChange={(e) => onChange(e.target.value)} rows={3} className="w-full p-2 border rounded-md mb-3 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600" placeholder="예: 가나다" />
+                <div className="flex justify-end gap-2">
+                    <button onClick={onClose} className="px-4 py-2 rounded-lg border dark:border-gray-600 dark:text-gray-100">취소</button>
+                    <button onClick={onSave} className="px-4 py-2 rounded-lg bg-indigo-600 dark:bg-indigo-500 text-white">저장</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default StartCharModal;
\ No newline at end of file
diff --git a/app/mini-game/game/components/WordManagerModal.tsx b/app/mini-game/game/components/WordManagerModal.tsx
new file mode 100644
index 0000000..eef74c9
--- /dev/null
+++ b/app/mini-game/game/components/WordManagerModal.tsx
@@ -0,0 +1,313 @@
+"use client";
+import React, { useState, useEffect, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { getAllWords, searchWordsByPrefix, updateWord, deleteWord, addWord } from '../lib/wordDB';
+import gameManager from '../lib/GameManager';
+import ConfirmModal from './ConfirmModal';
+
+interface WordManagerModalProps {
+    onClose: () => void;
+}
+
+/**
+ * 단어 관리 모달 컴포넌트
+ * ㄱㄴㄷ순 정렬, 접두사 검색, 수정, 삭제 기능 제공
+ */
+const WordManagerModal = ({ onClose }: WordManagerModalProps) => {
+    const [words, setWords] = useState<Array<{ word: string; theme: string }>>([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [editingWord, setEditingWord] = useState<string | null>(null);
+    const [editValue, setEditValue] = useState('');
+    const [newWord, setNewWord] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
+    const [addError, setAddError] = useState('');
+    const [editError, setEditError] = useState('');
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [confirmTarget, setConfirmTarget] = useState<string | null>(null);
+    const parentRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        loadWords();
+    }, []);
+
+    const loadWords = async () => {
+        setIsLoading(true);
+        const allWords = await getAllWords();
+        setWords(allWords);
+        setIsLoading(false);
+    };
+
+    const handleSearch = async () => {
+        if (!searchQuery.trim()) {
+            loadWords();
+            return;
+        }
+
+        const results = await searchWordsByPrefix(searchQuery.trim());
+        setWords(results);
+    };
+
+    const handleEdit = (word: string) => {
+        setEditingWord(word);
+        setEditValue(word);
+    };
+
+    const handleSaveEdit = async (oldWord: string) => {
+        const trimmed = editValue.trim();
+        const pattern = /[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g;
+        const sanitized = trimmed.replace(pattern, '');
+        if (!trimmed || sanitized.length <= 1) {
+            setEditError('유효한 단어를 입력하세요. (특수문자 제거 후 길이 2 이상)');
+            return;
+        }
+        setEditError('');
+        if (sanitized && sanitized !== oldWord) {
+            try {
+                await updateWord(oldWord, sanitized);
+                gameManager.editWordInDB(oldWord, sanitized);
+                await loadWords();
+            } catch (error) {
+                setEditError('단어 수정 중 오류가 발생했습니다.');
+                console.error(error);
+            }
+        }
+        setEditingWord(null);
+        setEditValue('');
+    };
+
+    const handleCancelEdit = () => {
+        setEditingWord(null);
+        setEditValue('');
+    };
+
+    const handleDelete = (word: string) => {
+        setConfirmTarget(word);
+        setConfirmOpen(true);
+    };
+
+    const handleConfirmDelete = async () => {
+        const word = confirmTarget;
+        setConfirmOpen(false);
+        setConfirmTarget(null);
+        if (!word) return;
+        try {
+            await deleteWord(word);
+            gameManager.deleteWordFromDB(word);
+            await loadWords();
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const handleAddWord = async () => {
+        const trimmed = newWord.trim();
+        const pattern = /[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g;
+        const sanitized = trimmed.replace(pattern, '');
+        if (!trimmed || sanitized.length <= 1) {
+            setAddError('유효한 단어를 입력하세요. (특수문자 제거 후 길이 2 이상)');
+            return;
+        }
+        setAddError('');
+        try {
+            await addWord(sanitized);
+            gameManager.addWordToDB(sanitized, ['자유']);
+            setNewWord('');
+            await loadWords();
+        } catch (error) {
+            setAddError('단어 추가 중 오류가 발생했습니다.');
+            console.error(error);
+        }
+    };
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            handleSearch();
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchQuery]);
+
+    const rowHeight = 56;
+    const virtualizer = useVirtualizer({
+        count: words.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => rowHeight,
+        overscan: 5,
+    });
+
+    return (
+        <div
+            className="fixed inset-0 backdrop-blur-md bg-white/30 dark:bg-black/30 flex items-center justify-center z-49"
+            onClick={onClose}
+        >
+            <div
+                className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-[90%] max-w-[800px] max-h-[80vh] flex flex-col text-gray-900 dark:text-gray-200"
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* 헤더 */}
+                <div className="flex justify-between items-center p-6 border-b dark:border-gray-700">
+                    <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100">
+                        단어 목록 관리
+                    </h2>
+                    <button
+                        onClick={onClose}
+                        className="text-gray-500 dark:text-gray-300 hover:text-gray-700 text-2xl font-bold"
+                    >
+                        ×
+                    </button>
+                </div>
+
+                {/* 검색 및 추가 섹션 */}
+                <div className="p-6 border-b space-y-4">
+                    {/* 검색 */}
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+                            단어 검색 (접두사)
+                        </label>
+                        <input
+                            type="text"
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            placeholder="예: 끝말, 게임..."
+                            className="w-full px-4 py-2 border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        />
+                    </div>
+
+                    {/* 새 단어 추가 */}
+                    <div className="flex gap-2">
+                        <input
+                            type="text"
+                            value={newWord}
+                            onChange={(e) => setNewWord(e.target.value)}
+                            onKeyDown={(e) => e.key === 'Enter' && handleAddWord()}
+                            placeholder="새 단어 추가..."
+                            className="flex-1 px-4 py-2 border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
+                        />
+                        <button
+                            onClick={handleAddWord}
+                            className="bg-green-500 dark:bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-600 dark:hover:bg-green-700 transition-colors"
+                        >
+                            추가
+                        </button>
+                    </div>
+                    {addError && (
+                        <div className="text-sm text-red-500 dark:text-red-300 mt-2">{addError}</div>
+                    )}
+                </div>
+
+                {/* 단어 목록 */}
+                <div ref={parentRef} className="flex-1 overflow-y-auto p-6">
+                    {isLoading ? (
+                        <div className="text-center text-gray-500 dark:text-gray-400 py-8">
+                            로딩 중...
+                        </div>
+                    ) : words.length === 0 ? (
+                        <div className="text-center text-gray-500 dark:text-gray-400 py-8">
+                            {searchQuery ? '검색 결과가 없습니다.' : '등록된 단어가 없습니다.'}
+                        </div>
+                    ) : (
+                        <>
+                            <div className="text-sm text-gray-600 mb-4">
+                                총 {words.length}개의 단어
+                            </div>
+                            <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
+                                {virtualizer.getVirtualItems().map((virtualRow) => {
+                                    const item = words[virtualRow.index];
+                                    return (
+                                        <div
+                                            key={item.word}
+                                            style={{
+                                                position: 'absolute',
+                                                top: 0,
+                                                left: 0,
+                                                width: '100%',
+                                                transform: `translateY(${virtualRow.start}px)`,
+                                            }}
+                                            className="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                                        >
+                                            {editingWord === item.word ? (
+                                                <>
+                                                    <input
+                                                        type="text"
+                                                        value={editValue}
+                                                        onChange={(e) => setEditValue(e.target.value)}
+                                                        onKeyDown={(e) => {
+                                                            if (e.key === 'Enter') handleSaveEdit(item.word);
+                                                            if (e.key === 'Escape') handleCancelEdit();
+                                                        }}
+                                                        className="flex-1 px-3 py-1 border border-blue-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                                        autoFocus
+                                                    />
+                                                    <div className="flex gap-2 ml-3">
+                                                        <button
+                                                            onClick={() => handleSaveEdit(item.word)}
+                                                            className="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 text-sm"
+                                                        >
+                                                            저장
+                                                        </button>
+                                                        <button
+                                                            onClick={handleCancelEdit}
+                                                            className="bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600 text-sm"
+                                                        >
+                                                            취소
+                                                        </button>
+                                                    </div>
+                                                    {editError && (
+                                                        <div className="text-sm text-red-500 mt-2">{editError}</div>
+                                                    )}
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <div className="flex-1">
+                                                        <span className="text-gray-800 font-medium">
+                                                            {item.word}
+                                                        </span>
+                                                        <span className="ml-3 text-sm text-gray-500">
+                                                            ({item.theme})
+                                                        </span>
+                                                    </div>
+                                                    <div className="flex gap-2">
+                                                        <button
+                                                            onClick={() => handleEdit(item.word)}
+                                                            className="bg-yellow-500 text-white px-3 py-1 rounded hover:bg-yellow-600 text-sm"
+                                                        >
+                                                            수정
+                                                        </button>
+                                                        <button
+                                                            onClick={() => handleDelete(item.word)}
+                                                            className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600 text-sm"
+                                                        >
+                                                            삭제
+                                                        </button>
+                                                    </div>
+                                                </>
+                                            )}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </>
+                    )}
+                </div>
+
+                {/* 푸터 */}
+                <div className="p-6 border-t bg-gray-50 dark:bg-gray-700">
+                    <button
+                        onClick={onClose}
+                        className="w-full bg-gray-600 dark:bg-gray-700 text-white py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition-colors font-medium"
+                    >
+                        닫기
+                    </button>
+                </div>
+            </div>
+            {confirmOpen && (
+                <ConfirmModal
+                    message={`"${confirmTarget}"를 삭제하시겠습니까?`}
+                    onConfirm={handleConfirmDelete}
+                    onCancel={() => { setConfirmOpen(false); setConfirmTarget(null); }}
+                />
+            )}
+        </div>
+    );
+};
+
+export default WordManagerModal;
\ No newline at end of file
diff --git a/app/mini-game/game/const.ts b/app/mini-game/game/const.ts
new file mode 100644
index 0000000..f6084a4
--- /dev/null
+++ b/app/mini-game/game/const.ts
@@ -0,0 +1,17 @@
+export const KOREAN_CHARS = ['가', '나', '다', '라', '마', '바', '사', '아', '자', '차', '카', '타', '파', '하'];
+export const ENGLISH_CHARS = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
+
+export const BEAT = [
+    null,
+    "10000000",
+    "10001000",
+    "10010010",
+    "10011010",
+    "11011010",
+    "11011110",
+    "11011111",
+    "11111111"
+];
+
+export const koreanRegex = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;
+export const englishRegex = /[a-zA-Z]/;
\ No newline at end of file
diff --git a/app/mini-game/game/hooks/useChat.ts b/app/mini-game/game/hooks/useChat.ts
new file mode 100644
index 0000000..0d68d3a
--- /dev/null
+++ b/app/mini-game/game/hooks/useChat.ts
@@ -0,0 +1,112 @@
+import React, { createContext, useContext, useRef, useState } from "react";
+
+export interface ChatMessage {
+    id: number;
+    username: string;
+    message: string;
+    timestamp: string;
+    isNotice?: boolean;
+}
+
+type ChatContextType = {
+    chatInput: string;
+    setChatInput: (v: string) => void;
+    handleChatInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    // Register / call the game's input handler without causing re-renders.
+    registerGameHandleInput: (fn: ((s: string) => void) | null) => void;
+    callGameInput: (s: string) => void;
+    gameInputVisible: boolean;
+    setGameInputVisible: (v: boolean) => void;
+    // allow registering a global sendHint function so other UI (GameHead) can trigger it
+    registerSendHint: (fn: (() => void) | null) => void;
+    sendHint: () => void;
+    // chat log shared state and helpers
+    messages: ChatMessage[];
+    setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
+    chatRef: React.RefObject<HTMLDivElement | null>;
+    clearMessagesAndShowStartNotice: () => void;
+};
+
+const ChatContext = createContext<ChatContextType | undefined>(undefined);
+
+/**
+ * 채팅 입력 상태를 관리하는 Provider 컴포넌트
+ * 게임 내 채팅 입력값을 전역적으로 관리합니다.
+ */
+export const ChatProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [chatInput, setChatInput] = useState("");
+    const gameHandleRef = useRef<((s: string) => void) | null>(null);
+    const sendHintRef = useRef<(() => void) | null>(null);
+    const [gameInputVisible, setGameInputVisible] = useState<boolean>(false);
+    const [messages, setMessages] = useState<ChatMessage[]>([
+        {
+            id: 1,
+            username: '알림',
+            message: '게임방에 입장하셨습니다.',
+            timestamp: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' }),
+            isNotice: true
+        }
+    ]);
+    const chatRef = useRef<HTMLDivElement>(null);
+
+    /**
+     * 채팅 입력값 변경 핸들러
+     */
+    const handleChatInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setChatInput(e.target.value);
+    };
+
+    const registerGameHandleInput = (fn: ((s: string) => void) | null) => {
+        gameHandleRef.current = fn;
+    };
+
+    const callGameInput = (s: string) => {
+        try {
+            gameHandleRef.current?.(s);
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const registerSendHint = (fn: (() => void) | null) => {
+        sendHintRef.current = fn;
+    };
+
+    const sendHint = () => {
+        try {
+            sendHintRef.current?.();
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const clearMessagesAndShowStartNotice = () => {
+        const noticeMessage: ChatMessage = {
+            id: Date.now(),
+            username: '알림',
+            message: '게임을 시작합니다!',
+            timestamp: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' }),
+            isNotice: true
+        };
+        setMessages([noticeMessage]);
+        setChatInput('');
+    };
+
+    return React.createElement(
+        ChatContext.Provider,
+        { value: { chatInput, setChatInput, handleChatInputChange, registerGameHandleInput, callGameInput, gameInputVisible, setGameInputVisible, registerSendHint, sendHint, messages, setMessages, chatRef, clearMessagesAndShowStartNotice } },
+        children
+    );
+};
+
+/**
+ * 채팅 컨텍스트를 사용하기 위한 커스텀 훅
+ * ChatProvider 내부에서만 사용 가능합니다.
+ */
+export const useChat = () => {
+    const ctx = useContext(ChatContext);
+    if (!ctx) {
+        throw new Error("useChat must be used within a ChatProvider");
+    }
+    return ctx;
+};
\ No newline at end of file
diff --git a/app/mini-game/game/hooks/useChatLog.ts b/app/mini-game/game/hooks/useChatLog.ts
new file mode 100644
index 0000000..6829145
--- /dev/null
+++ b/app/mini-game/game/hooks/useChatLog.ts
@@ -0,0 +1,133 @@
+import { useEffect } from 'react';
+import { useChat, ChatMessage } from './useChat';
+import { useGameState } from './useGameState';
+import gameManager from '../lib/GameManager';
+
+/**
+ * 채팅 메시지 목록 및 전송 로직을 관리하는 커스텀 훅
+ */
+export const useChatLog = () => {
+    const { messages, setMessages, chatInput, setChatInput, callGameInput, registerSendHint, chatRef } = useChat();
+    const { requestStart, isPlaying } = useGameState();
+
+    const handleSendMessage = () => {
+        if (chatInput.trim()) {
+            const trimmedInput = chatInput.trim();
+
+            // 게임 시작 명령어 체크
+            if (trimmedInput === '/시작' || trimmedInput === '/ㄱ' || trimmedInput === '/r') {
+                const noticeMessage: ChatMessage = {
+                    id: Date.now(),
+                    username: '알림',
+                    message: '게임을 시작합니다!',
+                    timestamp: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' }),
+                    isNotice: true
+                };
+                setMessages((prev) => [...prev, noticeMessage]);
+                setChatInput('');
+                // If game UI is already active, forward the start to the mounted game handler
+                // so it can restart if the current game has ended. Otherwise request a new
+                // game UI to be shown.
+                if (!isPlaying) {
+                    requestStart();
+                } else {
+                    try { callGameInput('/시작'); } catch (e) { console.error(e); }
+                }
+                return;
+            }
+
+            // 게임 종료 명령어 (채팅에서 바로 종료 요청)
+            if (trimmedInput === '/gg' || trimmedInput === '/ㅈㅈ') {
+                setChatInput('');
+                try { callGameInput(trimmedInput); } catch (e) { console.error(e); }
+                setChatInput('');
+                const noticeMessage: ChatMessage = {
+                    id: Date.now(),
+                    username: '알림',
+                    message: '게임을 종료합니다.',
+                    timestamp: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' }),
+                    isNotice: true
+                };
+                setMessages(prev => [...prev, noticeMessage]);
+                return;
+            }
+
+            // 힌트 명령어 (/ㅍ 또는 /v)
+            if (trimmedInput === '/ㅍ' || trimmedInput === '/v') {
+                const hint = gameManager.getHintWord();
+                if (hint === null) { setChatInput(''); return; }
+                const hintMsg: ChatMessage = {
+                    id: Date.now(),
+                    username: '힌트',
+                    message: hint ? `힌트: ${hint}` : '힌트가 없습니다.',
+                    timestamp: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' }),
+                    isNotice: false
+                };
+                setMessages(prev => [...prev, hintMsg]);
+                setChatInput('');
+                return;
+            }
+
+            const newMessage: ChatMessage = {
+                id: Date.now(),
+                username: '나',
+                message: chatInput,
+                timestamp: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })
+            };
+
+            setMessages(prev => [...prev, newMessage]);
+            setChatInput('');
+        }
+    };
+
+    // register our hint sender so other UI (GameHead) can trigger it
+    useEffect(() => {
+        registerSendHint(() => {
+            const hint = gameManager.getHintWord();
+            if (hint === null) { setChatInput(''); return; }
+            const hintMsg: ChatMessage = {
+                id: Date.now(),
+                username: '힌트',
+                message: hint ? `힌트: ${hint}` : '힌트가 없습니다.',
+                timestamp: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' }),
+                isNotice: false
+            };
+            setMessages(prev => [...prev, hintMsg]);
+            setChatInput('');
+        });
+        return () => registerSendHint(null);
+    }, [registerSendHint, setMessages, setChatInput]);
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            handleSendMessage();
+        }
+    };
+
+    // 메시지가 추가될 때마다 스크롤을 아래로 이동
+    useEffect(() => {
+        if (chatRef?.current) {
+            chatRef.current.scrollTop = chatRef.current.scrollHeight;
+        }
+    }, [messages, chatRef]);
+
+    return {
+        messages,
+        chatRef,
+        handleSendMessage,
+        handleKeyPress,
+        sendHint: () => {
+            const hint = gameManager.getHintWord();
+            if (hint === null) { setChatInput(''); return; }
+            const hintMsg: ChatMessage = {
+                id: Date.now(),
+                username: '힌트',
+                message: hint ? `힌트: ${hint}` : '힌트가 없습니다.',
+                timestamp: new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' }),
+                isNotice: false
+            };
+            setMessages(prev => [...prev, hintMsg]);
+            setChatInput('');
+        }
+    };
+};
\ No newline at end of file
diff --git a/app/mini-game/game/hooks/useGameLogic.ts b/app/mini-game/game/hooks/useGameLogic.ts
new file mode 100644
index 0000000..edc1156
--- /dev/null
+++ b/app/mini-game/game/hooks/useGameLogic.ts
@@ -0,0 +1,627 @@
+import { useState, useEffect, useRef } from 'react';
+import { useChat } from './useChat';
+import { soundManager } from '../lib/SoundManager';
+import { BEAT } from '../const';
+import gameManager from '../lib/GameManager';
+import { useGameState } from './useGameState';
+
+// defaults; will be updated from gameManager settings on init
+let TURN_TIME_LIMIT = 5; // seconds
+let ROUND_TIME_LIMIT = 120; // seconds
+
+/**
+ * 게임의 핵심 로직을 관리하는 커스텀 훅
+ */
+export const useGameLogic = () => {
+    const { setChatInput, clearMessagesAndShowStartNotice } = useChat();
+    const { pendingStart, clearPendingStart, blockStart } = useGameState();
+    const [word, setWord] = useState("/시작을 입력하면 게임시작!");
+    const [isFail, setIsFail] = useState(false);
+    const [isGameStarted, setIsGameStarted] = useState(false);
+    const [currentChar, setCurrentChar] = useState("");
+    const [chainCount, setChainCount] = useState(0);
+    const [turnTime, setTurnTime] = useState(TURN_TIME_LIMIT);
+    const [roundTime, setRoundTime] = useState(ROUND_TIME_LIMIT);
+    const [isPaused, setIsPaused] = useState(false);
+    const [isStarting, setIsStarting] = useState(false);
+    const [missionChar, setMissionChar] = useState("");
+    const [historyItems, setHistoryItems] = useState<{ theme: string[]; word: string }[]>([]);
+    const [inputVisible, setInputVisible] = useState(true);
+    const [turnInstant, setTurnInstant] = useState(false);
+    const [animatingWord, setAnimatingWord] = useState<string | null>(null);
+    const [visibleChars, setVisibleChars] = useState<boolean[]>([]);
+    const [pulseOn, setPulseOn] = useState(false);
+    const [lastState, setLastState] = useState<{ turnTime: number; roundTime: number; speed: number } | null>(null);
+    const [hintVisible, setHintVisible] = useState(false);
+    const [gameResult, setGameResult] = useState<{ char: string, word: string, missionChar: string | null, useHintCount: number }[] | null>(null);
+
+    const timerRef = useRef<NodeJS.Timeout | null>(null);
+    const failTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const startTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const beatTimeoutRefs = useRef<NodeJS.Timeout[]>([]);
+    const hadFocusRef = useRef<boolean>(false);
+    const prevInputVisibleRef = useRef<boolean>(inputVisible);
+
+    const safeFocusHead = () => {
+        if (typeof document === 'undefined') return;
+        const chatEl = document.getElementById('TalkX');
+        const active = document.activeElement as HTMLElement | null;
+        const chatHasFocus = chatEl && active === chatEl;
+        if (hadFocusRef.current || !chatHasFocus) {
+            inputRef.current?.focus();
+            hadFocusRef.current = false;
+        }
+    };
+
+    const playBGMForSpeed = (speed?: number) => {
+        try {
+            if (typeof speed === 'number' && speed === 0) {
+                soundManager.play('jaqwiBGM');
+            } else {
+                soundManager.play(`T${speed}`);
+            }
+        } catch (e) { console.error(e); }
+    };
+
+    const stopBGMForSpeed = (speed?: number) => {
+        try {
+            if (typeof speed === 'number' && speed === 0) {
+                soundManager.stop('jaqwiBGM');
+            } else {
+                soundManager.stop(`T${speed}`);
+            }
+        } catch (e) { console.error(e); }
+    };
+
+    /**
+     * 게임 종료 처리
+     */
+    const endGame = () => {
+        try { soundManager.stopAllSounds(); } catch (e) { console.error(e); }
+        try { soundManager.play('timeout'); } catch (e) { console.error(e); }
+
+        if (timerRef.current) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+        }
+        if (failTimeoutRef.current) {
+            clearTimeout(failTimeoutRef.current);
+            failTimeoutRef.current = null;
+        }
+        if (startTimeoutRef.current) {
+            clearTimeout(startTimeoutRef.current);
+            startTimeoutRef.current = null;
+        }
+
+        beatTimeoutRefs.current.forEach(timeout => clearTimeout(timeout));
+        beatTimeoutRefs.current = [];
+
+        setIsGameStarted(false);
+        setIsStarting(false);
+        setIsPaused(true);
+        setIsFail(false);
+        // clear chat input when game ends
+        try { setChatInput(''); } catch (e) { console.error(e); }
+        const hintWord = gameManager.gameEndHint();
+        console.log('Game ended, hint word:', hintWord);
+        setWord(hintWord);
+        setHintVisible(!!hintWord);
+        setInputVisible(false);
+        setAnimatingWord(null);
+
+        // 게임 결과 가져오기
+        const result = gameManager.gameEnd();
+        setGameResult(result.usedWords);
+    };
+
+    // 타이머 로직
+    useEffect(() => {
+        if (isGameStarted && !isPaused) {
+            timerRef.current = setInterval(() => {
+                setTurnTime((prev) => {
+                    if (prev === Infinity) return prev;
+                    const newVal = Math.max(0, +(prev - 0.05).toFixed(2));
+                    if (newVal <= 0) {
+                        endGame();
+                        return 0;
+                    }
+                    return newVal;
+                });
+                setRoundTime((prev) => {
+                    if (prev === Infinity) return prev;
+                    const newVal = Math.max(0, +(prev - 0.05).toFixed(2));
+                    if (newVal <= 0) {
+                        endGame();
+                        return 0;
+                    }
+                    return newVal;
+                });
+            }, 50);
+        } else {
+            if (timerRef.current) {
+                clearInterval(timerRef.current);
+                timerRef.current = null;
+            }
+        }
+
+        return () => {
+            if (timerRef.current) {
+                clearInterval(timerRef.current);
+            }
+        };
+    }, [isGameStarted, isPaused, chainCount]);
+
+    // 입력창 포커스 관리
+    useEffect(() => {
+        const prev = prevInputVisibleRef.current;
+        // became visible
+        if (!prev && inputVisible) {
+            // if chat currently has focus and head did not have focus before hide,
+            // do not steal focus. If head had focus before hide, restore it.
+            if (typeof document === 'undefined') return;
+            const chatEl = document.getElementById('TalkX');
+            const active = document.activeElement as HTMLElement | null;
+            const chatHasFocus = chatEl && active === chatEl;
+            if (hadFocusRef.current || !chatHasFocus) {
+                const rafId = requestAnimationFrame(() => {
+                    inputRef.current?.focus();
+                    hadFocusRef.current = false;
+                });
+                prevInputVisibleRef.current = inputVisible;
+                return () => cancelAnimationFrame(rafId);
+            }
+            prevInputVisibleRef.current = inputVisible;
+            return;
+        }
+
+        // became hidden
+        if (prev && !inputVisible) {
+            if (typeof document !== 'undefined') {
+                hadFocusRef.current = document.activeElement === inputRef.current;
+            }
+        }
+
+        prevInputVisibleRef.current = inputVisible;
+    }, [inputVisible]);
+
+    /**
+     * 새로운 턴 시작
+     */
+    const startNewCycle = () => {
+        const currentState = gameManager.getCurrentState();
+        if (currentState) {
+            setCurrentChar(currentState.startChar);
+            setWord(currentState.startChar);
+            setMissionChar(currentState.missionChar || "");
+        }
+        setIsFail(false);
+        setTurnInstant(true);
+        setTurnTime(TURN_TIME_LIMIT);
+        requestAnimationFrame(() => {
+            setTurnInstant(false);
+        });
+        safeFocusHead();
+    };
+
+    /**
+     * 사용자 입력 처리
+     */
+    const handleInput = (input: string) => {
+        if (input === '/시작') {
+            // prevent starting a new game while one is already active or already starting
+            if (isGameStarted || isStarting) {
+                try { setChatInput(''); } catch (e) { console.error(e); }
+                return;
+            }
+            // if game cannot start (no valid start chars etc.), show modal and abort
+            try {
+                if (!gameManager.canGameStart()) {
+                    try { setChatInput(''); } catch (e) { console.error(e); }
+                    // set zustand store flag so UI can display modal
+                    try { blockStart('게임을 시작할 수 없습니다.'); } catch (e) { console.error(e); }
+                    return;
+                }
+            } catch (e) { console.error(e); }
+            // mark that a start sequence is in progress so aliases cannot re-trigger it
+            setIsStarting(true);
+            // 게임 결과 다이얼로그 닫기
+            setGameResult(null);
+            // Initialize history and timings from gameManager
+            setHistoryItems([]);
+            setMissionChar("");
+            const setting = gameManager.getSetting();
+            // roundTime in gameManager is ms; 0 means unlimited
+            if (setting.roundTime === 0) {
+                ROUND_TIME_LIMIT = Infinity;
+            } else {
+                ROUND_TIME_LIMIT = Math.max(1, Math.round(setting.roundTime / 1000));
+            }
+            TURN_TIME_LIMIT = 5; // keep existing default for turn limit
+            setRoundTime(ROUND_TIME_LIMIT);
+            setTurnTime(TURN_TIME_LIMIT);
+            // clear chat history and show start notice
+            try { clearMessagesAndShowStartNotice(); } catch (e) { console.error(e); }
+            setChatInput('');
+            setIsPaused(true);
+            setInputVisible(false);
+            setHintVisible(false);
+            setChainCount(0);
+            setWord('게임이 곧 시작됩니다');
+
+            try {
+                let temps: number | undefined;
+                // start the audio-start sequence; if the sound callbacks never fire
+                // (or fail), a fallback timeout below will ensure the game actually starts.
+                soundManager.playWithEnd('game_start', () => {
+                    if (startTimeoutRef.current) { clearTimeout(startTimeoutRef.current); startTimeoutRef.current = null; }
+                    // call gameManager.gameStart to select start char (and mission)
+                    try {
+                        const startState = gameManager.gameStart();
+                        if (startState) {
+                            setCurrentChar(startState.startChar);
+                            setWord(startState.startChar);
+                            if (startState.missionChar) setMissionChar(startState.missionChar);
+                            else setMissionChar("");
+                            TURN_TIME_LIMIT = startState.turnTime / 1000;
+                            setLastState({
+                                turnTime: startState.turnTime,
+                                roundTime: ROUND_TIME_LIMIT,
+                                speed: startState.turnSpeed
+                            });
+                            temps = startState.turnSpeed;
+                        }
+                    } catch (e) { console.error(e); }
+
+                    let cycleStarted = false;
+                    try {
+                        startNewCycle();
+                        cycleStarted = true;
+                        soundManager.playWithEnd('round_start', () => {
+                            setIsGameStarted(true);
+                            setIsStarting(false);
+                            setIsPaused(false);
+                            setInputVisible(true);
+                            try {
+                                if (typeof temps !== 'undefined') playBGMForSpeed(temps);
+                            } catch (e) { console.error(e); }
+                        });
+                    } catch (e) {
+                        setIsGameStarted(true);
+                        setIsPaused(false);
+                        setInputVisible(true);
+                        try { if (typeof temps !== 'undefined') playBGMForSpeed(temps); } catch (e) { console.error(e); }
+                        if (!cycleStarted) startNewCycle();
+                        console.error(e);
+                    }
+                });
+
+                // fallback: if audio callback never runs, force-start the game after 3s
+                if (startTimeoutRef.current) {
+                    clearTimeout(startTimeoutRef.current);
+                    startTimeoutRef.current = null;
+                }
+                startTimeoutRef.current = setTimeout(() => {
+                    try {
+                        const startState = gameManager.gameStart();
+                        if (startState) {
+                            setCurrentChar(startState.startChar);
+                            setWord(startState.startChar);
+                            if (startState.missionChar) setMissionChar(startState.missionChar);
+                            else setMissionChar("");
+                            TURN_TIME_LIMIT = startState.turnTime / 1000;
+                            setLastState({
+                                turnTime: startState.turnTime,
+                                roundTime: ROUND_TIME_LIMIT,
+                                speed: startState.turnSpeed
+                            });
+                            temps = startState.turnSpeed;
+                        }
+                    } catch (e) { console.error(e); }
+                    try {
+                        startNewCycle();
+                        setIsGameStarted(true);
+                        setIsStarting(false);
+                        setIsPaused(false);
+                        setInputVisible(true);
+                        try { if (typeof temps !== 'undefined') playBGMForSpeed(temps); } catch (e) { console.error(e); }
+                    } catch (e) { console.error(e); }
+                    if (startTimeoutRef.current) { clearTimeout(startTimeoutRef.current); startTimeoutRef.current = null; }
+                }, 3000);
+            } catch (e) {
+                setIsGameStarted(true);
+                setIsStarting(false);
+                setIsPaused(false);
+                startNewCycle();
+                console.error(e);
+            }
+            return;
+        }
+
+        // 즉시 게임 종료 명령어
+        if (input === '/gg' || input === '/ㅈㅈ') {
+            endGame();
+            return;
+        }
+
+        if (!isGameStarted) {
+            setChatInput('');
+            return;
+        }
+
+        if (input.startsWith(currentChar)) {
+            try { soundManager.stop('fail'); } catch (e) { console.error(e); }
+            if (failTimeoutRef.current) {
+                clearTimeout(failTimeoutRef.current);
+                failTimeoutRef.current = null;
+            }
+
+            beatTimeoutRefs.current.forEach(timeout => clearTimeout(timeout));
+            beatTimeoutRefs.current = [];
+
+            setIsFail(false);
+            setChatInput('');
+
+            // submit to gameManager for validation and next state
+            const remainingMs = roundTime === Infinity ? 0 : Math.round(roundTime * 1000);
+            const submitRes = gameManager.submitWord(input, remainingMs);
+            if (!submitRes.ok) {
+                // failed by gameManager rules
+                setWord(`${input}${submitRes.reason ? ": " + submitRes.reason : ""}`);
+                setIsFail(true);
+                setChatInput('');
+                try { soundManager.play('fail'); } catch (e) { console.error(e); }
+                setTimeout(() => {
+                    setIsFail(false);
+                    if (!hintVisible) { setWord(currentChar); }
+                }, 2000);
+                return;
+            }
+            setChainCount((v) => v + 1);
+            setInputVisible(false);
+            setLastState({
+                turnTime: submitRes.trunTime,
+                roundTime: ROUND_TIME_LIMIT,
+                speed: submitRes.turnSpeed
+            })
+            TURN_TIME_LIMIT = submitRes.trunTime / 1000;
+
+            setHistoryItems((prev) => {
+                const newHistory = [{ theme: submitRes.wordEntry.theme, word: input }, ...prev];
+                return newHistory.slice(0, 5);
+            });
+
+            setIsPaused(true);
+
+            const wordLength = input.length;
+            if (wordLength <= 8 && BEAT[wordLength]) {
+                const beatPattern = BEAT[wordLength];
+                if (lastState === null) return;
+                try { stopBGMForSpeed(lastState.speed); } catch (e) { console.error(e); }
+                setWord(input);
+                setAnimatingWord(input);
+                const initialVisible = new Array(wordLength).fill(false);
+                setVisibleChars(initialVisible);
+
+                let beatIndex = 0;
+                if (lastState === null) return;
+                const safeTurnTime = isFinite(lastState.turnTime) ? lastState.turnTime : 15000;
+                const intervalTime = Math.max(10, Math.floor(safeTurnTime / 96));
+
+                for (let i = 0; i < beatPattern.length; i++) {
+                    if (beatPattern[i] === '1') {
+                        const currentBeatIndex = beatIndex;
+                        const timeout = setTimeout(() => {
+                            setVisibleChars(prev => {
+                                const newVisible = [...prev];
+                                newVisible[currentBeatIndex] = true;
+                                return newVisible;
+                            });
+                            try {
+                                if (lastState === null) return;
+                                soundManager.playOnce(`As${lastState.speed}`);
+                                const char = input[currentBeatIndex];
+                                if (char === missionChar) {
+                                    soundManager.play('mission');
+                                }
+                            } catch (e) { console.error(e); }
+                        }, i * intervalTime);
+                        beatTimeoutRefs.current.push(timeout);
+                        beatIndex++;
+                    }
+                }
+
+                const totalAnimationTime = beatPattern.length * intervalTime + 120;
+                const finalTimeout = setTimeout(() => {
+                    if (lastState === null) return;
+                    try { soundManager.play(`K${lastState.speed}`); } catch (e) { console.error(e); }
+
+                    const runPulse = (repeats = 3) => {
+                        if (lastState === null) return 0;
+                        const safeBlinkSource = isFinite(lastState.turnTime) ? lastState.turnTime : 15000;
+                        const blinkTick = Math.max(10, Math.floor(safeBlinkSource / 96));
+                        let total = 0;
+                        for (let r = 0; r < repeats; r++) {
+                            const on = setTimeout(() => setPulseOn(true), total);
+                            beatTimeoutRefs.current.push(on);
+                            total += blinkTick;
+                            const off = setTimeout(() => setPulseOn(false), total);
+                            beatTimeoutRefs.current.push(off);
+                            total += Math.floor(blinkTick * 1.5);
+                        }
+                        return total;
+                    };
+
+                    const pulseDuration = runPulse(2);
+                    const cleanupTimeout = setTimeout(() => {
+                        setAnimatingWord(null);
+                        if (submitRes.nextMissionChar) {
+                            setMissionChar(submitRes.nextMissionChar);
+                        }
+                        setIsPaused(false);
+                        try { playBGMForSpeed(submitRes.turnSpeed); } catch (e) { console.error(e); }
+                        if (typeof submitRes !== 'undefined' && submitRes && submitRes.nextChar) {
+                            setCurrentChar(submitRes.nextChar);
+                            if (submitRes.nextMissionChar) setMissionChar(submitRes.nextMissionChar);
+                        }
+                        startNewCycle();
+                        setInputVisible(true);
+                        setTimeout(() => {
+                            safeFocusHead();
+                        }, 0);
+                    }, pulseDuration);
+                    beatTimeoutRefs.current.push(cleanupTimeout);
+                }, totalAnimationTime);
+                beatTimeoutRefs.current.push(finalTimeout);
+            } else if (wordLength >= 9) {
+                if (lastState === null) return;
+                try { stopBGMForSpeed(lastState.speed); } catch (e) { console.error(e); }
+                setWord(input);
+                setAnimatingWord(input);
+                const initialVisible = new Array(wordLength).fill(false);
+                setVisibleChars(initialVisible);
+
+                if (lastState === null) return;
+                const safeTurnTime2 = isFinite(lastState.turnTime) ? lastState.turnTime : 15000;
+                const intervalTime = Math.max(10, Math.floor(safeTurnTime2 / 12 / wordLength));
+
+                for (let i = 0; i < wordLength; i++) {
+                    const timeout = setTimeout(() => {
+                        setVisibleChars(prev => {
+                            const newVisible = [...prev];
+                            newVisible[i] = true;
+                            return newVisible;
+                        });
+                        try {
+                            soundManager.play('Al');
+                        } catch (e) { console.error(e); }
+                    }, i * intervalTime);
+                    beatTimeoutRefs.current.push(timeout);
+                }
+
+                const totalAnimationTime = wordLength * intervalTime + 120;
+                const finalTimeout = setTimeout(() => {
+                    if (lastState === null) return;
+                    try { soundManager.play(`K${lastState.speed}`); } catch (e) { console.error(e); }
+                    const runPulse = (repeats = 2) => {
+                        if (lastState === null) return 0;
+                        const safeBlinkSource2 = isFinite(lastState.turnTime) ? lastState.turnTime : 15000;
+                        const blinkTick = Math.max(10, Math.floor(safeBlinkSource2 / 46));
+                        let total = 0;
+                        for (let r = 0; r < repeats; r++) {
+                            const on = setTimeout(() => setPulseOn(true), total);
+                            beatTimeoutRefs.current.push(on);
+                            total += blinkTick;
+                            const off = setTimeout(() => setPulseOn(false), total);
+                            beatTimeoutRefs.current.push(off);
+                            total += Math.floor(blinkTick * 1.5);
+                        }
+                        return total;
+                    };
+
+                    const pulseDuration = runPulse();
+                    const cleanup = setTimeout(() => {
+                        setAnimatingWord(null);
+                        if (submitRes.nextMissionChar) {
+                            setMissionChar(submitRes.nextMissionChar);
+                        }
+                        setIsPaused(false);
+                        try { playBGMForSpeed(submitRes.turnSpeed); } catch (e) { console.error(e); }
+                        if (typeof submitRes !== 'undefined' && submitRes && submitRes.nextChar) {
+                            setCurrentChar(submitRes.nextChar);
+                            if (submitRes.nextMissionChar) setMissionChar(submitRes.nextMissionChar);
+                        }
+                        startNewCycle();
+                        setInputVisible(true);
+                        setTimeout(() => {
+                            safeFocusHead();
+                        }, 0);
+                    }, pulseDuration);
+                    beatTimeoutRefs.current.push(cleanup);
+                }, totalAnimationTime);
+                beatTimeoutRefs.current.push(finalTimeout);
+            } else {
+                setWord(input);
+                setAnimatingWord(null);
+                setTimeout(() => {
+                    if (submitRes.nextMissionChar) {
+                        setMissionChar(submitRes.nextMissionChar);
+                    }
+                    setIsPaused(false);
+                    try { playBGMForSpeed(submitRes.turnSpeed); } catch (e) { console.error(e); }
+                    if (typeof submitRes !== 'undefined' && submitRes && submitRes.nextChar) {
+                        setCurrentChar(submitRes.nextChar);
+                        if (submitRes.nextMissionChar) setMissionChar(submitRes.nextMissionChar);
+                    }
+                    startNewCycle();
+                    setInputVisible(true);
+                    setTimeout(() => {
+                        safeFocusHead();
+                    }, 0);
+                }, 2000);
+            }
+        } else {
+            if (failTimeoutRef.current) {
+                clearTimeout(failTimeoutRef.current);
+                failTimeoutRef.current = null;
+            }
+
+            setWord(input);
+            setIsFail(true);
+            setChatInput('');
+            try { soundManager.play('fail'); } catch (e) { console.error(e); }
+            failTimeoutRef.current = setTimeout(() => {
+                setIsFail(false);
+                if (!hintVisible) { setWord(currentChar); }
+                failTimeoutRef.current = null;
+            }, 2000);
+        }
+    };
+
+    // load mock DB on mount
+    useEffect(() => {
+        // update local time limits from setting
+        const s = gameManager.getSetting();
+        if (s.roundTime === 0) {
+            ROUND_TIME_LIMIT = Infinity;
+        } else {
+            ROUND_TIME_LIMIT = Math.max(1, Math.round(s.roundTime / 1000));
+        }
+        setRoundTime(ROUND_TIME_LIMIT);
+        setTurnTime(TURN_TIME_LIMIT);
+    }, []);
+
+    // Also react to pendingStart changes while this hook is mounted.
+    // This allows chat commands that set `pendingStart` (e.g. /ㄱ, /r)
+    // to trigger a restart even when the game UI is already mounted
+    // or when a game has just ended.
+    useEffect(() => {
+        if (pendingStart) {
+            clearPendingStart();
+            handleInput('/시작');
+        }
+    }, [pendingStart, clearPendingStart]);
+
+    return {
+        word,
+        isFail,
+        isGameStarted,
+        chainCount,
+        turnTime,
+        roundTime,
+        missionChar,
+        historyItems,
+        inputVisible,
+        turnInstant,
+        animatingWord,
+        visibleChars,
+        pulseOn,
+        inputRef,
+        handleInput,
+        TURN_TIME_LIMIT,
+        ROUND_TIME_LIMIT,
+        hintVisible,
+        gameResult,
+        closeGameResult: () => setGameResult(null)
+    };
+};
\ No newline at end of file
diff --git a/app/mini-game/game/hooks/useGameState.ts b/app/mini-game/game/hooks/useGameState.ts
new file mode 100644
index 0000000..1720867
--- /dev/null
+++ b/app/mini-game/game/hooks/useGameState.ts
@@ -0,0 +1,43 @@
+import { useAppDispatch, useAppSelector } from '../store/hooks';
+import { setPlaying, setPendingStart, setStartBlocked, resetGame } from '../store/gameSlice';
+import gameManager from '../lib/GameManager';
+
+/**
+ * 게임 상태를 관리하는 커스텀 훅 (Redux Wrapper)
+ * 기존 Zustand 인터페이스를 최대한 유지하여 마이그레이션 용이성 확보
+ */
+export const useGameState = () => {
+    const dispatch = useAppDispatch();
+    const { isPlaying, pendingStart, startBlocked, startBlockedMessage } = useAppSelector((state) => state.game);
+
+    const requestStart = () => {
+        try {
+            if (gameManager.canGameStart()) {
+                dispatch(setPlaying(true));
+                dispatch(setPendingStart(true));
+            } else {
+                dispatch(setStartBlocked({ blocked: true, message: '게임을 시작할 수 없습니다.' }));
+            }
+        } catch (e) {
+            dispatch(setStartBlocked({ blocked: true, message: '게임을 시작할 수 없습니다.' }));
+            console.error(e);
+        }
+    };
+
+    const clearPendingStart = () => dispatch(setPendingStart(false));
+    const exitGame = () => dispatch(resetGame());
+    const dismissStartBlocked = () => dispatch(setStartBlocked({ blocked: false, message: null }));
+    const blockStart = (message: string) => dispatch(setStartBlocked({ blocked: true, message }));
+
+    return {
+        isPlaying,
+        pendingStart,
+        startBlocked,
+        startBlockedMessage,
+        requestStart,
+        clearPendingStart,
+        exitGame,
+        dismissStartBlocked,
+        blockStart,
+    };
+};
\ No newline at end of file
diff --git a/app/mini-game/game/lib/GameLogic.ts b/app/mini-game/game/lib/GameLogic.ts
new file mode 100644
index 0000000..2581f95
--- /dev/null
+++ b/app/mini-game/game/lib/GameLogic.ts
@@ -0,0 +1,132 @@
+import { duemLaw } from '@/lib/hangulUtils';
+import { WordService } from '../services/WordService';
+import { GameSetting, CurrentState } from '../types/game.types';
+
+/**
+ * 게임 규칙 및 로직을 처리하는 클래스
+ * 순수 함수 위주로 구성하여 상태 의존성을 줄임
+ */
+export class GameLogic {
+    /**
+     * 턴 속도를 계산합니다.
+     * @param roundTime 현재 라운드 시간 (ms)
+     * @returns 턴 속도 (0~10)
+     */
+    public static getTurnSpeed(roundTime: number): number {
+        if (roundTime === 0 || !isFinite(roundTime)) return 0;
+        if (roundTime < 5000) return 10;
+        else if (roundTime < 11000) return 9;
+        else if (roundTime < 18000) return 8;
+        else if (roundTime < 26000) return 7;
+        else if (roundTime < 35000) return 6;
+        else if (roundTime < 45000) return 5;
+        else if (roundTime < 56000) return 4;
+        else if (roundTime < 68000) return 3;
+        else if (roundTime < 81000) return 2;
+        else if (roundTime < 95000) return 1;
+        else return 0;
+    }
+
+    /**
+     * 단어가 유효한지 검사합니다.
+     * @param word 입력된 단어
+     * @param nowState 현재 게임 상태 (시작 글자 등)
+     * @param wordService 단어 서비스 인스턴스
+     * @returns 유효 여부
+     */
+    public static isValidWord(word: string, nowState: CurrentState, wordService: WordService): boolean {
+        if (nowState === null) return false;
+        // 두음법칙 적용 확인
+        const validStartChars = [nowState.startChar, duemLaw(nowState.startChar)];
+        return word.length > 1 && wordService.hasWord(word) && validStartChars.includes(word.charAt(0));
+    }
+
+    /**
+     * 다음 시작 글자와 미션 글자를 결정합니다.
+     * @param setting 게임 설정
+     * @param wordService 단어 서비스 인스턴스
+     * @param exclusion 제외할 글자 집합
+     * @returns 시작 글자 및 미션 글자 객체
+     */
+    public static getStartChar(
+        setting: GameSetting, 
+        wordService: WordService, 
+        exclusion: Set<string | [string, string]> = new Set()
+    ): {startChar: string, missionChar: string | null} {
+        let nowState: {startChar: string, missionChar: string | null} = {startChar: '', missionChar: null};
+
+        if (setting.lang === 'ko') {
+            if (setting.mode === 'normal') {
+                if (setting.notAgainSameChar && exclusion.size > 0) {
+                    // 교집합 구하기
+                    const availableChars = new Set(
+                        [...wordService.NormalStartCharSet]
+                        .filter(x => setting.wantStartChar.has(x))
+                        .filter(char => !(exclusion as Set<string>).has(char))
+                    );
+                    
+                    if (availableChars.size !== 0) {
+                        const randomIndex = Math.floor(Math.random() * availableChars.size);
+                        const startChar = Array.from(availableChars)[randomIndex];
+                        nowState = {startChar, missionChar: null};
+                        return nowState;
+                    }
+                }
+                const randomIndex = Math.floor(Math.random() * wordService.NormalStartCharSet.size);
+                nowState = {startChar: Array.from(wordService.NormalStartCharSet)[randomIndex], missionChar: null};
+            }
+            else if (setting.mode === 'mission') {
+                if (setting.notAgainSameChar && exclusion.size > 0) {
+                    const availablePairs = new Set(
+                        [...wordService.MissionStartCharSet]
+                        .filter(pair => !(exclusion as Set<[string, string]>).has(pair) && setting.wantStartChar.has(pair[0]))
+                    );
+                    if (availablePairs.size !== 0) {
+                        const randomIndex = Math.floor(Math.random() * availablePairs.size);
+                        const [startChar, missionChar] = Array.from(availablePairs)[randomIndex];
+                        nowState = {startChar, missionChar};
+                        return nowState;
+                    }
+                }
+                const randomIndex = Math.floor(Math.random() * wordService.MissionStartCharSet.size);
+                const [startChar, missionChar] = Array.from(wordService.MissionStartCharSet)[randomIndex];
+                nowState = {startChar, missionChar};
+            }
+        } else if (setting.lang === 'en') {
+            if (setting.mode === 'normal') {
+                if (setting.notAgainSameChar && exclusion.size > 0) {
+                    const availableChars = new Set(
+                        [...wordService.NormalEngStartCharSet]
+                        .filter(char => !(exclusion as Set<string>).has(char))
+                    );
+                    if (availableChars.size !== 0) {
+                        const randomIndex = Math.floor(Math.random() * availableChars.size);
+                        const startChar = Array.from(availableChars)[randomIndex];
+                        nowState = {startChar, missionChar: null};
+                        return nowState;
+                    }
+                }
+                const randomIndex = Math.floor(Math.random() * wordService.NormalEngStartCharSet.size);
+                nowState = {startChar: Array.from(wordService.NormalEngStartCharSet)[randomIndex], missionChar: null};
+            } else if (setting.mode === 'mission') {
+                if (setting.notAgainSameChar && exclusion.size > 0) {
+                    const availablePairs = new Set(
+                        [...wordService.MissionEngStartCharSet]
+                        .filter(pair => !(exclusion as Set<[string, string]>).has(pair))
+                    );
+                    if (availablePairs.size !== 0) {
+                        const randomIndex = Math.floor(Math.random() * availablePairs.size);
+                        const [startChar, missionChar] = Array.from(availablePairs)[randomIndex];
+                        nowState = {startChar, missionChar};
+                        return nowState;
+                    }
+                }
+                const randomIndex = Math.floor(Math.random() * wordService.MissionEngStartCharSet.size);
+                const [startChar, missionChar] = Array.from(wordService.MissionEngStartCharSet)[randomIndex];
+                nowState = {startChar, missionChar};
+            }
+        }
+        
+        return nowState;
+    }
+}
\ No newline at end of file
diff --git a/app/mini-game/game/lib/GameManager.ts b/app/mini-game/game/lib/GameManager.ts
new file mode 100644
index 0000000..4ee0fa9
--- /dev/null
+++ b/app/mini-game/game/lib/GameManager.ts
@@ -0,0 +1,410 @@
+import { disassemble } from 'es-hangul';
+import type { GameSetting, SubminWordResult, CurrentState, UsedWord } from '../types/game.types';
+import { wordService } from '../services/WordService';
+import { GameLogic } from './GameLogic';
+
+/**
+ * 게임 진행 상태 및 로직을 관리하는 매니저 클래스
+ */
+class GameManager {
+    private static instance: GameManager;
+
+    private gameSetting: GameSetting = {
+        lang: 'ko', 
+        mode: 'normal', 
+        hintMode: 'auto', 
+        notAgainSameChar: false, 
+        roundTime: 60000, 
+        wantStartChar: new Set()
+    };
+    
+    private nowState: CurrentState = null;
+    private usedWords: UsedWord[] = [];
+    private exclusionSet: Set<string | [string, string]> = new Set();
+
+    private hintStack: number = 0;
+    private hintWord: string = "";
+    private revealedIndices = new Set<number>();
+
+    private constructor() {
+        if (GameManager.instance) {
+            throw new Error('GameManager is a singleton class. Use GameManager.getInstance() to access the instance.');
+        }
+        GameManager.instance = this;
+    }
+
+    /**
+     * 싱글톤 인스턴스를 반환합니다.
+     * 
+     * @returns GameManager 인스턴스
+     */
+    public static getInstance() {
+        if (!GameManager.instance) {
+            GameManager.instance = new GameManager();
+        }
+        return GameManager.instance;
+    }
+
+    /**
+     * 게임 설정을 업데이트합니다.
+     * 
+     * @param setting - 업데이트할 게임 설정 객체
+     */
+    public updateSetting(setting: Partial<GameSetting>) {
+        this.gameSetting = {...this.gameSetting, ...setting};
+    }
+
+    /**
+     * 현재 게임 설정을 반환합니다.
+     * 
+     * @returns 현재 게임 설정 객체
+     */
+    public getSetting(): GameSetting {
+        return this.gameSetting;
+    }
+
+    /**
+     * 게임 시작 가능 여부를 확인합니다.
+     * 
+     * @returns 게임 시작 가능 여부
+     */
+    public canGameStart(): boolean {
+        if (this.gameSetting.lang === 'ko') {
+            if (this.gameSetting.mode === 'normal') {
+                return wordService.NormalStartCharSet.size > 0;
+            } else if (this.gameSetting.mode === 'mission') {
+                return wordService.MissionStartCharSet.size > 0;
+            }
+        } else if (this.gameSetting.lang === 'en') {
+            if (this.gameSetting.mode === 'normal') {
+                return wordService.NormalEngStartCharSet.size > 0;
+            } else if (this.gameSetting.mode === 'mission') {
+                return wordService.MissionEngStartCharSet.size > 0;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * 단어 DB를 로드하고 게임 설정을 업데이트합니다.
+     * 
+     * @param data - 단어 데이터 배열
+     * @param setting - 업데이트할 게임 설정 객체
+     */
+    public loadWordDB(data: {word: string, theme: string[]}[], setting: Partial<GameSetting>) {
+        wordService.loadWordDB(data);
+        this.updateSetting(setting);
+    }
+
+    /**
+     * 단어 DB를 초기화합니다.
+     */
+    public clearDB() {
+        wordService.clearDB();
+    }
+
+    /**
+     * 단어를 DB에 추가합니다.
+     * 
+     * @param word - 추가할 단어 
+     * @param theme - 단어의 주제 배열
+     * @returns 추가 작업의 성공 여부
+     */
+    public addWordToDB(word: string, theme: string[]) {
+        return wordService.addWordToDB(word, theme);
+    }
+
+    /**
+     * 단어를 DB에서 수정합니다.
+     * 
+     * @param oldWord - 수정할 기존 단어
+     * @param newWord - 새로운 단어
+     * @returns 수정 작업의 성공 여부
+     */
+    public editWordInDB(oldWord: string, newWord: string) {
+        return wordService.editWordInDB(oldWord, newWord);
+    }
+
+    /**
+     * 단어를 DB에서 삭제합니다.
+     * 
+     * @param word - 삭제할 단어
+     * @returns 삭제 작업의 성공 여부
+     */
+    public deleteWordFromDB(word: string) {
+        return wordService.deleteWordFromDB(word);
+    }
+
+    /**
+     * 단어의 유효성을 검사합니다.
+     * 
+     * @param word - 검사할 단어
+     * @returns 단어의 유효성 여부
+     */
+    public isValidWord(word: string): boolean {
+        return GameLogic.isValidWord(word, this.nowState, wordService);
+    }
+
+    /**
+     * 단어의 주제를 반환합니다.
+     * 
+     * @param word - 주제를 조회할 단어
+     * @returns 단어의 주제 배열
+     */
+    public getWordTheme(word: string): string[] {
+        return wordService.getWordTheme(word);
+    }
+    
+    /**
+     * 턴 속도를 계산합니다.
+     * 
+     * @param roundTime - 현재 라운드 시간
+     * @returns 턴 속도
+     */
+    public getTurnSpeed(roundTime: number): number {
+        return GameLogic.getTurnSpeed(roundTime);
+    }
+
+    /**
+     * 다음 시작 글자와 미션 글자를 결정합니다.
+     * 
+     * @param exclusion - 제외할 글자 집합
+     * @returns 시작 글자 및 미션 글자 객체
+     */
+    public getStartChar(exclusion: Set<string | [string, string]> = new Set()): {startChar: string, missionChar: string | null}  {
+        const result = GameLogic.getStartChar(this.gameSetting, wordService, exclusion);
+        this.nowState = result;
+        return result;
+    }
+
+    /**
+     * 현재 게임 상태를 반환합니다.
+     * 
+     * @returns 현재 게임 상태 객체
+     */
+    public getCurrentState() {
+        return this.nowState;
+    }
+
+    /**
+     * 게임을 시작합니다.
+     * 
+     * @returns 초기 게임 상태 및 턴 정보 객체
+     */
+    public gameStart(){
+        this.nowState = null;
+        this.hintStack = 0;
+        this.hintWord = "";
+        this.revealedIndices.clear();
+        this.exclusionSet.clear();
+        
+        const nextSpeed = this.getTurnSpeed(this.gameSetting.roundTime);
+        let nextTrunTime = 15000 - 1400 * nextSpeed;
+        this.usedWords = [];
+        
+        if (this.gameSetting.roundTime === 0 || !isFinite(this.gameSetting.roundTime)) {
+            nextTrunTime = Infinity;
+        }
+        
+        const startState = this.getStartChar();
+        return {...startState, turnTime: nextTrunTime, turnSpeed: nextSpeed};
+    }
+
+    /**
+     * 단어를 제출하고 게임 상태를 업데이트합니다.
+     * 
+     * @param word - 제출된 단어
+     * @param roundTime - 현재 라운드 시간
+     * @returns 제출 결과 객체
+     */
+    public submitWord(word: string, roundTime: number): SubminWordResult {
+        const startChar = this.nowState ? this.nowState.startChar : '';
+        const missionChar = this.nowState ? this.nowState.missionChar : null;
+        
+        if (!this.isValidWord(word) || this.nowState === null) {
+            return {ok: false, reason: ""};
+        } else if (this.gameSetting.mode === "mission" && this.nowState.missionChar && !word.includes(this.nowState.missionChar)) {
+            return {ok: false, reason: "미션 글자 미포함!"};
+        } else {
+            const wordTheme = this.getWordTheme(word);
+            const wordEntry = {word, theme: wordTheme};
+            
+            if (this.gameSetting.notAgainSameChar) {
+                this.exclusionSet.add(this.gameSetting.mode === 'normal' ? word.charAt(0) : [word.charAt(0), this.nowState!.missionChar!]);
+            }
+            
+            const nextSpeed = this.getTurnSpeed(roundTime);
+            const nextTrunTime = 15000 - 1400 * nextSpeed;
+            
+            const {startChar: nextChar, missionChar: nextMissionChar} = this.getStartChar(this.exclusionSet);
+            
+            if (this.gameSetting.notAgainSameChar) {
+                this.exclusionSet.add(this.gameSetting.mode === 'normal' ? nextChar : [nextChar, nextMissionChar!]);
+            }
+            
+            const usedHintCount = this.hintStack;
+            this.hintStack = 0;
+            this.hintWord = "";
+            this.revealedIndices.clear();
+            
+            const actualTrunTime = (roundTime === 0 || !isFinite(roundTime)) ? Infinity : Math.min(roundTime, nextTrunTime + 100);
+            
+            this.usedWords.push({char: startChar, word, missionChar: missionChar, useHintCount: usedHintCount});
+            
+            return {ok: true, wordEntry, nextChar, nextMissionChar, turnSpeed: nextSpeed, trunTime: actualTrunTime};
+        }
+    }
+
+    /**
+     * 힌트 단어를 생성합니다.
+     * 
+     * @returns 힌트 단어 문자열
+     */
+    public getHint(){
+        if (this.nowState === null) return "";
+        
+        if (this.gameSetting.hintMode === 'auto') {
+            if (this.gameSetting.mode === 'normal') {
+                const hintWords = Array.from(wordService.NormalWordMap.get(this.nowState.startChar) || []);
+                if (hintWords.length > 0) {
+                    const randomIndex = Math.floor(Math.random() * hintWords.length);
+                    return `${hintWords[randomIndex]}`;
+                }
+            } else if (this.gameSetting.mode === 'mission') {
+                const key = wordService.getMissionKey(this.nowState.startChar, this.nowState.missionChar!);
+                const hintWords = Array.from(wordService.MissionWordMap.get(key) || []);
+                if (hintWords.length > 0) {
+                    const randomIndex = Math.floor(Math.random() * hintWords.length);
+                    return `${hintWords[randomIndex]}`;
+                }
+            }
+        } else {
+            if (this.gameSetting.mode === 'normal') {
+                const hintWords = Array.from(wordService.NormalWordMap.get(this.nowState.startChar) || []);
+                if (hintWords.length > 0) {
+                    const longestWord = hintWords.reduce((a, b) => a.length >= b.length ? a : b, "");
+                    return `${longestWord}`;
+                }
+            } else if (this.gameSetting.mode === 'mission') {
+                const hintWords = Array.from(wordService.MissionWordMap.get(wordService.getMissionKey(this.nowState.startChar, this.nowState.missionChar!)) || []);
+                if (hintWords.length > 0) {
+                    const manyIncludeWord = hintWords.reduce((a, b) => {
+                        const aCount = a.split(this.nowState!.missionChar!).length - 1;
+                        const bCount = b.split(this.nowState!.missionChar!).length - 1;
+                        if (aCount !== bCount) {
+                            return aCount >= bCount ? a : b;
+                        } else {
+                            return a.length >= b.length ? a : b;
+                        }
+                    }, "");
+                    return `${manyIncludeWord}`;
+                }
+            }
+        }
+        return "";
+    }
+
+    /**
+     * 게임 종료 힌트를 반환합니다.
+     * 
+     * @returns 힌트 단어 문자열
+     */
+    public gameEndHint() {
+        if (this.hintWord) return this.hintWord;
+        this.hintWord = this.getHint();
+        return this.hintWord;
+    }
+
+    /**
+     * 힌트 단어를 반환합니다.
+     * 
+     * @returns 힌트 단어 문자열
+     */
+    public getHintWord() {
+        if (this.nowState === null) return null;
+        if (this.hintStack === 0) {
+            this.hintWord = this.getHint();
+        }
+
+        let currentHint = '';
+        const wordLength = this.hintWord.length;
+
+        const revealRandomIndices = (targetCount: number) => {
+            let revealedCount = this.revealedIndices.size;
+            while (revealedCount < targetCount) {
+                const randomIndex = Math.floor(Math.random() * wordLength);
+                if (!this.revealedIndices.has(randomIndex)) {
+                    this.revealedIndices.add(randomIndex);
+                    revealedCount++;
+                }
+            }
+        };
+
+        if (this.hintStack === 0) {
+            for (let i = 0; i < wordLength; i++) {
+                currentHint += disassemble(this.hintWord[i])[0];
+            }
+        } else if (this.hintStack === 1) {
+            const maxRevealCount = Math.floor(wordLength / 3);
+            revealRandomIndices(maxRevealCount);
+            for (let i = 0; i < wordLength; i++) {
+                if (this.revealedIndices.has(i)) {
+                    currentHint += this.hintWord[i];
+                } else {
+                    currentHint += disassemble(this.hintWord[i])[0];
+                }
+            }
+        } else if (this.hintStack === 2) {
+            const maxRevealCount = Math.floor(wordLength / 2);
+            revealRandomIndices(maxRevealCount);
+            for (let i = 0; i < wordLength; i++) {
+                if (this.revealedIndices.has(i)) {
+                    currentHint += this.hintWord[i];
+                } else {
+                    currentHint += disassemble(this.hintWord[i])[0];
+                }
+            }
+        } else if (this.hintStack === 3) {
+            const maxRevealCount = Math.floor((wordLength * 2) / 3);
+            revealRandomIndices(maxRevealCount);
+            for (let i = 0; i < wordLength; i++) {
+                if (this.revealedIndices.has(i)) {
+                    currentHint += this.hintWord[i];
+                } else {
+                    currentHint += disassemble(this.hintWord[i])[0];
+                }
+            }
+        } else if (this.hintStack >= 4) {
+            currentHint = this.hintWord;
+        } else {
+            const maxRevealCount = Math.floor(wordLength / 2);
+            revealRandomIndices(maxRevealCount);
+            for (let i = 0; i < wordLength; i++) {
+                if (this.revealedIndices.has(i)) {
+                    currentHint += this.hintWord[i];
+                } else {
+                    currentHint += disassemble(this.hintWord[i])[0];
+                }
+            }
+        }
+        this.hintStack++;
+
+        return currentHint;
+    }
+
+    /**
+     * 게임을 종료합니다.
+     * 
+     * @returns 종료된 게임의 사용된 단어 배열
+     */
+    public gameEnd() {
+        if (!this.usedWords[0]?.isFailed) {
+            this.usedWords.push({char: this.nowState ? this.nowState.startChar : '', word: this.hintWord, missionChar: this.nowState ? this.nowState.missionChar : null, useHintCount: this.hintStack, isFailed: true});
+        }
+        return { usedWords: this.usedWords }
+    }
+}
+
+const gameManager = GameManager.getInstance();
+
+export default gameManager;
\ No newline at end of file
diff --git a/app/mini-game/game/lib/SoundManager.ts b/app/mini-game/game/lib/SoundManager.ts
new file mode 100644
index 0000000..858f27c
--- /dev/null
+++ b/app/mini-game/game/lib/SoundManager.ts
@@ -0,0 +1,151 @@
+import { Howl } from "howler";
+
+/**
+ * 사운드 관리를 위한 클래스
+ * Howler.js를 사용하여 오디오 리소스를 로드하고 재생합니다.
+ * Singleton 패턴을 사용하여 인스턴스를 관리합니다.
+ */
+class SoundManager {
+    private static instance: SoundManager;
+    private sounds: Record<string, Howl> = {};
+    private lastPlayed: Record<string, number> = {};
+
+    private constructor() {
+        // Singleton
+    }
+
+    /**
+     * SoundManager의 인스턴스를 반환합니다.
+     */
+    public static getInstance(): SoundManager {
+        if (!SoundManager.instance) {
+            SoundManager.instance = new SoundManager();
+        }
+        return SoundManager.instance;
+    }
+
+    /**
+     * 모든 사운드 리소스를 로드합니다.
+     * 게임 시작 시 호출되어야 합니다.
+     */
+    public load() {
+        // BGM 및 효과음 로드
+        for (let i = 0; i <= 10; i++) {
+            this.sounds[`T${i}`] = new Howl({
+                src: [`/audio/bgm/T${i}.mp3`],
+                volume: 1.0,
+            });
+            this.sounds[`As${i}`] = new Howl({
+                src: [`/audio/in_game/As${i}.mp3`],
+                volume: 1.0,
+            });
+            this.sounds[`K${i}`] = new Howl({
+                src: [`/audio/in_game/K${i}.mp3`],
+                volume: 1.0,
+            });
+        }
+        
+        const commonSounds = [
+            { key: "Al", path: "/audio/in_game/Al.mp3" },
+            { key: "mission", path: "/audio/in_game/mission.mp3" },
+            { key: "fail", path: "/audio/in_game/fail.mp3" },
+            { key: "timeout", path: "/audio/in_game/timeout.mp3" },
+            { key: "game_start", path: "/audio/game/game_start.mp3" },
+            { key: "round_start", path: "/audio/game/round_start.mp3" },
+        ];
+
+        commonSounds.forEach(({ key, path }) => {
+            this.sounds[key] = new Howl({
+                src: [path],
+                volume: 1.0,
+            });
+        });
+
+        this.sounds["jaqwiBGM"] = new Howl({
+            src: ["/audio/bgm/JaqwiBGM.mp3"],
+            volume: 1.0,
+            loop: true,
+        });
+    }
+
+    /**
+     * 특정 사운드를 재생합니다.
+     * 이미 재생 중인 경우 중지하고 처음부터 다시 재생합니다.
+     * @param soundName 재생할 사운드 이름
+     */
+    public play(soundName: string) {
+        this.stop(soundName);
+        this.sounds[soundName]?.play();
+    }
+
+    /**
+     * 특정 사운드를 최소 간격을 두고 재생합니다.
+     * 너무 빈번한 재생을 방지할 때 사용합니다.
+     * @param soundName 재생할 사운드 이름
+     * @param minGapMs 최소 재생 간격 (ms)
+     */
+    public playOnce(soundName: string, minGapMs = 80) {
+        const now = Date.now();
+        const last = this.lastPlayed[soundName] || 0;
+        if (now - last < minGapMs) return;
+        this.lastPlayed[soundName] = now;
+        this.play(soundName);
+    }
+
+    /**
+     * 사운드를 재생하고 완료 시 콜백을 실행합니다.
+     * @param soundName 재생할 사운드 이름
+     * @param cb 재생 완료 후 실행할 콜백 함수
+     */
+    public playWithEnd(soundName: string, cb?: () => void) {
+        this.stop(soundName);
+        const s = this.sounds[soundName];
+        if (!s) return;
+        
+        // 기존 이벤트 리스너 제거 (중복 실행 방지)
+        s.off('end');
+        
+        s.once('end', () => {
+            if (cb) cb();
+        });
+        s.play();
+    }
+
+    /**
+     * 특정 사운드 재생을 중지합니다.
+     * @param soundName 중지할 사운드 이름
+     */
+    public stop(soundName: string) {
+        this.sounds[soundName]?.stop();
+    }
+
+    /**
+     * 특정 사운드의 볼륨을 조절합니다.
+     * @param soundName 사운드 이름
+     * @param volume 볼륨 (0.0 ~ 1.0)
+     */
+    public setVolume(soundName: string, volume: number) {
+        this.sounds[soundName]?.volume(volume);
+    }
+
+    /**
+     * 모든 사운드의 볼륨을 일괄 설정합니다.
+     * @param volume 0.0 ~ 1.0
+     */
+    public setAllVolume(volume: number) {
+        Object.values(this.sounds).forEach((s) => {
+            s.volume(volume);
+        });
+    }
+
+    /**
+     * 모든 사운드를 중지합니다.
+     */
+    public stopAllSounds() {
+        Object.values(this.sounds).forEach((s) => {
+            s.stop();
+        });
+    }
+}
+
+export const soundManager = SoundManager.getInstance();
\ No newline at end of file
diff --git a/app/mini-game/game/lib/fileUtils.ts b/app/mini-game/game/lib/fileUtils.ts
new file mode 100644
index 0000000..eae2d8d
--- /dev/null
+++ b/app/mini-game/game/lib/fileUtils.ts
@@ -0,0 +1,23 @@
+/**
+ * 텍스트 파일에서 단어를 파싱합니다.
+ * @param file - 업로드된 텍스트 파일
+ * @returns 파싱된 단어 배열
+ */
+export async function parseWordsFromFile(file: File): Promise<string[]> {
+    if (file.size > 1024 * 1024) {
+        throw new Error('파일 크기는 1MB를 초과할 수 없습니다.');
+    }
+
+    if (!file.name.endsWith('.txt')) {
+        throw new Error('txt 파일만 업로드 가능합니다.');
+    }
+
+    const pattern = /[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g;
+    const text = await file.text();
+    
+    // 줄바꿈으로 분리하고 특수문자 제거 및 소문자 변환
+    return text
+        .split('\n')
+        .map(line => line.replace(pattern, '').toLowerCase())
+        .filter(line => line.length > 1);
+}
\ No newline at end of file
diff --git a/app/mini-game/game/lib/wordDB.ts b/app/mini-game/game/lib/wordDB.ts
new file mode 100644
index 0000000..2ba19f3
--- /dev/null
+++ b/app/mini-game/game/lib/wordDB.ts
@@ -0,0 +1,130 @@
+import { openDB, DBSchema, IDBPDatabase } from 'idb';
+import { parseWordsFromFile } from './fileUtils';
+
+interface WordDBSchema extends DBSchema {
+    words: {
+        key: string;
+        value: {
+            word: string;
+            theme: string;
+        };
+    };
+}
+
+const DB_NAME = 'KkutuWordDB';
+const DB_VERSION = 1;
+const STORE_NAME = 'words';
+
+let dbInstance: IDBPDatabase<WordDBSchema> | null = null;
+
+/**
+ * IndexedDB 데이터베이스를 초기화합니다.
+ * Singleton 패턴과 유사하게 인스턴스를 재사용합니다.
+ */
+async function initDB(): Promise<IDBPDatabase<WordDBSchema>> {
+    if (dbInstance) return dbInstance;
+
+    dbInstance = await openDB<WordDBSchema>(DB_NAME, DB_VERSION, {
+        upgrade(db) {
+            if (!db.objectStoreNames.contains(STORE_NAME)) {
+                db.createObjectStore(STORE_NAME, { keyPath: 'word' });
+            }
+        },
+    });
+
+    return dbInstance;
+}
+
+/**
+ * txt 파일에서 단어를 파싱하여 IndexedDB에 저장합니다.
+ * @param file - 업로드된 텍스트 파일
+ * @returns 저장된 단어 개수
+ */
+export async function loadWordsFromFile(file: File): Promise<number> {
+    const words = await parseWordsFromFile(file);
+
+    const db = await initDB();
+    const tx = db.transaction(STORE_NAME, 'readwrite');
+    const store = tx.objectStore(STORE_NAME);
+
+    let count = 0;
+    for (const word of words) {
+        await store.put({ word, theme: '자유' });
+        count++;
+    }
+
+    await tx.done;
+    return count;
+}
+
+/**
+ * IndexedDB에서 모든 단어를 가져옵니다.
+ * @returns 단어 배열 (ㄱㄴㄷ순 정렬)
+ */
+export async function getAllWords(): Promise<Array<{ word: string; theme: string }>> {
+    const db = await initDB();
+    const words = await db.getAll(STORE_NAME);
+
+    // 한글 자음 순서로 정렬
+    return words.sort((a, b) => a.word.localeCompare(b.word, 'ko'));
+}
+
+/**
+ * 접두사로 단어를 검색합니다.
+ * @param prefix - 검색할 접두사
+ * @returns 일치하는 단어 배열
+ */
+export async function searchWordsByPrefix(prefix: string): Promise<Array<{ word: string; theme: string }>> {
+    const allWords = await getAllWords();
+    return allWords.filter(item => item.word.startsWith(prefix));
+}
+
+/**
+ * 단어를 수정합니다.
+ * @param oldWord - 기존 단어
+ * @param newWord - 새로운 단어
+ */
+export async function updateWord(oldWord: string, newWord: string): Promise<void> {
+    const db = await initDB();
+    const tx = db.transaction(STORE_NAME, 'readwrite');
+    const store = tx.objectStore(STORE_NAME);
+
+    await store.delete(oldWord);
+    await store.put({ word: newWord, theme: '자유' });
+    await tx.done;
+}
+
+/**
+ * 단어를 삭제합니다.
+ * @param word - 삭제할 단어
+ */
+export async function deleteWord(word: string): Promise<void> {
+    const db = await initDB();
+    await db.delete(STORE_NAME, word);
+}
+
+/**
+ * 단어를 추가합니다.
+ * @param word - 추가할 단어
+ */
+export async function addWord(word: string): Promise<void> {
+    const db = await initDB();
+    await db.put(STORE_NAME, { word, theme: '자유' });
+}
+
+/**
+ * 저장된 단어가 있는지 확인합니다.
+ */
+export async function hasWords(): Promise<boolean> {
+    const db = await initDB();
+    const count = await db.count(STORE_NAME);
+    return count > 0;
+}
+
+/**
+ * 모든 단어를 삭제합니다.
+ */
+export async function clearAllWords(): Promise<void> {
+    const db = await initDB();
+    await db.clear(STORE_NAME);
+}
\ No newline at end of file
diff --git a/app/mini-game/game/services/WordService.ts b/app/mini-game/game/services/WordService.ts
new file mode 100644
index 0000000..5e458b7
--- /dev/null
+++ b/app/mini-game/game/services/WordService.ts
@@ -0,0 +1,271 @@
+import { KOREAN_CHARS, ENGLISH_CHARS, englishRegex, koreanRegex } from '../const';
+
+/**
+ * 단어 데이터베이스 및 관련 로직을 관리하는 서비스 클래스
+ * Singleton 패턴 적용
+ */
+export class WordService {
+    private static instance: WordService;
+    private wordDB: {word: string, theme: string[]}[] = [];
+    private wordThemeDB: Map<string, string[]> = new Map();
+    private wordSet: Set<string> = new Set();
+    
+    public NormalStartCharSet: Set<string> = new Set();
+    public MissionStartCharSet: Set<[string, string]> = new Set();
+    public NormalEngStartCharSet: Set<string> = new Set();
+    public MissionEngStartCharSet: Set<[string, string]> = new Set();
+    
+    public NormalWordMap: Map<string, Set<string>> = new Map();
+    public MissionWordMap: Map<string, Set<string>> = new Map();
+    public NormalEngWordMap: Map<string, Set<string>> = new Map();
+    public MissionEngWordMap: Map<string, Set<string>> = new Map();
+
+    private constructor() {}
+
+    public static getInstance() {
+        if (!WordService.instance) {
+            WordService.instance = new WordService();
+        }
+        return WordService.instance;
+    }
+
+    public getMissionKey(startChar: string, missionChar: string): string {
+        return `${startChar}|${missionChar}`;
+    }
+
+    public loadWordDB(data: {word: string, theme: string[]}[]) {
+        const pattern = /[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g;
+        
+        this.wordDB = data.filter(entry => entry.word.replace(pattern, '').length > 1).map(entry => ({word: entry.word.replace(pattern, '').toLowerCase(), theme: entry.theme}));
+        this.wordSet = new Set(this.wordDB.map(entry => entry.word));
+        this.wordThemeDB = new Map(this.wordDB.map(entry => [entry.word, entry.theme]));
+        
+        this.NormalStartCharSet = new Set(this.wordDB.filter(entry => koreanRegex.test(entry.word.charAt(0))).map(entry => entry.word.charAt(0)));
+        this.NormalEngStartCharSet = new Set(this.wordDB.filter(entry => englishRegex.test(entry.word.charAt(0))).map(entry => entry.word.charAt(0)));
+        
+        this.NormalWordMap.clear();
+        for (const entry of this.wordDB) {
+            const startChar = entry.word.charAt(0);
+            if (koreanRegex.test(startChar)) {
+                if (!this.NormalWordMap.has(startChar)) {
+                    this.NormalWordMap.set(startChar, new Set());
+                }
+                this.NormalWordMap.get(startChar)?.add(entry.word);
+            } else if (englishRegex.test(startChar)) {
+                if (!this.NormalEngWordMap.has(startChar)) {
+                    this.NormalEngWordMap.set(startChar, new Set());
+                }
+                this.NormalEngWordMap.get(startChar)?.add(entry.word);
+            }
+        }
+        this.MissionStartCharSet.clear();
+        this.MissionWordMap.clear();
+        this.MissionEngStartCharSet.clear();
+        this.MissionEngWordMap.clear();
+
+        for (const entry of this.wordDB) {
+            for (const mchar of KOREAN_CHARS) {
+                if (entry.word.includes(mchar)) {
+                    this.MissionStartCharSet.add([entry.word.charAt(0), mchar]);
+                    const key = this.getMissionKey(entry.word.charAt(0), mchar);
+                    if (!this.MissionWordMap.has(key)) {
+                        this.MissionWordMap.set(key, new Set());
+                    }
+                    this.MissionWordMap.get(key)?.add(entry.word);
+                }
+            }
+            for (const mchar of ENGLISH_CHARS) {
+                if (entry.word.includes(mchar)) {
+                    this.MissionEngStartCharSet.add([entry.word.charAt(0), mchar]);
+                    const key = this.getMissionKey(entry.word.charAt(0), mchar);
+                    if (!this.MissionEngWordMap.has(key)) {
+                        this.MissionEngWordMap.set(key, new Set());
+                    }
+                    this.MissionEngWordMap.get(key)?.add(entry.word);
+                }
+            }
+        }
+    }
+
+    public clearDB() {
+        this.wordDB = [];
+        this.wordSet.clear();
+        this.wordThemeDB.clear();
+        this.NormalStartCharSet.clear();
+        this.MissionStartCharSet.clear();
+        this.NormalEngStartCharSet.clear();
+        this.MissionEngStartCharSet.clear();
+        this.NormalWordMap.clear();
+        this.MissionWordMap.clear();
+        this.MissionEngWordMap.clear();
+        this.NormalEngWordMap.clear();
+    }
+
+    public addWordToDB(word: string, theme: string[]) {
+        const cleanWord = word.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g, '').toLowerCase();
+        if (cleanWord.length <= 1 || this.wordSet.has(cleanWord)) {
+            return false;
+        }
+        this.wordDB.push({word: cleanWord, theme});
+        this.wordSet.add(cleanWord);
+        this.wordThemeDB.set(cleanWord, theme);
+        if (koreanRegex.test(cleanWord.charAt(0))) {
+            this.NormalStartCharSet.add(cleanWord.charAt(0));
+            if (!this.NormalWordMap.has(cleanWord.charAt(0))) {
+                this.NormalWordMap.set(cleanWord.charAt(0), new Set());
+            }
+            this.NormalWordMap.get(cleanWord.charAt(0))?.add(cleanWord);
+            this.NormalStartCharSet.add(cleanWord.charAt(0));
+            for (const mchar of KOREAN_CHARS) {
+                if (cleanWord.includes(mchar)) {
+                    this.MissionStartCharSet.add([cleanWord.charAt(0), mchar]);
+                    const key = this.getMissionKey(cleanWord.charAt(0), mchar);
+                    if (!this.MissionWordMap.has(key)) {
+                        this.MissionWordMap.set(key, new Set());
+                    }
+                    this.MissionWordMap.get(key)?.add(cleanWord);
+                }
+            }
+        } else if (englishRegex.test(cleanWord.charAt(0))) {
+            this.NormalEngStartCharSet.add(cleanWord.charAt(0));
+            if (!this.NormalEngWordMap.has(cleanWord.charAt(0))) {
+                this.NormalEngWordMap.set(cleanWord.charAt(0), new Set());
+            }
+            this.NormalEngWordMap.get(cleanWord.charAt(0))?.add(cleanWord);
+            for (const mchar of ENGLISH_CHARS) {
+                if (cleanWord.includes(mchar)) {
+                    this.MissionEngStartCharSet.add([cleanWord.charAt(0), mchar]);
+                    const key = this.getMissionKey(cleanWord.charAt(0), mchar);
+                    if (!this.MissionEngWordMap.has(key)) {
+                        this.MissionEngWordMap.set(key, new Set());
+                    }
+                    this.MissionEngWordMap.get(key)?.add(cleanWord);
+                }
+            }
+        }
+        return true;
+    }
+
+    public editWordInDB(oldWord: string, newWord: string) {
+        const cleanOldWord = oldWord.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g, '').toLowerCase();
+        const cleanNewWord = newWord.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g, '').toLowerCase();
+        if (!this.wordSet.has(cleanOldWord) || cleanNewWord.length <= 1) {
+            return false;
+        }
+        const entryIndex = this.wordDB.findIndex(entry => entry.word === cleanOldWord);
+        if (entryIndex === -1) {
+            return false;
+        }
+        const theme = this.wordDB[entryIndex].theme;
+        this.wordDB[entryIndex].word = cleanNewWord;
+        this.wordSet.delete(cleanOldWord);
+        this.wordSet.add(cleanNewWord);
+        this.wordThemeDB.delete(cleanOldWord);
+        this.wordThemeDB.set(cleanNewWord, theme);
+
+        if (englishRegex.test(cleanNewWord.charAt(0))) {
+            this.NormalEngStartCharSet.add(cleanNewWord.charAt(0));
+            if (!this.NormalEngWordMap.has(cleanNewWord.charAt(0))) {
+                this.NormalEngWordMap.set(cleanNewWord.charAt(0), new Set());
+            }
+            this.NormalEngWordMap.get(cleanNewWord.charAt(0))?.add(cleanNewWord);
+        } else if (koreanRegex.test(cleanNewWord.charAt(0))) {
+            this.NormalStartCharSet.add(cleanNewWord.charAt(0));
+            if (!this.NormalWordMap.has(cleanNewWord.charAt(0))) {
+                this.NormalWordMap.set(cleanNewWord.charAt(0), new Set());
+            }
+            this.NormalWordMap.get(cleanNewWord.charAt(0))?.add(cleanNewWord);
+        }
+
+        if (koreanRegex.test(cleanOldWord.charAt(0))) {
+            this.NormalWordMap.get(cleanOldWord.charAt(0))?.delete(cleanOldWord);
+            if ((this.NormalWordMap.get(cleanOldWord.charAt(0)) ?? new Set()).size === 0) {
+                this.NormalStartCharSet.delete(cleanOldWord.charAt(0));
+            }
+        } else if (englishRegex.test(cleanOldWord.charAt(0))) {
+            this.NormalEngWordMap.get(cleanOldWord.charAt(0))?.delete(cleanOldWord);
+            if ((this.NormalEngWordMap.get(cleanOldWord.charAt(0)) ?? new Set()).size === 0) {
+                this.NormalEngStartCharSet.delete(cleanOldWord.charAt(0));
+            }
+        }
+        for (const mchar of KOREAN_CHARS) {
+            const key = this.getMissionKey(cleanOldWord.charAt(0), mchar);
+            this.MissionWordMap.get(key)?.delete(cleanOldWord);
+            if ((this.MissionWordMap.get(key) ?? new Set()).size === 0) {
+                this.MissionStartCharSet.delete([cleanOldWord.charAt(0), mchar]);
+            }
+
+            const key2 = this.getMissionKey(cleanNewWord.charAt(0), mchar);
+            if (cleanNewWord.includes(mchar)) {
+                this.MissionStartCharSet.add([cleanNewWord.charAt(0), mchar]);
+                if (!this.MissionWordMap.has(key2)) {
+                    this.MissionWordMap.set(key2, new Set());
+                }
+                this.MissionWordMap.get(key2)?.add(cleanNewWord);
+            }
+        }
+        for (const mchar of ENGLISH_CHARS) {
+            const key = this.getMissionKey(cleanOldWord.charAt(0), mchar);
+            this.MissionEngWordMap.get(key)?.delete(cleanOldWord);
+            if ((this.MissionEngWordMap.get(key) ?? new Set()).size === 0) {
+                this.MissionEngStartCharSet.delete([cleanOldWord.charAt(0), mchar]);
+            }
+
+            const key2 = this.getMissionKey(cleanNewWord.charAt(0), mchar);
+            if (cleanNewWord.includes(mchar)) {
+                this.MissionEngStartCharSet.add([cleanNewWord.charAt(0), mchar]);
+                if (!this.MissionEngWordMap.has(key2)) {
+                    this.MissionEngWordMap.set(key2, new Set());
+                }
+                this.MissionEngWordMap.get(key2)?.add(cleanNewWord);
+            }
+        }
+        return true;
+    }
+
+    public deleteWordFromDB(word: string) {
+        const cleanWord = word.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎ]/g, '').toLowerCase();
+        if (!this.wordSet.has(cleanWord)) {
+            return false;
+        }
+        this.wordDB = this.wordDB.filter(entry => entry.word !== cleanWord);
+        this.wordSet.delete(cleanWord);
+        this.wordThemeDB.delete(cleanWord);
+        if (koreanRegex.test(cleanWord.charAt(0))) {
+            this.NormalWordMap.get(cleanWord.charAt(0))?.delete(cleanWord);
+            if ((this.NormalWordMap.get(cleanWord.charAt(0)) ?? new Set()).size === 0) {
+                this.NormalStartCharSet.delete(cleanWord.charAt(0));
+            }
+        } else if (englishRegex.test(cleanWord.charAt(0))) {
+            this.NormalEngWordMap.get(cleanWord.charAt(0))?.delete(cleanWord);
+            if ((this.NormalEngWordMap.get(cleanWord.charAt(0)) ?? new Set()).size === 0) {
+                this.NormalEngStartCharSet.delete(cleanWord.charAt(0));
+            }
+        }
+        for (const mchar of KOREAN_CHARS) {
+            const key = this.getMissionKey(cleanWord.charAt(0), mchar);
+            this.MissionWordMap.get(key)?.delete(cleanWord);
+            if ((this.MissionWordMap.get(key) ?? new Set()).size === 0) {
+                this.MissionStartCharSet.delete([cleanWord.charAt(0), mchar]);
+            }
+        }
+        for (const mchar of ENGLISH_CHARS) {
+            const key = this.getMissionKey(cleanWord.charAt(0), mchar);
+            this.MissionEngWordMap.get(key)?.delete(cleanWord);
+            if ((this.MissionEngWordMap.get(key) ?? new Set()).size === 0) {
+                this.MissionEngStartCharSet.delete([cleanWord.charAt(0), mchar]);
+            }
+        }
+        return true;
+    }
+
+    public hasWord(word: string): boolean {
+        return this.wordSet.has(word);
+    }
+
+    public getWordTheme(word: string): string[] {
+        return this.wordThemeDB.get(word) ?? [];
+    }
+}
+
+export const wordService = WordService.getInstance();
\ No newline at end of file
diff --git a/app/mini-game/game/store/gameSlice.ts b/app/mini-game/game/store/gameSlice.ts
new file mode 100644
index 0000000..6a2c212
--- /dev/null
+++ b/app/mini-game/game/store/gameSlice.ts
@@ -0,0 +1,39 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface GameState {
+    isPlaying: boolean;
+    pendingStart: boolean;
+    startBlocked: boolean;
+    startBlockedMessage: string | null;
+}
+
+const initialState: GameState = {
+    isPlaying: false,
+    pendingStart: false,
+    startBlocked: false,
+    startBlockedMessage: null,
+};
+
+export const gameSlice = createSlice({
+    name: 'game',
+    initialState,
+    reducers: {
+        setPlaying: (state, action: PayloadAction<boolean>) => {
+            state.isPlaying = action.payload;
+        },
+        setPendingStart: (state, action: PayloadAction<boolean>) => {
+            state.pendingStart = action.payload;
+        },
+        setStartBlocked: (state, action: PayloadAction<{ blocked: boolean; message: string | null }>) => {
+            state.startBlocked = action.payload.blocked;
+            state.startBlockedMessage = action.payload.message;
+        },
+        resetGame: (state) => {
+            state.isPlaying = false;
+            state.pendingStart = false;
+        },
+    },
+});
+
+export const { setPlaying, setPendingStart, setStartBlocked, resetGame } = gameSlice.actions;
+export default gameSlice.reducer;
\ No newline at end of file
diff --git a/app/mini-game/game/store/hooks.ts b/app/mini-game/game/store/hooks.ts
new file mode 100644
index 0000000..99acaa9
--- /dev/null
+++ b/app/mini-game/game/store/hooks.ts
@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
\ No newline at end of file
diff --git a/app/mini-game/game/store/store.ts b/app/mini-game/game/store/store.ts
new file mode 100644
index 0000000..376fe50
--- /dev/null
+++ b/app/mini-game/game/store/store.ts
@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+import gameReducer from './gameSlice';
+
+export const store = configureStore({
+    reducer: {
+        game: gameReducer,
+    },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
\ No newline at end of file
diff --git a/app/mini-game/game/types/game.types.ts b/app/mini-game/game/types/game.types.ts
new file mode 100644
index 0000000..c7bbbbd
--- /dev/null
+++ b/app/mini-game/game/types/game.types.ts
@@ -0,0 +1,64 @@
+/**
+ * 게임 설정 타입 정의
+ */
+export type GameSetting = {
+    /** 언어 설정 ('ko': 한국어, 'en': 영어) */
+    lang: 'ko' | 'en';
+    /** 게임 모드 ('normal': 일반, 'mission': 미션) */
+    mode: 'normal' | 'mission';
+    /** 힌트 모드 ('special': 특수, 'auto': 자동) */
+    hintMode: 'special' | 'auto';
+    /** 한방 단어(한 번 쓰면 다시 못 쓰는 글자) 사용 여부 */
+    notAgainSameChar: boolean;
+    /** 라운드 시간 (ms) */
+    roundTime: number;
+    /** 시작 글자 제한 (원하는 시작 글자 집합) */
+    wantStartChar: Set<string>;
+}
+
+/**
+ * 단어 제출 결과 타입
+ */
+export type SubminWordResult = {
+    /** 실패 */
+    ok: false;
+    /** 실패 사유 (실패 시) */
+    reason: string;
+} | {
+    /** 성공 */
+    ok: true;
+    /** 제출된 단어 정보 */
+    wordEntry: { word: string, theme: string[] };
+    /** 다음 시작 글자 */
+    nextChar: string;
+    /** 다음 미션 글자 (미션 모드 시) */
+    nextMissionChar: string | null;
+    /** 턴 속도 */
+    turnSpeed: number;
+    /** 턴 시간 */
+    trunTime: number;
+}
+
+/**
+ * 사용된 단어 기록 타입
+ */
+export type UsedWord = {
+    /** 시작 글자 */
+    char: string;
+    /** 단어 */
+    word: string;
+    /** 미션 글자 */
+    missionChar: string | null;
+    /** 사용된 힌트 횟수 */
+    useHintCount: number;
+    /** 실패 여부 */
+    isFailed?: boolean;
+}
+
+/**
+ * 현재 게임 상태 (시작 글자, 미션 글자)
+ */
+export type CurrentState = {
+    startChar: string;
+    missionChar: string | null;
+} | null;
\ No newline at end of file
diff --git a/app/mini-game/page.tsx b/app/mini-game/page.tsx
new file mode 100644
index 0000000..6b717f0
--- /dev/null
+++ b/app/mini-game/page.tsx
@@ -0,0 +1,26 @@
+import Providers from "./providers";
+import Game from "./game/Game";
+import MobileUnsupported from "./MobileUnsupported";
+
+export async function generateMetadata() {
+	return {
+		title: "끄코 유틸리티 - 미니 게임",
+		description: '끄코 유틸리티 - 미니 게임',
+	};
+}
+
+const MiniGamePage = () => {
+    return (
+        <Providers>
+            {/* Game visible on medium and larger screens */}
+            <div className="hidden md:flex justify-center mt-8 mb-16">
+                <Game />
+            </div>
+
+            {/* Mobile-only message */}
+            <MobileUnsupported />
+        </Providers>
+    );
+};
+
+export default MiniGamePage;
\ No newline at end of file
diff --git a/app/mini-game/providers.tsx b/app/mini-game/providers.tsx
new file mode 100644
index 0000000..e255582
--- /dev/null
+++ b/app/mini-game/providers.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { Provider } from "react-redux";
+import { ReactNode } from "react";
+import { store } from "./game/store/store";
+
+export default function Providers({ children }: { children: ReactNode }) {
+    return <Provider store={store}>{children}</Provider>;
+}
\ No newline at end of file
diff --git a/app/openapi/page.tsx b/app/openapi/page.tsx
new file mode 100644
index 0000000..7b5f438
--- /dev/null
+++ b/app/openapi/page.tsx
@@ -0,0 +1,83 @@
+import {AlignStartVertical, ChevronRight, DoorOpen} from "lucide-react";
+import Link from "next/link";
+
+export async function generateMetadata() {
+    return {
+        title: "끄코 유틸리티 - 오픈API",
+        description: `끄코 유틸리티 - 오픈API 홈`,
+        openGraph: {
+            title: "끄코 유틸리티 - 오픈API",
+            description: "끄코 유틸리티 - 오픈API 홈",
+            type: "website",
+            url: "https://kkuko-utils.vercel.app/openapi",
+            siteName: "끄코 유틸리티",
+            locale: "ko_KR",
+        },
+    };
+}
+
+const features = [
+    {
+        title: "Word Search API",
+        description: "단어 검색 기능을 API에서 만나보세요.",
+        link: "/openapi/word",
+        icon: AlignStartVertical,
+        color: "from-indigo-400 to-yellow-600",
+        bgColor: "group-hover:bg-indigo-50 dark:group-hover:bg-indigo-950/20"
+    }
+]
+
+export default function OpenAPIHomePage() {
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-slate-900 dark:to-indigo-950 p-6">
+            {/* 헤더 */}
+            <div className="max-w-7xl mx-auto mb-12">
+                <div className="text-center mb-8">
+                    <div className="flex items-center justify-center mb-4">
+                        <DoorOpen className="w-8 h-8 text-indigo-500 mr-3" />
+                        <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-indigo-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
+                            오픈 API
+                        </h1>
+                    </div>
+                    <p className="text-slate-600 dark:text-slate-300 text-lg max-w-2xl mx-auto">
+                        끄코 유틸리티의 기능을 API에서 만나보세요.
+                    </p>
+                </div>
+
+                {/* 기능 카드 그리드 */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
+                    {features.map((feature, idx) => {
+                        const IconComponent = feature.icon;
+
+                        return (
+                            <Link key={idx} href={feature.link}>
+                                <div className={`group bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl shadow-lg dark:shadow-xl border border-slate-200/50 dark:border-slate-700/50 p-6 hover:shadow-2xl dark:hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 cursor-pointer ${feature.bgColor}`}>
+                                    <div className="flex items-start justify-between mb-4">
+                                        <div className={`p-3 rounded-xl bg-gradient-to-br ${feature.color} shadow-lg group-hover:scale-110 transition-transform duration-300`}>
+                                            <IconComponent className="w-6 h-6 text-white" />
+                                        </div>
+                                        <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300 group-hover:translate-x-1 transition-all duration-300" />
+                                    </div>
+
+                                    <h3 className="text-xl font-bold text-slate-800 dark:text-slate-100 mb-3 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors duration-300">
+                                        {feature.title}
+                                    </h3>
+
+                                    <p className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed">
+                                        {feature.description}
+                                    </p>
+
+                                    <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
+                                        <span className="text-xs font-semibold text-indigo-600 dark:text-indigo-400 group-hover:text-indigo-700 dark:group-hover:text-indigo-300 transition-colors duration-300">
+                                            시작하기 →
+                                        </span>
+                                    </div>
+                                </div>
+                            </Link>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/app/openapi/word/page.tsx b/app/openapi/word/page.tsx
new file mode 100644
index 0000000..764a267
--- /dev/null
+++ b/app/openapi/word/page.tsx
@@ -0,0 +1,242 @@
+import {
+    AlertCircle,
+    Code,
+    List,
+    Search,
+    Settings,
+    Terminal,
+    Braces,
+    FileJson
+} from "lucide-react";
+
+export async function generateMetadata() {
+    return {
+        title: "끄코 유틸리티 - 오픈API 단어",
+        description: `끄코 유틸리티 - 오픈API 단어`,
+        openGraph: {
+            title: "끄코 유틸리티 - 오픈API 단어",
+            description: "끄코 유틸리티 - 오픈API 단어",
+            type: "website",
+            url: "https://kkuko-utils.vercel.app/openapi/word",
+            siteName: "끄코 유틸리티",
+            locale: "ko_KR",
+        },
+    };
+}
+
+export default function OpenApiDocsPage() {
+    const commonParameters = [
+        { name: "mode", type: "string", description: "게임 모드 (kor-start, kor-end, kung, hunmin, jaqi)", defaultValue: "kor-start" },
+        { name: "q", type: "string", description: "검색어. 모드에 따라 시작자, 끝자, 또는 초성", defaultValue: "-" },
+        { name: "limit", type: "number", description: "최대 검색 결과 수", defaultValue: "100" },
+        { name: "sortBy", type: "string", description: "정렬 기준 (abc, length, attack)", defaultValue: "length" },
+    ];
+
+    const advancedParameters = [
+        { parameterName: "manner", type: "string", description: "단어 필터 (man, jen, eti)", defaultValue: "man" },
+        { parameterName: "minLength", type: "number", description: "최소 글자 수", defaultValue: "2" },
+        { parameterName: "maxLength", type: "number", description: "최대 글자 수", defaultValue: "100" },
+        { parameterName: "duem", type: "boolean", description: "두음법칙 적용 여부", defaultValue: "true" },
+        { parameterName: "mission", type: "string", description: "포함해야 할 특정 글자", defaultValue: '""' },
+        { parameterName: "themeId", type: "number", description: "자음 퀴즈 모드 사용 시 필수 테마 Id", defaultValue: "-" },
+    ];
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-slate-900 dark:to-indigo-950 p-6">
+            <div className="max-w-5xl mx-auto mb-12">
+                <div className="text-center mb-12">
+                    <div className="flex items-center justify-center mb-4">
+                        <Code className="w-10 h-10 text-indigo-500 mr-3" />
+                        <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-indigo-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
+                            Open API
+                        </h1>
+                    </div>
+                    <p className="text-slate-600 dark:text-slate-300 text-lg max-w-2xl mx-auto">
+                        오픈 DB의 단어 검색 기능을 API에서 만나보세요.
+                    </p>
+                </div>
+
+                <div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-3xl shadow-lg border border-slate-200/50 dark:border-slate-700/50 p-8 mb-8 transition-all">
+                    <div className="flex items-center mb-6">
+                        <div className="p-2 rounded-lg bg-blue-500/10 mr-4">
+                            <Terminal className="w-6 h-6 text-blue-500" />
+                        </div>
+                        <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100">기본 정보</h2>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-4 bg-slate-100 dark:bg-slate-900/50 p-4 rounded-2xl border border-slate-200 dark:border-slate-700">
+                        <span className="px-3 py-1 bg-blue-500 text-white text-sm font-bold rounded-lg">GET</span>
+                        <code className="text-indigo-600 dark:text-indigo-400 font-mono text-lg break-all">
+                            /api/words/search
+                        </code>
+                    </div>
+                    <p className="mt-4 text-slate-600 dark:text-slate-400 text-sm">
+                        모드별 필터링 및 정렬 옵션을 적용하여 오픈DB의 단어 리스트를 반환합니다.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 gap-8 mb-8">
+                    <section className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-3xl shadow-lg border border-slate-200/50 dark:border-slate-700/50 p-8">
+                        <div className="flex items-center mb-8">
+                            <div className="p-2 rounded-lg bg-purple-500/10 mr-4">
+                                <List className="w-6 h-6 text-purple-500" />
+                            </div>
+                            <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100">쿼리 파라미터</h2>
+                        </div>
+
+                        <h3 className="text-lg font-bold text-indigo-600 dark:text-indigo-400 mb-4 flex items-center">
+                            <Search className="w-4 h-4 mr-2" /> 1. 필수 및 공통 옵션
+                        </h3>
+                        <div className="overflow-x-auto mb-10">
+                            <table className="w-full text-sm text-left border-collapse">
+                                <thead>
+                                <tr className="border-b border-slate-200 dark:border-slate-700">
+                                    <th className="py-3 px-4 text-slate-500 font-semibold">파라미터</th>
+                                    <th className="py-3 px-4 text-slate-500 font-semibold">타입</th>
+                                    <th className="py-3 px-4 text-slate-500 font-semibold">설명</th>
+                                    <th className="py-3 px-4 text-slate-500 font-semibold">기본값</th>
+                                </tr>
+                                </thead>
+                                <tbody className="text-slate-700 dark:text-slate-300">
+                                {commonParameters.map((param, index) => (
+                                    <tr key={index} className="border-b border-slate-100 dark:border-slate-800 last:border-0">
+                                        <td className="py-4 px-4 font-mono text-indigo-500 font-bold">{param.name}</td>
+                                        <td className="py-4 px-4">{param.type}</td>
+                                        <td className="py-4 px-4">{param.description}</td>
+                                        <td className="py-4 px-4 italic">{param.defaultValue}</td>
+                                    </tr>
+                                ))}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <h3 className="text-lg font-bold text-emerald-600 dark:text-emerald-400 mb-4 flex items-center">
+                            <Settings className="w-4 h-4 mr-2" /> 2. 세부 필터링 (Advanced)
+                        </h3>
+                        <div className="overflow-x-auto">
+                            <table className="w-full text-sm text-left border-collapse">
+                                <thead>
+                                <tr className="border-b border-slate-200 dark:border-slate-700">
+                                    <th className="py-3 px-4 text-slate-500 font-semibold">파라미터</th>
+                                    <th className="py-3 px-4 text-slate-500 font-semibold">타입</th>
+                                    <th className="py-3 px-4 text-slate-500 font-semibold">설명</th>
+                                    <th className="py-3 px-4 text-slate-500 font-semibold">기본값</th>
+                                </tr>
+                                </thead>
+                                <tbody className="text-slate-700 dark:text-slate-300">
+                                {advancedParameters.map((param, index) => (
+                                    <tr key={index} className="border-b border-slate-100 dark:border-slate-800 last:border-0">
+                                        <td className="py-4 px-4 font-mono text-emerald-500 font-bold">{param.parameterName}</td>
+                                        <td className="py-4 px-4">{param.type}</td>
+                                        <td className="py-4 px-4">{param.description}</td>
+                                        <td className="py-4 px-4 italic">{param.defaultValue}</td>
+                                    </tr>
+                                ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    </section>
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+                    <section className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-3xl shadow-lg border border-slate-200/50 dark:border-slate-700/50 p-8">
+                        <div className="flex items-center mb-6">
+                            <div className="p-2 rounded-lg bg-indigo-500/10 mr-4">
+                                <Braces className="w-6 h-6 text-indigo-500" />
+                            </div>
+                            <h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100">Response Body</h2>
+                        </div>
+
+                        <div className="space-y-4">
+                            <div className="p-4 bg-slate-50 dark:bg-slate-900/50 rounded-2xl border border-slate-100 dark:border-slate-800">
+                                <h4 className="text-sm font-bold text-indigo-600 mb-2">Success (Array)</h4>
+                                <ul className="space-y-3">
+                                    <li className="flex flex-col">
+                                        <span className="text-sm font-mono font-bold text-slate-800 dark:text-slate-200">word: string</span>
+                                        <span className="text-xs text-slate-500 font-medium leading-relaxed">검색된 단어의 명칭</span>
+                                    </li>
+                                    <li className="flex flex-col">
+                                        <span className="text-sm font-mono font-bold text-slate-800 dark:text-slate-200">nextWordCount: number</span>
+                                        <span className="text-xs text-slate-500 font-medium leading-relaxed">해당 단어 이후에 이어질 수 있는 단어의 개수</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section className="bg-slate-900 rounded-3xl shadow-lg p-8">
+                        <div className="flex items-center mb-6">
+                            <FileJson className="w-6 h-6 text-indigo-400 mr-4" />
+                            <h2 className="text-2xl font-bold text-white font-mono">Example</h2>
+                        </div>
+                        <pre className="text-xs md:text-sm font-mono text-indigo-300 leading-relaxed overflow-x-auto">
+{`[
+  {
+    "word": "사과",
+    "nextWordCount": 15
+  },
+  {
+    "word": "해질녘",
+    "nextWordCount": 0
+  }
+]`}
+                        </pre>
+                    </section>
+                </div>
+
+                <div className="bg-slate-900 rounded-3xl shadow-2xl p-8 mb-8 text-slate-100">
+                    <div className="flex items-center mb-8">
+                        <Terminal className="w-6 h-6 text-emerald-400 mr-4" />
+                        <h2 className="text-2xl font-bold">API 사용 예제</h2>
+                    </div>
+
+                    <div className="space-y-6 font-mono text-sm">
+                        <div className="space-y-2">
+                            <p className="text-slate-400">A. 일반적인 끝말잇기 (시작 단어 찾기)</p>
+                            <div className="bg-slate-800 p-4 rounded-xl border border-slate-700 overflow-x-auto">
+                                <span className="text-emerald-400 font-bold">GET</span> /api/words/search?mode=kor-start&q=가&manner=man&limit=50&sortBy=length
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <p className="text-slate-400">B. 쿵쿵따 모드</p>
+                            <div className="bg-slate-800 p-4 rounded-xl border border-slate-700 overflow-x-auto">
+                                <span className="text-emerald-400 font-bold">GET</span> /api/words/search?mode=kung&q=나
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <p className="text-slate-400">C. 훈민정음 (초성 퀴즈)</p>
+                            <div className="bg-slate-800 p-4 rounded-xl border border-slate-700 overflow-x-auto">
+                                <span className="text-emerald-400 font-bold">GET</span> /api/words/search?mode=hunmin&q=ㄱㄴ
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="bg-rose-50 dark:bg-rose-950/20 rounded-3xl p-8 border border-rose-200/50 dark:border-rose-900/50">
+                    <div className="flex items-center mb-6">
+                        <AlertCircle className="w-6 h-6 text-rose-500 mr-4" />
+                        <h2 className="text-2xl font-bold text-rose-800 dark:text-rose-200">Response Status Code</h2>
+                    </div>
+                    <ul className="space-y-4">
+                        <li className="flex items-start">
+                            <span className="font-bold text-rose-600 mr-4 w-12">200:</span>
+                            <span className="text-slate-700 dark:text-slate-300 text-sm">OK</span>
+                        </li>
+                        <li className="flex items-start">
+                            <span className="font-bold text-rose-600 mr-4 w-12">400:</span>
+                            <div>
+                                <span className="text-slate-700 dark:text-slate-300 text-sm font-bold block mb-1">Bad Request</span>
+                                <p className="text-slate-500 dark:text-slate-400 text-xs">필수 파라미터 누락 또는 유효하지 않은 요청</p>
+                            </div>
+                        </li>
+                        <li className="flex items-start">
+                            <span className="font-bold text-rose-600 mr-4 w-12">500:</span>
+                            <span className="text-slate-700 dark:text-slate-300 text-sm">Internal Server Error</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/app/profile/ProfileHome.tsx b/app/profile/ProfileHome.tsx
index 8eb50aa..d120611 100644
--- a/app/profile/ProfileHome.tsx
+++ b/app/profile/ProfileHome.tsx
@@ -51,7 +51,7 @@ export default function ProfileHomePage() {
   const [searchInput, setSearchInput] = useState("");
   const [resultUsers, setResultUsers] = useState<user[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [errorModalView, seterrorModalView] = useState<ErrorMessage | null>(null);
+  const [errorModalView, setErrorModalView] = useState<ErrorMessage | null>(null);
 
   const handleSearch = async () => {
     setIsLoading(true);
@@ -60,7 +60,7 @@ export default function ProfileHomePage() {
     if (error){
         setIsLoading(false);
         setResultUsers([]);
-        seterrorModalView({
+        setErrorModalView({
             ErrName: error.name,
             ErrMessage: error.message,
             ErrStackRace: error.code,
@@ -210,7 +210,7 @@ export default function ProfileHomePage() {
         {errorModalView && (
           <ErrorModal
             error={errorModalView}
-            onClose={() => seterrorModalView(null)}
+            onClose={() => setErrorModalView(null)}
           />
         )}
       </div>
diff --git a/app/profile/[username]/ProfilePage.tsx b/app/profile/[username]/ProfilePage.tsx
index 4f74a25..1327735 100644
--- a/app/profile/[username]/ProfilePage.tsx
+++ b/app/profile/[username]/ProfilePage.tsx
@@ -213,7 +213,7 @@ const ProfilePage = ({ userName }: { userName: string }) => {
             setMonthlyContributions(filledContributions);
 
             setLoading(null);
-            loadTabsData(getUserData.id);
+            await loadTabsData(getUserData.id);
         };
         getData();
         
diff --git a/app/programs/[id]/ProgramDetailPage.tsx b/app/programs/[id]/ProgramDetailPage.tsx
index 6431e44..879fc72 100644
--- a/app/programs/[id]/ProgramDetailPage.tsx
+++ b/app/programs/[id]/ProgramDetailPage.tsx
@@ -32,7 +32,7 @@ const programInfoFetcher = async (id: string): Promise<{data: {data: Program}, e
   }
 }
 
-const ProgramRelaseFetcher = async (_: string, { arg }: { arg: { repo: string } }): Promise<{data: {latest: GitHubRelease, all: GitHubRelease[]}, error: null} | {data: null, error: FetchError}> => {
+const ProgramReleaseFetcher = async (_: string, { arg }: { arg: { repo: string } }): Promise<{data: {latest: GitHubRelease, all: GitHubRelease[]}, error: null} | {data: null, error: FetchError}> => {
   try {
     const repo = arg.repo;
     const encodedRepo = encodeURIComponent(repo);
@@ -69,7 +69,7 @@ export default function ProgramDetailPage() {
   const [error, setError] = useState<string | null>(null);
   const [showAllReleases, setShowAllReleases] = useState(false);
   const {data: infoData, isLoading} = useSWR(`/api/programs/info?id=${programId}`, () => programInfoFetcher(programId), { dedupingInterval: 300_000, revalidateIfStale: false });
-  const { trigger, data: mutateData, isMutating } = useSWRMutation(`/api/programs/releases?id=${programId}`, ProgramRelaseFetcher);
+  const { trigger, data: mutateData, isMutating } = useSWRMutation(`/api/programs/releases?id=${programId}`, ProgramReleaseFetcher);
 
   useEffect(()=>{
     const updateFunc = async () => {
@@ -79,7 +79,7 @@ export default function ProgramDetailPage() {
         } else if (infoData.data) {
           setProgram(infoData.data.data);
           setError(null);
-          trigger({repo: infoData.data.data.github_repo});
+          await trigger({repo: infoData.data.data.github_repo});
         }
       }
     }
diff --git a/app/providers.tsx b/app/providers.tsx
index 905a4e0..922b2c1 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -3,6 +3,7 @@
 import { Provider } from "react-redux";
 import { store } from "./store/store";
 import { ThemeProvider } from 'next-themes'
+import React from "react";
 
 export function Providers({ children }: { children: React.ReactNode }) {
     return (
diff --git a/app/release-note/page.tsx b/app/release-note/page.tsx
index fa59e0b..691d291 100644
--- a/app/release-note/page.tsx
+++ b/app/release-note/page.tsx
@@ -1,4 +1,5 @@
 import ReleaseNote from "./ReleaseNote";
+import React from "react";
 
 export async function generateMetadata() {
 	return {
diff --git a/app/types/database.types.ts b/app/types/database.types.ts
index 1944a14..d190ce2 100644
--- a/app/types/database.types.ts
+++ b/app/types/database.types.ts
@@ -622,6 +622,7 @@ export type Database = {
           k_canuse: boolean
           last_letter: string | null
           length: number | null
+          mission_mark: number
           noin_canuse: boolean
           word: string
         }
@@ -634,6 +635,7 @@ export type Database = {
           k_canuse?: boolean
           last_letter?: string | null
           length?: number | null
+          mission_mark?: number
           noin_canuse?: boolean
           word: string
         }
@@ -646,6 +648,7 @@ export type Database = {
           k_canuse?: boolean
           last_letter?: string | null
           length?: number | null
+          mission_mark?: number
           noin_canuse?: boolean
           word?: string
         }
@@ -800,6 +803,51 @@ export type Database = {
           word: string
         }[]
       }
+      get_mission_len3_words: {
+        Args: { target_mask: number }
+        Returns: {
+          added_at: string
+          added_by: string | null
+          chosungs: string | null
+          first_letter: string | null
+          id: number
+          k_canuse: boolean
+          last_letter: string | null
+          length: number | null
+          mission_mark: number
+          noin_canuse: boolean
+          word: string
+        }[]
+        SetofOptions: {
+          from: "*"
+          to: "words"
+          isOneToOne: false
+          isSetofReturn: true
+        }
+      }
+      get_mission_mark: { Args: { input_word: string }; Returns: number }
+      get_mission_words: {
+        Args: { target_mask: number }
+        Returns: {
+          added_at: string
+          added_by: string | null
+          chosungs: string | null
+          first_letter: string | null
+          id: number
+          k_canuse: boolean
+          last_letter: string | null
+          length: number | null
+          mission_mark: number
+          noin_canuse: boolean
+          word: string
+        }[]
+        SetofOptions: {
+          from: "*"
+          to: "words"
+          isOneToOne: false
+          isSetofReturn: true
+        }
+      }
       get_user_monthly_rank: { Args: { uid: string }; Returns: number }
       get_words_by_theme: {
         Args: { theme_name: string }
@@ -847,6 +895,7 @@ export type Database = {
         Returns: undefined
       }
       increment_doc_views: { Args: { doc_id: number }; Returns: undefined }
+      insert_mission_words: { Args: never; Returns: undefined }
       random_wait_word_ff: {
         Args: { prefixes: string[] }
         Returns: {
diff --git a/app/types/index.d.ts b/app/types/index.d.ts
index 2715785..66840b9 100644
--- a/app/types/index.d.ts
+++ b/app/types/index.d.ts
@@ -6,6 +6,7 @@ declare global{
         HTTPStatus? : string | number | null;
         HTTPData?: string | null;
         inputValue: string | null;
+        location?: string | null;
     }
     type FetchError = {
         name: string;
diff --git a/app/types/kkuko.types.ts b/app/types/kkuko.types.ts
new file mode 100644
index 0000000..5ac6dc7
--- /dev/null
+++ b/app/types/kkuko.types.ts
@@ -0,0 +1,98 @@
+export interface UserProfile {
+    id: string;
+    nickname: string;
+    exp: number;
+    observedAt: string;
+    exordial: string;
+    level: number;
+}
+
+export interface Equipment {
+    userId: string;
+    slot: string;
+    itemId: string;
+}
+
+export interface KkukoRecord {
+    id: string;
+    userId: string;
+    modeId: string;
+    total: number;
+    win: number;
+    exp: number;
+    playtime: number;
+}
+
+export interface Presence {
+    userId: string;
+    channelId: string | null;
+    roomId: string | null;
+    crawlerId: string;
+    updatedAt: string;
+}
+
+export interface ProfileData {
+    user: UserProfile;
+    equipment: Equipment[];
+    record: KkukoRecord[];
+    presence: Presence;
+}
+
+export interface ItemOption {
+    gEXP?: number;
+    hEXP?: number;
+    gMNY?: number;
+    hMNY?: number;
+    [key: string]: number | undefined;
+};
+
+export interface SpecialOptions{
+    date: number;
+    after: ItemOption;
+    before: ItemOption;
+}
+
+export interface ItemInfo {
+    id: string;
+    name: string;
+    description: string;
+    updatedAt: number;
+    group: string;
+    options: ItemOption | SpecialOptions;
+}
+
+export interface Mode {
+    modeId: string;
+    modeName: string;
+    group: string;
+}
+
+export interface RankingEntry {
+    rank: number;
+    userRecord: {
+        id: number;
+        userId: string;
+        modeId: string;
+        total: number;
+        win: number;
+        exp: number;
+        playtime: number;
+    };
+    userInfo: {
+        id: string;
+        nickname: string;
+        exp: number;
+        observedAt: string;
+        exordial: string;
+        level: number;
+    };
+}
+
+export type RankingOption = 'win' | 'exp';
+
+export function isSpecialOptions(obj: unknown): obj is SpecialOptions {
+    return !!obj && typeof obj === 'object' &&
+        'date' in obj && typeof obj.date === 'number' &&
+        'after' in obj && typeof obj.after === 'object' &&
+        'before' in obj && typeof obj.before === 'object';
+}
\ No newline at end of file
diff --git a/app/types/type.ts b/app/types/type.ts
index 02efe72..b692e25 100644
--- a/app/types/type.ts
+++ b/app/types/type.ts
@@ -7,6 +7,7 @@ export type ErrorMessage = {
     HTTPStatus? : string | number | null;
     HTTPData?: string | null;
     inputValue: string | null;
+    location?: string | null;
 }
 
 export type UserInfo = {
diff --git a/app/word-combiner/WordCombinerClient.tsx b/app/word-combiner/WordCombinerClient.tsx
index c98ea9f..c77117f 100644
--- a/app/word-combiner/WordCombinerClient.tsx
+++ b/app/word-combiner/WordCombinerClient.tsx
@@ -1,6 +1,6 @@
 "use client"
 import React, { useState } from 'react';
-import type { SixCharString, FiveCharString, ErrorMessage } from '../types/type';
+import type { SixCharString, FiveCharString, ErrorMessage } from '@/types/type';
 import CombinationManager from '../lib/CombinationsManger';
 import ErrorModal from '../components/ErrModal';
 import HelpModal from './WordCombinerHelpModal';
@@ -12,7 +12,7 @@ interface WordCombinerWithData {
 }
 
 export default function WordCombinerClient({ prop }: { prop: WordCombinerWithData }) {
-    const [nomalJOKAK, setNomalJOKAK] = useState<string>("");
+    const [normalJOKAK, setNormalJOKAK] = useState<string>("");
     const [highJOKAK, setHighJOKAK] = useState<string>("");
     const [rareJOKAK, setRareJOKAK] = useState<string>("");
     const [inputHtml, setInputHtml] = useState<string>("");
@@ -31,7 +31,7 @@ export default function WordCombinerClient({ prop }: { prop: WordCombinerWithDat
             const parser = new DOMParser();
             const doc = parser.parseFromString(htmlString, 'text/html');
 
-            let nomal = ""; // 일반
+            let normal = ""; // 일반
             let high = ""; // 고급
             let rare = ""; // 희귀
 
@@ -58,11 +58,11 @@ export default function WordCombinerClient({ prop }: { prop: WordCombinerWithDat
                     rare += chName.repeat(tCount);
                 } else if (charName.includes("글자 조각")) {
                     const chName = charName.replace("글자 조각 - ", "");
-                    nomal += chName.repeat(tCount);
+                    normal += chName.repeat(tCount);
                 }
             });
             setInputHtml("");
-            setNomalJOKAK(nomal);
+            setNormalJOKAK(normal);
             setHighJOKAK(high);
             setRareJOKAK(rare);
             setActiveTab('normal');
@@ -89,12 +89,12 @@ export default function WordCombinerClient({ prop }: { prop: WordCombinerWithDat
         try {
             setLoading(true);
             setTimeout(() => {
-                const manger6 = new CombinationManager(nomalJOKAK.replace(/\s+/g, '').split('').sort().join(''), len6WordsData);
+                const manger6 = new CombinationManager(normalJOKAK.replace(/\s+/g, '').split('').sort().join(''), len6WordsData);
                 setLen6Date(manger6.getBests());
-                const manger5 = new CombinationManager(manger6.remainstr(), len5WordsData);
+                const manger5 = new CombinationManager(manger6.remainStr(), len5WordsData);
                 setLen5Data(manger5.getBests());
                 setLoading(false);
-                setNomalJOKAK(manger5.remainstr());
+                setNormalJOKAK(manger5.remainStr());
             }, 1)
         } catch (err: unknown) {
             if (err instanceof Error) {
@@ -123,10 +123,10 @@ export default function WordCombinerClient({ prop }: { prop: WordCombinerWithDat
             setTimeout(() => {
                 const manger6 = new CombinationManager(highJOKAK.replace(/\s+/g, '').split('').sort().join(''), len6WordsData);
                 setLen6Date(manger6.getBests());
-                const manger5 = new CombinationManager(manger6.remainstr(), len5WordsData);
+                const manger5 = new CombinationManager(manger6.remainStr(), len5WordsData);
                 setLen5Data(manger5.getBests());
                 setLoading(false);
-                setHighJOKAK(manger5.remainstr());
+                setHighJOKAK(manger5.remainStr());
             }, 1)
         } catch (err: unknown) {
             if (err instanceof Error) {
@@ -155,10 +155,10 @@ export default function WordCombinerClient({ prop }: { prop: WordCombinerWithDat
             setTimeout(() => {
                 const manger6 = new CombinationManager(rareJOKAK.replace(/\s+/g, '').split('').sort().join(''), len6WordsData);
                 setLen6Date(manger6.getBests());
-                const manger5 = new CombinationManager(manger6.remainstr(), len5WordsData);
+                const manger5 = new CombinationManager(manger6.remainStr(), len5WordsData);
                 setLen5Data(manger5.getBests());
                 setLoading(false);
-                setRareJOKAK(manger5.remainstr());
+                setRareJOKAK(manger5.remainStr());
             }, 1)
         } catch (err: unknown) {
             if (err instanceof Error) {
@@ -193,7 +193,7 @@ export default function WordCombinerClient({ prop }: { prop: WordCombinerWithDat
 
     const getCurrentValue = () => {
         switch(activeTab) {
-            case 'normal': return nomalJOKAK;
+            case 'normal': return normalJOKAK;
             case 'high': return highJOKAK;
             case 'rare': return rareJOKAK;
             case 'html': return inputHtml;
@@ -203,11 +203,11 @@ export default function WordCombinerClient({ prop }: { prop: WordCombinerWithDat
 
     const getCurrentSetter = () => {
         switch(activeTab) {
-            case 'normal': return setNomalJOKAK;
+            case 'normal': return setNormalJOKAK;
             case 'high': return setHighJOKAK;
             case 'rare': return setRareJOKAK;
             case 'html': return setInputHtml;
-            default: return setNomalJOKAK;
+            default: return setNormalJOKAK;
         }
     };
 
@@ -309,7 +309,7 @@ export default function WordCombinerClient({ prop }: { prop: WordCombinerWithDat
                         <div className="grid grid-cols-3 gap-4">
                             <div className="flex flex-col items-center p-3 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
                                 <span className="text-xs text-gray-500 dark:text-gray-400">일반</span>
-                                <span className="text-lg font-semibold">{nomalJOKAK.length}</span>
+                                <span className="text-lg font-semibold">{normalJOKAK.length}</span>
                             </div>
                             <div className="flex flex-col items-center p-3 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
                                 <span className="text-xs text-gray-500 dark:text-gray-400">고급</span>
diff --git a/app/word-combiner/WordCombinerHelpModal.tsx b/app/word-combiner/WordCombinerHelpModal.tsx
index aa8ab86..ca14f8f 100644
--- a/app/word-combiner/WordCombinerHelpModal.tsx
+++ b/app/word-combiner/WordCombinerHelpModal.tsx
@@ -7,7 +7,7 @@ import { Play } from 'lucide-react';
 
 const HelpModalA = ({ wantGo }: { wantGo?: 1 | 2 | 3; }) => {
     // 각 섹션에 대한 ref
-    const nomalHelp = useRef<HTMLHeadingElement>(null);
+    const normalHelp = useRef<HTMLHeadingElement>(null);
     const HTMLHelp = useRef<HTMLHeadingElement>(null);
     const chromeHTML = useRef<HTMLHeadingElement>(null);
 
@@ -36,7 +36,7 @@ const HelpModalA = ({ wantGo }: { wantGo?: 1 | 2 | 3; }) => {
                     <li>
                         <button
                             className="text-blue-600 dark:text-blue-400 hover:underline text-left"
-                            onClick={() => scrollToSection(nomalHelp)}
+                            onClick={() => scrollToSection(normalHelp)}
                         >
                             1. 기본적인 사용법
                         </button>
@@ -64,7 +64,7 @@ const HelpModalA = ({ wantGo }: { wantGo?: 1 | 2 | 3; }) => {
 
             {/* 기본 사용법 */}
             <div className="space-y-4">
-                <h3 ref={nomalHelp} className="text-xl font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
+                <h3 ref={normalHelp} className="text-xl font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                     <span className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-sm px-2 py-1 rounded-full font-medium">1</span>
                     기본적인 사용법
                 </h3>
diff --git a/app/word-combiner/page.tsx b/app/word-combiner/page.tsx
index 8d79f4e..e70e20e 100644
--- a/app/word-combiner/page.tsx
+++ b/app/word-combiner/page.tsx
@@ -1,4 +1,5 @@
 import WordCombinerPage from "./WordCombinerPage";
+import React from "react";
 
 export async function generateMetadata() {
 	return {
diff --git a/app/word/lib.ts b/app/word/lib.ts
index fff60b2..0d174a3 100644
--- a/app/word/lib.ts
+++ b/app/word/lib.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { SCM } from "../lib/supabaseClient";
+import { SCM } from "@/lib/supabaseClient";
 
 export const fetcher = async () => {
     const { data, error } = await SCM.get().allThemes();
diff --git a/app/word/logs/LogsHome.tsx b/app/word/logs/LogsHome.tsx
index f116c4c..f7e0f8d 100644
--- a/app/word/logs/LogsHome.tsx
+++ b/app/word/logs/LogsHome.tsx
@@ -97,7 +97,7 @@ export default function LogPage() {
             const from = (currentPage - 1) * itemsPerPage;
             const to = from + itemsPerPage - 1;
 
-            const { data: LogsData, error: LogsDataError, count } = await SCM.get().logsByFillter({
+            const { data: LogsData, error: LogsDataError, count } = await SCM.get().logsByFilter({
                 filterState: currentFilterState,
                 filterType: currentFilterType,
                 from, to
diff --git a/app/word/page.tsx b/app/word/page.tsx
index 41ad728..289355f 100644
--- a/app/word/page.tsx
+++ b/app/word/page.tsx
@@ -1,15 +1,5 @@
 import Link from "next/link";
-import { 
-    Search, 
-    Download, 
-    Plus, 
-    Upload, 
-    FileText, 
-    Clock, 
-    ChevronRight,  
-    Database,
-    BarChart3
-} from "lucide-react";
+import {BarChart3, ChevronRight, Clock, Code, Database, Download, FileText, Plus, Search, Upload} from "lucide-react";
 
 export async function generateMetadata() {
     return {
@@ -83,6 +73,14 @@ const features = [
         color: "from-indigo-500 to-blue-500",
         bgColor: "group-hover:bg-indigo-50 dark:group-hover:bg-indigo-950/20"
     },
+    {
+        title: "오픈 API",
+        description: "끄코 유틸을 API에서 만나보세요",
+        link: "/openapi/",
+        icon: Code,
+        color: "from-indigo-500 to-yellow-500",
+        bgColor: "group-hover:bg-indigo-50 dark:group-hover:bg-indigo-950/20"
+    },
 ];
 
 export default function OpenDBHomePage() {
diff --git a/app/word/search/WordSearch.tsx b/app/word/search/WordSearch.tsx
index cbe6c60..c5748fa 100644
--- a/app/word/search/WordSearch.tsx
+++ b/app/word/search/WordSearch.tsx
@@ -12,6 +12,7 @@ import ThemeSelectionModal from './components/ThemeSelectionModal';
 export default function WordSearch() {
     const [showModeModal, setShowModeModal] = useState(false);
     const [showThemeModal, setShowThemeModal] = useState(false);
+    const [showOptions, setShowOptions] = useState(true);
 
     const {
         searchType, setSearchType,
@@ -45,53 +46,69 @@ export default function WordSearch() {
     return (
         <div className="flex flex-col h-screen bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-950 p-4">
             <div className="w-full max-w-4xl mx-auto flex flex-col flex-1 min-h-0">
+                <div className="flex justify-end md:hidden mb-2">
+                    <button
+                        onClick={() => setShowOptions((v) => !v)}
+                        className="px-3 py-1 text-sm bg-blue-600 text-white rounded-md"
+                    >
+                        {showOptions ? '검색 옵션 숨기기' : '검색 옵션 보기'}
+                    </button>
+                </div>
+
                 {/* 제목 및 검색 타입, 검색 옵션 */}
-                <div className="bg-white dark:bg-gray-900 rounded-xl shadow-lg p-4 mb-4">
-                    <SearchHeader 
-                        searchType={searchType}
-                        setSearchType={handleSearchTypeChange}
-                        mode={mode} 
-                        onOpenModeModal={() => setShowModeModal(true)} 
-                    />
-                    {searchType === 'simple' ? (
-                        <SimpleSearchOptions
-                            simpleQuery={simpleQuery}
-                            setSimpleQuery={setSimpleQuery}
-                            loading={loading}
-                            handleSearch={handleSimpleSearch}
-                        />
-                    ) : (
-                        <SearchOptions
+                {showOptions && (
+                    <div className="bg-white dark:bg-gray-900 rounded-xl shadow-lg p-4 mb-4">
+                        <SearchHeader
+                            searchType={searchType}
+                            setSearchType={handleSearchTypeChange}
                             mode={mode}
-                            startLetter={startLetter} setStartLetter={setStartLetter}
-                            endLetter={endLetter} setEndLetter={setEndLetter}
-                            mission={mission} setMission={setMission}
-                            minLength={minLength} setMinLength={setMinLength}
-                            maxLength={maxLength} setMaxLength={setMaxLength}
-                            sortBy={sortBy} setSortBy={setSortBy}
-                            duem={duem} setDuem={setDuem}
-                            miniInfo={miniInfo} setMiniInfo={setMiniInfo}
-                            manner={manner} setManner={setManner}
-                            ingjung={ingjung} setIngjung={setIngjung}
-                            simpleQuery={simpleQuery} setSimpleQuery={setSimpleQuery}
-                            displayLimit={displayLimit} setDisplayLimit={setDisplayLimit}
-                            loading={loading}
-                            handleSearch={handleSearch}
-                            onOpenThemeModal={() => setShowThemeModal(true)}
-                            selectedTheme={selectedTheme}
+                            onOpenModeModal={() => setShowModeModal(true)}
                         />
-                    )}
-                </div>
+
+                        <div className="mt-3">
+                            {searchType === 'simple' ? (
+                                <SimpleSearchOptions
+                                    simpleQuery={simpleQuery}
+                                    setSimpleQuery={setSimpleQuery}
+                                    loading={loading}
+                                    handleSearch={handleSimpleSearch}
+                                />
+                            ) : (
+                                <SearchOptions
+                                    mode={mode}
+                                    startLetter={startLetter} setStartLetter={setStartLetter}
+                                    endLetter={endLetter} setEndLetter={setEndLetter}
+                                    mission={mission} setMission={setMission}
+                                    minLength={minLength} setMinLength={setMinLength}
+                                    maxLength={maxLength} setMaxLength={setMaxLength}
+                                    sortBy={sortBy} setSortBy={setSortBy}
+                                    duem={duem} setDuem={setDuem}
+                                    miniInfo={miniInfo} setMiniInfo={setMiniInfo}
+                                    manner={manner} setManner={setManner}
+                                    ingjung={ingjung} setIngjung={setIngjung}
+                                    simpleQuery={simpleQuery} setSimpleQuery={setSimpleQuery}
+                                    displayLimit={displayLimit} setDisplayLimit={setDisplayLimit}
+                                    loading={loading}
+                                    handleSearch={handleSearch}
+                                    onOpenThemeModal={() => setShowThemeModal(true)}
+                                    selectedTheme={selectedTheme}
+                                />
+                            )}
+                        </div>
+                    </div>
+                )}
 
                 {/* 검색 결과 */}
-                <SearchResults
-                    results={results}
-                    searchPerformed={searchPerformed}
-                    loading={loading}
-                    mission={mission}
-                    miniInfo={miniInfo}
-                    mode={mode}
-                />
+                <div className="flex-1 overflow-auto min-h-0">
+                    <SearchResults
+                        results={results}
+                        searchPerformed={searchPerformed}
+                        loading={loading}
+                        mission={mission}
+                        miniInfo={miniInfo}
+                        mode={mode}
+                    />
+                </div>
             </div>
 
             {/* 모드 선택 모달 */}
diff --git a/app/word/search/[query]/WordInfo.tsx b/app/word/search/[query]/WordInfo.tsx
index c373aaf..93643bf 100644
--- a/app/word/search/[query]/WordInfo.tsx
+++ b/app/word/search/[query]/WordInfo.tsx
@@ -18,7 +18,7 @@ import { SCM } from "@/app/lib/supabaseClient"
 import ConfirmModal from "@/app/components/ConfirmModal";
 import { josa } from "es-hangul";
 import { useRouter } from 'next/navigation'
-import  DuemRaw,{ reverDuemLaw } from '@/app/lib/DuemLaw';
+import  DuemRaw,{ reverDuemLaw } from '@/app/lib/hangulUtils';
 import WordSearchBar from "./SearchBar";
 import { PostgrestError } from "@supabase/supabase-js";
 import { DocsLogData } from "@/app/types/type";
diff --git a/app/word/search/[query]/WordInfoPage.tsx b/app/word/search/[query]/WordInfoPage.tsx
index 9d8401e..b101eca 100644
--- a/app/word/search/[query]/WordInfoPage.tsx
+++ b/app/word/search/[query]/WordInfoPage.tsx
@@ -9,6 +9,7 @@ import LoadingPage, {useLoadingState } from '@/app/components/LoadingPage';
 import axios from 'axios';
 import { useRouter } from 'next/navigation';
 import { WordInfoProps } from './WordInfo';
+import NotFound from '@/app/not-found-client';
 
 export default function WordInfoPage({ query }: { query: string }) {
     const [errorView, setErrorView] = useState<string | null>(null);
@@ -23,10 +24,6 @@ export default function WordInfoPage({ query }: { query: string }) {
         setErrorView(`단어 정보 데이터 로드중 오류.\nErrorName: ${erorr.name ?? "알수없음"}\nError Message: ${erorr.message ?? "없음"}\nError code: ${erorr.code}`);
     };
 
-    const goTo404 = () => {
-        router.push("/404");
-    };
-
     const wordSetFunc = (wordInfo: {
         id: number,
         word: string,
@@ -263,7 +260,7 @@ export default function WordInfoPage({ query }: { query: string }) {
         
     }, [query]);
 
-    if (isNotFound) { goTo404(); return null; }
+    if (isNotFound) { return <NotFound />; }
 
     if (loadingState.isLoading) { return <LoadingPage title={'단어 정보'} /> }
 
diff --git a/app/word/search/components/SearchHeader.tsx b/app/word/search/components/SearchHeader.tsx
index b855f38..9bd7e95 100644
--- a/app/word/search/components/SearchHeader.tsx
+++ b/app/word/search/components/SearchHeader.tsx
@@ -1,7 +1,7 @@
 import { Settings } from 'lucide-react';
 import WordSearchHelpModal from './WordSearchHelpModal';
 import { GameMode } from '../types';
-import { getModeLabel } from '../utils';
+import { getModeShortLabel } from '../utils';
 
 interface SearchHeaderProps {
     searchType: 'simple' | 'advanced';
@@ -26,7 +26,7 @@ export default function SearchHeader({ searchType, setSearchType, mode, onOpenMo
                                 : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
                         }`}
                     >
-                        일반 검색
+                        일반
                     </button>
                     <button
                         onClick={() => setSearchType('advanced')}
@@ -36,7 +36,7 @@ export default function SearchHeader({ searchType, setSearchType, mode, onOpenMo
                                 : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
                         }`}
                     >
-                        고급 검색
+                        고급
                     </button>
                 </div>
                 <WordSearchHelpModal />
@@ -47,7 +47,7 @@ export default function SearchHeader({ searchType, setSearchType, mode, onOpenMo
                     className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                 >
                     <Settings className="h-5 w-5" />
-                    {getModeLabel(mode)}
+                    {getModeShortLabel(mode)}
                 </button>
             )}
         </div>
diff --git a/app/word/search/components/SearchOptions.tsx b/app/word/search/components/SearchOptions.tsx
index 3d4a6a0..7210dcf 100644
--- a/app/word/search/components/SearchOptions.tsx
+++ b/app/word/search/components/SearchOptions.tsx
@@ -67,14 +67,14 @@ export default function SearchOptions({
     if (mode === 'kor-start' || mode === 'kor-end' || mode === 'kung') {
         return (
             <div className="space-y-4">
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="grid grid-cols-3 gap-2">
                     <input
                         type="text"
                         value={startLetter}
                         onChange={(e) => setStartLetter(e.target.value)}
                         onKeyDown={handleKeyPress}
                         placeholder="시작 글자"
-                        className="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className="px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
                     />
                     <input
                         type="text"
@@ -82,7 +82,7 @@ export default function SearchOptions({
                         onChange={(e) => setEndLetter(e.target.value)}
                         onKeyDown={handleKeyPress}
                         placeholder="끝 글자"
-                        className="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className="px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
                     />
                     <input
                         type="text"
@@ -90,7 +90,7 @@ export default function SearchOptions({
                         onChange={(e) => setMission(e.target.value)}
                         onKeyDown={handleKeyPress}
                         placeholder="미션 글자"
-                        className="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className="px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
                     />
                 </div>
 
diff --git a/app/word/search/components/SimpleSearchOptions.tsx b/app/word/search/components/SimpleSearchOptions.tsx
index d71a94e..d7463e9 100644
--- a/app/word/search/components/SimpleSearchOptions.tsx
+++ b/app/word/search/components/SimpleSearchOptions.tsx
@@ -1,4 +1,5 @@
 import { Search, Loader2 } from 'lucide-react';
+import React from "react";
 
 interface SimpleSearchOptionsProps {
     simpleQuery: string;
diff --git a/app/word/search/components/ThemeSelectionModal.tsx b/app/word/search/components/ThemeSelectionModal.tsx
index bf116fd..3f761c8 100644
--- a/app/word/search/components/ThemeSelectionModal.tsx
+++ b/app/word/search/components/ThemeSelectionModal.tsx
@@ -3,6 +3,7 @@ import useSWR from 'swr';
 import { X, Loader2 } from 'lucide-react';
 import { SCM } from '@/app/lib/supabaseClient';
 import { Theme } from '../types';
+import { disassemble } from 'es-hangul';
 
 interface ThemeSelectionModalProps {
     isOpen: boolean;
@@ -33,11 +34,14 @@ export default function ThemeSelectionModal({
     const filteredAndGroupedThemes = () => {
         if (!themes) return { groupA: [], groupB: [] };
 
+        const cho = themeSearchQuery.split('').map(c => disassemble(c)[0]).join('');
+
         const filtered = themeSearchQuery.trim() === ''
             ? themes
             : themes.filter(theme => 
                 theme.name.toLowerCase().includes(themeSearchQuery.toLowerCase()) ||
-                theme.code.toLowerCase().includes(themeSearchQuery.toLowerCase())
+                theme.code.toLowerCase().includes(themeSearchQuery.toLowerCase()) ||
+                theme.name.split('').map(c => disassemble(c)[0]).join('').includes(cho)
             );
 
         const groupA = filtered.filter(theme => /^\d+$/.test(theme.code));
diff --git a/app/word/search/hooks/useWordSearch.ts b/app/word/search/hooks/useWordSearch.ts
index ca7b3d1..bc8aca0 100644
--- a/app/word/search/hooks/useWordSearch.ts
+++ b/app/word/search/hooks/useWordSearch.ts
@@ -32,7 +32,7 @@ export const useWordSearch = () => {
     useEffect(() => {
         const modeParam = searchParams.get('mode');
         const qParam = searchParams.get('q');
-        
+
         if (modeParam || qParam) {
             // mode 파라미터 처리
             let targetMode: GameMode = 'kor-start';
@@ -43,26 +43,26 @@ export const useWordSearch = () => {
             } else if (modeParam === 'k') {
                 targetMode = 'kung';
             }
-            
+
             setMode(targetMode);
             setSearchType('advanced');
-            
+
             // q 파라미터 처리
             if (qParam) {
                 setManner(''); // manner을 빈 문자열로 설정
-                
+
                 if (targetMode === 'kor-start' || targetMode === 'kung') {
                     setStartLetter(qParam);
                 } else if (targetMode === 'kor-end') {
                     setEndLetter(qParam);
                 }
-                
+
                 // 쿵쿵따 모드인 경우 길이 설정
                 if (targetMode === 'kung') {
                     setMinLength(3);
                     setMaxLength(3);
                 }
-                
+
                 // 자동 검색 트리거
                 setAutoSearchTriggered(true);
             }
@@ -84,10 +84,10 @@ export const useWordSearch = () => {
         setLoading(true);
         setSearchPerformed(true);
         setResults([]);
-        
+
         try {
             let query: advancedQueryType;
-            
+
             if (mode === 'kor-start' || mode === 'kor-end') {
                 if (mode === 'kor-start' && startLetter.trim() === '') return;
                 if (mode === 'kor-end' && endLetter.trim() === '') return;
@@ -160,10 +160,10 @@ export const useWordSearch = () => {
         setLoading(true);
         setSearchPerformed(true);
         setResults([]);
-        
+
         try {
             if (simpleQuery.trim() === '') return;
-            
+
             const { data, error } = await SCM.get().wordsByQuery(simpleQuery.trim());
             if (error) {
                 console.error('검색 오류:', error);
@@ -199,4 +199,4 @@ export const useWordSearch = () => {
         handleSearch,
         handleSimpleSearch
     };
-};
+};
\ No newline at end of file
diff --git a/app/word/search/utils.ts b/app/word/search/utils.ts
index 3508e5a..8f461d3 100644
--- a/app/word/search/utils.ts
+++ b/app/word/search/utils.ts
@@ -10,6 +10,16 @@ export const getModeLabel = (m: GameMode) => {
     }
 };
 
+export const getModeShortLabel = (m: GameMode) => {
+    switch (m) {
+        case 'kor-start': return '한끝';
+        case 'kor-end': return '한앞';
+        case 'kung': return '쿵따';
+        case 'hunmin': return '훈민';
+        case 'jaqi': return '자퀴';
+    }
+};
+
 export const countMissionChars = (word: string, missionChars: string) => {
     if (!missionChars) return 0;
     return word.split('').filter(char => missionChars.includes(char)).length;
diff --git a/app/words-docs/WordsDocsHome.tsx b/app/words-docs/WordsDocsHome.tsx
index 14b466c..f7903ff 100644
--- a/app/words-docs/WordsDocsHome.tsx
+++ b/app/words-docs/WordsDocsHome.tsx
@@ -9,7 +9,7 @@ import { convertQwertyToHangul } from "es-hangul";
 import { useSelector } from "react-redux";
 import type { RootState } from "../store/store";
 import LoginRequiredModal from "../components/LoginRequiredModal";
-import { SCM } from "../lib/supabaseClient";
+import { SCM } from "@/lib/supabaseClient";
 import CompleteModal from "../components/CompleteModal";
 
 interface Document {
@@ -123,7 +123,7 @@ const WordsDocsHome = ({ docs }: WordsDocsHomeProps) => {
         
         const query = searchQuery.toLowerCase().trim();
         return docs.filter(doc => 
-            doc.name.toLowerCase().includes(query) || doc.name.toLocaleLowerCase().includes(convertQwertyToHangul(query))
+            doc.name.toLowerCase().includes(query) || doc.name.toLocaleLowerCase().includes(convertQwertyToHangul(query.replace(/[^a-zA-Z가-힣0-9]/g, "")))
         );
     }, [docs, searchQuery]);
 
diff --git a/app/words-docs/WordsDocsHomePage.tsx b/app/words-docs/WordsDocsHomePage.tsx
index ad3ebf3..31035c5 100644
--- a/app/words-docs/WordsDocsHomePage.tsx
+++ b/app/words-docs/WordsDocsHomePage.tsx
@@ -18,7 +18,7 @@ type DocsType = {
 export default function WordsDocsHomePage(){
     const { loadingState, updateLoadingState } = useLoadingState();
     const [errorMessage,setErrorMessage] = useState<string|null>(null);
-    const [docsDatas, setDocsDatas] = useState<DocsType[] | null>(null);
+    const [docsData, setDocsData] = useState<DocsType[] | null>(null); // Data 자체가 복수형
 
     useEffect(()=>{
         const getData = async () => {
@@ -36,7 +36,7 @@ export default function WordsDocsHomePage(){
                 id: `${id}`, name, maker: users?.nickname ?? "알수없음", last_update, is_manager: false, typez, created_at
             }));
             
-            setDocsDatas(docs);
+            setDocsData(docs);
             updateLoadingState(100, "완료");
         }
         getData();
@@ -46,7 +46,7 @@ export default function WordsDocsHomePage(){
 
     if (errorMessage) return <ErrorPage message={errorMessage}/>
 
-    if (docsDatas) return <WordsDocsHome docs={docsDatas} />
+    if (docsData) return <WordsDocsHome docs={docsData} />
 
     return null
 }
\ No newline at end of file
diff --git a/app/words-docs/[id]/DocsDataHome.tsx b/app/words-docs/[id]/DocsDataHome.tsx
index 99f6ea9..72cfbf4 100644
--- a/app/words-docs/[id]/DocsDataHome.tsx
+++ b/app/words-docs/[id]/DocsDataHome.tsx
@@ -6,14 +6,14 @@ import Link from "next/link";
 import type { WordData } from "@/app/types/type";
 import { DefaultDict } from "@/app/lib/collections";
 import "react-loading-skeleton/dist/skeleton.css";
-import { 
-    Star, 
-    FileText, 
-    Target, 
-    AlignLeft, 
-    Download, 
-    Info, 
-    Clock, 
+import {
+    Star,
+    FileText,
+    Target,
+    AlignLeft,
+    Download,
+    Info,
+    Clock,
     BookOpen,
     Loader2,
     Calendar,
@@ -35,6 +35,7 @@ interface DocsPageProp {
         typez: "letter" | "theme" | "ect"
     };
     starCount: string[];
+    isSpecial?: boolean;
 }
 
 interface VirtualTocItem {
@@ -46,17 +47,19 @@ type TabType = "all" | "mission" | "long";
 
 const MISSION_CHARS = "가나다라마바사아자차카타파하";
 
-const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
+const DocsDataHome = ({ id, data, metaData, starCount, isSpecial }: DocsPageProp) => {
     const parentRef = useRef<HTMLDivElement>(null);
     const [tocList, setTocList] = useState<string[]>([]);
     const [wordsData] = useState<WordData[]>(data);
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [isTabSwitching, setIsTabSwitching] = useState<boolean>(false);
     const [activeTab, setActiveTab] = useState<TabType>("all");
-    const user = useSelector((state: RootState) => state.user);
+        const user = useSelector((state: RootState) => state.user);
+        const specialIds = [208, 223, 238];
     const [isUserStarreda, setIsUserStarreda] = useState<boolean>(false);
     const [loginNeedModalOpen, setLoginNeedModalOpen] = useState<boolean>(false);
-    const [errorModalView, seterrorModalView] = useState<ErrorMessage | null>(null);
+    const [errorModalView, setErrorModalView] = useState<ErrorMessage | null>(null);
+    const [charLastUpdates, setCharLastUpdates] = useState<Record<number, string | null>>({});
 
     // 유저 즐겨찾기 상태 업데이트
     useEffect(() => {
@@ -66,23 +69,23 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
     }, [user, starCount])
 
     // 미션 단어 미리 구하기
-    const mission = useMemo(()=>{
-        const m2gr= new DefaultDict<string, WordData[]>(() => []);
+    const mission = useMemo(() => {
+        const m2gr = new DefaultDict<string, WordData[]>(() => []);
         const m1gr = new DefaultDict<string, WordData[]>(() => []);
 
         MISSION_CHARS.split('').forEach(char => {
-            data.forEach(item=>{
+            data.forEach(item => {
                 const count = (item.word.match(new RegExp(char, 'g')) || []).length;
-                if (count > 1){
+                if (count > 1) {
                     m2gr.get(char).push(item);
                 }
-                else if (count == 1){
+                else if (count == 1) {
                     m1gr.get(char).push(item);
                 }
             })
         });
-        return {m2gr,m1gr}
-    },[data])
+        return { m2gr, m1gr }
+    }, [data])
 
     // 탭별 데이터 필터링
     const getFilteredData = (tabType: TabType): WordData[] => {
@@ -92,8 +95,8 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
             case "long":
                 return wordsData.filter(item => item.word.length >= 9);
             case "mission":
-                const {m1gr, m2gr} = mission;
-                const m: WordData[]=[];
+                const { m1gr, m2gr } = mission;
+                const m: WordData[] = [];
                 MISSION_CHARS.split('').forEach(char => {
                     const missionWords: WordData[] = m2gr.get(char).length > 8 ? m2gr.get(char) : [...m2gr.get(char), ...m1gr.get(char)];
                     m.push(...missionWords);
@@ -108,10 +111,10 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
 
     const groupWordsBySyllable = (data: WordData[]) => {
         const grouped = new DefaultDict<string, WordData[]>(() => []);
-        
+
         if (activeTab === "mission") {
             MISSION_CHARS.split('').forEach(char => {
-                const {m1gr, m2gr} = mission;
+                const { m1gr, m2gr } = mission;
                 const missionWords: WordData[] = m2gr.get(char).length > 8 ? m2gr.get(char) : [...m2gr.get(char), ...m1gr.get(char)];
                 if (missionWords.length > 0) {
                     grouped.get(`${char}`).push(...missionWords);
@@ -129,9 +132,9 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
                     grouped.get(firstSyllable).push(item);
                 });
             }
-            
+
         }
-        
+
         return grouped;
     };
 
@@ -139,9 +142,36 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
         return groupWordsBySyllable(filteredData);
     }, [filteredData, activeTab]);
 
+
+    useEffect(() => {
+        if (![208,223,238].includes(id)) return;
+
+        let mounted = true;
+        const fetchUpdates = async () => {
+            const chars = MISSION_CHARS.split('');
+            const results = await Promise.all(chars.map(async (_c, index) => {
+                const docId = id + index + 1;
+                try {
+                    const res = await SCM.get().docsLastUpdate(docId);
+                    return { docId, last: res.data?.last_update ?? null };
+                } catch {
+                    return { docId, last: null };
+                }
+            }));
+
+            if (!mounted) return;
+            const map: Record<number, string | null> = {};
+            results.forEach(r => { map[r.docId] = r.last; });
+            setCharLastUpdates(map);
+        };
+
+        fetchUpdates();
+        return () => { mounted = false; };
+    }, [id]);
+
     const updateToc = (data: WordData[]): string[] => {
         if (activeTab === "mission") {
-            const {m1gr, m2gr} = mission;
+            const { m1gr, m2gr } = mission;
             return MISSION_CHARS.split('').filter(char => {
                 return m2gr.get(char).length + m1gr.get(char).length > 0;
             }).map(char => `${char}`);
@@ -186,11 +216,11 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
                 setIsTabSwitching(true);
                 await new Promise(resolve => setTimeout(resolve, 50));
             }
-            
+
             setTocList(updateToc(filteredData));
             setIsLoading(false);
             setIsTabSwitching(false);
-            
+
             if (virtualizer) {
                 virtualizer.scrollToOffset(0);
             }
@@ -227,7 +257,7 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
         URL.revokeObjectURL(url);
     };
 
-    const hadnleDocsStar = async () => {
+    const handleDocsStar = async () => {
         if (!user.uuid) {
             return setLoginNeedModalOpen(true);
         }
@@ -243,7 +273,7 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
     }
 
     const makeError = (error: PostgrestError) => {
-        seterrorModalView({
+        setErrorModalView({
             ErrName: error.name,
             ErrMessage: error.message,
             ErrStackRace: error.stack,
@@ -279,7 +309,7 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
 
     const handleTabChange = async (newTab: TabType) => {
         if (newTab === activeTab) return;
-        
+
         setIsTabSwitching(true);
         setActiveTab(newTab);
     };
@@ -288,11 +318,11 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
         return getFilteredData(tab).length;
     };
 
-    const currentStarCount = (user.uuid && starCount.includes(user.uuid) && !isUserStarreda) 
-        ? starCount.length - 1 
-        : (user.uuid && !starCount.includes(user.uuid) && isUserStarreda) 
-        ? starCount.length + 1 
-        : starCount.length;
+    const currentStarCount = (user.uuid && starCount.includes(user.uuid) && !isUserStarreda)
+        ? starCount.length - 1
+        : (user.uuid && !starCount.includes(user.uuid) && isUserStarreda)
+            ? starCount.length + 1
+            : starCount.length;
 
     return (
         <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-gray-900 dark:to-gray-800">
@@ -312,51 +342,54 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
                                     </div>
                                 </div>
                             </div>
-                            
+
                             {/* 액션 버튼들 */}
                             <div className="flex flex-wrap gap-3">
                                 <button
-                                    className={`px-6 py-3 rounded-xl font-medium transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 ${
-                                        isUserStarreda 
-                                            ? "bg-yellow-400 text-yellow-900 hover:bg-yellow-300" 
+                                    className={`px-6 py-3 rounded-xl font-medium transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 ${isUserStarreda
+                                            ? "bg-yellow-400 text-yellow-900 hover:bg-yellow-300"
                                             : "bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm"
-                                    }`}
-                                    onClick={hadnleDocsStar}
+                                        }`}
+                                    onClick={handleDocsStar}
                                 >
-                                    <Star 
-                                        className="w-5 h-5" 
+                                    <Star
+                                        className="w-5 h-5"
                                         fill={isUserStarreda ? "currentColor" : "none"}
                                     />
                                     <span>{currentStarCount}</span>
                                 </button>
 
-                                <Link href={`/words-docs/${id}/info`}>
-                                    <button className="px-6 py-3 bg-white/20 text-white rounded-xl font-medium hover:bg-white/30 transition-all duration-200 flex items-center gap-2 backdrop-blur-sm shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
-                                        <Info className="w-5 h-5" />
-                                        <span className="hidden sm:inline">문서 정보</span>
-                                    </button>
-                                </Link>
-
-                                <Link href={`/words-docs/${id}/logs`}>
-                                    <button className="px-6 py-3 bg-white/20 text-white rounded-xl font-medium hover:bg-white/30 transition-all duration-200 flex items-center gap-2 backdrop-blur-sm shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
-                                        <Clock className="w-5 h-5" />
-                                        <span className="hidden sm:inline">로그</span>
-                                    </button>
-                                </Link>
-
-                                <button
-                                    className="px-6 py-3 bg-green-500 text-white rounded-xl font-medium hover:bg-green-600 transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
-                                    onClick={handleDownload}
-                                >
-                                    <Download className="w-5 h-5" />
-                                    <span className="hidden sm:inline">다운로드</span>
-                                </button>
+                                {!specialIds.includes(id) && (
+                                    <>
+                                        <Link href={`/words-docs/${id}/info`}>
+                                            <button className="px-6 py-3 bg-white/20 text-white rounded-xl font-medium hover:bg-white/30 transition-all duration-200 flex items-center gap-2 backdrop-blur-sm shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
+                                                <Info className="w-5 h-5" />
+                                                <span className="hidden sm:inline">문서 정보</span>
+                                            </button>
+                                        </Link>
+
+                                        <Link href={`/words-docs/${id}/logs`}>
+                                            <button className="px-6 py-3 bg-white/20 text-white rounded-xl font-medium hover:bg-white/30 transition-all duration-200 flex items-center gap-2 backdrop-blur-sm shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
+                                                <Clock className="w-5 h-5" />
+                                                <span className="hidden sm:inline">로그</span>
+                                            </button>
+                                        </Link>
+
+                                        <button
+                                            className="px-6 py-3 bg-green-500 text-white rounded-xl font-medium hover:bg-green-600 transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+                                            onClick={handleDownload}
+                                        >
+                                            <Download className="w-5 h-5" />
+                                            <span className="hidden sm:inline">다운로드</span>
+                                        </button>
+                                    </>
+                                )}
                             </div>
                         </div>
                     </div>
 
                     {/* 탭 네비게이션 */}
-                    {metaData.typez !== "ect" && (
+                    {metaData.typez !== "ect" && !specialIds.includes(id) && (
                         <div className="px-8 pt-6 pb-2 overflow-x-auto">
                             <nav className="flex space-x-1" aria-label="Tabs">
                                 {(["all", "mission", "long"] as TabType[]).map((tab) => (
@@ -364,21 +397,18 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
                                         key={tab}
                                         onClick={() => handleTabChange(tab)}
                                         disabled={isTabSwitching}
-                                        className={`relative px-6 py-3 rounded-xl font-medium text-sm transition-all duration-200 flex items-center gap-3 ${
-                                            activeTab === tab
+                                        className={`relative px-6 py-3 rounded-xl font-medium text-sm transition-all duration-200 flex items-center gap-3 ${activeTab === tab
                                                 ? "bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg"
                                                 : "text-gray-600 dark:text-gray-200 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
-                                        } ${
-                                            isTabSwitching ? "opacity-50 cursor-not-allowed" : "hover:shadow-md transform hover:-translate-y-0.5"
-                                        }`}
+                                            } ${isTabSwitching ? "opacity-50 cursor-not-allowed" : "hover:shadow-md transform hover:-translate-y-0.5"
+                                            }`}
                                     >
                                         {getTabIcon(tab)}
                                         <span>{getTabLabel(tab)}</span>
-                                        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
-                                            activeTab === tab 
-                                                ? "bg-white/20 text-white" 
+                                        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${activeTab === tab
+                                                ? "bg-white/20 text-white"
                                                 : "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-200"
-                                        }`}>
+                                            }`}>
                                             {getTabCount(tab).toLocaleString()}
                                         </span>
                                         {activeTab === tab && (
@@ -392,7 +422,7 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
                 </div>
 
                 {/* 목차 섹션 */}
-                {!isTabSwitching && (
+                {!isTabSwitching && !specialIds.includes(id) && (
                     <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-lg border-0 p-6 mb-8">
                         <div className="flex items-center gap-3 mb-4">
                             <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
@@ -400,100 +430,127 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
                             </div>
                             <h2 className="text-xl font-bold text-gray-800 dark:text-gray-100">목차</h2>
                         </div>
-                        <ToC 
-                            items={tocItems} 
-                            onItemClick={handleTocClick} 
+                        <ToC
+                            items={tocItems}
+                            onItemClick={handleTocClick}
                             isSp={activeTab === "mission"}
                         />
                     </div>
                 )}
 
                 {/* 컨텐츠 섹션 */}
-                <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-lg border-0 overflow-hidden">
-                    {isLoading || isTabSwitching ? (
-                        <div className="p-8">
-                            {isTabSwitching ? (
-                                <div className="flex flex-col items-center justify-center py-20">
-                                    <Loader2 className="w-12 h-12 text-blue-500 animate-spin mb-4" />
-                                    <p className="text-gray-600 dark:text-gray-300 text-lg font-medium">탭 전환 중...</p>
-                                    <p className="text-gray-400 dark:text-gray-400 text-sm mt-1">잠시만 기다려주세요</p>
-                                </div>
-                            ) : (
-                                <div className="space-y-8">
-                                    {Array.from({ length: 5 }).map((_, idx) => (
-                                        <div key={idx} className="animate-pulse">
-                                            <div className="h-8 bg-gray-200 dark:bg-gray-800 rounded-lg w-20 mb-4"></div>
-                                            <div className="space-y-3">
-                                                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded w-full"></div>
-                                                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded w-3/4"></div>
-                                                <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded w-1/2"></div>
+                {specialIds.includes(id) ? (
+                    <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-lg border-0 p-8">
+                        <h2 className="text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">미션글자</h2>
+                        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-4">
+                            {["가", "나", "다", "라", "마", "바", "사", "아", "자", "차", "카", "타", "파", "하"].map((char, index) => (
+                                <Link
+                                    key={char}
+                                    href={`/words-docs/${id + index + 1}`}
+                                    className="flex items-center justify-center p-6 bg-gray-50 dark:bg-gray-800 rounded-xl hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 group"
+                                >
+                                    <span className="text-2xl font-bold text-gray-700 dark:text-gray-200 group-hover:text-blue-600 dark:group-hover:text-blue-400">
+                                        {char}
+                                    </span>
+                                    <div className="mt-2 text-center">
+                                        {charLastUpdates[id + index + 1] ? (
+                                            <span className="text-xs text-gray-500 dark:text-gray-400">{new Date(charLastUpdates[id + index + 1] as string).toLocaleString(undefined, { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone })}</span>
+                                        ) : (
+                                            <span className="text-xs text-gray-400">업데이트 정보 없음</span>
+                                        )}
+                                    </div>
+                                </Link>
+                            ))}
+                        </div>
+                    </div>
+                ) : (
+                    <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-lg border-0 overflow-hidden">
+                        {isLoading || isTabSwitching ? (
+                            <div className="p-8">
+                                {isTabSwitching ? (
+                                    <div className="flex flex-col items-center justify-center py-20">
+                                        <Loader2 className="w-12 h-12 text-blue-500 animate-spin mb-4" />
+                                        <p className="text-gray-600 dark:text-gray-300 text-lg font-medium">탭 전환 중...</p>
+                                        <p className="text-gray-400 dark:text-gray-400 text-sm mt-1">잠시만 기다려주세요</p>
+                                    </div>
+                                ) : (
+                                    <div className="space-y-8">
+                                        {Array.from({ length: 5 }).map((_, idx) => (
+                                            <div key={idx} className="animate-pulse">
+                                                <div className="h-8 bg-gray-200 dark:bg-gray-800 rounded-lg w-20 mb-4"></div>
+                                                <div className="space-y-3">
+                                                    <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded w-full"></div>
+                                                    <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded w-3/4"></div>
+                                                    <div className="h-4 bg-gray-200 dark:bg-gray-800 rounded w-1/2"></div>
+                                                </div>
                                             </div>
-                                        </div>
-                                    ))}
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        ) : filteredData.length === 0 ? (
+                            <div className="p-12 text-center">
+                                <div className="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-6">
+                                    <FileText className="w-10 h-10 text-gray-400" />
                                 </div>
-                            )}
-                        </div>
-                    ) : filteredData.length === 0 ? (
-                        <div className="p-12 text-center">
-                            <div className="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-6">
-                                <FileText className="w-10 h-10 text-gray-400" />
+                                <h3 className="text-xl font-medium text-gray-800 dark:text-gray-100 mb-2">
+                                    단어를 찾을 수 없습니다
+                                </h3>
+                                <p className="text-gray-500 dark:text-gray-400">
+                                    {activeTab === "long" && "9자 이상의 장문 단어가 없습니다."}
+                                    {activeTab === "mission" && "미션 조건에 해당하는 단어가 없습니다."}
+                                </p>
                             </div>
-                            <h3 className="text-xl font-medium text-gray-800 dark:text-gray-100 mb-2">
-                                단어를 찾을 수 없습니다
-                            </h3>
-                            <p className="text-gray-500 dark:text-gray-400">
-                                {activeTab === "long" && "9자 이상의 장문 단어가 없습니다."}
-                                {activeTab === "mission" && "미션 조건에 해당하는 단어가 없습니다."}
-                            </p>
-                        </div>
-                    ) : (
-                        <div
-                            ref={parentRef}
-                            className="p-6"
-                            style={{
-                                height: 'calc(100vh - 500px)',
-                                minHeight: '800px',
-                                overflow: 'auto',
-                            }}
-                        >
+                        ) : (
                             <div
+                                ref={parentRef}
+                                className="p-6"
                                 style={{
-                                    height: `${virtualizer.getTotalSize()}px`,
-                                    width: '100%',
-                                    position: 'relative',
-                            }}
-                        >
-                            {virtualizer.getVirtualItems().map((virtualItem) => {
-                                const item = virtualItems[virtualItem.index];
-                                return (
-                                    <div
-                                        key={virtualItem.key}
-                                        data-index={virtualItem.index}
-                                        ref={virtualizer.measureElement}
-                                        style={{
-                                            position: 'absolute',
-                                            top: 0,
-                                            left: 0,
-                                            width: '100%',
-                                            transform: `translateY(${virtualItem.start}px)`,
-                                        }}
-                                    >
-                                        <div className="mb-8">
-                                            <WordsTableBody 
-                                                key={`${activeTab}-${item.title}-${item.data.length}`}
-                                                title={item.title} 
-                                                initialData={item.data || []} 
-                                                isMission={activeTab === "mission"}
-                                                isLong={activeTab==="long" || metaData.title.includes("긴단어")}
-                                            />
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                        </div>
+                                    height: 'calc(100vh - 500px)',
+                                    minHeight: '800px',
+                                    overflow: 'auto',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        height: `${virtualizer.getTotalSize()}px`,
+                                        width: '100%',
+                                        position: 'relative',
+                                    }}
+                                >
+                                    {virtualizer.getVirtualItems().map((virtualItem) => {
+                                        const item = virtualItems[virtualItem.index];
+                                        return (
+                                            <div
+                                                key={virtualItem.key}
+                                                data-index={virtualItem.index}
+                                                ref={virtualizer.measureElement}
+                                                style={{
+                                                    position: 'absolute',
+                                                    top: 0,
+                                                    left: 0,
+                                                    width: '100%',
+                                                    transform: `translateY(${virtualItem.start}px)`,
+                                                }}
+                                            >
+                                                <div className="mb-8">
+                                                    <WordsTableBody
+                                                        key={`${activeTab}-${item.title}-${item.data.length}`}
+                                                        title={item.title}
+                                                        initialData={item.data || []}
+                                                        isMission={activeTab === "mission"}
+                                                        isLong={activeTab === "long" || metaData.title.includes("긴단어")}
+                                                        isSp={isSpecial ? { m: metaData.title[metaData.title.length - 1] } : undefined}
+                                                    />
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        )}
                     </div>
-                    )}
-                </div>
+                )}
             </div>
 
             {loginNeedModalOpen && (
@@ -501,7 +558,7 @@ const DocsDataHome = ({ id, data, metaData, starCount }: DocsPageProp) => {
             )}
             {errorModalView && (
                 <ErrorModal
-                    onClose={() => seterrorModalView(null)}
+                    onClose={() => setErrorModalView(null)}
                     error={errorModalView}
                 />
             )}
diff --git a/app/words-docs/[id]/DocsDataPage.tsx b/app/words-docs/[id]/DocsDataPage.tsx
index 991aab5..edae53a 100644
--- a/app/words-docs/[id]/DocsDataPage.tsx
+++ b/app/words-docs/[id]/DocsDataPage.tsx
@@ -23,14 +23,14 @@ export default function DocsDataPage({id}:{id:number}){
     const [errorMessage,setErrorMessage] = useState<string|null>(null);
     const [wordsData,setWordsData] = useState<{words:wordsDataType[], metadata:{title:string, lastUpdate:string, typez: "letter" | "theme" | "ect"}, starCount: string[]} | null>(null);
 
-    const makeError = (erorr: PostgrestError) => {
-        setErrorMessage(`문서 정보 데이터 로드중 오류.\nErrorName: ${erorr.name ?? "알수없음"}\nError Message: ${erorr.message ?? "없음"}\nError code: ${erorr.code}`)
+    const makeError = (error: PostgrestError) => {
+        setErrorMessage(`문서 정보 데이터 로드중 오류.\nErrorName: ${error.name ?? "알수없음"}\nError Message: ${error.message ?? "없음"}\nError code: ${error.code}`)
         updateLoadingState(100,"ERR");
         return;
     }
 
     useEffect(()=>{
-        const getDatas = async () => {
+        const getData = async () => {
             updateLoadingState(10,"문서 정보 가져오는 중...")
             const {data: docsData, error: docsDataError} = await SCM.get().docsInfoByDocsId(id);
             if (docsDataError) return makeError(docsDataError);
@@ -38,18 +38,26 @@ export default function DocsDataPage({id}:{id:number}){
             const {data: docsStarData, error: docsStarError} = await SCM.get().docsStar(docsData.id);
             if (docsStarError) return makeError(docsStarError);
 
+            if (id === 208 || id === 223 || id === 238) {
+                const p = {title: docsData.name, lastUpdate: docsData.last_update, typez: docsData.typez}
+                setWordsData({words: [], metadata: p, starCount:docsStarData.map(({user_id})=>user_id)});
+                await SCM.update().docView(docsData.id);
+                updateLoadingState(100, "완료!");
+                return;
+            }
+
             if (docsData.typez === "letter"){
                 updateLoadingState(40, "문서에 들어간 단어 정보 가져오는 중...");
-                const {data, error: LetterDatasError} = await SCM.get().docsWords({name: docsData.name, duem: docsData.duem, typez: "letter"});
-                if (LetterDatasError) return makeError(LetterDatasError);
-                const {words: LetterDatas1, waitWords: LetterDatas2} = data;
+                const {data, error: LetterDataError} = await SCM.get().docsWords({name: docsData.name, duem: docsData.duem, typez: "letter"});
+                if (LetterDataError) return makeError(LetterDataError);
+                const {words: LetterData1, waitWords: LetterData2} = data;
 
                 await new Promise(resolve => setTimeout(resolve, 1))
                 updateLoadingState(70, "데이터를 가공중...")
                 
                 // 삭제 요청인 단어는 제외
-                const wordsNotInB = LetterDatas1.filter(a => !LetterDatas2.some(b => b.word === a.word)).map((p)=>({word: p.word, status: "ok" as const, maker: undefined}));
-                const wordsData = [...wordsNotInB, ...LetterDatas2.filter(({word})=>word.length > 1).map(({word,requested_by,request_type})=>({word, status: request_type, maker:requested_by}))]
+                const wordsNotInB = LetterData1.filter(a => !LetterData2.some(b => b.word === a.word)).map((p)=>({word: p.word, status: "ok" as const, maker: undefined}));
+                const wordsData = [...wordsNotInB, ...LetterData2.filter(({word})=>word.length > 1).map(({word,requested_by,request_type})=>({word, status: request_type, maker:requested_by}))]
                 const p = {title: docsData.name, lastUpdate: docsData.last_update, typez:docsData.typez}
                 setWordsData({words: wordsData, metadata: p, starCount:docsStarData.map(({user_id})=>user_id)});
                 await SCM.update().docView(docsData.id);
@@ -99,7 +107,7 @@ export default function DocsDataPage({id}:{id:number}){
                 return;
             }
         }
-        getDatas();
+        getData();
     },[])
     
     if (isNotFound) return <NotFound />;
@@ -108,6 +116,6 @@ export default function DocsDataPage({id}:{id:number}){
     
     if (errorMessage) return <ErrorPage message={errorMessage}/>
 
-    if (wordsData) return <DocsDataHome id={id} data={wordsData.words.sort((a,b)=>a.word.localeCompare(b.word,'ko'))} metaData={wordsData.metadata} starCount={wordsData.starCount}/>
+    if (wordsData) return <DocsDataHome id={id} data={wordsData.words.sort((a,b)=>a.word.localeCompare(b.word,'ko'))} metaData={wordsData.metadata} starCount={wordsData.starCount} isSpecial={(209 <= id && id <= 222) || (224<= id && id <= 237) || (239<= id && id <= 252)}/>
     
 }
\ No newline at end of file
diff --git a/app/words-docs/[id]/Table.tsx b/app/words-docs/[id]/Table.tsx
index f114c98..2228f62 100644
--- a/app/words-docs/[id]/Table.tsx
+++ b/app/words-docs/[id]/Table.tsx
@@ -115,11 +115,20 @@ const Table = ({
                     </button>
                 );
             },
-            cell: ({ getValue }) => (
-                <Link href={`/word/search/${getValue()}`} className="font-semibold text-gray-900 underline dark:text-gray-100">
-                    {getValue() as string}
-                </Link>
-            )
+            cell: ({ getValue }) => {
+                const word = getValue() as string;
+                return (
+                    <Link href={`/word/search/${word}`} className="font-semibold text-gray-900 underline dark:text-gray-100">
+                        {isMission.m && isMission.t ? (
+                            word.split("").map((char, i) => (
+                                char === isMission.t ? <span key={i} className="text-green-500">{char}</span> : char
+                            ))
+                        ) : (
+                            word
+                        )}
+                    </Link>
+                );
+            }
         },
         { 
             accessorKey: "status", 
@@ -194,7 +203,7 @@ const Table = ({
         CancelDeleteRequest, 
         RequestDelete, 
         DeleteByAdmin, 
-    } = useWorkFunc({ makeError, setIsProcessing, user, CompleWork, isProcessing });
+    } = useWorkFunc({ makeError, setIsProcessing, user, CompWork: CompleWork, isProcessing });
 
     return (
         <div className="w-full mx-auto">
diff --git a/app/words-docs/[id]/TableWorkFunc.tsx b/app/words-docs/[id]/TableWorkFunc.tsx
index a8671de..36a3a3c 100644
--- a/app/words-docs/[id]/TableWorkFunc.tsx
+++ b/app/words-docs/[id]/TableWorkFunc.tsx
@@ -2,7 +2,7 @@ import { SCM } from '@/app/lib/supabaseClient';
 import type { PostgrestError } from "@supabase/supabase-js";
 import { isNoin } from "@/app/lib/lib";
 import type { RootState } from '@/app/store/store';
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 interface DocsLogData {
     readonly word: string;
@@ -19,22 +19,22 @@ interface WordLogData {
     readonly state: "approved" | "rejected";
 }
 
-type DocsLogDatas = DocsLogData[];
-type WordLogDatas = WordLogData[];
+type DocsLogArrayOfData = DocsLogData[];
+type WordLogArrayOfData = WordLogData[];
 
-export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, CompleWork }: {
+export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, CompWork }: {
     makeError: (error: PostgrestError) => void,
     setIsProcessing: React.Dispatch<React.SetStateAction<boolean>>,
     user: RootState['user'],
-    CompleWork: () => void,
+    CompWork: () => void,
     isProcessing: boolean
 }) => {
-    const WriteDocsLog = useCallback(async (logsData: DocsLogDatas) => {
+    const WriteDocsLog = useCallback(async (logsData: DocsLogArrayOfData) => {
         const { error: insertDocsLogDataError } = await SCM.add().docsLog(logsData);
         if (insertDocsLogDataError) { throw insertDocsLogDataError }
     }, []);
 
-    const WriteWordLog = useCallback(async (logsData: WordLogDatas) => {
+    const WriteWordLog = useCallback(async (logsData: WordLogArrayOfData) => {
         const { error: insertWordLogDataError } = await SCM.add().wordLog(logsData);
         if (insertWordLogDataError) { throw insertWordLogDataError }
     }, []);
@@ -123,7 +123,7 @@ export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, Co
             if (deleteWaitWordDataError) return makeError(deleteWaitWordDataError);
 
             setIsProcessing(false);
-            CompleWork();
+            CompWork();
         } catch (error) {
             makeError(error as PostgrestError);
             setIsProcessing(false);
@@ -155,7 +155,7 @@ export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, Co
         await WriteWordLog([insertWordLogData]);
 
         setIsProcessing(false);
-        CompleWork();
+        CompWork();
         return;
     }, []);
 
@@ -233,7 +233,7 @@ export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, Co
 
 
         setIsProcessing(false);
-        CompleWork();
+        CompWork();
         return;
     }, []);
 
@@ -262,7 +262,7 @@ export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, Co
         await WriteWordLog([insertWordLogData]);
 
         setIsProcessing(false);
-        CompleWork();
+        CompWork();
         return;
     }, []);
 
@@ -281,7 +281,7 @@ export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, Co
         if (deleteWaitWordDataError) { return makeError(deleteWaitWordDataError); }
 
         setIsProcessing(false);
-        CompleWork();
+        CompWork();
         return;
     }, []);
 
@@ -300,7 +300,7 @@ export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, Co
         if (deleteWaitWordDataError) { return makeError(deleteWaitWordDataError); }
 
         setIsProcessing(false);
-        CompleWork();
+        CompWork();
         return;
     }, []);
 
@@ -374,7 +374,7 @@ export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, Co
         }
 
         setIsProcessing(false);
-        CompleWork();
+        CompWork();
         return;
 
     }, []);
@@ -405,7 +405,7 @@ export const useWorkFunc = ({ makeError, setIsProcessing, user, isProcessing, Co
         if (!insertWaitWordDataA) return;
 
         setIsProcessing(false);
-        CompleWork();
+        CompWork();
         return;
     }, []);
 
diff --git a/app/words-docs/[id]/WordsTableBody.tsx b/app/words-docs/[id]/WordsTableBody.tsx
index 6392cc7..e086961 100644
--- a/app/words-docs/[id]/WordsTableBody.tsx
+++ b/app/words-docs/[id]/WordsTableBody.tsx
@@ -14,8 +14,9 @@ const WordsTableBody = ({
     title,
     initialData,
     isMission,
-    isLong
-}: { initialData: WordData[]; title: string, isMission: boolean, isLong: boolean }) => {
+    isLong,
+    isSp
+}: { initialData: WordData[]; title: string, isMission: boolean, isLong: boolean, isSp?: {m: string} }) => {
     const [wordAddModalOpen, setWordAddModalOpen] = useState(false);
     const [isTableVisible, setIsTableVisible] = useState(true);
 
@@ -52,7 +53,7 @@ const WordsTableBody = ({
                 transition={{ duration: 0.3, ease: "easeInOut" }}
                 className="overflow-hidden"
             >
-                <Table initialData={initialData} isMission={!isMission ? {m: false, t: null} : {m: true, t: title}} isLong={isLong}/>
+                <Table initialData={initialData} isMission={isMission ? {m: true, t: title} : isSp ? {m: true, t: isSp.m} : {m: false, t: null}} isLong={isLong}/>
             </motion.div>
 
             {/* 단어 추가 모달 */}
diff --git a/app/words-docs/[id]/logs/DocsLogPage.tsx b/app/words-docs/[id]/logs/DocsLogPage.tsx
index 4bb5152..4a5163e 100644
--- a/app/words-docs/[id]/logs/DocsLogPage.tsx
+++ b/app/words-docs/[id]/logs/DocsLogPage.tsx
@@ -18,10 +18,10 @@ type log = {
 export default function DocsLogPage({id}:{id: number}){
     const [isNotFound,setIsNotFound] = useState(false);
     const [errorMessage,setErrorMessage] = useState<string|null>(null);
-    const [logsData, setLogsDatas] = useState<{logs:log[], docsName: string}|null>(null);
+    const [logsData, setLogsData] = useState<{logs:log[], docsName: string}|null>(null);
     const { loadingState, updateLoadingState } = useLoadingState();
 
-    const hanldeError = (error: PostgrestError) => {
+    const handleError = (error: PostgrestError) => {
         setErrorMessage(`문서 정보 데이터 로드중 오류.\nErrorName: ${error.name ?? "알수없음"}\nError Message: ${error.message ?? "없음"}\nError code: ${error.code}`);
         updateLoadingState(100,"ERR");
     }
@@ -32,12 +32,12 @@ export default function DocsLogPage({id}:{id: number}){
             //  문서 정보 가져오기
             const {data: docsData, error: docsDataError} = await SCM.get().docsInfoByDocsId(id);
             if (docsData === null) return setIsNotFound(true);
-            if (docsDataError){ return hanldeError(docsDataError); }
+            if (docsDataError){ return handleError(docsDataError); }
 
             updateLoadingState(40,"로그 가져오는 중...");
             // 문서 로그 가져오기
             const {data: logData, error: logDataError} = await SCM.get().docsLogs(id);
-            if (logDataError){ return hanldeError(logDataError); }
+            if (logDataError){ return handleError(logDataError); }
 
             updateLoadingState(90,"데이터 가공중...");
             const logsData = logData?.map((log) => ({
@@ -48,7 +48,7 @@ export default function DocsLogPage({id}:{id: number}){
                 type: log.type,
             }));
 
-            setLogsDatas({logs:logsData ?? [], docsName: docsData?.name});
+            setLogsData({logs:logsData ?? [], docsName: docsData?.name});
             updateLoadingState(100,"완료!");
         }   
         getData()
diff --git a/app/words-docs/[id]/page.tsx b/app/words-docs/[id]/page.tsx
index 305653b..9075a9c 100644
--- a/app/words-docs/[id]/page.tsx
+++ b/app/words-docs/[id]/page.tsx
@@ -21,8 +21,7 @@ const DocsDataHomePage = async ({ params }: { params: Promise<{ id: string }> })
     const {id} = await params;
     const nid = Number(id)
 
-    if (isNaN(nid)) return <NotFound />
-    return <DocsDataPage id={nid} />
+    return isNaN(nid) ? <NotFound /> : <DocsDataPage id={nid} />
     
 }
 
diff --git a/docs/api_docs.md b/docs/api_docs.md
new file mode 100644
index 0000000..61e6415
--- /dev/null
+++ b/docs/api_docs.md
@@ -0,0 +1,210 @@
+# api server docs - api v1
+
+## 목차
+
+## base url
+- https://api.solidloop-studio.xyz/api/v1
+
+## Admin
+  - authorization 부분에 supabase jwt토큰을 필수로 넣어야 함.
+
+### Crawler
+#### [GET] /admin/crawler/health
+- 크롤러 채널별로 health 상태를 반환합니다.
+
+- response schema
+```ts
+{
+    channels:{id: string, healthy: boolean}[]
+}
+```
+
+#### [POST] /admin/crawler/session
+- 크롤러의 세션 정보를 저장합니다.
+
+- Request body
+```ts
+{
+  channelId: string,
+  jwtToken: string,
+  refreshToken: string
+}
+```
+
+- response schema
+```ts
+  { message: 'Session saved successfully' }
+```
+
+#### [POST] /admin/crawler/restart/:channelId
+- 해당 채널의 크롤러를 재시작 합니다
+
+- response schema
+```ts
+{
+    status: "ok",
+    channel: channelId
+}
+```
+
+### Logs
+#### [GET] /admin/logs/api-server
+- api-server의 로그 조회
+
+- Parameters
+  - date: 조회할 로그의 날짜 (형식 YYYY-MM-DD, 기본값 오늘 날짜)
+  
+- Response
+  - text/plain
+
+#### [GET] /admin/logs/crawler
+- crawlwe의 로그 조회
+
+- Parameters
+  - date: 조회할 로그의 날짜 (형식 YYYY-MM-DD, 기본값 오늘 날짜)
+  
+- Response
+  - text/plain
+
+## User
+### [GET] /profile/total
+- 등록된 총 사용자 수 조회
+
+#### Response
+```ts
+{
+  data: {
+    totalUsers: number
+  },
+  status: 200
+}
+```
+
+### [GET] /profile/:query
+- 유저 프로필 조회
+
+- Parameters
+  - query: string / 닉네임 또는 사용자 ID
+  - type: string / 쿼리의 유형 (닉네임 또는 사용자 ID) / Available values : nick, id
+
+Response
+- code 200
+```ts
+{
+    data:{
+        user: {
+            id: string,
+            nickname: string,
+            exp: number,
+            observedAt: string, // iso format
+            exordial: string,
+            level: number
+        },
+        equipment: {
+            userId: string,
+            slot: string,
+            itemId: string
+        }[],
+        record: {
+            id: string,
+            userId: string,
+            modeId: string,
+            total: number,
+            win: number,
+            exp: number,
+            playtime: number // ms
+        }[],
+        presence: {
+            userId: string,
+            channelId: string | null,
+            roomId: string | null,
+            crawlerId: string,
+            updatedAt: string // ios format
+        }
+    },
+    status: 200
+}
+```
+- code 404
+등록된 유저가 아님.
+
+
+## Item
+### [GET] /item
+- 아이템 정보 조회
+
+Parameters:
+- query: 조회할 아이템 ID들 (쉼표로 구분)
+
+Response:
+```ts
+{
+    data: {
+        id: string,
+        name: string,
+        description: string,
+        updatedAt: number,
+        group: string,
+        options: {
+            gEXP?: number, // 획득 경험치
+            hEXP?: number, // 분당 추가 경험치
+            gMNY?: number, // 획득 핑
+            hMNY?: number, // 분당 추가 핑
+            [key: string]: number
+        }
+    },
+    status: 200
+}
+```
+
+## Mode
+### [GET] /mode
+- 모드 전체 정보 조회
+
+Response:
+```ts
+{
+    data: {
+        modeId: string,
+        modeName: string,
+        group: string
+    }[],
+    status: 200
+}
+```
+
+## Ranking
+### [GET] /ranking/:mode
+- 모드에 맞는 랭킹 조회
+
+Parameters:
+- mode: 랭킹을 조회할 모드 ID
+- page: 페이지 번호 (기본값 1)
+- option: 랭킹 옵션 (win 승리수 기준, exp 경험치 기준)
+
+Response:
+```ts
+{
+    data:{
+        rank: number,
+        userRecord: {
+            id: number,
+            userId: string,
+            modeId: string,
+            total: number,
+            win: number,
+            exp: number,
+            playtime: number
+        },
+        userInfo: {
+            id: string,
+            nickname: string,
+            exp: number,
+            observedAt: string, // iso format
+            exordial: string,
+            level: number
+        }
+    },
+    status: 200
+}
+```
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
index b71b0c0..04520cc 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -18,6 +18,16 @@ const eslintConfig = [
       'jest.config.ts',
       'jest.setup.ts',
     ],
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { 
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_",
+          "caughtErrorsIgnorePattern": "^_"
+        }
+      ]
+    }
   },
   // ✅ 기존 설정
   ...compat.config({
diff --git a/next.config.ts b/next.config.ts
index 2cb5781..a21e9d1 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -11,6 +11,20 @@ const nextConfig: NextConfig = {
         port: "",
         pathname: "/**",
       },
+      {
+        protocol: 'https',
+        hostname: 'cdn.kkutu.co.kr',
+        port: '',
+        pathname: '/img/**',
+      },
+    ],
+    localPatterns: [
+      {
+        pathname: '/api/kkuko/image',
+      },
+      {
+        pathname: '/img/**',
+      },
     ],
   },
 };
diff --git a/package-lock.json b/package-lock.json
index 55fd8cf..b93305f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "kkuko-utils",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kkuko-utils",
-      "version": "1.3.0",
+      "version": "1.4.0",
       "dependencies": {
         "@codemirror/lang-javascript": "^6.2.3",
         "@codemirror/language": "^6.11.0",
@@ -36,8 +36,10 @@
         "@tanstack/react-virtual": "^3.13.9",
         "@types/react-window": "^1.8.8",
         "@uiw/react-codemirror": "^4.23.12",
+        "@vercel/analytics": "^1.6.1",
         "@vercel/speed-insights": "^1.2.0",
         "axios": "^1.8.4",
+        "axios-retry": "^4.5.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "codemirror": "^6.0.1",
@@ -45,8 +47,10 @@
         "es-hangul": "^2.3.0",
         "es-toolkit": "^1.37.2",
         "framer-motion": "^12.5.0",
+        "howler": "^2.2.4",
+        "idb": "^8.0.3",
         "lucide-react": "^0.474.0",
-        "next": "15.1.11",
+        "next": "^15.5.9",
         "next-themes": "^0.4.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -74,6 +78,7 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
+        "@types/howler": "^2.2.12",
         "@types/jest": "^30.0.0",
         "@types/node": "^20",
         "@types/react": "^19",
@@ -2822,9 +2827,10 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.6.0.tgz",
-      "integrity": "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.1.tgz",
+      "integrity": "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "tslib": "^2.4.0"
@@ -3088,10 +3094,20 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
-      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
       "cpu": [
         "arm64"
       ],
@@ -3107,13 +3123,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
-      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
       "cpu": [
         "x64"
       ],
@@ -3129,13 +3145,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.0.4"
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
-      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
       "cpu": [
         "arm64"
       ],
@@ -3149,9 +3165,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
-      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
       "cpu": [
         "x64"
       ],
@@ -3165,9 +3181,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
-      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
       "cpu": [
         "arm"
       ],
@@ -3181,9 +3197,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
-      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
       "cpu": [
         "arm64"
       ],
@@ -3196,10 +3212,42 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
-      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
       "cpu": [
         "s390x"
       ],
@@ -3213,9 +3261,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
-      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
       "cpu": [
         "x64"
       ],
@@ -3229,9 +3277,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
-      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
       "cpu": [
         "arm64"
       ],
@@ -3245,9 +3293,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
-      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
       "cpu": [
         "x64"
       ],
@@ -3261,9 +3309,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
-      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
       "cpu": [
         "arm"
       ],
@@ -3279,13 +3327,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.0.5"
+        "@img/sharp-libvips-linux-arm": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
-      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
       "cpu": [
         "arm64"
       ],
@@ -3301,13 +3349,57 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.0.4"
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
-      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
       "cpu": [
         "s390x"
       ],
@@ -3323,13 +3415,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.0.4"
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
-      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
       "cpu": [
         "x64"
       ],
@@ -3345,13 +3437,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.0.4"
+        "@img/sharp-libvips-linux-x64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
-      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
       "cpu": [
         "arm64"
       ],
@@ -3367,13 +3459,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
-      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
       "cpu": [
         "x64"
       ],
@@ -3389,21 +3481,40 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
-      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
       "cpu": [
         "wasm32"
       ],
       "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.2.0"
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
@@ -3412,9 +3523,9 @@
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
-      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
       "cpu": [
         "ia32"
       ],
@@ -3431,9 +3542,9 @@
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
-      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
       "cpu": [
         "x64"
       ],
@@ -4120,9 +4231,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.1.11",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.11.tgz",
-      "integrity": "sha512-yp++FVldfLglEG5LoS2rXhGypPyoSOyY0kxZQJ2vnlYJeP8o318t5DrDu5Tqzr03qAhDWllAID/kOCsXNLcwKw==",
+      "version": "15.5.9",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.9.tgz",
+      "integrity": "sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -4136,9 +4247,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.1.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.9.tgz",
-      "integrity": "sha512-sQF6MfW4nk0PwMYYq8xNgqyxZJGIJV16QqNDgaZ5ze9YoVzm4/YNx17X0exZudayjL9PF0/5RGffDtzXapch0Q==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
+      "integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
       "cpu": [
         "arm64"
       ],
@@ -4152,9 +4263,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.1.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.9.tgz",
-      "integrity": "sha512-fp0c1rB6jZvdSDhprOur36xzQvqelAkNRXM/An92sKjjtaJxjlqJR8jiQLQImPsClIu8amQn+ZzFwl1lsEf62w==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
+      "integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
       "cpu": [
         "x64"
       ],
@@ -4168,9 +4279,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.1.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.9.tgz",
-      "integrity": "sha512-77rYykF6UtaXvxh9YyRIKoaYPI6/YX6cy8j1DL5/1XkjbfOwFDfTEhH7YGPqG/ePl+emBcbDYC2elgEqY2e+ag==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
+      "integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
       "cpu": [
         "arm64"
       ],
@@ -4184,9 +4295,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.1.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.9.tgz",
-      "integrity": "sha512-uZ1HazKcyWC7RA6j+S/8aYgvxmDqwnG+gE5S9MhY7BTMj7ahXKunpKuX8/BA2M7OvINLv7LTzoobQbw928p3WA==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
+      "integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
       "cpu": [
         "arm64"
       ],
@@ -4200,9 +4311,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.1.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.9.tgz",
-      "integrity": "sha512-gQIX1d3ct2RBlgbbWOrp+SHExmtmFm/HSW1Do5sSGMDyzbkYhS2sdq5LRDJWWsQu+/MqpgJHqJT6ORolKp/U1g==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
+      "integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
       "cpu": [
         "x64"
       ],
@@ -4216,9 +4327,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.1.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.9.tgz",
-      "integrity": "sha512-fJOwxAbCeq6Vo7pXZGDP6iA4+yIBGshp7ie2Evvge7S7lywyg7b/SGqcvWq/jYcmd0EbXdb7hBfdqSQwTtGTPg==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
+      "integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
       "cpu": [
         "x64"
       ],
@@ -4232,9 +4343,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.1.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.9.tgz",
-      "integrity": "sha512-crfbUkAd9PVg9nGfyjSzQbz82dPvc4pb1TeP0ZaAdGzTH6OfTU9kxidpFIogw0DYIEadI7hRSvuihy2NezkaNQ==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
+      "integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
       "cpu": [
         "arm64"
       ],
@@ -4248,9 +4359,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.1.9",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.9.tgz",
-      "integrity": "sha512-SBB0oA4E2a0axUrUwLqXlLkSn+bRx9OWU6LheqmRrO53QEAJP7JquKh3kF0jRzmlYOWFZtQwyIWJMEJMtvvDcQ==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
+      "integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
       "cpu": [
         "x64"
       ],
@@ -6427,12 +6538,6 @@
         "@supabase/storage-js": "2.7.1"
       }
     },
-    "node_modules/@swc/counter": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
-      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-      "license": "Apache-2.0"
-    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -6819,6 +6924,13 @@
         "hoist-non-react-statics": "^3.3.0"
       }
     },
+    "node_modules/@types/howler": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.12.tgz",
+      "integrity": "sha512-hy769UICzOSdK0Kn1FBk4gN+lswcj1EKRkmiDtMkUGvFfYJzgaDXmVXkSShS2m89ERAatGIPnTUlp2HhfkVo5g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -7610,6 +7722,44 @@
         "win32"
       ]
     },
+    "node_modules/@vercel/analytics": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.6.1.tgz",
+      "integrity": "sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==",
+      "license": "MPL-2.0",
+      "peerDependencies": {
+        "@remix-run/react": "^2",
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/react": {
+          "optional": true
+        },
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vercel/speed-insights": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.2.0.tgz",
@@ -8014,6 +8164,18 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/axios-retry": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/axios-retry/-/axios-retry-4.5.0.tgz",
+      "integrity": "sha512-aR99oXhpEDGo0UuAlYcn2iGRds30k366Zfa05XWScR9QaQD4JYiP3/1Qt1u7YlefUOK+cn0CcwoL1oefavQUlQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-retry-allowed": "^2.2.0"
+      },
+      "peerDependencies": {
+        "axios": "0.x || 1.x"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -8296,17 +8458,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/busboy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
-      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-      "dependencies": {
-        "streamsearch": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      }
-    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -8692,20 +8843,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -8724,17 +8861,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -11064,6 +11190,12 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/howler": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz",
+      "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==",
+      "license": "MIT"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -11159,6 +11291,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/idb": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.3.tgz",
+      "integrity": "sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg==",
+      "license": "ISC"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -11342,13 +11480,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-arrayish": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
-      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -11671,6 +11802,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-retry-allowed": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz",
+      "integrity": "sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-set": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
@@ -14146,15 +14289,13 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.1.11",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.1.11.tgz",
-      "integrity": "sha512-UiVJaOGhKST58AadwbFUZThlNBmYhKqaCs8bVtm4plTxsgKq0mJ0zTsp7t7j/rzsbAEj9WcAMdZCztjByi4EoQ==",
+      "version": "15.5.9",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.9.tgz",
+      "integrity": "sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.1.11",
-        "@swc/counter": "0.1.3",
+        "@next/env": "15.5.9",
         "@swc/helpers": "0.5.15",
-        "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
         "styled-jsx": "5.1.6"
@@ -14166,19 +14307,19 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.1.9",
-        "@next/swc-darwin-x64": "15.1.9",
-        "@next/swc-linux-arm64-gnu": "15.1.9",
-        "@next/swc-linux-arm64-musl": "15.1.9",
-        "@next/swc-linux-x64-gnu": "15.1.9",
-        "@next/swc-linux-x64-musl": "15.1.9",
-        "@next/swc-win32-arm64-msvc": "15.1.9",
-        "@next/swc-win32-x64-msvc": "15.1.9",
-        "sharp": "^0.33.5"
+        "@next/swc-darwin-arm64": "15.5.7",
+        "@next/swc-darwin-x64": "15.5.7",
+        "@next/swc-linux-arm64-gnu": "15.5.7",
+        "@next/swc-linux-arm64-musl": "15.5.7",
+        "@next/swc-linux-x64-gnu": "15.5.7",
+        "@next/swc-linux-x64-musl": "15.5.7",
+        "@next/swc-win32-arm64-msvc": "15.5.7",
+        "@next/swc-win32-x64-msvc": "15.5.7",
+        "sharp": "^0.34.3"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
-        "@playwright/test": "^1.41.2",
+        "@playwright/test": "^1.51.1",
         "babel-plugin-react-compiler": "*",
         "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
         "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
@@ -15763,16 +15904,16 @@
       }
     },
     "node_modules/sharp": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
-      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "color": "^4.2.3",
-        "detect-libc": "^2.0.3",
-        "semver": "^7.6.3"
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
       },
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -15781,25 +15922,30 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.33.5",
-        "@img/sharp-darwin-x64": "0.33.5",
-        "@img/sharp-libvips-darwin-arm64": "1.0.4",
-        "@img/sharp-libvips-darwin-x64": "1.0.4",
-        "@img/sharp-libvips-linux-arm": "1.0.5",
-        "@img/sharp-libvips-linux-arm64": "1.0.4",
-        "@img/sharp-libvips-linux-s390x": "1.0.4",
-        "@img/sharp-libvips-linux-x64": "1.0.4",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
-        "@img/sharp-linux-arm": "0.33.5",
-        "@img/sharp-linux-arm64": "0.33.5",
-        "@img/sharp-linux-s390x": "0.33.5",
-        "@img/sharp-linux-x64": "0.33.5",
-        "@img/sharp-linuxmusl-arm64": "0.33.5",
-        "@img/sharp-linuxmusl-x64": "0.33.5",
-        "@img/sharp-wasm32": "0.33.5",
-        "@img/sharp-win32-ia32": "0.33.5",
-        "@img/sharp-win32-x64": "0.33.5"
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
       }
     },
     "node_modules/shebang-command": {
@@ -15927,16 +16073,6 @@
         "url": "https://github.com/steveukx/git-js?sponsor=1"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
-      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -16032,14 +16168,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/streamsearch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
-      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
diff --git a/package.json b/package.json
index f9a191a..c9942f3 100644
--- a/package.json
+++ b/package.json
@@ -44,8 +44,10 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@types/react-window": "^1.8.8",
     "@uiw/react-codemirror": "^4.23.12",
+    "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.2.0",
     "axios": "^1.8.4",
+    "axios-retry": "^4.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "codemirror": "^6.0.1",
@@ -53,8 +55,10 @@
     "es-hangul": "^2.3.0",
     "es-toolkit": "^1.37.2",
     "framer-motion": "^12.5.0",
+    "howler": "^2.2.4",
+    "idb": "^8.0.3",
     "lucide-react": "^0.474.0",
-    "next": "15.1.11",
+    "next": "^15.5.9",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -82,6 +86,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/howler": "^2.2.12",
     "@types/jest": "^30.0.0",
     "@types/node": "^20",
     "@types/react": "^19",
diff --git a/public/audio/bgm/JaqwiBGM.mp3 b/public/audio/bgm/JaqwiBGM.mp3
new file mode 100644
index 0000000..13a80ec
Binary files /dev/null and b/public/audio/bgm/JaqwiBGM.mp3 differ
diff --git a/public/audio/bgm/T0.mp3 b/public/audio/bgm/T0.mp3
new file mode 100644
index 0000000..1a60908
Binary files /dev/null and b/public/audio/bgm/T0.mp3 differ
diff --git a/public/audio/bgm/T1.mp3 b/public/audio/bgm/T1.mp3
new file mode 100644
index 0000000..fa43510
Binary files /dev/null and b/public/audio/bgm/T1.mp3 differ
diff --git a/public/audio/bgm/T10.mp3 b/public/audio/bgm/T10.mp3
new file mode 100644
index 0000000..2728eb4
Binary files /dev/null and b/public/audio/bgm/T10.mp3 differ
diff --git a/public/audio/bgm/T2.mp3 b/public/audio/bgm/T2.mp3
new file mode 100644
index 0000000..19581fc
Binary files /dev/null and b/public/audio/bgm/T2.mp3 differ
diff --git a/public/audio/bgm/T3.mp3 b/public/audio/bgm/T3.mp3
new file mode 100644
index 0000000..28ff8ea
Binary files /dev/null and b/public/audio/bgm/T3.mp3 differ
diff --git a/public/audio/bgm/T4.mp3 b/public/audio/bgm/T4.mp3
new file mode 100644
index 0000000..c7216d4
Binary files /dev/null and b/public/audio/bgm/T4.mp3 differ
diff --git a/public/audio/bgm/T5.mp3 b/public/audio/bgm/T5.mp3
new file mode 100644
index 0000000..1f422aa
Binary files /dev/null and b/public/audio/bgm/T5.mp3 differ
diff --git a/public/audio/bgm/T6.mp3 b/public/audio/bgm/T6.mp3
new file mode 100644
index 0000000..cbe27cd
Binary files /dev/null and b/public/audio/bgm/T6.mp3 differ
diff --git a/public/audio/bgm/T7.mp3 b/public/audio/bgm/T7.mp3
new file mode 100644
index 0000000..41810d3
Binary files /dev/null and b/public/audio/bgm/T7.mp3 differ
diff --git a/public/audio/bgm/T8.mp3 b/public/audio/bgm/T8.mp3
new file mode 100644
index 0000000..aa00d17
Binary files /dev/null and b/public/audio/bgm/T8.mp3 differ
diff --git a/public/audio/bgm/T9.mp3 b/public/audio/bgm/T9.mp3
new file mode 100644
index 0000000..a53ac94
Binary files /dev/null and b/public/audio/bgm/T9.mp3 differ
diff --git a/public/audio/game/game_start.mp3 b/public/audio/game/game_start.mp3
new file mode 100644
index 0000000..5c8ed55
Binary files /dev/null and b/public/audio/game/game_start.mp3 differ
diff --git a/public/audio/game/round_start.mp3 b/public/audio/game/round_start.mp3
new file mode 100644
index 0000000..a3ba516
Binary files /dev/null and b/public/audio/game/round_start.mp3 differ
diff --git a/public/audio/in_game/Al.mp3 b/public/audio/in_game/Al.mp3
new file mode 100644
index 0000000..c26641b
Binary files /dev/null and b/public/audio/in_game/Al.mp3 differ
diff --git a/public/audio/in_game/As0.mp3 b/public/audio/in_game/As0.mp3
new file mode 100644
index 0000000..bc05e2c
Binary files /dev/null and b/public/audio/in_game/As0.mp3 differ
diff --git a/public/audio/in_game/As1.mp3 b/public/audio/in_game/As1.mp3
new file mode 100644
index 0000000..bc05e2c
Binary files /dev/null and b/public/audio/in_game/As1.mp3 differ
diff --git a/public/audio/in_game/As10.mp3 b/public/audio/in_game/As10.mp3
new file mode 100644
index 0000000..4e65023
Binary files /dev/null and b/public/audio/in_game/As10.mp3 differ
diff --git a/public/audio/in_game/As2.mp3 b/public/audio/in_game/As2.mp3
new file mode 100644
index 0000000..bc05e2c
Binary files /dev/null and b/public/audio/in_game/As2.mp3 differ
diff --git a/public/audio/in_game/As3.mp3 b/public/audio/in_game/As3.mp3
new file mode 100644
index 0000000..bc05e2c
Binary files /dev/null and b/public/audio/in_game/As3.mp3 differ
diff --git a/public/audio/in_game/As4.mp3 b/public/audio/in_game/As4.mp3
new file mode 100644
index 0000000..d858226
Binary files /dev/null and b/public/audio/in_game/As4.mp3 differ
diff --git a/public/audio/in_game/As5.mp3 b/public/audio/in_game/As5.mp3
new file mode 100644
index 0000000..2b66992
Binary files /dev/null and b/public/audio/in_game/As5.mp3 differ
diff --git a/public/audio/in_game/As6.mp3 b/public/audio/in_game/As6.mp3
new file mode 100644
index 0000000..1f1fe9d
Binary files /dev/null and b/public/audio/in_game/As6.mp3 differ
diff --git a/public/audio/in_game/As7.mp3 b/public/audio/in_game/As7.mp3
new file mode 100644
index 0000000..dfe1ea3
Binary files /dev/null and b/public/audio/in_game/As7.mp3 differ
diff --git a/public/audio/in_game/As8.mp3 b/public/audio/in_game/As8.mp3
new file mode 100644
index 0000000..8cb6a6f
Binary files /dev/null and b/public/audio/in_game/As8.mp3 differ
diff --git a/public/audio/in_game/As9.mp3 b/public/audio/in_game/As9.mp3
new file mode 100644
index 0000000..5462a40
Binary files /dev/null and b/public/audio/in_game/As9.mp3 differ
diff --git a/public/audio/in_game/K0.mp3 b/public/audio/in_game/K0.mp3
new file mode 100644
index 0000000..4a243c8
Binary files /dev/null and b/public/audio/in_game/K0.mp3 differ
diff --git a/public/audio/in_game/K1.mp3 b/public/audio/in_game/K1.mp3
new file mode 100644
index 0000000..db15954
Binary files /dev/null and b/public/audio/in_game/K1.mp3 differ
diff --git a/public/audio/in_game/K10.mp3 b/public/audio/in_game/K10.mp3
new file mode 100644
index 0000000..1115d92
Binary files /dev/null and b/public/audio/in_game/K10.mp3 differ
diff --git a/public/audio/in_game/K2.mp3 b/public/audio/in_game/K2.mp3
new file mode 100644
index 0000000..6f5a294
Binary files /dev/null and b/public/audio/in_game/K2.mp3 differ
diff --git a/public/audio/in_game/K3.mp3 b/public/audio/in_game/K3.mp3
new file mode 100644
index 0000000..5071ba4
Binary files /dev/null and b/public/audio/in_game/K3.mp3 differ
diff --git a/public/audio/in_game/K4.mp3 b/public/audio/in_game/K4.mp3
new file mode 100644
index 0000000..eeb1cc1
Binary files /dev/null and b/public/audio/in_game/K4.mp3 differ
diff --git a/public/audio/in_game/K5.mp3 b/public/audio/in_game/K5.mp3
new file mode 100644
index 0000000..9706b50
Binary files /dev/null and b/public/audio/in_game/K5.mp3 differ
diff --git a/public/audio/in_game/K6.mp3 b/public/audio/in_game/K6.mp3
new file mode 100644
index 0000000..3937cd6
Binary files /dev/null and b/public/audio/in_game/K6.mp3 differ
diff --git a/public/audio/in_game/K7.mp3 b/public/audio/in_game/K7.mp3
new file mode 100644
index 0000000..39d5d78
Binary files /dev/null and b/public/audio/in_game/K7.mp3 differ
diff --git a/public/audio/in_game/K8.mp3 b/public/audio/in_game/K8.mp3
new file mode 100644
index 0000000..4706d15
Binary files /dev/null and b/public/audio/in_game/K8.mp3 differ
diff --git a/public/audio/in_game/K9.mp3 b/public/audio/in_game/K9.mp3
new file mode 100644
index 0000000..9e3b16c
Binary files /dev/null and b/public/audio/in_game/K9.mp3 differ
diff --git a/public/audio/in_game/fail.mp3 b/public/audio/in_game/fail.mp3
new file mode 100644
index 0000000..a559e18
Binary files /dev/null and b/public/audio/in_game/fail.mp3 differ
diff --git a/public/audio/in_game/mission.mp3 b/public/audio/in_game/mission.mp3
new file mode 100644
index 0000000..f62f2ca
Binary files /dev/null and b/public/audio/in_game/mission.mp3 differ
diff --git a/public/audio/in_game/timeout.mp3 b/public/audio/in_game/timeout.mp3
new file mode 100644
index 0000000..c0f104f
Binary files /dev/null and b/public/audio/in_game/timeout.mp3 differ
diff --git a/public/img/def.png b/public/img/def.png
new file mode 100644
index 0000000..8976d66
Binary files /dev/null and b/public/img/def.png differ
diff --git a/public/img/gamebg.png b/public/img/gamebg.png
new file mode 100644
index 0000000..8eebb33
Binary files /dev/null and b/public/img/gamebg.png differ
diff --git a/public/img/jjoeyeL.png b/public/img/jjoeyeL.png
new file mode 100644
index 0000000..f804ef3
Binary files /dev/null and b/public/img/jjoeyeL.png differ
diff --git a/public/img/jjoeyeR.png b/public/img/jjoeyeR.png
new file mode 100644
index 0000000..239c03a
Binary files /dev/null and b/public/img/jjoeyeR.png differ
diff --git a/public/img/jjonose.png b/public/img/jjonose.png
new file mode 100644
index 0000000..3c03f7b
Binary files /dev/null and b/public/img/jjonose.png differ
diff --git a/public/img/lefthand.png b/public/img/lefthand.png
new file mode 100644
index 0000000..7ec40b7
Binary files /dev/null and b/public/img/lefthand.png differ
diff --git a/public/img/righthand.png b/public/img/righthand.png
new file mode 100644
index 0000000..5ade104
Binary files /dev/null and b/public/img/righthand.png differ
diff --git a/supabase/.temp/cli-latest b/supabase/.temp/cli-latest
index 7a78572..8c68db7 100644
--- a/supabase/.temp/cli-latest
+++ b/supabase/.temp/cli-latest
@@ -1 +1 @@
-v2.62.10
\ No newline at end of file
+v2.67.1
\ No newline at end of file