diff --git a/apps/what-today/src/components/experiences/PriceInput.tsx b/apps/what-today/src/components/experiences/PriceInput.tsx index bcef9e2c..0d6c250f 100644 --- a/apps/what-today/src/components/experiences/PriceInput.tsx +++ b/apps/what-today/src/components/experiences/PriceInput.tsx @@ -1,14 +1,59 @@ import { Input } from '@what-today/design-system'; -import { memo } from 'react'; +import { type ChangeEvent, memo, useEffect, useState } from 'react'; import type InputProps from '@/types/InputProps'; -function PriceInput({ error, ...props }: InputProps) { +export interface PriceInputProps extends InputProps { + value: number; + onChange: (value: number) => void; +} + +function PriceInput({ value, onChange, error }: PriceInputProps) { + const formatNumber = (num: number | string) => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); + const unformatNumber = (str: string) => str.replaceAll(',', ''); + + const [display, setDisplay] = useState(''); + + useEffect(() => { + if (typeof value === 'number' && !isNaN(value)) { + setDisplay(formatNumber(value)); + } else { + setDisplay(''); + } + }, [value]); + + const handleChange = (e: ChangeEvent) => { + const raw = unformatNumber(e.target.value); + const numeric = Number(raw); + + if (!isNaN(numeric)) { + setDisplay(formatNumber(numeric)); + onChange(numeric); // 외부에는 숫자로 전달 + } else { + setDisplay(''); + onChange(0); + } + }; + + const handleBlur = () => { + const numeric = Number(unformatNumber(display)); + if (!isNaN(numeric)) { + setDisplay(formatNumber(numeric)); + } + }; + return ( 가격 - + diff --git a/apps/what-today/src/pages/experiences/index.tsx b/apps/what-today/src/pages/experiences/index.tsx index b4666342..359b290c 100644 --- a/apps/what-today/src/pages/experiences/index.tsx +++ b/apps/what-today/src/pages/experiences/index.tsx @@ -291,11 +291,12 @@ export default function CreateExperience() { - ( + + )} />