From 1b800a815a8a80ec11a070d910bbd599395105ea Mon Sep 17 00:00:00 2001 From: brian <90752841+wokbjso@users.noreply.github.com> Date: Wed, 4 Sep 2024 23:02:58 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=88=98=EC=98=81=20=EA=B1=B0?= =?UTF-8?q?=EB=A6=AC=20=EA=B8=B0=EB=A1=9D=EC=97=90=EC=84=9C=20=EB=B0=94?= =?UTF-8?q?=ED=80=B4=20=EA=B8=B0=EB=A1=9D=20=EC=8B=9C,=200.5=20=EB=8B=A8?= =?UTF-8?q?=EC=9C=84=EB=A7=8C=20=EC=9E=85=EB=A0=A5=EB=90=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecules/text-field/form-text-field.tsx | 2 ++ .../molecules/text-field/text-field.tsx | 23 +++++++++++++++---- components/molecules/text-field/type.ts | 1 + .../organisms/distance-page-modal.tsx | 1 + 4 files changed, 23 insertions(+), 4 deletions(-) diff --git a/components/molecules/text-field/form-text-field.tsx b/components/molecules/text-field/form-text-field.tsx index 823ed33d..64dc4fc4 100644 --- a/components/molecules/text-field/form-text-field.tsx +++ b/components/molecules/text-field/form-text-field.tsx @@ -24,6 +24,7 @@ import { useFormTextField } from './use-form-text-field'; * @param placeholder placeholder 값 * @param unit 입력값 단위 * @param maxLength input의 최대길이 + * @param step 단위 제한 * @param registerName input 요소를 구독할 때 사용할 name * @param className input 태그 추가 스타일 * @param wrapperClassName text-field-wrapper 컴포넌트 추가 스타일 부여 @@ -60,6 +61,7 @@ export const FormTextField = forwardRef( const shouldEmphasize = isWritten || focused; const handleInputChange = (event: ChangeEvent) => { + //최대 길이 제한 if (maxLength && event.target.value.length >= maxLength) { event.target.value = event.target.value.slice(0, maxLength); void onChange(event); diff --git a/components/molecules/text-field/text-field.tsx b/components/molecules/text-field/text-field.tsx index 17fa33e3..9c485701 100644 --- a/components/molecules/text-field/text-field.tsx +++ b/components/molecules/text-field/text-field.tsx @@ -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,7 @@ export function TextField({ subText, placeholder, unit, + step, maxLength, className, wrapperClassName, @@ -52,11 +54,24 @@ export function TextField({ const handleInputChange = (event: ChangeEvent) => { 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); }; return ( diff --git a/components/molecules/text-field/type.ts b/components/molecules/text-field/type.ts index f8bcde02..0fc76179 100644 --- a/components/molecules/text-field/type.ts +++ b/components/molecules/text-field/type.ts @@ -10,6 +10,7 @@ export interface TextFieldProps { placeholder?: string; unit?: string; maxLength?: number; + step?: number; className?: string; wrapperClassName?: string; absoluteClassName?: string; diff --git a/features/record/components/organisms/distance-page-modal.tsx b/features/record/components/organisms/distance-page-modal.tsx index 8b0ed793..6154758a 100644 --- a/features/record/components/organisms/distance-page-modal.tsx +++ b/features/record/components/organisms/distance-page-modal.tsx @@ -183,6 +183,7 @@ export function DistancePageModal({ : undefined } maxLength={isAssistiveIndexOne ? 3 : 5} + step={isAssistiveIndexOne ? 0.5 : undefined} value={isAssistiveIndexZero ? totalMeter : totalLaps} unit={isAssistiveIndexZero ? '미터(m)' : '바퀴'} wrapperClassName={css({ marginTop: '16px' })} From d153ad79ebf4c0cb42163c76651a960367fd74eb Mon Sep 17 00:00:00 2001 From: brian <90752841+wokbjso@users.noreply.github.com> Date: Thu, 5 Sep 2024 00:41:20 +0900 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=EC=B9=BC=EB=A1=9C=EB=A6=AC=20&=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20&=20=EC=8B=AC=EB=B0=95=EC=88=98?= =?UTF-8?q?=EC=97=90=20=EC=86=8C=EC=88=98=EC=A0=90=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/molecules/page-modal/page-modal.css | 6 +++--- components/molecules/text-field/form-text-field.tsx | 13 ++++++++----- components/molecules/text-field/text-field.tsx | 11 ++++++++--- components/molecules/text-field/type.ts | 1 + .../molecules/distance-field-with-badge.tsx | 2 ++ .../components/organisms/distance-page-modal.tsx | 5 +++-- .../components/organisms/sub-info-text-fields.tsx | 4 ++++ utils/input/index.ts | 2 +- utils/input/prevent-characters.ts | 10 ++++++++++ utils/input/prevent-minus.ts | 7 ------- 10 files changed, 40 insertions(+), 21 deletions(-) create mode 100644 utils/input/prevent-characters.ts delete mode 100644 utils/input/prevent-minus.ts diff --git a/components/molecules/page-modal/page-modal.css b/components/molecules/page-modal/page-modal.css index 0a30b0a0..1101aa48 100644 --- a/components/molecules/page-modal/page-modal.css +++ b/components/molecules/page-modal/page-modal.css @@ -1,10 +1,10 @@ .page-jump-forward-enter { - transform: translateX(100%); + left: 100%; } .page-jump-forward-enter-active { - transform: translateX(0); - transition: transform 300ms ease-in-out; + left: 0; + transition: left 300ms ease-in-out; } .page-jump-backward-exit { diff --git a/components/molecules/text-field/form-text-field.tsx b/components/molecules/text-field/form-text-field.tsx index 64dc4fc4..1a117158 100644 --- 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, @@ -24,7 +24,6 @@ import { useFormTextField } from './use-form-text-field'; * @param placeholder placeholder 값 * @param unit 입력값 단위 * @param maxLength input의 최대길이 - * @param step 단위 제한 * @param registerName input 요소를 구독할 때 사용할 name * @param className input 태그 추가 스타일 * @param wrapperClassName text-field-wrapper 컴포넌트 추가 스타일 부여 @@ -44,6 +43,7 @@ export const FormTextField = forwardRef( subText, placeholder, unit, + preventDecimal, className, maxLength, wrapperClassName, @@ -61,13 +61,16 @@ export const FormTextField = forwardRef( const shouldEmphasize = isWritten || focused; const handleInputChange = (event: ChangeEvent) => { - //최대 길이 제한 if (maxLength && event.target.value.length >= maxLength) { event.target.value = event.target.value.slice(0, maxLength); void onChange(event); } else void onChange(event); }; + const handleKeyDown = (event: KeyboardEvent) => { + preventCharacters(event, ['-', preventDecimal ? '.' : '']); + }; + return ( ( 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 index 9c485701..b91f392b 100644 --- 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, @@ -41,6 +41,7 @@ export function TextField({ placeholder, unit, step, + preventDecimal, maxLength, className, wrapperClassName, @@ -74,6 +75,10 @@ export function TextField({ void onChange?.(newValue); }; + const handleKeyDown = (event: KeyboardEvent) => { + preventCharacters(event, ['-', preventDecimal ? '.' : '']); + }; + return ( 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 index 0fc76179..2427b745 100644 --- a/components/molecules/text-field/type.ts +++ b/components/molecules/text-field/type.ts @@ -11,6 +11,7 @@ export interface TextFieldProps { 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 index acad1717..9302d07e 100644 --- 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({ , + blockedChars: string[], +) => { + if (blockedChars.includes(event.key)) { + event.preventDefault(); + } +}; diff --git a/utils/input/prevent-minus.ts b/utils/input/prevent-minus.ts deleted file mode 100644 index 812260b1..00000000 --- a/utils/input/prevent-minus.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { KeyboardEvent } from 'react'; - -export const preventMinus = (event: KeyboardEvent) => { - if (event.key === '-') { - event.preventDefault(); - } -}; From 6620e3f06b55d5fcff8a4d2430bcaf0d8e881ab3 Mon Sep 17 00:00:00 2001 From: brian <90752841+wokbjso@users.noreply.github.com> Date: Fri, 6 Sep 2024 14:17:40 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=96=88=EB=8D=98=20=EC=BD=94=EB=93=9C=20=EC=9B=90=EB=B3=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/molecules/page-modal/page-modal.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/molecules/page-modal/page-modal.css b/components/molecules/page-modal/page-modal.css index 1101aa48..0a30b0a0 100644 --- a/components/molecules/page-modal/page-modal.css +++ b/components/molecules/page-modal/page-modal.css @@ -1,10 +1,10 @@ .page-jump-forward-enter { - left: 100%; + transform: translateX(100%); } .page-jump-forward-enter-active { - left: 0; - transition: left 300ms ease-in-out; + transform: translateX(0); + transition: transform 300ms ease-in-out; } .page-jump-backward-exit {