도메인 맥락 모달 추가

[Jieunsse]

Summary

• 프로필
• 멤버 초대
• 할 일 목록 만들기
• 비밀번호 재설정 링크 보내기
• 비밀번호 변경하기
• 회원 탈퇴
• 로그아웃

까지의 모달 작업을 반영합니다.

Issue

• Closes 도메인 맥락 포함된 모달 개발 #33

Scope

• 특이사항

쪼개서 올렸던 PR 전부 닫고, 하나로 통합해서 올립니다.

[gemini-code-assist]

Summary of Changes

Hello @Jieunsse, 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!

이 풀 리퀘스트는 이메일 복사 기능을 갖춘 새로운 프로필 모달을 도입하고, 다양한 기능(할 일 목록 추가, 비밀번호 변경, 로그아웃, 멤버 초대, 비밀번호 재설정, 경고)을 위한 여러 도메인별 모달 컴포넌트를 추가하여 애플리케이션의 모달 라이브러리를 확장합니다. 또한, 모달 콘텐츠의 스타일링을 보다 세밀하게 제어할 수 있도록 기본 모달 컴포넌트가 개선되었습니다.

Highlights

• 새로운 프로필 모달 추가: 사용자 이메일 복사 기능을 포함한 프로필 모달을 구현했습니다.
• 다양한 모달 컴포넌트 추가: 할 일 목록 추가, 비밀번호 변경, 로그아웃, 멤버 초대, 비밀번호 재설정, 경고 모달 등 여러 도메인별 모달 컴포넌트가 새로 추가되었습니다.
• 모달 컴포넌트 개선: 기본 Modal 컴포넌트에 contentClassName prop을 추가하여 모달 콘텐츠의 스타일링 유연성을 높였습니다.

🧠 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

• src/components/Modal/domain/AddTodoList.module.css
  • 할 일 목록 추가 모달의 스타일링을 위한 새 CSS 모듈이 추가되었습니다.
• src/components/Modal/domain/AddTodoList.tsx
  • 할 일 목록을 추가하는 새로운 React 컴포넌트가 추가되었습니다. 여기에는 입력 필드와 제출 버튼이 포함됩니다.
• src/components/Modal/domain/ChangePassword.module.css
  • 비밀번호 변경 모달의 스타일링을 위한 새 CSS 모듈이 추가되었습니다.
• src/components/Modal/domain/ChangePassword.tsx
  • 사용자 비밀번호 변경을 위한 새로운 React 컴포넌트가 추가되었습니다. 여기에는 새 비밀번호 및 확인 필드가 포함됩니다.
• src/components/Modal/domain/LogoutModal.module.css
  • 로그아웃 확인 모달의 스타일링을 위한 새 CSS 모듈이 추가되었습니다.
• src/components/Modal/domain/LogoutModal.tsx
  • 로그아웃 확인을 위한 새로운 React 컴포넌트가 추가되었습니다.
• src/components/Modal/domain/MemberInvite.module.css
  • 멤버 초대 모달의 스타일링을 위한 새 CSS 모듈이 추가되었습니다.
• src/components/Modal/domain/MemberInvite.tsx
  • 멤버 초대를 위한 새로운 React 컴포넌트가 추가되었습니다. 여기에는 링크 복사 기능이 포함됩니다.
• src/components/Modal/domain/ProfileModal.module.css
  • 프로필 모달의 스타일링을 위한 새 CSS 모듈이 추가되었습니다.
• src/components/Modal/domain/ProfileModal.tsx
  • 사용자 프로필 정보를 표시하고 이메일을 복사하는 새로운 React 컴포넌트가 추가되었습니다.
• src/components/Modal/domain/ResetPassword.module.css
  • 비밀번호 재설정 모달의 스타일링을 위한 새 CSS 모듈이 추가되었습니다.
• src/components/Modal/domain/ResetPassword.tsx
  • 사용자 비밀번호 재설정을 위한 새로운 React 컴포넌트가 추가되었습니다. 여기에는 이메일 입력 필드와 링크 전송 버튼이 포함됩니다.
• src/components/Modal/domain/WarningModal.module.css
  • 경고 모달의 스타일링을 위한 새 CSS 모듈이 추가되었습니다.
• src/components/Modal/domain/WarningModal.tsx
  • 확인/취소 액션을 포함한 경고 메시지를 표시하는 새로운 React 컴포넌트가 추가되었습니다.
• src/components/Modal/types/types.ts
  • BaseModalProps에 contentClassName prop이 추가되어 모달 콘텐츠 스타일링을 위한 유연성이 향상되었습니다.

Activity

• Jieunsse님이 풀 리퀘스트를 생성했습니다.
• PR 제목 "프로필 모달 추가"와 설명 "이메일 복사가 가능한 프로필 모달을 구현했습니다."는 주요 목적을 명확히 제시합니다.
• 여러 새로운 모달 컴포넌트와 해당 CSS 모듈이 추가되었으며, 이는 UI 라이브러리의 상당한 확장을 나타냅니다.
• 기본 Modal 컴포넌트의 타입 정의에 contentClassName을 추가하는 작지만 중요한 변경이 이루어졌습니다.

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은 다양한 종류의 모달 컴포넌트를 추가하여 애플리케이션의 사용자 상호작용을 개선합니다. 전반적으로 컴포넌트 구조와 접근성(ARIA 속성 사용)은 잘 구현되었습니다. 하지만 몇몇 모달에서 폼 데이터를 상위 컴포넌트로 전달하는 로직이 누락되어 있어, 컴포넌트가 의도한 대로 동작하지 않을 수 있습니다. 또한 클립보드 복사 기능의 예외 처리와 새로 추가된 contentClassName prop의 사용에 대한 개선점을 발견했습니다. 아래의 리뷰 댓글에서 각 문제에 대한 자세한 설명과 해결 방안을 제안했습니다.