회원 정보 수정

회원 정보 수정

회원 정보 수정은 modifyUser 메서드와 modifyUser API 엔드포인트를 통해 이루어집니다.
클라이언트에서는 MyPage 컴포넌트를 통해 회원 정보 수정 페이지로 이동하고,
사용자가 수정할 정보를 입력한 후 수정을 완료할 수 있습니다.

클라이언트 코드 (MyPage.js)

import React, { useState } from 'react';
import axios from 'axios';
import { useQuery } from 'react-query';
import { useNavigate } from 'react-router-dom';

const MyPage = () => {
  const navigate = useNavigate();
  const [authState, setAuthState] = useState(); // 인증 상태 관리
  const principal = useQuery(["principal"], async () => {
    const accessToken = localStorage.getItem("accessToken");
    const response = await axios.get('http://localhost:8080/api/v1/auth/principal', { params: { accessToken } });
    return response;
  }, {
    enabled: authState
  });

  if (principal.isLoading) {
    return (<div>Loading...</div>)
  }

  const handleModifyUser = () => {
    navigate(`/user/modify/${principal?.data?.data?.userId || ''}`);
  }

  const handleResetPassword = () => {
    navigate(`/user/modify/password/${principal?.data?.data?.userId || ''}`);
  }

  return (
    <div>
      <div>{principal?.data?.data?.email || 'Loading...'}</div>
      <button onClick={handleModifyUser}>회원 정보 수정</button>
      <button onClick={handleResetPassword}>비밀번호 변경</button>
    </div>
  );
};

export default MyPage;

서버 코드 (UserController.java)

@RestController
@RequestMapping("/api/v1/user")
public class UserController {
  
  @PutMapping("/{userId}")
  public ResponseEntity<?> modifyUser(@PathVariable int userId, @RequestBody UserModifyReqDto userModifyReqDto) {
    // 회원 정보 수정 로직 구현
    // userService.modifyUser(userId, userModifyReqDto)
    return ResponseEntity.ok("User modified successfully");
  }
  
  // 기타 코드 생략...
}

MyPage 컴포넌트에서는 현재 사용자의 이메일을 표시하고,
회원 정보 수정 버튼과 비밀번호 변경 버튼을 제공합니다.
각 버튼을 클릭하면 해당 기능을 수행하기 위해 해당 페이지로 이동합니다.

클라이언트 코드 (ModifyUser.js)

import React, { useState } from 'react';
import axios from 'axios';

const ModifyUser = ({ userId }) => {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [address, setAddress] = useState('');

  const handleModifyUser = async () => {
    const userModifyReqDto = {
      email,
      name,
      phone,
      address
    };

    try {
      const response = await axios.put(`http://localhost:8080/api/v1/user/${userId}`, userModifyReqDto);
      console.log(response.data); // 성공 시 응답 데이터 확인
      // 성공적으로 수정되었음을 알리는 알림 또는 페이지 이동 등 추가 작업 수행
    } catch (error) {
      console.error(error);
      // 오류 처리
    }
  };

  return (
    <div>
      <h2>회원 정보 수정</h2>
      <div>
        <label>Email</label>
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </div>
      <div>
        <label>Name</label>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <label>Phone</label>
        <input type="text" value={phone} onChange={(e) => setPhone(e.target.value)} />
      </div>
      <div>
        <label>Address</label>
        <input type="text" value={address} onChange={(e) => setAddress(e.target.value)} />
      </div>
      <button onClick={handleModifyUser}>수정하기</button>
    </div>
  );
};

export default ModifyUser;

---

다음으로..

비밀번호 수정 및 찾기 등을 나타내는 페이지와 백엔드 기능을 알아보도록 하겠습니다