import React, { useEffect, useState } from "react"; import { Profile } from "../types"; import { profileApi } from "../apis"; export default function Profile() { // 로컬 저장소에는 로그인 여부만 저장 const [email, setEmail] = useState(""); const [picturename, setPicturename] = useState(""); const [file, setFile] = useState(); const [imageSrc, setImageSrc] = useState(""); const [nickname, setNickname] = useState(""); const handleProfile = async () => { const user: Profile = await profileApi.profile(); return user; }; const PictureSrc = (fileBlob: Blob) => { const reader = new FileReader(); reader.readAsDataURL(fileBlob); reader.onload = (data) => { if (typeof data.target?.result === "string") { console.log(data.target?.result); setImageSrc(data.target?.result); } }; }; const onUploadFile = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!(file === undefined)) { setFile(file); PictureSrc(file); } }; const onNickChange = (e: React.ChangeEvent) => { const nickname = e.target.value; setNickname(nickname); }; const userChange = async () => { const profile = await handleProfile(); setEmail(profile.email); setPicturename(profile.avatar.newfilename); }; const handleClick = async ( e: React.MouseEvent ) => { const formdata = new FormData(); if (!(file === undefined || file === null)) { formdata.append("picture", file); } formdata.append("nickname", nickname); await profileApi.picture(formdata); }; useEffect(() => { userChange(); }, []); return (
프로필
Email
{email}
사진
{imageSrc ? ( preview-img ) : ( )}
별명
); }