fix: 하단 바 스펙 통일 및 토스트가 CTA와 겹치는 문제

[iOdiO89]

버그 내용

토스트가 하단 CTA 버튼과 겹친다.

CTA 높이가 제각각이라서가 아니라 토스트 기본 offset(52px)이 CTA 높이(98px)보다 낮아서 CTA 영역 안에 토스트가 뜬다. CTA 가 있는 페이지는 사실상 전부 해당한다.

• 기본 CTA 높이 = pt-3(12px) + lg 버튼 h-[54px] + pb-8(32px) = 98px (components/bottom-cta/index.tsx)
• 토스트 기본 offset = 52px (components/toast/index.tsx:11)

예상 결과

• 하단 CTA 가 있는 페이지: 토스트가 CTA 보다 12px 위 → 기본형 기준 110px
• 바텀탭이 있는 페이지: 토스트가 바텀탭보다 12px 위

작업 순서

토스트 offset 을 CTA 높이 기준으로 잡으려면 CTA 높이가 먼저 한 스펙으로 모여 있어야 한다. 하단 바 스펙 통일 → 토스트 위치 순으로 진행한다.

1. 하단 바를 공통 컴포넌트/스펙으로 통일

대부분은 components/bottom-cta 를 쓰고 있고, 기본형은 98px 로 동일하다. 어긋나는 곳만 정리한다.

공통 컴포넌트를 안 쓰고 직접 fixed 로 만든 곳 (z-20 도 하드코딩)

• app/open-app/_components/AppStoreRedirect.tsx:60 — 버튼 2개 세로, pb-10
• app/open/_components/OpenLanding.tsx:87 — 텍스트 버튼 1개, pb-10

공통 컴포넌트는 쓰지만 높이가 다른 곳

• app/tournament/[id]/result/_components/ResultClient.tsx:109 — flex-col gap-6.5 pb-[30px], 버튼 행 + 홈으로 가기 링크 2줄
• app/onboarding/_components/OnboardingClient.tsx:78 — flex-col gap-6, 인디케이터 + 버튼

2. 토스트 위치 처리

정리된 CTA 높이 기준으로 offset 을 잡는다.

• 토스터 설정: components/toast/index.tsx — sonner offset / mobileOffset
• 바텀탭 덮어쓰기 규칙: styles/globals.css:258-271 — 현재 102px. 뷰포트 600px 초과/이하에서 --offset-bottom · --mobile-offset-bottom 을 각각 쓰므로 둘 다 덮어야 한다
• CTA 에는 바텀탭(data-bottom-tab-bar) 같은 식별 마커가 없다
• 삭제 모드처럼 CTA 가 탭바를 덮는 케이스도 있다 (app/archive/wish/_components/WishlistBottomBar.tsx:20 — 마커를 CTA 에 붙여 처리 중)
• 98px 은 이미 상수처럼 쓰이고 있다 (components/common/item-info-screen/index.tsx 조회 모드의 pb-[98px]) — 값을 상수로 뽑는 것도 함께 고려

확인 필요

• 높이가 다른 2곳(결과 화면·온보딩)을 기본값으로 맞출지, 그 화면만 예외로 둘지 — 디자인 확인 필요
• 바텀탭 offset 현재값 102px 이 실제 탭바 상단과 맞는지 재측정. components/bottom-tab-bar/index.tsx:238 은 fixed bottom-8(32px) 인데 globals.css 주석에는 "bottom 40px" 로 적혀 있어 어긋난다