Skip to content

랜딩페이지#520

Merged
Bangdayeon merged 2 commits into
mainfrom
feat/#512-landing-page
Jun 21, 2026
Merged

랜딩페이지#520
Bangdayeon merged 2 commits into
mainfrom
feat/#512-landing-page

Conversation

@Bangdayeon

Copy link
Copy Markdown
Member

관련 이슈

PR 설명

  • 랜딩 페이지 피그마 디자인 적용하여 제작

@Bangdayeon Bangdayeon self-assigned this Jun 3, 2026
@Bangdayeon Bangdayeon linked an issue Jun 3, 2026 that may be closed by this pull request
@coderabbitai

coderabbitai Bot commented Jun 3, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@Bangdayeon, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 39 minutes and 28 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 91d58a66-7216-4589-8baa-996ced1f80db

📥 Commits

Reviewing files that changed from the base of the PR and between 9309337 and 3dded84.

⛔ Files ignored due to path filters (10)
  • public/images/landing-5.png is excluded by !**/*.png
  • public/images/landing-6.png is excluded by !**/*.png
  • public/images/landing-7.png is excluded by !**/*.png
  • public/images/landing-add.png is excluded by !**/*.png
  • public/images/landing-ai.png is excluded by !**/*.png
  • public/images/landing-chatbot.png is excluded by !**/*.png
  • public/images/landing-extension.png is excluded by !**/*.png
  • public/images/landing_icon_bookmark.png is excluded by !**/*.png
  • public/images/landing_icon_questionmark.png is excluded by !**/*.png
  • public/images/landing_icon_searchoff.png is excluded by !**/*.png
📒 Files selected for processing (14)
  • src/app/layout-client.tsx
  • src/app/page.tsx
  • src/components/Icons/icons.ts
  • src/components/basics/Footer/Footer.tsx
  • src/components/layout/Landing/ExperienceItem.tsx
  • src/components/layout/Landing/FAQItem.tsx
  • src/components/layout/Landing/FeatureCard.tsx
  • src/components/layout/Landing/FeatureSection.tsx
  • src/components/layout/Landing/HeroSection.tsx
  • src/components/layout/Landing/HowUseItem.tsx
  • src/components/layout/Landing/LandingHeader.tsx
  • src/components/wrappers/ChromeButton.tsx
  • src/components/wrappers/GoogleLoginButton.tsx
  • src/lib/oauth.ts

Walkthrough

기존의 단일 LandingPage.tsx 컴포넌트(에러 메시지 맵, Google 로그인 처리, 로그인 UI 전체 포함)를 삭제하고, page.tsx에서 LandingHeader, HeroSection, FeatureSection을 조합하는 구조로 변경합니다. Google OAuth 리다이렉트 로직은 공유 클라이언트 컴포넌트인 GoogleLoginButton으로, Chrome 웹스토어 열기 로직은 ChromeButton으로 분리됩니다. 랜딩 섹션 세부 UI로 ExperienceItem, FAQItem, FeatureCard, HowUseItem이 추가되고, IconSizes'2xl': 44가 추가되며, LayoutClientoverflow-x-hiddenoverflow-x-clip으로 변경됩니다.

Possibly related PRs

  • Team-SoFa/linkiving#293: 기존 LandingPage.tsx에 구현된 Google OAuth 리다이렉트 흐름(NEXT_PUBLIC_BASE_API_URL/oauth2/authorization/google)을 최초 도입한 PR로, 본 PR이 해당 로직을 redirectToGoogleOAuth 유틸과 GoogleLoginButton으로 이관·재구현합니다.
  • Team-SoFa/linkiving#335: 로그인 페이지 디자인 변경 및 Google 로그인 관련 UI를 다룬 PR로, 본 PR이 동일 영역을 새로운 섹션 컴포넌트 구조로 대체합니다.
🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Out of Scope Changes check ❓ Inconclusive 대부분의 변경사항이 랜딩 페이지 구현에 직접 관련되어 있으나, layout-client.tsx의 overflow-x 속성 변경과 Footer.tsx의 import 정리는 랜딩 페이지 구현과 직접 연관이 불명확합니다. layout-client.tsx의 overflow-x-clip 변경과 Footer.tsx 정리가 랜딩 페이지 디자인 적용 범위에 포함되는지 명확히 하세요.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed 제목이 매우 간결하지만 'PR 설명'의 '랜딩 페이지 피그마 디자인 적용하여 제작'과 일치하며 주요 변경 사항을 명확히 설명합니다.
Description check ✅ Passed PR 설명이 템플릿 구조를 따르며 관련 이슈 #512를 명시하고 변경 사항에 대해 설명하고 있습니다.
Linked Issues check ✅ Passed 이슈 #512의 목표는 '피그마에 올라온 랜딩 페이지 디자인 적용'이며, 코드 변경사항에서 다수의 랜딩 페이지 컴포넌트(HeroSection, FeatureSection, LandingHeader 등)와 UI 요소들(ExperienceItem, FeatureCard, FAQItem, HowUseItem 등)이 추가되어 목표를 충족합니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/#512-landing-page

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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/app/page.tsx (1)

70-76: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

불필요한 searchParams 의존 제거로 페이지 정적 최적화 복구 필요

  • src/app/page.tsx (70-76)에서 searchParamsawait하지만 이후 params를 사용하지 않습니다.
  • Next.js App Router에서는 searchParams를 사용하는 것만으로도 라우트가 동적 렌더링으로 옵트인되어 정적 생성이 디옵트됩니다.
  • Page 시그니처에서 searchParamsconst params = await searchParams;를 제거하세요. 쿼리값이 필요하다면 useSearchParams(Client 컴포넌트) 또는 동적 라우트로 분리하는 방식이 맞습니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/page.tsx` around lines 70 - 76, The Page function currently declares
and awaits searchParams (function Page and const params = await searchParams)
but never uses params, which forces dynamic rendering; remove the searchParams
parameter from the Page signature and delete the line "const params = await
searchParams;" to restore static optimization, and if query values are required
later convert to a client component using useSearchParams or a dedicated dynamic
route instead.
🧹 Nitpick comments (1)
src/components/layout/Landing/LandingHeader.tsx (1)

14-23: ⚡ Quick win

Google OAuth 리다이렉트 로직을 공통화해주세요.

동일한 ${baseUrl}/oauth2/authorization/google 조립/이동 로직이 LandingHeader, LandingFooter, GoogleLoginButton에 중복되어 있고, 누락 env 처리도 이미 다르게 동작합니다. 공통 함수(또는 GoogleLoginButton 재사용)로 모아 드리프트를 막는 게 좋습니다.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/layout/Landing/LandingHeader.tsx` around lines 14 - 23,
Duplicate Google OAuth redirect assembly/redirect logic across
LandingHeader.handleStart, LandingFooter, and GoogleLoginButton should be
centralized; create a shared helper (e.g., getGoogleOAuthUrl or
redirectToGoogleOAuth) that reads NEXT_PUBLIC_BASE_API_URL once, throws or
returns a Result/error when missing, and returns the full URL
(`${baseUrl}/oauth2/authorization/google`) or performs the window.location.href
change. Replace handleStart and other inline implementations to call this helper
(or reuse GoogleLoginButton) so env missing handling is consistent and the
redirect URL assembly is not duplicated.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/layout/Landing/FAQItem.tsx`:
- Around line 10-30: The root element of the FAQItem component should be changed
from a <div> to an <li> to preserve list semantics when this component is
rendered inside a <ul>; update the JSX root element (the element wrapping the
button and the answer container in the FAQItem component) to <li> and keep all
existing attributes and className values (including aria-expanded on the button
and the grid/overflow structure) so behavior and styling remain unchanged;
ensure there are no invalid nested list/interactive element rules (button stays
as a child of the new <li>) and run the app’s linter/HTML validator to confirm
semantics are fixed.

In `@src/components/layout/Landing/FeatureCard.tsx`:
- Line 23: The Image components using the next/image "fill" prop should include
a responsive sizes prop to avoid oversized image selection; update the Image
usages in FeatureCard (component FeatureCard), ExperienceItem (ExperienceItem),
HowUseItem (HowUseItem), LinkThumbnailTitleSection (component
LinkThumbnailTitleSection) and AddMultiLinks (AddMultiLinks) to add a sizes
string matching the layout (for example: mobile ~100vw, tablet ~50vw, desktop
~33vw) so the browser can pick appropriately sized images for each breakpoint.

In `@src/components/wrappers/ChromeButton.tsx`:
- Around line 18-25: The ChromeButton component is showing google-icon.png while
its text and behavior target the Chrome Web Store; update the Image usage in
ChromeButton (the Image component instance) to use the correct Chrome icon asset
(e.g., change src from "google-icon.png" to the Chrome asset name such as
"chrome-icon.png"), keep a matching alt like "Chrome 로고", and ensure the
referenced chrome icon file exists in the public/images assets so the button
shows the proper Chrome icon.

In `@src/components/wrappers/GoogleLoginButton.tsx`:
- Around line 16-18: The button in the GoogleLoginButton component is missing an
explicit type which can cause it to act as a form submitter; update the JSX for
the button that calls handleGoogleLogin to include type="button" so it won't
trigger form submission (i.e., modify the <button ...> in GoogleLoginButton.tsx
that uses handleGoogleLogin to add the type attribute).

---

Outside diff comments:
In `@src/app/page.tsx`:
- Around line 70-76: The Page function currently declares and awaits
searchParams (function Page and const params = await searchParams) but never
uses params, which forces dynamic rendering; remove the searchParams parameter
from the Page signature and delete the line "const params = await searchParams;"
to restore static optimization, and if query values are required later convert
to a client component using useSearchParams or a dedicated dynamic route
instead.

---

Nitpick comments:
In `@src/components/layout/Landing/LandingHeader.tsx`:
- Around line 14-23: Duplicate Google OAuth redirect assembly/redirect logic
across LandingHeader.handleStart, LandingFooter, and GoogleLoginButton should be
centralized; create a shared helper (e.g., getGoogleOAuthUrl or
redirectToGoogleOAuth) that reads NEXT_PUBLIC_BASE_API_URL once, throws or
returns a Result/error when missing, and returns the full URL
(`${baseUrl}/oauth2/authorization/google`) or performs the window.location.href
change. Replace handleStart and other inline implementations to call this helper
(or reuse GoogleLoginButton) so env missing handling is consistent and the
redirect URL assembly is not duplicated.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 235d7e0e-4f81-4b90-a3ce-c024fc387977

📥 Commits

Reviewing files that changed from the base of the PR and between e155395 and 03b9c1d.

⛔ Files ignored due to path filters (14)
  • public/images/landing-1.png is excluded by !**/*.png
  • public/images/landing-2.png is excluded by !**/*.png
  • public/images/landing-3.png is excluded by !**/*.png
  • public/images/landing-4.png is excluded by !**/*.png
  • public/images/landing-5.png is excluded by !**/*.png
  • public/images/landing-6.png is excluded by !**/*.png
  • public/images/landing-7.png is excluded by !**/*.png
  • public/images/landing-add.png is excluded by !**/*.png
  • public/images/landing-ai.png is excluded by !**/*.png
  • public/images/landing-chatbot.png is excluded by !**/*.png
  • public/images/landing-extension.png is excluded by !**/*.png
  • public/images/landing_icon_bookmark.png is excluded by !**/*.png
  • public/images/landing_icon_questionmark.png is excluded by !**/*.png
  • public/images/landing_icon_searchoff.png is excluded by !**/*.png
📒 Files selected for processing (15)
  • src/app/LandingPage.tsx
  • src/app/layout-client.tsx
  • src/app/page.tsx
  • src/components/Icons/icons.ts
  • src/components/layout/Landing/ExperienceItem.tsx
  • src/components/layout/Landing/FAQItem.tsx
  • src/components/layout/Landing/FeatureCard.tsx
  • src/components/layout/Landing/FeatureSection.tsx
  • src/components/layout/Landing/HeroSection.tsx
  • src/components/layout/Landing/HowUseItem.tsx
  • src/components/layout/Landing/LandingFooter.tsx
  • src/components/layout/Landing/LandingHeader.tsx
  • src/components/layout/Landing/ScrollStackedCards.tsx
  • src/components/wrappers/ChromeButton.tsx
  • src/components/wrappers/GoogleLoginButton.tsx
💤 Files with no reviewable changes (1)
  • src/app/LandingPage.tsx

Comment thread src/components/layout/Landing/FAQItem.tsx Outdated
Comment thread src/components/layout/Landing/FeatureCard.tsx Outdated
Comment thread src/components/wrappers/ChromeButton.tsx Outdated
Comment thread src/components/wrappers/GoogleLoginButton.tsx Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/wrappers/GoogleLoginButton.tsx`:
- Around line 17-20: The alt text for the Image component in
GoogleLoginButton.tsx incorrectly specifies "Chrome 로고" when it should describe
a Google icon for the Google login button. Update the alt attribute of the Image
component to accurately reflect the actual icon being displayed by changing it
to "Google 로고", or set it to an empty string alt="" if the icon serves only as
decoration.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 673fc36e-de83-4054-8e52-27ccbac42652

📥 Commits

Reviewing files that changed from the base of the PR and between e107998 and 9309337.

⛔ Files ignored due to path filters (10)
  • public/images/landing-5.png is excluded by !**/*.png
  • public/images/landing-6.png is excluded by !**/*.png
  • public/images/landing-7.png is excluded by !**/*.png
  • public/images/landing-add.png is excluded by !**/*.png
  • public/images/landing-ai.png is excluded by !**/*.png
  • public/images/landing-chatbot.png is excluded by !**/*.png
  • public/images/landing-extension.png is excluded by !**/*.png
  • public/images/landing_icon_bookmark.png is excluded by !**/*.png
  • public/images/landing_icon_questionmark.png is excluded by !**/*.png
  • public/images/landing_icon_searchoff.png is excluded by !**/*.png
📒 Files selected for processing (14)
  • src/app/layout-client.tsx
  • src/app/page.tsx
  • src/components/Icons/icons.ts
  • src/components/basics/Footer/Footer.tsx
  • src/components/layout/Landing/ExperienceItem.tsx
  • src/components/layout/Landing/FAQItem.tsx
  • src/components/layout/Landing/FeatureCard.tsx
  • src/components/layout/Landing/FeatureSection.tsx
  • src/components/layout/Landing/HeroSection.tsx
  • src/components/layout/Landing/HowUseItem.tsx
  • src/components/layout/Landing/LandingHeader.tsx
  • src/components/wrappers/ChromeButton.tsx
  • src/components/wrappers/GoogleLoginButton.tsx
  • src/lib/oauth.ts
💤 Files with no reviewable changes (1)
  • src/components/basics/Footer/Footer.tsx
✅ Files skipped from review due to trivial changes (3)
  • src/lib/oauth.ts
  • src/app/layout-client.tsx
  • src/components/Icons/icons.ts
🚧 Files skipped from review as they are similar to previous changes (8)
  • src/components/layout/Landing/FeatureCard.tsx
  • src/components/wrappers/ChromeButton.tsx
  • src/components/layout/Landing/ExperienceItem.tsx
  • src/app/page.tsx
  • src/components/layout/Landing/FeatureSection.tsx
  • src/components/layout/Landing/FAQItem.tsx
  • src/components/layout/Landing/HeroSection.tsx
  • src/components/layout/Landing/HowUseItem.tsx

Comment thread src/components/wrappers/GoogleLoginButton.tsx
@Bangdayeon Bangdayeon merged commit 18d498c into main Jun 21, 2026
3 checks passed
@Bangdayeon Bangdayeon deleted the feat/#512-landing-page branch June 21, 2026 11:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

랜딩페이지 디자인 적용

2 participants