From 668a27ff8e950d8cb312207e15c65e1a08e77001 Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Mon, 4 Aug 2025 15:19:34 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20[#241]=20Fix:=20=EA=B0=80?=
 =?UTF-8?q?=EA=B2=A9=20Input=EC=97=90=20=EB=AC=B8=EC=9E=90=EA=B0=80=20?=
 =?UTF-8?q?=EC=A0=81=ED=9E=88=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0=20&=20=EC=B2=9C=20=EB=8B=A8=EC=9C=84=EB=A1=9C=20?=
 =?UTF-8?q?=EC=89=BC=ED=91=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/experiences/PriceInput.tsx | 51 +++++++++++++++++--
 .../src/pages/experiences/index.tsx           | 11 ++--
 2 files changed, 54 insertions(+), 8 deletions(-)

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<HTMLInputElement>) => {
+    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 (
     <Input.Root className='w-full' error={error}>
       <Input.Label>가격</Input.Label>
       <Input.Wrapper>
-        <Input.Field min={0} {...props} placeholder='가격을 입력해주세요' type='number' />
+        <Input.Field
+          inputMode='numeric'
+          placeholder='가격을 입력해주세요'
+          type='text'
+          value={display}
+          onBlur={handleBlur}
+          onChange={handleChange}
+        />
       </Input.Wrapper>
       <Input.ErrorMessage />
     </Input.Root>
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() {
 
         <DescriptionTextarea {...register('description')} error={errors.description?.message} />
 
-        <PriceInput
-          {...register('price', {
-            valueAsNumber: true,
-          })}
-          error={errors.price?.message}
+        <Controller
+          control={control}
+          name='price'
+          render={({ field }) => (
+            <PriceInput error={errors.price?.message} value={field.value} onChange={field.onChange} />
+          )}
         />
 
         <Controller