[💻 코드스테이츠 FE 44기]main-project - 10일차

유저 닉네임 변경하기

🤔 이슈사항

이런식으로 우측 펜 아이콘 클릭 시
input이 나오고 수정 시 바로 적용하는 방식이다.

여기서 두개의 이슈사항이 있었다.
1. 유효성 검사로 인한 버튼의 위치
2. 유저 닉네임 수정 후 바로 적용되지 않고 새로고침해야 변경되는 문제

1.유효성 검사로 인한 버튼의 위치

오류 사항을 기록하지 못했지만
글자 수가 맞지 않으면 하단에 안내 메세지를 보이게 했다.

펜의 위치를 position으로 잡았기에
하단에 안내 멘트가 생기면 펜의 위치가 내려가는 이슈가 있었다.

input창이 공통으로 만들어진 컴포넌트라 수정도 까다로웠다.

input 열고 닫힘을 boolean으로,
유효성 검사 안내 멘트도 boolean으로 처리하고 있었다.

그 때 들었던 생각은 그럼 상태에 따라 다르게 주면 되겠구나 싶었다.

const WriteBtn = styled.button<IsNickNameT>`
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: ${(props) => (props.toggleNickname ? 'absolute' : 'unset')};
  top: ${(props) => { (props.toggleNickname ? (props.isValidate ? '45%' : '35%') : 'unset'} ;
  }};
  right: ${(props) => (props.toggleNickname ? '0.3125rem' : 'unset')};
  transform: ${(props) =>
    props.toggleNickname ? 'translate(0, -50%)' : 'unset'};
`;

이렇게 조건에 따라 다르게 주니 간단하게 해결 할 수 있었다.
toggleNickname은 닉네임 옆에 있는 버튼 클릭 여부이고
isValidate는 유효성 여부에 대한 boolean값이다.

여기서 오류가 나오는데
삼항 연산자를 중첩으로 사용하는건 좋지 않다고 한다.

만얀 eslint를 사용하지 않았다면 모른체 넘어갔을 거다.

const WriteBtn = styled.button<IsNickNameT>`
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: ${(props) => (props.toggleNickname ? 'absolute' : 'unset')};
  top: ${(props) => {
    if (props.toggleNickname) {
      return props.isValidate ? '45%' : '35%';
    }
    return 'unset';
  }};
  right: ${(props) => (props.toggleNickname ? '0.3125rem' : 'unset')};
  transform: ${(props) =>
    props.toggleNickname ? 'translate(0, -50%)' : 'unset'};
`;

if문을 줘서 해결 했다.
리액트는 if문 보다 삼항 연산자를 자주 사용하다 보니 이중 조건문 작성할 때에도
삼항 연산자를 사용하게 되는거 같다.

그렇게 수정된 화면

2. 유저 닉네임 수정 후 바로 적용되지 않고 새로고침 해야 변경되는 문제

useRef를 이용해 input value값을 전달하고 있었다.
여기서 문제는

const paintNickname = (e: React.FormEvent<HTMLFormElement>) => {
  if (isName) {
    e.preventDefault();
    mutation.mutate(memNicknameRef.current.value);
    setToggleNickname(!toggleNickname);
  }
};

닉네임 수정하면 memNicknameRef.current.value의 값이 null로 나와
바로 수정된 화면을 보여주지 않았다.

알고 보니 toggleNickname을 이용해 input을 보이게, 안보이게 작성했는데.

ref={memNicknameRef}는 input에만 있어서
엔터 칠 경우 input창도 사라지고 담겨져 있는 value도 사라지는 것이였다.

한참 고민하다. 그럼 사라지기 전에 그 값을 저장해 보내주면 되겠다고 생각했다.

const [nickName, setNickName] = useState<string>('');

변경된 유저 닉네임을 저장할 state를 선언해 주었다.

useEffect(() => {
  if (memNickname && memNicknameRef.current) {
    dispatch(setUserOAuthActions.paintMemNickname(memNickname));
    memNicknameRef.current.value = memNickname;
    setNickName(memNicknameRef.current.value);
  }
}, [dispatch, memNickname, memNicknameRef, nickName]);

useEffect을 이용해 nickName이 변경될 때 렌더링 되도록 했으며
memNickname은 서버에 저장된 내용이고
nickName은 수정된걸 화면에 바로 보여지게하려고 나눠 놨다.

const paintNickname = (e: React.FormEvent<HTMLFormElement>) => {
  if (isName) {
    e.preventDefault();
    mutation.mutate(nickName);
    setToggleNickname(!toggleNickname);
  }
};

수정된 닉네임이 저장된 nickName를 서버에 보내 줬다.

<UserNickname>
	{nickName === '' ? userAuthInfo?.memberNickname : nickName}
</UserNickname>

nickName에 값이 없을 경우 서버에 저장되어 있는 유저 닉네임을,
그게 아닌 경우 변경한 닉네임을 보여주게 만들었다.

그렇게 완성!

🛠️ 추후 개선하면 좋을 것 같은 점

추후 메인 프로젝트가 마무리 된다면 닉네임 수정에 조건을 달고 싶다.

1. 하루 또는 일주일에 수정할 수 있는 개수 제한

하루에 몇번이나 수정이 가능하면 범죄에 이용할 수도 있고 서버에서도 부담이 된다고 생각한다.
하루 또는 일주일 등 수정가능한 개수와 기간을 정하면 좋을 것 같다.

2. 비방용 닉네임 사용 금지

커뮤니케이션이 있기에 비방용 닉네임이 들어가는 걸 방지하면 좋을 것 같다.

---

✏️ 마치며

블로깅을 거의 작업을 다 하고 잠들기 전에 작성을한다.

내가 어떤 문제가 닥쳤고 이걸 해결하기 위해 노력한 점을 작성하고 싶어도
기록할 수 없어 까먹게 된다.

그렇다고 작업하면서 중간 중간 블로그 작성하기엔 작업 효율이 떨어진다...
이부분이 고민인거 같다.