feat: 닉네임 입력 단계 랜덤 닉네임 및 중복 확인 기능 추가 by youngminss · Pull Request #123 · Nexters/yogieat

youngminss · 2026-02-27T15:24:55Z

🎯 PR 제목

feat: 닉네임 입력 단계 랜덤 닉네임 및 중복 확인 기능 추가

📑 작업 상세 내역

기능 추가
- 랜덤 닉네임 상수(20개)를 추가합니다
- useRandomNickname 훅을 추가해 중복 방지 랜덤 닉네임을 생성합니다
- NicknameStep 진입 시 랜덤 닉네임 초기값을 자동으로 설정하고 리프레시 버튼을 추가합니다
- 닉네임 중복 확인 API 엔드포인트를 participant API에 추가합니다
- useValidateNickname 훅을 추가합니다
- NicknameStep 다음 버튼 클릭 시 닉네임 중복 확인 API를 호출합니다
- 닉네임 사전 검증 API 스펙을 반영하고 기능을 연결합니다
- 선호 음식 카테고리 입력 완료 버튼에 로딩 상태를 추가합니다
버그 수정
- NicknameStep 리프레시 아이콘 클리핑 문제를 수정하고 clear 버튼을 활성화합니다
- clear 버튼 클릭 시 onClear로 RHF 상태를 명시적으로 업데이트합니다
- 뒤로가기 복귀 시 랜덤 닉네임이 기존 입력값을 덮어쓰는 문제를 수정합니다
- 값이 있을 때 clear 버튼이 항상 노출되지 않는 문제를 수정합니다
기타 작업
- 린터 포맷팅 및 에러 핸들링 패턴을 기존 코드와 통일합니다

🙏 리뷰 요청 사항

useRandomNickname 훅의 셔플 및 중복 방지 로직이 의도대로 동작하는지 확인해주세요.
InputField에 value prop을 내려줘 controlled 모드로 전환한 부분이 기존 폼 동작에 영향을 주지 않는지 검토해주세요.
validateNickname API 에러 핸들링(ERROR_CODES.DUPLICATE_NICKNAME)이 서버 스펙과 일치하는지 확인해주세요.

📃 참고 자료

🖼️ 작업 결과물

프로젝트 문서

…elop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- RefreshIcon SVG viewBox를 16x16 → 24x24로 교체 (아이콘 클리핑 해결) - InputField에 showClearButton 추가 (값 있을 때 clear 버튼 표시) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Input 컴포넌트의 handleClear는 native Event("input")를 dispatch하는데 이것이 React Hook Form onChange까지 안정적으로 전달되지 않을 수 있음. onClear 콜백에서 setValue를 직접 호출해 RHF 상태를 확실히 초기화. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

useEffect에서 getValues로 기존 폼 값을 확인하고, 이미 입력된 값이 있을 경우 랜덤 닉네임으로 덮어쓰지 않도록 처리. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- GET → POST, 엔드포인트 수정 (participants/nickname/validation) - 요청: searchParams → JSON body - 응답: isDuplicate 필드 제거 → 중복 시 에러 코드(P006) throw 방식으로 변경 - 네이밍 정리: checkNicknameDuplicate → validateNickname - Footer handleNext: isApiError + ERROR_CODES.DUPLICATE_NICKNAME 에러 핸들링 연결 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Input 컴포넌트는 value prop 없으면 internalValue(로컬 state)로 hasValue를 판단. RHF의 setValue는 native DOM 값을 직접 조작하므로 internalValue가 업데이트되지 않아 clear 버튼이 표시되지 않는 문제가 있었음. useWatch로 RHF 값을 구독해 value prop으로 내려주면 isControlled=true가 되어 hasValue가 실제 폼 값을 항상 정확하게 반영. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- queryOption.ts import 구문 한 줄로 정리 (린터) - NicknameStep Footer 에러 핸들링을 switch문으로 변경 (기존 패턴과 통일) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

gemini-code-assist · 2026-02-27T15:25:24Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자 참여 흐름의 닉네임 입력 단계를 대폭 개선하여, 사용자가 쉽고 편리하게 닉네임을 설정할 수 있도록 돕습니다. 무작위 닉네임 추천과 실시간 중복 확인 기능을 도입하여 입력 과정을 간소화하고, 여러 UI/UX 문제점을 해결하여 전반적인 사용성을 높였습니다. 또한, API 연동 및 관련 훅을 추가하여 기능 확장을 위한 기반을 마련했습니다.

Highlights

닉네임 기능 개선: 닉네임 입력 단계에서 무작위 닉네임 생성 및 중복 확인 기능을 추가하여 사용자 경험을 향상했습니다. 초기 닉네임 자동 설정, 새로고침 버튼, 그리고 닉네임 중복 확인 API 연동이 포함됩니다.
API 및 훅 추가: 참가자 API에 닉네임 사전 검증 엔드포인트와 관련 타입, 쿼리 키, 뮤테이션 옵션을 추가하고, 이를 활용하는 useValidateNickname 훅을 구현했습니다.
랜덤 닉네임 생성 로직: 중복 방지 로직을 포함한 useRandomNickname 훅을 개발하여 20개의 사전 정의된 닉네임 목록에서 무작위로 닉네임을 제공합니다.
UI/UX 개선 및 버그 수정: 닉네임 입력 필드의 새로고침 아이콘 클리핑 문제와 클리어 버튼 활성화 문제를 해결했으며, 뒤로가기 시 기존 입력값 유지 및 선호 음식 카테고리 완료 버튼에 로딩 상태를 추가했습니다.
에러 핸들링 및 코드 통일: 닉네임 중복 확인 API의 에러 핸들링을 구현하고, 린터 포맷팅 및 에러 핸들링 패턴을 기존 코드와 통일하여 코드 품질을 개선했습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

src/apis/participant/api.ts
- ValidateNicknameRequest 타입을 임포트했습니다.
- 닉네임 사전 검증 API인 validateNickname 함수를 추가했습니다.
src/apis/participant/index.ts
- ValidateNicknameRequest 타입을 익스포트했습니다.
- validateNickname API를 익스포트했습니다.
src/apis/participant/queryKey.ts
- 닉네임 유효성 검사를 위한 validateNickname 쿼리 키를 추가했습니다.
src/apis/participant/queryOption.ts
- validateNickname API와 ValidateNicknameRequest 타입을 임포트했습니다.
- 닉네임 유효성 검사를 위한 validateNickname 뮤테이션 옵션을 추가했습니다.
src/apis/participant/type.ts
- 닉네임 사전 검증 요청을 위한 ValidateNicknameRequest 인터페이스를 정의했습니다.
src/constants/nickname.ts
- 20개의 무작위 닉네임 목록을 담은 RANDOM_NICKNAMES 상수를 추가했습니다.
src/hooks/apis/participant/index.ts
- useValidateNickname 훅을 익스포트했습니다.
src/hooks/apis/participant/useValidateNickname.ts
- 닉네임 사전 검증 뮤테이션을 위한 useValidateNickname 훅을 추가했습니다.
src/hooks/gathering/index.ts
- useRandomNickname 훅을 익스포트했습니다.
src/hooks/gathering/useOpinionForm.tsx
- useCreateParticipant 훅에서 isPending 상태를 가져오도록 수정했습니다.
- 폼 제출 상태를 나타내는 isPending을 반환 객체에 추가했습니다.
src/hooks/gathering/useRandomNickname.ts
- 무작위 닉네임을 생성하고 관리하는 useRandomNickname 훅을 추가했습니다.
- 닉네임 풀을 섞고 중복을 방지하는 로직을 포함했습니다.
src/pageComponents/gathering/opinion/form/NicknameStep.tsx
- useEffect, useParams, useRandomNickname, useValidateNickname, ERROR_CODES, isApiError, toast를 임포트했습니다.
- 새로고침 아이콘(RefreshIcon) 컴포넌트를 추가했습니다.
- 닉네임 입력 필드에 value prop을 추가하여 controlled 컴포넌트로 만들었습니다.
- 닉네임 입력 필드에 클리어 버튼과 새로고침 버튼을 추가했습니다.
- 컴포넌트 마운트 시 초기 랜덤 닉네임을 설정하고, 뒤로가기 시 기존 값을 유지하도록 useEffect 로직을 추가했습니다.
- 다음 버튼 클릭 시 닉네임 중복 확인 API를 호출하고 에러를 처리하는 로직을 추가했습니다.
- 다음 버튼의 disabled 상태를 isValid와 isPending에 따라 동적으로 설정했습니다.
src/pageComponents/gathering/opinion/form/OpinionFormPage.tsx
- useOpinionForm 훅에서 isPending 상태를 가져오도록 수정했습니다.
- PreferenceStep.Footer 컴포넌트에 isPending prop을 전달하도록 수정했습니다.
src/pageComponents/gathering/opinion/form/PreferenceStep.tsx
- DotsLoader 컴포넌트를 임포트했습니다.
- Footer 컴포넌트의 prop으로 isPending을 추가했습니다.
- 완료 버튼의 disabled 상태를 isPending에 따라 동적으로 설정했습니다.
- 완료 버튼 클릭 시 isPending 상태에 따라 DotsLoader를 표시하도록 수정했습니다.

Activity

제공된 정보에는 PR 생성 이후의 구체적인 활동(댓글, 리뷰 등)이 포함되어 있지 않습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

코드 변경 사항을 검토했으며, 몇 가지 개선점을 발견했습니다. useRandomNickname 훅의 성능, NicknameStep 컴포넌트의 스타일 가이드 준수 및 에러 핸들링 로직의 가독성 관련 사항입니다. 자세한 내용은 개별 주석을 확인해주세요.

src/hooks/gathering/useRandomNickname.ts

src/pageComponents/gathering/opinion/form/NicknameStep.tsx

RookieAND · 2026-02-27T15:28:29Z

src/constants/nickname.ts

@@ -0,0 +1,22 @@
+export const RANDOM_NICKNAMES = [


RookieAND · 2026-02-27T15:28:51Z

src/hooks/gathering/useRandomNickname.ts

+
+import { RANDOM_NICKNAMES } from "#/constants/nickname";
+
+const shuffle = <T>(arr: T[]): T[] => {


https://es-toolkit.dev/reference/array/shuffle.html 이거 써보는 것도 좋아

반영 완료 ! (fa59fb0)

## [2.0.0-beta.11](v2.0.0-beta.10...v2.0.0-beta.11) (2026-02-27) ### Features * 닉네임 입력 단계 랜덤 닉네임 및 중복 확인 기능 추가 ([#123](#123)) ([4cf0323](4cf0323))

## [2.1.0](v2.0.0...v2.1.0) (2026-02-27) ### Features * 닉네임 입력 단계 랜덤 닉네임 및 중복 확인 기능 추가 ([#123](#123)) ([4cf0323](4cf0323))

youngminss and others added 20 commits February 24, 2026 02:12

chore: add .worktrees to gitignore

f637b2f

Merge branch 'develop' of https://github.com/Nexters/hereeat into dev…

394d99d

…elop

Merge branch 'develop' of https://github.com/Nexters/hereeat into dev…

ced1a95

…elop

Merge branch 'develop' of https://github.com/Nexters/hereeat into dev…

5ebf403

…elop

Merge branch 'develop' of https://github.com/Nexters/hereeat into dev…

86cc072

…elop

Merge branch 'develop' of https://github.com/Nexters/hereeat into dev…

c9427a5

…elop

Merge branch 'develop' of https://github.com/Nexters/hereeat into dev…

4f0d967

…elop

feat: 랜덤 닉네임 상수 추가

942e2c6

feat: useRandomNickname 훅 추가 - 중복 방지 랜덤 닉네임 생성

172b772

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: NicknameStep 랜덤 닉네임 초기값 및 리프레시 버튼 추가

0213e02

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: participant API에 닉네임 중복 확인 엔드포인트 추가 (TODO: 서버 엔드포인트 확인 필요)

105b904

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: useCheckNicknameDuplicate 훅 추가

1467d74

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: NicknameStep 다음 버튼에 닉네임 중복 확인 API 연결

04d4972

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

chore: 린터 포맷팅 및 에러 핸들링 패턴 통일

cd63ff1

- queryOption.ts import 구문 한 줄로 정리 (린터) - NicknameStep Footer 에러 핸들링을 switch문으로 변경 (기존 패턴과 통일) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: 선호 음식 카테고리 입력 완료 버튼 로딩 상태 추가

4a24657

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

youngminss added the ✨ Feature 기능 개발 label Feb 27, 2026

youngminss self-assigned this Feb 27, 2026

youngminss requested a review from RookieAND February 27, 2026 15:24

github-actions bot added ✨ Feature 기능 개발 ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 and removed ✨ Feature 기능 개발 labels Feb 27, 2026

gemini-code-assist bot reviewed Feb 27, 2026

View reviewed changes

src/hooks/gathering/useRandomNickname.ts Outdated Show resolved Hide resolved

src/pageComponents/gathering/opinion/form/NicknameStep.tsx Show resolved Hide resolved

src/pageComponents/gathering/opinion/form/NicknameStep.tsx Show resolved Hide resolved

RookieAND approved these changes Feb 27, 2026

View reviewed changes

refactor: suffle 함수 순수 구현 -> 라이브러리 모듈 활용

fa59fb0

youngminss merged commit 4cf0323 into develop Feb 27, 2026
8 checks passed

github-actions bot pushed a commit that referenced this pull request Feb 27, 2026

chore(release): 2.1.0 [skip ci]

ce1c7fa

## [2.1.0](v2.0.0...v2.1.0) (2026-02-27) ### Features * 닉네임 입력 단계 랜덤 닉네임 및 중복 확인 기능 추가 ([#123](#123)) ([4cf0323](4cf0323))

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 닉네임 입력 단계 랜덤 닉네임 및 중복 확인 기능 추가#123

feat: 닉네임 입력 단계 랜덤 닉네임 및 중복 확인 기능 추가#123
youngminss merged 21 commits intodevelopfrom
feature/nickname-step-enhancement

youngminss commented Feb 27, 2026

Uh oh!

gemini-code-assist bot commented Feb 27, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RookieAND Feb 27, 2026

Uh oh!

RookieAND Feb 27, 2026

Uh oh!

youngminss Feb 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		import { RANDOM_NICKNAMES } from "#/constants/nickname";

		const shuffle = <T>(arr: T[]): T[] => {

Conversation

youngminss commented Feb 27, 2026

🎯 PR 제목

📑 작업 상세 내역

🙏 리뷰 요청 사항

📃 참고 자료

🖼️ 작업 결과물

Uh oh!

gemini-code-assist bot commented Feb 27, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

RookieAND Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

RookieAND Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

youngminss Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants