profile.tsx 5.26 KB
Newer Older
Kim, MinGyu's avatar
Kim, MinGyu committed
1
import React, { 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
10
11
12
13
  const [email, setEmail] = useState("");
  const [picturename, setPicturename] = useState("");
  const [file, setFile] = useState<File>();
  const [imageSrc, setImageSrc] = useState("");
  const [nickname, setNickname] = useState("");
Kim, MinGyu's avatar
Kim, MinGyu committed
14
  const [placeholder, setPlaceholder] = useState("");
Kim, MinGyu's avatar
Kim, MinGyu committed
15
  const { logout } = useAuth();
Kim, MinGyu's avatar
Kim, MinGyu committed
16

17
18
19
20
21
22
23
24
25
  const handleProfile = async () => {
    const user: Profile = await profileApi.profile();
    return user;
  };

  const PictureSrc = (fileBlob: Blob) => {
    const reader = new FileReader();

    reader.readAsDataURL(fileBlob);
Kim, MinGyu's avatar
Kim, MinGyu committed
26

27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    reader.onload = (data) => {
      if (typeof data.target?.result === "string") {
        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);
    }
  };

Kim, MinGyu's avatar
Kim, MinGyu committed
43
  const onNickChange = (e: React.ChangeEvent<HTMLInputElement>) => {
Kim, MinGyu's avatar
Kim, MinGyu committed
44
45
    const newnickname = e.target.value;
    setNickname(newnickname);
Kim, MinGyu's avatar
Kim, MinGyu committed
46
47
  };

48
49
50
  const userChange = async () => {
    const profile = await handleProfile();
    setEmail(profile.email);
Kim, MinGyu's avatar
Kim, MinGyu committed
51
52
    setPicturename(profile.fileInfo.newfilename);
    setPlaceholder(profile.fileInfo.nickname);
53
54
55
56
  };
  const handleClick = async (
    e: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>
  ) => {
Kim, MinGyu's avatar
Kim, MinGyu committed
57
    e.preventDefault();
58
    const formdata = new FormData();
Kim, MinGyu's avatar
Kim, MinGyu committed
59
    if (!(file === undefined || nickname === "")) {
60
      formdata.append("picture", file);
Kim, MinGyu's avatar
Kim, MinGyu committed
61
62
      formdata.append("nickname", nickname);
      console.log("both");
Kim, MinGyu's avatar
Kim, MinGyu committed
63
      console.log(formdata);
Kim, MinGyu's avatar
Kim, MinGyu committed
64
      await profileApi.profileUpload(formdata);
Kim, MinGyu's avatar
Kim, MinGyu committed
65
    } else if (!(file === undefined) && nickname === "") {
Kim, MinGyu's avatar
Kim, MinGyu committed
66
67
      formdata.append("picture", file);
      await profileApi.profileUpload(formdata);
Kim, MinGyu's avatar
Kim, MinGyu committed
68
69
70
    } else if (file === undefined && !(nickname === "")) {
      formdata.append("nickname", nickname);
      await profileApi.profileUpload(formdata);
Kim, MinGyu's avatar
Kim, MinGyu committed
71
72
    } else {
      alert("수정할 정보를 입력해주세요.");
73
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
74
75
  };

Kim, MinGyu's avatar
Kim, MinGyu committed
76
  const deleteClick = async () => {
Kim, MinGyu's avatar
Kim, MinGyu committed
77
78
79
80
81
82
83
    if (confirm("삭제하시겠습니까?") == true) {
      const success = await profileApi.deleteUser();
      if (success) {
        await logout();
      }
    } else {
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
84
85
  };

Kim, MinGyu's avatar
Kim, MinGyu committed
86
  useEffect(() => {
87
    userChange();
Kim, MinGyu's avatar
Kim, MinGyu committed
88
89
90
  }, []);

  return (
Kim, MinGyu's avatar
Kim, MinGyu committed
91
    <div className="grid ">
Kim, MinGyu's avatar
Kim, MinGyu committed
92
93
      <form className="">
        <div className=" mt-10 text-2xl">프로필 수정</div>
Kim, MinGyu's avatar
Kim, MinGyu committed
94
95
96
        <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">
97
98
              Email
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
99
100
101
            <div className=" basis-full grid place-items-center justify-items-stretch px-4">
              {email}
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
102
          </div>
103
          <div className="flex border-0 border-t-2">
Kim, MinGyu's avatar
Kim, MinGyu committed
104
            <div className="basis-1/5 border-0 border-r-2 bg-gray-100 grid place-items-center shrink-0">
105
106
              사진
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
107
            <div className="basis-full py-4 ">
Kim, MinGyu's avatar
Kim, MinGyu committed
108
              <div className="overflow-hidden w-28 h-28 rounded-full border-2 mx-3 mb-3">
Kim, MinGyu's avatar
Kim, MinGyu committed
109
110
111
112
113
114
115
116
117
118
119
120
                {imageSrc ? (
                  <img
                    src={imageSrc}
                    className="object-cover object-center h-full"
                  />
                ) : (
                  <img
                    src={"http://localhost:3000/images/" + picturename}
                    className="object-cover object-center h-full"
                  />
                )}
              </div>
121
122
123
124
125
126
              <input
                type="file"
                id="files"
                className="hidden"
                onChange={onUploadFile}
              ></input>
Kim, MinGyu's avatar
Kim, MinGyu committed
127
              <label htmlFor="files" className="border-2 m-5">
128
129
130
                이미지 선택
              </label>
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
131
          </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
132
133
          <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">
134
135
              별명
            </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
136
137
138
139
140
141

            <input
              placeholder={placeholder}
              className="basis-1/5 placeholder:text-black my-6 ml-5 border-2 "
              onChange={onNickChange}
            />
Kim, MinGyu's avatar
Kim, MinGyu committed
142
143
          </div>
        </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
144
        <div className="flex  md:mb-20 justify-center gap-x-3">
Kim, MinGyu's avatar
Kim, MinGyu committed
145
146
          <button
            onClick={handleClick}
Kim, MinGyu's avatar
Kim, MinGyu committed
147
            className=" mt-5 h-12 w-40 border-2 border-blue-400 text-lg  place-self-center"
Kim, MinGyu's avatar
Kim, MinGyu committed
148
          >
149
150
            저장하기
          </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
151
152
153
154
155

          <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
156
157
          <button
            onClick={deleteClick}
Kim, MinGyu's avatar
Kim, MinGyu committed
158
            className=" mt-5 h-12 w-40  text-lg border-2 border-red-400 place-self-center"
Kim, MinGyu's avatar
Kim, MinGyu committed
159
          >
Kim, MinGyu's avatar
Kim, MinGyu committed
160
161
            계정 삭제
          </button>
162
163
        </div>
      </form>
Kim, MinGyu's avatar
Kim, MinGyu committed
164
165
166
    </div>
  );
}