diff --git a/index.html b/index.html index 88120dd9..7064e807 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + 판다마켓 diff --git a/public/images/common/ic_plus.svg b/public/images/common/ic_plus.svg new file mode 100644 index 00000000..5bb9abf5 --- /dev/null +++ b/public/images/common/ic_plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/common/ic_tag_x.svg b/public/images/common/ic_tag_x.svg new file mode 100644 index 00000000..1daecf70 --- /dev/null +++ b/public/images/common/ic_tag_x.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Common/CommonButton.jsx b/src/components/Common/CommonButton.jsx index c8a18576..ec3c4d59 100644 --- a/src/components/Common/CommonButton.jsx +++ b/src/components/Common/CommonButton.jsx @@ -1,17 +1,17 @@ import styles from './styles/CommonButton.module.css'; import { useNavigate, useLocation } from 'react-router-dom'; -const CommonButton = ({buttonType, path=""}) => { +const CommonButton = ({buttonType, path="", disabled=false}) => { const navigate = useNavigate(); const location = useLocation(); const currentPath = location.pathname; - console.log(currentPath); const isItems = currentPath === "/items" ? styles.isItems : ""; return ( diff --git a/src/components/Common/styles/CommonButton.module.css b/src/components/Common/styles/CommonButton.module.css index d6a788ac..d0ecef1f 100644 --- a/src/components/Common/styles/CommonButton.module.css +++ b/src/components/Common/styles/CommonButton.module.css @@ -11,6 +11,10 @@ background-color: var(--blue); color: #fff; } + &:disabled { + background-color: var(--gray400); + cursor: not-allowed; + } } @media (max-width: 768px) { diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index e2a4007a..f1e7a0ac 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -6,7 +6,8 @@ const Header = () => { const navigate = useNavigate(); const location = useLocation(); return ( -
+

+
+ )} + + {showFileLimitAlert && *이미지 등록은 최대 1개까지 가능합니다.} + + ); +} diff --git a/src/pages/AddItem/components/AddItemLists.jsx b/src/pages/AddItem/components/AddItemLists.jsx new file mode 100644 index 00000000..9f59f362 --- /dev/null +++ b/src/pages/AddItem/components/AddItemLists.jsx @@ -0,0 +1,86 @@ +import styles from '../styles/AddItemLists.module.css'; +import AddItemImage from './AddItemImage'; +import AddItemTag from './AddItemTag'; +import { useState, useRef } from 'react'; +import { useAddItemForm } from '@/contexts/AddItemFormContext'; + +export default function AddItemsLists() { + const inputRef = useRef(null); + const { name, setName, description, setDescription, price, setPrice } = useAddItemForm(); + + const handlePriceChange = (e) => { + const el = inputRef.current; + const rawValue = e.target.value; + const cursorPos = el.selectionStart; + + // 쉼표 제거 + const cleanValue = rawValue.replace(/[^0-9]/g, ''); + const numericValue = cleanValue === '' ? 0 : Number(cleanValue); + + // 상태 업데이트 + changePrice(numericValue, rawValue, cursorPos); + }; + const changePrice = (value, rawValue, prevCursorPos) => { + setPrice(value === 0 ? '' : value.toLocaleString()); + // 커서 복원 + setTimeout(() => { + if (!inputRef.current) return; + + // 새 포맷된 문자열 + const formatted = value === 0 ? '' : value.toLocaleString(); + + // 이전 값에서 커서까지 몇 개의 숫자가 있었는지 계산 + const numbersBeforeCursor = rawValue.slice(0, prevCursorPos).replace(/[^0-9]/g, '').length; + + // 새 포맷 문자열에서 그 숫자 위치를 다시 찾음 + let newCursorPos = 0; + let digitsSeen = 0; + + for (let i = 0; i < formatted.length; i++) { + if (/\d/.test(formatted[i])) digitsSeen++; + if (digitsSeen === numbersBeforeCursor) { + newCursorPos = i + 1; + break; + } + } + + inputRef.current.setSelectionRange(newCursorPos, newCursorPos); + }, 0); + }; + + + + + return ( + <> +
  • +

    상품 이미지

    + +
    • +
  • + + setName(e.target.value)} /> +
    • +
  • + +