refactor: Figma 디자인에 맞춰 애니메이션 및 캐릭터 배치 업데이트

[RookieAND]

🎯 PR 제목

refactor: Figma 디자인에 맞춰 애니메이션 및 캐릭터 배치 업데이트

📑 작업 상세 내역

• 리팩토링
  • ResultGeneratingIllustration 컴포넌트의 젓가락 애니메이션을 대칭으로 수정합니다
  • PeopleGroup 컴포넌트의 1~10명 캐릭터 위치를 Figma 디자인 시안과 동일하게 업데이트합니다
  • 캐릭터 배치를 불규칙하고 자연스럽게 개선합니다

🙏 리뷰 요청 사항

• 젓가락 애니메이션이 자연스럽고 대칭적으로 동작하는지 확인해주세요
• 각 인원수(1~10명)별 캐릭터 배치가 Figma 디자인과 일치하는지 검증해주세요
• /test/people 테스트 페이지에서 1~10명을 순차적으로 선택하며 애니메이션과 배치를 확인해주세요

📃 참고 자료

• Figma 디자인: 모임 인원 입력 화면 시안
• 테스트 페이지: /test/people (PeopleGroup 테스트)
• 테스트 페이지: /test (ResultGeneratingIllustration 테스트)
• 수정된 파일:
  • src/components/illustrations/ResultGeneratingIllustration.tsx
  • src/pageComponents/gathering/create/PeopleGroup.tsx

🖼️ 작업 결과물

• ResultGeneratingIllustration: 젓가락이 좌우 대칭으로 ±3.52도 회전하는 애니메이션
• PeopleGroup: 1~10명 각각의 캐릭터 위치가 Figma 디자인 기준으로 정확하게 배치됨
• 테스트 페이지: /test/people에서 인터랙티브하게 확인 가능

[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은 UI/UX 개선을 목표로 Figma 디자인 가이드라인에 맞춰 두 가지 주요 시각적 요소를 리팩토링합니다. ResultGeneratingIllustration 컴포넌트의 젓가락 애니메이션은 더욱 부드럽고 대칭적으로 동작하도록 수정되었으며, PeopleGroup 컴포넌트의 캐릭터 배치 로직은 다양한 인원수에 대해 더욱 자연스럽고 시각적으로 매력적인 구도를 제공하도록 완전히 재구성되었습니다. 이는 사용자 경험의 일관성과 시각적 완성도를 높이는 데 기여합니다.

Highlights

• 젓가락 애니메이션 대칭 수정: ResultGeneratingIllustration 컴포넌트 내 젓가락 애니메이션의 회전 원점과 각도가 Figma 디자인에 맞춰 대칭적으로 조정되었습니다. 기존의 큰 회전 각도(-18도, 18도)가 더 자연스러운 ±3.52도로 변경되었습니다.
• 캐릭터 배치 업데이트: PeopleGroup 컴포넌트에서 1명부터 10명까지의 캐릭터 배치 좌표가 Figma 디자인 시안에 따라 전면적으로 업데이트되었습니다. 이는 캐릭터들이 더욱 불규칙하고 자연스럽게 보이도록 개선합니다.

🧠 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/components/illustrations/ResultGeneratingIllustration.tsx
  • 젓가락 애니메이션의 회전 원점(originX, originY)이 조정되었습니다.
  • 젓가락 애니메이션의 회전 각도가 기존 ±18도에서 ±3.52도로 변경되어 대칭성을 확보했습니다.
• src/pageComponents/gathering/create/PeopleGroup.tsx
  • PEOPLE_POSITIONS 객체 내 1명부터 10명까지의 모든 캐릭터 배치 좌표가 Figma 디자인에 맞춰 업데이트되었습니다.
  • 캐릭터 배치가 더욱 불규칙하고 자연스럽게 보이도록 개선되었습니다.

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

Figma 디자인에 맞춰 애니메이션과 캐릭터 배치를 업데이트하는 리팩토링이 진행되었습니다. PeopleGroup.tsx 파일에서 PEOPLE_POSITIONS 상수에 as const를 적용하여 타입 안정성을 높이고 불변성을 보장하는 것을 제안합니다. 이는 프로젝트 코드 스타일 가이드에 따른 권장 사항입니다.

[gemini-code-assist]

스타일 가이드에 따라 PEOPLE_POSITIONS와 같은 상수 객체에는 as const를 사용하는 것이 좋습니다. 이렇게 하면 객체와 모든 중첩된 속성이 readonly로 추론되어, 런타임에 의도치 않은 변경을 방지하고 타입 안정성을 높일 수 있습니다.

export const PEOPLE_POSITIONS = {
	1: [{ x: 187.5, y: 90 }],

	2: [
		{ x: 127.5, y: 90 },
		{ x: 247.5, y: 90 },
	],

	3: [
		{ x: 102.5, y: 70 },
		{ x: 187.5, y: 70 },
		{ x: 272.5, y: 70 },
	],

	4: [
		{ x: 256, y: 54 },
		{ x: 114, y: 63 },
		{ x: 225, y: 117 },
		{ x: 151, y: 118 },
	],

	5: [
		{ x: 192, y: 48 },
		{ x: 252, y: 56 },
		{ x: 114, y: 63 },
		{ x: 225, y: 119 },
		{ x: 151, y: 119 },
	],

	6: [
		{ x: 108, y: 28 },
		{ x: 180, y: 52 },
		{ x: 265, y: 22 },
		{ x: 78, y: 98 },
		{ x: 195, y: 118 },
		{ x: 285, y: 95 },
	],

	7: [
		{ x: 187.5, y: 25 },
		{ x: 275, y: 40 },
		{ x: 100, y: 33 },
		{ x: 125, y: 110 },
		{ x: 200, y: 75 },
		{ x: 245, y: 115 },
		{ x: 210, y: 135 },
	],

	8: [
		{ x: 85, y: 48 },
		{ x: 165, y: 25 },
		{ x: 245, y: 68 },
		{ x: 305, y: 35 },
		{ x: 50, y: 105 },
		{ x: 135, y: 120 },
		{ x: 215, y: 88 },
		{ x: 285, y: 110 },
	],

	9: [
		{ x: 160, y: 35 },
		{ x: 240, y: 52 },
		{ x: 300, y: 50 },
		{ x: 105, y: 45 },
		{ x: 50, y: 110 },
		{ x: 180, y: 130 },
		{ x: 100, y: 145 },
		{ x: 230, y: 142 },
		{ x: 310, y: 132 },
	],

	10: [
		{ x: 160, y: 35 },
		{ x: 245, y: 55 },
		{ x: 65, y: 25 },
		{ x: 310, y: 30 },
		{ x: 120, y: 95 },
		{ x: 210, y: 130 },
		{ x: 55, y: 80 },
		{ x: 145, y: 145 },
		{ x: 290, y: 105 },
		{ x: 240, y: 150 },
	],
} as const;

References

1. 상수 객체에는 as const를 사용하여 불변성을 보장하고 더 정확한 타입을 추론해야 합니다. ^(link)