React Nwetter - profile.js

import React, { useState } from "react";
import { authService } from "myBase";
import { useHistory } from "react-router-dom";

export default ({ refreshUser, userObj }) => {
const history = useHistory();
const [newDisplayName, setNewDisplayName] = useState(userObj.displayName);
const onLogOutClick = () => {
authService.signOut();
history.push("/");
};
const onChange = (event) => {
const {
target: { value },
} = event;
setNewDisplayName(value);
};
const onSubmit = async (event) => {
event.preventDefault();
if (userObj.displayName !== newDisplayName) {
await userObj.updateProfile({
displayName: newDisplayName,
});
refreshUser();
}
};
return (

<div className="container">
  <form onSubmit={onSubmit} className="profileForm">
    <input
      onChange={onChange}
      type="text"
      autoFocus
      placeholder="Display name"
      value={newDisplayName}
      className="formInput"
    />
    <input
      type="submit"
      value="Update Profile"
      className="formBtn"
      style={{
        marginTop: 10,
      }}
    />
  </form>
  <span className="formBtn cancelBtn logOut" onClick={onLogOutClick}>
    Log Out
  </span>
</div>

);
};

프로필 / 홈 화면 토글 구현
프로필은 userName을 가져와서 사용자 정보 구성
userName 수정 기능을 구현하여 프로필 수정이 가능
로그아웃 인풋을 만들어 로그아웃을 했을경우 db에서 로그인 데이터 삭제