feat: [336]랜딩 페이지 및 관련 컴포넌트 추가, 아이콘 및 이미지 파일 업데이트 #339
Conversation
|
Warning Rate limit exceeded@cywin1018 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 27 minutes and 5 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (4)
Walkthrough새로운 랜딩 페이지(/landing) 라우트를 추가하고, 이를 감싸는 BlankLayout을 도입했습니다. 랜딩 페이지 UI를 위한 MobileFrame, ScrollTopButton, KakaoShareButton 등 공용 컴포넌트를 신규 추가했으며, Router에 해당 경로를 등록했습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User as 사용자
participant Router as Router
participant Blank as BlankLayout
participant Landing as LandingPage
participant Common as 공용 컴포넌트(ScrollTop/KakaoShare)
User->>Router: /landing 접속
Router->>Blank: 경로 매칭 및 레이아웃 로드
Blank->>Landing: Outlet으로 페이지 렌더
Landing->>Common: ScrollTopButton/KakaoShareButton 마운트
Common-->>User: 스크롤/클릭 상호작용 처리
sequenceDiagram
autonumber
participant Window as Window
participant ScrollBtn as ScrollTopButton
Window-->>ScrollBtn: scroll 이벤트
ScrollBtn->>ScrollBtn: 임계치 초과 여부 계산(visible 토글)
Window-->>ScrollBtn: resize 이벤트
ScrollBtn->>ScrollBtn: 모바일 프레임 기준 right 오프셋 재계산
User->>ScrollBtn: 클릭
ScrollBtn->>Window: window.scrollTo({top:0, smooth})
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (12)
src/outlet/BlankLayout.tsx (1)
5-5: 모바일 100vh 이슈 대비해 svh 추가 권장모바일 주소창/OS UI에 의해 100vh가 과하게 커지는 문제를 줄이기 위해 svh를 함께 지정하는 편이 안전합니다.
- <div className="min-h-screen w-full bg-white"> + <div className="min-h-[100svh] min-h-screen w-full bg-white">src/common/MobileFrame.tsx (2)
16-16: min-h-screen 대신 svh 보강동일 이유로 svh를 추가해 모바일에서 뷰포트 높이 계산 이슈를 완화하세요.
- 'mx-auto w-full max-w-[390px] min-[360px]:w-[360px] min-[391px]:w-[390px] min-h-screen bg-white'; + 'mx-auto w-full max-w-[390px] min-[360px]:w-[360px] min-[391px]:w-[390px] min-h-[100svh] min-h-screen bg-white';
20-31: 가로 센터링 중복 제거바깥 래퍼의 flex/justify-center와 내부의 mx-auto가 중복입니다. 하나로 충분합니다.
- return ( - <div className="flex w-full justify-center"> - <div - className={`${baseClass} ${paddingClass}${className ? ` ${className}` : ''}`} - style={{ - paddingTop: 'env(safe-area-inset-top)', - paddingBottom: 'env(safe-area-inset-bottom)', - }} - > - {children} - </div> - </div> - ); + return ( + <div + className={`${baseClass} ${paddingClass}${className ? ` ${className}` : ''}`} + style={{ + paddingTop: 'env(safe-area-inset-top)', + paddingBottom: 'env(safe-area-inset-bottom)', + }} + > + {children} + </div> + );src/common/KakaoShareButton.tsx (1)
19-25: 작은 화면 폭(≤320px) 오버플로우 가능성과 포커스 가시성 개선
- 고정 폭 328px은 320px 기기에서 좌우가 잘릴 수 있습니다. max-width로 클램프하세요.
- 키보드 접근성을 위해 focus-visible 링 추가, 버튼에 명시적 라벨 부여 권장.
- const base = - 'flex w-[328px] items-center justify-center rounded-[16px] px-[18px] py-[18px]'; + const base = + 'flex w-[328px] max-w-[calc(100vw-32px)] items-center justify-center rounded-[16px] px-[18px] py-[18px]'; const layout = fixed ? `fixed left-1/2 -translate-x-1/2 z-[9999] ${base}` : `mx-auto mt-[58px] ${base}`; - // 시안 색상(카카오 노란색 계열) - const styles = 'bg-[#FFD400] text-gray-900 shadow-lg'; + // 시안 색상(카카오 노란색 계열) + const styles = + 'bg-[#FFD400] text-gray-900 shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black/20';또한 버튼 요소에 접근성 라벨을 추가하세요:
- <button + <button + aria-label="카카오톡에 링크 보내기" type="button"src/common/ScrollTopButton.tsx (2)
25-26: 스크롤 리스너에 passive 옵션 추가스크롤 성능 향상을 위해 passive 리스너를 사용하세요.
- window.addEventListener('scroll', onScroll); + window.addEventListener('scroll', onScroll, { passive: true });
53-62: form 내부 사용 대비: type="button" 명시예기치 않은 submit 방지를 위해 명시적으로 버튼 타입을 지정하세요.
- <button + <button + type="button" aria-label="scroll-to-top" onClick={handleClick}src/route/Router.tsx (1)
14-14: LandingPage/BlankLayout 지연 로딩으로 번들 크기/초기 TTI 절감랜딩은 최초 진입 경로가 아닐 가능성이 높아 lazy 로드가 이점이 큽니다. 아래처럼 React.lazy + Suspense로 전환을 제안합니다.
-import { useEffect } from 'react'; +import { useEffect, Suspense, lazy } from 'react'; -import BlankLayout from '@outlet/BlankLayout'; +const BlankLayout = lazy(() => import('@outlet/BlankLayout')); ... -import LandingPage from '@pages/landing/LandingPage.tsx'; +const LandingPage = lazy(() => import('@pages/landing/LandingPage'));그리고 라우트 요소에만 국소적으로 경량 fallback을 두면 됩니다:
- <Route element={<BlankLayout />}> - <Route path="/landing" element={<LandingPage />} /> - </Route> + <Route element={ + <Suspense fallback={null}> + <BlankLayout /> + </Suspense> + }> + <Route path="/landing" element={ + <Suspense fallback={null}> + <LandingPage /> + </Suspense> + } /> + </Route>Also applies to: 38-38
src/pages/landing/LandingPage.tsx (5)
20-22: 헤더 시맨틱/로고 접근성 라벨 추가헤더는 header 태그 사용, 로고에는 스크린리더 라벨을 권장합니다.
- <div className="z-10 flex h-[50px] w-full items-center justify-center bg-white"> - <MobileLogo className="h-[28px] w-[81px]" /> - </div> + <header className="z-10 flex h-[50px] w-full items-center justify-center bg-white"> + <MobileLogo className="h-[28px] w-[81px]" role="img" aria-label="두드림 로고" /> + </header>
43-50: 정보 아이콘은 장식이면 스크린리더에서 숨기기중복 낭독 방지를 위해 aria-hidden을 권장합니다.
- <InfoIcon className="h-5 w-5 shrink-0 text-gray-700" /> + <InfoIcon className="h-5 w-5 shrink-0 text-gray-700" aria-hidden="true" focusable="false" /> @@ - <InfoIcon className="h-5 w-5 shrink-0 text-gray-700" /> + <InfoIcon className="h-5 w-5 shrink-0 text-gray-700" aria-hidden="true" focusable="false" />
33-37: 헤딩 시맨틱 적용으로 접근성/SEO 강화주요 카피를 p 대신 h1/h2로 승격하는 것을 권장합니다. 클래스는 유지 가능합니다.
- <p className="mt-4 text-[28px] leading-[40px] text-white font-T02-B"> + <h1 className="mt-4 text-[28px] leading-[40px] text-white font-T02-B"> 인생 2막의 시작은 <br /> 두드림과 함께 하세요! - </p> + </h1> @@ - <p className="mt-10 w-[328px] text-[20px] font-[700] leading-[28px] text-gray-900"> + <h2 className="mt-10 w-[328px] text-[20px] font-[700] leading-[28px] text-gray-900"> 퇴직 후 , 나에게 꼭 맞는 <br /> 두번째 커리어는? - </p> + </h2> @@ - <p className="mt-10 w-[328px] text-center text-[22px] font-[700] text-gray-900"> + <h2 className="mt-10 w-[328px] text-center text-[22px] font-[700] text-gray-900"> 두드림에서 나에게 딱 맞는 <br /> 직업을 추천받아보세요! - </p> + </h2> @@ - <p className="mt-8 w-[328px] text-center text-[22px] font-[700] text-gray-900"> + <h2 className="mt-8 w-[328px] text-center text-[22px] font-[700] text-gray-900"> 혼자 준비하려니 막막하셨나요? - </p> + </h2> @@ - <p className="mt-6 w-[328px] text-center text-[22px] font-[700] text-gray-900"> + <h2 className="mt-6 w-[328px] text-center text-[22px] font-[700] text-gray-900"> 두드림과 함께 해봐요! - </p> + </h2>Also applies to: 65-69, 100-104, 121-123, 137-139
51-52: 한글 띄어쓰기/문장부호 교정(사용자 노출 문구)작은 오탈자이지만 첫인상에 직접 영향이 있어 교정 권장합니다.
- 카카오톡에 링크 보내기 버튼을 누른 뒤, PC로 접속해보세요! + 카카오톡에 링크 보내기 버튼을 누른 뒤, PC로 접속해 보세요! @@ - 퇴직 후 , 나에게 꼭 맞는 + 퇴직 후, 나에게 꼭 맞는 @@ - 두번째 커리어는? + 두 번째 커리어는? @@ - 아이들을 다 키우고 나니 어떤 일을 해야할지 모르겠어 + 아이들을 다 키우고 나니 어떤 일을 해야 할지 모르겠어 @@ - 직업을 추천받아보세요! + 직업을 추천받아 보세요! @@ - 같이 준비하는 드리머들의 할 일을 보며 - <br />내 할 일을 작성해보세요 + 같이 준비하는 드리머들의 할 일을 보며 + <br />내 할 일을 작성해 보세요 @@ - 두드림에서 직업,학원,구직 정보까지 + 두드림에서 직업, 학원, 구직 정보까지Also applies to: 66-69, 83-84, 101-104, 125-127, 141-144
172-172: ScrollTopButton 항상 노출(showAfter=0) 재검토0이면 페이지 상단에서도 버튼이 떠 UX를 방해할 수 있습니다. 150~300px 정도로 노출 임계값을 두는 것을 제안합니다.
- <ScrollTopButton offsetBottomPx={100} showAfter={0} withinMobileFrame /> + <ScrollTopButton offsetBottomPx={100} showAfter={200} withinMobileFrame />
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (12)
src/assets/icons/landing/info.svgis excluded by!**/*.svgsrc/assets/icons/landing/kakao.svgis excluded by!**/*.svgsrc/assets/icons/landing/up.svgis excluded by!**/*.svgsrc/assets/icons/up.svgis excluded by!**/*.svgsrc/assets/images/landing/1.pngis excluded by!**/*.pngsrc/assets/images/landing/10.pngis excluded by!**/*.pngsrc/assets/images/landing/2.pngis excluded by!**/*.pngsrc/assets/images/landing/3.pngis excluded by!**/*.pngsrc/assets/images/landing/4.pngis excluded by!**/*.pngsrc/assets/images/landing/5.pngis excluded by!**/*.pngsrc/assets/images/landing/6.pngis excluded by!**/*.pngsrc/assets/images/landing/9.pngis excluded by!**/*.png
📒 Files selected for processing (6)
src/common/KakaoShareButton.tsx(1 hunks)src/common/MobileFrame.tsx(1 hunks)src/common/ScrollTopButton.tsx(1 hunks)src/outlet/BlankLayout.tsx(1 hunks)src/pages/landing/LandingPage.tsx(1 hunks)src/route/Router.tsx(3 hunks)
🔇 Additional comments (2)
src/route/Router.tsx (1)
107-109: /landing 라우트 추가 구성 적절BlankLayout 아래에 분리해 둔 점 좋습니다. 기존 레이아웃과 충돌 없어 보입니다.
src/pages/landing/LandingPage.tsx (1)
173-173: iOS 안전 영역(safe-area) 대응 확인 요청고정형 공유 버튼은 iPhone 하단 홈 인디케이터와 겹칠 수 있습니다. KakaoShareButton 내부에서 env(safe-area-inset-bottom)를 고려하는지 확인 부탁드립니다. 미대응 시 padding-bottom 보강이 필요합니다.
| <img | ||
| src={LandingHeroImg} | ||
| alt="landing-hero" | ||
| className="absolute bottom-[140px] left-1/2 z-10 h-[200px] w-[200px] -translate-x-1/2" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
LCP(히어로 이미지) 최적화: fetchpriority/명시 크기 지정
히어로 이미지는 LCP 후보이므로 우선순위를 높이고 레이아웃 시프트를 줄이기 위해 명시 크기와 fetchpriority를 권장합니다. alt도 더 구체적으로요.
- <img
- src={LandingHeroImg}
- alt="landing-hero"
- className="absolute bottom-[140px] left-1/2 z-10 h-[200px] w-[200px] -translate-x-1/2"
- />
+ <img
+ src={LandingHeroImg}
+ alt="두드림 랜딩 히어로 일러스트"
+ className="absolute bottom-[140px] left-1/2 z-10 h-[200px] w-[200px] -translate-x-1/2"
+ width={200}
+ height={200}
+ loading="eager"
+ decoding="async"
+ fetchpriority="high"
+ />📝 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.
| <img | |
| src={LandingHeroImg} | |
| alt="landing-hero" | |
| className="absolute bottom-[140px] left-1/2 z-10 h-[200px] w-[200px] -translate-x-1/2" | |
| /> | |
| </div> | |
| <img | |
| src={LandingHeroImg} | |
| alt="두드림 랜딩 히어로 일러스트" | |
| className="absolute bottom-[140px] left-1/2 z-10 h-[200px] w-[200px] -translate-x-1/2" | |
| width={200} | |
| height={200} | |
| loading="eager" | |
| decoding="async" | |
| fetchpriority="high" | |
| /> |
🤖 Prompt for AI Agents
In src/pages/landing/LandingPage.tsx around lines 56 to 61, the hero image is an
LCP candidate but currently lacks explicit width/height and fetch priority and
uses a generic alt; add explicit numeric width and height attributes matching
the rendered size (e.g., 200 x 200), add fetchpriority="high" to prioritize
loading, and replace the alt with a more descriptive string (e.g., "Product hero
illustration showing X") to reduce CLS and improve accessibility and LCP.
| <img | ||
| src={LandingBubbleImg} | ||
| alt="landing-bubble" | ||
| className="absolute bottom-0 left-1/2 h-[120px] w-auto -translate-x-1/2" | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
폴드 이하 이미지 지연 로딩/접근성 개선
접근성 향상과 초기 페인트 가속을 위해 아래 이미지들에 lazy/async를 적용하고 alt를 내용 기반으로 보완하세요.
- <img
- src={LandingBubbleImg}
- alt="landing-bubble"
+ <img
+ src={LandingBubbleImg}
+ alt="말풍선 장식 이미지"
className="absolute bottom-0 left-1/2 h-[120px] w-auto -translate-x-1/2"
+ loading="lazy"
+ decoding="async"
/>
@@
- <img
- src={Card2}
- alt="card-2"
+ <img
+ src={Card2}
+ alt="추천 카드 예시 2"
className="absolute right-[24px] top-4 z-0 h-[200px] w-auto rotate-[6deg] rounded-[20px]"
+ loading="lazy"
+ decoding="async"
/>
- <img
- src={Card1}
- alt="card-1"
+ <img
+ src={Card1}
+ alt="추천 카드 예시 1"
className="absolute left-[24px] top-0 z-10 h-[220px] w-auto -rotate-[6deg] rounded-[20px]"
+ loading="lazy"
+ decoding="async"
/>
@@
- <img
- src={LandingImg3}
- alt="landing-3"
+ <img
+ src={LandingImg3}
+ alt="서비스 기능 소개 일러스트 3"
className="mx-auto h-auto w-full"
+ loading="lazy"
+ decoding="async"
/>
@@
- <img
- src={LandingImg4}
- alt="landing-4"
+ <img
+ src={LandingImg4}
+ alt="서비스 기능 소개 일러스트 4"
className="mx-auto h-auto w-full"
+ loading="lazy"
+ decoding="async"
/>
@@
- <img
- src={LandingImg5}
- alt="landing-5"
+ <img
+ src={LandingImg5}
+ alt="서비스 기능 소개 일러스트 5"
className="mx-auto h-auto w-full"
+ loading="lazy"
+ decoding="async"
/>
@@
- <img
- src={LandingImg6}
- alt="landing-6"
+ <img
+ src={LandingImg6}
+ alt="서비스 기능 소개 일러스트 6"
className="mx-auto h-auto w-full"
+ loading="lazy"
+ decoding="async"
/>Also applies to: 108-117, 131-136, 148-152, 158-161, 165-168
🤖 Prompt for AI Agents
In src/pages/landing/LandingPage.tsx around lines 74-78 (and also apply to
108-117, 131-136, 148-152, 158-161, 165-168): the below-the-fold images need
lazy/async loading and improved alt text for accessibility and faster initial
paint. Add loading="lazy" and decoding="async" (and optionally
fetchPriority="low") attributes to these <img> tags, and replace the generic alt
values with concise, content-descriptive strings (or use alt="" and
role="presentation" only if the image is purely decorative). Ensure any
decorative images are explicitly marked as such and that all informative images
have meaningful alt text.
feat: 체크리스트 항목에 saveCount 및 isSaved 속성 추가, 기타 코드 개선
… 설정 추가; 에러 발생 시 리다이렉트 처리 로직 구현
feat: useEachTodosQuery에 retry 및 refetchOnWindowFocus 비활성화, staleTime…
🚀 풀 리퀘스트 제안
📋 작업 내용
📸 스크린샷 (선택 사항)
📄 기타
Summary by CodeRabbit