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

profile 로직 수정 변경

parent da88857d
......@@ -7,7 +7,8 @@ export const profile = async () => {
};
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 () => {
......
import React, { useEffect, useState } from "react";
import React, { ChangeEvent, FormEvent, useEffect, useState } from "react";
import { Profile } from "../types";
import { profileApi } from "../apis";
import { useAuth } from "../auth/auth.context";
......@@ -7,89 +7,67 @@ import { Link } from "react-router-dom";
export default function Profile() {
// 로컬 저장소에는 로그인 여부만 저장
const [email, setEmail] = useState("");
const [picturename, setPicturename] = useState("");
const [file, setFile] = useState<File>();
const [profile, setProfile] = useState<{
name: string;
avatar: File | null;
}>({ name: "", avatar: null });
const [avatarUrl, setAvatarUrl] = useState("");
const [imageSrc, setImageSrc] = useState("");
const [nickname, setNickname] = useState("");
const [placeholder, setPlaceholder] = useState("");
const { logout } = useAuth();
const handleProfile = async () => {
const user: Profile = await profileApi.profile();
return user;
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
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 PictureSrc = (fileBlob: Blob) => {
const showImage = (blob: Blob) => {
const reader = new FileReader();
reader.readAsDataURL(fileBlob);
reader.readAsDataURL(blob);
reader.onload = (data) => {
if (typeof data.target?.result === "string") {
console.log(data.target?.result);
// console.log(data.target?.result);
setImageSrc(data.target?.result);
}
};
};
const onUploadFile = (e: React.ChangeEvent<HTMLInputElement>) => {
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>
) => {
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
console.log("profile in submit", profile);
const formdata = new FormData();
if (!(file === undefined || nickname === "")) {
formdata.append("picture", file);
formdata.append("nickname", nickname);
console.log("both");
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("수정할 정보를 입력해주세요.");
}
profile.avatar && formdata.append("avatar", profile.avatar);
formdata.append("name", profile.name);
console.log("form data", formdata.get("avatar"));
profileApi.profileUpload(formdata);
};
const deleteClick = async () => {
const onDelete = async () => {
if (confirm("삭제하시겠습니까?") == true) {
const success = await profileApi.deleteUser();
if (success) {
await profileApi.deleteUser();
await logout();
}
} else {
}
};
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 (
<div className="grid ">
<form className="">
<form className="" onSubmit={handleSubmit}>
<div className=" mt-10 text-2xl">프로필 수정</div>
<div className="grid mt-10 border-0 border-y-2 border-gray-400 ">
<div className="flex h-20">
......@@ -112,38 +90,41 @@ export default function Profile() {
className="object-cover object-center h-full"
/>
) : (
avatarUrl && (
<img
src={"http://localhost:3000/images/" + picturename}
src={"http://localhost:3000/images/" + avatarUrl}
className="object-cover object-center h-full"
/>
)
)}
</div>
<input
type="file"
id="files"
name="avatar"
id="avatar"
className="hidden"
onChange={onUploadFile}
onChange={handleChange}
></input>
<label htmlFor="files" className="border-2 m-5">
<label htmlFor="avatar" className="border-2 m-5">
이미지 선택
</label>
</div>
</div>
<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>
<input
placeholder={placeholder}
name="name"
placeholder={profile.name}
className="basis-1/5 placeholder:text-black my-6 ml-5 border-2 "
onChange={onNickChange}
onChange={handleChange}
/>
</div>
</div>
<div className="flex md:mb-20 justify-center gap-x-3">
<button
onClick={handleClick}
onClick={handleSubmit}
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() {
</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"
>
계정 삭제
......
......@@ -32,7 +32,8 @@ export interface SignupUser {
export interface Profile {
_id: string;
email: string;
fileInfo: {
name: string;
avatar: {
originalfilename: string;
newfilename: 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