feat: 입력창 숫자 포맷팅, padding값 조정

Author: 이정원

src/common/components/TagOptionBtn/style.css.ts

@@ -66,7 +66,7 @@ export const rightIcon = cva({
     width: '1.52225rem',
     height: '1.52225rem',
     padding: '0.125rem',
-    borderRadius: '0.76113rem',
+    borderRadius: 'full',
     transition: 'all 0.3s ease-in-out',
   },
   variants: {

src/features/post/components/InputField/index.tsx

@@ -1,7 +1,38 @@
+import { useState } from 'react';
 import * as s from './style.css';
 
-const InputField = () => {
-  return <input className={s.Container}></input>;
+interface InputProps {
+  isPrice?: boolean;
+}
+
+const InputField = ({ isPrice = false }: InputProps) => {
+  const [price, setPrice] = useState('');
+
+  const handleSetPrice = (event: React.ChangeEvent<HTMLInputElement>) => {
+    let raw = event.target.value.replace(/,/g, '');
+
+    if (!/^\d*$/.test(raw)) return;     // 숫자가 아니면 무시
+
+    const number = Number(raw);
+
+    if (isNaN(number)) {
+      setPrice('');
+    } else {
+      setPrice(number.toLocaleString('ko-KR'));
+    }
+
+    // TODO: 현재 입력값은 string
+    // 백엔드에 보낼 때 number로 재변환하기
+    // const numericPrice = Number(price.replace(/,/g, ''));
+  };
+  
+  return <input 
+  className={s.Container({ isPrice })}
+  value={isPrice ? price : undefined}
+  onChange={isPrice ? handleSetPrice : undefined}
+  inputMode={isPrice ? 'numeric' : 'text'}
+  pattern={isPrice ? '[0-9]*' : undefined}
+  ></input>;
 };
 
 export default InputField;

src/features/post/components/InputField/style.css.ts

@@ -1,8 +1,28 @@
-import { css } from '@styled-system/css';
+import { cva } from '@styled-system/css';
 
-export const Container = css({
-  height: '2.75rem',
-  width: '100%',
-  backgroundColor: '#2C2C2E',
-  borderRadius: '0.375rem',
+export const Container = cva({
+  base: {
+    height: '2.75rem',
+    backgroundColor: '#2C2C2E',
+    width: '100%',
+    padding: '0rem 1rem',
+    borderRadius: '0.375rem',
+    color: '100',
+    opacity: '0.9',
+    fontFamily: 'Pretendard',
+    fontSize: '1rem',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    lineHeight: '1.4',
+  },
+  variants: {
+    isPrice: {
+      true: {
+        textAlign: 'end',
+      },
+      false: {
+        textAlign: 'start',
+      },
+    },
+  },
 });

src/features/post/components/StepFunnel/step4.tsx

@@ -10,25 +10,25 @@ import {
 } from '@/libs/types/post';
 import { useState } from 'react';
 
+const renderChipGroup = <T extends string>(
+  map: Record<T, string>,
+  selected: T | null,
+  setSelected: React.Dispatch<React.SetStateAction<T | null>>,
+) => (
+  <div className={s.ChipColumn}>
+    {(Object.keys(map) as T[]).map(key => (
+      <Chip key={key} isSelected={selected === key} onClick={() => setSelected(selected === key ? null : key)}>
+        {map[key]}
+      </Chip>
+    ))}
+  </div>
+);
+
 const Step4 = () => {
   const [selectedSizes, setSelectedSizes] = useState<SizeType | null>(null);
   const [selectedColors, setSelectedColors] = useState<ColorType | null>(null);
   const [selectedQualities, setSelectedQualities] = useState<QualityType | null>(null);
 
-  const renderChipGroup = <T extends string>(
-    map: Record<T, string>,
-    selected: T | null,
-    setSelected: React.Dispatch<React.SetStateAction<T | null>>,
-  ) => (
-    <div className={s.ChipColumn}>
-      {(Object.keys(map) as T[]).map(key => (
-        <Chip key={key} isSelected={selected === key} onClick={() => setSelected(selected === key ? null : key)}>
-          {map[key]}
-        </Chip>
-      ))}
-    </div>
-  );
-
   return (
     <div>
       <header className={s.Head}>태그를 선택해 주세요</header>

src/features/post/components/StepFunnel/step6.tsx

@@ -15,13 +15,13 @@ const Rental = () => {
       <div className={s.HeaderInputField}>
         <span>대여료를 입력해 주세요</span>
         <div className={s.PriceInputField}>
-          <InputField />원
+          <InputField isPrice={true} />원
         </div>
       </div>
       <div className={s.HeaderInputField}>
         <span>보증금을 입력해 주세요</span>
         <div className={s.PriceInputField}>
-          <InputField />원
+          <InputField isPrice={true} />원
         </div>
       </div>
     </div>
@@ -43,7 +43,7 @@ const Sale = () => {
       <div className={s.HeaderInputField}>
         <span>판매 금액을 입력해 주세요</span>
         <div className={s.PriceInputField}>
-          <InputField />원
+          <InputField isPrice={true}/>원
         </div>
       </div>
       <span className={s.CanDeal} onClick={handleCanDeal}>

src/features/post/components/TypeCard/style.css.ts

@@ -16,7 +16,7 @@ export const Icon = cva({
     width: '1.52225rem',
     height: '1.52225rem',
     padding: '0.125rem',
-    borderRadius: '0.76113rem',
+    borderRadius: 'full',
     transition: 'all 0.3s ease-in-out',
   },
   variants: {

src/libs/types/post.ts

@@ -3,10 +3,10 @@ export const POST_TYPES_MAP = {
   RENTAL: '대여',
 };
 export const PRODUCT_TYPES_MAP = {
-  HOCKEY: '아이스하키',
   SOCCER: '축구',
   BASKETBALL: '농구',
   BASEBALL: '야구',
+  HOCKEY: '아이스하키',
   VARSITY_JACKET: '과잠',
   ACCESSORY: '악세사리',
   SELF_MADE: '자체제작',