feat: 초대 페이지에 이벤트 이미지 추가

[corinthionia]

🔗 연관된 이슈 번호

close #171

✨ 어떤 기능을 개발했나요?

• 초대 페이지에 크리스마스 이벤트 이미지 적용
• 눈 내리는 효과 추가

✅ 어떻게 해결했나요?

📌 어떤 부분에 집중하여 리뷰해야 할까요?

❗️이 부분은 주의해 주세요! (Option)

🗂️ 참고자료 (Option)

🚀 결과 (Option)

Summary by CodeRabbit

• New Features

  • Added snowfall animation effect for holiday season.
  • Introduced Christmas-themed visual styling with seasonal backgrounds and updated design elements.

• UI/UX Improvements

  • Refined layout and spacing on the invite page.
  • Updated typography and component styling for better visual hierarchy.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request adds Christmas/holiday-themed visual changes to the invite and landing pages. It introduces seasonal asset swaps (background and calendar images), conditional rendering logic based on a date flag (isAfterXmas2025), adds a snowfall effect component, and restructures styling and layouts accordingly.

Changes

Cohort / File(s)	Summary
Dependency Addition package.json	Added react-snowfall ^2.4.0 dependency for snowfall visual effects.
Invite Page Styling Updates src/pages/invite/index.styles.ts	Restructured layout with flexbox; added isAfterXmas2025 prop to MainContainer and Participant for conditional background and text color; updated background images (invite_bg.webp and invite_bg_xmas.webp); adjusted container dimensions, positioning, and spacing; renamed ParticipantsWraaper to ParticipantsWrapper; updated typography and visual effects (filter, backdrop-filter).
Invite Page Component Logic src/pages/invite/index.tsx	Integrated Layout wrapper; added isAfterXmas2025 constant for date-based conditional rendering; conditionally render Snowfall component; swap calendar images and text based on date flag; pass isAfterXmas2025 prop to MainContainer and Participant components; corrected component name import (ParticipantsWraaper → ParticipantsWrapper).
Landing Page Enhancement src/pages/landing/index.tsx	Added conditional Snowfall component (displayed before Christmas 2025); increased FirstSection top padding from 12vh to 14vh.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Styling complexity: index.styles.ts contains extensive layout restructuring with multiple prop-driven conditional styles and asset references that require verification.
• Conditional logic consistency: isAfterXmas2025 flag is applied across multiple components; ensure logic is consistent and correctly propagated through prop chains.
• Asset file references: Verify that both regular and seasonal asset paths (invite_bg.webp, invite_bg_xmas.webp, invite_calendar.webp, invite_calendar_xmas.webp) exist and are correctly imported.
• Component renaming: Confirm ParticipantsWraaper → ParticipantsWrapper rename is complete across all imports and usages.

Possibly related PRs

• feat: 랜딩 페이지 이미지 변경 #166: Both PRs modify landing and invite UI code to add Xmas-themed assets and date-gated rendering with isAfterXmas2025 logic and related asset swaps.

Poem

🐰✨ A winter's touch adorns the pages bright,
With snowflakes dancing through the Christmas night,
Seasonal backgrounds swap with festive cheer,
While layouts flex to greet the holiday year! ❄️

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/#171

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b26e802 and 972021e.

⛔ Files ignored due to path filters (2)

• src/assets/images/calendar.png is excluded by !**/*.png
• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (4)

• package.json (1 hunks)
• src/pages/invite/index.styles.ts (2 hunks)
• src/pages/invite/index.tsx (3 hunks)
• src/pages/landing/index.tsx (3 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @corinthionia, 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!

이 풀 리퀘스트는 초대 페이지와 랜딩 페이지에 크리스마스 테마를 적용하여 사용자 경험을 향상시키는 데 중점을 둡니다. 크리스마스 배경 이미지, 눈 내리는 효과, 그리고 기간에 따른 동적 스타일링을 통해 계절감을 더했으며, 관련 컴포넌트들의 스타일링을 전반적으로 개선하여 UI/UX를 다듬었습니다.

Highlights

• 크리스마스 테마 적용: 초대 페이지와 랜딩 페이지에 크리스마스 테마의 배경 이미지와 달력 이미지를 적용했습니다. 2025년 크리스마스 이후에는 기존 이미지로 자동 전환됩니다.
• 눈 내리는 효과 추가: 초대 페이지와 랜딩 페이지에 'react-snowfall' 라이브러리를 사용하여 눈 내리는 효과를 추가했습니다. 이 효과는 2025년 크리스마스 이후에는 비활성화됩니다.
• 스타일 및 레이아웃 개선: 초대 페이지의 여러 컴포넌트(예: MainContainer, BoxWrapper, 버튼)의 스타일링을 재조정하여 레이아웃을 개선하고, 절대 위치 지정을 제거하여 유연성을 높였습니다.
• 동적 참여자 스타일링: 참여자 목록의 각 참여자 컴포넌트가 크리스마스 기간에 따라 다른 텍스트 색상을 가지도록 동적으로 스타일링됩니다.

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

초대 페이지와 랜딩 페이지에 크리스마스 이벤트 테마를 적용하는 변경사항 잘 보았습니다. react-snowfall 라이브러리를 사용하여 눈 내리는 효과를 추가하고, 날짜에 따라 다른 배경 이미지를 보여주는 로직을 구현하셨네요. 전체적으로 레이아웃을 flexbox 기반으로 개선하고 position: absolute 사용을 줄인 점은 매우 좋습니다. 다만, 몇 가지 개선할 점이 있어 리뷰 남깁니다. 특히 코드 중복 및 가독성 관련하여 확인 부탁드립니다.

[gemini-code-assist]

RoomTitle 컴포넌트의 스타일이 인라인으로 정의되어 있습니다. 기존 코드처럼 theme.typography를 사용하는 것이 일관성 유지에 더 좋습니다. theme.ts에 medium이면서 20px인 새로운 typography 스타일(예: medium005)을 추가하고, RoomTitle에서 이를 사용하도록 리팩토링하는 것을 고려해보세요.