feat: 메인페이지 UI구현

[jjjsun]

💡 개요

• 메인페이지 UI 구현
• Header/Hero/Feture/ForUser/ForOwner/Stats/Cta/Footer 섹션 구성하고, 헤더 스크롤 상태변화와 섹션 진입 애니메이션 적용
• 모바일에서 햄버거 메뉴로 네비게이션 제공하도록 UI추가

🔢 관련 이슈 링크

Closes #24

💻 작업내용

• 인트로페이지 UI 구현, 섹션별 컴포넌트 분리
  • Intro.tsx에서 Header/Hero/Feture/ForUser/ForOwner/Stats/Cta/Footer 섹션을 조합해 전체 레이아웃 구성
• Header 기능/스타일 개선
  • Hero 구간에서는 투명 헤더 유지하고, 그 이후부터 스크롤상태에 따라 헤더스타일변경
  • 마이페이지 라우팅 연결 및 로그인/회원가입 다이얼로그 오픈 연동
  • 모바일 화면에서 햄버거 메뉴 토클 추가
• 섹션별 진입 애니메이션 적용
  • 좌/우 슬라이드인과, 리스트 항목 순차등장, 아래에서 위로 순차 등장
• 애니메이션 공통 로직 개선
  • IntersectionObserver 기반 useInView 커스텀 훅 추가로 섹션별 inView 처리 공용

📌 변경사항PR

• FEAT: 새로운 기능 추가
• FIX: 버그/오류 수정
• CHORE: 코드/내부 파일/설정 수정
• DOCS: 문서 수정(README 등)
• REFACTOR: 코드 리팩토링 (기능 변경 없음)
• TEST: 테스트 코드 추가/수정
• STYLE: 스타일 변경(포맷, 세미콜론 등)

🤔 추가 논의하고 싶은 내용

• 모바일 크기 진입시 햄버거 리스트 나오는 부분 UI를 와프와 다르게 구현했는데, 디자인 관련 추가 피드백 부탁드립니다

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌이 없다(또는 브랜치에서 충돌 해결 후 PR 업데이트 완료)

Summary by CodeRabbit

• 새로운 기능

  • 랜딩 페이지 전면 재구성: 히어로(동영상 배경), 문제/해결 비교, 기능·사용자·사업주·통계·CTA 섹션 추가
  • 반응형 헤더 및 모바일 내비게이션 도입(스크롤 기반 스타일, 메뉴 패널 포함)
  • 뷰포트 진입 기반의 입장 애니메이션(스태거드 전환) 및 재사용 가능한 애니메이션 지원

• 스타일

  • 전역 스타일 업데이트(타이포그래피·줄바꿈/워드브레이크 개선) 및 UI 버튼/카드 스타일 추가

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

[coderabbitai]

📝 Walkthrough

Walkthrough

메인페이지를 전면 추가/개편: Header·Hero·ProblemSection·FeatureSection·ForUserSection·ForOwnerSection·StateSection·CtaSection·Footer와 재사용 컴포넌트(FeatureCard), IntersectionObserver 기반 useInView 훅을 도입하고 src/pages/Intro.tsx를 새 섹션들로 재구성했습니다. (50 words 이내)

Changes

코호트 / 파일(s)	변경 요약
메인 섹션 컴포넌트 src/components/main/Hero.tsx, src/components/main/ProblemSection.tsx, src/components/main/FeatureSection.tsx, src/components/main/ForUserSection.tsx, src/components/main/ForOwnerSection.tsx, src/components/main/StateSection.tsx, src/components/main/CtaSection.tsx	섹션 컴포넌트 추가. Tailwind 기반 레이아웃과 useInView 훅으로 진입 애니메이션 및 item별 stagger 적용. 주의: 비디오/이미지의 접근성(aria-hidden, alt), 애니메이션 성능(많은 관찰자/트랜지션) 점검 필요.
레이아웃 / 내비게이션 src/components/main/Header.tsx, src/components/main/Footer.tsx	Header 추가: 스크롤 상태 감지(IntersectionObserver), 모바일 패널 + body scroll lock, 라우팅 via useNavigate, 로그인/회원가입 다이얼로그 토글. Footer는 정적 링크·소셜 마크업. 주의: 모바일 메뉴의 포커스 관리(포커스트랩), id="intro" 존재 확인, ARIA 속성 검토 필요.
재사용 컴포넌트 src/components/main/FeatureCard.tsx, src/components/ui/Button.tsx*	FeatureCard 추가(아이콘·타이틀·설명). 기존 Button과 연동 사용. 주의: Button variant·타입 정의 일관성 및 기본 props 검토.
훅 src/hooks/useInView.ts	IntersectionObserver 기반 useInView 훅 추가(옵션: threshold, rootMargin, once). 주의: SSR(서버사이드) 안전성 체크, observer cleanup, 관찰 대상 null 처리 권장. 예: `if (typeof window === 'undefined'
페이지 변경 src/pages/Intro.tsx	기존 로그인/회원가입 다이얼로그 제거 후 새 섹션들(Hero → ... → Footer)로 구성된 정적 메인 페이지로 개편. 라우팅 경로와 핸들러 일관성 확인 필요.
스타일시트 src/index.css	Tailwind 및 tw-animate-css import 추가, 전역 body 규칙(word-break/overflow-wrap) 추가. 빌드 순서와 중복 CSS 영향 검토 권장.

Sequence Diagram(s)

sequenceDiagram
  participant User as 사용자
  participant Cta as CtaSection/Hero
  participant Router as react-router
  participant Page as TargetPage

  User->>Cta: 버튼 클릭
  Cta->>Router: useNavigate("/search" 또는 "/owner")
  Router->>Page: 라우트 렌더링 (/search or /owner)
  Page-->>User: 새로운 페이지 표시

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

✨ 섹션들이 모여 길을 만들고
스크롤마다 조심스레 빛이 번지네
useInView가 문을 두드리면
버튼이 길을 이어주네 — /search /owner
메인페이지, 한 뼘 더 반짝인다 🎈

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 메인페이지 UI 구현이라는 핵심 변경사항을 명확하게 요약하고 있으며, 실제 변경내역(Header/Hero/Feature/ForUser/ForOwner/Stats/Cta/Footer 섹션 구현)과 일치합니다.
Description check	✅ Passed	PR 설명이 템플릿의 모든 필수 섹션(개요, 관련 이슈, 작업내용, 변경사항, 추가 논의, 체크리스트)을 포함하며, 각 항목이 구체적이고 상세하게 작성되어 있습니다.
Linked Issues check	✅ Passed	이슈 #24의 모든 코딩 관련 요구사항(UI 구성, 라우팅 연결)이 충족되었으며, 명시된 10개 컴포넌트 파일이 모두 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 메인페이지 UI 구현이라는 이슈 범위 내에 있으며, 추가된 useInView 훅과 FeatureCard 컴포넌트도 섹션 구현에 필요한 지원 파일입니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

[dew102938]

고생 많으셨습니다! 추가로 리뷰 달자면,

공통

• shadcn/ui 사용 중이고 cn.ts가 이미 있어서, 조건부 className은 .join() 대신 cn으로 통일하면 좋을 것 같습니다
• 모바일 화면에서 자연스러운 줄바꿈을 위해 긴 텍스트들은 break keep 속성 추가하면 좋을 것 같아요

헤더

• 800px 정도의 해상도에서 헤더 공간이 좁아져 글자가 의도치 않게 줄바꿈됩니다(소/개, 식당 예/약 등) 햄버거 메뉴로 전환되는 분기점을 md가 아닌 lg로 조정하면 더 자연스러울 것 같아요
• 제가 확인한 환경(개발자 도구-기기 툴바 전환-모바일)에서는 헤더만 길어지는 현상이 있습니다. 시간 되실 때 한 번 확인해주세요!

[coderabbitai]

Actionable comments posted: 4

🤖 Fix all issues with AI agents

In `@src/components/main/Header.tsx`:
- Around line 202-215: The switch handlers (onSwitchToSignup/onSwitchToLogin)
currently only open the target dialog which can cause both dialogs to appear
briefly; update these handlers so they first close the current dialog (call
setLoginOpen(false) when switching to signup, or setSignupOpen(false) when
switching to login) then open the target dialog—use a short defer (e.g.,
setTimeout(..., 0) or nextTick) if needed to ensure the close state is applied
before calling setSignupOpen(true)/setLoginOpen(true) in the LoginDialog and
SignupDialog props.
- Around line 99-107: The nav mapping in the Header component uses a plain <a
href={item.href}> which causes full page reloads; import Link from
react-router-dom and replace the anchor with <Link to={item.href} ...>
preserving key, className (navLinkClass) and {item.label}; ensure you add the
import for Link at the top of Header.tsx and handle any external URLs (if any)
by falling back to <a> when item.href is an absolute/external link.

In `@src/components/main/Hero.tsx`:
- Around line 12-28: The background <iframe> in Hero.tsx is receiving keyboard
focus; update the <iframe> element (the one with className="w-full h-full
object-cover" and title="Hero Video") to be excluded from accessibility focus by
adding aria-hidden="true" and tabIndex={-1} (optionally role="presentation") so
it is not reachable by keyboard or screen readers since it is purely decorative.

In `@src/hooks/useInView.ts`:
- Around line 16-31: Guard against environments without IntersectionObserver by
checking typeof IntersectionObserver !== "undefined" before creating one and
provide a graceful fallback (e.g., setInView(true/false) or skip observing) so
mounting/tests won't throw; in the useEffect that reads ref.current, only create
the IntersectionObserver if supported, otherwise handle fallback. Also, when
once is true, after the first time you call setInView(true) inside the observer
callback, immediately call observer.disconnect() to stop further callbacks and
avoid leaks—ensure observer is in scope for that callback and still disconnected
in the effect cleanup via observer.disconnect() if it was created.

🧹 Nitpick comments (8)

src/components/main/CtaSection.tsx (1)

32-37: 장식 아이콘은 스크린리더에서 숨기는 게 좋아요

텍스트로 의미가 충분하니 아이콘에 aria-hidden을 추가해 중복 낭독을 줄이는 게 좋습니다.

코딩 가이드라인에 따라.

♿ 제안 수정

-            고객으로 시작하기 <ArrowRight className="w-5 h-5" />
+            고객으로 시작하기{" "}
+            <ArrowRight aria-hidden="true" focusable="false" className="w-5 h-5" />

src/components/main/Footer.tsx (1)

1-68: 내부 라우팅은 Link로, '#' 더미 링크는 비활성 처리 권장

현재 <a>는 SPA에서 전체 리로드를 유발할 수 있고, href="#"는 클릭 시 상단으로 점프합니다. 내부 경로는 Link로 바꾸고, 아직 없는 페이지는 비활성 텍스트/버튼 처리하는 편이 안전합니다.

코딩 가이드라인에 따라.

🔧 제안 수정(예시, 나머지도 동일 적용)

-import { Facebook, Instagram } from "lucide-react";
+import { Facebook, Instagram } from "lucide-react";
+import { Link } from "react-router-dom";

-                <a
-                  href="/search"
-                  className="hover:text-white transition-colors"
-                >
-                  자리 예약
-                </a>
+                <Link
+                  to="/search"
+                  className="hover:text-white transition-colors"
+                >
+                  자리 예약
+                </Link>

-                <a href="#" className="hover:text-white transition-colors">
-                  리뷰 보기
-                </a>
+                <span className="text-white/60" aria-disabled="true">
+                  리뷰 보기
+                </span>

src/components/main/ForUserSection.tsx (2)

5-11: items 배열을 컴포넌트 외부로 이동하면 좋아요

현재 items 배열이 컴포넌트 내부에 정의되어 있어서 렌더링마다 새로 생성돼요. 정적 데이터이므로 컴포넌트 외부로 이동하면 불필요한 객체 생성을 방지할 수 있어요.

♻️ 제안하는 수정

+const items = [
+  "원하는 자리를 미리 선택하고 예약",
+  "실시간 테이블 예약 현황 확인",
+  "신뢰할 수 있는 방문 후기와 평점",
+  "간편한 예약 관리 및 알림",
+  "특별한 날을 위한 프라이빗 공간 예약",
+];
+
 export default function ForUserSection() {
-  const items = [
-    "원하는 자리를 미리 선택하고 예약",
-    "실시간 테이블 예약 현황 확인",
-    "신뢰할 수 있는 방문 후기와 평점",
-    "간편한 예약 관리 및 알림",
-    "특별한 날을 위한 프라이빗 공간 예약",
-  ];
-
   const { ref: sectionRef, inView } = useInView<HTMLElement>({

---

71-73: 플레이스홀더 텍스트 접근성 개선 필요

text-white/20 (투명도 20%)은 대비가 너무 낮아서 시각적으로 거의 보이지 않아요. 플레이스홀더라도 개발 중 확인이 어려울 수 있으니, 실제 이미지로 교체되기 전까지는 text-white/50 정도로 조정하거나 aria-hidden="true"를 추가해주세요.

-<p className="text-white/20">고객 앱 화면 이미지</p>
+<p className="text-white/50" aria-hidden="true">고객 앱 화면 이미지</p>

src/components/main/FeatureSection.tsx (2)

5-30: cards 배열 정의 최적화 제안

cards 배열에 JSX 요소(icon)가 포함되어 있어서 매 렌더링마다 새로운 React 엘리먼트가 생성돼요. 아이콘 컴포넌트를 직접 저장하고 렌더링 시점에 생성하는 방식으로 변경하면 더 효율적이에요.

♻️ 제안하는 수정

+const cards = [
+  {
+    title: "자리 선택 예약",
+    desc: "식당 내 원하는 테이블을 직접 선택해서 예약하세요. 창가, 루프탑, 프라이빗룸 등 취향에 맞는 자리를 골라보세요.",
+    Icon: MapPin,
+    iconBg: "bg-[`#E3F2FD`]",
+  },
+  // ... 나머지 항목들도 동일하게 Icon: Store, Icon: Star, Icon: Search
+];

 export default function FeatureSection() {
-  const cards = [
-    {
-      title: "자리 선택 예약",
-      ...
-      icon: <MapPin className="w-8 h-8 text-[`#191919`]" />,
-    },
-    ...
-  ];
   // 렌더링에서:
   {cards.map((c, idx) => (
     ...
-    {c.icon}
+    <c.Icon className="w-8 h-8 text-[`#191919`]" />
   ))}

---

70-72: className에 불필요한 공백이 있어요

" font-extralight" 앞에 공백이 두 개 있어요. 동작에는 문제없지만 일관성을 위해 정리해주세요.

-<p className=" font-extralight text-lg text-muted-foreground leading-relaxed">
+<p className="font-extralight text-lg text-muted-foreground leading-relaxed">

src/components/main/Header.tsx (2)

50-57: Body overflow 복원 로직 개선 제안

현재 prev에 이전 overflow 값을 저장하고 복원하는데, cleanup 함수가 호출될 때 prev가 "hidden"일 수도 있어요. 또한 다른 모달과 충돌할 수 있으니, 카운터 기반 또는 전역 상태 관리 방식을 고려해보세요.

지금은 이 컴포넌트만 사용한다면 문제없지만, 추후 다른 모달/드로어가 추가되면 충돌 가능성이 있어요.

---

131-142: 모바일 메뉴 버튼 접근성 개선

aria-label이 "메뉴열기"로 고정되어 있는데, 메뉴가 열려있을 때는 "메뉴닫기"로 변경해주면 스크린 리더 사용자에게 더 명확해요.

 <button
   type="button"
   className={`md:hidden p-2 rounded-lg ${brandClass}`}
   onClick={() => setMobileOpen((v) => !v)}
-  aria-label="메뉴열기"
+  aria-label={mobileOpen ? "메뉴닫기" : "메뉴열기"}
+  aria-expanded={mobileOpen}
 >

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/main/CtaSection.tsx`:
- Around line 41-47: Replace the inline Korean "//임시" comment on the Button's
onClick handler with a tracked TODO/ FIXME that references a created issue (e.g.
"TODO(`#123`): replace temporary route '/owner' with owner registration route")
and update the code to use a shared route constant or route helper instead of
the hard-coded string in nav("/owner"); target the Button component's onClick
and the nav("/owner") call so future changes are centralized and the TODO is
traceable to the issue tracker.

In `@src/components/main/ForUserSection.tsx`:
- Around line 72-74: In ForUserSection (component ForUserSection or the JSX
block rendering the square placeholder), replace the invalid Tailwind class name
"bg-linear-to-br" with the correct "bg-gradient-to-br" in the div's className so
the background gradient is applied; ensure the rest of the gradient classes
(from-[`#2196F3`] to-[`#1976D2`]) remain unchanged.

🧹 Nitpick comments (7)

src/index.css (1)

116-128: body 스타일을 한 곳에 통합하는 게 좋아요

현재 body 스타일이 두 군데에 분리되어 있어요:

• @layer base 내부 (Line 120-122)
• @layer 외부 (Line 125-128)

@layer 외부에 정의된 스타일은 레이어 내부보다 우선순위가 높아서 의도치 않은 스타일 충돌이 발생할 수 있어요. 유지보수 측면에서도 한 곳에서 관리하는 것이 명확해요.

word-break: keep-all과 overflow-wrap: break-word는 한국어 텍스트 처리에 적절한 선택이에요 👍

♻️ body 스타일 통합 제안

 `@layer` base {
   * {
     `@apply` border-border outline-ring/50;
   }
   body {
     `@apply` bg-background text-foreground;
+    word-break: keep-all;
+    overflow-wrap: break-word;
   }
 }
-
-body {
-  word-break: keep-all;
-  overflow-wrap: break-word;
-}

src/components/main/ForUserSection.tsx (2)

6-12: items 배열을 컴포넌트 외부로 분리하면 좋아요.

현재 items 배열이 컴포넌트 내부에 정의되어 있어서 렌더링마다 새로 생성됩니다. 정적 데이터이므로 컴포넌트 바깥으로 빼면 불필요한 재생성을 방지할 수 있어요.

♻️ 제안하는 수정

 import { useInView } from "@/hooks/useInView";
 import { cn } from "@/lib/utils";
 import { CircleCheck } from "lucide-react";

+const CUSTOMER_FEATURES = [
+  "원하는 자리를 미리 선택하고 예약",
+  "실시간 테이블 예약 현황 확인",
+  "신뢰할 수 있는 방문 후기와 평점",
+  "간편한 예약 관리 및 알림",
+  "특별한 날을 위한 프라이빗 공간 예약",
+] as const;
+
 export default function ForUserSection() {
-  const items = [
-    "원하는 자리를 미리 선택하고 예약",
-    "실시간 테이블 예약 현황 확인",
-    "신뢰할 수 있는 방문 후기와 평점",
-    "간편한 예약 관리 및 알림",
-    "특별한 날을 위한 프라이빗 공간 예약",
-  ];

---

44-63: 리스트 항목에 시맨틱 HTML 사용을 권장드려요.

현재 <div>로 리스트를 구성했는데, 스크린 리더 사용자를 위해 <ul>/<li> 구조로 변경하면 접근성이 향상됩니다. 코딩 가이드라인에서도 접근성(aria) 체크를 권장하고 있어요.

♻️ 시맨틱 리스트 구조로 변경

-            <div className="space-y-4">
-              {items.map((t, idx) => (
-                <div
+            <ul className="space-y-4" aria-label="고객을 위한 기능 목록">
+              {items.map((t, idx) => (
+                <li
                   key={t}
                   className={cn(
                     "flex gap-4",
                     "transition-all duration-900 ease-out",
                     inView
                       ? "opacity-100 translate-x-0"
                       : "opacity-0 -translate-x-20",
                   )}
                   style={{
                     transitionDelay: inView ? `${200 + idx * 120}ms` : "0ms",
                   }}
                 >
-                  <CircleCheck className="w-6 h-6 text-[`#191919`]" />
+                  <CircleCheck className="w-6 h-6 text-[`#191919`]" aria-hidden="true" />
                   <span className="text-lg">{t}</span>
-                </div>
+                </li>
               ))}
-            </div>
+            </ul>

src/components/main/StateSection.tsx (2)

5-10: stats 배열을 컴포넌트 외부로 분리하면 좋겠어요.

현재 stats 배열이 컴포넌트 내부에 선언되어 있어서, 렌더링마다 새 배열 객체가 생성돼요. 정적 데이터이므로 컴포넌트 외부로 빼면 불필요한 재생성을 방지할 수 있어요.

♻️ 제안하는 수정

 import { useInView } from "@/hooks/useInView";
 import { cn } from "@/lib/utils";

+const stats = [
+  { label: "등록 식당", value: "15,000+" },
+  { label: "월간 예약", value: "500,000+" },
+  { label: "고객 만족도", value: "98%" },
+  { label: "평균 평점", value: "4.8" },
+];
+
 export default function StateSection() {
-  const stats = [
-    { label: "등록 식당", value: "15,000+" },
-    { label: "월간 예약", value: "500,000+" },
-    { label: "고객 만족도", value: "98%" },
-    { label: "평균 평점", value: "4.8" },
-  ];
-
   const { ref: sectionRef, inView } = useInView<HTMLElement>({

---

46-49: 스크린 리더 사용자를 위한 접근성 개선을 고려해보세요.

현재 구조에서 스크린 리더는 "15,000+ 등록 식당"처럼 값이 먼저 읽혀요. 맥락을 이해하기 위해 aria-label을 추가하면 더 명확한 정보 전달이 가능해요.

♿ 접근성 개선 제안

             <div
               key={s.label}
+              aria-label={`${s.label}: ${s.value}`}
               className={cn(
                 "text-center",
                 "transition-all duration-900 ease-out",
                 inView
                   ? "opacity-100 translate-y-0"
                   : "opacity-0 translate-y-20",
               )}
               style={{ transitionDelay: inView ? `${idx * 120}ms` : "0ms" }}
             >
-              <div className="text-[`#2196F3`] text-5xl mb-4">{s.value}</div>
-              <div className="text-white/90 text-xl">{s.label}</div>
+              <div className="text-[`#2196F3`] text-5xl mb-4" aria-hidden="true">{s.value}</div>
+              <div className="text-white/90 text-xl" aria-hidden="true">{s.label}</div>
             </div>

src/components/main/FeatureCard.tsx (1)

23-27: 아이콘이 장식용이라면 스크린리더에서 숨기는 처리 고려 부탁드려요.

현재 아이콘이 의미를 추가로 전달하지 않는다면, 화면 읽기기가 불필요하게 읽을 수 있어요. 텍스트가 충분하니 래퍼에 aria-hidden을 추가하는 편이 안전합니다. (아이콘이 의미를 전달해야 한다면 aria-label을 주는 방향도 고려 가능)

♿ 제안 코드

-        <div
-          className={`w-16 h-16 ${iconBg} flex items-center justify-center rounded-2xl mb-8`}
-        >
-          {icon}
-        </div>
+        <div
+          className={`w-16 h-16 ${iconBg} flex items-center justify-center rounded-2xl mb-8`}
+          aria-hidden="true"
+        >
+          {icon}
+        </div>

As per coding guidelines, ...

src/components/main/CtaSection.tsx (1)

8-12: 기본값과 동일한 옵션은 생략해도 괜찮아요.

useInView 훅의 기본값(threshold: 0.3, rootMargin: "0px 0px -10% 0px", once: true)과 동일한 옵션을 전달하고 있어서, 생략하면 코드가 더 깔끔해질 수 있어요.

♻️ 간결하게 수정하는 예시

-  const { ref: sectionRef, inView } = useInView<HTMLElement>({
-    threshold: 0.3,
-    rootMargin: "0px 0px -10% 0px",
-    once: true,
-  });
+  const { ref: sectionRef, inView } = useInView<HTMLElement>();

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/main/CtaSection.tsx`:
- Around line 20-21: The class string in CtaSection.tsx uses a nonstandard
Tailwind duration "duration-900" and the element lacks ARIA for dynamic content;
replace "duration-900" with a standard Tailwind value like "duration-700" (or
install/verify the tw-animate-css package if you intend to keep a custom
duration), and add an appropriate ARIA attribute (e.g., aria-live="polite"
and/or a concise aria-label) to the element that renders the animated content
(the element using className={cn(...)} and the inView conditional classes) so
the animation works with supported durations and is accessible.

🧹 Nitpick comments (4)

src/components/main/CtaSection.tsx (1)

8-12: useInView 옵션이 기본값과 동일해요.

현재 전달하는 옵션들이 useInView 훅의 기본값과 완전히 동일해서, 옵션 객체를 생략하면 코드가 더 간결해질 것 같아요.

♻️ 제안

-  const { ref: sectionRef, inView } = useInView<HTMLElement>({
-    threshold: 0.3,
-    rootMargin: "0px 0px -10% 0px",
-    once: true,
-  });
+  const { ref: sectionRef, inView } = useInView<HTMLElement>();

src/components/main/ForUserSection.tsx (3)

6-12: items 배열을 컴포넌트 외부로 이동하면 불필요한 재생성을 방지할 수 있어요.

현재 items 배열이 컴포넌트 내부에 정의되어 있어서, 렌더링마다 새로운 배열 객체가 생성돼요. 정적 데이터이므로 컴포넌트 외부로 이동하면 메모리 효율이 좋아질 거예요.

♻️ 제안

 import { useInView } from "@/hooks/useInView";
 import { cn } from "@/lib/utils";
 import { CircleCheck } from "lucide-react";

+const ITEMS = [
+  "원하는 자리를 미리 선택하고 예약",
+  "실시간 테이블 예약 현황 확인",
+  "신뢰할 수 있는 방문 후기와 평점",
+  "간편한 예약 관리 및 알림",
+  "특별한 날을 위한 프라이빗 공간 예약",
+] as const;
+
 export default function ForUserSection() {
-  const items = [
-    "원하는 자리를 미리 선택하고 예약",
-    "실시간 테이블 예약 현황 확인",
-    "신뢰할 수 있는 방문 후기와 평점",
-    "간편한 예약 관리 및 알림",
-    "특별한 날을 위한 프라이빗 공간 예약",
-  ];

---

44-63: 리스트 항목에 시맨틱 HTML(ul/li)을 사용하면 접근성이 향상돼요.

현재 div로 리스트를 렌더링하고 있는데, 스크린 리더 사용자를 위해 ul/li 태그를 사용하면 "5개 항목 목록"처럼 컨텍스트를 제공할 수 있어요.

♻️ 제안

-            <div className="space-y-4">
-              {items.map((t, idx) => (
-                <div
+            <ul className="space-y-4 list-none">
+              {ITEMS.map((t, idx) => (
+                <li
                   key={t}
                   className={cn(
                     "flex gap-4",
                     ...
                   )}
                   ...
                 >
                   <CircleCheck className="w-6 h-6 text-[`#191919`]" />
                   <span className="text-lg">{t}</span>
-                </div>
+                </li>
               ))}
-            </div>
+            </ul>

---

14-18: useInView 옵션이 기본값과 동일해요.

CtaSection과 마찬가지로, 여기서도 기본값과 동일한 옵션을 전달하고 있어서 생략 가능해요.

♻️ 제안

-  const { ref: sectionRef, inView } = useInView<HTMLElement>({
-    threshold: 0.3,
-    rootMargin: "0px 0px -10% 0px",
-    once: true,
-  });
+  const { ref: sectionRef, inView } = useInView<HTMLElement>();