랜딩페이지 개발 #61
Conversation
Summary of ChangesHello @yooolleee, 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은 애플리케이션의 랜딩 페이지를 완전히 새로운 버전(Landing V2)으로 개편합니다. 새로운 랜딩 페이지는 모듈형 컴포넌트 구조로 구축되었으며, 히어로 섹션, 기능 소개, CTA(Call-to-Action) 섹션 등을 포함하여 다양한 화면 크기에 최적화된 반응형 디자인을 제공합니다. 또한, 검색 엔진 최적화를 위한 중요한 SEO 메타데이터가 추가되었습니다. 기존 Framer Motion 기반의 풀페이지 기능은 추후 논의를 위해 일시적으로 제외되었으며, 개발 환경 개선을 위해 React Query 개발 도구 추가 및 Next.js 개발 지표 비활성화 등의 설정 변경도 이루어졌습니다. 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
랜딩 페이지 v2 작업을 통해 전반적인 디자인과 레이아웃이 크게 개선되었습니다. 특히 Framer Motion 기반의 복잡한 라이브러리 대신 CSS scroll-snap을 활용하여 부드러운 섹션 전환을 구현한 점이 성능과 유지보수 측면에서 좋은 선택이라고 생각됩니다. 다만, 여러 CSS 파일 간의 반응형 브레이크포인트 설정이 일관되지 않아 특정 해상도에서 레이아웃이 깨질 위험이 있으며, 일부 컴포넌트에서 주석으로 언급된 스타일 클래스가 실제 구현에서 누락된 부분이 발견되었습니다. 또한 프로젝트에 이미 포함된 clsx 라이브러리를 활용하여 클래스 바인딩 로직을 개선할 것을 권장합니다.
| flex-shrink: 0; | ||
| } | ||
|
|
||
| @media (max-width: 375px) { |
There was a problem hiding this comment.
모바일 브레이크포인트가 375px로 매우 작게 설정되어 있습니다. 최근 대부분의 스마트폰(예: iPhone 13/14/15, Galaxy S 시리즈 등)은 가로 너비가 375px를 초과하므로, 현재 설정으로는 대다수의 모바일 기기에서 PC용 레이아웃(예: 80px의 큰 패딩 등)이 노출되어 화면이 깨져 보일 수 있습니다. HeroSection.module.css 등 다른 파일에서 사용된 기준과 맞춰 767px 또는 1199px 정도로 범위를 넓히는 것이 안전합니다.
| @media (max-width: 375px) { | |
| @media (max-width: 1199px) { |
| copyClass: styles.copyRight, | ||
| mediaClass: styles.mediaThree, | ||
| /* | ||
| * 3번 이미지(966×649)는 가로 비율이 커서 | ||
| * imgPc 공통값 height:100%를 그대로 쓰면 가로가 섹션 너비를 초과함 | ||
| * → imgPcWide 클래스로 width:100%, height:auto 적용 | ||
| */ | ||
| }, |
There was a problem hiding this comment.
three 변이(variant)에 대한 주석에는 가로가 넓은 이미지를 처리하기 위해 imgPcWide 클래스를 적용한다고 명시되어 있으나, 실제 FEATURE_DATA 객체에는 imgPcClass 값이 누락되어 있습니다. 또한 FeatureSection.module.css 파일에도 해당 클래스 정의가 보이지 않습니다. 의도하신 레이아웃을 위해 데이터와 스타일을 보완해 주세요.
copyClass: styles.copyRight,
mediaClass: styles.mediaThree,
imgPcClass: styles.imgPcWide,
|
|
||
| return ( | ||
| <section | ||
| className={[styles.section, bg === 'brand' ? styles.bgBrand : styles.bgSlate].join(' ')} |
There was a problem hiding this comment.
클래스 이름을 배열의 join(' ') 방식으로 직접 결합하고 있습니다. package.json에 이미 clsx 라이브러리가 포함되어 있으므로, 이를 사용하면 조건부 클래스 할당이나 undefined 값 필터링 등을 더 깔끔하고 안전하게 처리할 수 있습니다.
<section
className={clsx(styles.section, bg === 'brand' ? styles.bgBrand : styles.bgSlate)}
>
| .scrollContainer { | ||
| flex: 1; | ||
| height: 100vh; | ||
| overflow-y: scroll; |
There was a problem hiding this comment.
overflow-y: scroll;은 콘텐츠 양과 관계없이 항상 스크롤바 영역을 강제로 표시합니다. 운영체제나 브라우저 설정에 따라 불필요한 스크롤바가 보일 수 있으므로, 콘텐츠가 넘칠 때만 스크롤바가 생기도록 auto로 설정하는 것이 일반적입니다.
| overflow-y: scroll; | |
| overflow-y: auto; |
2 participants
Summary
프레이머 모션에서 풀페이지 기능은 잠시 제거 했습니다. 추후 논의 후 개발하는 방향으로 가겠습니다.
Issue
Scope
포함
특이사항