chore: 컨벤션 맞추기

TEAM-BEAT · Jul 6, 2024 · c6ef32d · c6ef32d
1 parent ed298df
commit c6ef32d
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 24 deletions.
diff --git a/src/components/commons/inputs/textAreas/TextArea.tsx b/src/components/commons/inputs/textAreas/TextArea.tsx
@@ -1,24 +1,28 @@
 import { ChangeEvent, TextareaHTMLAttributes, useState } from "react";
 import * as S from "./TextArea.style";
 
-export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextAreaPropsTypes extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   maxLength?: number;
   placeholder: string;
 }
 
-const TextArea = ({ maxLength, placeholder }: TextAreaProps) => {
+const TextArea = ({ maxLength, placeholder }: TextAreaPropsTypes) => {
+  const [inputValue, setInputValue] = useState("");
   const [inputCount, setInputCount] = useState(0);
-  const onInputHandler = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setInputCount(e.target.value.length);
+  const handleOnInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    setInputCount(value.length);
   };
   return (
     <S.TextAreaWrapper>
       <S.TextAreaInput
-        onChange={onInputHandler}
+        value={inputValue}
+        onChange={handleOnInput}
         maxLength={maxLength}
         placeholder={placeholder}
       ></S.TextAreaInput>
-      {maxLength && <S.TextCap>{`${inputCount} / ${maxLength}`}</S.TextCap>}
+      {maxLength && <S.TextCap>{`${inputCount}/${maxLength}`}</S.TextCap>}
     </S.TextAreaWrapper>
   );
 };

diff --git a/src/components/commons/inputs/textFields/TextField.stories.ts b/src/components/commons/inputs/textFields/TextField.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import TextField from "./TextField";
-import { phoneNumberFilter } from "../../../../utils/useInputFiter";
+import { numericFilter, phoneNumberFilter, priceFilter } from "../../../../utils/useInputFiter";
 
 const meta = {
   title: "TextField",
@@ -16,18 +16,30 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: { maxLength: 5 },
+export const DefaultCapOn: Story = {
+  args: { maxLength: 30 },
+};
+
+export const DefaultCapOff: Story = {
+  args: {},
 };
 
 export const Narrow: Story = {
   args: { narrow: true },
 };
 
-export const Unit: Story = {
-  args: { unit: "time" },
+export const Time: Story = {
+  args: { unit: "time", filter: numericFilter },
+};
+
+export const Ticket: Story = {
+  args: { unit: "ticket", filter: numericFilter },
+};
+
+export const Amount: Story = {
+  args: { unit: "amount", filter: priceFilter },
 };
 
 export const Phone: Story = {
-  args: { filter: phoneNumberFilter, placeholder: "전화번호를 입력하세요" },
+  args: { filter: phoneNumberFilter },
 };
diff --git a/src/components/commons/inputs/textFields/TextField.tsx b/src/components/commons/inputs/textFields/TextField.tsx
@@ -1,31 +1,31 @@
 import { ChangeEvent, InputHTMLAttributes, useState } from "react";
 import * as S from "./TextField.style";
 
-export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface TextFieldPropsTypes extends InputHTMLAttributes<HTMLInputElement> {
   maxLength?: number;
   placeholder: string;
   narrow?: false | true;
-  unit?: "time" | "ticket" | "amount"; // 단위 : "분", "매", "초"
+  unit?: "time" | "ticket" | "amount"; // 단위 : "분", "매", "원"
   filter?: (value: string) => string;
 }
 
-const TextField = ({ maxLength, placeholder, narrow, unit, filter }: TextFieldProps) => {
-  const label = unit === "time" ? "분" : unit === "ticket" ? "매" : "초";
+const TextField = ({ maxLength, placeholder, narrow, unit, filter }: TextFieldPropsTypes) => {
+  const label = unit === "time" ? "분" : unit === "ticket" ? "매" : "원";
   const [inputValue, setInputValue] = useState("");
   const [inputCount, setInputCount] = useState(0);
 
   // 값 입력될 떄
-  const onInputHandler = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleOnInput = (e: ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value;
     if (filter) {
       value = filter(value);
     }
     setInputValue(value);
-    setInputCount(e.target.value.length);
+    setInputCount(value.length);
   };
 
   // 값 지울 때
-  const clearInput = () => {
+  const handleClearInput = () => {
     setInputValue("");
     setInputCount(0);
   };
@@ -35,11 +35,11 @@ const TextField = ({ maxLength, placeholder, narrow, unit, filter }: TextFieldPr
       <S.TextFieldWrapper>
         <S.TextFieldInput
           value={inputValue}
-          onChange={onInputHandler}
+          onChange={handleOnInput}
           maxLength={maxLength}
           placeholder={placeholder}
         ></S.TextFieldInput>
-        {!narrow && !unit && inputValue && <S.TextClear onClick={clearInput} />}
+        {!narrow && !unit && inputValue && <S.TextClear onClick={handleClearInput} />}
         {unit && <S.TextUnit>{label}</S.TextUnit>}
       </S.TextFieldWrapper>
       {maxLength && <S.TextCap>{`${inputCount}/${maxLength}`}</S.TextCap>}

diff --git a/src/pages/test/TestPage.tsx b/src/pages/test/TestPage.tsx
@@ -1,13 +1,19 @@
 import TextArea from "@components/commons/inputs/textAreas/TextArea";
 import TextField from "@components/commons/inputs/textFields/TextField";
-import { numericFilter, phoneNumberFilter } from "@utils/useInputFiter";
+import { numericFilter, phoneNumberFilter, priceFilter } from "@utils/useInputFiter";
 
 const TestPage = () => {
   return (
-    <div>
+    <div style={{ display: "flex", flexDirection: "column", gap: "3rem", alignItems: "center" }}>
       <h1>Test Page</h1>
       <p>Test Page</p>
-      <TextField filter={numericFilter} unit={"time"} placeholder="관람 매수" />
+      <TextField unit={"time"} filter={numericFilter} placeholder="입력해주세요" />
+      <TextField unit={"ticket"} filter={numericFilter} placeholder="입력해주세요" />
+      <TextField unit={"amount"} filter={priceFilter} placeholder="입력해주세요" />
+      <TextField filter={phoneNumberFilter} placeholder="입력해주세요" />
+      <TextField maxLength={30} placeholder="입력해주세요" />
+      <TextArea maxLength={300} placeholder="입력해주세요" />
+      <TextArea placeholder="입력해주세요" />
     </div>
   );
 };

diff --git a/src/utils/useInputFiter.ts b/src/utils/useInputFiter.ts
@@ -12,3 +12,8 @@ export const phoneNumberFilter = (value: string) => {
   }
   return `${numericValue.slice(0, 3)}-${numericValue.slice(3, 7)}-${numericValue.slice(7)}`;
 };
+
+export const priceFilter = (value: string) => {
+  const numericValue = numericFilter(value);
+  return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+};