[Update]Mypage 프로필 변경 기능 수정

Dev-Tinos · Jul 28, 2024 · 7392836 · 7392836
1 parent 9621faa
commit 7392836
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 28 deletions.
diff --git a/src/components/atoms/ProfileImg.js b/src/components/atoms/ProfileImg.js
@@ -25,11 +25,11 @@ const isValidHttpUrl = (string) => {
 };
 
 const ProfileImg = ({ img }) => {
-    const validSrc = isValidHttpUrl(img) ? img : defaultImg;
+    const imageSrc = isValidHttpUrl(img) ? img : defaultImg;
 
     return (
         <ProfileImgStyle>
-            <img className="roundimg" src={validSrc} alt="티노" />
+            <img className="roundimg" src={imageSrc} alt="티노" />
         </ProfileImgStyle>
     );
 };

diff --git a/src/components/molecules/EditInfoForm.jsx b/src/components/molecules/EditInfoForm.jsx
@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import MajorSelect from "../atoms/MajorSelect";
 import { putUser } from "../../services/UserApi";
+// import { postImage } from "../../services/ImageApi";
+import axios from "axios";
 
 const FormStyle = styled.div`
     box-sizing: border-box;
@@ -28,6 +30,8 @@ const FormStyle = styled.div`
         padding: 10px 16px;
         font-size: 18px;
         font-family: "SUIT-Regular", sans-serif;
+        &.file {
+        }
     }
     .buttonbox {
         display: flex;
@@ -45,6 +49,33 @@ const FormStyle = styled.div`
             font-family: "SUIT-Regular", sans-serif;
         }
     }
+    .fileInput {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        label {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 5px;
+            color: #ffffff;
+            width: 110px;
+            height: 70px;
+            background-color: #5383e3;
+        }
+        input {
+            width: 580px;
+            margin: 0;
+        }
+        input[type="file"] {
+            position: absolute;
+            width: 0;
+            height: 0;
+            padding: 0;
+            overflow: hidden;
+            border: 0;
+        }
+    }
     select {
         width: 100%;
         border: 1px solid #ddddff;
@@ -77,9 +108,43 @@ const MAJOR = [
 
 const EditInfoForm = ({ onClicked }) => {
     const [nickname, setNickname] = useState("");
-    const [img, setImg] = useState("");
+    const [file, setFile] = useState(null);
     const [major, setMajor] = useState("소프트웨어학과");
 
+    const EditInfo = async () => {
+        const formData = new FormData();
+        formData.append("file", file);
+        console.log(file);
+        console.log(formData);
+        // const imgUrl = await postImage(file);
+        const imgUrl = await axios
+            .post(`http://tino-back.tasty-site.com:8080/Image`, formData, {
+                headers: {
+                    "Content-Type": "multipart/form-data",
+                },
+            })
+            .then((response) => {
+                return response.data.imageUrl;
+            })
+            .catch((error) => {
+                return error;
+            });
+        console.log(imgUrl);
+
+        const data = await putUser({
+            userId: localStorage.getItem("userId"),
+            nickname: nickname,
+            profileImageURL: imgUrl,
+            major: major,
+        });
+        if (data.status === 200) {
+            alert("회원 정보가 변경되었습니다.");
+            window.location.reload();
+        } else {
+            alert("오류가 발생하였습니다.");
+        }
+    };
+
     return (
         <FormStyle>
             <input
@@ -89,33 +154,23 @@ const EditInfoForm = ({ onClicked }) => {
                 }}
                 placeholder={"닉네임"}
             />
-            <input
-                value={img}
-                onChange={(e) => {
-                    setImg(e.target.value);
-                }}
-                placeholder={"이미지 URL"}
-            />
+            <div className="fileInput">
+                <input
+                    value={file === null ? null : file.name}
+                    placeholder={"이미지 파일"}
+                />
+                <label for="file">파일찾기</label>
+                <input
+                    id="file"
+                    type="file"
+                    onChange={(e) => {
+                        setFile(e.target.files[0]);
+                    }}
+                />
+            </div>
             <MajorSelect item={MAJOR} setMajor={setMajor} />
             <div className="buttonbox">
-                <button
-                    onClick={async () => {
-                        const data = await putUser({
-                            userId: localStorage.getItem("userId"),
-                            nickname: nickname,
-                            profileImageURL: img,
-                            major: major,
-                        });
-                        if (data.status === 200) {
-                            alert("회원 정보가 변경되었습니다.");
-                            window.location.reload();
-                        } else {
-                            alert("오류가 발생하였습니다.");
-                        }
-                    }}
-                >
-                    수정
-                </button>
+                <button onClick={EditInfo}>수정</button>
                 <button onClick={onClicked}>취소</button>
             </div>
         </FormStyle>

diff --git a/src/services/ImageApi.js b/src/services/ImageApi.js
@@ -0,0 +1,21 @@
+import axios from "axios";
+
+const API_URL = process.env.REACT_APP_API_URL;
+
+// helpful 추가 api
+export const postImage = async (params) => {
+    console.log(params);
+    const data = await axios
+        .post(`${API_URL}/Image`, params, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        })
+        .then((response) => {
+            return response.data.imageUrl;
+        })
+        .catch((error) => {
+            return error;
+        });
+    return data;
+};