fix: 모달 높이 vh->dvh

[dasosann]

PR Type

Bug fix

---

Description

• 모달 높이 단위를 vh에서 dvh로 변경

• 동적 뷰포트 높이 적용으로 모바일 주소창 고려

---

Diagram Walkthrough

flowchart LR
  A["vh 단위"] -- "변경" --> B["dvh 단위"]
  B -- "동적 뷰포트 높이 적용" --> C["모바일 호환성 개선"]

Loading

File Walkthrough

	Relevant files
Bug fix	LoginActionSection.tsx 모달 높이 단위 vh를 dvh로 변경                                                                          app/_components/LoginActionSection.tsx DrawerContent 컴포넌트의 높이 단위를 vh에서 dvh로 변경 동적 뷰포트 높이를 적용하여 모바일 환경에서 주소창 변화에 대응 +1/-1

---

---

✨ Describe tool usage guide:

---

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the describe tool is: pr_commands = ["/describe", ...] meaning the describe tool will run automatically on every PR. Markers are an alternative way to control the generated description, to give maximal control to the user. If you set: pr_commands = ["/describe --pr_description.use_description_markers=true", ...] the tool will replace every marker of the form pr_agent:marker_name in the PR description with the relevant content, where marker_name is one of the following: type: the PR type. summary: the PR summary. walkthrough: the PR walkthrough. diagram: the PR sequence diagram (if enabled). Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.

Custom labels The default labels of the describe tool are quite generic: [Bug fix, Tests, Enhancement, Documentation, Other]. If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases. Examples for custom labels: Main topic:performance - pr_agent:The main topic of this PR is performance New endpoint - pr_agent:A new endpoint was added in this PR SQL query - pr_agent:A new SQL query was added in this PR Dockerfile changes - pr_agent:The PR contains changes in the Dockerfile ... The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases. Note that Labels are not mutually exclusive, so you can add multiple label categories. Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.

Inline File Walkthrough 💎 For enhanced user experience, the describe tool can add file summaries directly to the "Files changed" tab in the PR page. This will enable you to quickly understand the changes in each file, while reviewing the code changes (diffs). To enable inline file summary, set pr_description.inline_file_summary in the configuration file, possible values are: 'table': File changes walkthrough table will be displayed on the top of the "Files changed" tab, in addition to the "Conversation" tab. true: A collapsable file comment with changes title and a changes summary for each file in the PR. false (default): File changes walkthrough will be added only to the "Conversation" tab.

Utilizing extra instructions The describe tool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description. Examples for extra instructions: [pr_description] extra_instructions="""- The PR title should be in the format: '<PR type>: <title>' - The title should be short and concise (up to 10 words) - ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /help_docs <QUESTION>: Given a path to documentation (either for this repository or for a given one), ask a question. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

[gemini-code-assist]

Summary of Changes

Hello @dasosann, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 모달 높이 표시 문제를 해결하기 위해 특정 컴포넌트에서 CSS 단위를 vh에서 dvh로 업데이트합니다. 이는 특히 동적인 브라우저 UI 요소로 인해 vh가 예상치 않게 동작할 수 있는 모바일 장치에서 다양한 브라우저 환경에서 모달 요소의 일관되고 정확한 렌더링을 보장합니다.

Highlights

• 모달 높이 단위 수정: LoginActionSection 컴포넌트 내 모달의 높이 단위를 vh에서 dvh로 변경하여 뷰포트 높이 계산의 정확성을 개선했습니다.

Changelog

• app/_components/LoginActionSection.tsx
  • DrawerContent 컴포넌트의 높이 단위를 vh에서 dvh로 변경했습니다.

Activity

• 이 PR에 대한 인간 활동은 아직 없습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

PR을 검토했습니다. 모바일 환경에서 동적 뷰포트 높이를 고려하기 위해 모달 높이 단위를 vh에서 dvh로 변경하신 점은 좋은 수정입니다. 이는 모바일 브라우저의 주소창 표시 여부에 따른 레이아웃 깨짐 현상을 방지하는 효과적인 방법입니다. 코드의 유지보수성을 높이기 위한 한 가지 개선 제안을 리뷰 댓글로 남겼으니 확인 부탁드립니다.

[gemini-code-assist]

리포지토리 스타일 가이드(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)