design: 로그인 및 사이드바 UI 개선

[wlrnjs]

Pull Request

관련 이슈

• close #이슈번호

작업 내용

• 로그인
  • 화면 중앙 영역에서 불필요한 스크롤이 발생하지 않도록 수정했습니다.
  • 상단 아이콘 및 “찾아줘! API 모니터링” 텍스트 클릭 시 메인 페이지로 이동하도록 수정했습니다.
• 사이드바
  • 상단 아이콘 및 “찾아줘! API 모니터링” 텍스트 클릭 시 메인 페이지로 이동하도록 수정했습니다.
  • 비로그인 상태에서 하단에 로그인 버튼이 노출되도록 수정했습니다.
  • 로그인 상태에서 하단 로그아웃 버튼의 디자인을 시안에 맞게 수정했습니다.
  • 일부 디자인 토큰을 적용했습니다.

참고 사항

• 피그마 시안에서 일부 디자인 토큰이 누락된 부분을 확인하여 코멘트를 남겨두었습니다.
• 해당 부분은 피그마 반영 후 추가로 개선하겠습니다.

체크리스트

• 기능이 정상 동작하는지 확인
• 불필요한 코드/주석 제거

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
finditem-monitoring	Ready	Preview, Comment	Jun 21, 2026 4:35am
finditem-monitoring-server	Ready	Preview, Comment	Jun 21, 2026 4:35am

[gemini-code-assist]

Summary of Changes

Hello, 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은 로그인 페이지와 사이드바의 사용자 경험 및 디자인을 개선하는 데 목적이 있습니다. 불필요한 스크롤 방지, 내비게이션 편의성 증대, 그리고 디자인 시스템 토큰 적용을 통해 전반적인 UI 완성도를 높였습니다.

Highlights

• 로그인 페이지 UI 개선: 로그인 화면의 레이아웃을 수정하여 불필요한 스크롤을 제거하고, 디자인 토큰을 적용하여 스타일을 정돈했습니다.
• 사이드바 내비게이션 및 디자인 업데이트: 사이드바의 로고와 텍스트에 메인 페이지 이동 기능을 추가하고, 로그인 상태에 따른 버튼 디자인과 비로그인 시 로그인 버튼 노출 기능을 구현했습니다.
• 디자인 토큰 적용: TextField 및 기타 컴포넌트에 정의된 디자인 토큰을 적용하여 일관된 UI를 유지하도록 했습니다.

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 the 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 counterproductive. 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.

---

화면 속 정돈된 선과 색, 사용자 마음을 향한 작은 배려. 스크롤은 줄고 기능은 더해, 더 나은 경험을 향해 나아가네.

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

This pull request updates styling, typography, and navigation links across the login page and sidebar components. The feedback focuses on improving accessibility and user experience in the sidebar: first, by adding an aria-label to the main logo link so screen readers can identify its destination when the sidebar is collapsed; and second, by replacing the programmatic navigation button for login with a standard Link component to support native browser behaviors like opening in a new tab.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[junye0l]

수고하셨습니다.

간단한 코멘트만 확인해주세요.

체크리스트 확인도 부탁드립니다!

[wlrnjs]

코멘트 반영했습니다!