feat: 추천 결과 생성 대기 페이지 및 애니메이션 구현

[RookieAND]

🎯 PR 제목

feat: 추천 결과 생성 대기 페이지 및 애니메이션 구현

📑 작업 상세 내역

• 기능 추가

  • 추천 결과 생성 대기 시 두구두구 애니메이션을 표시합니다
  • 젓가락 애니메이션을 개선합니다 (±18° 회전, 0.4s 속도)

• 버그 수정

  • SSE 이벤트와 state update의 race condition을 해결합니다
  • 중복 결과 생성 요청을 방지합니다
  • navigation 전 데이터 준비 상태를 검증합니다

• 리팩토링

  • ResultLoading* → ResultGenerating*으로 네이밍을 변경합니다
  • 상태 처리 로직을 switch-case로 개선합니다

🙏 리뷰 요청 사항

• SSE 이벤트와 state update의 타이밍 처리가 올바르게 동작하는지 확인해주세요
• 추천 결과 생성 대기 UX(두구두구 애니메이션)가 자연스러운지 검토해주세요
• race condition 해결 방식(isProcessingRef 사용)이 적절한지 검토해주세요

📃 참고 자료

• 관련 커밋:
  • b06d2f1 - 결과 완료 시에도 애니메이션 표시
  • cafea72 - 젓가락 애니메이션 각도 조정
  • a7e7d4b - switch-case 리팩토링
  • 18d7a12 - 추천 결과 생성 플로우 개선
  • feff116 - 네이밍 변경 및 애니메이션 개선

🖼️ 작업 결과물

• 추천 결과 생성 대기 페이지 (ResultGeneratingPage)
  • 두구두구 텍스트 + 애니메이션 젓가락
  • 꼬르륵 말풍선 효과
• 2.5초 드럼롤 애니메이션 후 결과 페이지 전환

[gemini-code-assist]

Summary of Changes

Hello @RookieAND, 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은 추천 결과 생성 대기 페이지와 애니메이션을 구현하여 사용자 경험을 개선하고, 기존 의견 수렴 플로우의 안정성을 강화합니다. SSE 이벤트 처리의 경쟁 조건을 해결하고 중복 요청을 방지하며, API 에러 발생 시 사용자에게 더 명확한 피드백과 적절한 페이지 전환을 제공하도록 전역 및 특정 페이지 에러 핸들링을 개선했습니다. 또한, 코드 가독성과 유지보수성을 높이기 위한 대규모 리팩토링과 UI/UX 개선이 포함되어 있습니다.

Highlights

• 기능 추가: 추천 결과 생성 대기 페이지 및 애니메이션(두구두구, 젓가락, 꼬르륵 말풍선)이 구현되었습니다.
• 버그 수정: SSE 이벤트와 상태 업데이트 간의 경쟁 조건이 해결되었고, 중복 결과 생성 요청 및 내비게이션 전 데이터 검증 문제가 수정되었습니다.
• 리팩토링: 결과 로딩 관련 네이밍이 ResultLoading*에서 ResultGenerating*으로 변경되었고, 상태 처리 로직이 switch-case로 개선되었습니다. 타입 시스템이 enum에서 as const 패턴으로 전환되었으며, 의견 수렴 페이지 컴포넌트 구조가 개선되었습니다.
• 에러 핸들링: 전역 에러 페이지 및 404 페이지가 추가되었고, API 에러 발생 시 적절한 페이지로 리다이렉트 또는 notFound 처리되도록 개선되었습니다.
• UI/UX 개선: 인원 수 선택 시 시각적 피드백이 추가되었고, 결과 대기 페이지 내 공유 버튼 스타일이 수정되었으며, 음식 카테고리 일러스트레이터가 업데이트되었습니다.

🧠 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
  • 2.0.0-beta.5 버전으로 업데이트되었습니다.
  • 모임 인원 초과 및 결과 생성 완료 시 Toast 커스텀 기능이 추가되었습니다.
  • 결과 대기 페이지 내 공유 버튼 스타일이 Tertiary로 수정되었습니다.
  • 음식 카테고리 일러스트레이터가 Figma 최신 시안으로 수정되었습니다.
  • PeopleIllustration 캐릭터 배치 및 구조가 개선되었습니다.
  • 1, 3순위를 선택했으나 2순위를 선택하지 않았을 경우 Validation을 막지 않았던 문제가 수정되었습니다.
  • OpinionForm 필드 이름이 변경되고 타입 시스템이 enum에서 as const 패턴으로 전환되었습니다.
  • opinion 페이지 컴포넌트 구조가 개선되고 로직이 통합되었습니다.

Ignored Files

• Ignored by pattern: .gemini/** (1)
  • .gemini/styleguide.md
• Ignored by pattern: .github/workflows/** (2)
  • .github/workflows/development-deploy.yml
  • .github/workflows/pr-auto-labeler.yml

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입니다. 전반적으로 변경 사항이 잘 구조화되어 있지만, 훅의 상태 관리 및 스타일 가이드 위반과 관련된 몇 가지 문제를 발견했습니다.

특히 useProceedRecommendResult 훅과 PendingPage의 SSE 이벤트 핸들러에서 stale closure로 인해 발생할 수 있는 경쟁 상태 및 잘못된 타이머 로직이 있습니다. 또한 새로 추가된 컴포넌트에서 저장소 스타일 가이드를 위반하는 하드코딩된 색상과 정의되지 않은 타이포그래피 토큰 사용 사례를 여러 곳에서 발견했습니다. 자세한 수정 제안은 각 리뷰 코멘트를 확인해주세요.

[gemini-code-assist]

현재 onResultComplete 함수에서 NAVIGATION_DELAY를 그대로 사용하여 항상 2.5초를 기다리도록 되어 있습니다. 이로 인해 proceed 함수에서 기록한 startTime이 무시되고, 애니메이션이 시작된 시점부터 최소 2.5초를 보장하려는 의도와 다르게 동작할 수 있습니다.

useServerSentEvent 훅의 구현상 onResultComplete 콜백은 stale closure가 될 수 있으므로, startTime을 useRef로 관리하여 항상 최신 값을 참조하도록 수정하는 것이 좋습니다. proceed 함수 내에서 setProceedState를 호출할 때 startTimeRef.current도 함께 업데이트해야 합니다.

수정 제안:

1. 훅 최상단에 const startTimeRef = useRef(0);를 추가합니다.
2. proceed 함수 내에서 setProceedState를 호출하는 모든 위치에 startTimeRef.current = Date.now();을 추가합니다.
3. 아래와 같이 onResultComplete 함수를 수정합니다.

 	const onResultComplete = useCallback(async () => {
 		if (!isProcessingRef.current) {
 			return;
 		}
 
 		const elapsedTime = Date.now() - startTimeRef.current;
 		const remaining = Math.max(0, NAVIGATION_DELAY - elapsedTime);
 
 		setTimeout(async () => {
 			const { data: latestResult } = await fetchRecommendResult();
 
 			if (latestResult?.status === RecommendationResultStatus.COMPLETED) {
 				router.push(`/gathering/${accessKey}/opinion/result`);
 				return;
 			}
 
 			isProcessingRef.current = false;
 			setProceedState({ status: PROCEED_STATUS.IDLE });
 			toast.warning(
 				"추천 결과가 아직 준비되지 않았습니다. 잠시 후 다시 시도해주세요.",
 			);
 		}, remaining);
 	}, [accessKey, router, fetchRecommendResult]);

[gemini-code-assist]

SVG 내부에 fill, stroke, stopColor 등으로 색상이 하드코딩되어 있습니다. 스타일 가이드(라인 315-317, 489)에서는 하드코딩된 색상 값 대신 디자인 토큰 사용을 권장합니다.

SVG를 컴포넌트로 다루고 있으므로, 색상 값을 props로 받거나 CSS 변수를 활용하여 동적으로 주입하는 방식을 고려해볼 수 있습니다. 예를 들어, fill="var(--color-primary)"와 같이 사용할 수 있습니다. 이렇게 하면 디자인 시스템과의 일관성을 유지하고 향후 색상 변경에 유연하게 대처할 수 있습니다.

References

1. 스타일링 시 하드코딩된 값을 사용하는 대신 항상 디자인 토큰을 사용해야 합니다. ^(link)