feat: 결과 페이지 상단 영역 v2 업데이트

[youngminss]

🎯 PR 제목

feat: 결과 페이지 상단 영역 v2 업데이트

📑 작업 상세 내역

• 기능 추가
  • 결과 페이지 헤더를 모임 정보 subtitle과 새 타이틀로 변경합니다
  • 모임 날짜("5월 28일"), 지역("홍대입구역"), 시간대("저녁") 정보를 동적으로 표시합니다
  • 페이지 타이틀을 "요기잇의 추천 맛집"에서 "여러분의 취향을 조합해보니..."로 변경합니다
  • date-fns의 parse/format을 활용한 타임존 안전한 날짜 포맷팅을 적용합니다

🙏 리뷰 요청 사항

• date-fns parse를 활용한 날짜 포맷팅이 올바른지 확인해주세요.
• gathering 데이터가 없는 경우의 처리를 검토해주세요.

📃 참고 자료

• Figma: node 1834:25853
• 변경 파일: src/pageComponents/gathering/opinion/ResultView.tsx

🖼️ 작업 결과물

• 결과 페이지 상단에 모임 정보와 새로운 타이틀이 표시됩니다.

[gemini-code-assist]

Summary of Changes

Hello @youngminss, 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은 결과 페이지의 상단 영역을 개선하여 사용자에게 더 풍부하고 개인화된 정보를 제공합니다. 모임의 핵심 정보를 동적으로 표시하고, 페이지 타이틀을 더욱 매력적으로 변경함으로써 사용자 경험을 향상시키는 데 중점을 두었습니다. date-fns를 도입하여 날짜 처리의 안정성을 확보했습니다.

Highlights

• 결과 페이지 헤더 업데이트: 결과 페이지 상단 영역의 헤더를 모임 정보(날짜, 지역, 시간대)를 포함하는 서브타이틀과 새로운 메인 타이틀로 변경했습니다.
• 동적 모임 정보 표시: 모임의 예정된 날짜, 지역, 시간대 정보를 동적으로 가져와 '5월 28일 홍대입구역 저녁 약속'과 같은 형식으로 표시하도록 구현했습니다.
• 페이지 타이틀 변경: 기존 '요기잇의 추천 맛집' 타이틀을 '여러분의 취향을 조합해보니...'로 변경하여 사용자에게 더 몰입감 있는 메시지를 전달합니다.
• 날짜 포맷팅 개선: date-fns 라이브러리의 parse 및 format 함수를 활용하여 타임존에 안전한 날짜 포맷팅 로직을 적용했습니다.

🧠 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/pageComponents/gathering/opinion/ResultView.tsx
  • 상수 REGION_LABEL, TIME_SLOT_LABEL 및 date-fns의 parse, format 함수를 임포트했습니다.
  • 날짜 문자열을 'M월 d일' 형식으로 포맷하는 formatScheduledDate 유틸리티 함수를 추가했습니다.
  • 기존 h1 헤더를 모임 정보 서브타이틀과 새로운 h1 타이틀을 포함하는 구조로 변경했습니다.

Activity

• 아직 기록된 활동이 없습니다.

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

결과 페이지 상단 영역 업데이트에 대한 리뷰입니다. date-fns를 사용한 날짜 포맷팅과 gathering 데이터 처리 관련하여 두 가지 개선점을 제안했습니다. formatScheduledDate 함수가 유효하지 않은 날짜 문자열에 대해 더 안정적으로 동작하도록 수정하고, gathering 데이터가 없을 경우에도 앱이 중단되지 않도록 조건부 렌더링을 추가하는 것이 좋겠습니다.

[gemini-code-assist]

date-fns의 parse 함수는 유효하지 않은 날짜 문자열에 대해 Invalid Date 객체를 반환할 수 있고, 이 객체를 format 함수에 전달하면 런타임 에러가 발생합니다. try...catch 블록을 추가하여 예기치 않은 데이터 형식으로 인한 앱 충돌을 방지하는 것이 좋습니다.

const formatScheduledDate = (dateStr: string): string => {
	try {
		const date = parse(dateStr, "yyyy-MM-dd", new Date());
		return format(date, "M월 d일");
	} catch {
		console.error(`Invalid date string received: ${dateStr}`);
		return dateStr;
	}
};

[youngminss]

반영 (0b2a990)

[gemini-code-assist]

recommendationResult.gathering 데이터가 없는 경우를 처리해달라는 리뷰 요청 사항을 확인했습니다. 현재 코드에서는 gathering 객체가 없으면 scheduledDate 속성에 접근할 때 런타임 에러가 발생하여 앱이 중단될 수 있습니다. gathering 데이터가 있을 때만 모임 정보를 표시하도록 span 태그를 조건부 렌더링으로 감싸는 것이 안전합니다.

				<div className="ygi:flex ygi:flex-col ygi:gap-2 ygi:py-6">
					{recommendationResult.gathering && (
						<span className="ygi:caption-12-rg ygi:text-text-secondary">
							{formatScheduledDate(recommendationResult.gathering.scheduledDate)}{' '}
							{REGION_LABEL[recommendationResult.gathering.region]}{' '}
							{TIME_SLOT_LABEL[recommendationResult.gathering.timeSlot]} 약속
						</span>
					)}
					<h1 className="ygi:heading-22-bd ygi:text-text-primary">
						여러분의 취향을 조합해보니...
					</h1>
				</div>

[youngminss]

recommendationResult.gathering 이 nullable 한 케이스는 일단 없어서 조건부 렌더링 처리하지 않는다.
(단, 런타임 에러 가능성 불안함때문에 에러 로깅 도입할지 고민 필요)