Skip to content

feat: implement login action section component with social login and … #25

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

feat: implement login action section component with social login and … #25

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.33dvh] 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 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

모바일 브라우저에서 동적으로 UI(주소창 등)가 변경될 때 레이아웃이 불안정해지는 것을 방지하기 위해 vh 대신 dvh(Dynamic Viewport Height) 단위를 사용하는 것을 권장합니다. dvh를 사용하면 CLS(Cumulative Layout Shift)를 줄여 더 나은 사용자 경험을 제공할 수 있습니다. 이는 스타일 가이드의 성능 및 UX 항목(64번 라인)과도 일치합니다.

Suggested change
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.33dvh] w-full flex-col items-center px-4 pt-6 md:max-w-[430px]"
References
  1. CLS(Cumulative Layout Shift) 이슈를 경고하고, 크기가 지정되지 않은 이미지나 로딩 중 레이아웃 밀림 현상을 방지해야 합니다. dvh 사용은 모바일에서 동적 UI로 인한 레이아웃 밀림을 방지하는 데 도움이 됩니다. (link)

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