From 43dcd5e493004f2a5173e8276b87ccfc3d318a8f Mon Sep 17 00:00:00 2001 From: alpaka206 Date: Mon, 2 Sep 2024 01:21:11 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Feat.=20matching=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20formdata=20=EC=A0=9C=EC=9E=91=20=EC=99=84=EB=A3=8C?= =?UTF-8?q?=20=EB=B0=8F=20guide=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Guide.jsx | 2 +- src/pages/Matching.jsx | 858 ++++++++++++++++++++++------------------- 2 files changed, 452 insertions(+), 408 deletions(-) diff --git a/src/pages/Guide.jsx b/src/pages/Guide.jsx index f781b4e..f25fd1e 100644 --- a/src/pages/Guide.jsx +++ b/src/pages/Guide.jsx @@ -11,7 +11,7 @@ function Guide() {
가이드 이미지1 { - const isAlreadySelected = MatchState.formData.hobby_option.includes(index); - const updatedHobbies = isAlreadySelected - ? MatchState.formData.hobby_option.filter((hobby) => hobby !== index) - : MatchState.formData.hobby_option.length < 5 - ? [...MatchState.formData.hobby_option, index] - : MatchState.formData.hobby_option; - - setMatchState((prev) => ({ - ...prev, - formData: { - ...prev.formData, - hobby_option: updatedHobbies, - }, - })); - }; + const handleHobbyClick = (index) => { + const isAlreadySelected = MatchState.formData.hobby_option.includes(index); + const updatedHobbies = isAlreadySelected + ? MatchState.formData.hobby_option.filter((hobby) => hobby !== index) + : MatchState.formData.hobby_option.length < 5 + ? [...MatchState.formData.hobby_option, index] + : MatchState.formData.hobby_option; - const handleStart = (e) => { - if (!isMBTISelected) return; // MBTI 2개가 선택되지 않으면 드래그 불가 - setIsDragging(true); - const clientX = e.type === "mousedown" ? e.clientX : e.touches[0].clientX; - startX.current = clientX; - }; + setMatchState((prev) => ({ + ...prev, + formData: { + ...prev.formData, + hobby_option: updatedHobbies, + }, + })); + }; - const handleMove = (e) => { - if (isDragging) { - const clientX = e.type === "mousemove" ? e.clientX : e.touches[0].clientX; - const deltaX = clientX - startX.current; - const newPosition = Math.min(Math.max(0, imagePosition + deltaX), 252); // 252는 이동 가능한 최대 위치 - setImagePosition(newPosition); - startX.current = clientX; // 현재 위치 업데이트 - } - }; - const handleEnd = () => { - setIsDragging(false); + const handleStart = (e) => { + if (!isMBTISelected) return; // MBTI 2개가 선택되지 않으면 드래그 불가 + setIsDragging(true); + const clientX = e.type === "mousedown" ? e.clientX : e.touches[0].clientX; + startX.current = clientX; + }; - // 필수 선택 확인 - const isAgeSelected = MatchState.isUseOption[0] ? MatchState.formData.age_option !== "" : true; - const isContactFrequencySelected = MatchState.isUseOption[1] ? MatchState.formData.contact_frequency_option !== "" : true; - const isHobbySelected = MatchState.isUseOption[2] ? MatchState.formData.hobby_option.length > 0 : true; + const handleMove = (e) => { + if (isDragging) { + const clientX = e.type === "mousemove" ? e.clientX : e.touches[0].clientX; + const deltaX = clientX - startX.current; + const newPosition = Math.min(Math.max(0, imagePosition + deltaX), 252); // 252는 이동 가능한 최대 위치 + setImagePosition(newPosition); + startX.current = clientX; // 현재 위치 업데이트 + } + }; + const handleEnd = () => { + setIsDragging(false); - if (!isAgeSelected) { - alert("나이를 선택해 주세요."); - setImagePosition(0); // 이미지 위치 초기화 - } else if (!isContactFrequencySelected) { - alert("연락 빈도를 선택해 주세요."); - setImagePosition(0); // 이미지 위치 초기화 - } else if (!isHobbySelected) { - alert("취미를 선택해 주세요.(최대 5개"); - setImagePosition(0); // 이미지 위치 초기화 - } else if (imagePosition >= 252) { - alert("다음 단계로 이동합니다."); // 이동 완료 후 원하는 동작 수행 - // 다음 단계로 이동 로직 추가 - } + // 필수 선택 확인 + const isAgeSelected = MatchState.isUseOption[0] + ? MatchState.formData.age_option !== "" + : true; + const isContactFrequencySelected = MatchState.isUseOption[1] + ? MatchState.formData.contact_frequency_option !== "" + : true; + const isHobbySelected = MatchState.isUseOption[2] + ? MatchState.formData.hobby_option.length > 0 + : true; + + if (!isAgeSelected) { + alert("나이를 선택해 주세요."); + setImagePosition(0); // 이미지 위치 초기화 + } else if (!isContactFrequencySelected) { + alert("연락 빈도를 선택해 주세요."); + setImagePosition(0); // 이미지 위치 초기화 + } else if (!isHobbySelected) { + alert("취미를 선택해 주세요.(최대 5개"); + setImagePosition(0); // 이미지 위치 초기화 + } else if (imagePosition >= 252) { + alert("다음 단계로 이동합니다."); // 이동 완료 후 원하는 동작 수행 + // 다음 단계로 이동 로직 추가 + } + console.log(MatchState); + const FormData = { + ageOption: MatchState.isUseOption[0] + ? MatchState.formData.age_option + : "UNSELECTED", + // mbti_option: MatchState.selectedMBTI.join(""), + mbtiOption: MatchState.selectedMBTI + .filter((letter) => letter !== "X") + .join(""), + // ai_option_count: aiOptionCount, + hobbyOption: MatchState.isUseOption[2] + ? MatchState.formData.hobby_option + : "UNSELECTED", + contactFrequencyOption: MatchState.isUseOption[1] + ? MatchState.formData.contact_frequency_option + : "UNSELECTED", + sameMajorOption: MatchState.isUseOption[3] ? true : false, + // match_code: MatchState.formData.match_code, + campus: "Catholic National University", }; - // const handleEnd = async () => { - // setIsDragging(false); - // if (imagePosition >= 252) { - - // const aiOptionCount = MatchState.isUseOption.filter( - // (option) => option - // ).length; - - // const updatedFormData = { - // ...MatchState.formData, - // mbti_option: MatchState.selectedMBTI.join(""), - // ai_option_count: aiOptionCount, - // age_option: MatchState.isUseOption[0] - // ? MatchState.formData.age_option - // : "NONE", - // contact_frequency_option: MatchState.isUseOption[1] - // ? MatchState.formData.contact_frequency_option - // : "NONE", - // no_same_major_option: MatchState.isUseOption[3] ? true : false, - // match_code: MatchState.formData.match_code, - // }; + console.log("FormData: ", FormData); + }; + // const handleEnd = async () => { + // setIsDragging(false); + // if (imagePosition >= 252) { - // setMatchState((prev) => ({ - // ...prev, - // formData: updatedFormData, - // })); - - // try { - // const response = await axios.post("/comatching/match", updatedFormData); - // console.log(response.data.data); - // if (response.data.status === 200) { - - // setMatchPageResult({ - // major: response.data.data.major, - // age: response.data.data.age, - // hobby: response.data.data.hobby, - // mbti: response.data.data.mbti, - // song: response.data.data.song, - // contactFrequency: response.data.data.contactFrequency, - // contactId: response.data.data.contactId, - // word: response.data.data.word, - // }); - // setMatchState((prev) => ({ - // ...prev, - // balance: response.data.data.currentPoint, - // })); - // navigate("/loading"); - // } else { - // throw new Error("Unexpected response code or status"); - // } - // } catch (error) { - // console.error("Error during match request", error); - // } - // } - // }; - - // MBTI 선택 핸들러 - const handleMBTISelection = (value) => { - // 선택한 것의 카테고리 구분 - const category = - value === "E" || value === "I" - ? 0 - : value === "S" || value === "N" - ? 1 - : value === "T" || value === "F" - ? 2 - : 3; + // const aiOptionCount = MatchState.isUseOption.filter( + // (option) => option + // ).length; - setMatchState((prev) => { - const updatedMBTI = [...prev.selectedMBTI]; - const updatedCategory = [...prev.selectedCategory]; + // const updatedFormData = { + // ...MatchState.formData, + // mbti_option: MatchState.selectedMBTI.join(""), + // ai_option_count: aiOptionCount, + // age_option: MatchState.isUseOption[0] + // ? MatchState.formData.age_option + // : "NONE", + // contact_frequency_option: MatchState.isUseOption[1] + // ? MatchState.formData.contact_frequency_option + // : "NONE", + // no_same_major_option: MatchState.isUseOption[3] ? true : false, + // match_code: MatchState.formData.match_code, + // }; - if (updatedCategory.includes(category)) { - updatedMBTI[category] = value; // 이미 선택된 카테고리를 업데이트 - } else { - if (updatedCategory.length >= 2) { - updatedMBTI[updatedCategory[0]] = "X"; // 기존 선택을 제거 - updatedCategory.shift(); - } - updatedMBTI[category] = value; - updatedCategory.push(category); - } + // setMatchState((prev) => ({ + // ...prev, + // formData: updatedFormData, + // })); - const isSelected = updatedCategory.length === 2; // 2개 선택 여부 확인 - setIsMBTISelected(isSelected); // 2개가 선택되었을 때만 슬라이더 활성화 + // try { + // const response = await axios.post("/comatching/match", updatedFormData); + // console.log(response.data.data); + // if (response.data.status === 200) { - return { - ...prev, - selectedMBTI: updatedMBTI, - selectedCategory: updatedCategory, - }; - }); - }; + // setMatchPageResult({ + // major: response.data.data.major, + // age: response.data.data.age, + // hobby: response.data.data.hobby, + // mbti: response.data.data.mbti, + // song: response.data.data.song, + // contactFrequency: response.data.data.contactFrequency, + // contactId: response.data.data.contactId, + // word: response.data.data.word, + // }); + // setMatchState((prev) => ({ + // ...prev, + // balance: response.data.data.currentPoint, + // })); + // navigate("/loading"); + // } else { + // throw new Error("Unexpected response code or status"); + // } + // } catch (error) { + // console.error("Error during match request", error); + // } + // } + // }; - const handleAgeSelection = (value, location) => { - setMatchState((prev) => ({ - ...prev, - formData: { - ...prev.formData, - [location]: prev.formData[location] === value ? "" : value, // 선택 취소 로직 - }, - })); - }; - - // 유료 버튼 사용 클릭 핸들러 - const handleButtonClick = (index, cost) => { - setMatchState((prev) => { - const newIsUseOption = prev.isUseOption.map((option, i) => - i === index ? !option : option - ); - - // 비용 계산 로직 - const newPoint = newIsUseOption[index] ? prev.point + cost : prev.point - cost; - - return { - ...prev, - point: newPoint, - isUseOption: newIsUseOption, - }; - }); - }; + // MBTI 선택 핸들러 + const handleMBTISelection = (value) => { + // 선택한 것의 카테고리 구분 + const category = + value === "E" || value === "I" + ? 0 + : value === "S" || value === "N" + ? 1 + : value === "T" || value === "F" + ? 2 + : 3; + setMatchState((prev) => { + const updatedMBTI = [...prev.selectedMBTI]; + const updatedCategory = [...prev.selectedCategory]; - return ( -
- - -
-
-
Matching
-
매칭되고 싶은 상대를 입력하세요
-
-
-
-
-
- MBTI 필수 -
-
상대방의 MBTI 2개를 골라주세요.
-
- -
-
-
-
handleButtonClick(0, 100)} - > -
-
- 나이선택 -
-
상대의 나이를 골라주세요
-
- { - e.stopPropagation(); // 이벤트 전파 중지 - handleButtonClick(0, -100); - }} - /> -
-
- {/* MatchOptionButton 클릭 시만 나이 선택 버튼 표시 */} - {MatchState.isUseOption[0] && ( -
- handleAgeSelection("YOUNGER", "age_option")} - isClickable={MatchState.isUseOption[0]} - - /> - handleAgeSelection("EQUAL", "age_option")} - isClickable={MatchState.isUseOption[0]} - - /> - handleAgeSelection("OLDER", "age_option")} - isClickable={MatchState.isUseOption[0]} - - /> -
- )} -
-
-
-
handleButtonClick(1, 100)} // 클릭 이벤트 추가 - > -
-
연락 빈도선택
-
원하는 연락 빈도 선택
-
- { - e.stopPropagation(); // 이벤트 전파 중지 - handleButtonClick(0, 100); - }} - /> -
-
- {MatchState.isUseOption[1] && ( -
- handleAgeSelection("FREQUENT", "contact_frequency_option")} - isClickable={MatchState.isUseOption[1]} - /> - handleAgeSelection("NORMAL", "contact_frequency_option")} - isClickable={MatchState.isUseOption[1]} - /> - handleAgeSelection("NOT_FREQUENT", "contact_frequency_option")} - isClickable={MatchState.isUseOption[1]} - /> -
- )} -
-
+ if (updatedCategory.includes(category)) { + updatedMBTI[category] = value; // 이미 선택된 카테고리를 업데이트 + } else { + if (updatedCategory.length >= 2) { + updatedMBTI[updatedCategory[0]] = "X"; // 기존 선택을 제거 + updatedCategory.shift(); + } + updatedMBTI[category] = value; + updatedCategory.push(category); + } + + const isSelected = updatedCategory.length === 2; // 2개 선택 여부 확인 + setIsMBTISelected(isSelected); // 2개가 선택되었을 때만 슬라이더 활성화 + + return { + ...prev, + selectedMBTI: updatedMBTI, + selectedCategory: updatedCategory, + }; + }); + }; + + const handleAgeSelection = (value, location) => { + setMatchState((prev) => ({ + ...prev, + formData: { + ...prev.formData, + [location]: prev.formData[location] === value ? "" : value, // 선택 취소 로직 + }, + })); + }; + + // 유료 버튼 사용 클릭 핸들러 + const handleButtonClick = (index, cost) => { + setMatchState((prev) => { + const newIsUseOption = prev.isUseOption.map((option, i) => + i === index ? !option : option + ); + + // 비용 계산 로직 + const newPoint = newIsUseOption[index] + ? prev.point + cost + : prev.point - cost; + + return { + ...prev, + point: newPoint, + isUseOption: newIsUseOption, + }; + }); + }; + + return ( +
+ + +
-
handleButtonClick(2, 100)} - > -
-
취미선택
-
- 상대의 취미를 5개를 골라주세요 -
-
- { - e.stopPropagation(); - handleButtonClick(2, 100); - }} - /> -
-
- {MatchState.isUseOption[2] && ( -
- {hobbyIcons.map((hobby, index) => ( - - ))} +
Matching
+
+ 매칭되고 싶은 상대를 입력하세요 +
+
+
+
+
+
+ MBTI 필수 +
+
+ 상대방의 MBTI 2개를 골라주세요. +
+
+ +
+
+
+
handleButtonClick(0, 100)} + > +
+
+ 나이선택 +
+
+ 상대의 나이를 골라주세요 +
- )} + { + e.stopPropagation(); // 이벤트 전파 중지 + handleButtonClick(0, -100); + }} + /> +
-
-
-
handleButtonClick(3, 200)} // 클릭 이벤트 추가 - > -
-
같은과는 싫어요선택
-
과 CC를 피할 수 있어요
-
- { - e.stopPropagation(); // 이벤트 전파 중지 - handleButtonClick(0, 100); - }} - /> -
-
+ {/* MatchOptionButton 클릭 시만 나이 선택 버튼 표시 */} + {MatchState.isUseOption[0] && ( +
+ handleAgeSelection("YOUNGER", "age_option")} + isClickable={MatchState.isUseOption[0]} + /> + handleAgeSelection("EQUAL", "age_option")} + isClickable={MatchState.isUseOption[0]} + /> + handleAgeSelection("OLDER", "age_option")} + isClickable={MatchState.isUseOption[0]} + /> +
+ )} +
+
+
+
handleButtonClick(1, 100)} // 클릭 이벤트 추가 + > +
+
+ 연락 빈도선택 +
+
원하는 연락 빈도 선택
-
0 ? 'block' : 'none' - }} - > - coin - {MatchState.point}P 소모 + { + e.stopPropagation(); // 이벤트 전파 중지 + handleButtonClick(0, 100); + }} + /> +
+
+ {MatchState.isUseOption[1] && ( +
+ + handleAgeSelection("FREQUENT", "contact_frequency_option") + } + isClickable={MatchState.isUseOption[1]} + /> + + handleAgeSelection("NORMAL", "contact_frequency_option") + } + isClickable={MatchState.isUseOption[1]} + /> + + handleAgeSelection("NOT_FREQUENT", "contact_frequency_option") + } + isClickable={MatchState.isUseOption[1]} + /> +
+ )} +
+
+
+
handleButtonClick(2, 100)} + > +
+
+ 취미선택 +
+
+ 상대의 취미를 5개를 골라주세요 +
- -
-
- -

- {isMBTISelected ? "밀어서 커플되기" : "조건을 선택해 주세요"} -

-
+ { + e.stopPropagation(); + handleButtonClick(2, 100); + }} + /> +
+
+ {MatchState.isUseOption[2] && ( +
+ {hobbyIcons.map((hobby, index) => ( + + ))} +
+ )} +
+
+
+
handleButtonClick(3, 200)} // 클릭 이벤트 추가 + > +
+
+ 같은과는 싫어요선택 +
+
과 CC를 피할 수 있어요
+ { + e.stopPropagation(); // 이벤트 전파 중지 + handleButtonClick(0, 100); + }} + /> +
+
+
+
0 ? "block" : "none", + }} + > + coin + {MatchState.point}P 소모 +
-
+
+
+ +

{isMBTISelected ? "밀어서 커플되기" : "조건을 선택해 주세요"}

- ); +
+ +
+
+ ); } export default Matching; From 994f722b367d7d10cb85d7bee55dcd378b879566 Mon Sep 17 00:00:00 2001 From: alpaka206 Date: Mon, 2 Sep 2024 23:16:37 +0900 Subject: [PATCH 2/2] =?UTF-8?q?FEAT.=20=EB=A7=A4=EC=B9=AD=20=ED=86=B5?= =?UTF-8?q?=EC=8B=A0=20=EB=B0=8F=20=EB=A1=9C=EB=94=A9=20=EB=84=A4=EB=B9=84?= =?UTF-8?q?=EA=B2=8C=EC=9D=B4=EC=85=98=20=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Matching.jsx | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/pages/Matching.jsx b/src/pages/Matching.jsx index 6c486d9..4264625 100644 --- a/src/pages/Matching.jsx +++ b/src/pages/Matching.jsx @@ -10,6 +10,7 @@ import MBTISection from "../components/MBTISection"; import AgeButton from "../components/AgeButton"; import MatchOptionButton from "../components/MatchOptionButton"; import hobbyIcons from "../data/hobbyIcons"; // 취미 아이콘 데이터 가져오기 +import Cookies from "js-cookie"; import "../css/pages/Matching.css"; function Matching() { @@ -55,7 +56,7 @@ function Matching() { startX.current = clientX; // 현재 위치 업데이트 } }; - const handleEnd = () => { + const handleEnd = async () => { setIsDragging(false); // 필수 선택 확인 @@ -82,7 +83,6 @@ function Matching() { alert("다음 단계로 이동합니다."); // 이동 완료 후 원하는 동작 수행 // 다음 단계로 이동 로직 추가 } - console.log(MatchState); const FormData = { ageOption: MatchState.isUseOption[0] ? MatchState.formData.age_option @@ -103,6 +103,26 @@ function Matching() { campus: "Catholic National University", }; console.log("FormData: ", FormData); + try { + const accessToken = Cookies.get("Authorization"); + + const response = await axios.post( + "/auth/user/api/match/request", + FormData, + { + headers: { + Authorization: `Bearer ${accessToken}`, // ACCESSTOKEN을 Authorization 헤더에 추가 + }, + } + ); + if (response.data.status === 200) { + navigate("/loading"); + } else { + alert("가입 실패"); + } + } catch (error) { + console.error("오류 발생:", error); + } }; // const handleEnd = async () => { // setIsDragging(false);