포커스 처리

f-lab-edu · Dec 6, 2024 · fda3908 · fda3908
1 parent 25cc486
commit fda3908
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git a/src/components/input/CardNumberInput.tsx b/src/components/input/CardNumberInput.tsx
@@ -6,7 +6,6 @@ import React from 'react';
 const CardNumberInput = ({
   onChange,
   onFull,
-  ...props
 }: Omit<ComponentProps<'input'>, 'onChange'> & {
   onFull?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onChange?: (v: string) => void;
@@ -48,6 +47,7 @@ const CardNumberInput = ({
       />
       -
       <Input
+        type="password"
         maxLength={4}
         onFull={handleFull}
         className="text-center"
@@ -57,13 +57,13 @@ const CardNumberInput = ({
       />
       -
       <Input
+        type="password"
         maxLength={4}
         onFull={onFull}
         className="text-center"
         name="input4"
         value={value.input4}
         onChange={handleChange}
-        onBlur={props.onBlur}
       />
     </InputBox>
   );

diff --git a/src/components/input/ExpireDateInput.tsx b/src/components/input/ExpireDateInput.tsx
@@ -37,7 +37,7 @@ const ExpireDateInput = ({
       /
       <Input
         maxLength={2}
-        onFull={handleFull}
+        onFull={onFull}
         name="input2"
         className="text-center"
         onChange={handleChange}

diff --git a/src/components/input/util/InputUtil.tsx b/src/components/input/util/InputUtil.tsx
@@ -4,3 +4,22 @@ export const handleFull: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     $nextEl.focus();
   }
 };
+
+export const focusNextInput: React.ChangeEventHandler<HTMLInputElement> = (
+  e
+) => {
+  console.log('focusNextInput');
+  const inputs = Array.from(document.querySelectorAll('input'));
+
+  // 현재 이벤트가 발생한 요소
+  const currentInput = e.target as HTMLInputElement;
+
+  // 현재 input 요소의 인덱스 찾기
+  const currentIndex = inputs.indexOf(currentInput);
+
+  // 다음 input 요소에 포커스
+  if (currentIndex !== -1 && currentIndex < inputs.length - 1) {
+    const nextInput = inputs[currentIndex + 1];
+    nextInput.focus();
+  }
+};
diff --git a/src/pages/CreateCard.tsx b/src/pages/CreateCard.tsx
@@ -10,8 +10,7 @@ import InputBox from '../components/input/InputBox.tsx';
 import ExpireDateInput from '../components/input/ExpireDateInput.tsx';
 import PasswordInput from '../components/input/PasswordInput.tsx';
 import CvcInput from '../components/input/CvcInput.tsx';
-
-const INPUT_STYLE = 'bg-gray-200 p-3 rounded-md text-mint font-bold';
+import { focusNextInput } from '../components/input/util/InputUtil.tsx';
 
 const CreateCard = () => {
   const historyBack = useModalHistoryBack();
@@ -46,16 +45,24 @@ const CreateCard = () => {
           </button>
         </header>
         <section className="flex flex-col gap-4 mt-5">
-          <div className="w-fit m-auto">
-            <Card data={cardData} onClick={() => setDrawerOpen(true)} />
-          </div>
+          <TitleBox title="카드 선택">
+            <div className="w-fit m-auto" onClick={() => setDrawerOpen(true)}>
+              <Card data={cardData} />
+            </div>
+          </TitleBox>
 
           <TitleBox title="카드번호">
-            <CardNumberInput onChange={(v) => cardNumberHandler(v)} />
+            <CardNumberInput
+              onChange={(v) => cardNumberHandler(v)}
+              onFull={focusNextInput}
+            />
           </TitleBox>
 
           <TitleBox title="유효기간">
-            <ExpireDateInput onChange={(v) => expiredDateHandler(v)} />
+            <ExpireDateInput
+              onChange={(v) => expiredDateHandler(v)}
+              onFull={focusNextInput}
+            />
           </TitleBox>
 
           <TitleBox title="카드소유자">