fix: QA 피드백 반영 - UI 및 인터랙션 개선

[youngminss]

🎯 PR 제목

fix: QA 피드백 반영 - UI 및 인터랙션 개선

📑 작업 상세 내역

• 버그 수정
  • 의견 수합 퍼널 거리 입력 label을 길이 단위에서 시간 단위로 변경합니다
  • 의견 수합 퍼널 이름 입력 시 랜덤 닉네임인 경우 텍스트 색상을 placeholder 색상으로 처리합니다
  • 결과 페이지 요약 섹션 일러스트 이미지 크기를 조정합니다
  • 결과 페이지 투표 결과 선호 블록의 음식 카테고리 이미지 노출을 캐러셀에서 디졸브 방식으로 변경합니다
  • 모임 생성 완료 페이지 중앙 일러스트를 뷰포트 크기에 따라 반응형으로 조정합니다

🙏 리뷰 요청 사항

• 랜덤 닉네임 판별이 RANDOM_NICKNAMES_SET으로 올바르게 동작하는지 확인해주세요.
• 일러스트 반응형 처리가 다양한 디바이스 크기에서 의도대로 동작하는지 검토해주세요.
• 디졸브 트랜지션(800ms)의 자연스러움을 확인해주세요.

📃 참고 자료

🖼️ 작업 결과물

• 프로젝트 문서

[gemini-code-assist]

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은 QA 피드백을 반영하여 사용자 인터페이스와 인터랙션을 전반적으로 개선합니다. 의견 수합 퍼널의 거리 입력 방식과 랜덤 닉네임 표시를 명확하게 하고, 결과 및 모임 생성 완료 페이지의 시각적 요소를 최적화하여 사용자 경험을 향상시키는 데 중점을 두었습니다.

Highlights

• 의견 수합 퍼널 개선: 거리 입력 레이블이 길이 단위(예: 500m 내)에서 시간 단위(예: 도보 7분 내)로 변경되어 사용자 이해도를 높였습니다.
• 랜덤 닉네임 UI 개선: 의견 수합 퍼널에서 랜덤 닉네임을 입력할 경우, 텍스트 색상이 플레이스홀더 색상으로 처리되어 시각적으로 구분됩니다.
• 결과 페이지 UI 조정: 결과 페이지 요약 섹션의 일러스트 이미지 크기가 조정되었고, 투표 결과 선호 블록의 음식 카테고리 이미지가 캐러셀 방식에서 디졸브 방식으로 변경되어 더 부드러운 전환을 제공합니다.
• 모임 생성 완료 페이지 반응형 개선: 모임 생성 완료 페이지의 중앙 일러스트가 뷰포트 크기에 따라 반응형으로 조정되어 다양한 디바이스에서 최적화된 모습을 보여줍니다.

🧠 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

• CHANGELOG.md
  • 기존 changelog 항목들의 목록 기호(*에서 -)를 통일하고, 2.0.0-beta.11 버전의 닉네임 관련 기능 추가 항목을 업데이트했습니다.
• app/gathering/create/complete/[accessKey]/page.tsx
  • 모임 생성 완료 페이지의 레이아웃을 수정하여 중앙 일러스트가 뷰포트 크기에 따라 반응형으로 조정되도록 했습니다.
• src/components/illustrations/MeetingCompleteIllustration.tsx
  • MeetingCompleteIllustration 컴포넌트에 className prop을 추가하여 외부에서 스타일을 적용할 수 있도록 했습니다.
• src/components/inputField/Input.tsx
  • Input 컴포넌트에 inputClassName prop을 추가하여 내부 input 요소에 커스텀 클래스를 적용할 수 있도록 했습니다.
• src/constants/gathering/opinion/distance.ts
  • 의견 수합 퍼널의 거리 입력 레이블을 길이 단위에서 시간 단위(도보 시간)로 변경했습니다.
• src/constants/gathering/opinion/index.ts
  • 더 이상 사용되지 않는 DISTANCE_RANGE_LABEL 상수를 제거했습니다.
• src/constants/nickname.ts
  • 랜덤 닉네임 목록을 Set 형태로 RANDOM_NICKNAMES_SET으로 추가하여 효율적인 검색이 가능하도록 했습니다.
• src/pageComponents/gathering/opinion/form/NicknameStep.tsx
  • 랜덤 닉네임이 입력되었을 때 Input 필드의 텍스트 색상을 플레이스홀더 색상으로 변경하는 로직을 추가했습니다.
• src/pageComponents/gathering/opinion/result/TasteSummaryCard.tsx
  • 결과 페이지 요약 섹션의 캐릭터 일러스트 이미지 높이를 조정했습니다.
• src/pageComponents/gathering/opinion/result/VoteSummarySection.tsx
  • 투표 결과 선호 블록의 음식 카테고리 이미지 전환 방식을 캐러셀에서 디졸브(fade) 방식으로 변경하고, 전환 시간을 800ms로 설정했습니다.

Activity

• 랜덤 닉네임 판별 로직(RANDOM_NICKNAMES_SET)이 올바르게 동작하는지 확인 요청되었습니다.
• 일러스트 반응형 처리가 다양한 디바이스 크기에서 의도대로 동작하는지 검토 요청되었습니다.
• 디졸브 트랜지션(800ms)의 자연스러움에 대한 확인 요청되었습니다.

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.

Footnotes

1. 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

이번 PR의 UI 및 인터랙션 개선 사항을 검토했습니다. 한 가지 스타일 가이드 위반 사항을 발견했습니다. app/gathering/create/complete/[accessKey]/page.tsx 파일에서 간격에 하드코딩된 픽셀 값을 사용하고 있어, 이를 디자인 토큰으로 변경해야 합니다.

[gemini-code-assist]

ygi:py-[70px] 클래스에 하드코딩된 픽셀 값이 사용되었습니다. 스타일 가이드에 따라 간격에는 디자인 토큰을 사용해야 합니다. 70px를 적절한 간격 토큰으로 교체해주세요.

References

1. 스타일 가이드에 따르면 간격, 색상, 타이포그래피에는 항상 디자인 토큰을 사용해야 하며 하드코딩된 값은 피해야 합니다(308-309행). ygi:gap-4와 같이 임의의 값을 사용하는 것이 금지된 예시가 명시되어 있습니다(316행). ^(link)