🚀 Deploy #100

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 = () => {
         <S.TopWrapper>
           <ProgressBar title={"누구 수정하기"} $now={4} $total={4} />
           {[...SIGN_UP_FIELDS[1], ...SIGN_UP_FIELDS[2]].map((data, index) => (
-            <Input
-              title={data.title}
-              key={index}
-              value={updateData[data.name] || ""}
-              onChange={(e) => handleInputChange(data.name, e.target.value)}
-              type={data.type}
-            />
+            <div key={index}>
+              <Input
+                title={data.title}
+                value={updateData[data.name] || ""}
+                onChange={(e) => handleInputChange(data.name, e.target.value)}
+                type={data.type}
+              />
+              {errors[data.name] && (
+                <S.ErrorMessage>{errors[data.name]}</S.ErrorMessage>
+              )}
+            </div>
           ))}
 
           <S.TitleWrapper>

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 };
 };

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;
+`;

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]

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")}`);