💻 코딩 일기 : [스프링 게시판 with React] '회원정보 수정(Update)' 편

🔔'회원정보 수정(Update)'에 대해서 알아보자!

💟 회원정보 수정(Update)

Member.jsx(React)

export function MemberEdit() {
  const [member, setMember] = useState(null);
  const [passwordCheck, setPasswordCheck] = useState("");
  const [oldPassword, setOldPassword] = useState(""); //기존 패스워드
  const [oldNickName, setOldNickName] = useState(""); // 기존 닉네임
  const [isCheckedNickName, setIsCheckedNickName] = useState(true);
  const { id } = useParams();
  const toast = useToast();
  const navigate = useNavigate();
  const { isOpen, onClose, onOpen } = useDisclosure();

  useEffect(() => {
    axios
      .get(`/api/member/${id}`)
      .then((response) => {
        const member1 = response.data;
        setMember({ ...member1, password: "" });
        setOldNickName(member1.nickName);
      })
      .catch((err) => {
        toast({
          status: "error",
          description: "해당 회원이 없습니다.",
          position: "top-right",
          duration: 1000,
        });
        navigate("/");
      });
  }, []);

  function handleClickSave() {
    axios
      .put(`/api/member/modify`, { ...member, oldPassword })
      .then(() => {
        toast({
          status: "success",
          description: `${member.id}번 회원이 수정되었습니다.`,
          position: "top-right",
        });
        navigate(`/member/${member.id}`);
      })
      .catch((err) => {
        if (err.response.status === 400) {
          toast({
            status: "error",
            description: `회원 정보가 수정되지 않았습니다. 작성한 내용을 확인해주세요.`,
            position: "top-right",
          });
        }
      })
      .finally(() => {
        onClose();
        setOldPassword("");
      });
  }

  function handleCheckNickName() {
    axios
      .get(`/api/member/check?nickName=${member.nickName}`)
      .then((res) => {
        toast({
          status: "warning",
          description: "중복된 닉네임입니다.",
          position: "top",
          duration: 1000,
        });
      })
      .catch((err) => {
        if (err.response.status === 404) {
          toast({
            status: "info",
            description: "사용할 수 있는 닉네임입니다.",
            position: "top",
            duration: 1000,
          });
          setIsCheckedNickName(true); // 중복확인하고 사용할 수 있으면 true, 입력을 시작하면 false
        }
      })
      .finally();
  }

  if (member == null) {
    return <Spinner />;
  }

  let isDisableNickNameCheckButton = false;
  if (member.nickName === oldNickName) {
    isDisableNickNameCheckButton = true;
  }
  if (member.nickName.trim().length === 0) {
    isDisableNickNameCheckButton = true;
  }

  if (isCheckedNickName) {
    isDisableNickNameCheckButton = true;
  }

  let isDisableSaveButton = false;

  if (member.password !== passwordCheck) {
    isDisableSaveButton = true;
  }

  if (member.nickName.trim().length === 0) {
    isDisableSaveButton = true;
  }

  if (!isCheckedNickName) {
    isDisableSaveButton = true;
  }

  return (
    <Box>
      <Box>{member.id}번 회원</Box>
      <Box>
        <FormControl>
          <FormLabel>이메일</FormLabel>
          <Input value={member.email} readOnly />
        </FormControl>
      </Box>
      <Box>
        <FormControl>
          <FormLabel>비밀번호</FormLabel>
          <Input
            defaultValue={member.password}
            placeholder={"암호를 변경하려면 입력하세요."}
            onChange={(e) => setMember({ ...member, password: e.target.value })}
          />
          <FormHelperText color={"red"}>
            입력하지 않으면 기존 암호를 변경하지 않습니다.
          </FormHelperText>
        </FormControl>
      </Box>
      <Box>
        <FormControl>
          <FormLabel>비밀번호 확인</FormLabel>
          <Input onChange={(e) => setPasswordCheck(e.target.value)} />
          {member.password === passwordCheck || (
            <FormHelperText color={"red"}>
              비밀번호가 일지하지 않습니다.
            </FormHelperText>
          )}
        </FormControl>
      </Box>
      <Box>
        <FormControl>
          <FormLabel>닉네임</FormLabel>
          <InputGroup>
            <Input
              onChange={(e) => {
                const newNickName = e.target.value.trim();
                setMember({ ...member, nickName: newNickName });
                setIsCheckedNickName(newNickName === oldNickName); // 기존 닉네임과 새로운 닉네임이 같지 않을때,입력을 시작할 때 활성화
              }}
              value={member.nickName}
            />
            <InputRightElement w={"100px"} mr={1}>
              <Button
                isDisabled={isDisableNickNameCheckButton}
                onClick={handleCheckNickName}
                colorScheme={"green"}
              >
                중복 확인
              </Button>
            </InputRightElement>
          </InputGroup>
          {isDisableNickNameCheckButton || (
            <FormHelperText color={"red"}>
              닉네임 중복 확인 해야 합니다.
            </FormHelperText>
          )}
        </FormControl>
      </Box>
      <Box>
        <Button
          isDisabled={isDisableSaveButton}
          colorScheme={"blue"}
          onClick={onOpen}
        >
          저장
        </Button>
        <Modal isOpen={isOpen} onClose={onClose}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>
              <FontAwesomeIcon icon={faTriangleExclamation} />
              기존 패스워드 확인
            </ModalHeader>
            <ModalBody>
              <FormControl>
                <FormLabel>기존 패스워드</FormLabel>
                <Input onChange={(e) => setOldPassword(e.target.value)} />
              </FormControl>
            </ModalBody>
            <ModalFooter>
              <Button onClick={handleClickSave} colorScheme={"blue"}>
                확인
              </Button>
              <Button onClick={onClose}>취소</Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      </Box>
    </Box>
  );
}

• 수정 페이지에서 이메일, 비밀번호, 닉네임, 가입일시를 가져오기 위해서 /api/member/${id} 경로로 GET 요청을 해서 member 객체를 받아오는데 그 때 member 객체의 비밀번호를 빈 값으로 가져옵니다. 화면에 보여주기 위해 <Input/> 태그에서 defaultValue속성을 사용하여 이미 저장되어 있던 값(초기값)을 가져올 수 있도록 설정해줍니다.
• 저장 버튼을 클릭하면 /api/member/modify 경로로 PUT 요청을 해서 member 객체를 요청 본문에 담아 보냅니다.

MemberController.java

@PutMapping("modify")
public ResponseEntity modify(@RequestBody Member member) {
    if (service.hasAccessModify(member)) {
        service.modify(member);
        return ResponseEntity.ok().build();
    } else {
        return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
    }
}

• PUT 요청을 받아 요청 본문에서 받은 member 객체를 서비스에서 수정 권한이 있다면 Update 할 수 있도록 요청을 처리합니다. 수정 작업이 성공하면 ok 응답을 하고 실패하면 403(FORBIDDEN) 응답을 합니다.

MemberService.java

public void modify(Member member) {
    if (member.getPassword() != null && member.getPassword().trim().length() > 0) {
        // 패스워드가 입력(변경)되었으니 바꾸기
        member.setPassword(passwordEncoder.encode(member.getPassword()));
    } else {
        // 패스워드가 입력이 안됐으면 기존 값으로 유지
        Member dbMember = mapper.selectById(member.getId());
        member.setPassword(dbMember.getPassword());
    }
    mapper.update(member);
}

public boolean hasAccessModify(Member member) {
    Member dbMember = mapper.selectById(member.getId());
    if (dbMember == null) {
        return false;
    }

    if (!passwordEncoder.matches(member.getOldPassword(), dbMember.getPassword())) {
        return false;
    }

    return true;
}

• modify : 패스워드를 클라이언트에게 빈 값으로 보내주었기 때문에 패스워드를 변경하지 않으면 mapper에서 Update를 할 수 없습니다. 그래서 패스워드를 입력했다면 encoding 해서 넣어주고 패스워드가 입력되지 않았다면 기존에 저장되어 있던(DB) 회원의 정보를 가져와 비밀번호를 유지해줍니다.
• hasAccessModify() : 메퍼에서 DB에 회원 ID를 조회해서 그 아이디에 해당하는 데이터베이스에 저장된 비밀번호(dbMember.getPassword())와 기존 비밀번호(member.getOldPassword())가 일치하는지 확인하고 encoding을 해줍니다.

MemberMapper.java

@Update("UPDATE member SET password=#{password}, nick_name=#{nickName} WHERE id=#{id}")
int update(Member member);

• 패스워드와 닉네임이 바뀌는 쿼리를 작성합니다.

💟 수정과 관련된 부가기능

1. 별명 중복 확인

<Box>
  <FormControl>
    <FormLabel>닉네임</FormLabel>
    <InputGroup>
      <Input
        onChange={(e) => {
          const newNickName = e.target.value.trim();
          setMember({ ...member, nickName: newNickName });
          setIsCheckedNickName(newNickName === oldNickName); // 기존 닉네임과 새로운 닉네임이 같지 않을때,입력을 시작할 때 활성화
        }}
        value={member.nickName}
      />
      <InputRightElement w={"100px"} mr={1}>
        <Button
          isDisabled={isDisableNickNameCheckButton}
          onClick={handleCheckNickName}
          colorScheme={"green"}
        >
          중복 확인
        </Button>
      </InputRightElement>
    </InputGroup>
    {isDisableNickNameCheckButton || (
      <FormHelperText color={"red"}>
        닉네임 중복 확인 해야 합니다.
      </FormHelperText>
    )}
  </FormControl>
</Box>

• 닉네임을 입력할 때 DB에 있던 닉네임과 새롭게 작성한 닉네임이 같은지 비교하기 위해 새로운 닉네임 변수(newNickName)을 정의하고 GET 요청을 해서 받아온 DB에 있는 닉네임(oldNickName)을 정의합니다.

2. 중복 확인 버튼 활성화 유무

const [isCheckedNickName, setIsCheckedNickName] = useState(true);

let isDisableNickNameCheckButton = false; // 활성화 

// 새로운 닉네임과 기존 닉네임이 같다면 중복 확인 버튼 비활성화
 if (member.nickName === oldNickName) {
   isDisableNickNameCheckButton = true;
 }

// 새로운 닉네임을 작성하지 않으면 중복 확인 버튼 비활성화
if (member.nickName.trim().length === 0) {
   isDisableNickNameCheckButton = true;
 }

// 닉네임 중복확인 했으면 중복 확인 버튼 비활성화
 if (isCheckedNickName) {
   isDisableNickNameCheckButton = true;
 }

3. 비밀번호와 비밀번호 확인이 일치하는지 확인

const [passwordCheck, setPasswordCheck] = useState("");

<Box>
  <FormControl>
    <FormLabel>비밀번호</FormLabel>
    <Input
      defaultValue={member.password}
      placeholder={"암호를 변경하려면 입력하세요."}
      onChange={(e) => setMember({ ...member, password: e.target.value })}
    />
    <FormHelperText color={"red"}>
      입력하지 않으면 기존 암호를 변경하지 않습니다.
    </FormHelperText>
  </FormControl>
</Box>
<Box>
  <FormControl>
    <FormLabel>비밀번호 확인</FormLabel>
    <Input onChange={(e) => setPasswordCheck(e.target.value)} />
    {member.password === passwordCheck || (
      <FormHelperText color={"red"}>
        비밀번호가 일치하지 않습니다.
      </FormHelperText>
    )}
  </FormControl>
</Box>

• 비밀번호와 비밀번호가 같은지 확인하기 위해 비밀번호 입력 값을 member의 password의 값으로 업데이트 한 값이랑 비밀번호 확인에서 입력 한 값이랑 비교합니다.
• 만약에 일치하지 않다면 메세지가 나오고 일치하다면 메세지가 지워집니다.

4. 저장 버튼 비활성화(isDisabled)

let isDisableSaveButton = false; //활성화

// 비밀번호가 같지 않으면 저장 버튼 비활성화
if (member.password !== passwordCheck) {
  isDisableSaveButton = true; 
}

// 작성한 닉네임이 없다면 저장 버튼 비활성화
if (member.nickName.trim().length === 0) {
  isDisableSaveButton = true;
}

// 닉네임 중복을 확인하지 않았다면 비활성화
if (!isCheckedNickName) {
  isDisableSaveButton = true;
}

5. 저장 버튼 클릭 시 모달 확인(비밀번호 입력)

<Modal isOpen={isOpen} onClose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>
      <FontAwesomeIcon icon={faTriangleExclamation} />
      기존 패스워드 확인
    </ModalHeader>
    <ModalBody>
      <FormControl>
        <FormLabel>기존 패스워드</FormLabel>
        <Input onChange={(e) => setOldPassword(e.target.value)} />
      </FormControl>
    </ModalBody>
    <ModalFooter>
      <Button onClick={handleClickSave} colorScheme={"blue"}>
        확인
      </Button>
      <Button onClick={onClose}>취소</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

• 저장 버튼을 클릭하면 Modal이 나타나고 Modal에서 비밀번호를 입력해야 수정할 수 있게 합니다.
• PUT 요청할 때, 요청 본문에 member 객체의 모든 속성을 복사하고 여기에 oldPassword 속성을 덧붙인 형태로 보냅니다. 그런 다음 기존 패스워드를 입력해서 같다면 수정이 되고 같지 않으면 수정이 안됩니다.