feat(i18n): apply i18n to contest details page

Author: Sunja-An

.agent/skills/feature/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: gamers-fe-guide
+description: Comprehensive guide to the GAMERS-FE project structure, tech stack, and development patterns.
+---
+
+# GAMERS-FE Project Skill
+
+## Project Overview
+GAMERS-FE is a Next.js 16 application built with TypeScript and Tailwind CSS v4. It serves as the frontend for a gaming platform/community service, featuring contest management, user profiles, and game integrations (Valorant, LoL).
+
+## Tech Stack
+- **Framework**: Next.js 16.1.1 (App Router)
+- **Language**: TypeScript 5.x
+- **Styling**: 
+  - Tailwind CSS v4
+  - `clsx` & `tailwind-merge` for class management
+  - Framer Motion & GSAP for animations
+- **State Management**: 
+  - React Query (`@tanstack/react-query`) for server state
+  - React Context for global UI state
+- **Form Handling**: React Hook Form (`react-hook-form`) + Zod validation
+- **API Client**: Custom Axios wrapper (`@/lib/api-client`)
+- **I18n**: `i18next` & `react-i18next`
+- **Package Manager**: npm
+
+## Directory Structure
+- `src/app`: Next.js App Router pages and layouts.
+- `src/components`:
+    - `ui`: Reusable UI components (Buttons, Inputs, Modals).
+    - `contest`: Contest-related components.
+    - `admin`: Admin dashboard components.
+    - `layout`: Layout components (Header, Footer).
+- `src/services`: API service modules.
+- `src/types`: TypeScript definitions, especially API responses (`api.ts`).
+- `src/lib`: Utility libraries and configurations (e.g., `api-client`).
+- `src/hooks`: Custom React hooks.
+- `src/utils`: Helper functions.
+- `src/locales`: i18n translation files.
+
+## Key Development Patterns
+
+### 1. API Integration
+- **Do not** make direct `fetch` or `axios` calls in components.
+- **Always** create a service function in `src/services/` using the `api` client.
+- Define request/response types in `src/types/api.ts`.
+- Use the `api` client from `@/lib/api-client`.
+
+**Example:**
+`src/services/user-service.ts`
+```typescript
+import { api } from '@/lib/api-client';
+import { UserResponse, ApiResponse } from '@/types/api';
+
+export const getUser = async (id: number) => {
+  return api.get<ApiResponse<UserResponse>>(`/users/${id}`);
+};
+```
+
+### 2. Styling Rules
+- Use Tailwind CSS utility classes found in `src/app/globals.css` (or implicitly via Tailwind v4).
+- Use the configured custom colors: `deep-black`, `neon-cyan`, `neon-purple`.
+- For conditional classes, use `cn()` (or `clsx` + `tailwind-merge`).
+
+**Example:**
+```tsx
+import { cn } from "@/lib/utils"; // or explicit imports
+
+<div className={cn("p-4 rounded-lg", isActive ? "bg-neon-cyan" : "bg-gray-800")}>
+  Content
+</div>
+```
+
+### 3. Component Structure
+- Use functional components with TypeScript interfaces for props.
+- Place reusable generic components in `src/components/ui`.
+- Place feature-specific components in `src/components/[feature]`.
+- Use `export default` or named exports consistently (check existing files).
+
+### 4. Form Handling
+- Use `useForm` from `react-hook-form`.
+- Define validation schemas with `zod`.
+- Use `zodResolver` to integrate them.
+
+### 5. Config Files
+- `next.config.ts`: Image domains (`images.unsplash.com`, `discord`, etc.) and redirects.
+- `tailwind.config.ts`: Custom theme extensions.
+
+## Development Workflow
+- **Start Dev Server**: `npm run dev`
+- **Build for Production**: `npm run build`
+- **Lint Code**: `npm run lint`
+
+## Critical Rules
+1. **Never** use `any` type implicitly or explicitly if possible.
+2. **Always** check `swagger.yaml` or backend docs before creating new API types.
+3. **Follow** the existing folder structure when adding new files.

.agent/skills/review/SKILL.md

@@ -0,0 +1,52 @@
+---
+name: code-review
+description: standard code review guidelines for GAMERS-FE
+---
+
+# Code Review Skill
+
+Use this skill when reviewing Pull Requests or code snippets for the GAMERS-FE project.
+
+## 1. General Checklist
+- [ ] **Functionality**: Does the code perform the intended task correctly?
+- [ ] **Requirements**: Does it satisfy the user's request or the ticket description?
+- [ ] **Bugs**: Are there any obvious logic errors or potential edge cases missing?
+- [ ] **Security**: detailed check for sensitive data leakage or unsafe patterns.
+
+## 2. Project-Specific Rules (GAMERS-FE)
+Verify these specific patterns are followed:
+
+### Architecture & Structure
+- **API Calls**: Ensure no direct `fetch/axios` in components. All API logic must be in `src/services/` using the `@/lib/api-client`.
+- **Directory Structure**:
+  - UI components -> `src/components/ui`
+  - Feature components -> `src/components/[feature]`
+  - Pages -> `src/app`
+- **Imports**: Check for absolute imports (`@/...`) instead of relative `../../`.
+
+### TypeScript & Types
+- **No `any`**: Strictly forbid `any`. Look for proper interfaces/types.
+- **API Types**: Request/Response types should be defined in `src/types/api.ts`.
+- **Props**: Component props must be typed explicitly.
+
+### Styling (Tailwind CSS)
+- **Utility Classes**: Ensure standard Tailwind classes are used.
+- **Custom Colors**: Verify usage of `neon-cyan`, `deep-black`, `neon-purple` logic instead of hardcoded hex values where applicable.
+- **Class Merging**: Check for `cn(...)` usage when merging external `className` props.
+
+### React & Next.js
+- **Server vs Client**: Is `use client` used only when necessary?
+- **Images**: Are `next/image` components used with proper `width/height` or `fill`?
+- **Hooks**: Are custom hooks used for complex logic?
+- **Performance**: Check for unnecessary re-renders or heavy computations in render path.
+
+## 3. Style & Naming
+- **Components**: `PascalCase` (e.g., `ContestCard.tsx`)
+- **Functions/Variables**: `camelCase`
+- **Constants**: `UPPER_SNAKE_CASE`
+- **Files**: match the export (e.g., component file matches component name).
+
+## 4. Review Etiquette
+- **Be Constructive**: "Have you considered X?" instead of "Change this to X."
+- **Explain "Why"**: Provide context for your suggestions.
+- **Praise**: Point out good code patterns as well.

src/components/contest/ContestDetailClient.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { useTranslation } from 'react-i18next';
 
 import React from 'react';
 import { useQuery } from '@tanstack/react-query';
@@ -9,6 +10,7 @@ import { Loader2, AlertCircle } from 'lucide-react';
 import { useParams } from 'next/navigation';
 
 export default function ContestDetailClient({ contestId }: { contestId: string }) {
+  const { t } = useTranslation();
   const { data: contestResponse, isLoading, error } = useQuery({
     queryKey: ['contest', contestId],
     queryFn: () => contestService.getContest(Number(contestId)),
@@ -28,8 +30,8 @@ export default function ContestDetailClient({ contestId }: { contestId: string }
     return (
       <div className="min-h-screen flex flex-col items-center justify-center text-white gap-4">
         <AlertCircle className="w-12 h-12 text-red-500" />
-        <h1 className="text-2xl font-bold">大会情報の読み込みに失敗しました</h1>
-        <p className="text-neutral-400">URLを確認するか、しばらく経ってから再度お試しください。</p>
+        <h1 className="text-2xl font-bold">{t('contestPlayground.loadingFail', 'Failed to load contest info')}</h1>
+        <p className="text-neutral-400">{t('contestPlayground.retry', 'Please check the URL or try again later.')}</p>
       </div>
     );
   }

src/components/contest/PlaygroundHeader.tsx

@@ -6,6 +6,7 @@ import { useGSAP } from '@gsap/react';
 import { Gamepad2 } from 'lucide-react';
 import Image from 'next/image';
 import { ContestResponse } from '@/types/api';
+import { useTranslation } from 'react-i18next';
 
 gsap.registerPlugin(useGSAP);
 
@@ -14,6 +15,7 @@ interface PlaygroundHeaderProps {
 }
 
 export default function PlaygroundHeader({ contest }: PlaygroundHeaderProps) {
+  const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const bgRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -61,7 +63,7 @@ export default function PlaygroundHeader({ contest }: PlaygroundHeaderProps) {
           {contest.title}
         </h1>
         <p className="header-content-item text-neutral-400 text-sm md:text-base uppercase tracking-widest border border-neon-purple/50 px-4 py-1 rounded-full bg-deep-black/50 backdrop-blur-sm">
-          プレイグラウンド
+          {t('contestPlayground.header.label', 'Playground')}
         </p>
       </div>
     </section>