feat: 랜딩페이지 UI 구현

[moo1677]

1) 작업한 이슈번호

12번

2) 변경 요약 (What & Why)

• 무엇을 변경했는지: 랜딩페이지 UI 구현
• 왜 변경했는지(문제/목표): UI 구현

3) 스크린샷/동영상 (UI 변경 시)

전/후 비교, 반응형(모바일/데스크톱) 캡쳐

• Before:
• After:

4) 상세 변경사항

• 라우팅/페이지:
• 컴포넌트:
• 상태관리:
• API 호출:
• 스타일:
• 기타:

5) 참고사항

Summary by CodeRabbit

릴리스 노트

• New Features
  • 랜딩 페이지 구성 추가: 헤더, 히어로 섹션, 기능 소개, 미리보기 섹션이 포함된 통합 홈페이지 레이아웃 구현
  • 기능 카드 컴포넌트 추가: 아이콘, 제목, 설명으로 구성된 재사용 가능한 UI 요소 제공
  • 학습 습관 미리보기 섹션 추가: 4가지 핵심 기능을 시각적으로 소개하는 콘텐츠 추가

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

안내

개요

앱의 빈 홈 페이지를 Header, Hero, Feature, Demo 컴포넌트로 구성된 완전한 랜딩 페이지로 변경했습니다. 새로운 landing 폴더에 재사용 가능한 presentational 컴포넌트 6개를 추가했습니다.

변경사항

응집군 / 파일	변경 요약
메인 페이지 진입점 app/page.tsx	빈 반환값을 4개의 imported 컴포넌트(Header, Hero, Feature, Demo)로 구성된 구조화된 랜딩 페이지로 교체
헤더 컴포넌트 components/landing/LandingHeader.tsx	DevFlow 제목과 "로그인", "시작하기" 버튼이 있는 네비게이션 바 렌더링
히어로 섹션 컴포넌트 components/landing/HeroSection.tsx	뱃지, 큰 제목("매일 성장하는 개발자의 여정"), 부제 텍스트 렌더링 (한글)
기능 섹션 컴포넌트 components/landing/FeatureCard.tsx, components/landing/FeatureSection.tsx	FeatureCardProps 타입 정의 및 아이콘, 제목, 설명을 받는 재사용 가능한 FeatureCard 컴포넌트 추가; Feature 컴포넌트가 격자 레이아웃으로 기능 목록 렌더링
데모 섹션 컴포넌트 components/landing/DemoPreview.tsx, components/landing/PreviewContent.tsx	Demo 컴포넌트가 제목, Contents 컴포넌트, 미리보기 이미지 렌더링; Contents 컴포넌트가 체크마크 아이콘과 함께 4개의 학습 습관 항목 목록 표시

예상 코드 검토 난이도

🎯 2 (Simple) | ⏱️ ~10분

시

🐰 빈 페이지에 생명을 불어넣어,
여섯 개의 새로운 컴포넌트가 춤을 춰,
랜딩 페이지는 완성되고,
개발자의 여정이 시작되나니! ✨

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f290aaa and f379ef0.

⛔ Files ignored due to path filters (1)

• public/PreviewImage.png is excluded by !**/*.png

📒 Files selected for processing (7)

• app/page.tsx
• components/landing/DemoPreview.tsx
• components/landing/FeatureCard.tsx
• components/landing/FeatureSection.tsx
• components/landing/HeroSection.tsx
• components/landing/LandingHeader.tsx
• components/landing/PreviewContent.tsx

---

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