Next.js Admin Panel Setup (mindBridge)

This skill configures Claude Code to understand and work with the mindBridge-admin repository, a Next.js 13-based Korean admin panel for managing game/social platform features.

Project Context

**Type**: Next.js 13 admin application

**Language**: TypeScript with Korean UI

**Stack**: Next.js 13, Ant Design, Tailwind CSS, Zustand, TanStack Query, NextAuth.js

**Port**: Development server runs on port 4000 (not default 3000)

Key Development Commands

When working with this project, use:

Architectural Patterns

1. API Client Organization

API clients are organized by domain in `src/client/`:

**Pattern**:

```typescript

// src/client/domain.ts

export const getDomainItems = () => client.get('/domain');

// src/hooks/useDomain.ts

export const useDomainItems = () => useQuery(['domain'], getDomainItems);

```

2. Component Organization

Follow this structure:

3. Page Component Pattern

```typescript

// src/pages/example/list.tsx

const ExampleListPage = () => <ExampleList />;

ExampleListPage.getLayout = getDefaultLayout;

export default ExampleListPage;

// src/components/page/example/ExampleList.tsx

export default function ExampleList() {

// Implementation here

}

```

4. Form Pattern

Use Ant Design forms with custom wrappers:

```typescript

<DefaultForm form={form} onFinish={onFinish}>

<FormSection title="기본 정보">

<FormGroup title="제목" required>

<Form.Item name="title" rules={[{ required: true }]}>

<Input />

</Form.Item>

</FormGroup>

</FormSection>

</DefaultForm>

```

5. Authentication Flow

Custom Components to Use

When building features, prefer these custom components:

Important Configuration Notes

1. **Port**: Dev server uses port 4000, not 3000

2. **TypeScript**: Build errors are ignored (`ignoreBuildErrors: true`)

3. **Tailwind**: Preflight disabled to avoid Ant Design conflicts

4. **Locale**: Use Korean (`koKR`) for Ant Design components

5. **API Proxy**: `/s3-proxy/*` routes to S3 bucket

6. **Font**: Uses Pretendard font family

State Management Strategy

When Making Changes

1. **New API Endpoints**: Add to appropriate client in `src/client/`, create corresponding hook in `src/hooks/`

2. **New Pages**: Create in `src/pages/`, extract logic to `src/components/page/[route]/`

3. **New Forms**: Use DefaultForm + FormSection + FormGroup pattern with Ant Design Form.Item

4. **New Tables**: Use DefaultTable component with standard column configuration

5. **New Modals**: Use DefaultModal component for consistent styling

Directory Structure Reference

```

src/

├── client/ # API clients (axios, organized by domain)

├── components/

│ ├── layout/ # Layout components

│ ├── page/ # Page-specific components (organized by route)

│ ├── shared/ # Reusable components

│ └── ui/ # Base UI components

├── hooks/ # TanStack Query hooks (one per domain)

├── lib/ # Utilities and providers

├── pages/ # Next.js pages (file-based routing)

├── styles/ # Global CSS and Ant Design customizations

└── types/ # TypeScript definitions

```

Authentication Requirements

Remember that: