Profile.js 1.74 KB
Newer Older
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
1
2
3
4
5
6
7
8
9
import { Link, useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import userApi from "../../apis/user.api";


const userprofile = localStorage.getItem("user");
const INIT_PROFILE = {
  img:"",
};
이재연's avatar
이재연 committed
10

Kim, Chaerin's avatar
Kim, Chaerin committed
11
const Profile = () => {
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  
  const [profile, setProfile] = useState(INIT_PROFILE);

  async function getProfile(userID) {
    try {
      const data = await userApi.getUser(userID);
      setProfile(data.img)
      
    } catch (error) {}
  }
  useEffect(() => {
    getProfile(userprofile);
  }, [userprofile]);


  const { id } = useParams();
  
이재연's avatar
이재연 committed
29
  return (
이재연's avatar
이재연 committed
30
    <div className="container" style={{ background: "#FCF4FF" }}>
이재연's avatar
이재연 committed
31
32
33
34
      <>
        <div className="row">
          <form>
            <label
우지원's avatar
우지원 committed
35
              className="form-label mx-2 my-4"
이재연's avatar
이재연 committed
36
37
38
39
              style={{ fontSize: "18px", fontWeight: "bold" }}
            >
              프로필 정보
            </label>
이재연's avatar
이재연 committed
40
41
42
43
44
            <Link to={`/profile/${id}/update`}>
              <button
                type="button"
                className="btn btn-outline-white "
                style={{
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
45
                  background: "#d4cafb",
이재연's avatar
이재연 committed
46
47
48
49
50
51
52
                  fontSize: "13px",
                  fontWeight: "bold",
                }}
              >
                수정
              </button>
            </Link>
이재연's avatar
이재연 committed
53
54
55
          </form>
          <div className="col"></div>
          <div className="col">
56
57
            <div className="d-flex justify-content-center">
              <img
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
58
                src={`/uploads/${profile}`}
이재연's avatar
이재연 committed
59
                className="rounded-circle mt-2"
60
61
62
                style={{ height: "320px", width: "320px" }}
              />
            </div>
이재연's avatar
이재연 committed
63
64
          </div>
          <div className="col"></div>
Kim, Chaerin's avatar
Kim, Chaerin committed
65
        </div>
이재연's avatar
이재연 committed
66
67
68
      </>
    </div>
  );
Kim, Chaerin's avatar
Kim, Chaerin committed
69
70
71
};

export default Profile;