diff --git a/src/pages/nuguPatch/NuguPatch.jsx b/src/pages/nuguPatch/NuguPatch.jsx index 5c1c460..c1a0fdf 100644 --- a/src/pages/nuguPatch/NuguPatch.jsx +++ b/src/pages/nuguPatch/NuguPatch.jsx @@ -15,7 +15,7 @@ import { useNuguPatch } from "./_hooks/useNuguPatch"; import { getNugu } from "@apis/nuguPatch"; export const NuguPatch = () => { const [updateData, setUpdateData] = useRecoilState(signUpState); - const { handleSubmit, isFormValid } = useNuguPatch(); + const { errors, handleSubmit, isFormValid } = useNuguPatch(); const { selectedChip, handleClickStatus, selectedCount } = usePatchChip(); useEffect(() => { @@ -59,13 +59,17 @@ export const NuguPatch = () => { {[...SIGN_UP_FIELDS[1], ...SIGN_UP_FIELDS[2]].map((data, index) => ( - handleInputChange(data.name, e.target.value)} - type={data.type} - /> +
+ handleInputChange(data.name, e.target.value)} + type={data.type} + /> + {errors[data.name] && ( + {errors[data.name]} + )} +
))} diff --git a/src/pages/nuguPatch/_hooks/useNuguPatch.js b/src/pages/nuguPatch/_hooks/useNuguPatch.js index 2329202..3b59e68 100644 --- a/src/pages/nuguPatch/_hooks/useNuguPatch.js +++ b/src/pages/nuguPatch/_hooks/useNuguPatch.js @@ -2,12 +2,36 @@ import { patchNuguInfo } from "@apis/nuguPatch"; import { useRecoilState } from "recoil"; import { signUpState } from "@atoms/signUpState"; import { useNavigate } from "react-router-dom"; - +import { useState } from "react"; export const useNuguPatch = () => { + const [errors, setErrors] = useState({}); + const navigate = useNavigate(); const [updateData, setUpdateData] = useRecoilState(signUpState); const handleSubmit = async () => { console.log(updateData); + + let valid = true; + const tempErrors = {}; + + Object.keys(updateData).forEach((field) => { + const value = updateData[field]; + const error = checkFieldValidity(value, field); + console.log(`Error for ${field}: ${error}`); + + if (error !== "") { + valid = false; + tempErrors[field] = error; + } else { + delete tempErrors[field]; + } + }); + setErrors(tempErrors); + console.log(valid); + if (!valid) { + return; + } + try { const response = await patchNuguInfo({ nickname: updateData.nickname, @@ -25,6 +49,32 @@ export const useNuguPatch = () => { throw err; } }; + const checkFieldValidity = (value, fieldName) => { + let error = ""; + // 각 필드에 대한 유효성 검사 + if (fieldName === "username" && (value.length === 0 || value.length > 20)) { + error = "아이디는 20자 이내로 작성해주세요."; + } else if ( + fieldName === "password" && + (value.length < 8 || value.length > 16) + ) { + error = "비밀번호는 8-16자로 작성해주세요."; + } else if (fieldName === "nickname" && value.length > 5) { + error = "닉네임은 5자 이내로 작성해주세요."; + } else if (fieldName === "mbti") { + value = value.trim(); // 공백 제거 + // 영문 4자 검사 + if (value && !/^[A-Za-z]{4}$/.test(value)) { + error = "MBTI는 영문 4자로 입력해주세요."; // 오류 메시지 + } + } else if (fieldName === "organization" && value.length > 30) { + error = "소속은 30자 이내로 작성해주세요."; + } else if (fieldName === "intro" && value.length > 30) { + error = "한 줄 소개는 30자 이내로 작성해주세요."; + } + + return error; + }; const isFormValid = () => { const requiredFields = [ @@ -39,5 +89,5 @@ export const useNuguPatch = () => { ]; return requiredFields.every((field) => field !== ""); }; - return { handleSubmit, isFormValid }; + return { handleSubmit, isFormValid, errors }; }; diff --git a/src/pages/nuguPatch/styled.js b/src/pages/nuguPatch/styled.js index c882e32..94e6cfa 100644 --- a/src/pages/nuguPatch/styled.js +++ b/src/pages/nuguPatch/styled.js @@ -46,3 +46,9 @@ export const ChipWrapper = styled.div` margin-top: 1rem; `; +export const ErrorMessage = styled.p` + color: ${({ theme }) => theme.colors.red200}; + ${({ theme }) => theme.fonts.pretendardB4}; + + font-size: 0.8rem; +`; diff --git a/src/pages/nuguTest/ChallengerTest.jsx b/src/pages/nuguTest/ChallengerTest.jsx index 0a00c18..81350b8 100644 --- a/src/pages/nuguTest/ChallengerTest.jsx +++ b/src/pages/nuguTest/ChallengerTest.jsx @@ -50,12 +50,7 @@ export const ChallengerTest = () => { const ResulthighlightIndex = result?.findIndex( (user) => user.id === challengerId ); - console.log("ResulthighlightIndex", ResulthighlightIndex); - console.log( - "selectedAnswer[currentQuestion]", - selectedAnswer[currentQuestion] - ); - console.log("rank[currentQuestion]", rank[currentQuestion]); + //정답 비교 const isAnswerCorrect = Number(rank[currentQuestion]) == selectedAnswer[currentQuestion] diff --git a/src/pages/nuguTest/NuguChallenge.jsx b/src/pages/nuguTest/NuguChallenge.jsx index 5ac560f..c0f28de 100644 --- a/src/pages/nuguTest/NuguChallenge.jsx +++ b/src/pages/nuguTest/NuguChallenge.jsx @@ -16,7 +16,6 @@ import Cookies from "js-cookie"; export const NuguChallenge = () => { const setTestUser = useSetRecoilState(testUser); const navigate = useNavigate(); - const isTestMake = true; const moveOnTest = () => { navigate(`/challenge/test/${Cookies.get("uuid")}`);