refactor: PeopleIllustration 캐릭터 배치 및 구조 개선#112
Merged
Conversation
- 좌상단 기준 좌표 시스템으로 변경 (transform: translate(-50%, -50%) 제거) - 4~10명 사다리꼴 배치로 겹침 최소화 (뒷줄로 갈수록 간격 증가) - 점진적 간격 증가 패턴 적용 (약 50% 증가율) - PeopleIllustration.util.ts 제거 및 로직 인라인화 - 컴포넌트 파일 구조를 3개로 단순화 (Character.tsx, PeopleIllustration.tsx, PeopleIllustration.constants.ts) - 개별 캐릭터 SVG 파일 추가 (character_1~10.svg) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- 4명: 1열 간격 60px→70px, 2열 간격 100px→150px (사다리꼴 효과 강화) - 8명: 1열 간격 60px→65px, 2열 간격 80px→95px (점진적 증가 비율 개선) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
github-actions
bot
added
🔨 Refactor
Contributor
Summary of ChangesHello @RookieAND, I'm Gemini Code Assist1! 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은 Highlights
🧠 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
Ignored Files
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
PeopleIllustration 컴포넌트를 리팩토링하여 캐릭터 배치 및 애니메이션 로직을 개선한 점이 인상적입니다. 특히 motion을 활용하여 캐릭터가 추가되고 제거될 때의 애니메이션을 부드럽게 처리한 부분이 좋습니다.
코드 리뷰에서 몇 가지 스타일 가이드 위반 사항과 개선점을 발견하여 코멘트를 남겼습니다.
- 상태 업데이트 로직: 렌더링 함수 내에서 직접 상태를 업데이트하는 부분은
useEffect를 사용하도록 수정이 필요합니다. (critical) - 스타일 가이드 준수:
Props타입 정의 시interface대신type을 사용해야 합니다.- 절대 경로 에일리어스(
#/)를 사용해야 하는 곳에 상대 경로가 사용되었습니다. - 폴더명은
camelCase규칙을 따라야 하지만,PeopleIllustration은PascalCase로 되어 있습니다. - 상수 파일명 또한
camelCase규칙을 따라야 합니다. (peopleIllustration.constants.ts) - 디자인 토큰이 아닌 하드코딩된 크기 값이 사용된 부분이 있습니다.
- 상수 관리: 여러 곳에서 사용되는 상수는
constants.ts파일로 옮겨 중앙에서 관리하는 것이 좋습니다.
전반적으로 컴포넌트 구조가 더 명확해지고 확장성이 좋아진 것 같습니다. 제안된 수정 사항들을 반영하면 코드의 일관성과 유지보수성이 더욱 향상될 것입니다.
src/pageComponents/gathering/create/PeopleIllustration/PeopleIllustration.tsx
Outdated
Show resolved
Hide resolved
src/pageComponents/gathering/create/PeopleIllustration/Character.tsx
Outdated
Show resolved
Hide resolved
Comment on lines
+21
to
+22
| const CHARACTER_WIDTH = 84; | ||
| const CHARACTER_HEIGHT = 90; |
Contributor
There was a problem hiding this comment.
CHARACTER_WIDTH와 CHARACTER_HEIGHT 상수가 Character.tsx 컴포넌트 내부에 지역적으로 정의되어 있습니다. 이 값들은 캐릭터의 위치를 계산하는 데 사용되며, PeopleIllustration.constants.ts 파일에서도 주석으로 참조되고 있습니다.
여러 파일에서 사용되거나 참조되는 핵심적인 상수이므로, PeopleIllustration.constants.ts 파일로 옮겨서 중앙에서 관리하는 것이 유지보수 측면에서 더 좋습니다.
src/pageComponents/gathering/create/PeopleIllustration/PeopleIllustration.tsx
Outdated
Show resolved
Hide resolved
src/pageComponents/gathering/create/PeopleIllustration/PeopleIllustration.tsx
Outdated
Show resolved
Hide resolved
- PeopleIllustration → PeopleGroup - Character → PersonCharacter - 관련 Props 타입명도 함께 변경 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
github-actions bot
pushed a commit
that referenced
this pull request
Feb 27, 2026
## [2.0.0](v1.5.1...v2.0.0) (2026-02-27) ### ⚠ BREAKING CHANGES * OpinionForm field names changed Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * refactor: update schema field names and exports - foodCategorySchema → categorySchema - dislikedFoodSchema → dislikedCategoriesSchema - preferredMenusSchema → preferredCategoriesSchema - Update opinionFormSchema with new field names - Replace hardcoded "ANY" with CATEGORY.ANY * Schema field names changed Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * refactor: rename component files to use Category naming - FoodCard → CategoryCard - FoodCategoryCarousel → CategoryCarousel - DislikedFoodButton → DislikedCategoryButton Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * refactor: update component export names - FoodCard → CategoryCard - FoodCategoryCarousel → CategoryCarousel - DislikedFoodButton → DislikedCategoryButton - Update component function names to match new file names - Internal logic unchanged (will be updated in next PR) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * refactor: update import references to use new constant names - Update all components to use new constant names: * RANKS → RANK_LIST * RANK_LABELS → RANK_LABEL * FOOD_CATEGORIES → CATEGORY_LIST * FOOD_CATEGORY_LABEL → CATEGORY_LABEL * FOOD_CATEGORY_VALUES → CATEGORY_VALUES * dislikedFoodSchema → dislikedCategoriesSchema * preferredMenusSchema → preferredCategoriesSchema - Update type imports: * FoodCategory → Category - Update form field references: * dislikedFoods → dislikedCategories * preferredMenus → preferredCategories - Fix component imports after file renames: * FoodCategoryCarousel → CategoryCarousel * DislikedFoodButton → DislikedCategoryButton This ensures the build succeeds after type system changes. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * style: run prettier format - Format code according to project prettier rules - No logic changes, only formatting Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> ### Features * 404, 500 에러 페이지 추가 ([#107](#107)) ([e9e5772](e9e5772)) * opinion 랜딩 페이지 UI 업데이트 (로고·lottie·footer) ([#120](#120)) ([2817c50](2817c50)) * SSE Event Registry 시스템 구현 및 마이그레이션 ([#119](#119)) ([178c79c](178c79c)) * SSE 기반 실시간 모임 현황 업데이트 구현 ([#87](#87)) ([0d220e0](0d220e0)) * 결과 페이지 - 투표 결과 섹션 구현 ([#106](#106)) ([c633225](c633225)) * 과반수 이상 의견 제출 시 추천 결과 생성 관련 API, Hook 추가 ([#103](#103)) ([5b31eec](5b31eec)), closes [#105](#105) * 인원 수 선택 시 시각적 피드백 추가 ([e9f6de6](e9f6de6)) * 추천 결과 API response 타입 업데이트 ([#100](#100)) ([1d046ab](1d046ab)), closes [#101](#101) [#102](#102) * 추천 결과 생성 대기 페이지 및 애니메이션 구현 ([#118](#118)) ([a720a76](a720a76)) * 취향 요약 카드 추가 ([#104](#104)) ([816fa96](816fa96)) ### Bug Fixes * 1, 3순위를 선택했으나 2순위를 선택하지 않았을 경우 Validation 을 막지 않았던 문제 수정 ([#113](#113)) ([22e58e8](22e58e8)) * GitHub Actions 워크플로우 개선 및 스타일 가이드 업데이트 ([#91](#91)) ([e6c009e](e6c009e)) * 결과 대기 페이지 내 공유 버튼 스타일을 Tertiary 로 수정 ([#115](#115)) ([a63ddd1](a63ddd1)) * 결과 페이지 - 상단 취향 요약 섹션, 하단 투표 결과 선호 카테고리 노출 순서 로직 수정 ([#117](#117)) ([f5c4a1c](f5c4a1c)) * 모임 인원 초과 및 결과 생성 완료 시 Toast 커스텀 기능 추가 ([#116](#116)) ([6088935](6088935)) * 음식 카테고리 일러스트레이터를 Figma 내 최신 시안으로 수정 ([#114](#114)) ([18f9cc3](18f9cc3)) ### Code Refactoring * opinion 페이지 컴포넌트 구조 개선 및 로직 통합 ([#109](#109)) ([a76f75f](a76f75f)) * PeopleIllustration 캐릭터 배치 및 구조 개선 ([#112](#112)) ([ae95b72](ae95b72)) * ProgressBar 컴포넌트 UI 개선 및 코드 최적화 ([#122](#122)) ([c73de1d](c73de1d)) * SSE 이벤트를 recommend-result-created로 변경 ([#121](#121)) ([222e613](222e613)) * 타입 시스템 리팩토링 - enum을 as const 패턴으로 전환 ([#110](#110)) ([d427378](d427378)), closes [#111](#111)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 PR 제목
refactor: PeopleIllustration 캐릭터 배치 및 구조 개선
📑 작업 상세 내역
🙏 리뷰 요청 사항
📃 참고 자료
src/pageComponents/gathering/create/PeopleIllustration/(신규 디렉토리)public/images/people/character_1~10.svg(신규 SVG 파일)src/components/illustrations/PeopleIllustration.tsx(삭제)🖼️ 작업 결과물
2026-02-25.4.44.54.mov