fix: 최초 사용자 404 에러 해결

dnd-side-project · Aug 5, 2023 · 2b24b63 · 2b24b63
1 parent 5670fda
commit 2b24b63
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 23 deletions.
diff --git a/src/components/addTimeTable/AddTimeTable.tsx b/src/components/addTimeTable/AddTimeTable.tsx
@@ -116,7 +116,7 @@ const AddTimeTable = ({
     document.body.style.overflow = '';
     (wrapperRef.current as HTMLDivElement).style.overflow = 'auto';
 
-    navigate(`/${ROUTES.CURRENT}/${roomUUID}`);
+    navigate(`${ROUTES.CURRENT}/${roomUUID}`);
   };
 
   const allTimeRange = getAllTimeRange(dates, timeRange);

diff --git a/src/hooks/useFormInput.ts b/src/hooks/useFormInput.ts
@@ -3,15 +3,15 @@ import { PostAuthType } from '../types/auth';
 
 const useInputs = (initialForm: PostAuthType) => {
   const [form, setForm] = useState(initialForm);
-  const onChange = useCallback(
+  const onChangeForm = useCallback(
     (e: any) => {
       const { name, value } = e.target;
       setForm({ ...form, [name]: value });
     },
     [form]
   );
   const reset = useCallback(() => setForm(initialForm), [initialForm]);
-  return { form, onChange, reset };
+  return { form, onChangeForm, reset };
 };
 
 export default useInputs;
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
@@ -42,7 +42,7 @@ const Login = () => {
   useInputScroll(inputNameRef);
   useInputScroll(inputPasswordRef);
 
-  const { form, onChange } = useInputs({
+  const { form, onChangeForm } = useInputs({
     name: '',
     password: '',
   });
@@ -56,35 +56,40 @@ const Login = () => {
   const navigate = useNavigate();
 
   const { data } = useGetRoomInfo(roomUUID);
-  const { mutate } = usePostUserInfo();
+  const { mutate, isSuccess, isError } = usePostUserInfo();
 
   useEffect(() => {
     if (data) {
       setRoom(data);
     }
   }, [data]);
 
-  const onClickNext = async () => {
-    try {
-      if (Number.isNaN(Number(form.password))) {
-        alert('비밀번호는 숫자만 입력해주세요');
-        return;
-      }
+  const onClickNext = () => {
+    if (Number.isNaN(Number(form.password))) {
+      alert('비밀번호는 숫자만 입력해주세요');
+      return;
+    }
 
+    if (canGoNext) {
       mutate({ roomUUID, form });
+    }
+  };
 
+  useEffect(() => {
+    if (isSuccess) {
       if (saveUserInfo) {
         localStorage.setItem('name', form.name);
         localStorage.setItem('uuid', String(roomUUID));
       }
 
       localStorage.setItem('userName', form.name);
       navigate(`${ROUTES.ADD_TIME}/${roomUUID}`);
-    } catch {
+    }
+
+    if (isError) {
       setIsPasswordError(true);
-      null;
     }
-  };
+  }, [isSuccess, isError]);
 
   return (
     <MainContainer>
@@ -101,7 +106,7 @@ const Login = () => {
               placeholder="이름을 입력하세요"
               maxLength={4}
               value={form.name}
-              onChange={onChange}
+              onChange={onChangeForm}
               isPasswordError={isPasswordError}
             ></NameInput>
             <PasswordInput
@@ -113,7 +118,7 @@ const Login = () => {
               autoComplete="current-password"
               placeholder="비밀번호 4자리를 설정하세요"
               value={form.password}
-              onChange={onChange}
+              onChange={onChangeForm}
               maxLength={4}
               isPasswordError={isPasswordError}
             ></PasswordInput>
@@ -132,12 +137,7 @@ const Login = () => {
             <TextWrapper>정보 저장</TextWrapper>
           </RightWrapper>
         </CheckBoxContainer>
-        {/* <Link to="/roomCalendar"> */}
-        <BottomButtonContainer
-          onClick={() => {
-            canGoNext ? onClickNext() : null;
-          }}
-        >
+        <BottomButtonContainer onClick={onClickNext}>
           <BottomButton text={'로그인'} isActivated={canGoNext} />
         </BottomButtonContainer>
       </FormContainer>

diff --git a/src/queries/availableTimes/useGetAvailableTimesByOne.ts b/src/queries/availableTimes/useGetAvailableTimesByOne.ts
@@ -7,7 +7,7 @@ export const useGetAvailableTimesByOne = (
   userName: string
 ) => {
   return useQuery(
-    [QUERY_KEYS.AVAILABLE_TIME.GET_AVAILABLE_TIMES_BY_ONE, roomUUID],
+    [QUERY_KEYS.AVAILABLE_TIME.GET_AVAILABLE_TIMES_BY_ONE, roomUUID, userName],
     () => getAvailableTimesByOne(roomUUID, userName)
   );
 };