TIL / 20210828

📌오늘한 일

-닉네임 변경,
-비밀번호 변경
-도감 공유 허용/비허용
-비밀번호 재발급

개발 막바지에 접어들며 api 설계도를 참고할 일이 적었는데, 새로운 기능이 추가되면서 오랜만에 노션에 api 설계도를 보게되었다.

1)닉네임 변경

닉네임은 우리 프로젝트에서 유일한 값이기 때문에 변경할 때에도 중복 여부를 확인해주어야했다.

실시간으로 dispatch해서 입력된 닉네임이 중복인지 아닌지 확인해주었다.

import {checkNickname} from "../redux/async/user";
const [nickname, setNickname] = useState(""); //닉네임
const doubleCheckNickname = useCallback(() => {
        dispatch(checkNickname(nickname));
    }, [nickname]); //닉네임 중복체크 디스패치

    const clickNickConfirm=()=>{//변경된 정보 사항으로 디스패치
        if(nickname === ""){
            setNickname("");
            alert("닉네임을 다시 확인 해주세요!")
            return;
        } //공란 체크
        if(is_nickname?.message === "fail" && is_nickname?.error === "exist nickname"){
            setNickName_Double(false);
            setNickname("");
            alert("사용중인 닉네임입니다.");
            return;
        }
        else if(is_nickname?.message === "fail" && is_nickname?.error === "wrong nickname"){
            setNickName_Double(false);
            setNickname("");
            alert("사용할 수 없는 닉네임입니다.");
            return;
        }else if(nickname.length >= 8 ){
            setNickname("");
            alert("닉네임 글자 수는 8자 미만이어야합니다.");
            return;
        }else{
            setNickName_Double(true);
            if(window.confirm("닉네임을 변경하습니까?")){
                if(dispatch(changeNickname(nickname)))
                    setNick_Change(false);
            }
            return;
        }
    }

비밀번호 변경

비밀번호도 마찬가지이다. 닉네임과 같이 유효성을 체크해주었다.

맥주 도감 허용/ 비허용

맥주 도감 허용/ 비허용하는 것이 조금 어려웠다. switch버튼을 클릭하면 바로 허용/비허용으로 권한이 바뀌고, 실제 스위치도 바뀌게 만들어야하는데, 버튼이 실시간으로 상태반영이 되지 않는 어려움이 있었다.

여러 방법을 시도하다, 이전에 좋아요 기능에 적용했던 것처럼 toggle 기능을 이용해서 공유 허용/비허용 상태 전환을 해주었다.

const [toggle,setToggle] = useState("");
const clickSwitch = ()=>{//맥주 도감 공유 허용/비허용 상태 전환
        if(toggle===true){
            dispatch(shareDisagree()); //비허용 상태 전환 디스패치
            setToggle(false);
        }else{
            dispatch(shareAgree()); //허용 상태 전환 디스패치
            setToggle(true);
        }
    }
return (
        <>
 		<InfoWrap>
                    <JustifyAlign>
                    <span>{"맥주 도감 공유 허용하기"}</span>
                    <div style={{float: "right"}}>
                    <CustomizedSwitches //스위치 버튼 컴포넌트
                      setState={setState}
                      state={state}
                      clickSwitch={clickSwitch}
                      toggle={toggle}
                  /></div>
               	 </JustifyAlign>
         </InfoWrap>            
            
        </>

비밀번호 재발급

마지막으로 비밀번호 재발급 기능도 추가해 주었다.

불과 한달 전만해도 axios가 뭔지, redux-toolkit이 어떻게 사용하는건지 몰랐는데 이제는 간단한 연결은 쉽게하는것 같다. 그리고 컴포넌트를 어떻게 나누는것이 좀 더 효율적인지에 대한 고민을 개발하기 전에 자연스럽게 하게 된다. 이제 더이상의 추가 기능은 없겠지만..!

아직 해보지 못한 next.js, 반응형, typescript 등도 따로 공부해 보자.