패스워드 리셋 모달 추가#40
Conversation
Summary of ChangesHello @Jieunsse, 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
이 PR은 패스워드 리셋 모달을 추가하는 것을 목표로 하고 있지만, AddTodoList와 MemberInvite 모달도 함께 추가되었습니다. 전반적으로 새로운 모달 컴포넌트들의 구조는 잘 잡혀있습니다. 다만, AddTodoList와 ResetPassword 컴포넌트에서 폼 데이터를 처리하는 로직이 누락되어 있어, 컴포넌트가 의도대로 동작하지 않는 문제가 있습니다. 이 부분은 반드시 수정이 필요합니다. 또한, ResetPassword 모달의 스타일시트에는 반응형 디자인을 위한 미디어 쿼리가 빠져있어 추가가 필요해 보입니다. 자세한 내용은 각 파일에 남긴 리뷰 코멘트를 참고해주세요.
| export interface AddTodoListProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| onCreate: () => void; |
There was a problem hiding this comment.
onCreate prop이 생성할 할 일의 내용을 인자로 받을 수 있도록 onCreate: (todo: string) => void; 와 같이 시그니처를 변경해야 합니다. 현재 구현에서는 입력된 값이 onCreate 함수로 전달되지 않습니다.
| onCreate: () => void; | |
| onCreate: (todo: string) => void; |
| const handleSubmit = (e: FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| onCreate(); | ||
| }; |
There was a problem hiding this comment.
handleSubmit 함수가 폼 데이터를 읽어서 onCreate 콜백에 전달해야 합니다. FormData API를 사용하면 Input의 값을 쉽게 가져올 수 있습니다. 이를 위해 Input 컴포넌트에 name 속성을 추가하는 것을 잊지 마세요 (예: <Input name="todo" ... />).
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const todo = formData.get('todo') as string;
onCreate(todo);
};
| export interface ResetPasswordProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| onSendLink: () => void; |
There was a problem hiding this comment.
onSendLink prop이 재설정 링크를 보낼 이메일 주소를 인자로 받을 수 있도록 onSendLink: (email: string) => void; 와 같이 시그니처를 변경해야 합니다.
| onSendLink: () => void; | |
| onSendLink: (email: string) => void; |
| const handleSubmit = (e: FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| onSendLink(); | ||
| }; |
There was a problem hiding this comment.
handleSubmit 함수가 폼 데이터를 읽어서 onSendLink 콜백에 전달해야 합니다. FormData API를 사용하면 Input의 값을 쉽게 가져올 수 있습니다. 이 컴포넌트의 Input에는 이미 name="email" 속성이 있으므로 바로 활용할 수 있습니다.
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const email = formData.get('email') as string;
onSendLink(email);
};
| .modalContent.modalContent { | ||
| display: inline-flex; | ||
| padding: 16px 16px 32px 16px; | ||
| flex-direction: column; | ||
| align-items: stretch; | ||
| gap: 10px; | ||
| border-radius: 24px; | ||
| background: var(--Background-Primary, #fff); | ||
| box-sizing: border-box; | ||
| width: 384px; | ||
| height: 260px; | ||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 16px; | ||
| width: 100%; | ||
| height: 100%; | ||
| box-sizing: border-box; | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| .header { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 6px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .title { | ||
| margin: 0; | ||
| color: var(--Text-Primary, #1e293b); | ||
| font-family: Pretendard; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: 19px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .description { | ||
| margin: 0; | ||
| color: var(--Text-Default, #64748b); | ||
| font-family: Pretendard; | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 17px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 16px; | ||
| flex: 1; | ||
| } | ||
|
|
||
| .input.input { | ||
| display: flex; | ||
| width: 280px; | ||
| height: 48px; | ||
| padding: 16px; | ||
| align-items: center; | ||
| gap: 10px; | ||
| border-radius: 12px; | ||
| border: 1px solid var(--Border-Primary, #e2e8f0); | ||
| background: var(--Background-Primary, #fff); | ||
| box-sizing: border-box; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .actions { | ||
| display: flex; | ||
| width: 280px; | ||
| gap: 8px; | ||
| margin: auto auto 0; | ||
| } | ||
|
|
||
| .closeButton { | ||
| display: flex; | ||
| width: 136px; | ||
| height: 48px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 10px; | ||
| border-radius: 12px; | ||
| border: 1px solid var(--Color-Brand-Primary, #5189fa); | ||
| background: transparent; | ||
| color: var(--Color-Brand-Primary, #5189fa); | ||
| font-family: Pretendard; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 600; | ||
| line-height: 19px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .sendButton { | ||
| display: flex; | ||
| width: 136px; | ||
| height: 48px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 10px; | ||
| border-radius: 12px; | ||
| border: none; | ||
| background: var(--Color-Brand-Primary, #5189fa); | ||
| color: #fff; | ||
| font-family: Pretendard; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 600; | ||
| line-height: 19px; | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
이 모달의 CSS에는 다른 모달들과 달리 모바일 화면을 위한 반응형 스타일(@media 쿼리)이 빠져있습니다. 이로 인해 모바일에서 레이아웃이 깨질 수 있습니다. 일관성을 유지하고 더 나은 사용자 경험을 위해 (max-width: 480px)와 같은 중단점(breakpoint)에 대한 스타일을 추가하는 것을 권장합니다.
1 participant
Summary
Issue
Scope