chore: 바퀴 수의 소수점 입력을 0.5단위로 제한

depromeet · Sep 6, 2024 · 6c92042 · 6c92042
1 parent ea5cc22
commit 6c92042
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 19 deletions.
diff --git a/components/molecules/text-field/form-text-field.tsx b/components/molecules/text-field/form-text-field.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import React, { ChangeEvent, forwardRef } from 'react';
+import React, { ChangeEvent, forwardRef, KeyboardEvent } from 'react';
 
 import { css, cx } from '@/styled-system/css';
-import { preventMinus } from '@/utils';
+import { preventCharacters } from '@/utils';
 
 import {
   absoluteStyles,
@@ -43,6 +43,7 @@ export const FormTextField = forwardRef<HTMLInputElement, FormTextFieldProps>(
       subText,
       placeholder,
       unit,
+      preventDecimal,
       className,
       maxLength,
       wrapperClassName,
@@ -66,6 +67,10 @@ export const FormTextField = forwardRef<HTMLInputElement, FormTextFieldProps>(
       } else void onChange(event);
     };
 
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      preventCharacters(event, ['-', preventDecimal ? '.' : '']);
+    };
+
     return (
       <TextFieldWrapper
         isRequired={isRequired}
@@ -82,7 +87,7 @@ export const FormTextField = forwardRef<HTMLInputElement, FormTextFieldProps>(
             maxLength={maxLength}
             onFocus={() => handlers.onChangeFocus(true)}
             onBlur={() => handlers.onChangeFocus(false)}
-            onKeyDown={inputType === 'number' ? preventMinus : undefined}
+            onKeyDown={inputType === 'number' ? handleKeyDown : undefined}
             onChange={handleInputChange}
             className={cx(
               css(

diff --git a/components/molecules/text-field/text-field.tsx b/components/molecules/text-field/text-field.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { ChangeEvent } from 'react';
+import { ChangeEvent, KeyboardEvent } from 'react';
 
 import { css, cx } from '@/styled-system/css';
-import { preventMinus } from '@/utils';
+import { preventCharacters } from '@/utils';
 
 import {
   absoluteStyles,
@@ -24,6 +24,7 @@ import { useTextField } from './use-text-field';
  * @param subText 추가 설명 텍스트
  * @param placeholder placeholder 값
  * @param unit 입력값 단위
+ * @param step 소수점 단위 제한
  * @param maxLength input의 최대길이
  * @param className input태그 추가 스타일
  * @param wrapperClassName text-field-wrapper 컴포넌트 추가 스타일 부여
@@ -39,6 +40,8 @@ export function TextField({
   subText,
   placeholder,
   unit,
+  step,
+  preventDecimal,
   maxLength,
   className,
   wrapperClassName,
@@ -52,11 +55,28 @@ export function TextField({
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     let newValue = event.target.value;
+    let numValue = parseFloat(event.target.value);
 
-    if (maxLength && newValue.length >= maxLength) {
-      newValue = newValue.slice(0, maxLength);
-      void onChange?.(newValue);
-    } else void onChange?.(newValue);
+    //소수점 단위가 제한되어 있을 때
+    if (step && numValue % step !== 0) {
+      numValue = Math.round(numValue * 2) / 2;
+      newValue = numValue.toString();
+    }
+
+    const lengthWithoutDecimal = newValue.replace('.', '').length;
+
+    //소수점도 고려한 maxLength 적용
+    if (maxLength && lengthWithoutDecimal >= maxLength) {
+      newValue = newValue.slice(
+        0,
+        maxLength + (newValue.includes('.') ? 2 : 0),
+      );
+    }
+    void onChange?.(newValue);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    preventCharacters(event, ['-', preventDecimal ? '.' : '']);
   };
 
   return (
@@ -78,7 +98,7 @@ export function TextField({
             onChange={handleInputChange}
             onFocus={() => handlers.onChangeFocus(true)}
             onBlur={() => handlers.onChangeFocus(false)}
-            onKeyDown={inputType === 'number' ? preventMinus : undefined}
+            onKeyDown={inputType === 'number' ? handleKeyDown : undefined}
             className={cx(
               css(
                 shouldEmphasize

diff --git a/components/molecules/text-field/type.ts b/components/molecules/text-field/type.ts
@@ -10,6 +10,8 @@ export interface TextFieldProps {
   placeholder?: string;
   unit?: string;
   maxLength?: number;
+  step?: number;
+  preventDecimal?: boolean;
   className?: string;
   wrapperClassName?: string;
   absoluteClassName?: string;

diff --git a/features/record/components/molecules/distance-field-with-badge.tsx b/features/record/components/molecules/distance-field-with-badge.tsx
@@ -47,6 +47,8 @@ export function DistanceFieldWithBadge({
       <TextField
         inputType="number"
         maxLength={isAssistiveTabIndexZero ? 5 : 3}
+        step={isAssistiveTabIndexZero ? undefined : 0.5}
+        preventDecimal={isAssistiveTabIndexZero}
         placeholder="0"
         value={value ? String(value) : ''}
         unit={unit}

diff --git a/features/record/components/organisms/distance-page-modal.tsx b/features/record/components/organisms/distance-page-modal.tsx
@@ -182,7 +182,9 @@ export function DistancePageModal({
                   ? '레인 길이에 따라 자동으로 거리를 계산해드릴게요'
                   : undefined
               }
-              maxLength={isAssistiveIndexOne ? 3 : 5}
+              maxLength={isAssistiveIndexZero ? 5 : 3}
+              step={isAssistiveIndexZero ? undefined : 0.5}
+              preventDecimal={isAssistiveIndexZero}
               value={isAssistiveIndexZero ? totalMeter : totalLaps}
               unit={isAssistiveIndexZero ? '미터(m)' : '바퀴'}
               wrapperClassName={css({ marginTop: '16px' })}

diff --git a/features/record/components/organisms/sub-info-text-fields.tsx b/features/record/components/organisms/sub-info-text-fields.tsx
@@ -19,6 +19,7 @@ export function SubInfoTextFields() {
             name: 'heartRate',
           }) as number
         }
+        preventDecimal
         maxLength={3}
         inputType="number"
         label="심박수"
@@ -34,6 +35,7 @@ export function SubInfoTextFields() {
               name: 'paceMinutes',
             }) as number
           }
+          preventDecimal
           maxLength={2}
           inputType="number"
           label="페이스"
@@ -48,6 +50,7 @@ export function SubInfoTextFields() {
               name: 'paceSeconds',
             }) as number
           }
+          preventDecimal
           maxLength={2}
           inputType="number"
           unit="/100m"
@@ -62,6 +65,7 @@ export function SubInfoTextFields() {
             name: 'kcal' as string,
           }) as number
         }
+        preventDecimal
         maxLength={4}
         inputType="number"
         label="칼로리"

diff --git a/utils/input/index.ts b/utils/input/index.ts
@@ -1 +1 @@
-export * from './prevent-minus';
+export * from './prevent-characters';
diff --git a/utils/input/prevent-characters.ts b/utils/input/prevent-characters.ts
@@ -0,0 +1,10 @@
+import { KeyboardEvent } from 'react';
+
+export const preventCharacters = (
+  event: KeyboardEvent<HTMLInputElement>,
+  blockedChars: string[],
+) => {
+  if (blockedChars.includes(event.key)) {
+    event.preventDefault();
+  }
+};
diff --git a/utils/input/prevent-minus.ts b/utils/input/prevent-minus.ts
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './prevent-minus';
		export * from './prevent-characters';