Nickname

이름과 별개로 다른 사용자에게 보여 주는 닉네임을 입력받고 바꾸는 컴포넌트입니다. 가입 폼에서는 [자동 생성] 버튼으로 이름을 받아 쓰거나 처음부터 채워 둘 수 있고, 마이페이지에서는 한 줄 편집기로 바꿀 수 있습니다. 닉네임은 선택 기능이라 기본은 꺼져 있습니다.

Turn it on

export default defineMeerkitConfig({
  signup: {
    optionalFields: ["nickname"],           // 켜기
    nickname: {
      generator: true,   // [자동 생성] 버튼 (기본 true)
      autoFill: false,   // 가입 폼을 열 때 닉네임을 미리 채워 둠 (기본 false)
    },
  },
});

Input with generator

[자동 생성]을 누를 때마다 새로운 닉네임이 입력칸에 들어갑니다. 직접 입력해도 됩니다.

<NicknameInput
  id="nickname"
  value={value}
  onChange={setValue}
  generator
/>

생성 규칙

• 형용사 + 동물 + 숫자 3자리를 이어 붙입니다. 예: 용감한미어캣482, 포근한수달731.
• 길이는 항상 2~12자 안에 들어오도록 단어를 골라 두었습니다.
• 단어 목록은 auth/nickname.ts에 있어서 서비스 분위기에 맞게 바꿀 수 있습니다.
• 중복은 서버가 판단합니다. 숫자가 붙어 겹칠 가능성이 낮지만, 같은 닉네임이 이미 있으면 서버가 거절하고 화면이 그 메시지를 보여 줍니다. 다시 [자동 생성]을 누르면 됩니다.

On signup

• 가입 폼의 닉네임 칸에 [자동 생성] 버튼이 붙습니다. 비워 두어도 되는 선택 항목입니다.
• autoFill: true이면 폼을 열 때 닉네임이 이미 채워져 있어, 사용자는 따로 고민하지 않고 가입할 수 있습니다.
• 값이 있으면 2~12자인지 검사하고, 맞지 않으면 닉네임은 2~12자로 입력해 주세요.를 보여 줍니다.

On my page

마이페이지(/me)의 요약 카드 안에 있는 한 줄 편집기입니다. 변경을 누르면 입력칸으로 바뀝니다.

<NicknameForm
  user={user}
  onSubmit={(nickname) => updateNickname.mutateAsync(nickname)}
  pending={updateNickname.isPending}
  error={message}
/>

Where it shows

닉네임이 있으면 이름 대신 닉네임이 보이고, 없으면 이름이 보입니다.

• 사용자 메뉴의 버튼과 머리말, 마이페이지 제목, 관리자 멤버 표의 이름 칸
• 아바타의 이니셜(프로필 이미지가 없을 때)
• 내 서비스에서도 displayName(user)를 쓰면 같은 규칙으로 표시됩니다.

import { displayName } from "@/meerkit/auth/components/UserAvatar";

<p>{displayName(user)}</p>   // 닉네임이 있으면 닉네임, 없으면 이름

API

// request (바꿀 항목만)
{ "nickname": "용감한미어캣482" }

// response 200 → 갱신된 User
// 409 { "detail": "이미 사용 중인 닉네임입니다." }

Props

NicknameInput

NicknameForm