🐛 Bug: API 관련 기능 수정 모음

[un0211]

🐛 버그 설명

API 관련해서 수정해야할 기능들을 모아 놓고 해결합시다!

API 권한 관련 수정

명시되어 있었는지는 모르지만, 대시보드 수정에 있는 모든 작업은 대시보드 생성자만 할 수 있습니다. (대시보드 수정, 멤버 삭제, 초대내역 조회, 초대) 아예 관리/초대 버튼 자체를 owner일때만 띄우는 게 좋겠습니다.

• [x] 대시보드 초대/관리 버튼 권한 없을 시 렌더링 x
• [x] edit 페이지 자체에서도 생성자가 아니면 '권한이 없습니다' 모달과 함께 대시보드 페이지로 리다이렉트

상황

회원가입 닉네임 10자 제한

서버에서 닉네임 10자 제한이 걸려 있습니다. 우리가 내부적으로 미리 10자 이내인지 검사한다면 서버에 요청하는 비용을 아낄 수 있습니다.

• [x] 닉네임 10자 검사 추가

상황

코멘트

이외에도 권한 관련 문제 발견하면 다들 댓글 부탁드려요~~

API 에러 메시지 보여주는 문구/디자인 개선

[un0211]

방금전에 대양님이 말씀하셨던 것처럼, API 에러났을 때 메세지 보여주는 방식도 더 이야기해야 하는데, 이 이슈에서 합시다~~

[un0211]

모든 API 공통일 수도 있는데, PUT의 경우 try catch로 에러 핸들링 했을때, 전혀 핸들링되지 않고 에러 창이 뜹니다! react query의 onError에서 핸들링 해주면 잘 되어서 useDeleteData, useUpdate... 같은 훅들을 만들었더니 잘 됐습니다. 아직 그냥 try catch 인 게 좀 있어서 추후에 알아보고 수정해야 할 것 같아요1

[wayandway]

모든 API 공통일 수도 있는데, PUT의 경우 try catch로 에러 핸들링 했을때, 전혀 핸들링되지 않고 에러 창이 뜹니다! react query의 onError에서 핸들링 해주면 잘 되어서 useDeleteData, useUpdate... 같은 훅들을 만들었더니 잘 됐습니다. 아직 그냥 try catch 인 게 좀 있어서 추후에 알아보고 수정해야 할 것 같아요1

혜원님 혹시 Tanstack Query로 구현하신 건가요??

[un0211]

제가 구현한 hook들은 Tanstack Query로 구현했고, 안된다고 하는 것들은 그냥 putService.ts 에 있는 걸 바로 쓰는 경우입니다! 그냥 try catch 써도 잘 되나요?!!

 try {
      const { id } = await postNewDashboard(value);
      if (isPublic) {
        addShareAccount(id);
      }

      queryClient.invalidateQueries({ queryKey: ['sideDashboards'] });
      queryClient.invalidateQueries({ queryKey: ['dashboards'] });
      openNotificationModal({ text: '새로운 대시보드가 생성되었습니다!' });
      router.push(`/dashboard/${id}`);
    } catch (error) {
      if (error instanceof AxiosError) {
        setErrorMessage(error.response?.data.message || '대시보드 생성을 실패하였습니다');
      } else {
        setErrorMessage('대시보드 생성을 실패하였습니다');
      }
    }
  };

여기서 addShareAccount 안에 put이 있는데 그 put이 오류났을 때 에러핸들링 안됐습니다!

[wayandway]

혜원님 console.log로 error 객체 출력해도 아예 안나오나요??

저는 일단 댓글수정에서 에러 처리는 정상적으로 동작하는 거 확인했습니다!

try {
      await postComment(commentData);
      queryClient.invalidateQueries({ queryKey: ['comments'] });
      setNewComment('');
    } catch (error) {
      console.error('댓글 추가 중 에러 발생:', error);
      setNewComment('에러 발생');
    }

[un0211]

그런 처리는 되는지 확인 안해봤는데, 우선 페이지에 엄청 큰 에러가 떠서요!!

[wayandway]

develop 브랜치에서 확인하면 될까요?! 저도 다시 패치받아서 확인할게요!!

[un0211]

이건 제가 작업 중에 권한 없는 put 요청을 해서 그런데, 실제 예시는 제가 지금 바로 못찾겠고, 제가 만들어놓은 useDelete/useUpdate ... 훅을 사용하지 않고 try catch로 하게끔 바꿔보시면 비슷한 에러 발견하실 수 있을 것 같아요..! 제가 나중에 에러 상황 있는 브랜치 만들어둘까요...?

요약

• tanstack query에서 useQuery, useMutation의 onError로 처리하지 않는 이상 에러 핸들링이 제대로 안되는 것 같다. (에러화면 뜸)
• 지금 당장 에러 상황은 없지만, useMutation훅 사용하던 것들을 그냥 putService/deleteService(/아마도 post&getService)의 함수로 요청하도록 바꾸면 try catch로 에러 핸들링 해봤자 안되는 상황 만들 수 있을 것 같다.

[wayandway]

이건 제가 작업 중에 권한 없는 put 요청을 해서 그런데, 실제 예시는 제가 지금 바로 못찾겠고, 제가 만들어놓은 useDelete/useUpdate ... 훅을 사용하지 않고 try catch로 하게끔 바꿔보시면 비슷한 에러 발견하실 수 있을 것 같아요..! 제가 나중에 에러 상황 있는 브랜치 만들어둘까요...?

요약

• tanstack query에서 useQuery, useMutation의 onError로 처리하지 않는 이상 에러 핸들링이 제대로 안되는 것 같다. (에러화면 뜸)
• 지금 당장 에러 상황은 없지만, useMutation훅 사용하던 것들을 그냥 putService/deleteService(/아마도 post&getService)의 함수로 요청하도록 바꾸면 try catch로 에러 핸들링 해봤자 안되는 상황 만들 수 있을 것 같다.

넵 좋아요!! 에러 있는 브랜치 올려주시면 저도 같이 확인하겠습니다! 이따 팀미팅 시간 때 얘기해보죠 ㅎㅎ!!

[wjsdncl]

대시보드 알림 기능이 비로그인 상태여도 게속 동작합니다

[un0211]

• [x] 컬럼 이름 변경 안했을 때 저장 버튼 비활성화

• [x] 카드 코멘트도 변경 없을 때 비활성화 or API 안보내게 처리 (최대한 불필요한 API 안보내는 게 좋을 것 같아서요)

• [ ] 코멘트 입력값 없을때도 요청 보냄 -> 결과 에러