import React, { ChangeEvent, FormEvent, useEffect, useState } from "react"; import { Profile } from "../types"; import { profileApi } from "../apis"; import { useAuth } from "../auth/auth.context"; import { Link } from "react-router-dom"; export default function Profile() { // 로컬 저장소에는 로그인 여부만 저장 const [email, setEmail] = useState(""); const [profile, setProfile] = useState<{ name: string; avatar: File | null; }>({ name: "", avatar: null }); const [avatarUrl, setAvatarUrl] = useState(""); const [imageSrc, setImageSrc] = useState(""); const { logout } = useAuth(); const handleChange = (e: ChangeEvent) => { const { name, value, files } = e.target; console.log("name", name, "value", value); if (files) { setProfile({ ...profile, [name]: files[0] }); showImage(files[0]); } else { setProfile({ ...profile, [name]: value }); } }; const showImage = (blob: Blob) => { const reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = (data) => { if (typeof data.target?.result === "string") { // console.log(data.target?.result); setImageSrc(data.target?.result); } }; }; const handleSubmit = async (e: FormEvent) => { e.preventDefault(); console.log("profile in submit", profile); const formdata = new FormData(); profile.avatar && formdata.append("avatar", profile.avatar); formdata.append("name", profile.name); console.log("form data", formdata.get("avatar")); profileApi.profileUpload(formdata); }; const onDelete = async () => { if (confirm("삭제하시겠습니까?") == true) { await profileApi.deleteUser(); await logout(); } }; useEffect(() => { const getProfile = async () => { const user: Profile = await profileApi.profile(); console.log("user in effect", user); setEmail(user.email); setAvatarUrl(user.fileInfo?.newfilename); setProfile({ ...profile, name: user.name }); }; getProfile(); }, []); return (
프로필 수정
Email
{email}
사진
{imageSrc ? ( ) : ( avatarUrl && ( ) )}
이름
); }