profile.tsx 4.86 KB
Newer Older
Yoon, Daeki's avatar
Yoon, Daeki committed
1
import React, { ChangeEvent, FormEvent, useEffect, useState } from "react";
2
3
import { Profile } from "../types";
import { profileApi } from "../apis";
Kim, MinGyu's avatar
Kim, MinGyu committed
4
import { useAuth } from "../auth/auth.context";
Kim, MinGyu's avatar
Kim, MinGyu committed
5
import { Link } from "react-router-dom";
Kim, MinGyu's avatar
Kim, MinGyu committed
6
7
8

export default function Profile() {
  // 로컬 저장소에는 로그인 여부만 저장
9
  const [email, setEmail] = useState("");
Yoon, Daeki's avatar
Yoon, Daeki committed
10
11
12
13
14
  const [profile, setProfile] = useState<{
    name: string;
    avatar: File | null;
  }>({ name: "", avatar: null });
  const [avatarUrl, setAvatarUrl] = useState("");
15
  const [imageSrc, setImageSrc] = useState("");
Kim, MinGyu's avatar
Kim, MinGyu committed
16
  const { logout } = useAuth();
Kim, MinGyu's avatar
Kim, MinGyu committed
17

Yoon, Daeki's avatar
Yoon, Daeki committed
18
19
20
21
22
23
24
25
26
  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 });
    }
27
28
  };

Yoon, Daeki's avatar
Yoon, Daeki committed
29
  const showImage = (blob: Blob) => {
30
    const reader = new FileReader();
Yoon, Daeki's avatar
Yoon, Daeki committed
31
    reader.readAsDataURL(blob);
32
33
    reader.onload = (data) => {
      if (typeof data.target?.result === "string") {
Yoon, Daeki's avatar
Yoon, Daeki committed
34
        // console.log(data.target?.result);
35
36
37
38
39
        setImageSrc(data.target?.result);
      }
    };
  };

Yoon, Daeki's avatar
Yoon, Daeki committed
40
  const handleSubmit = async (e: FormEvent) => {
Kim, MinGyu's avatar
Kim, MinGyu committed
41
    e.preventDefault();
Yoon, Daeki's avatar
Yoon, Daeki committed
42
    console.log("profile in submit", profile);
43
    const formdata = new FormData();
Yoon, Daeki's avatar
Yoon, Daeki committed
44
45
46
47
    profile.avatar && formdata.append("avatar", profile.avatar);
    formdata.append("name", profile.name);
    console.log("form data", formdata.get("avatar"));
    profileApi.profileUpload(formdata);
Kim, MinGyu's avatar
Kim, MinGyu committed
48
49
  };

Yoon, Daeki's avatar
Yoon, Daeki committed
50
  const onDelete = async () => {
Kim, MinGyu's avatar
Kim, MinGyu committed
51
    if (confirm("삭제하시겠습니까?") == true) {
Yoon, Daeki's avatar
Yoon, Daeki committed
52
53
      await profileApi.deleteUser();
      await logout();
Kim, MinGyu's avatar
Kim, MinGyu committed
54
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
55
56
  };

Kim, MinGyu's avatar
Kim, MinGyu committed
57
  useEffect(() => {
Yoon, Daeki's avatar
Yoon, Daeki committed
58
59
60
61
62
63
64
65
    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();
Kim, MinGyu's avatar
Kim, MinGyu committed
66
67
68
  }, []);

  return (
Kim, MinGyu's avatar
Kim, MinGyu committed
69
    <div className="grid ">
Yoon, Daeki's avatar
Yoon, Daeki committed
70
      <form className="" onSubmit={handleSubmit}>
Kim, MinGyu's avatar
Kim, MinGyu committed
71
        <div className=" mt-10 text-2xl">프로필 수정</div>
Kim, MinGyu's avatar
Kim, MinGyu committed
72
73
74
        <div className="grid mt-10 border-0 border-y-2 border-gray-400 ">
          <div className="flex h-20">
            <div className=" basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
75
76
              Email
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
77
78
79
            <div className=" basis-full grid place-items-center justify-items-stretch px-4">
              {email}
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
80
          </div>
81
          <div className="flex border-0 border-t-2">
Kim, MinGyu's avatar
Kim, MinGyu committed
82
            <div className="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
83
84
              사진
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
85
            <div className="basis-full py-4 ">
Kim, MinGyu's avatar
Kim, MinGyu committed
86
              <div className="overflow-hidden w-28 h-28 rounded-full border-2 mx-3 mb-3">
Kim, MinGyu's avatar
Kim, MinGyu committed
87
88
89
90
91
92
                {imageSrc ? (
                  <img
                    src={imageSrc}
                    className="object-cover object-center h-full"
                  />
                ) : (
Yoon, Daeki's avatar
Yoon, Daeki committed
93
94
95
96
97
98
                  avatarUrl && (
                    <img
                      src={"http://localhost:3000/images/" + avatarUrl}
                      className="object-cover object-center h-full"
                    />
                  )
Kim, MinGyu's avatar
Kim, MinGyu committed
99
100
                )}
              </div>
101
102
              <input
                type="file"
Yoon, Daeki's avatar
Yoon, Daeki committed
103
104
                name="avatar"
                id="avatar"
105
                className="hidden"
Yoon, Daeki's avatar
Yoon, Daeki committed
106
                onChange={handleChange}
107
              ></input>
Yoon, Daeki's avatar
Yoon, Daeki committed
108
              <label htmlFor="avatar" className="border-2 m-5">
109
110
111
                이미지 선택
              </label>
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
112
          </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
113
114
          <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">
Yoon, Daeki's avatar
Yoon, Daeki committed
115
              이름
116
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
117
            <input
Yoon, Daeki's avatar
Yoon, Daeki committed
118
119
              name="name"
              placeholder={profile.name}
Kim, MinGyu's avatar
Kim, MinGyu committed
120
              className="basis-1/5 placeholder:text-black my-6 ml-5 border-2 "
Yoon, Daeki's avatar
Yoon, Daeki committed
121
              onChange={handleChange}
Kim, MinGyu's avatar
Kim, MinGyu committed
122
            />
Kim, MinGyu's avatar
Kim, MinGyu committed
123
124
          </div>
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
125
        <div className="flex  md:mb-20 justify-center gap-x-3">
Kim, MinGyu's avatar
Kim, MinGyu committed
126
          <button
Yoon, Daeki's avatar
Yoon, Daeki committed
127
            onClick={handleSubmit}
Kim, MinGyu's avatar
Kim, MinGyu committed
128
            className=" mt-5 h-12 w-40 border-2 border-blue-400 text-lg  place-self-center"
Kim, MinGyu's avatar
Kim, MinGyu committed
129
          >
130
131
            저장하기
          </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
132
133
134
135
136

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

Kim, MinGyu's avatar
Kim, MinGyu committed
137
          <button
Yoon, Daeki's avatar
Yoon, Daeki committed
138
139
            type="button"
            onClick={onDelete}
Kim, MinGyu's avatar
Kim, MinGyu committed
140
            className=" mt-5 h-12 w-40  text-lg border-2 border-red-400 place-self-center"
Kim, MinGyu's avatar
Kim, MinGyu committed
141
          >
Kim, MinGyu's avatar
Kim, MinGyu committed
142
143
            계정 삭제
          </button>
144
145
        </div>
      </form>
Kim, MinGyu's avatar
Kim, MinGyu committed
146
147
148
    </div>
  );
}