실전프로젝트 세팅컴포넌트

세팅 컴포넌트는 4가지 컴포넌트를 안고 있기 때문에 우선 큰 부분 부터 적어 놓으려고 한다.

 

Setting 컴포넌트: 여기 컴포넌트는 유저 설정 페이지의 주요 기능을 모아둠.

프로필 사진 및 닉네임 수정, 테마 설정 변경, 비밀번호 수정 등의 기능이 포함.

 

useMutation과 useQuery 훅 사용: react-query의 useMutation과 useQuery 훅은

서버로부터 데이터를 가져오거나 업데이트하는 작업을 용이하게 함

 

로그아웃 기능 구현: 로그아웃 버튼 클릭 시 실행되는 onLogOut 함수에서

로그아웃 API를 호출하고 성공적으로 응답이 오면

쿼리 데이터와 Redux 상태를 초기화하여 로그인 정보를 제거.

 

유저 정보 요청 및 처리: getAuthToken, getUserSetting API 호출 후 응답값으로 받은

유저 정보를 활용해 UI에 반영하거나 Redux 상태에 저장하는 등 필요한 작업들을 실행

 

UI 구성 요소들: 다양한 UI 컴포넌트들로 사용자 인터랙션에 따른

동적인 UI 변화와 각각의 기능을 정의

 

Theme 적용: 어떤 테마가 적용되어야 하는지 결정하고 그에 따라

전역 스타일을 조정하는 ThemeInitializer와 ThemeGlobalStyle가 사용됩니다.

const Setting = () => {
  const dispatch = useDispatch();
  const queryClient = useQueryClient();
  const router: NextRouter = useRouter();
  const { mutate: logOut_mutate } = useMutation(userLogOut, {
    onSuccess: () => {
      queryClient.invalidateQueries('user');
      dispatch(LOGOUT_USER());
      window.location.reload();
      window.location.href = '/';
    },
  });

  const onLogOut = useCallback(() => {
    logOut_mutate();

    alert('로그아웃 되었습니다');
  }, [logOut_mutate]);

  const { data: userData, isSuccess: tokenSuccess } = useQuery(
    'user',
    getAuthToken,
    {
      onSuccess: (userData: UserResponse) => {
        dispatch(AUTH_USER(userData));
      },
      cacheTime: 0,
      // refetchOnWindowFocus: false,
    }
  );

  const { data: userSetting } = useQuery('userSetting', getUserSetting, {
    onSuccess: (data) => {},
    cacheTime: 0,
    // refetchOnWindowFocus: false,
  });
  return (
    <>
      <ThemedApp>
        <ThemeInitializer />
        <ThemeGlobalStyle />
        <SettingLayout>
          <Profile
            direction="column"
            email={userSetting?.user.email}
            userImage={userSetting?.user.userImage}
            preset={userSetting?.user.preset}
            nick={userSetting?.user.nickname}
          />
          {/*  */}
          <AccordianMenu tabText="닉네임 수정">
            <AccordianContent>
              <UpdateNickName nickname={userSetting?.user.nickname} />
            </AccordianContent>
          </AccordianMenu>

          {/*  */}
          <AccordianMenu tabText="프로필 사진 수정">
            <AccordianContent>
              <UpdateUserProfile
                profileImage={userSetting?.user.userImage}
                preset={userSetting?.user.preset}
              />
            </AccordianContent>
          </AccordianMenu>

          {/*  */}
          <AccordianContent>
            <Themes />
          </AccordianContent>

          {/*  */}
          <AccordianMenu tabText="비밀번호 수정">
            <AccordianContent>
              <UpdatePassword />
            </AccordianContent>
          </AccordianMenu>
          <LogOutBtn onClick={onLogOut}>로그아웃</LogOutBtn>
        </SettingLayout>
      </ThemedApp>
    </>
  );
};

export default Setting;