[FEAT] 동아리원 관리페이지 UI 및 반응형 (#422)#424
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은 동아리원 관리 페이지의 기본적인 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. 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}
| export const updateMemberRole = async ( | ||
| clubId: string, | ||
| memberId: number, | ||
| role: string, |
There was a problem hiding this comment.
updateMemberRole 함수의 role 파라미터 타입을 string 대신 MemberRole로 지정하여 타입 안정성을 높이는 것이 좋습니다. 이렇게 하면 의도치 않은 역할 문자열이 전달되는 것을 방지할 수 있습니다. types/member 파일에 이미 MemberRole 타입이 정의되어 있으니, import type { MemberRole } from '../types/member'; 와 같이 import하여 사용해주세요.
| role: string, | |
| role: MemberRole, |
| backgroundColor: theme.colors.bg, | ||
| gap: '1rem', | ||
|
|
||
| ['@media (max-width: 1018px)']: { |
There was a problem hiding this comment.
미디어 쿼리에 1018px와 같이 하드코딩된 값을 사용하고 있습니다. 테마에 정의된 브레이크포인트 변수(예: theme.breakpoints.web)를 사용하면 코드의 일관성과 유지보수성을 높일 수 있습니다. 이 파일의 다른 미디어 쿼리(638px)에도 동일하게 적용하는 것을 권장합니다.
| ['@media (max-width: 1018px)']: { | |
| ['@media (max-width: ${theme.breakpoints.web})']: { |
| fontSize: theme.font.size.base, | ||
| color: theme.colors.textSecondary, | ||
|
|
||
| ['@media (max-width: 833px)']: { |
There was a problem hiding this comment.
미디어 쿼리에 833px와 같이 하드코딩된 값을 사용하고 있습니다. 테마에 정의된 브레이크포인트 변수를 사용하면 일관성을 유지하고 향후 관리를 용이하게 할 수 있습니다. 이 파일에 있는 다른 여러 미디어 쿼리(854px, 910px, 797px 등)에도 동일하게 적용하는 것을 고려해 보세요.
| ['@media (max-width: 833px)']: { | |
| ['@media (max-width: ${theme.breakpoints.tablet})']: { |
| mutationFn: ({ memberId, role }: { memberId: number; role: string }) => | ||
| updateMemberRole(clubId, memberId, role), |
There was a problem hiding this comment.
updateRoleMutation의 mutationFn에서 role 파라미터 타입을 string 대신 MemberRole로 지정하는 것이 좋습니다. 이렇게 하면 타입 안정성이 향상됩니다. 관련하여 handleRoleChange 함수의 newRole 파라미터(22번째 줄)도 MemberRole 타입으로 변경하는 것을 권장합니다. MemberRole 타입은 ../types/member에서 가져올 수 있습니다.
| mutationFn: ({ memberId, role }: { memberId: number; role: string }) => | |
| updateMemberRole(clubId, memberId, role), | |
| mutationFn: ({ memberId, role }: { memberId: number; role: MemberRole }) => | |
| updateMemberRole(clubId, memberId, role), |
| <tbody> | ||
| {members.map((member) => ( | ||
| <S.TableRow key={member.id}> | ||
| <S.TdName>{member.name}</S.TdName> | ||
| <S.Td>{member.generation}</S.Td> | ||
| <S.Td>{member.department}</S.Td> | ||
| <S.Td>{member.phoneNumber}</S.Td> | ||
| <S.TdRole> | ||
| <S.RoleButtonGroup> | ||
| {ROLES.map((role) => ( | ||
| <S.RoleButton | ||
| key={role} | ||
| active={member.role === role} | ||
| onClick={() => onRoleChange(member.id, role)} | ||
| > | ||
| {role} | ||
| </S.RoleButton> | ||
| ))} | ||
| </S.RoleButtonGroup> | ||
| </S.TdRole> | ||
| <S.Td> | ||
| <S.DeleteButton onClick={() => onDelete(member.id)}> | ||
| <FiX /> | ||
| </S.DeleteButton> | ||
| </S.Td> | ||
| </S.TableRow> | ||
| ))} | ||
| </tbody> |
There was a problem hiding this comment.
map내부에 요소들을 별도 컴포넌트로 분리하는 것도 괜찮을 것 같아요!
| const filtered = members.filter( | ||
| (member) => | ||
| member.name.includes(searchText) || | ||
| member.generation.includes(searchText) || | ||
| member.department.includes(searchText), | ||
| ); |
There was a problem hiding this comment.
필드가 많으니까
(member) =>
[member.name , member.generation, member.department].some(field => field.includes(searchText))이렇게 써도 괜찮을 듯 해요
| @@ -0,0 +1,60 @@ | |||
| import { FiX } from 'react-icons/fi'; | |||
| import * as S from './index.styled'; | |||
| import type { Member, MemberRole } from '../../types/member'; | |||
| <S.SearchIcon> | ||
| <FiSearch /> | ||
| </S.SearchIcon> | ||
| <S.SearchInput |
There was a problem hiding this comment.
공통 input 컴포넌트를 안 쓰신 이유가 있나요?
There was a problem hiding this comment.
src/shared/components/Form 내부의 인풋이면 아이콘넣어서 사용할 수 있는 구조가 아닌 것 같아서 따로 썼어요!
2 participants
#️⃣연관된 이슈
📝작업 내용
동아리원 관리 페이지의 기본 UI 레이아웃을 구현했습니다.
[동아리명] 회원 명단페이지 타이틀이후 api 연결하면서
타입파일, api파일, 정렬 기능 은 수정이 들어갈 예정입니다.
페이지의 목데이터도 추후 삭제될 예정입니다.
스크린샷 (선택)
💬리뷰 요구사항(선택)