v1.5.0 개발

.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
+app/api/test
+
+# Idea
+/.idea

.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
+  }
 }

__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');
+    });
+});

__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();
+    });
+});

__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();
+    });
+});

__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
+    });
+});

__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();
+    });
+});

__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();
+    });
+});