fix: 모바일화면에서 화면이 밀리는 현상 및 태그기능 버그 수정

[mixsung]

개요

아래의 버그를 수정했습니다.

1. 모바일에서 화면 밀리는 버그
2. 태그 안의 텍스트가 잘리는 버그
3. 2번을 진행하면서 태그의 특정 입력값에 따른 에러핸들링을 추가했습니다.
   a. 비로그인 시, 태그 제출이 불가능하도록 버튼을 비활성화하고 에러코드를 활성화시켰습니다.
   b. 빈 값, 'ㄴ' 같은 자음, 중복된 태그일 때 에러핸들링이 되어있지만 onError로 가지 않고 onSuccess로 가는 것을 확인하여 onSuccess에서 추가 처리했습니다.
   c. 기존 코드에 setter 함수로 에러코드를 설정하고 바로 태그 등록하는 로직이 있었고, setter 함수는 async가 내부에 있기때문에 에러코드가 바로 바뀌지 않음. 그래서 useEffect로 에러코드 변경에 따른 에러활성화 로직을 추가하고 errorCodeRef(useRef 사용) 변수로 에러를 즉시 감지할 수 있도록 추가했습니다.
   d. 중복된 태그, 'ㄴ' 같은 자음 입력값은 프론트에서 처리된 게 아니라 백엔드에서 처리됐는데 onError로 오지 않고 onSuccess로 받고 있기때문에 (정확한 원인 모름) 콘솔에서 400에러가 뜨고 있음 => 알수없는 에러로 모두 처리

=> d 에 대한 에러 원인 해결을 하단에 적어놨습니다.

참고 이슈

#629

스크린샷

400 에러를 못잡는 현상을 고친 방법

이번 주 프론트 미팅을 진행하면서 @YeonSeong-Lee 님이 도와주셨습니다 🥺

변경 전

// axios.ts
api.interceptors.response.use(
  response => response,
  error => Sentry.captureException(error),
);

// useApi.ts
  const request = useCallback(
    (resolve: (response: any) => void, reject?: (error: any) => void) => {
      axiosPromise(method ?? "GET", url ?? "/", data)
        ?.then(response => {
          resolve(response);
        })
        ?.catch(error => {
          // 직접 정의한 reject함수가 없으면 기본적인 에러 알림 다이얼로그 호출
          if (reject) reject(error);
          else addErrorDialog(error);
        });
    },
    [method, url, data],
  );

axios에서 에러가 제대로 throw 되지 않는 현상이 있었고 catch 블록에 에러가 전달되지 않았습니다. 결과적으로 모든 API 응답이 성공적으로 처리된 것처럼 보였습니다.
Sentry.captureException(error)을 사용하여 에러를 기록하지만, 에러를 throw하지 않아 Axios가 에러를 catch 블록으로 전달하지 않았고, then으로 처리가 되었습니다.

변경 후

// axios.ts
api.interceptors.response.use(
  response => response,
  error => {
    Sentry.captureException(error);
    throw error;
  },
);

수정된 코드에서는 throw error를 추가하여 에러가 발생하면 다시 던져서 원래 요청을 처리한 catch 블록으로 전달되도록 했습니다.

[YeonSeong-Lee]

LGTM