Commit 6c265dde authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

profile 로직 수정 변경

parent da88857d
...@@ -7,7 +7,8 @@ export const profile = async () => { ...@@ -7,7 +7,8 @@ export const profile = async () => {
}; };
export const profileUpload = async (formdata: FormData) => { export const profileUpload = async (formdata: FormData) => {
await axios.post(`${baseUrl}/profile`, formdata); const { data } = await axios.post(`${baseUrl}/profile`, formdata);
return data;
}; };
export const deleteUser = async () => { export const deleteUser = async () => {
......
import React, { useEffect, useState } from "react"; import React, { ChangeEvent, FormEvent, useEffect, useState } from "react";
import { Profile } from "../types"; import { Profile } from "../types";
import { profileApi } from "../apis"; import { profileApi } from "../apis";
import { useAuth } from "../auth/auth.context"; import { useAuth } from "../auth/auth.context";
...@@ -7,89 +7,67 @@ import { Link } from "react-router-dom"; ...@@ -7,89 +7,67 @@ import { Link } from "react-router-dom";
export default function Profile() { export default function Profile() {
// 로컬 저장소에는 로그인 여부만 저장 // 로컬 저장소에는 로그인 여부만 저장
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [picturename, setPicturename] = useState(""); const [profile, setProfile] = useState<{
const [file, setFile] = useState<File>(); name: string;
avatar: File | null;
}>({ name: "", avatar: null });
const [avatarUrl, setAvatarUrl] = useState("");
const [imageSrc, setImageSrc] = useState(""); const [imageSrc, setImageSrc] = useState("");
const [nickname, setNickname] = useState("");
const [placeholder, setPlaceholder] = useState("");
const { logout } = useAuth(); const { logout } = useAuth();
const handleProfile = async () => { const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const user: Profile = await profileApi.profile(); const { name, value, files } = e.target;
return user; console.log("name", name, "value", value);
if (files) {
setProfile({ ...profile, [name]: files[0] });
showImage(files[0]);
} else {
setProfile({ ...profile, [name]: value });
}
}; };
const PictureSrc = (fileBlob: Blob) => { const showImage = (blob: Blob) => {
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(blob);
reader.readAsDataURL(fileBlob);
reader.onload = (data) => { reader.onload = (data) => {
if (typeof data.target?.result === "string") { if (typeof data.target?.result === "string") {
console.log(data.target?.result); // console.log(data.target?.result);
setImageSrc(data.target?.result); setImageSrc(data.target?.result);
} }
}; };
}; };
const onUploadFile = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSubmit = async (e: FormEvent) => {
const file = e.target.files?.[0];
if (!(file === undefined)) {
setFile(file);
PictureSrc(file);
}
};
const onNickChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newnickname = e.target.value;
setNickname(newnickname);
};
const userChange = async () => {
const profile = await handleProfile();
setEmail(profile.email);
setPicturename(profile.fileInfo.newfilename);
setPlaceholder(profile.fileInfo.nickname);
};
const handleClick = async (
e: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
) => {
e.preventDefault(); e.preventDefault();
console.log("profile in submit", profile);
const formdata = new FormData(); const formdata = new FormData();
if (!(file === undefined || nickname === "")) { profile.avatar && formdata.append("avatar", profile.avatar);
formdata.append("picture", file); formdata.append("name", profile.name);
formdata.append("nickname", nickname); console.log("form data", formdata.get("avatar"));
console.log("both"); profileApi.profileUpload(formdata);
console.log(formdata);
await profileApi.profileUpload(formdata);
} else if (!(file === undefined) && nickname === "") {
formdata.append("picture", file);
await profileApi.profileUpload(formdata);
} else if (file === undefined && !(nickname === "")) {
formdata.append("nickname", nickname);
await profileApi.profileUpload(formdata);
} else {
alert("수정할 정보를 입력해주세요.");
}
}; };
const deleteClick = async () => { const onDelete = async () => {
if (confirm("삭제하시겠습니까?") == true) { if (confirm("삭제하시겠습니까?") == true) {
const success = await profileApi.deleteUser(); await profileApi.deleteUser();
if (success) {
await logout(); await logout();
} }
} else {
}
}; };
useEffect(() => { useEffect(() => {
userChange(); const getProfile = async () => {
const user: Profile = await profileApi.profile();
console.log("user in effect", user);
setEmail(user.email);
setAvatarUrl(user.avatar?.newfilename);
setProfile({ ...profile, name: user.name });
};
getProfile();
}, []); }, []);
return ( return (
<div className="grid "> <div className="grid ">
<form className=""> <form className="" onSubmit={handleSubmit}>
<div className=" mt-10 text-2xl">프로필 수정</div> <div className=" mt-10 text-2xl">프로필 수정</div>
<div className="grid mt-10 border-0 border-y-2 border-gray-400 "> <div className="grid mt-10 border-0 border-y-2 border-gray-400 ">
<div className="flex h-20"> <div className="flex h-20">
...@@ -112,38 +90,41 @@ export default function Profile() { ...@@ -112,38 +90,41 @@ export default function Profile() {
className="object-cover object-center h-full" className="object-cover object-center h-full"
/> />
) : ( ) : (
avatarUrl && (
<img <img
src={"http://localhost:3000/images/" + picturename} src={"http://localhost:3000/images/" + avatarUrl}
className="object-cover object-center h-full" className="object-cover object-center h-full"
/> />
)
)} )}
</div> </div>
<input <input
type="file" type="file"
id="files" name="avatar"
id="avatar"
className="hidden" className="hidden"
onChange={onUploadFile} onChange={handleChange}
></input> ></input>
<label htmlFor="files" className="border-2 m-5"> <label htmlFor="avatar" className="border-2 m-5">
이미지 선택 이미지 선택
</label> </label>
</div> </div>
</div> </div>
<div className="flex border-0 border-t-2 h-20"> <div className="flex border-0 border-t-2 h-20">
<div className="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0"> <div className="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
별명 이름
</div> </div>
<input <input
placeholder={placeholder} name="name"
placeholder={profile.name}
className="basis-1/5 placeholder:text-black my-6 ml-5 border-2 " className="basis-1/5 placeholder:text-black my-6 ml-5 border-2 "
onChange={onNickChange} onChange={handleChange}
/> />
</div> </div>
</div> </div>
<div className="flex md:mb-20 justify-center gap-x-3"> <div className="flex md:mb-20 justify-center gap-x-3">
<button <button
onClick={handleClick} onClick={handleSubmit}
className=" mt-5 h-12 w-40 border-2 border-blue-400 text-lg place-self-center" className=" mt-5 h-12 w-40 border-2 border-blue-400 text-lg place-self-center"
> >
저장하기 저장하기
...@@ -154,7 +135,8 @@ export default function Profile() { ...@@ -154,7 +135,8 @@ export default function Profile() {
</button> </button>
<button <button
onClick={deleteClick} type="button"
onClick={onDelete}
className=" mt-5 h-12 w-40 text-lg border-2 border-red-400 place-self-center" className=" mt-5 h-12 w-40 text-lg border-2 border-red-400 place-self-center"
> >
계정 삭제 계정 삭제
......
...@@ -32,7 +32,8 @@ export interface SignupUser { ...@@ -32,7 +32,8 @@ export interface SignupUser {
export interface Profile { export interface Profile {
_id: string; _id: string;
email: string; email: string;
fileInfo: { name: string;
avatar: {
originalfilename: string; originalfilename: string;
newfilename: string; newfilename: string;
picturepath: string; picturepath: string;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment