From fd879c33df402bdfaaa139a429c06e1cca709d01 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Fri, 29 Nov 2024 08:38:09 +0000
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20funnel=EC=9D=98=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EB=B0=A9=EC=8B=9D=EC=9D=84=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=9E=90=EC=97=B0=EC=8A=A4=EB=9F=BD?=
 =?UTF-8?q?=EA=B2=8C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/hooks/useFunnel.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/hooks/useFunnel.tsx b/app/hooks/useFunnel.tsx
index 6e7e4c4c..7b0b4a2e 100644
--- a/app/hooks/useFunnel.tsx
+++ b/app/hooks/useFunnel.tsx
@@ -15,7 +15,9 @@ export default function useFunnel<Steps extends string>(
 
   const stepQueryKey = options?.stepQueryKey ?? DEFAULT_STEP_QUERY_KEY;
 
-  const step = searchParams.get(stepQueryKey) as Steps | undefined;
+  const stepQueryValue = searchParams.get(stepQueryKey) as Steps | null;
+
+  const step = (stepQueryValue ?? defaultStep) as Steps;
 
   const createUrl = useCallback(
     (step: Steps) => {
@@ -36,10 +38,10 @@ export default function useFunnel<Steps extends string>(
   );
 
   useEffect(() => {
-    if (!step) {
+    if (!stepQueryValue) {
       router.replace(createUrl(defaultStep));
     }
-  }, [defaultStep, step, setStep]);
+  }, [defaultStep, stepQueryValue, setStep]);
 
   const Step = ({ name, children }: React.PropsWithChildren<{ name: Steps }>) => {
     return <>{children}</>;

From 25cb5144659a04540fa96e89d100dbf6fba016ea Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Fri, 29 Nov 2024 09:12:04 +0000
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20form=20input=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20autoFocus=20=EC=86=8D=EC=84=B1=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

---
 app/ui/view/molecule/form/form-number-input.tsx   | 11 ++++-------
 app/ui/view/molecule/form/form-password-input.tsx | 11 ++++-------
 app/ui/view/molecule/form/form-root.tsx           |  9 +++++++++
 app/ui/view/molecule/form/form-select.tsx         | 10 ++++------
 app/ui/view/molecule/form/form-text-input.tsx     | 10 ++++------
 5 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/app/ui/view/molecule/form/form-number-input.tsx b/app/ui/view/molecule/form/form-number-input.tsx
index 2624a85f..ac463324 100644
--- a/app/ui/view/molecule/form/form-number-input.tsx
+++ b/app/ui/view/molecule/form/form-number-input.tsx
@@ -1,16 +1,12 @@
 import TextInput from '../../atom/text-input/text-input';
+import { FormInputProps } from './form-root';
 import { FormContext } from './form.context';
 import { useContext } from 'react';
 import { useFormStatus } from 'react-dom';
 
-interface FormNumberInputProps {
-  label: string;
-  id: string;
-  placeholder: string;
-  required?: boolean;
-}
+interface FormNumberInputProps extends FormInputProps {}
 
-export function FormNumberInput({ label, id, placeholder, required = false }: FormNumberInputProps) {
+export function FormNumberInput({ label, id, placeholder, autoFocus, required = false }: FormNumberInputProps) {
   const { errors } = useContext(FormContext);
   const { pending } = useFormStatus();
 
@@ -23,6 +19,7 @@ export function FormNumberInput({ label, id, placeholder, required = false }: Fo
         {label}
       </label>
       <TextInput
+        autoFocus={autoFocus}
         required={required}
         disabled={pending}
         error={errors[id] ? true : false}
diff --git a/app/ui/view/molecule/form/form-password-input.tsx b/app/ui/view/molecule/form/form-password-input.tsx
index 3019dcac..0d3330de 100644
--- a/app/ui/view/molecule/form/form-password-input.tsx
+++ b/app/ui/view/molecule/form/form-password-input.tsx
@@ -1,16 +1,12 @@
 import TextInput from '../../atom/text-input/text-input';
+import { FormInputProps } from './form-root';
 import { FormContext } from './form.context';
 import { useContext } from 'react';
 import { useFormStatus } from 'react-dom';
 
-interface FormPasswordInputProps {
-  label: string;
-  id: string;
-  placeholder: string;
-  required?: boolean;
-}
+interface FormPasswordInputProps extends FormInputProps {}
 
-export function FormPasswordInput({ label, id, placeholder, required = false }: FormPasswordInputProps) {
+export function FormPasswordInput({ label, id, placeholder, autoFocus, required = false }: FormPasswordInputProps) {
   const { errors } = useContext(FormContext);
   const { pending } = useFormStatus();
 
@@ -23,6 +19,7 @@ export function FormPasswordInput({ label, id, placeholder, required = false }:
         {label}
       </label>
       <TextInput
+        autoFocus={autoFocus}
         required={required}
         disabled={pending}
         error={errors[id] ? true : false}
diff --git a/app/ui/view/molecule/form/form-root.tsx b/app/ui/view/molecule/form/form-root.tsx
index ed53442a..aeb19f11 100644
--- a/app/ui/view/molecule/form/form-root.tsx
+++ b/app/ui/view/molecule/form/form-root.tsx
@@ -7,6 +7,14 @@ import { filterChildrenByType } from '@/app/utils/component.util';
 import AlertDestructive from '../alert-destructive/alert-destructive';
 import { useToast } from '../toast/use-toast';
 
+export interface FormInputProps {
+  label: string;
+  id: string;
+  placeholder: string;
+  required?: boolean;
+  autoFocus?: boolean;
+}
+
 export interface FormState {
   isSuccess: boolean;
   isFailure: boolean;
@@ -57,6 +65,7 @@ export function FormRoot({
     return React.Children.map(children, (child, index) => {
       if (!React.isValidElement(child) || child.type === FormSubmitButton) return null;
       if (child.type === FormSubmitButton) return child;
+
       return <div key={index}>{child}</div>;
     });
   };
diff --git a/app/ui/view/molecule/form/form-select.tsx b/app/ui/view/molecule/form/form-select.tsx
index 42d27ac4..a2af7141 100644
--- a/app/ui/view/molecule/form/form-select.tsx
+++ b/app/ui/view/molecule/form/form-select.tsx
@@ -1,17 +1,14 @@
 import Select from '../select';
+import { FormInputProps } from './form-root';
 import { FormContext } from './form.context';
 import { useContext } from 'react';
 import { useFormStatus } from 'react-dom';
 
-interface FormSelectProps {
-  label: string;
-  id: string;
+interface FormSelectProps extends FormInputProps {
   options: { value: string; placeholder: string }[];
-  placeholder: string;
-  required?: boolean;
 }
 
-export const FormSelect = ({ label, id, options, placeholder, required = true }: FormSelectProps) => {
+export const FormSelect = ({ label, id, options, placeholder, autoFocus, required = true }: FormSelectProps) => {
   const { errors } = useContext(FormContext);
   const { pending } = useFormStatus();
 
@@ -24,6 +21,7 @@ export const FormSelect = ({ label, id, options, placeholder, required = true }:
         {label}
       </label>
       <Select
+        autoFocus={autoFocus}
         required={required}
         disabled={pending}
         error={errors[id] ? true : false}
diff --git a/app/ui/view/molecule/form/form-text-input.tsx b/app/ui/view/molecule/form/form-text-input.tsx
index 05ec225c..27a1c5a4 100644
--- a/app/ui/view/molecule/form/form-text-input.tsx
+++ b/app/ui/view/molecule/form/form-text-input.tsx
@@ -1,17 +1,14 @@
 import TextInput from '../../atom/text-input/text-input';
+import { FormInputProps } from './form-root';
 import { FormContext } from './form.context';
 import { useContext } from 'react';
 import { useFormStatus } from 'react-dom';
 
-interface FormTextInputProps {
-  label: string;
-  id: string;
-  placeholder: string;
-  required?: boolean;
+interface FormTextInputProps extends FormInputProps {
   value?: string;
 }
 
-export function FormTextInput({ label, id, value, placeholder, required = false }: FormTextInputProps) {
+export function FormTextInput({ label, id, value, placeholder, autoFocus, required = false }: FormTextInputProps) {
   const { errors } = useContext(FormContext);
   const { pending } = useFormStatus();
 
@@ -24,6 +21,7 @@ export function FormTextInput({ label, id, value, placeholder, required = false
         {label}
       </label>
       <TextInput
+        autoFocus={autoFocus}
         required={required}
         disabled={pending}
         error={errors[id] ? true : false}

From a148e65641d0755a50b0c04fd7d9a7ae0a334f2f Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Fri, 29 Nov 2024 09:13:01 +0000
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EB=94=94=20?=
 =?UTF-8?q?=EC=B0=BE=EA=B8=B0=20=EC=8B=9C=20autofocus=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/ui/user/find-id-form/find-id-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/user/find-id-form/find-id-form.tsx b/app/ui/user/find-id-form/find-id-form.tsx
index e40c5b44..0e761772 100644
--- a/app/ui/user/find-id-form/find-id-form.tsx
+++ b/app/ui/user/find-id-form/find-id-form.tsx
@@ -10,7 +10,7 @@ interface SignUpFormProps {
 function FindIdForm({ onNext }: SignUpFormProps) {
   return (
     <Form onSuccess={onNext} id="아이디찾기" action={findUserToStudentNumber}>
-      <Form.TextInput required={true} label="학번" id="studentNumber" placeholder="ex ) 60xxxxxx" />
+      <Form.TextInput autoFocus={true} required={true} label="학번" id="studentNumber" placeholder="ex ) 60xxxxxx" />
       <div className="py-6">
         <Form.SubmitButton label="아이디찾기" position="center" variant="primary" />
       </div>

From 76cf204e8e419ff08c863481a5618bd69890f0c5 Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Fri, 29 Nov 2024 09:13:42 +0000
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20autofocus=EA=B0=80=20=EB=91=90?=
 =?UTF-8?q?=EB=B2=88=20=EA=B9=9C=EB=B9=A1=EC=9D=B4=EB=8A=94=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

url 변경 시 컴포넌트가 리렌더링 되는 에러 수정
---
 app/hooks/useFunnel.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/hooks/useFunnel.tsx b/app/hooks/useFunnel.tsx
index 7b0b4a2e..fbd88a46 100644
--- a/app/hooks/useFunnel.tsx
+++ b/app/hooks/useFunnel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 const DEFAULT_STEP_QUERY_KEY = 'funnel-step';
@@ -43,19 +43,22 @@ export default function useFunnel<Steps extends string>(
     }
   }, [defaultStep, stepQueryValue, setStep]);
 
-  const Step = ({ name, children }: React.PropsWithChildren<{ name: Steps }>) => {
+  const Step = useCallback(({ name, children }: React.PropsWithChildren<{ name: Steps }>) => {
     return <>{children}</>;
-  };
+  }, []);
 
-  const FunnelRoot = ({ children }: React.PropsWithChildren) => {
-    const targetStep = React.Children.toArray(children).find((childStep) => {
-      return React.isValidElement(childStep) && childStep.props.name === step;
-    });
+  const FunnelRoot = useCallback(
+    ({ children }: React.PropsWithChildren) => {
+      const targetStep = React.Children.toArray(children).find((childStep) => {
+        return React.isValidElement(childStep) && childStep.props.name === step;
+      });
 
-    return <>{targetStep}</>;
-  };
+      return <>{targetStep}</>;
+    },
+    [step],
+  );
 
-  const Funnel = Object.assign(FunnelRoot, { Step });
+  const Funnel = useMemo(() => Object.assign(FunnelRoot, { Step }), [FunnelRoot, Step]);
 
   return { Funnel, setStep };
 }

From 8fa832518fc2eab428a6246e2c57215d80dda67b Mon Sep 17 00:00:00 2001
From: SeonghunYang <didtjdgns852@naver.com>
Date: Fri, 29 Nov 2024 09:15:49 +0000
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20form=EC=97=90=20autofocus=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/ui/user/find-password-from/find-password-form.tsx     | 1 +
 .../find-password-from/find-password-validate-form.tsx    | 8 +++++++-
 app/ui/user/sign-in-form/sign-in-form.tsx                 | 2 +-
 app/ui/user/sign-up-form/sign-up-form.tsx                 | 2 +-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/ui/user/find-password-from/find-password-form.tsx b/app/ui/user/find-password-from/find-password-form.tsx
index 41ae6c82..fe5379d6 100644
--- a/app/ui/user/find-password-from/find-password-form.tsx
+++ b/app/ui/user/find-password-from/find-password-form.tsx
@@ -21,6 +21,7 @@ function FindPasswordForm({ authId }: FindPasswordFormProps) {
   return (
     <Form id="비밀번호 재설정" action={resetPassword} onSuccess={onSuccess} className="flex flex-col gap-4">
       <Form.PasswordInput
+        autoFocus={true}
         required={true}
         label="비밀번호"
         id="newPassword"
diff --git a/app/ui/user/find-password-from/find-password-validate-form.tsx b/app/ui/user/find-password-from/find-password-validate-form.tsx
index 4d2c45fe..ebed7be1 100644
--- a/app/ui/user/find-password-from/find-password-validate-form.tsx
+++ b/app/ui/user/find-password-from/find-password-validate-form.tsx
@@ -8,7 +8,13 @@ interface FindPasswordValidateFormProps {
 function FindPasswordValidateForm({ onNext }: FindPasswordValidateFormProps) {
   return (
     <Form id="가입자 검증" onSuccess={onNext} action={validateUser} className="flex flex-col gap-4">
-      <Form.TextInput required={true} label="아이디" id="authId" placeholder="아이디를 입력해주세요." />
+      <Form.TextInput
+        autoFocus={true}
+        required={true}
+        label="아이디"
+        id="authId"
+        placeholder="아이디를 입력해주세요."
+      />
       <Form.TextInput required={true} label="학번" id="studentNumber" placeholder="ex ) 60xxxxxx" />
       <div className="py-6">
         <Form.SubmitButton label="검사하기" position="center" variant="primary" />
diff --git a/app/ui/user/sign-in-form/sign-in-form.tsx b/app/ui/user/sign-in-form/sign-in-form.tsx
index d2594ecf..3a4d9d21 100644
--- a/app/ui/user/sign-in-form/sign-in-form.tsx
+++ b/app/ui/user/sign-in-form/sign-in-form.tsx
@@ -11,7 +11,7 @@ export default function SignInForm({ onSuccess }: SignInForm) {
   return (
     <>
       <Form id="로그인" className="space-y-6" action={authenticate} onSuccess={onSuccess}>
-        <Form.TextInput required={true} label="아이디" id="authId" placeholder="아이디를 입력하세요" />
+        <Form.TextInput autoFocus={true} required={true} label="아이디" id="authId" placeholder="아이디를 입력하세요" />
         <Form.PasswordInput required={true} label="비밀번호" id="password" placeholder="비밀번호를 입력하세요" />
         <div className="pt-6">
           <Form.SubmitButton label="로그인" position="center" variant="primary" />
diff --git a/app/ui/user/sign-up-form/sign-up-form.tsx b/app/ui/user/sign-up-form/sign-up-form.tsx
index 7d66b909..981b291f 100644
--- a/app/ui/user/sign-up-form/sign-up-form.tsx
+++ b/app/ui/user/sign-up-form/sign-up-form.tsx
@@ -9,7 +9,7 @@ interface SignUpFormProps {
 export default function SignUpForm({ onSuccess }: SignUpFormProps) {
   return (
     <Form className="space-y-6" onSuccess={onSuccess} action={createUser} id="회원가입">
-      <Form.TextInput required={true} label="아이디" id="authId" placeholder="6자 이상 20자 이하" />
+      <Form.TextInput autoFocus={true} required={true} label="아이디" id="authId" placeholder="6자 이상 20자 이하" />
       <Form.PasswordInput
         required={true}
         label="비밀번호"