profile.tsx

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<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 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);

    console.log(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.avatar?.newfilename);
      setProfile({ ...profile, name: user.name });
    };
    getProfile();
  }, []);

  return (
    <div className="grid bg-white rounded shadow-lg mb-5">
      <form className="mx-24 " onSubmit={handleSubmit}>
        <div className=" mt-7 text-2xl">프로필 수정</div>
        <div className=" mt-10 border-0 border-y-2 border-gray-400">
          <div className="flex h-20">
            <div className="w-24  border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
              Email
            </div>
            <div className=" grid place-items-center px-4 whitespace-nowrap">
              {email}
            </div>
          </div>
          <div className="flex border-0 border-t-2">
            <div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
              사진
            </div>
            <div className="flex  py-4 ">
              <div className="">
                <div className="overflow-hidden w-28 h-28 rounded-full border-2 mx-3 mb-3">
                  {imageSrc ? (
                    <img
                      src={imageSrc}
                      className="object-cover object-center h-full"
                    />
                  ) : (
                    avatarUrl && (
                      <img
                        src={"http://localhost:3000/images/" + avatarUrl}
                        className="object-cover object-center h-full"
                      />
                    )
                  )}
                </div>
                <input
                  type="file"
                  name="avatar"
                  id="avatar"
                  className="hidden"
                  onChange={handleChange}
                ></input>
                <label
                  htmlFor="avatar"
                  className="border-2 m-5 whitespace-nowrap "
                >
                  이미지 선택
                </label>
              </div>
              <div className="pl-10 flex place-self-center text-gray-400 text-sm whitespace-nowrap">
                {"<새로운 이미지를 넣어보세요!>"}
              </div>
            </div>
          </div>
          <div className="flex border-0 border-t-2 h-20">
            <div className="w-24 border-0 border-r-2 bg-gray-100 grid place-items-center whitespace-nowrap">
              이름
            </div>
            <input
              name="name"
              placeholder={profile.name}
              className=" placeholder:text-black my-6 ml-5 border-2 "
              onChange={handleChange}
            />
          </div>
        </div>
        <div className="flex mb-5 justify-center gap-x-3">
          <button
            onClick={handleSubmit}
            className=" mt-5 h-12 w-1/5 border-2 border-blue-400 text-lg  place-self-center whitespace-nowrap"
          >
            저장하기
          </button>

          <button className=" mt-5 h-12 w-1/5  text-lg border-2 border-orange-400 place-self-center whitespace-nowrap">
            <Link to="/">취소</Link>
          </button>

          <button
            type="button"
            onClick={onDelete}
            className=" mt-5 h-12 w-1/5  text-lg border-2 border-red-400 place-self-center whitespace-nowrap"
          >
            계정 삭제
          </button>
        </div>
      </form>
    </div>
  );
}