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

이재연's avatar
이재연 committed
6
const userprofile = sessionStorage.getItem("user");
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
7
8
9
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
  
  const [profile, setProfile] = useState(INIT_PROFILE);
Kim, Chaerin's avatar
Kim, Chaerin committed
14
  const [error,setError]= useState("");
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
15
16
17
  async function getProfile(userID) {
    try {
      const data = await userApi.getUser(userID);
Kim, Chaerin's avatar
Kim, Chaerin committed
18
      console.log(data)
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
19
20
      setProfile(data.img)
      
Kim, Chaerin's avatar
Kim, Chaerin committed
21
22
23
    } catch (error) {
      catchErrors(error, setError);
    }
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
24
  }
Kim, Chaerin's avatar
Kim, Chaerin committed
25
  console.log(profile)
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
26
27
28
29
30
31
32
  useEffect(() => {
    getProfile(userprofile);
  }, [userprofile]);


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

export default Profile;