feat: 서비스 소개 랜딩 페이지 구현 및 앱 시작 경로 변경#126
Conversation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add explicit Variants type annotation to heroContainerVariants and heroItemVariants so TypeScript correctly resolves the ease string literal against Framer Motion's Easing union type. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Feature3: add max-w-[400px] on mobile and max-w-[500px] on desktop so images don't stretch to full viewport width - Feature4: switch section to overflow-hidden to clip images within section boundary; remove mb-[-140px] and z-10 from restaurant list Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Summary of ChangesHello, 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은 서비스의 새로운 소개 랜딩 페이지를 구현하고, 기존 앱의 시작 경로를 조정하여 사용자 경험을 개선하는 데 중점을 둡니다. 새로운 랜딩 페이지는 시각적으로 매력적인 애니메이션과 함께 서비스의 주요 기능을 소개하며, 기존 앱 기능과의 원활한 전환을 보장하기 위해 라우팅 변경 및 여러 UI/UX 버그 수정이 포함되었습니다. 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
Activity
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
|
github-actions
bot
added
☑️ Need Review
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
|
|
||
| return ( | ||
| <header | ||
| className={`ygi:fixed ygi:top-0 ygi:right-0 ygi:left-0 ygi:z-50 ygi:bg-white ygi:transition-shadow ygi:duration-300 ${scrolled ? "ygi:shadow-md" : ""}`} |
There was a problem hiding this comment.
스타일 가이드(라인 295)에 따라, className에 조건부 클래스를 적용할 때 twJoin 유틸리티를 사용하는 것을 권장합니다. 템플릿 리터럴 대신 twJoin을 사용하면 클래스 목록을 더 명확하고 일관되게 관리할 수 있습니다. (tailwind-merge에서 twJoin을 import해야 합니다.)
| className={`ygi:fixed ygi:top-0 ygi:right-0 ygi:left-0 ygi:z-50 ygi:bg-white ygi:transition-shadow ygi:duration-300 ${scrolled ? "ygi:shadow-md" : ""}`} | |
| className={twJoin("ygi:fixed ygi:top-0 ygi:right-0 ygi:left-0 ygi:z-50 ygi:bg-white ygi:transition-shadow ygi:duration-300", scrolled && "ygi:shadow-md")} |
References
- 조건부 클래스를 적용할 때는
twJoin을 사용해야 합니다. (link)
| <LandingLogoIcon | ||
| color="#1f2933" | ||
| width={80} | ||
| height={25} | ||
| aria-label="요기잇" | ||
| /> |
There was a problem hiding this comment.
스타일 가이드(라인 308, 323)에 따라 하드코딩된 색상 값(#1f2933) 대신 text-primary와 같은 디자인 토큰을 사용해야 합니다. color 속성을 직접 사용하는 대신 className을 통해 텍스트 색상 토큰을 적용하는 것을 권장합니다.
| <LandingLogoIcon | |
| color="#1f2933" | |
| width={80} | |
| height={25} | |
| aria-label="요기잇" | |
| /> | |
| <LandingLogoIcon | |
| className="ygi:text-text-primary" | |
| width={80} | |
| height={25} | |
| aria-label="요기잇" | |
| /> |
References
- 색상 값은 하드코딩하지 말고 항상 디자인 토큰을 사용해야 합니다. 사용 가능한 텍스트 색상 토큰 중 하나인
text-primary를 사용할 수 있습니다. (link)
| return ( | ||
| <section | ||
| ref={ref} | ||
| className="md:ygi:py-28 lg:ygi:px-10 ygi:bg-white ygi:px-6 ygi:py-20" |
There was a problem hiding this comment.
스타일 가이드(라인 308, 481)에서는 간격(spacing)에 하드코딩된 값을 사용하는 것을 지양하고 디자인 토큰을 사용하도록 권장하고 있습니다. px-6, py-20, md:ygi:py-28, lg:ygi:px-10 등 임의의 숫자 값 대신 p-sm, py-md, px-lg와 같이 정의된 디자인 토큰을 사용해 주세요. 이 규칙은 파일 전반에 걸쳐 여러 곳에서 위반되고 있으니 함께 수정하는 것을 고려해 보세요.
References
- 간격, 색상, 타이포그래피 등에는 항상 디자인 토큰을 사용하고 하드코딩된 값을 피해야 합니다. (link)
| const feature3Screens = [ | ||
| { name: "feature-3-screen-a", dir: -1, height: 434 }, | ||
| { name: "feature-3-screen-b", dir: 1, height: 418 }, | ||
| { name: "feature-3-screen-c", dir: -1, height: 398 }, | ||
| ]; |
There was a problem hiding this comment.
스타일 가이드(라인 217, 473)에 따라, 이 배열은 런타임에 변경되지 않는 상수 데이터이므로 as const를 사용하여 타입을 더 정확하게 추론하고 불변성을 보장하는 것이 좋습니다.
| const feature3Screens = [ | |
| { name: "feature-3-screen-a", dir: -1, height: 434 }, | |
| { name: "feature-3-screen-b", dir: 1, height: 418 }, | |
| { name: "feature-3-screen-c", dir: -1, height: 398 }, | |
| ]; | |
| const feature3Screens = [ | |
| { name: "feature-3-screen-a", dir: -1, height: 434 }, | |
| { name: "feature-3-screen-b", dir: 1, height: 418 }, | |
| { name: "feature-3-screen-c", dir: -1, height: 398 }, | |
| ] as const; |
References
- 상수 객체에는
as const를 사용하여 타입을 고정하고 불변성을 확보해야 합니다. (link)
| className="md:ygi:py-24 lg:ygi:px-10 ygi:overflow-hidden ygi:px-6 ygi:py-16" | ||
| style={{ backgroundColor: "#13181c" }} |
There was a problem hiding this comment.
스타일 가이드(라인 308, 325)에 따라 하드코딩된 색상 값(#13181c) 대신 디자인 토큰을 사용해야 합니다. 인라인 스타일 대신 className을 통해 배경색 토큰(예: ygi:bg-palette-gray-900)을 적용해 주세요. 이 색상은 LandingFooter에서도 사용되므로 일관성을 위해 토큰으로 관리하는 것이 중요합니다.
| className="md:ygi:py-24 lg:ygi:px-10 ygi:overflow-hidden ygi:px-6 ygi:py-16" | |
| style={{ backgroundColor: "#13181c" }} | |
| className="md:ygi:py-24 lg:ygi:px-10 ygi:overflow-hidden ygi:px-6 ygi:py-16 ygi:bg-palette-gray-900" |
References
- 색상 값은 하드코딩하지 말고 항상 디자인 토큰을 사용해야 합니다. 배경색 토큰으로는
bg-primary,bg-secondary,bg-tertiary등이 있습니다. (link)
| </p> | ||
| <div className="ygi:flex ygi:gap-4"> | ||
| <a | ||
| href="#" |
There was a problem hiding this comment.
'이용약관' 링크의 href가 "#"로 설정되어 있습니다. 실제 서비스에서는 유효한 URL로 연결되어야 합니다. 구현 계획에 따라 실제 페이지 경로로 업데이트하거나, 아직 페이지가 없다면 관련 이슈를 생성하여 추적하는 것을 권장합니다.
| return ( | ||
| <div className="ygi:w-full ygi:overflow-x-hidden"> | ||
| <Navbar /> | ||
| <main className="ygi:pt-[65px]"> |
There was a problem hiding this comment.
pt-[65px]와 같이 하드코딩된 패딩 값은 유지보수를 어렵게 만들 수 있습니다. 다른 레이아웃 컴포넌트에서 ygi:pt-layout-header-height를 사용하고 있으므로, 일관성을 위해 이 값을 사용하는 것이 좋습니다.
| <main className="ygi:pt-[65px]"> | |
| <main className="ygi:pt-layout-header-height"> |
References
- 하드코딩된 간격 값 대신 디자인 토큰을 사용해야 합니다. (라인 308) (link)
- Navbar CTA, Hero CTA, CtaSection 버튼을 <Link>로 교체 - 더 이상 사용하지 않는 useRouter import 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
youngminss
added
✨ Feature
- Hero: orange bg, prominent logo, white CTA, replace char images with Lottie animation - Add PainPointSection: dark bg with MeetingCompleteIllustration + "어디가지..?" copy - Update FeatureText: remove badge chip, use plain caption + headline pattern - Feature2: bg changed to #d5dae2, headline with inline orange span for "의견 입력" - Feature3: bg changed to palette-gray-100 with new screen images - Feature4: bg changed to palette-gray-700, new tooltip/restaurant images, scale+y animations - Feature5: replace HTML OG card with Figma image, sequential directional fade animations per element (①②: left→right, ③④: right→left) - CTA: "요기잇" highlighted in orange, white button - Update all feature section images from Figma design - Add speech bubbles with rounded SVG tails Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- ServiceLandingPage를 서버 컴포넌트로 전환 - 각 섹션 및 공유 컴포넌트를 개별 파일로 분리 - useScrollReveal hook 별도 파일로 분리 - Navbar의 스크롤 감지 로직을 컴포넌트 내부로 이동 (hero-sentinel ID 참조) - HeroSection에서 LandingIntroLottie 직접 사용 대신 Player dynamic import로 개선 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- TailLeft/TailRight를 SVGProps 기반으로 개선 - 하드코딩된 색상값을 colors 상수로 교체 - 인라인 style 대신 Tailwind 클래스로 색상 처리 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
github-actions
bot
added
✨ Feature
## [2.2.0-beta.1](v2.1.5-beta.1...v2.2.0-beta.1) (2026-03-13) ### Features * 서비스 소개 랜딩 페이지 구현 및 앱 시작 경로 변경 ([#126](#126)) ([556e740](556e740)), closes [#d5dae2](https://github.com/Nexters/yogieat/issues/d5dae2)
## [2.2.0](v2.1.6...v2.2.0) (2026-03-13) ### Features * 서비스 소개 랜딩 페이지 구현 및 앱 시작 경로 변경 ([#126](#126)) ([556e740](556e740)), closes [#d5dae2](https://github.com/Nexters/yogieat/issues/d5dae2)
1 participant
🎯 PR 제목
feat: 서비스 소개 랜딩 페이지 구현 및 앱 시작 경로 변경
📑 작업 상세 내역
기능 추가
/)를 구현합니다/app경로로 이동합니다/gathering/create의 뒤로가기 경로를/에서/app으로 변경합니다motion/react의useInView를 활용한 스크롤 진입 애니메이션을 적용합니다리팩토링
@lottiefiles/react-lottie-player직접 dynamic import로 개선합니다router.push를 Next.jsLink로 교체합니다스타일
버그 수정
useRef타입 누락 및Variants타입 미선언으로 발생하던 TypeScript 오류를 해결합니다max-w제한으로 수정합니다overflow-hidden으로 수정합니다DISTANCE_RANGE_LABELexport를 제거합니다기타 작업
pnpm format적용 및 작업 중 생성된 참고용 스크린샷 파일을 제거합니다🙏 리뷰 요청 사항
/app경로 변경 이후 기존 앱 플로우(모임 생성 등)가 정상적으로 동작하는지 확인해주세요.📃 참고 자료
docs/plans/2026-03-04-service-landing-page.md🖼️ 작업 결과물