[Fix] members 페이지 css 수정 및 teams페이지 에러 수정 #191
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/api/src/models/teamModel.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "@repo/eslint-config/server.js" to extend from. Please check that the name of the config is correct. The config "@repo/eslint-config/server.js" was referenced from the config file in "/apps/api/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 워크스루이 풀 리퀘스트는 여러 파일에 걸쳐 레이아웃, 스키마, 그리고 훅의 작은 변경 사항을 포함하고 있습니다. 팀 모델의 변경 사항
시퀀스 다이어그램sequenceDiagram
participant User
participant UpdateTeamNameHook
participant API
User->>UpdateTeamNameHook: 팀 이름 변경 요청
UpdateTeamNameHook->>API: 팀 이름 업데이트 뮤테이션
alt 성공
API-->>UpdateTeamNameHook: 성공 응답
UpdateTeamNameHook->>User: onClose 콜백 실행 (선택적)
else 실패
API-->>UpdateTeamNameHook: 에러 응답
UpdateTeamNameHook->>User: 에러 알림
end
시 (토끼의 노래)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
🚀 Preview URLBranch: 185-fix-members-페이지-css-수정-및-teams페이지-에러-수정 Preview URL: https://codeit.click?pr=191 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/web/app/admin/teams/_hooks/useTeamsMutations.ts (1)
Line range hint
62-81: useUpdateTeamName 훅 개선 제안현재 구현에 대해 다음과 같은 개선사항을 제안드립니다:
- useCreateTeam처럼 onClose 콜백에 디바운싱 적용
- 에러 처리 개선
- 타입 안전성 강화
export const useUpdateTeamName = ( onClose?: () => void, ): UseMutationResult<MessageResponse, AxiosError<MessageResponse>, UpdateRequest> => { const queryClient = useQueryClient(); const prevTeamsRef = useRef<TeamType[] | undefined>(); + const debouncedOnClose = useDebouncedCallback(onClose ?? (() => {}), 800); return useMutation({ mutationFn: ({ teamId, newName }: UpdateRequest) => updateTeamName({ teamId, newName }), onSuccess: (res) => { notify("success", res.message); - onClose?.(); + debouncedOnClose(); }, onError: (error) => { if (prevTeamsRef.current) void queryClient.setQueryData<TeamType[]>(QUERY_KEYS.TEAMS.ALL, prevTeamsRef.current); notifyMutationError(error); + // 에러 발생 시 모달 닫지 않음 }, }); };
🧹 Nitpick comments (5)
apps/web/app/admin/members/_components/sidepanel/index.tsx (1)
23-24: 사이드 패널의 레이아웃이 개선되었습니다!flex 레이아웃과 간격 조정을 통해 구조가 개선되었습니다. 하지만 접근성 향상을 위해 몇 가지 제안사항이 있습니다:
aria-modal="true"를 추가하여 모달 역할을 명시role="dialog"를 추가하여 대화상자 역할을 명시aria-labelledby를 추가하여 패널의 제목을 연결<div ref={sidePanelRef} + role="dialog" + aria-modal="true" + aria-labelledby="panel-title" className={`md:w-414 border-custom-black/20 fixed right-0 top-0 z-20 flex h-full w-full transform flex-col gap-32 border-l bg-white px-32 pb-40 pt-16 shadow-[0px_2px_14px_0px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out ${ isOpen ? "translate-x-0" : "translate-x-full" }`} >apps/web/app/admin/members/_components/sidepanel/Form.tsx (3)
60-63: 폼 레이아웃이 개선되었습니다!flex 레이아웃을 사용하여 폼 요소들의 배치가 개선되었습니다. 하지만 폼 제출 시 사용자 피드백을 위해 다음 사항을 고려해보세요:
noValidate속성 추가로 브라우저 기본 검증 비활성화- 제출 중일 때 폼 비활성화
<form className="flex h-full flex-col justify-between" + noValidate + disabled={isPending} onSubmit={(...args) => void handleSubmit(membersFormSubmit)(...args)} >
65-82: 역할 선택 로직을 단순화할 수 있습니다.현재 구현은 불필요한 변환 함수들을 사용하고 있습니다. 다음과 같이 단순화할 수 있습니다:
<Controller name="role" control={control} rules={{ required: MEMBER_FORM_MESSAGES.VALIDATION.ROLE.REQUIRED }} render={({ field: { value, onChange } }) => ( <Radio.Group - value={getRoleDisplay(value)} - onChange={(displayText) => { - onChange(getRoleValue(displayText)); - }} + value={value} + onChange={onChange} > - <Radio.Option value={ROLE_LABELS.member}>{ROLE_LABELS.member}</Radio.Option> - <Radio.Option value={ROLE_LABELS.admin}>{ROLE_LABELS.admin}</Radio.Option> + <Radio.Option value="member">{ROLE_LABELS.member}</Radio.Option> + <Radio.Option value="admin">{ROLE_LABELS.admin}</Radio.Option> </Radio.Group> )} />
83-103: 입력값 검증을 개선할 수 있습니다.현재 구현된 검증 로직에 다음 사항들을 추가하면 좋을 것 같습니다:
- 입력값의 앞뒤 공백 제거
- 이메일 형식 오류에 대한 더 구체적인 메시지
{...register("name", { required: MEMBER_FORM_MESSAGES.VALIDATION.NAME.REQUIRED, + setValueAs: (value: string) => value.trim(), minLength: { value: 2, message: MEMBER_FORM_MESSAGES.VALIDATION.NAME.MIN_LENGTH, }, })} {...register("email", { required: MEMBER_FORM_MESSAGES.VALIDATION.EMAIL.REQUIRED, + setValueAs: (value: string) => value.trim(), pattern: { value: REGEXP_PATTERNS.EMAIL, - message: MEMBER_FORM_MESSAGES.VALIDATION.EMAIL.PATTERN, + message: "올바른 이메일 형식이 아닙니다. (예: [email protected])", }, })}apps/web/app/admin/members/_components/sidepanel/Header.tsx (1)
23-38: 접근성 및 반응형 디자인 개선 제안현재 구현에 대해 다음과 같은 개선사항을 제안드립니다:
- 닫기 버튼에 aria-label 추가
- 반응형 디자인을 위한 spacing 조정
- 버튼 크기 최소값 지정
- <button onClick={onClose} type="button" className="flex flex-row"> + <button + onClick={onClose} + type="button" + aria-label="사이드 패널 닫기" + className="flex flex-row items-center min-w-[24px] min-h-[24px] p-1" + >withdraw 버튼도 마찬가지로 개선이 필요합니다:
<button type="button" onClick={handleWithdraw} - className="text-sm-medium text-custom-black/80 hover:bg-custom-black/5 hover:text-custom-black w-71 rounded-6 border-custom-black/20 h-32 border transition-all duration-300" + className="text-sm-medium text-custom-black/80 hover:bg-custom-black/5 hover:text-custom-black w-71 rounded-6 border-custom-black/20 h-32 border transition-all duration-300 min-w-[120px]" + aria-label="회원 탈퇴" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/api/src/models/teamModel.ts(1 hunks)apps/web/app/admin/members/_components/sidepanel/Form.tsx(1 hunks)apps/web/app/admin/members/_components/sidepanel/Header.tsx(1 hunks)apps/web/app/admin/members/_components/sidepanel/index.tsx(1 hunks)apps/web/app/admin/teams/_hooks/useTeamsMutations.ts(2 hunks)apps/web/app/settings/_components/modals/ManageTeamModal.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/web/app/settings/_components/modals/ManageTeamModal.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: preview
🔇 Additional comments (1)
apps/web/app/admin/members/_components/sidepanel/index.tsx (1)
28-28: 불필요한 래퍼 div 제거는 좋은 개선입니다!컴포넌트 구조가 단순화되어 DOM 계층이 깔끔해졌습니다.
This was referenced Jan 20, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 작업 내용
📝 참고 사항
-settings페이지 401에러는 fix하려는데 나오질 않네요 추후 다시 문제가 발생하면 수정 하겠슴둥
🚨 관련 이슈 (이슈 번호)
✅ 체크리스트
Summary by CodeRabbit
기능 변경
order필드를 선택적으로 변경하고 고유성 제약 조건 추가버그 수정
스타일