[Fix/#90] 배포시 발생하는 type 오류 수정

src/components/commons/input/textArea/TextArea.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
     layout: "centered",
   },
   argTypes: {},
-  args: { value: "", onClick: fn(), placeholder: "플레이스 홀더", onChangeValue: fn() },
+  args: { value: "", onClick: fn(), placeholder: "플레이스 홀더", onChange: fn() },
 } satisfies Meta<typeof TextArea>;
 
 export default meta;
@@ -19,7 +19,7 @@ type Story = StoryObj<TextAreaProps>;
 const Template: StoryFn<TextAreaProps> = (args) => {
   const [value, setValue] = useState(args.value);
 
-  return <TextArea {...args} value={value} onChangeValue={setValue} />;
+  return <TextArea {...args} value={value} onChange={(e) => setValue(e.target.value)} />;
 };
 
 export const CapOn: Story = Template.bind({});

src/components/commons/input/textField/TextField.stories.tsx

@@ -11,15 +11,15 @@ const meta = {
     layout: "centered",
   },
   argTypes: {},
-  args: { value: "", onClick: fn(), placeholder: "플레이스 홀더", onChangeValue: fn() },
+  args: { value: "", onClick: fn(), placeholder: "플레이스 홀더", onChange: fn() },
 } satisfies Meta<typeof TextField>;
 
 export default meta;
 type Story = StoryObj<TextFieldProps>;
 const Template: StoryFn<TextFieldProps> = (args) => {
   const [value, setValue] = useState(args.value);
 
-  return <TextField {...args} value={value} onChangeValue={setValue} />;
+  return <TextField {...args} value={value} onChange={(e) => setValue(e.target.value)} />;
 };
 
 export const DefaultCapOn: Story = Template.bind({});

src/pages/BankTest.tsx

@@ -1,10 +1,10 @@
 import BankBottomSheet from "@components/commons/bank/bottomSheet/BankBottomSheet";
-import styled from "styled-components";
-import { useEffect, useState } from "react";
 import InputAccountWrapper from "@components/commons/bank/InputAccountWrapper";
 import InputBank from "@components/commons/bank/InputBank";
-import { numericFilter } from "@utils/useInputFilter";
 import TextField from "@components/commons/input/textField/TextField";
+import { numericFilter } from "@utils/useInputFilter";
+import React, { useState } from "react";
+import styled from "styled-components";
 
 const BankTest = () => {
   const [bankOpen, setBankOpen] = useState(false);
@@ -18,8 +18,8 @@ const BankTest = () => {
     setBankInfo(value);
     handleBankOpen();
   };
-  const handleChangeInput = (value: string) => {
-    setAccountInfo(value);
+  const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setAccountInfo(e.target.value);
   };
 
   return (
@@ -30,7 +30,7 @@ const BankTest = () => {
         </InputBank>
         <TextField
           value={accountInfo}
-          onChangeValue={handleChangeInput}
+          onChange={handleChangeInput}
           filter={numericFilter}
           placeholder="입금 받으실 계좌번호를 (-)제외 숫자만 입력해주세요."
         />{" "}

src/pages/NonMbLookup/components/InputWrapper.tsx

@@ -1,18 +1,121 @@
-import React, { useState } from "react";
+// InputWrapper.tsx
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import * as S from "./InputWrapper.styled";
 
 import TextField from "@components/commons/input/textField/TextField";
+import { numericFilter, phoneNumberFilter } from "@utils/useInputFilter";
 
-const InputWrapper = () => {
-  const [nameInputValue, setNameInputValue] = useState("");
+interface InputProps {
+  btnOn: () => void;
+  btnOff: () => void;
+  inputActive: boolean;
+  dataStatus: (status: number) => void;
+}
 
-  const handleChangeNameInput = (value: string) => {
-    setNameInputValue(value);
+// 서버 붙일 때 지우기 (현재 서버 없어 200/404 상황 확인하기 위해 임시로 둠)
+const success = 200;
+const fail = 404;
+
+const InputWrapper = ({ btnOn, btnOff, inputActive, dataStatus }: InputProps) => {
+  const navigate = useNavigate();
+
+  const [nonMemberInfo, setNonMemberInfo] = useState({
+    name: "",
+    birth: "",
+    number: "",
+    password: "",
+    pwdStatus: false,
+  });
+
+  const { name, birth, number, password, pwdStatus } = nonMemberInfo;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name: fieldName, value } = e.target;
+
+    setNonMemberInfo((prevState) => ({
+      ...prevState,
+      [fieldName]: value,
+    }));
+  };
+
+  const handlePwd = () => {
+    setNonMemberInfo((prevState) => ({
+      ...prevState,
+      pwdStatus: !prevState.pwdStatus,
+    }));
+  };
+
+  const resetForm = () => {
+    setNonMemberInfo({
+      name: "",
+      birth: "",
+      number: "",
+      password: "",
+      pwdStatus: false,
+    });
   };
 
+  useEffect(() => {
+    if (name && birth.length === 6 && number.length === 13 && password.length === 4) {
+      btnOn();
+    } else {
+      btnOff();
+    }
+  }, [name, birth, number, password, inputActive]);
+
+  useEffect(() => {
+    if (inputActive) {
+      // API 붙일 때 이 부분 서버 통신 성공 경우
+      // API 붙일 때 여기서 서버 POST
+      if (success === 200) {
+        // API 붙일 경우 dataStatus(서버에서 온 상태);
+        dataStatus(200);
+
+        navigate("/lookup");
+        // 200일 경우 잘 오는지 확인하기 위한 console.log -> API 붙일 때 지우면 됨
+        console.log([name, birth, number, password]);
+        // 404 혹은 통신 실패 경우
+      } else {
+        resetForm();
+        // API 붙일 때는 들어온 에러 번호로 보내기
+        dataStatus(404);
+      }
+    }
+  }, [inputActive]);
+
   return (
     <S.InputWrapperLayout>
-      <TextField value={nameInputValue} onChangeValue={handleChangeNameInput} placeholder="이름" />
+      {/* maxLenght 있는 부분 InputField에서 글자수 보이게 / 안 보이게 조정 필요 */}
+      <TextField name="name" type="input" value={name} onChange={handleChange} placeholder="이름" />
+      <TextField
+        type="input"
+        name="birth"
+        value={birth}
+        onChange={handleChange}
+        placeholder="생년월일 앞 6자리"
+        filter={numericFilter}
+        maxLength={6}
+      />
+      <TextField
+        type="input"
+        name="number"
+        value={number}
+        onChange={handleChange}
+        placeholder="휴대폰 번호 '-' 없이 입력"
+        filter={phoneNumberFilter}
+        maxLength={13}
+      />
+      <TextField
+        type={pwdStatus ? "input" : "password"}
+        name="password"
+        value={password}
+        onChange={handleChange}
+        placeholder="비밀번호(숫자 4자리)"
+        filter={numericFilter}
+        maxLength={4}
+      />
+      {/* <S.EyeTest onClick={handlePwd}>버튼 임시 위치!!!!!!!</S.EyeTest> */}
     </S.InputWrapperLayout>
   );
 };