Conversation
- fadeIn / scaleIn 애니메이션 - Overlay: modal은 반투명 배경, popover는 투명 - Content 크기: sm(13rem), md(20rem), lg(30rem) - popover일 때 position: fixed로 스크롤 따라감 - position 계산 전 visibility: hidden (깜빡임 방지)
Summary of ChangesHello @kanghaeun, 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은 애플리케이션 전반에 걸쳐 일관되고 접근성 높은 모달 및 팝오버 UI를 제공하기 위한 공통 모달 컴포넌트와 관련 훅을 구현합니다. 이를 통해 개발자는 다양한 시나리오에서 쉽게 모달을 활용할 수 있으며, 사용자에게는 향상된 접근성과 부드러운 인터랙션을 제공합니다. 기존 댓글 삭제 기능에 새로운 모달을 적용하여 실제 사용 사례를 보여줍니다. 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. 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}
| top: $position.top - 10, | ||
| left: $position.left - 30, |
There was a problem hiding this comment.
popover의 위치를 조정하기 위해 하드코딩된 -10, -30 같은 매직 넘버를 사용하고 있습니다. 이렇게 하면 컴포넌트의 재사용성이 떨어지고, 다른 위치에 popover를 표시하고 싶을 때 스타일 파일을 수정해야 하는 불편함이 있습니다. 이 로직을 스타일 컴포넌트에서 제거하고, Modal/index.tsx 컴포넌트 내에서 위치를 계산할 때 offset을 적용하는 것이 좋습니다. offset 값을 prop으로 받아 더욱 유연하게 만드는 것도 좋은 방법입니다.
| top: $position.top - 10, | |
| left: $position.left - 30, | |
| top: $position.top, | |
| left: $position.left, |
| setTimeout(() => { | ||
| titleRef.current?.focus(); | ||
| }, 100); |
There was a problem hiding this comment.
setTimeout에 100ms라는 고정된 시간을 사용하는 것은 시스템 성능에 따라 불안정하게 동작할 수 있습니다. 모달이 나타나는 애니메이션 시간(0.2s)보다 짧아서 문제가 될 수도 있고, 불필요한 딜레이일 수도 있습니다. requestAnimationFrame을 사용하여 다음 렌더링 프레임에 포커스를 이동시키는 것이 더 안정적인 방법이 될 수 있습니다.
| setTimeout(() => { | |
| titleRef.current?.focus(); | |
| }, 100); | |
| requestAnimationFrame(() => { | |
| titleRef.current?.focus(); | |
| }); |
| setTimeout(() => { | ||
| previousFocusRef.current?.focus(); | ||
| }, 100); |
There was a problem hiding this comment.
모달이 닫힐 때 포커스를 이전 요소로 복원하기 위해 setTimeout을 사용하고 있습니다. 하지만 현재 코드에는 모달이 사라질 때 별도의 애니메이션이 없으므로, setTimeout 없이 즉시 포커스를 복원해도 문제가 없습니다. 불필요한 딜레이를 제거하는 것이 좋습니다.
previousFocusRef.current?.focus();
ganimjeong
left a comment
ganimjeong
left a comment
There was a problem hiding this comment.
모달이 뜰 때 (화면 오른쪽에 뜨는)화면 스크롤바가 사라지면서 배경이 살짝 넓어지게 돼서 덜컥거리는 것 같은데
스크롤바 너비만큼 바디에 padding 추가하는 등 방식으로 수정하면 어떨까욤
| if (variant === 'popover' && anchorRef?.current && modalRef.current) { | ||
| const anchorRect = anchorRef.current.getBoundingClientRect(); | ||
|
|
||
| // 스크롤 시에는 저장된 width 사용, 초기에는 새로 계산 |
There was a problem hiding this comment.
학습 과정에서 구현한 코드라 이해 포인트가 될 수 있는 부분을 중심으로 주석을 남겨두었어용
2 participants
#️⃣연관된 이슈
📝작업 내용
1. Modal 컴포넌트 (Modal/index.tsx)
Props:
주요 기능:
2. useModal Hook (useModal.ts)
3. Modal 스타일 (Modal/index.styled.ts)