✨Feat: 랜딩 페이지 구현 #94
✨Feat: 랜딩 페이지 구현 #94
Conversation
|
""" Walkthrough랜딩 페이지를 구성하는 여러 React 컴포넌트가 새로 추가되고, 글로벌 CSS와 Tailwind 설정이 업데이트되어 반응형 디자인과 다크 모드 지원이 강화되었습니다. 기존 단일 구조에서 헤더, 메인, 푸터 등 모듈화된 컴포넌트 기반 구조로 변경되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Header
participant Main
participant Footer
participant HeroSection
participant PointSection
participant FeatureCardSection
User->>Header: 페이지 진입 시 헤더 표시
User->>Main: 메인 콘텐츠 렌더링
Main->>HeroSection: 히어로 섹션 렌더링
Main->>PointSection: 포인트 섹션 렌더링
Main->>FeatureCardSection: 기능 카드 섹션 렌더링
User->>Footer: 푸터 표시
Suggested labels
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
src/app/features/landing/components/GithubIcon.tsx (1)
1-28: 테마 대응 GitHub 아이콘 구현이 우수합니다.
useTheme와useMounted훅을 활용한 테마별 아이콘 처리와 SSR 호환성을 위한 폴백 처리가 잘 구현되어 있습니다.suppressHydrationWarning사용도 적절합니다.다만 GitHub URL을 하드코딩하는 대신 환경변수나 설정 파일로 분리하는 것을 고려해보세요:
- href="https://github.com/CoPlay-FE/coplan" + href={process.env.NEXT_PUBLIC_GITHUB_URL || "https://github.com/CoPlay-FE/coplan"}src/app/features/landing/components/FeatureCard.tsx (1)
21-35: 반응형 카드 레이아웃이 우수하게 구현되었습니다.새로운 브레이크포인트와 BG 유틸리티 클래스를 활용한 반응형 디자인이 잘 구현되어 있습니다. 다만 하드코딩된 값들을 개선할 수 있습니다.
유지보수성 향상을 위해 다음과 같은 개선을 고려해보세요:
- <p className="mb-16 text-18 font-bold text-white">{title}</p> - <p className="text-16 font-normal text-white">{description}</p> + <p className="mb-16 text-18 font-bold Text-white">{title}</p> + <p className="text-16 font-normal Text-white">{description}</p>기존 글로벌 CSS의 테마 대응 클래스를 활용하는 것이 일관성 측면에서 더 좋습니다.
src/app/features/landing/components/Header.tsx (1)
13-14: 네비게이션 링크의 접근성 개선을 고려해보세요.로그인과 회원가입 링크에
aria-label속성을 추가하거나, 활성 상태 스타일을 추가하면 사용자 경험이 향상될 수 있습니다.- <Link href="/login">로그인</Link> - <Link href="/signup">회원 가입</Link> + <Link href="/login" className="hover:text-blue-600 transition-colors">로그인</Link> + <Link href="/signup" className="hover:text-blue-600 transition-colors">회원 가입</Link>src/app/features/landing/components/HeroSection.tsx (1)
21-26: CTA 버튼의 접근성을 개선할 수 있습니다.버튼에 포커스 스타일과 hover 효과를 추가하면 사용자 경험이 향상됩니다.
- className="BG-blue mt-8 flex h-54 w-280 items-center justify-center rounded-8 text-center text-lg font-medium text-white" + className="BG-blue mt-8 flex h-54 w-280 items-center justify-center rounded-8 text-center text-lg font-medium text-white hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all"src/app/features/landing/components/FeatureCardSection.tsx (1)
9-9: 복잡한 반응형 클래스를 정리할 수 있습니다.여러 반응형 클래스가 중복되고 복잡합니다. 가독성을 위해 정리하는 것을 고려해보세요.
- <div className="mobile-wide:flex-col tablet-wide:flex-col mobile-wide:gap-40 tablet-wide:justify-center flex w-full flex-row items-center justify-between gap-33"> + <div className="flex w-full flex-row items-center justify-between gap-33 mobile-wide:flex-col mobile-wide:gap-40 tablet-wide:flex-col tablet-wide:justify-center">src/app/features/landing/components/PointSection.tsx (1)
6-21: 매우 긴 className 문자열의 가독성 개선을 고려해보세요.현재 className이 매우 길어서 유지보수성이 떨어집니다. CSS 모듈이나 클래스 변수를 사용하여 가독성을 향상시킬 수 있습니다.
예시:
const sectionClasses = [ 'mobile-wide:pl-0 mobile-wide:pt-60', 'BG-section', 'tablet-wide:flex-col tablet-wide:max-w-664 tablet-wide:gap-224', 'mobile-wide:flex-col mobile-wide:max-w-343 mobile-wide:gap-194', 'mb-59 flex h-auto w-full max-w-1200 justify-between rounded-8 pl-60 pt-103' ].join(' ') // 사용시 <section className={sectionClasses}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (11)
public/images/banner.pngis excluded by!**/*.pngpublic/images/dashboard.pngis excluded by!**/*.pngpublic/images/github-icon-block.svgis excluded by!**/*.svgpublic/images/github-icon-white.svgis excluded by!**/*.svgpublic/images/invite.svgis excluded by!**/*.svgpublic/images/logo-dark2.svgis excluded by!**/*.svgpublic/images/logo-icon-dark.svgis excluded by!**/*.svgpublic/images/logo-icon-light.svgis excluded by!**/*.svgpublic/images/member.svgis excluded by!**/*.svgpublic/images/newdashboard.svgis excluded by!**/*.svgpublic/images/todomodal.svgis excluded by!**/*.svg
📒 Files selected for processing (12)
src/app/features/landing/components/FeatureCard.tsx(1 hunks)src/app/features/landing/components/FeatureCardSection.tsx(1 hunks)src/app/features/landing/components/Footer.tsx(1 hunks)src/app/features/landing/components/GithubIcon.tsx(1 hunks)src/app/features/landing/components/Header.tsx(1 hunks)src/app/features/landing/components/HeroSection.tsx(1 hunks)src/app/features/landing/components/Logo.tsx(1 hunks)src/app/features/landing/components/Main.tsx(1 hunks)src/app/features/landing/components/PointSection.tsx(1 hunks)src/app/globals.css(2 hunks)src/app/page.tsx(1 hunks)tailwind.config.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (6)
src/app/features/landing/components/Footer.tsx (1)
src/app/features/landing/components/GithubIcon.tsx (1)
GithubIcon(8-28)
src/app/page.tsx (2)
src/app/features/landing/components/Main.tsx (1)
Main(5-15)src/app/features/landing/components/Footer.tsx (1)
Footer(3-10)
src/app/features/landing/components/FeatureCardSection.tsx (1)
src/app/features/landing/components/FeatureCard.tsx (1)
FeatureCard(12-36)
src/app/features/landing/components/Header.tsx (2)
src/app/features/landing/components/Logo.tsx (1)
Logo(8-50)src/app/shared/components/ThemeToggle.tsx (1)
ThemeToggle(6-27)
src/app/features/landing/components/GithubIcon.tsx (1)
src/app/shared/hooks/useMounted.ts (1)
useMounted(3-11)
src/app/features/landing/components/Logo.tsx (1)
src/app/shared/hooks/useMounted.ts (1)
useMounted(3-11)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: eslint-check
🔇 Additional comments (15)
src/app/globals.css (2)
11-14: 최소 너비 설정이 적절합니다.
min-width: 375px설정은 PR 목표에서 언급된 대로 이미지 크기로 인한 오버플로우 문제를 해결하는 좋은 접근법입니다. 모바일 디바이스에서 일관된 레이아웃을 보장할 수 있습니다.
87-93: 새로운 배경 유틸리티 클래스가 잘 구현되었습니다.
.BG-section과.BG-card클래스가 기존 패턴과 일관되게 구현되어 있으며, 다크/라이트 테마 모두 적절히 지원합니다. 새로 추가된 랜딩 페이지 컴포넌트들에서 활용되는 것을 확인했습니다.src/app/features/landing/components/FeatureCard.tsx (1)
3-10: Props 인터페이스가 잘 정의되었습니다.타입 안전성을 위한 인터페이스 정의가 명확하고, 이미지 관련 속성들이 적절히 분리되어 있습니다.
src/app/page.tsx (2)
1-3: 컴포넌트 임포트가 적절합니다.모듈화된 컴포넌트들의 임포트 경로가 일관성 있게 정의되어 있습니다.
7-11: 페이지 구조가 모듈화되어 개선되었습니다.기존의 단순한 제목 표시에서 Header, Main, Footer로 구성된 의미있는 페이지 구조로 개선되었습니다. Fragment 사용으로 불필요한 DOM 노드도 제거했네요.
src/app/features/landing/components/Footer.tsx (2)
5-5: 반응형 레이아웃이 잘 구현되었습니다.커스텀 브레이크포인트(
tablet-wide,mobile-wide)를 사용한 반응형 디자인이 적절하게 적용되었고, 레이아웃 변경이 자연스럽게 구현되었습니다.
6-7: 저작권 표시와 소셜 링크 구성이 적절합니다.Footer의 핵심 요소들(저작권, GitHub 링크)이 깔끔하게 배치되어 있고, GithubIcon 컴포넌트와의 조합도 잘 되어 있습니다.
src/app/features/landing/components/Header.tsx (1)
9-9: 헤더의 sticky 포지셔닝과 z-index 설정이 적절합니다.
sticky포지션과z-50설정으로 헤더가 스크롤 시에도 상단에 고정되도록 잘 구현되었습니다.src/app/features/landing/components/HeroSection.tsx (2)
8-14: 이미지 최적화가 잘 구현되었습니다.
priority속성과 적절한sizes속성을 사용하여 LCP(Largest Contentful Paint) 성능을 개선했고, 반응형 이미지 로딩이 적절히 설정되었습니다.
17-19: 브랜드 강조 효과가 효과적입니다.제목에서 "CoPlan" 브랜드명을
Text-blue클래스로 강조한 것이 시각적으로 좋은 효과를 만들어냅니다.src/app/features/landing/components/FeatureCardSection.tsx (2)
4-4: 반응형 레이아웃 구현이 우수합니다.
max-w-1200으로 최대 너비를 제한하고, 다양한 브레이크포인트에서 적절한 정렬을 적용한 것이 좋습니다.
10-33: 피처 카드들의 이미지 높이가 일관성이 없습니다.각 카드의 이미지 높이(123px, 239px, 195px)가 달라서 시각적 균형이 맞지 않을 수 있습니다. 디자인 의도가 아니라면 통일하는 것을 고려해보세요.
이미지 높이 차이가 의도된 디자인인지 확인이 필요합니다. 균일한 카드 높이를 원한다면 이미지 컨테이너 높이를 고정하고
object-contain을 사용하는 것을 고려해보세요.src/app/features/landing/components/Main.tsx (2)
5-15: 깔끔한 레이아웃 구조입니다.메인 콘텐츠 영역을 논리적으로 구성했고, 각 섹션을 적절히 분리하여 유지보수성이 좋습니다. 시맨틱 HTML(
<main>)을 올바르게 사용한 점도 좋습니다.
9-12: 섹션 그룹핑이 합리적입니다.
HeroSection을 별도로 두고,PointSection과FeatureCardSection을 함께 그룹핑한 것이 시각적 계층 구조에 적합합니다.src/app/features/landing/components/Logo.tsx (1)
8-50: 테마 인식 로고 컴포넌트 구현이 우수합니다.hydration mismatch를 방지하기 위한
useMounted훅 사용과 테마별 로고 이미지 처리 로직이 적절하게 구현되어 있습니다. 반응형 디자인과 접근성 고려사항도 잘 반영되었습니다.
📌 변경 사항 개요
디자인은 기존 피그마와 차이가 없으며 적용된 색상에서 바꾸면 좋을 거 같은 색상들을 말씀해주세요!
✨ 요약
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷
브라우저
타블렛
모바일
화이트
💡 참고 사항
Summary by CodeRabbit
Summary by CodeRabbit
신규 기능
스타일
리팩터