비밀번호 변경
비밀번호 변경은 resetPassword 메서드와
resetPassword 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("/password/reset")
public ResponseEntity<?> passwordReset(@RequestBody ResetPasswordReqDto resetPasswordReqDto) {
// 비밀번호 변경 로직 구현
// userService.resetPassword(resetPasswordReqDto)
return ResponseEntity.ok("Password reset successfully");
}
// 기타 코드 생략...
}MyPage 컴포넌트에서는 현재 사용자의 이메일을 표시하고,
회원 정보 수정 버튼과 비밀번호 변경 버튼을 제공합니다.
각 버튼을 클릭하면 해당 기능을 수행하기 위해 해당 페이지로 이동합니다.
클라이언트 코드 (ModifyPassword.js)
import React, { useState } from 'react';
import axios from 'axios';
const ModifyPassword = ({ userId }) => {
const [newPassword, setNewPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const handleResetPassword = async () => {
const resetPasswordReqDto = {
email: 'user@example.com', // 이메일 정보 추가
password: newPassword
};
try {
const response = await axios.put('http://localhost:8080/api/v1/user/password/reset', resetPasswordReqDto);
console.log(response.data); // 성공 시 응답 데이터 확인
// 성공적으로 비밀번호가 변경되었음을 알리는 알림 또는 페이지 이동 등 추가 작업 수행
} catch (error) {
console.error(error);
// 오류 처리
}
};
return (
<div>
<h2>비밀번호 변경</h2>
<div>
<label>New Password</label>
<input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
</div>
<div>
<label>Confirm Password</label>
<input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
</div>
<button onClick={handleResetPassword}>비밀번호 변경</button>
</div>
);
};
export default ModifyPassword;ModifyPassword 컴포넌트에서는 사용자가 새로운 비밀번호와 확인용 비밀번호를 입력하고,
비밀번호 변경 버튼을 클릭하여 API를 호출하여 비밀번호를 변경합니다.
이 예시에서는 axios를 사용하여 API 호출을 수행하고,
변경이 성공적으로 완료되면 콘솔에 응답 데이터를 출력합니다.
비밀번호 찾기
비밀번호 찾기는 searchUser 메서드와 searchUser API 엔드포인트를 통해 이루어집니다.
클라이언트에서는 CheckEmail 컴포넌트에서 사용자가 등록한 이메일을 입력하고
확인 버튼을 클릭하여 해당 이메일로 비밀번호 재설정 링크를 전송합니다.
이후 사용자는 비밀번호 재설정 페이지에서 새로운 비밀번호를 입력하여 비밀번호를 변경할 수 있습니다.
클라이언트 코드 (CheckEmail.js)
import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
const CheckEmail = () => {
const [searchUserEmail, setSearchUserEmail] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const navigate = useNavigate();
const onChangeHandler = (e) => {
const { name, value } = e.target;
if (name === 'email') {
const emailRegex = /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (!emailRegex.test(value)) {
setErrorMessage('올바른 이메일 형식으로 입력해주세요.');
} else {
setErrorMessage('올바른 이메일 형식입니다. :)');
}
}
setSearchUserEmail(value);
};
const handlePasswordReset = async () => {
const resetPasswordReqDto = {
email: searchUserEmail
};
try {
const response = await axios.put('http://localhost:8080/api/v1/user/password/reset', resetPasswordReqDto);
console.log(response.data); // 성공 시 응답 데이터 확인
// 비밀번호 재설정 링크 전송 완료 후, 해당 안내 또는 페이지 이동 등 추가 작업 수행
} catch (error) {
console.error(error);
// 오류 처리
}
};
return (
<div>
<label>Email</label>
<input type="email" value={searchUserEmail} onChange={onChangeHandler} />
<div>{errorMessage}</div>
<button onClick={handlePasswordReset}>확인</button>
</div>
);
};
export default CheckEmail;CheckEmail 컴포넌트에서는 사용자가 등록한 이메일을 입력하고,
해당 이메일로 비밀번호 재설정 링크를 전송하기 위해 API 호출을 수행합니다.
이 예시에서는 axios를 사용하여 API 호출을 수행하고,
전송이 성공적으로 완료되면 콘솔에 응답 데이터를 출력합니다.
비밀번호 초기화
클라이언트 코드 (PasswordReset.js)
import React, { useState } from 'react';
import axios from 'axios';
import { useLocation, useNavigate } from 'react-router-dom';
const PasswordReset = () => {
const location = useLocation();
const [newPassword, setNewPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const navigate = useNavigate();
const handleResetPassword = async () => {
const resetPasswordReqDto = {
email: new URLSearchParams(location.search).get('email'),
password: newPassword
};
try {
const response = await axios.put('http://localhost:8080/api/v1/user/password/reset', resetPasswordReqDto);
console.log(response.data); // 성공 시 응답 데이터 확인
// 비밀번호 재설정 완료 후, 해당 안내 또는 페이지 이동 등 추가 작업 수행
} catch (error) {
console.error(error);
// 오류 처리
}
};
return (
<div>
<h2>비밀번호 재설정</h2>
<div>
<label>New Password</label>
<input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
</div>
<div>
<label>Confirm Password</label>
<input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
</div>
<button onClick={handleResetPassword}>비밀번호 변경</button>
</div>
);
};
export default PasswordReset;PasswordReset 컴포넌트에서는 사용자가 새로운 비밀번호와 확인용 비밀번호를 입력하고,
비밀번호 변경 버튼을 클릭하여 API를 호출하여 비밀번호를 변경합니다.
이 예시에서는 axios를 사용하여 API 호출을 수행하고,
변경이 성공적으로 완료되면 콘솔에 응답 데이터를 출력합니다.
다음으로...
처음 웹 페이지를 로드 했을 때 나오는 메인 페이지에 대하여 코드를 진행해 볼 예정입니다.
앞으로 남은 것은 후기 작성 페이지와 해당 후기들을 모아서 리스트로 볼 수 있는 페이지
그리고 나의 일정에 대한 페이지등이 남아 있습니다.
백엔드 개발자 준비중