[MySchedule project] 9. 마이페이지 로직(1) - 조회, 업데이트

이번 챕터는 사용자의 개인정보를 수정 및 조회 할 수 있는 마이페이지의 로직이다.
마이페이지 로직의 챕터(1)은  리덕스 스토어에 저장된 데이터를 불러와서 화면에 출력시켜주고, 수정된 데이터를 db로 보내 업데이트 시켜주는 과정까지 할 것이다.
다음 시간(2)에는 마이페이지의 이미지 업로드에 대해서 다뤄보겠다.

 

Frontend

[ types / mypage.ts ]

 

-  먼저 마이페이지에서 쓸 타입들을 정해놨다.

-  리덕스에서 불러온 데이터들을 useState의 값에 넣을 것이므로, 타입은 리덕스의 userData 타입들과 일치시켜준다.

export interface mypageValue {
  userId: string;
  userPassword: string;
  userPasswordCheck: string;
  userName: string;
  userPhone: string;
  userEmail: string;
  userImage: string;
}

 

[ pages / Mypage / index.tsx ]

 

- 마이페이지에서는 크게 조회(select) 부분과 업데이트(update) 부분으로 나눌수있다.

 

1. 조회

- 먼저 사용자가 회원가입한 데이터들을 조회해온다.

- useSelector hook을 사용해서 리덕스의 userData의 값들을 불러와 useState의 myData에 넣어주었다.

- myData의 값들은 각 회원 요소들의 input태그의 value 값에 넣어 화면에 출력시키게 하였다.

 

2. 업데이트

- 이제 사용자가 개인정보를 바꿀 수 있도록 업데이트 코드를 작성해 보도록 하자.

  (단, id는 바꿀수 없게 readOnly 처리하였음.)

- 업데이트를 위해 onChange 공통 함수를 만들어서 state 상태값이 업데이트 되게 하였고, 업데이트된 값들은 dispatch를 통해 전달하게 하였다.

- 여기서 password는 값을 입력하지 않아도 원래의 password값이 그대로 유지되게 했고, 값을 입력할때만 업데이트되게 하였음.  password는 보안상 화면에 출력되지 않는다.

- 여기서 type의 주의점은 리덕스에서 가져온 타입과 useState의 매칭되는 변수들 타입이 일치해야된다.

import React, { ChangeEvent, useState } from "react";
import { useAddDispatch, useAddSelector } from "../../store/redux";
import { mypageValue } from "../../types/mypage";
import { useNavigate } from "react-router-dom";
import { mypageUpdate } from "../../store/thunkFunction";
import UserImageFile from "./UserImageFile";
import { toast } from "react-toastify";

const Mypage = () => {
  const data = useAddSelector((state) => state.user?.userData);
  const dispatch = useAddDispatch();
  const [myData, setMydata] = useState<mypageValue>({
    userId: data.userId,
    userName: data.userName,
    userPassword: "", // 변경하지않으면 db에 있는 password는 그대로.
    userPasswordCheck: "",
    userEmail: data.userEmail,
    userPhone: data.userPhone,
    userImage: data.userImage,
  });
  //정규식 form
  const passwordForm =
    /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{11,20}$/;
  const emailForm =
    /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;

  //input onChange 공통스크립트
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();
    const { name, value } = e.target; //디스트럭처링
    setMydata((prevState) => ({
      //원래있던 값에 새로운 값을 오버라이딩
      ...prevState,
      [name]: value,
    }));
  };

  //이미지 업로드 함수
  const handleImageChange = (updatedImage: string) => {
    setMydata((prevState) => ({
      ...prevState,
      userImage: updatedImage,
    }));
  };

  //업데이트 버튼 이벤트 함수
  const userDataUpdate = (event: React.FormEvent<HTMLFormElement>) => {
    //이미있는 데이터 수정이라 유효성 체크부분은 이메일양식과 비밀번호양식만 확인!
    event.preventDefault();

    //onSubmit 이벤트시 validation check
    if (myData.userPassword !== "") {
      if (!passwordForm.test(myData.userPassword)) {
        toast.info("패스워드 양식을 확인해주세요.");
        return;
      } else if (myData.userPassword !== myData.userPasswordCheck) {
        toast.info("패스워드가 일치하지 않습니다.");
        return;
      }
    }
    if (!emailForm.test(myData.userEmail)) {
      toast.info("이메일 형식을 확인해 주세요.");
      return;
    }

    const body: mypageValue = {
      ...myData,
    };
    console.log(body);

    dispatch(mypageUpdate(body)).then((response) => {
      console.log(response);
      if (response.payload.userId) {
        navigate("/");
      }
    });
  };

  //홈으로 이동 함수 start
  const navigate = useNavigate();
  const homeNavi = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();

    // eslint-disable-next-line no-restricted-globals
    let check = confirm("작성을 취소하시겠습니까?");
    if (check) {
      navigate("/");
    }
  };
  //홈으로 이동 함수end

  return (
    <section className="max-w-[1100px] m-auto mt-16">
      <h2 className="text-2xl font-bold text-left my-3">마이페이지</h2>
      <form onSubmit={userDataUpdate}>
        <div className="p-3 bg-white rounded-md shadow-md my-2">
          <table className="sm:w-8/12 w-11/12 m-auto text-left text-sm">
            <thead></thead>
            <tbody>
              <tr className=" border-t-[1px] h-[60px] w-full">
                <th className="p-3 bg-neutral-100 sm:text-sm text-xs font-semibold sm:w-4/12 w-5/12">
                  아이디
                </th>
                <td className="py-3 w-8/12">
                  <input
                    className="bg-gray-300 my-2 mx-2 sm:w-[350px] w-[150px] rounded-md border-[1px] border-gray-200  border-t-[3px] h-[45px] p-3 hover:border-t-[3px] hover:border-t-gray-400 focus:focus:outline-none"
                    type="text"
                    name="userId"
                    id="userId"
                    onChange={handleChange}
                    value={myData.userId}
                    readOnly={true}
                  />
                </td>
              </tr>
              <tr className=" border-t-[1px] h-[160px] w-full">
                <th className="p-3 bg-neutral-100 sm:text-sm text-xs font-semibold sm:w-4/12 w-5/12">
                  이미지
                </th>
                <td className="py-3 w-8/12">
                  <UserImageFile
                    userImage={myData.userImage}
                    handleImageChange={handleImageChange}
                  />
                </td>
              </tr>

              <tr className=" border-t-[1px] h-[60px] w-full">
                <th className="p-3 bg-neutral-100 sm:text-sm text-xs font-semibold sm:w-4/12 w-5/12">
                  사용자명
                </th>
                <td className="py-3 w-8/12">
                  <input
                    className="my-2 mx-2 sm:w-[350px] w-[150px] rounded-md border-[1px] border-gray-200  border-t-[3px] h-[45px] p-3 hover:border-t-[3px] hover:border-t-gray-400 focus:focus:outline-none"
                    type="text"
                    name="userName"
                    id="userName"
                    onChange={handleChange}
                    value={myData.userName}
                  />
                </td>
              </tr>
              <tr className=" border-t-[1px] h-[60px] w-full">
                <th className="p-3 bg-neutral-100 sm:text-sm text-xs font-semibold sm:w-4/12 w-5/12">
                  비밀번호변경
                </th>
                <td className="py-3 w-8/12">
                  <input
                    className="my-2 mx-2 sm:w-[350px] w-[150px] rounded-md border-[1px] border-gray-200  border-t-[3px] h-[45px] p-3 hover:border-t-[3px] hover:border-t-gray-400 focus:focus:outline-none"
                    type="password"
                    name="userPassword"
                    id="userPassword"
                    onChange={handleChange}
                    value={myData.userPassword}
                  />
                  {myData.userPassword &&
                    !passwordForm.test(myData.userPassword) && (
                      <p className="p-2 text-red-500">
                        영문, 숫자, 특수문자 포함 11자 이상 20 자 이하로 입력해
                        주세요
                      </p>
                    )}
                  <p className="pl-3 text-gray-600 font-sans text-xs font-bold">
                    비밀번호 변경을 원하시면 입력해주세요
                  </p>
                </td>
              </tr>
              <tr className=" border-t-[1px] h-[60px] w-full">
                <th className="p-3 bg-neutral-100 sm:text-sm text-xs font-semibold sm:w-4/12 w-5/12">
                  비밀번호확인
                </th>
                <td className="py-3 w-8/12">
                  <input
                    className="my-2 mx-2 sm:w-[350px] w-[150px] rounded-md border-[1px] border-gray-200  border-t-[3px] h-[45px] p-3 hover:border-t-[3px] hover:border-t-gray-400 focus:focus:outline-none"
                    type="password"
                    name="userPasswordCheck"
                    id="userPasswordCheck"
                    onChange={handleChange}
                    value={myData.userPasswordCheck}
                  />
                  {myData.userPasswordCheck &&
                    myData.userPassword !== myData.userPasswordCheck && (
                      <p className="p-2 text-red-500">
                        패스워드가 일치하지 않습니다.
                      </p>
                    )}
                </td>
              </tr>

              <tr className=" border-t-[1px] h-[60px] w-full">
                <th className="p-3 bg-neutral-100 sm:text-sm text-xs font-semibold sm:w-4/12 w-5/12">
                  휴대폰번호
                </th>
                <td className="py-3 w-8/12">
                  <input
                    className="my-2 mx-2 sm:w-[350px] w-[150px] rounded-md border-[1px] border-gray-200  border-t-[3px] h-[45px] p-3 hover:border-t-[3px] hover:border-t-gray-400 focus:focus:outline-none"
                    type="text"
                    name="userPhone"
                    id="userPhone"
                    onChange={handleChange}
                    value={myData.userPhone as string}
                  />
                </td>
              </tr>

              <tr className="border-t-[1px] h-[60px] w-full">
                <th className="p-3 bg-neutral-100 sm:text-sm text-xs font-semibold sm:w-4/12 w-5/12">
                  이메일
                </th>
                <td className="py-3 w-8/12">
                  <input
                    className="my-2 mx-2 sm:w-[350px] w-[150px] rounded-md border-[1px] border-gray-200  border-t-[3px] h-[45px] p-3 hover:border-t-[3px] hover:border-t-gray-400 focus:focus:outline-none"
                    type="text"
                    name="userEmail"
                    id="userEmail"
                    onChange={handleChange}
                    value={myData.userEmail}
                  />
                  {myData.userEmail && !emailForm.test(myData.userEmail) && (
                    <p className="p-2 text-red-500">
                      이메일 형식을 확인해주세요.
                    </p>
                  )}
                </td>
              </tr>
              <tr>
                <td className="flex gap-2 mt-2 text-center">
                  <button
                    type="submit"
                    className="sm:w-6/12 w-5/12 bg-blue-500 h-[45px] text-white sm:font-bold font-semibold sm:text-sm text-[10px] py-2 px-2 rounded-md hover:bg-blue-600"
                  >
                    수정
                  </button>
                  <button
                    onClick={homeNavi}
                    className="sm:w-6/12 w-5/12  bg-blue-500 h-[45px] text-white sm:font-bold font-semibold sm:text-sm text-[10px] py-2 px-2 rounded-md hover:bg-blue-600"
                  >
                    HOME
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </form>
    </section>
  );
};

export default Mypage;

 

[ store / thunkFunction.tsx ]

 

-  사용자가 바꾸고 싶은 데이터들을 body에 담아 axios를 통해 백앤드로 보내주는 과정이다.

//마이페이지 데이터 업데이트
export const mypageUpdate = createAsyncThunk(
  "mypageUpdate",
  async (body: mypageValue, thunkAPI) => {
    try {
      const response = await axiosInstance.post(`mypage/userDataUpdate`, body);
      console.log(response.data);
      return response.data;
    } catch (error: any) {
      console.log(error);
      return thunkAPI.rejectWithValue(error.response.data || error.message);
    }
  }
);

 

Backend

[ index.js ]

 

-  경로 추가

//route start

app.use("/mypage", require("./routes/mypage"));

//route end

 

[ routes / mypage.js ]

 

- 프론트엔드에서 받은 데이터들을 받아 db에 있는 데이터들을 업데이트 시켜주는 부분이다.

- 전역변수 commonData는 코드의 중복성을 줄이기 위해 공통된 데이터를 담은 변수다. 

- 패스워드를 입력한 경우(값이 들어있음)에는 salt와 hash의 조합으로 다시 암호화를 진행한 후에 패스워드 변수에 담아 commonData에 합쳐서 update를 했다.

- 패스워드를 입력하지 않은 경우는 원래 db에 있는 패스워드를 건드릴 필요가 없으므로, commonData 변수만 보내 update를 했다.

- 업데이트가 정상적으로 되었다면 updateData에 업데이트가 완료된 데이터들을 받아 json형식으로 프론트엔드쪽으로 전달(response) 하였다.

const express = require("express");
const auth = require("../middleware/auth");
const User = require("../models/User");
const router = express.Router();
const bcrypt = require("bcryptjs");
const multer = require("multer");
const fsExtra = require("fs-extra");

// 파일업로드 start (multer를 사용한 )
... 다음 시간에 ...
// 파일업로드 end


//회원정보 수정
router.post("/userDataUpdate", async (req, res, next) => {
  try {
    console.log(req.body);
    let userPassword = "";
    let commonData = {
      userName: req.body.userName,
      userEmail: req.body.userEmail,
      userPhone: req.body.userPhone,
    };

    // 이미지 유무 공통메서드
    // 다음시간에

    //패스워드를 입력한경우
    if (req.body.userPassword !== "" && req.body.userPassword !== null) {
      const salt = await bcrypt.genSalt(10); //salt생성
      userPassword = await bcrypt.hash(req.body.userPassword, salt);
      commonData.userPassword = userPassword;

      //userImageCommon();
    } else {
      console.log("test");
      //userImageCommon();
    }

    console.log(commonData);

    const updateUser = await User.findOneAndUpdate(
      { userId: req.body.userId },
      commonData,
      { new: true }
    );
    console.log(updateUser);

    return res.json({
      userId: updateUser.userId,
      userName: updateUser.userName,
      userPhone: updateUser.userPhone,
      userEmail: updateUser.userEmail,
      userImage: updateUser.userImage,
      role: updateUser.role,
    });
  } catch (error) {
    next(error);
  }
});

module.exports = router;

 

Frontend

[ store / userSlice.tsx ]

 

- extraReducers에 아래 코드들을 추가해준다.

- 백앤드에서 보내준 수정된 회원 데이터는  action.payload를 통해 userData에 넣어 리덕스 스토어의 값들을 업데이트 시켜준다.

.addCase(mypageUpdate.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(mypageUpdate.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isAuth = true;
        state.userData = action.payload;
        toast.success("회원정보 수정이 완료되었습니다.");
      })
      .addCase(mypageUpdate.rejected, (state, action: any) => {
        state.isLoading = false;
        state.error = action.payload;
        toast.error(action.payload);
      });

 

[ 결과화면 ]

ui화면

 

전달

응답

리덕스