Skip to content

fix: 모달 높이 vh->dvh #24

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: 모달 높이 vh->dvh #24

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

리포지토리 스타일 가이드(5. Code Style & Clean Code)에 따라 코드의 가독성과 유지보수성을 높이는 차원에서 제안합니다.

h-[44.33dvh]와 같이 매우 구체적인 수치를 Tailwind 클래스에 직접 사용하는 것은 '매직 넘버'가 될 수 있습니다. 이 값을 tailwind.config.js의 theme 객체에 추가하여 의미 있는 이름으로 관리하는 것을 권장합니다. 이렇게 하면 스타일 가이드에서 강조하는 시맨틱한 작명(73)을 따르면서도 일관된 디자인 시스템을 유지하는 데 도움이 됩니다.

예를 들어, tailwind.config.js에 다음과 같이 추가할 수 있습니다:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        'login-drawer': '44.33dvh',
      },
    },
  },
};

그리고 컴포넌트에서는 h-login-drawer와 같이 시맨틱한 클래스 이름을 사용할 수 있습니다. 이는 향후 값 변경이 필요할 때 한 곳에서만 수정하면 되므로 유지보수에도 유리합니다.

References
  1. 의미 있는 변수 및 함수 이름을 사용하여 코드의 가독성을 높여야 합니다. 이 경우, '매직 넘버' 대신 의미 있는 이름을 가진 테마 값을 사용하는 것이 좋습니다. (link)
  2. 스타일링 시 Tailwind 유틸리티 클래스를 우선적으로 사용하되, 재사용 가능하고 의미 있는 값들은 테마에 정의하여 일관성을 유지하는 것이 좋습니다. (link)

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