[FIX] 공지사항 리스트 호버 시 날짜 영역 레이아웃 깨짐 수정(#414)#415
Conversation
Summary of ChangesHello @ganimjeong, I'm Gemini Code Assist1! 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은 공지사항 리스트에서 항목에 마우스를 올렸을 때 날짜와 작성자 정보가 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
공지사항 목록에서 항목에 마우스를 올렸을 때 fontWeight가 변경되면서 발생하는 레이아웃 깨짐 문제를 해결하기 위해 white-space: nowrap 속성을 추가하신 것을 확인했습니다. 올바른 수정입니다. 추가적으로, 텍스트가 할당된 너비를 초과할 경우를 대비하여 overflow: hidden 및 text-overflow: ellipsis 속성을 추가하여 UI의 견고성을 높이는 것을 제안합니다. 이렇게 하면 긴 날짜나 작성자 이름이 표시될 때도 레이아웃이 깨지지 않고 깔끔하게 처리될 것입니다.
| textAlign: 'right', | ||
| whiteSpace: 'nowrap', |
There was a problem hiding this comment.
white-space: nowrap을 추가하여 줄바꿈을 방지하는 것은 좋은 해결책입니다. 하지만, 텍스트가 할당된 너비(80px)를 초과할 경우 내용이 넘쳐 레이아웃이 깨질 수 있습니다. 이를 방지하기 위해 overflow: hidden과 text-overflow: ellipsis를 함께 사용하여 텍스트가 길어질 경우 '...'으로 표시되도록 하는 것을 권장합니다. 이렇게 하면 UI가 더 안정적으로 유지됩니다.
textAlign: 'right',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',| textAlign: 'right', | ||
| whiteSpace: 'nowrap', |
There was a problem hiding this comment.
NoticeDate와 마찬가지로, 작성자 이름이 할당된 너비(60px)를 초과할 경우를 대비하여 overflow: hidden과 text-overflow: ellipsis 속성을 추가하는 것이 좋습니다. 작성자 이름은 길이가 다양할 수 있으므로 이 처리를 통해 예기치 않은 UI 깨짐을 방지할 수 있습니다.
textAlign: 'right',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',1 participant
#️⃣연관된 이슈
📝작업 내용
문제점
공지사항 리스트에서 행 호버 시
fontWeight: bold가 적용되면서 날짜 영역이 두 줄로 줄바꿈되는 레이아웃 이슈변경 사항
NoticeDate,NoticeAuthor컴포넌트에white-space: nowrap속성 추가스크린샷 (선택)
💬리뷰 요구사항(선택)