Commit e99115b3 authored by Kim, MinGyu's avatar Kim, MinGyu
Browse files

프로필 변경 및 css 개선

parent 316b6e6d
...@@ -10,6 +10,7 @@ export default function Profile() { ...@@ -10,6 +10,7 @@ export default function Profile() {
const [file, setFile] = useState<File>(); const [file, setFile] = useState<File>();
const [imageSrc, setImageSrc] = useState(""); const [imageSrc, setImageSrc] = useState("");
const [nickname, setNickname] = useState(""); const [nickname, setNickname] = useState("");
const [placeholder, setPlaceholder] = useState("");
const { logout } = useAuth(); const { logout } = useAuth();
const handleProfile = async () => { const handleProfile = async () => {
...@@ -39,28 +40,43 @@ export default function Profile() { ...@@ -39,28 +40,43 @@ export default function Profile() {
}; };
const onNickChange = (e: React.ChangeEvent<HTMLInputElement>) => { const onNickChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const nickname = e.target.value; const newnickname = e.target.value;
setNickname(nickname); setNickname(newnickname);
}; };
const userChange = async () => { const userChange = async () => {
const profile = await handleProfile(); const profile = await handleProfile();
setEmail(profile.email); setEmail(profile.email);
setPicturename(profile.avatar.newfilename); setPicturename(profile.avatar.newfilename);
setPlaceholder(profile.avatar.nickname);
}; };
const handleClick = async ( const handleClick = async (
e: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent> e: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
) => { ) => {
const formdata = new FormData(); const formdata = new FormData();
if (!(file === undefined || file === null)) { if (!(file === undefined || nickname === "")) {
formdata.append("picture", file); formdata.append("picture", file);
}
formdata.append("nickname", nickname); formdata.append("nickname", nickname);
console.log("both");
await profileApi.picture(formdata);
} else if (!(file === undefined) && nickname === "") {
formdata.append("picture", file);
console.log("file");
await profileApi.picture(formdata); await profileApi.picture(formdata);
} else if (file === undefined && !(nickname === "")) {
formdata.append("nickname", nickname);
console.log("picture");
await profileApi.picture(formdata);
} else {
alert("수정할 정보를 입력해주세요.");
}
}; };
const deleteClick = async () => { const deleteClick = async () => {
await profileApi.deleteUser().then(() => logout()); await profileApi.deleteUser().then(() => {
logout();
console.log("test");
});
}; };
useEffect(() => { useEffect(() => {
...@@ -68,64 +84,69 @@ export default function Profile() { ...@@ -68,64 +84,69 @@ export default function Profile() {
}, []); }, []);
return ( return (
<div className="grid "> <div className="grid md:px-60">
<form className=""> <form className="justify-items-center">
<div className="ml-40 mt-10">프로필 </div> <div className="ml-20 mt-10">프로필 수정</div>
<div className="grid ml-40 mt-20 border-0 border-y-2 w-2/3"> <div className="grid mt-20 border-0 border-y-2 ">
<div className="flex"> <div className="flex">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center "> <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
Email Email
</div> </div>
<div className="basis-full my-5 p-5">{email}</div> <div className="basis-full my-5 p-5">{email}</div>
</div> </div>
<div className="flex border-0 border-t-2"> <div className="flex border-0 border-t-2">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center"> <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
사진 사진
</div> </div>
<div className="basis-full p-2"> <div className="basis-full p-2 ">
<div className="overflow-hidden w-40 h-40 rounded-full border-2 m-5">
{imageSrc ? ( {imageSrc ? (
<img <img
src={imageSrc} src={imageSrc}
width={200} className="object-cover object-center h-full"
height={200}
alt="preview-img"
/> />
) : ( ) : (
<img <img
src={"http://localhost:3000/images/" + picturename} src={"http://localhost:3000/images/" + picturename}
width={200} className="object-cover object-center h-full"
height={200}
/> />
)} )}
</div>
<input <input
type="file" type="file"
id="files" id="files"
className="hidden" className="hidden"
onChange={onUploadFile} onChange={onUploadFile}
></input> ></input>
<label htmlFor="files" className="border-2"> <label htmlFor="files" className="border-2 m-5">
이미지 선택 이미지 선택
</label> </label>
</div> </div>
</div> </div>
<div className="flex border-0 border-t-2"> <div className="flex border-0 border-t-2">
<div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center"> <div className="py-10 basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
별명 별명
</div> </div>
<div className="basis-full "> <div className="basis-full ">
<input <input
placeholder="빈칸" placeholder={placeholder}
className="basis-full placeholder:text-black my-10 ml-5" className="basis-full placeholder:text-black my-10 ml-5 border-2"
onChange={onNickChange} onChange={onNickChange}
/> />
</div> </div>
</div> </div>
</div> </div>
<div className="grid justify-items-center mb-20"> <div className="grid grid-cols-2 my-4 md:mb-20 justify-items-center">
<button onClick={handleClick} className=" border-2 "> <button
onClick={handleClick}
className="w-20 border-2 shrink-0 ml-10"
>
저장하기 저장하기
</button> </button>
<button onClick={deleteClick} className="border-2"> <button
onClick={deleteClick}
className="w-20 border-2 shrink-0 mr-10"
>
계정 삭제 계정 삭제
</button> </button>
</div> </div>
......
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