Skip to content

fix: 모달 하단이 카카오 하단바에 가려지는 문제 해결을 위해 pb추가 #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dasosann merged 1 commit into from
Feb 11, 2026
Merged

fix: 모달 하단이 카카오 하단바에 가려지는 문제 해결을 위해 pb추가 #26

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/_components/LoginActionSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function ScreenLoginActionSection() {
</div>
<DrawerContent
showHandle={false}
className="mx-auto flex h-[44.33vh] w-full flex-col items-center px-4 pt-6 md:max-w-[430px]"
className="mx-auto flex h-[44.33vh] w-full flex-col items-center px-4 pt-6 pb-[32px] md:max-w-[430px]"
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Tailwind CSS의 임의 값(arbitrary value) 대신 디자인 시스템의 스페이싱 단위를 사용하는 것이 일관성 및 유지보수 측면에서 더 좋습니다. 32px는 Tailwind의 기본 스페이싱 스케일에서 8에 해당하므로 (2rem), pb-[32px] 대신 pb-8을 사용하시는 것을 권장합니다. 이렇게 하면 다른 컴포넌트들과의 간격 일관성을 유지하고, 향후 디자인 시스템 변경에 더 유연하게 대응할 수 있습니다.

Suggested change
className="mx-auto flex h-[44.33vh] w-full flex-col items-center px-4 pt-6 pb-[32px] md:max-w-[430px]"
className="mx-auto flex h-[44.33vh] w-full flex-col items-center px-4 pt-6 pb-8 md:max-w-[430px]"
References
  1. 스타일링 시 Tailwind CSS의 기본 유틸리티 클래스 사용을 우선해야 합니다. 임의 값을 사용하는 것보다 테마에 정의된 스페이싱 단위를 사용하면 코드의 일관성과 유지보수성이 향상됩니다. (link)

>
<DrawerTitle className="sr-only">다른 로그인 방법</DrawerTitle>
<div className="flex w-full flex-col items-start gap-2">
Expand Down
Loading