BottomInfo 사용 시 하단의 공백 문의

개발
1

안녕하세요.

약관의 주의 사항 등을 표기하기 위해 Bottom Info를 사용하려고 합니다.
이때, 하단에 의도하지 않은 공백이 발생하는데, 이게 Bottom Info를 사용 시 하단 공백을 주는 것이 의도적인 설계인지 궁금합니다.

.css-1hk1zuo {
    height: 160px;
}

해당 스타일이 gradient 옵션인 듯해 보여 이를 없애는 옵션을 주니, FixedBottomCTA의 background가 조금 어색해지더라구요. 그래서 토스에서는 어떤 식으로 사용하시는지 궁금합니다. 특히, 그냥 페이지면 괜찮아 보이는데, BottomCTA가 있으니 조금 어색해 보이더라구요.
토스 내부에서도 공백을 주는 방식으로 사용하는 것을 권장한다면 그대로 두고, 아니면… 올바른 사용 방법 공유를 요청 드리려 합니다.

제 의존성은 아래에 두었습니다. 참고 부탁드립니다.


  "dependencies": {
    "@apps-in-toss/web-framework": "^1.4.5",
    "@emotion/react": "11",
    "@toss/tds-mobile": "^2.1.2",
    "@toss/tds-mobile-ait": "^2.1.2",
    "react": "18",
    "react-dom": "18",
    "react-router-dom": "^7.9.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.36.0",
    "@types/node": "^24.6.0",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@vitejs/plugin-react": "^5.0.4",
    "eslint": "^9.36.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.22",
    "globals": "^16.4.0",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.45.0",
    "vite": "^7.1.7"
  }

++ 참고 용 사진 첨부합니다. 이런 식으로 하단에 꽤 크게 공백이 생깁니다.

image
image402×411 26.6 KB

감사합니다.

2

BottomInfo 의 bottomGradient prop을 ‘none’ 으로 주시면 없어집니다.

160 공백은 의도가 맞아요! 불필요하다고 생각되시면 해당 prop을 통해 제거해주시면 됩니다.

1개의 좋아요
3

아 감사합니다~!

none으로 하니까 버튼의 background가 흰색으로 보여서 조금 이상해 보이기도 하더라고요. 그래서 어떻게 사용하는 게 적절할까 싶었습니다.

160 공백은 의도였다는 걸 알아서 충분히 이해됐습니다. 답변해 주셔서 감사합니다 :slight_smile: