Skip to content

refactor: 바텀 CTA 그라데이션 공통화 #344

Description

@kanghaeun

구현할 기능

  • 하단 고정 CTA 위에 "스크롤 콘텐츠 페이드" 그라데이션을 얹는 패턴이 여러 페이지에서 반복되고 있으나, 각자 인라인으로 구현되어 높이·색상이 제각각임
  • 공통 BottomCta 컴포넌트에 그라데이션 옵션을 추가

작업 상세 내용

1. BottomCta 공통 컴포넌트 개선

  • hasGradient prop 추가 — CTA 상단에 높이 36px 페이드 그라데이션(F4F4F6 0% → bg/layer/basement) 표시
  • 그라데이션 사용 시 CTA 본체 배경을 bg-bg-layer-basement로 채워 끝색과 연결
  • 서브픽셀 헤어라인 방지를 위해 그라데이션을 CTA 상단에 1px 겹침 처리
  • 패딩 디자인 스펙 반영: 위 12 / 아래 32 / 양옆 20px

2. 페이지별 개별 구현을 BottomCta로 대체

  • tournament/[id]/create/by-wish/_components/ByWishContent.tsx — 인라인 그라데이션 div + 버튼 행 → <BottomCta hasGradient> 로 교체
  • tournament/[id]/result 하단 CTA (영수증 저장 / 토너먼트 공유) — 동일 패턴 적용
  • 기존 BottomCta 사용처 4곳(아이템 수정 폼 ×2, 마이페이지 수정, 회원 탈퇴) — 패딩 변경(pb-5pb-8) 영향 확인 및 필요 시 그라데이션 적용 여부 결정

Metadata

Metadata

Assignees

Labels

refactorExtra attention is needed

Type

Fields

No fields configured for Task.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions