[feat] 공용 레이아웃 구조 세팅 및 랜딩페이지 ui 구현#24
Merged
Merged
Conversation
4 tasks
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Walkthrough공용 Header/Footer와 중첩 레이아웃 라우팅을 추가하고, 타이핑 인트로·재방문 스킵·reveal 애니메이션을 포함한 랜딩 페이지를 구현했습니다. 기존 HomePage 구조는 새 레이아웃 구조로 대체되었습니다. Changes공용 레이아웃과 랜딩 페이지
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant LandingLayout
participant IntroHook as useLandingIntroAnimation
participant LandingPage
Browser->>LandingLayout: 랜딩 라우트 렌더링
LandingLayout->>IntroHook: 문구와 타이핑 간격 전달
IntroHook-->>LandingLayout: typedHeadline 및 완료 상태 반환
LandingLayout->>LandingPage: Outlet context 전달
LandingPage-->>Browser: 히어로와 특징 카드 렌더링
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
🚦 CI 검증 결과
|
KyeongJooni
changed the title
![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
🤖 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/Footer.tsx`:
- Around line 21-33: Update the footer navigation links in Footer to target
valid destinations instead of the undefined /about, /terms, /privacy, and
/contact paths. Add corresponding routes and pages in the router configuration,
or reuse existing page destinations, ensuring none of these links falls through
to the * NotFound route.
In `@src/components/layout/Header.tsx`:
- Around line 146-150: Update the Header CTA in the Header component so the
“시작하기” Button navigates to the intended signup or onboarding destination instead
of remaining a no-op button. Reuse the existing routing/link pattern or click
handler used by LandingLayout, while preserving the current HeaderShell and
HeaderLogo structure.
In `@src/features/landing/components/LandingContent.tsx`:
- Around line 13-18: Connect the CTA actions in LandingContent by passing the
defined start and login handlers as onStart and onLogin props to LandingHero, or
render those buttons as links to the existing flows. Ensure both LandingHero
buttons perform their intended navigation when clicked.
In `@src/styles/index.css`:
- Around line 110-118: Update the prefers-reduced-motion media query to
explicitly reset the transform on .landing-reveal--from-top, so the header
remains onscreen when animations are disabled. Preserve the existing opacity and
animation overrides for the other reveal and typing-cursor classes.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 97f6318b-4451-450e-94b3-fa31cad10e9e
📒 Files selected for processing (19)
index.htmlsrc/components/Footer.tsxsrc/components/Header.tsxsrc/components/layout/.gitkeepsrc/components/layout/AuthLayout.tsxsrc/components/layout/Footer.tsxsrc/components/layout/Header.tsxsrc/components/layout/LandingLayout.tsxsrc/features/landing/components/LandingContent.tsxsrc/features/landing/components/LandingFeatureCard.tsxsrc/features/landing/components/LandingFeatureGrid.tsxsrc/features/landing/components/LandingHero.tsxsrc/features/landing/hooks/useLandingIntroAnimation.tssrc/pages/HomePage/HomePage.tsxsrc/pages/LandingPage/LandingPage.tsxsrc/routes/router.tsxsrc/styles/index.csssrc/utils/.gitkeepsrc/utils/cn.ts
💤 Files with no reviewable changes (3)
- src/pages/HomePage/HomePage.tsx
- src/components/Header.tsx
- src/components/Footer.tsx
Comment on lines
+21
to
+33
| <nav className="flex flex-1 items-center justify-center gap-10 text-body-small font-medium whitespace-nowrap text-text-primary"> | ||
| <Link to="/about" className="hover:text-primary-500"> | ||
| 서비스소개 | ||
| </Link> | ||
| <Link to="/terms" className="hover:text-primary-500"> | ||
| 이용약관 | ||
| </Link> | ||
| <Link to="/privacy" className="hover:text-primary-500"> | ||
| 개인정보처리방침 | ||
| </Link> | ||
| <Link to="/contact" className="hover:text-primary-500"> | ||
| 문의하기 | ||
| </Link> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
푸터 링크가 모두 NotFound로 이동합니다.
src/routes/router.tsx:8-20에는 이 네 경로가 없어서 모두 * fallback으로 매칭됩니다. 실제 페이지와 라우트를 추가한 뒤 노출하거나, 현재 존재하는 목적지로 연결하세요.
🤖 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/Footer.tsx` around lines 21 - 33, Update the footer
navigation links in Footer to target valid destinations instead of the undefined
/about, /terms, /privacy, and /contact paths. Add corresponding routes and pages
in the router configuration, or reuse existing page destinations, ensuring none
of these links falls through to the * NotFound route.
Comment on lines
+146
to
+150
| return ( | ||
| <HeaderShell className={className}> | ||
| <HeaderLogo>Job.is</HeaderLogo> | ||
| <Button className="h-12.5">시작하기</Button> | ||
| </HeaderShell> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
button_file="$(fd -a -t f '^Button\.(tsx|ts)$' src/components/common | head -n 1)"
test -n "$button_file"
ast-grep outline "$button_file" --items all
sed -n '1,260p' "$button_file"
rg -n -C 3 '<Header\s*/>|<Header\b' srcRepository: Leets-Official/Job-is-FE
Length of output: 2185
src/components/layout/Header.tsx:146-150 — 랜딩 헤더 CTA에 목적지를 연결하세요. Button은 기본 <button type="button">이라 시작하기가 현재 아무 동작도 하지 않습니다. LandingLayout의 <Header />에 가입/온보딩 링크나 클릭 핸들러를 넣어야 합니다.
🤖 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/Header.tsx` around lines 146 - 150, Update the Header
CTA in the Header component so the “시작하기” Button navigates to the intended
signup or onboarding destination instead of remaining a no-op button. Reuse the
existing routing/link pattern or click handler used by LandingLayout, while
preserving the current HeaderShell and HeaderLogo structure.
Comment on lines
+13
to
+18
| <LandingHero | ||
| headline={headline} | ||
| typedHeadline={typedHeadline} | ||
| isIntroComplete={isIntroComplete} | ||
| shouldPlayRevisitAnimation={shouldPlayRevisitAnimation} | ||
| /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
CTA에 실제 전환 동작을 연결하세요.
onStart와 onLogin을 전달하지 않아 LandingHero의 두 버튼은 클릭해도 아무 동작을 하지 않습니다. 정의된 시작/로그인 흐름으로 이동하는 핸들러를 전달하거나 링크로 렌더링하세요.
🤖 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/features/landing/components/LandingContent.tsx` around lines 13 - 18,
Connect the CTA actions in LandingContent by passing the defined start and login
handlers as onStart and onLogin props to LandingHero, or render those buttons as
links to the existing flows. Ensure both LandingHero buttons perform their
intended navigation when clicked.
Comment on lines
+110
to
+118
| @media (prefers-reduced-motion: reduce) { | ||
| .landing-reveal { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .landing-reveal--visible, | ||
| .landing-typing-cursor::after { | ||
| animation: none; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
동작 줄이기 설정에서도 헤더를 표시하세요.
landing-reveal--from-top의 translateY(-100%)는 slide-down 애니메이션으로만 복구됩니다. 이 미디어쿼리가 애니메이션을 제거하면 헤더가 화면 밖에 남습니다.
수정 예시
`@media` (prefers-reduced-motion: reduce) {
+ .landing-reveal--from-top {
+ transform: translateY(0);
+ }
+
.landing-reveal {
opacity: 1;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| @media (prefers-reduced-motion: reduce) { | |
| .landing-reveal { | |
| opacity: 1; | |
| } | |
| .landing-reveal--visible, | |
| .landing-typing-cursor::after { | |
| animation: none; | |
| } | |
| `@media` (prefers-reduced-motion: reduce) { | |
| .landing-reveal--from-top { | |
| transform: translateY(0); | |
| } | |
| .landing-reveal { | |
| opacity: 1; | |
| } | |
| .landing-reveal--visible, | |
| .landing-typing-cursor::after { | |
| animation: none; | |
| } |
🤖 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/styles/index.css` around lines 110 - 118, Update the
prefers-reduced-motion media query to explicitly reset the transform on
.landing-reveal--from-top, so the header remains onscreen when animations are
disabled. Preserve the existing opacity and animation overrides for the other
reveal and typing-cursor classes.
j2nnif2r
approved these changes
Jul 23, 2026
| @@ -1,5 +1,5 @@ | |||
| <!doctype html> | |||
| <html lang="en"> | |||
| <html lang="ko"> | |||
This was referenced Jul 24, 2026
Merged
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣ 연관된 이슈
📝 작업 내용
AuthLayout(빈 레이아웃),LandingLayout(헤더+콘텐츠+푸터) 두 개의 라우트 레이아웃을 추가하고,router.tsx에서 페이지를 각 레이아웃 그룹 아래로 재배치했습니다.Header/Footer를src/components최상위에서src/components/layout로 옮기고, Figma variant(default/carousel/tab/adm)에 맞춰 헤더를 재구현했습니다.HomePage를 걷어내고 실제 Figma 랜딩 디자인 기준의LandingPage와src/features/landing하위 도메인 컴포넌트(LandingHero,LandingContent,LandingFeatureGrid,LandingFeatureCard)로 대체했습니다.useLandingIntroAnimation훅을 구현했습니다. 헤더는translateY(-100%)기반 슬라이드다운 애니메이션으로 별도 처리했습니다.cn()유틸리티가 프로젝트 커스텀text-*크기 클래스를 인식하지 못해 다른 텍스트 클래스와 병합 시 잘못 처리되던 문제를tailwind-merge의extendTailwindMerge로 수정했습니다.<html lang="en">이 실제 한국어 콘텐츠와 맞지 않아 크롬이 자동 번역을 제안하던 문제를lang="ko"로 수정했습니다.h-[50px],max-w-[1200px]같은 임의값 클래스를 프로젝트 Tailwind 스케일에 맞는h-12.5,max-w-300으로 정리했습니다.✅ 체크사항
📸 스크린샷 (UI 변경 시)
📦 추가한 라이브러리 (선택)
💬 리뷰 요구사항 (선택)
Summary by CodeRabbit