Merge branch 'feat/#602' into develop

src/hocs/withScrollLockOnFocus.tsx

@@ -0,0 +1,25 @@
+import { forwardRef, Ref, useState } from 'react';
+
+import useRemoveVerticalScroll from '@/hooks/useRemoveVerticalScroll';
+
+const withScrollLockOnFocus = <P extends object>(
+  WrappedComponent: React.ComponentType<P>
+) => {
+  const Component = (props: P, ref: Ref<HTMLElement>) => {
+    const [focus, setFocus] = useState(false);
+    useRemoveVerticalScroll({ enabled: focus });
+
+    return (
+      <WrappedComponent
+        {...props}
+        onFocus={() => setFocus(true)}
+        onBlur={() => setFocus(false)}
+        ref={ref}
+      />
+    );
+  };
+
+  return forwardRef(Component);
+};
+
+export default withScrollLockOnFocus;

src/hooks/useRemoveVerticalScroll.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { nonPassive } from '@/utils/eventListener';
 
 type Options = {
-  enabled?: boolean;
+  enabled: boolean;
 };
 
 const getTouchXY = (event: TouchEvent | WheelEvent) =>
@@ -11,7 +11,7 @@ const getTouchXY = (event: TouchEvent | WheelEvent) =>
     : [0, 0];
 
 const useRemoveVerticalScroll = (options?: Options) => {
-  const enabled = options?.enabled;
+  const enabled = options ? options.enabled : true;
 
   const touchStartRef = useRef([0, 0]);
 

src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx

@@ -3,12 +3,16 @@ import { useFormContext } from 'react-hook-form';
 import type { MoveFunnelStepProps } from '@/v1/base/Funnel';
 import type { EnterTitleStepFormValues } from '../../types';
 
+import useRemoveVerticalScroll from '@/hooks/useRemoveVerticalScroll';
+
 import BottomActionButton from '@/v1/base/BottomActionButton';
 import { TitleField } from './fields';
 
 const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
   const { handleSubmit } = useFormContext<EnterTitleStepFormValues>();
 
+  useRemoveVerticalScroll();
+
   return (
     <article>
       <section className="flex flex-col gap-[1.5rem]">

src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx

@@ -6,6 +6,7 @@ import type { SetUpDetailStepFormValues } from '../../types';
 import { MAX_MEMBER_COUNT_OPTIONS } from '@/constants';
 import { getTodayDate } from '@/utils/date';
 
+import withScrollLockOnFocus from '@/hocs/withScrollLockOnFocus';
 import BottomActionButton from '@/v1/base/BottomActionButton';
 import DatePicker from '@/v1/base/DatePicker';
 import ErrorMessage from '@/v1/base/ErrorMessage';
@@ -68,6 +69,8 @@ type SetUpDetailFieldProps = {
   name: keyof SetUpDetailStepFormValues;
 };
 
+const ScrollLockInput = withScrollLockOnFocus(Input);
+
 const TitleField = ({ name }: SetUpDetailFieldProps) => {
   const {
     register,
@@ -82,7 +85,7 @@ const TitleField = ({ name }: SetUpDetailFieldProps) => {
 
   return (
     <section className="flex flex-col gap-[0.5rem]">
-      <Input
+      <ScrollLockInput
         fontSize="large"
         inputStyle="line"
         error={!!titleErrors}
@@ -131,6 +134,8 @@ const SelectedBookInfoField = ({
   );
 };
 
+const ScrollLockTextArea = withScrollLockOnFocus(TextArea);
+
 const IntroduceField = ({ name }: SetUpDetailFieldProps) => {
   const {
     register,
@@ -142,7 +147,7 @@ const IntroduceField = ({ name }: SetUpDetailFieldProps) => {
   return (
     <section className="flex flex-col gap-[1.2rem]">
       <h2>활동 내용</h2>
-      <TextArea
+      <ScrollLockTextArea
         count={true}
         error={!!introduceErrors}
         placeholder="독서모임에서 어떤 활동을 할 계획인지 자세히 설명해주세요"
@@ -153,7 +158,7 @@ const IntroduceField = ({ name }: SetUpDetailFieldProps) => {
         })}
       >
         <ErrorMessage>{introduceErrors?.message}</ErrorMessage>
-      </TextArea>
+      </ScrollLockTextArea>
     </section>
   );
 };