[FE] swipe 기능을 ref를 받아 쓰도록 개선한다

frontend/src/apis/user.ts

@@ -35,17 +35,17 @@ export const deleteToken = async () => {
 };
 
 export const postReissueAccessToken = async () => {
-  return await fetch(`${BASE_URL}${ENDPOINT.USER_ACCESS_TOKEN_REISSUE}`, {
-    method: 'POST',
+  return await fetcher.post({
+    url: `${BASE_URL}${ENDPOINT.USER_ACCESS_TOKEN_REISSUE}`,
     credentials: 'include',
-    headers: { 'Content-Type': 'application/json' },
+    // 쿠키전달이기때문에 body가 비어있는 post
   });
 };
 
 export const postSignUp = async ({ name, email, password }: { name: string; email: string; password: string }) => {
-  return await fetch(`${BASE_URL}${ENDPOINT.REGISTER}`, {
-    method: 'POST',
-    body: JSON.stringify({ name, email, password }),
+  return await fetcher.post({
+    url: `${BASE_URL}${ENDPOINT.REGISTER}`,
+    body: { name, email, password },
     credentials: 'include',
   });
 };

frontend/src/components/EditChecklist/ChecklistContent/EditChecklistContent.tsx

@@ -1,18 +1,35 @@
 import styled from '@emotion/styled';
-import { Suspense } from 'react';
+import { Suspense, useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import ListErrorFallback from '@/components/_common/errorBoundary/ListErrorFallback';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import EditChecklistQuestionTemplate from '@/components/EditChecklist/ChecklistContent/EditChecklistQuestionTemplate';
 import RoomInfoTemplate from '@/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate';
 import OptionTemplate from '@/components/NewChecklist/Option/OptionTemplate';
+import { DefaultChecklistTabsNames } from '@/constants/tabs';
+import useMouseDrag from '@/hooks/useMouseDrag';
 
 const EditChecklistContent = () => {
   const { currentTabId } = useTabContext();
 
+  const { setCurrentTabId } = useTabContext();
+  const ref = useRef<HTMLElement>(null);
+  useMouseDrag(ref, (S, E) => {
+    const DRAG_THRESHOLD = 100;
+    const TAB_COUNT = DefaultChecklistTabsNames.length;
+    const remainOp = (a: number, b: number) => (((a % b) + b + 1) % b) - 1; // 나머지연산자. -1부터 시작하므로 +1 -1
+    setCurrentTabId(tabId => {
+      const isLeftDrag = E.x - S.x > DRAG_THRESHOLD;
+      const isRightDrag = S.x - E.x > DRAG_THRESHOLD;
+      if (isLeftDrag) return remainOp(tabId - 1, TAB_COUNT);
+      if (isRightDrag) return remainOp(tabId + 1, TAB_COUNT);
+      return tabId;
+    });
+  });
+
   return (
-    <S.Container>
+    <S.Container ref={ref}>
       {/*방 기본정보 템플릿 */}
       {currentTabId === -1 && <RoomInfoTemplate />}
       {/* 옵션 선택 템플릿 */}

frontend/src/components/EditChecklist/ChecklistContent/EditChecklistQuestionTemplate.tsx

@@ -4,6 +4,7 @@ import Divider from '@/components/_common/Divider/Divider';
 import Layout from '@/components/_common/layout/Layout';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import ChecklistQuestionItem from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestion';
+import MoveNextButton from '@/components/NewChecklist/MoveNextButton';
 import useChecklistStore from '@/store/useChecklistStore';
 import { flexColumn } from '@/styles/common';
 import theme from '@/styles/theme';
@@ -37,6 +38,8 @@ const EditChecklistQuestionTemplate = () => {
           );
         })}
       </S.ContentBox>
+
+      <MoveNextButton marginTop="2rem" marginBottom="4rem" />
     </Layout>
   );
 };

frontend/src/components/NewChecklist/ChecklistContent.tsx

@@ -1,16 +1,34 @@
 import styled from '@emotion/styled';
-import { Suspense } from 'react';
+import { Suspense, useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import ListErrorFallback from '@/components/_common/errorBoundary/ListErrorFallback';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import ChecklistQuestionTemplate from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestionTemplate';
 import RoomInfoTemplate from '@/components/NewChecklist/NewRoomInfoForm/RoomInfoTemplate';
 import OptionTemplate from '@/components/NewChecklist/Option/OptionTemplate';
+import { DefaultChecklistTabsNames } from '@/constants/tabs';
+import useMouseDrag from '@/hooks/useMouseDrag';
 
 const ChecklistContent = () => {
   const { currentTabId } = useTabContext();
 
+  const { setCurrentTabId } = useTabContext();
+  const ref = useRef<HTMLElement>(null);
+
+  useMouseDrag(ref, (S, E) => {
+    const DRAG_THRESHOLD = 100;
+    const TAB_COUNT = DefaultChecklistTabsNames.length;
+    const remainOp = (a: number, b: number) => (((a % b) + b + 1) % b) - 1; // 나머지연산자. -1부터 시작하므로 +1 -1
+    setCurrentTabId(tabId => {
+      const isLeftDrag = E.x - S.x > DRAG_THRESHOLD;
+      const isRightDrag = S.x - E.x > DRAG_THRESHOLD;
+      if (isLeftDrag) return remainOp(tabId - 1, TAB_COUNT);
+      if (isRightDrag) return remainOp(tabId + 1, TAB_COUNT);
+      return tabId;
+    });
+  });
+
   return (
     <S.Container>
       {/*방 기본정보 템플릿 */}

frontend/src/components/NewChecklist/ChecklistTab/NewChecklistTab.tsx

@@ -1,11 +1,8 @@
 import { useMemo } from 'react';
 
 import ChecklistTabSuspense from '@/components/_common/errorBoundary/ChecklistTabSuspense';
-import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import Tabs from '@/components/_common/Tabs/Tabs';
-import { DefaultChecklistTabsNames } from '@/constants/tabs';
 import useInitialChecklist from '@/hooks/useInitialChecklist';
-import useMouseDrag from '@/hooks/useMouseDrag';
 import useTabs from '@/hooks/useTabs';
 import useChecklistStore from '@/store/useChecklistStore';
 import isSameCategory from '@/utils/isSameCategory';
@@ -14,20 +11,6 @@ const NewChecklistTab = () => {
   const { data: checklist, isSuccess, isLoading } = useInitialChecklist();
   const checklistStore = useChecklistStore(state => state.checklistCategoryQnA);
   const { getTabsForChecklist } = useTabs();
-  const { setCurrentTabId } = useTabContext();
-
-  useMouseDrag((S, E) => {
-    const DRAG_THRESHOLD = 100;
-    const TAB_COUNT = DefaultChecklistTabsNames.length;
-    const remainOp = (a: number, b: number) => (((a % b) + b + 1) % b) - 1; // 나머지연산자. -1부터 시작하므로 +1 -1
-    setCurrentTabId(tabId => {
-      const isLeftDrag = E.x - S.x > DRAG_THRESHOLD;
-      const isRightDrag = S.x - E.x > DRAG_THRESHOLD;
-      if (isLeftDrag) return remainOp(tabId - 1, TAB_COUNT);
-      if (isRightDrag) return remainOp(tabId + 1, TAB_COUNT);
-      return tabId;
-    });
-  });
 
   const categoryTabs = useMemo(() => {
     if (isSuccess && isSameCategory(checklist, checklistStore)) {

frontend/src/components/NewChecklist/NewRoomInfoForm/DepositAndRent.tsx

@@ -13,6 +13,7 @@ const DepositAndRent = () => {
       <FormField.Label label="보증금 / 월세 (만원)" />
       <FormStyled.FieldBox>
         <FormField.Input
+          inputMode="decimal"
           width="medium"
           onChange={deposit.onChange}
           name="deposit"
@@ -21,6 +22,7 @@ const DepositAndRent = () => {
         />
         <FormStyled.FlexLabel label=" / " />
         <FormField.Input
+          inputMode="decimal"
           width="medium"
           placeholder=""
           onChange={rent.onChange}

frontend/src/components/NewChecklist/NewRoomInfoForm/MaintenanceFee.tsx

@@ -11,6 +11,7 @@ const MaintenanceFee = () => {
       <FormField.Label label="관리비" htmlFor="maintenanceFee" />
       <FormStyled.FieldBox>
         <Input
+          inputMode="decimal"
           width="medium"
           placeholder=""
           onChange={maintenanceFee.onChange}

frontend/src/components/NewChecklist/NewRoomInfoForm/OccupancyMonth.tsx

@@ -15,6 +15,7 @@ const OccupancyMonth = () => {
       <FormField.Label label="입주 가능일" htmlFor="occupancyMonth" />
       <FormStyled.FieldBox>
         <FormField.Input
+          inputMode="decimal"
           width="medium"
           onChange={occupancyMonth.onChange}
           name="occupancyMonth"

frontend/src/components/NewChecklist/NewRoomInfoForm/RoomContractTerm.tsx

@@ -13,6 +13,7 @@ const RoomContractTerm = () => {
       <FormField.Label label="계약 기간" htmlFor="contractTerm" />
       <S.FieldBox>
         <Input
+          inputMode="decimal"
           width="medium"
           placeholder=""
           onChange={contractTerm.onChange}

frontend/src/components/NewChecklist/NewRoomInfoForm/RoomFloor.tsx

@@ -26,6 +26,7 @@ const RoomFloor = () => {
           onSelectSetter={handleClickDropdown}
         />
         <Input
+          inputMode="decimal"
           width="medium"
           disabled={floorLevel.rawValue === '반지하/지하'}
           placeholder=""

frontend/src/components/NewChecklist/NewRoomInfoForm/RoomSize.tsx

@@ -11,6 +11,7 @@ const RoomSize = () => {
       <FormField.Label label="방 크기" htmlFor="size" />
       <FormStyled.FieldBox>
         <Input
+          inputMode="decimal"
           width="medium"
           placeholder=""
           onChange={roomSize.onChange}

frontend/src/components/ResetPassword/SendVerificationEmailStep.tsx

@@ -37,9 +37,7 @@ const SendVerificationEmailStep = ({ onNext }: Props) => {
       onSuccess: () => setIsComplete(true),
       onError: error => setPostErrorMessage(error.message),
     });
-  const handleClickNext = () => {
-    onNext(email);
-  };
+  const handleClickNext = () => onNext(email);
 
   const canMove = isEmailValid && isComplete;
 
@@ -74,7 +72,7 @@ const SendVerificationEmailStep = ({ onNext }: Props) => {
                 style={{ width: '25rem' }}
               />
               <div>
-                <CS.SendButton onClick={handleClickSubmit} disabled={canMove}>
+                <CS.SendButton onClick={handleClickSubmit} disabled={canMove || !isEmailValid}>
                   전송
                 </CS.SendButton>
               </div>

frontend/src/hooks/useMouseDrag.ts

@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useState } from 'react';
 
 interface MousePosition {
   x: number;
   y: number;
 }
 type Handler = (start: MousePosition, end: MousePosition) => void;
 
-const useMouseDrag = (handler: Handler) => {
+const useMouseDrag = (ref: MutableRefObject<HTMLElement | null>, handler: Handler) => {
   const [startPosition, setStartPosition] = useState<MousePosition | null>(null);
 
   useEffect(() => {
@@ -30,16 +30,16 @@ const useMouseDrag = (handler: Handler) => {
       setStartPosition(null);
     };
 
-    window.addEventListener('mousedown', pointerdownListener);
-    window.addEventListener('touchstart', touchStartListener);
-    window.addEventListener('mouseup', pointerupListener);
-    window.addEventListener('touchend', touchEndListener);
+    ref.current?.addEventListener('mousedown', pointerdownListener);
+    ref.current?.addEventListener('touchstart', touchStartListener);
+    ref.current?.addEventListener('mouseup', pointerupListener);
+    ref.current?.addEventListener('touchend', touchEndListener);
 
     return () => {
-      window.removeEventListener('mousedown', pointerdownListener);
-      window.removeEventListener('mouseup', pointerupListener);
-      window.removeEventListener('touchstart', touchStartListener);
-      window.removeEventListener('touchend', touchEndListener);
+      ref.current?.removeEventListener('mousedown', pointerdownListener);
+      ref.current?.removeEventListener('mouseup', pointerupListener);
+      ref.current?.removeEventListener('touchstart', touchStartListener);
+      ref.current?.removeEventListener('touchend', touchEndListener);
     };
   }, [startPosition, handler]);
 };