refactor: BottomCta 공통 컴포넌트 개선 및 페이지별 개별 구현 통합

[kanghaeun]

작업 요약

• 모바일에서 바텀 CTA가 화면 최하단에 붙어 보이던 문제 개선 (하단 패딩 20px → 32px)
• 페이지마다 인라인으로 제각각 구현되던 CTA 상단 페이드 그라데이션을 BottomCta 공통 컴포넌트로 통합

배경

1. CTA의 화면 하단 밀착

모바일에서 바텀 CTA가 화면 최하단에 너무 붙어 있어 여백이 부족했음

→ 하단 패딩을 20px → 32px로 상향해 여유 확보.

2. 페이지별 페이드 그라데이션 구현 방식 불일치

CTA 위 페이드 그라데이션이 페이지마다 인라인으로 개별 구현되어 있었음.

• 66.878px 매직 넘버 사용
• #F4F4F6 색상 하드코딩
• 수동 fixed 컨테이너 중복 구현

→ BottomCta 공통 컴포넌트로 통합.

작업 세부 내용

1. BottomCta 공통 컴포넌트 그라데이션 prop 추가

패딩 상향

위치	변경
위	12px (유지)
아래	20px → 32px
양옆	20px (유지)

hasGradient prop 추가

• CTA 상단에 높이 36px 페이드 그라데이션 표시
• 색상: #F4F4F6 0% → bg/layer/basement

기본 배경 승격

• 모든 사용처가 공통으로 쓰던 bg-bg-layer-basement를 컴포넌트 기본 배경으로 승격

---

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

페이지	기존	변경
위시에서 가져오기 (ByWishContent)	인라인 그라데이션 div + 수동 fixed 컨테이너	<BottomCta hasGradient>
토너먼트 결과 (ResultClient)	"홈으로 가기" 수동 fixed 컨테이너	<BottomCta hasGradient> (z-index 30 동일 유지)

---

3. 기존 사용처 오버라이드 정리

기본값과 중복된 bg-bg-layer-basement, pb-8, py-3 오버라이드 제거.

대상

• 아이템 편집 폼 (아카이브 위시 ×2, 토너먼트 아이템)
• 마이페이지 수정
• 회원 탈퇴

스크린샷

연관 이슈

closes #344

Summary by CodeRabbit

• 개선 사항
  • 여러 화면의 하단 고정 버튼 영역을 통일된 레이아웃으로 개선했습니다.
  • 토너먼트 생성 및 결과 화면의 하단 CTA가 일관된 방식으로 표시됩니다.
  • 하단 영역의 배경과 여백을 정리해 화면별 표시 방식이 개선되었습니다.
  • 필요한 경우 CTA 상단에 그라데이션 효과가 적용됩니다.
  • 기존 뒤로 가기, 다음 단계, 홈 이동 및 로딩·비활성화 동작은 동일하게 유지됩니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
depromeet	Ready	Preview, Comment	Jul 17, 2026 1:07pm
piki	Ready	Preview, Comment	Jul 17, 2026 1:07pm

[github-actions]

Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

BottomCta에 공통 배경·패딩과 선택적 그라데이션을 추가하고, 여러 페이지의 하단 CTA를 BottomCta 기반으로 통합했습니다. 기존 버튼의 이벤트와 상태 동작은 유지됩니다.

Changes

BottomCta 공통화

Layer / File(s)	Summary
BottomCta 스타일 및 옵션 확장 apps/web/src/components/bottom-cta/index.tsx	hasGradient prop을 추가하고 기본 배경·하단 패딩 및 조건부 상단 그라데이션을 구현했습니다.
위시 기반 토너먼트 CTA 전환 apps/web/src/app/tournament/[id]/create/by-wish/_components/ByWishContent.tsx	기존 고정 CTA 구조를 BottomCta 기반으로 변경했으며 뒤로 가기, 다음 버튼의 비활성화·로딩·클릭 동작은 유지했습니다.
기존 CTA 사용처 통합 apps/web/src/app/archive/wish/[id]/_components/ItemEditForm.tsx, apps/web/src/app/mypage/edit/_components/EditForm.tsx, apps/web/src/app/mypage/withdraw/_components/WithdrawConfirmDialog.tsx, apps/web/src/app/tournament/[id]/item/[itemId]/_components/ItemEditForm.tsx, apps/web/src/app/tournament/[id]/result/_components/ResultClient.tsx	여러 화면에서 BottomCta에 전달하던 개별 스타일을 제거하고 결과 화면의 고정 CTA를 BottomCta 래퍼로 교체했습니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: iodio89

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Issue #344의 BottomCta 그라데이션 추가, 페이지별 인라인 CTA 교체, 기존 사용처 정리 요구와 대체로 일치합니다.
Out of Scope Changes check	✅ Passed	요구사항과 무관한 변경은 보이지 않으며, 수정된 파일들도 모두 BottomCta 공통화 범위 안에 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	BottomCta 공통 컴포넌트 개선과 페이지별 개별 CTA 구현 통합을 잘 요약한 제목입니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/344-common-bottom-cta-gradient

---

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