diff --git a/sgb_web/src/pages/MyPageEdit.jsx b/sgb_web/src/pages/MyPageEdit.jsx index 9d65f37..c97c46c 100644 --- a/sgb_web/src/pages/MyPageEdit.jsx +++ b/sgb_web/src/pages/MyPageEdit.jsx @@ -55,6 +55,7 @@ const MyPageEdit = () => { date={activity.date} name={activity.name} prize={activity.prize} + prizeImage={activity.prizeImage} role={activity.role} thoughts={activity.thoughts} type={activity.type} diff --git a/sgb_web/src/pages/MyPageEditMentor.jsx b/sgb_web/src/pages/MyPageEditMentor.jsx index 5cf030b..4c0ae4c 100644 --- a/sgb_web/src/pages/MyPageEditMentor.jsx +++ b/sgb_web/src/pages/MyPageEditMentor.jsx @@ -41,6 +41,7 @@ const MyPageEditMentor = () => { date={activity.date} name={activity.name} prize={activity.prize} + prizeImage={activity.prizeImage} role={activity.role} thoughts={activity.thoughts} type={activity.type} diff --git a/sgb_web/src/pages/components/BlueForm.jsx b/sgb_web/src/pages/components/BlueForm.jsx index a9aafb1..f80c875 100644 --- a/sgb_web/src/pages/components/BlueForm.jsx +++ b/sgb_web/src/pages/components/BlueForm.jsx @@ -27,7 +27,6 @@ function BlueForm() { const response = await axios.post( "http://3.37.215.18:3000/activity/book", { - writerId: 9, titleAuthor: blueNameRef.current.value, endDate: blueDateRef.current.value, semester: blueSemesterRef.current.value, @@ -48,7 +47,9 @@ function BlueForm() { } ); console.log(response); - window.alert("성공적으로 기록되었습니다. 기록한 내용은 '마이페이지'에서 확인 가능합니다."); //성공페이지로 라우팅 + window.alert( + "성공적으로 기록되었습니다. 기록한 내용은 '마이페이지'에서 확인 가능합니다." + ); //성공페이지로 라우팅 } catch (error) { console.log(error); window.alert("기록에 실패했습니다. 필수입력란을 전부 기입해주세요."); //실패페이지로 라우팅 diff --git a/sgb_web/src/pages/components/MyPageEdit.css b/sgb_web/src/pages/components/MyPageEdit.css index 3f38691..3516069 100644 --- a/sgb_web/src/pages/components/MyPageEdit.css +++ b/sgb_web/src/pages/components/MyPageEdit.css @@ -1,102 +1,104 @@ .edit-title { - margin-top: 10%; - font-weight: 500; + margin-top: 10%; + font-weight: 500; } .edit-divider { - border: 0; - border-top: 2px solid #c2c2c2; - margin: 15px 0; - margin-right: 20%; + border: 0; + border-top: 2px solid #c2c2c2; + margin: 15px 0; + margin-right: 20%; } .edit-body { - position: relative; - justify-content: center; - align-items: center; - height: 140vh; - background-color: #fcf5d6; - text-align: left; - padding-left: 10%; - border-radius: 10px; - margin-left: 10%; - margin-right: 10%; - margin-bottom: 10%; - padding-top: 3%; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + position: relative; + justify-content: center; + align-items: center; + /* height: 140vh; + => 이미지 수정 구간 위해 제거*/ + background-color: #fcf5d6; + text-align: left; + padding-left: 10%; + border-radius: 10px; + margin-left: 10%; + margin-right: 10%; + margin-bottom: 10%; + padding-top: 3%; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .edit-body2 { - position: relative; - justify-content: center; - align-items: center; - height: 190vh; - background-color: #fcf5d6; - text-align: left; - padding-left: 10%; - border-radius: 10px; - margin-left: 10%; - margin-right: 10%; - margin-bottom: 10%; - padding-top: 3%; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + position: relative; + justify-content: center; + align-items: center; + height: 190vh; + background-color: #fcf5d6; + text-align: left; + padding-left: 10%; + border-radius: 10px; + margin-left: 10%; + margin-right: 10%; + margin-bottom: 10%; + padding-top: 3%; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .edit-input { - border-radius: 10px; - border: 2px solid #fffff4; - margin-left: 1%; - font-size: 18px; + border-radius: 10px; + border: 2px solid #fffff4; + margin-left: 1%; + font-size: 18px; } .edit-label { - font-weight: 700; - font-size: 19px; + font-weight: 700; + font-size: 19px; } .edit-label-small { - font-weight: 500; - font-size: 15px; + font-weight: 500; + font-size: 15px; } - .edit-textarea { - border-radius : 10px; - border-color: #fffff4; - width: 70%; - height: 15%; - font-weight: 500; - font-size: 18px; + border-radius: 10px; + border-color: #fffff4; + width: 70%; + height: 15%; + font-weight: 500; + font-size: 18px; } .edit-button { - background-color: #f9ecb1; - border-radius: 50px; - border-color: #ffe77a; - display: block; - margin-left: 80%; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 수평 오프셋, 수직 오프셋, 흐림 정도, 색상 */ - padding: 5px 10px; - color: black; - border: none; - cursor: pointer; - border-radius: 5px; - font-weight: 550; + background-color: #f9ecb1; + border-radius: 50px; + border-color: #ffe77a; + display: block; + margin-left: 80%; + box-shadow: 2px 4px 7px 3px rgba(0, 0, 0, 0.1); + /* 수평 오프셋, 수직 오프셋, 흐림 정도, 퍼짐 정도, 색상 */ + /* x-position y-position blur spread color */ + padding: 5px 10px; + color: black; + border: none; + cursor: pointer; + border-radius: 5px; + font-weight: 550; } .edit-button:hover { - /* 마우스 호버 시 약간 더 강조된 그림자 효과 */ - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + /* 마우스 호버 시 약간 더 강조된 그림자 효과 */ + box-shadow: 2px 4px 7px 5px rgba(0, 0, 0, 0.164); } .edit-back { - position: relative; - margin-left: 12%; - margin-top: 1%; - float: left; - z-index: 999; - background-color: #fcf5d6; - font-weight: 900; - font-size: 30px; - color: rgb(26, 26, 26); - font-weight: 600; + position: relative; + margin-left: 12%; + margin-top: 1%; + float: left; + z-index: 999; + background-color: #fcf5d6; + font-weight: 900; + font-size: 30px; + color: rgb(26, 26, 26); + font-weight: 600; } diff --git a/sgb_web/src/pages/components/PinkForm.jsx b/sgb_web/src/pages/components/PinkForm.jsx index 83d0ec9..40e5f64 100644 --- a/sgb_web/src/pages/components/PinkForm.jsx +++ b/sgb_web/src/pages/components/PinkForm.jsx @@ -10,7 +10,6 @@ import { Link } from "react-router-dom"; import { getCookie, setCookie } from "../../lib/cookie"; function PinkForm() { - //useState const [name, setName] = useState(""); const [type, setType] = useState(""); const [file, setFile] = useState(""); @@ -20,8 +19,6 @@ function PinkForm() { const [role, setRole] = useState(""); const [thoughts, setThoughts] = useState(""); - // const formData = new FormData(); - const handlename = (event) => { event.preventDefault(); setName(event.target.value); @@ -58,20 +55,6 @@ function PinkForm() { setThoughts(event.target.value); }; - const onChangeImg = (e) => { - // e.preventDefault(); - // const formData = new FormData(); - // if (e.target.file) { - // const uploadFile = e.target.file[0]; - // formData.append("file", uploadFile); - // setFile(uploadFile); - // console.log("onChangeImg: ", formData); - // console.log(uploadFile); - // console.log("===useState==="); - // console.log(file); - // } - }; - const onClickSubmit = async (event) => { const formData = new FormData(); console.log("clicked"); @@ -83,9 +66,7 @@ function PinkForm() { formData.append("file", file); formData.append("role", role); formData.append("thoughts", thoughts); - formData.append("writerId", 9); formData.append("type", type); - console.log("onClickSubmit: ", formData); await axios({ method: "post", @@ -100,25 +81,18 @@ function PinkForm() { .then((result) => { console.log("요청성공"); console.log(result); - window.alert("성공적으로 기록되었습니다. 기록한 내용은 '마이페이지'에서 확인 가능합니다."); //성공페이지로 라우팅 + window.alert( + "성공적으로 기록되었습니다. 기록한 내용은 '마이페이지'에서 확인 가능합니다." + ); //성공페이지로 라우팅 }) .catch((error) => { console.log("요청실패"); console.log(error); window.alert("기록에 실패했습니다. 필수입력란을 전부 기입해주세요."); //실패페이지로 라우팅 }); - // let config = { - // headers: { - // "Content-Type": "multipart/form-data", - // }, - // }; for (let key of formData.keys()) { console.log(key, ":", formData.get(key)); } - // await axios - // .post("http://3.37.215.18:3000/activity/prize", formData, config) - // .then((res) => console.log(res)) - // .catch((err) => console.log(err)); }; return ( diff --git a/sgb_web/src/pages/components/PinkMypageEdit.jsx b/sgb_web/src/pages/components/PinkMypageEdit.jsx index f6f2a5b..2c2ee66 100644 --- a/sgb_web/src/pages/components/PinkMypageEdit.jsx +++ b/sgb_web/src/pages/components/PinkMypageEdit.jsx @@ -1,8 +1,9 @@ -import React, { useEffect, useState } from "react"; +import React, { useRef, useEffect, useState } from "react"; import axios from "axios"; import { Link, useNavigate } from "react-router-dom"; import { getCookie, setCookie } from "../../lib/cookie"; -import './MyPageEdit.css'; +import PrizeImage from "./PrizeImage"; +import "./MyPageEdit.css"; function PinkMypageEdit({ activityId, @@ -10,6 +11,7 @@ function PinkMypageEdit({ date, name, prize, + prizeImage, role, thoughts, type, @@ -20,6 +22,7 @@ function PinkMypageEdit({ const [prizeDate, setPrizeDate] = useState(date); const [prizeName, setPrizeName] = useState(name); const [prizeRank, setPrizeRank] = useState(prize); + const [prizeImg, setPrizeImg] = useState(prizeImage); // 이미지 url const [prizeRole, setPrizeRole] = useState(role); const [prizeThoughts, setPrizeThoughts] = useState(thoughts); const [contestType, setContestType] = useState(type); @@ -36,6 +39,9 @@ function PinkMypageEdit({ const handlePrizeRank = (e) => { setPrizeRank(e.target.value); }; + const parentFunction = (file) => { + setPrizeImg(file); + }; const handlePrizeRole = (e) => { setPrizeRole(e.target.value); }; @@ -46,28 +52,30 @@ function PinkMypageEdit({ setContestType(e.target.value); }; const handleSubmit = () => { + const formData = new FormData(); + formData.append("name", prizeName); + formData.append("prize", prizeRank); + formData.append("date", prizeDate); + formData.append("semester", smester); + formData.append("file", prizeImg); + formData.append("role", prizeRole); + formData.append("thoughts", prizeThoughts); + formData.append("type", contestType); + + console.log("formData: ", formData); + // alert에서 확인을 누를 경우에 POST if (confirm("변경된 수정사항을 저장하시겠습니까?") == true) { - axios - .post( - `http://3.37.215.18:3000/mypage/prize/${actId}`, - { - name: prizeName, - prize: prizeRank, - date: prizeDate, - semester: smester, - role: prizeRole, - thoughts: prizeThoughts, - type: contestType, - }, - { - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${getCookie("accessToken")}`, - withCredentials: true, - }, - } - ) + axios({ + method: "post", + headers: { + "Content-Type": "multipart/form-data", + Authorization: `Bearer ${getCookie("accessToken")}`, + withCredentials: true, + }, + url: `http://3.37.215.18:3000/mypage/prize/${actId}`, + data: formData, + }) .then((response) => { alert("저장되었습니다."); console.log("edit response: ", response); @@ -88,88 +96,107 @@ function PinkMypageEdit({ return ( <>
-
수상경력 수정하기 ✏️ -

- 수상명 {" "} - {" "} - *필수 - 교과우수상(수상과목), 표창장(부문), 대회(참가부문) -
- 수상 등급 {" "} - {" "} -
- 수상 유형 {" "} - {" "} - *필수 -
- 수상 날짜 {" "} - {" "} - *필수 -
- 수상 학기 {" "} - {" "} - *필수 -

- 수상 대회에서 특히 노력하거나 활약한 부분 {" "}
-