From ba3c133c11b704ef0f4f300d08e2495186b8759a Mon Sep 17 00:00:00 2001 From: haesol822 Date: Wed, 13 Nov 2024 15:24:29 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20api=20=EC=9A=94=EC=B2=AD=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 6 ++--- src/pages/applyCogo/applyCogoComplete.tsx | 19 +++++++-------- src/pages/applyCogo/applyCogoMemo.tsx | 5 ++-- src/pages/applyCogo/applyCogoTime.tsx | 27 ++++++---------------- src/pages/mentorDetails/mentorDetails.tsx | 2 +- src/pages/mypage/mypage.tsx | 23 ++++++++---------- src/pages/mypage/myprofile/myprofile.tsx | 3 ++- src/pages/mypage/timeselect/timeselect.tsx | 18 ++------------- 8 files changed, 37 insertions(+), 66 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b6840e4..2b5c35d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -62,9 +62,9 @@ function AppContent() { } /> } /> } /> - } /> - } /> - } /> + } /> + } /> + } /> } /> } /> } /> diff --git a/src/pages/applyCogo/applyCogoComplete.tsx b/src/pages/applyCogo/applyCogoComplete.tsx index 3b7f4b5..95ad40b 100644 --- a/src/pages/applyCogo/applyCogoComplete.tsx +++ b/src/pages/applyCogo/applyCogoComplete.tsx @@ -14,21 +14,20 @@ import { } from "../../components/global.styles"; import BackButton from "../../components/button/backButton"; import moment from "moment"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import Coffee from "../../assets/Coffee.svg"; import axiosInstance from "../../apis/axiosInstance"; // axiosInstance 추가 export default function ApplyCogoComplete() { const navigate = useNavigate(); + const { mentorid } = useParams(); const [isLoading, setIsLoading] = useState(false); // 로딩 상태 추가 const handleNextButton = async () => { // 로딩 상태 시작 setIsLoading(true); - - try { // localStorage에서 데이터 불러오기 - const mentorIdStr = localStorage.getItem("mentorId"); + const mentorIdStr = mentorid const possibleDateIdStr = localStorage.getItem("possible_date_id"); const memoText = localStorage.getItem("memoText"); @@ -50,6 +49,8 @@ export default function ApplyCogoComplete() { return; } + try { + // API 요청을 위한 페이로드 준비 const payload = { mentorId: mentorId, @@ -57,14 +58,14 @@ export default function ApplyCogoComplete() { memo: memoText, }; - console.log(payload) + console.log(payload); // API 요청 보내기 (예시 엔드포인트 사용) const response = await axiosInstance.post("/applications", payload); // 요청 성공 시 처리 console.log("API 응답:", response.data); alert("COGO 신청이 완료되었습니다!"); - + // 필요 시 localStorage 데이터 정리 localStorage.removeItem("mentorId"); localStorage.removeItem("possible_date_id"); @@ -90,9 +91,9 @@ export default function ApplyCogoComplete() { 멘토님과의 매칭이 곧 이루어질 예정이에요! COGO를 하면서 많은 성장을 기원해요! - - + {isLoading ? "처리 중..." : "코고 신청 완료하기"} diff --git a/src/pages/applyCogo/applyCogoMemo.tsx b/src/pages/applyCogo/applyCogoMemo.tsx index 269a60c..de7aa26 100644 --- a/src/pages/applyCogo/applyCogoMemo.tsx +++ b/src/pages/applyCogo/applyCogoMemo.tsx @@ -8,11 +8,12 @@ import { Title, } from "../../components/global.styles"; import BackButton from "../../components/button/backButton"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; export default function ApplyCogoMemo() { const [memoText, setMemoText] = useState(""); // 메모 텍스트 상태 const navigate = useNavigate(); + const { mentorid } = useParams(); // 글자 수를 변경하는 함수 const handleMemoChange = (event: React.ChangeEvent) => { @@ -24,7 +25,7 @@ export default function ApplyCogoMemo() { console.log(memoText); localStorage.setItem("memoText", memoText); - navigate("/applyCogoComplete"); + navigate(`/applyCogoComplete/${mentorid}`); }; return ( diff --git a/src/pages/applyCogo/applyCogoTime.tsx b/src/pages/applyCogo/applyCogoTime.tsx index 813747c..2854a25 100644 --- a/src/pages/applyCogo/applyCogoTime.tsx +++ b/src/pages/applyCogo/applyCogoTime.tsx @@ -8,7 +8,7 @@ import { } from "../../components/global.styles"; import BackButton from "../../components/button/backButton"; import moment from "moment"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import axiosInstance from "../../apis/axiosInstance"; type PossibleDate = { @@ -42,26 +42,13 @@ export default function ApplyCogoTime() { ); const [selectedTime, setSelectedTime] = useState(null); const [timesForDate, setTimesForDate] = useState([]); - const [mentorId, setMentorId] = useState(0); + const { mentorid } = useParams(); const [possibleDates, setPossibleDates] = useState([]); const navigate = useNavigate(); - useEffect(() => { - axiosInstance - .get(`/users`) - .then((response) => { - console.log(response.data.content); - setMentorId(response.data.content.mentorId); - localStorage.setItem("mentorId", mentorId.toString()); - }) - .catch((error) => { - console.error("멘토아이디 조회 실패: ", error); - }); - }, []); - const fetchPossibleDates = async () => { try { - const response = await axiosInstance.get(`/possibleDates/${mentorId}`); + const response = await axiosInstance.get(`/possibleDates/${mentorid}`); console.log("possibleDates get: ", response.data.content); setPossibleDates(response.data.content || []); } catch (error) { @@ -72,10 +59,8 @@ export default function ApplyCogoTime() { }; useEffect(() => { - if (mentorId) { fetchPossibleDates(); - } - }, [mentorId]); + }, []); // selectedDate 또는 possibleDates가 변경될 때 timesForDate 업데이트 useEffect(() => { @@ -163,7 +148,7 @@ export default function ApplyCogoTime() { console.warn("No matching possible_date_id found."); } - navigate("/applyCogoMemo", { + navigate(`/applyCogoMemo/${mentorid}`, { state: { selectedDate: formattedSelectedDate, selectedTime, @@ -171,6 +156,8 @@ export default function ApplyCogoTime() { }); }; + console.log(selectedDate, selectedTime); + return (
diff --git a/src/pages/mentorDetails/mentorDetails.tsx b/src/pages/mentorDetails/mentorDetails.tsx index a91a109..46937fd 100644 --- a/src/pages/mentorDetails/mentorDetails.tsx +++ b/src/pages/mentorDetails/mentorDetails.tsx @@ -44,7 +44,7 @@ export default function MentorDetails() { }, []); const handleApplyBtnClick = () => { - navigate("/applycogotime"); + navigate(`/applycogotime/${mentorid}`); }; const formatTextWithLineBreaks = (text: string) => { diff --git a/src/pages/mypage/mypage.tsx b/src/pages/mypage/mypage.tsx index e7e79e2..f298c23 100644 --- a/src/pages/mypage/mypage.tsx +++ b/src/pages/mypage/mypage.tsx @@ -52,7 +52,7 @@ export default function MyPage() { const response = await axiosInstance.delete("/users"); console.log(response.data); } catch (error) { - console.error('Error deleting account:', error); + console.error("Error deleting account:", error); alert("회원 탈퇴가 완료되었습니다."); navigate("/login"); } @@ -74,7 +74,6 @@ export default function MyPage() { const file = e.target.files?.[0]; if (!file) return; - // 클라이언트 측에서 파일 크기 및 형식 검증 const allowedTypes = ["image/jpeg", "image/jpg", "image/png"]; if (!allowedTypes.includes(file.type)) { alert("이미지 형식만 업로드할 수 있습니다. (jpeg, jpg, png)"); @@ -82,16 +81,14 @@ export default function MyPage() { } if (file.size > 5 * 1024 * 1024) { - // 5MB 제한 alert("파일 크기가 너무 큽니다. 5MB 이하의 이미지를 선택해주세요."); return; } - setIsUploading(true); // 업로드 시작 - setUploadError(""); // 기존 에러 초기화 + setIsUploading(true); + setUploadError(""); try { - // 1단계: S3로 이미지 업로드 const directory = "v2"; const formData = new FormData(); formData.append("image", file); @@ -109,19 +106,14 @@ export default function MyPage() { console.log("S3 Response:", s3Response.data); if (s3Response.status === 201) { - // S3 업로드 성공, 응답에서 이미지 URL 추출 - // 실제 응답 구조에 맞게 수정 필요 let imageUrl: string | undefined; if (s3Response.data.content.savedUrl) { imageUrl = s3Response.data.content.savedUrl; - } else if (s3Response.data.content.additionalProp1) { - imageUrl = s3Response.data.content.additionalProp1; } else { throw new Error("이미지 URL을 받아오지 못했습니다."); } - // 2단계: 사용자 프로필에 이미지 URL 업데이트 const pictureResponse = await axiosInstance.put( "/users/picture", imageUrl @@ -130,7 +122,7 @@ export default function MyPage() { if (pictureResponse) { console.log( "프로필 이미지 업데이트 성공:", - pictureResponse.data.content.picture.slice(1,-1) + pictureResponse.data.content.picture.slice(1, -1) ); const imageUrl = pictureResponse.data.content.picture; setUserData((prevData) => @@ -156,6 +148,7 @@ export default function MyPage() { } }; + console.log("유저정보", userData?.picture); return ( - {userData?.name} 멘토님 + + {userData?.name} {userData?.role === "MENTEE" ? "멘티님" : "멘토님"} + @@ -180,7 +175,7 @@ export default function MyPage() { <> diff --git a/src/pages/mypage/myprofile/myprofile.tsx b/src/pages/mypage/myprofile/myprofile.tsx index 914c233..f9ec7ea 100644 --- a/src/pages/mypage/myprofile/myprofile.tsx +++ b/src/pages/mypage/myprofile/myprofile.tsx @@ -249,7 +249,8 @@ export default function MyProfile() { axiosInstance .patch("/users", updatedData) .then((response) => { - console.log("사용자 정보 업데이트 성공:", response.data); + console.log(updatedData); + console.log("사용자 정보 업데이트 성공:", response.data.content); setIsEditing(false); // 저장 후 편집 모드 종료 alert("정보가 성공적으로 저장되었습니다."); setUserData(response.data.content); // 서버에서 반환한 최신 데이터로 업데이트 diff --git a/src/pages/mypage/timeselect/timeselect.tsx b/src/pages/mypage/timeselect/timeselect.tsx index 28d853a..0330882 100644 --- a/src/pages/mypage/timeselect/timeselect.tsx +++ b/src/pages/mypage/timeselect/timeselect.tsx @@ -50,7 +50,7 @@ export default function TimeSelect() { const fetchPossibleDates = async () => { try { - const response = await axiosInstance.get(`/possibleDates/${mentorId}`); + const response = await axiosInstance.get(`/possibleDates`); console.log("possibleDates get: ", response.data.content); setPossibleDates(response.data.content || []); } catch (error) { @@ -61,23 +61,9 @@ export default function TimeSelect() { }; useEffect(() => { - axiosInstance - .get(`/users`) - .then((response) => { - console.log(response.data.content); - setMentorId(response.data.content.mentorId); - }) - .catch((error) => { - console.error("Failed to fetch user data:", error); - }); + fetchPossibleDates(); }, []); - useEffect(() => { - if (mentorId) { - fetchPossibleDates(); - } - }, [mentorId]); - const handleDateChange = (value: Date) => { const dateString = moment(value).format("YYYY-MM-DD");