[FE] 랜딩 페이지

[pakxe]

Closes #379

목적

랜딩 페이지를 추가합니다.

작업 내용

➊ 페이지 퍼블리싱

focus효과랑 blur를 적용해달라고 디자인팀에게 전달받았어서 그렇게 적용했습니다. 스크롤 약간하면 snap됩니다.

2026-02-16.12.31.40.mov

결과

잘 됩니다.

리뷰해줬으면 좋겠는 부분

어색한 부분이 있는지

[gemini-code-assist]

Summary of Changes

Hello @pakxe, 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은 사용자에게 서비스의 주요 기능을 소개하고 탐색을 돕기 위한 랜딩 페이지를 추가합니다. 페이지는 스크롤 스냅과 시각적 포커스 효과를 통해 각 기능 섹션(마인드맵, 셀프 진단, 에피소드 보관함)을 직관적으로 탐색할 수 있도록 설계되었습니다. 이를 통해 신규 사용자의 온보딩 경험을 개선하고 서비스의 가치를 명확하게 전달하는 것을 목표로 합니다.

Highlights

• 랜딩 페이지 추가: 사용자에게 서비스의 주요 기능을 소개하는 새로운 랜딩 페이지 컴포넌트 LandingPage.tsx가 추가되었습니다.
• 스크롤 스냅 및 시각 효과 구현: 페이지 스크롤 시 섹션이 자동으로 스냅되고, 현재 포커스된 섹션은 선명하게, 다른 섹션은 블러 처리되어 시각적 집중도를 높이는 효과가 적용되었습니다.
• 주요 기능 소개 섹션 포함: 마인드맵, 셀프 진단, 에피소드 보관함 등 서비스의 핵심 기능을 소개하는 전용 섹션들이 추가되어 각 기능의 특징과 장점을 설명합니다.
• GNB 로그인/회원가입 UI 개선: 전역 내비게이션 바(GNB)의 우측 슬롯이 사용자의 로그인 상태에 따라 로그인/회원가입 버튼 또는 사용자 박스를 표시하도록 업데이트되었습니다.

Changelog

• frontend/src/features/landing/pages/LandingPage.tsx
  • 랜딩 페이지의 레이아웃과 기능을 정의하는 새로운 컴포넌트를 추가했습니다.
  • LandingInfo, Logo, CallToActionButton 등 랜딩 페이지 전용 컴포넌트를 가져와 사용했습니다.
  • 스크롤 스냅 동작과 섹션 가시성에 따른 포커스/블러 효과를 구현하기 위한 useRef, useState, useCallback, useEffect 훅을 추가했습니다.
  • 사용자 로그인 상태에 따라 로그인/회원가입 또는 사용자 박스를 표시하도록 GNB의 rightSlot을 업데이트했습니다.
  • 마인드맵, 셀프 진단, 에피소드 보관함 기능에 대한 상세 정보를 담은 섹션들을 추가하고, 각 섹션으로 이동하는 버튼을 구현했습니다.

Activity

• 이 PR은 이슈 #379를 해결합니다.
• 랜딩 페이지 퍼블리싱 작업이 완료되었으며, 디자인팀의 요청에 따라 focus 및 blur 효과가 적용되었습니다.
• 스크롤 시 섹션이 스냅되도록 구현되었습니다.
• 작성자는 구현 결과가 "잘 됩니다"라고 언급하며, 어색한 부분이 있는지에 대한 리뷰를 요청했습니다.

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은 애플리케이션에 새로운 랜딩 페이지를 추가하는 작업을 담고 있습니다. 전반적으로 스크롤 스냅과 인터랙티브한 UI 요소들이 잘 구현되었습니다. 코드 리뷰에서는 Tailwind CSS 클래스 구문 오류, 도달할 수 없는 코드, 그리고 타입 안정성 개선점에 대한 몇 가지 제안을 포함했습니다.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 38e609334f

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[pakxe]

@arty0928
리뷰 반영했습니다 확인부탁드려욜!

[arty0928]

@pakxe
확인했습니다! 뿌잉~