From e7241263728d8eba93e3bd640254e778cf766f88 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Wed, 29 May 2024 18:12:26 +0900 Subject: [PATCH 01/15] =?UTF-8?q?feat:=20ProgressBar=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 스토리북 작성 --- src/stories/base/ProgressBar.stories.tsx | 16 +++++++++++++ src/v1/base/ProgressBar.tsx | 29 ++++++++++++++++++++++++ tailwind.config.js | 5 ++-- 3 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 src/stories/base/ProgressBar.stories.tsx create mode 100644 src/v1/base/ProgressBar.tsx diff --git a/src/stories/base/ProgressBar.stories.tsx b/src/stories/base/ProgressBar.stories.tsx new file mode 100644 index 00000000..82af9595 --- /dev/null +++ b/src/stories/base/ProgressBar.stories.tsx @@ -0,0 +1,16 @@ +import { Meta, StoryObj } from '@storybook/react'; +import ProgressBar from '@/v1/base/ProgressBar'; + +const meta: Meta = { + title: 'Base/ProgressBar', + component: ProgressBar, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { value: 30 }, +}; diff --git a/src/v1/base/ProgressBar.tsx b/src/v1/base/ProgressBar.tsx new file mode 100644 index 00000000..f8cc68d4 --- /dev/null +++ b/src/v1/base/ProgressBar.tsx @@ -0,0 +1,29 @@ +/** + * @param value percentage + */ +const ProgressBar = ({ + value, + className, +}: { + value: number; + className?: string; +}) => { + return ( +
+
+
+
+ ); +}; + +export default ProgressBar; diff --git a/tailwind.config.js b/tailwind.config.js index e408935d..d64bdf95 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -31,8 +31,9 @@ module.exports = { }, colors: { main: { - 400: '#F5F4EE', - 500: '#FAF0DD', + 300: '#F5F4EE', + 400: '#FAF0DD', + 500: '#FFDEB6', 600: '#FFD480', // use with opacity 18% 700: '#FFC073', 800: '#F6AD55', From 2627c1dfbbf91d6a66d3b4225ac3a80d79423e35 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Wed, 29 May 2024 23:34:09 +0900 Subject: [PATCH 02/15] =?UTF-8?q?refactor:=20=EB=AA=A8=EC=9E=84=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20>=20=EC=83=81=EC=84=B8=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=8A=A4=ED=85=9D=EC=97=90=20heading=20=EB=AC=B8?= =?UTF-8?q?=EA=B5=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx b/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx index 26de9788..989c9556 100644 --- a/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx +++ b/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx @@ -34,6 +34,7 @@ const SetUpDetailStep = ({ return (
+

모임 정보를 설정해주세요

Date: Wed, 29 May 2024 23:35:07 +0900 Subject: [PATCH 03/15] =?UTF-8?q?feat:=20stroke=20=EC=A1=B0=EC=A0=88?= =?UTF-8?q?=EC=9D=B4=20=EA=B0=80=EB=8A=A5=ED=95=9C=20check=20icon=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/check-stroke.svg | 3 +++ public/icons/check.svg | 2 +- public/icons/index.ts | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 public/icons/check-stroke.svg diff --git a/public/icons/check-stroke.svg b/public/icons/check-stroke.svg new file mode 100644 index 00000000..ed04a458 --- /dev/null +++ b/public/icons/check-stroke.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/check.svg b/public/icons/check.svg index 02c67968..b8f67399 100644 --- a/public/icons/check.svg +++ b/public/icons/check.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/index.ts b/public/icons/index.ts index fc385833..6c302764 100644 --- a/public/icons/index.ts +++ b/public/icons/index.ts @@ -30,6 +30,7 @@ export { default as IconErrorExclamation } from './error-with-exclamation.svg'; export { default as IconAvatar } from './avatar.svg'; export { default as IconCalendar } from './calendar.svg'; export { default as IconCheck } from './check.svg'; +export { default as IconCheckStroke } from './check-stroke.svg'; export { default as IconComments } from './comments.svg'; export { default as IconDelete } from './delete.svg'; export { default as IconMembers } from './members.svg'; From e82b562b6de1b78eac908acfc620ed572f67bcc2 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Wed, 29 May 2024 23:45:33 +0900 Subject: [PATCH 04/15] =?UTF-8?q?feat:=20Stepper=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v1/base/Stepper.tsx | 87 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 src/v1/base/Stepper.tsx diff --git a/src/v1/base/Stepper.tsx b/src/v1/base/Stepper.tsx new file mode 100644 index 00000000..d613bbb5 --- /dev/null +++ b/src/v1/base/Stepper.tsx @@ -0,0 +1,87 @@ +import { + Children, + createContext, + PropsWithChildren, + ReactNode, + useContext, +} from 'react'; + +import { IconCheckStroke } from '@public/icons'; +import ProgressBar from '@/v1/base/ProgressBar'; + +type StepStatus = 'complete' | 'incomplete' | 'active'; + +type StepContextValues = { + index: number; + status: StepStatus; + count: number; +}; + +const StepperContext = createContext( + {} as StepContextValues +); + +const Stepper = ({ + activeIndex, + children, +}: PropsWithChildren<{ activeIndex: number }>) => { + const stepElements = Children.toArray(children); + const stepCount = stepElements.length; + + const progressPercent = + activeIndex === 0 ? 0 : Math.ceil((activeIndex / (stepCount - 1)) * 100); + + const getStepStatus = (step: number): StepStatus => { + if (step < activeIndex) return 'complete'; + if (step > activeIndex) return 'incomplete'; + return 'active'; + }; + + return ( +
+ + {stepElements.map((child, index) => ( + + {child} + + ))} +
+ ); +}; + +const getStepClasses = (status: StepStatus) => { + switch (status) { + case 'complete': + return 'bg-main-900'; + case 'active': + return 'bg-main-900 scale-[1.3] delay-500'; + case 'incomplete': + default: + return 'bg-main-500'; + } +}; + +const Step = ({ children }: { children?: ReactNode }) => { + const { status, index } = useContext(StepperContext); + const statusClasses = getStepClasses(status); + + return ( +
+ {status === 'complete' ? ( + + ) : ( +

{index + 1}

+ )} + {children} +
+ ); +}; + +Stepper.Step = Step; + +export default Stepper; From 418099e688ffa9870be760ac77333daa67f588c7 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Wed, 29 May 2024 23:46:04 +0900 Subject: [PATCH 05/15] =?UTF-8?q?feat:=20Stepper=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/base/Stepper.stories.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/stories/base/Stepper.stories.tsx diff --git a/src/stories/base/Stepper.stories.tsx b/src/stories/base/Stepper.stories.tsx new file mode 100644 index 00000000..d7bfdcfc --- /dev/null +++ b/src/stories/base/Stepper.stories.tsx @@ -0,0 +1,24 @@ +import { Meta, StoryObj } from '@storybook/react'; +import Stepper from '@/v1/base/Stepper'; + +const meta: Meta = { + title: 'Base/Stepper', + component: Stepper, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { activeIndex: 0 }, + + render: args => ( + + + + + + ), +}; From 780fc567914ca4bf50b085a929b7a0a0e8ff5a99 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Wed, 29 May 2024 23:49:23 +0900 Subject: [PATCH 06/15] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=ED=8D=BC=EB=84=90=EC=97=90=20stepper=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v1/bookGroup/create/CreateBookGroupFunnel.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/v1/bookGroup/create/CreateBookGroupFunnel.tsx b/src/v1/bookGroup/create/CreateBookGroupFunnel.tsx index e89dbd01..c142106c 100644 --- a/src/v1/bookGroup/create/CreateBookGroupFunnel.tsx +++ b/src/v1/bookGroup/create/CreateBookGroupFunnel.tsx @@ -14,6 +14,7 @@ import { SERVICE_ERROR_MESSAGE } from '@/constants'; import { IconArrowLeft } from '@public/icons'; import TopNavigation from '@/v1/base/TopNavigation'; +import Stepper from '@/v1/base/Stepper'; import { EnterTitleStep, SelectBookStep, @@ -33,6 +34,9 @@ const CreateBookGroupFunnel = () => { const [Funnel, setStep, currentStep] = useFunnel(FUNNEL_STEPS, { initialStep: 'SelectBook', }); + const stepIndex = FUNNEL_STEPS.indexOf(currentStep); + const activeStep = stepIndex !== -1 ? stepIndex : 0; + const { show: showToast } = useToast(); const { mutate } = useCreateBookGroupMutation(); @@ -111,6 +115,16 @@ const CreateBookGroupFunnel = () => { +
+
+ + {FUNNEL_STEPS.map((_, idx) => { + return ; + })} + +
+
+
From badc49fc03ac73befa92a71c0af7e01dc14341de Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Thu, 30 May 2024 17:54:03 +0900 Subject: [PATCH 07/15] =?UTF-8?q?fix:=20stepper=20=EC=95=A0=EB=8B=88?= =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=88=98=EC=A0=95,=20=EB=9D=BC?= =?UTF-8?q?=EB=B2=A8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v1/base/ProgressBar.tsx | 2 +- src/v1/base/Stepper.tsx | 23 +++++++++++++++---- .../create/CreateBookGroupFunnel.tsx | 13 ++++++++--- tailwind.config.js | 5 ++-- 4 files changed, 33 insertions(+), 10 deletions(-) diff --git a/src/v1/base/ProgressBar.tsx b/src/v1/base/ProgressBar.tsx index f8cc68d4..1c0bc23a 100644 --- a/src/v1/base/ProgressBar.tsx +++ b/src/v1/base/ProgressBar.tsx @@ -19,7 +19,7 @@ const ProgressBar = ({ className="absolute h-full w-full bg-main-900" style={{ transform: `translateX(-${100 - value}%)`, - transition: 'transform 0.4s 0.1s ease-in-out', + transition: 'transform 0.4s ease-in-out', }} />
diff --git a/src/v1/base/Stepper.tsx b/src/v1/base/Stepper.tsx index d613bbb5..a3cb26d4 100644 --- a/src/v1/base/Stepper.tsx +++ b/src/v1/base/Stepper.tsx @@ -57,25 +57,40 @@ const getStepClasses = (status: StepStatus) => { case 'complete': return 'bg-main-900'; case 'active': - return 'bg-main-900 scale-[1.3] delay-500'; + return 'bg-main-900 w-[7.4rem] delay-[400]'; case 'incomplete': default: return 'bg-main-500'; } }; -const Step = ({ children }: { children?: ReactNode }) => { +const Step = ({ + label, + children, +}: { + label?: string; + children?: ReactNode; +}) => { const { status, index } = useContext(StepperContext); const statusClasses = getStepClasses(status); + const stepNumberToRender = index + 1; + const labelToRender = label ? label : stepNumberToRender; + return (
{status === 'complete' ? ( + ) : status === 'active' ? ( +

+ {labelToRender} +

) : ( -

{index + 1}

+

+ {stepNumberToRender} +

)} {children}
diff --git a/src/v1/bookGroup/create/CreateBookGroupFunnel.tsx b/src/v1/bookGroup/create/CreateBookGroupFunnel.tsx index c142106c..2df059d2 100644 --- a/src/v1/bookGroup/create/CreateBookGroupFunnel.tsx +++ b/src/v1/bookGroup/create/CreateBookGroupFunnel.tsx @@ -29,6 +29,13 @@ const FUNNEL_STEPS = [ 'SelectJoinType', ] as const; +const steps = [ + { label: '도서선택' }, + { label: '모임이름' }, + { label: '모임정보' }, + { label: '가입유형' }, +]; + const CreateBookGroupFunnel = () => { const router = useRouter(); const [Funnel, setStep, currentStep] = useFunnel(FUNNEL_STEPS, { @@ -116,10 +123,10 @@ const CreateBookGroupFunnel = () => {
-
+
- {FUNNEL_STEPS.map((_, idx) => { - return ; + {steps.map(({ label }, idx) => { + return ; })}
diff --git a/tailwind.config.js b/tailwind.config.js index d64bdf95..b1f59e4e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -88,7 +88,7 @@ module.exports = { 'bookgroup-card': '0 0 6px rgba(180,180,180,0.25)', }, keyframes: { - 'page-transition': { + 'opacity-show': { from: { opacity: 0 }, to: { opacity: 1 }, }, @@ -116,13 +116,14 @@ module.exports = { }, }, animation: { - 'page-transition': 'page-transition 0.2s forwards ease-in-out', + 'page-transition': 'opacity-show 0.2s forwards ease-in-out', 'slide-in': '0.3s forwards slide-in ease-in-out', 'slide-out': '0.3s forwards slide-out ease-in-out', 'slide-init': '0.3s forwards slide-init ease-in-out', 'dot-flash': '2s infinite dot-flash linear', 'dot-flash-delay-0.5': '2s 0.5s infinite dot-flash linear', 'dot-flash-delay-1': '2s 1s infinite dot-flash linear', + 'stepper-transition': 'opacity-show 0.2s 0.2s forwards', }, content: { search: 'url("/icons/search.svg")', From 045f13f12de5a7ad9197d1ba24f4ff893a4add23 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Thu, 30 May 2024 19:08:47 +0900 Subject: [PATCH 08/15] =?UTF-8?q?fix:=20useRemoveVerticalScroll=20hook=20e?= =?UTF-8?q?nabled=20option=EC=9D=B4=20=EC=97=86=EB=8A=94=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20=EB=B0=94=EB=A1=9C=20scroll=20=EC=A0=9C=EA=B1=B0?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useRemoveVerticalScroll.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useRemoveVerticalScroll.ts b/src/hooks/useRemoveVerticalScroll.ts index 6f0a6f12..293b5bbb 100644 --- a/src/hooks/useRemoveVerticalScroll.ts +++ b/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]); From e981685e2f2031180759ef06ac8c7b6fea5b23c8 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Thu, 30 May 2024 19:09:46 +0900 Subject: [PATCH 09/15] =?UTF-8?q?fix:=20=EB=AA=A8=EC=9E=84=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=ED=8D=BC=EB=84=90=20>=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EC=8A=A4=ED=85=9D=EC=97=90=EC=84=9C=20scr?= =?UTF-8?q?oll=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx b/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx index fa756170..56a94cdd 100644 --- a/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx +++ b/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(); + useRemoveVerticalScroll(); + return (
From 52339eab985bdd1a317d1988a282b0ba0b2b378b Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Thu, 30 May 2024 19:10:21 +0900 Subject: [PATCH 10/15] =?UTF-8?q?feat:=20focus=EC=9D=BC=20=EB=95=8C=20scro?= =?UTF-8?q?ll=EC=9D=84=20=EC=A0=9C=EA=B1=B0=ED=95=98=EB=8A=94=20withScroll?= =?UTF-8?q?LockOnFocus=20hoc=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hocs/withScrollLockOnFocus.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/hocs/withScrollLockOnFocus.tsx diff --git a/src/hocs/withScrollLockOnFocus.tsx b/src/hocs/withScrollLockOnFocus.tsx new file mode 100644 index 00000000..034462b7 --- /dev/null +++ b/src/hocs/withScrollLockOnFocus.tsx @@ -0,0 +1,25 @@ +import { forwardRef, Ref, useState } from 'react'; + +import useRemoveVerticalScroll from '@/hooks/useRemoveVerticalScroll'; + +const withScrollLockOnFocus =

( + WrappedComponent: React.ComponentType

+) => { + const Component = (props: P, ref: Ref) => { + const [focus, setFocus] = useState(false); + useRemoveVerticalScroll({ enabled: focus }); + + return ( + setFocus(true)} + onBlur={() => setFocus(false)} + ref={ref} + /> + ); + }; + + return forwardRef(Component); +}; + +export default withScrollLockOnFocus; From d170245ccb822b2938122ab0fe06f9cfcd304505 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Thu, 30 May 2024 19:11:09 +0900 Subject: [PATCH 11/15] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=ED=8D=BC=EB=84=90=20>=20=EB=AA=A8=EC=9E=84=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=84=A4=EC=A0=95=20=EC=8A=A4=ED=85=9D?= =?UTF-8?q?=EC=97=90=20input,=20textarea=20focus=20=EC=8B=9C=20scroll=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - withScrollLockOnFoucs hoc 적용 --- .../create/steps/SetUpDetailStep/SetUpDetailStep.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx b/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx index 989c9556..5cd1405a 100644 --- a/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx +++ b/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 (

- { const { register, @@ -142,7 +147,7 @@ const IntroduceField = ({ name }: SetUpDetailFieldProps) => { return (

활동 내용

- +
); }; From f0bdc7938947ae3cdd4a41a15b4a917401ec1bd9 Mon Sep 17 00:00:00 2001 From: gxxrxn Date: Thu, 30 May 2024 21:51:48 +0900 Subject: [PATCH 12/15] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9E=84=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=ED=8D=BC=EB=84=90=20>=20=EA=B0=80=EC=9E=85=20?= =?UTF-8?q?=EC=9C=A0=ED=98=95=20=EC=8A=A4=ED=85=9D=20input=20focus?= =?UTF-8?q?=EC=8B=9C=20scroll=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SelectJoinTypeStep/fields/JoinPasswordFieldset.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/v1/bookGroup/create/steps/SelectJoinTypeStep/fields/JoinPasswordFieldset.tsx b/src/v1/bookGroup/create/steps/SelectJoinTypeStep/fields/JoinPasswordFieldset.tsx index 3cefe1a3..9fb7c409 100644 --- a/src/v1/bookGroup/create/steps/SelectJoinTypeStep/fields/JoinPasswordFieldset.tsx +++ b/src/v1/bookGroup/create/steps/SelectJoinTypeStep/fields/JoinPasswordFieldset.tsx @@ -10,6 +10,7 @@ import type { import ErrorMessage from '@/v1/base/ErrorMessage'; import Input from '@/v1/base/Input'; import InputLength from '@/v1/base/InputLength'; +import withScrollLockOnFocus from '@/hocs/withScrollLockOnFocus'; type JoinPasswordFieldsetProps = { joinTypeFieldName: JoinTypeStepFieldName; @@ -33,6 +34,8 @@ const JoinPasswordFieldset = ({ ); }; +const ScrollLockInput = withScrollLockOnFocus(Input); + const JoinQuestionField = ({ name }: JoinTypeStepFieldProp) => { const { register, @@ -48,7 +51,7 @@ const JoinQuestionField = ({ name }: JoinTypeStepFieldProp) => { return (