[TIL]231204_Redux로 어벤져스 FanLetter 페이지 만들기

ㅇㅖㅈㅣ·2023년 12월 4일

redux

Today I Learned

목록 보기

37/93

👩🏻‍💻 Today Learn

알고리즘 1문제
팬레터 페이지 구현 과제 제출

💡 Avengers FanLetter Project

회원가입


// 회원가입
  const onRegisterHandler = async () => {
    // 유효성검사
    if (userId === "") {
      toast.warning("아이디를 입력해주세요");
      return;
    }
    if (userPassword === "") {
      toast.warning("비밀번호를 입력해주세요");
      return;
    }
    if (userNickname === "") {
      toast.warning("닉네임을 입력해주세요");
      return;
    }
    const newUser = {
      id: userId,
      password: userPassword,
      nickname: userNickname,
    };
    try {
      await axios.post(
        `${process.env.REACT_APP_AUTH_SERVER}/register`,
        newUser
      );
      // 가입후 로그인페이지로 넘어가게하면 토스티파이 기능 안먹음
      toast.success("회원가입이 완료되었습니다");
      setLoginToggle(!loginToggle);
      setUserId("");
      setUserPassword("");
      setUserNickname("");
    } catch (error) {
      console.log("Axios request failed:", error);
    }
  };

newUsers의 정보를 post로 저장하여 회원가입

  // 로그인
  const onLoginHandler = async () => {
    // 유효성검사
    if (userId === "") {
      toast.warning("아이디를 입력해주세요");
      return;
    }
    if (userPassword === "") {
      toast.warning("비밀번호를 입력해주세요");
      return;
    }

    const registerUser = {
      id: userId,
      password: userPassword,
    };
    try {
      const loginResult = await axios.post(
        `${process.env.REACT_APP_AUTH_SERVER}/login`,
        registerUser
      );
      dispatch(login(loginResult.data));
      toast.success("로그인이 완료되었습니다");
    } catch (error) {
      console.log("Axios request failed:", error);
    }
  };

프로필 수정

const editProfileResultHandler = async () => {
    const editCheck = window.confirm("프로필을 수정하시겠습니까?");
    if (editCheck) {
      setProfileEdit(false);

      const formData = new FormData();
      formData.append("avatar", profileImgUrl);
      formData.append("nickname", editNickname);
      try {
        const editProfileResult = await axios.patch(
          `${process.env.REACT_APP_AUTH_SERVER}/profile`,
          formData,
          {
            headers: {
              "Content-Type": "multipart/form-data",
              Authorization: `Bearer ${currentUserToken}`,
            },
          }
        );
        dispatch(editProfile(editProfileResult));
      } catch (error) {
        console.log("Axios request failed:", error);
      }
    } else {
      return;
    }
  };

프로필 수정페이지는 처음에 유저정보를 댓글리스트인 letters에서 불러와서 문제가 많았었다. 시행착오를 겪으면서 가장 수정도 많이하고 오래걸렸던 기능이었다.

💡 Avengers Page

로그인 페이지

처음 페이지에 들어갔을때 로그인을 하지 않으면 메인페이지를 볼 수 없다.

회원가입 페이지

회원가입이 완료되면 바로 로그인 페이지로 넘어가게 구현하였다.

마이페이지

마이페이지에서 프로필 수정을 클릭했을 시에 닉네임과 프로필 사진을 변경할 수 있으며 처음에는 default 이미지로 설정되어 있다.

메인페이지

메인페이지의 네비게이션바는 회원가입, 로그인 창에서는 볼 수 없으며 로그인 시에만 보여지게 하였다.
로그아웃시에는 자연스럽게 로그인페이지로 다시 넘어간다.

팬레터 작성폼

닉네임은 가입했던 닉네임으로 고정되어있으며 캐릭터를 선택하지 않거나 내용을 입력하지 않으면 작성이 불가능하다.
상단의 버튼으로 해당 캐릭터에게 남겨진 댓글만 골라서 볼 수 있다.

댓글 리스트

닉네임, 댓글을 작성한 시간, 어떤 캐릭터에게 작성하였는지, 댓글내용에 대한 정보가 들어가며 위에서부터 최신순으로 나열된다.

댓글 상세페이지

현재 로그인한 유저가 남긴 댓글이 아닐 경우에는 수정, 삭제버튼이 보이지 않으며 해당 유저만 수정과 삭제가 가능하다.

배포해본 사이트
https://sparta-fanletter-project-redux.vercel.app/login

✍🏻 회고

필수구현사항을 다 완료하지 못하였지만 할 수 있는만큼 최선을 다해서 아쉽진 않았다. 중간중간 오류도 많이 발생했고 막히는 부분도 많았기 때문에 해설영상을 보면서 리팩터링 + 못다한 기능구현을 계속 해볼것이다.
구현하지 못한 부족한 기능도 많고 어려움도 많았지만 처음으로 배포도 해본 만큼 뿌듯함도 있었던 과제였다.