From b4e24c28335560c9b27e0b1234aeeb2dc71c9b3e Mon Sep 17 00:00:00 2001 From: sangminlee98 Date: Mon, 18 Nov 2024 22:53:21 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A7=A4=EB=A7=A4=EA=B0=80=200?= =?UTF-8?q?=EC=9B=90=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20=EB=AC=B4=EB=A3=8C=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Trade/Board/index.tsx | 19 +- src/components/Trade/Info/index.tsx | 7 +- src/pages/Trade/Write/index.tsx | 64 ++++-- src/pages/Trade/Write/styles.module.scss | 247 +++++++++++------------ src/utils/utils.ts | 5 - 5 files changed, 187 insertions(+), 155 deletions(-) diff --git a/src/components/Trade/Board/index.tsx b/src/components/Trade/Board/index.tsx index 1f2762e..650b955 100644 --- a/src/components/Trade/Board/index.tsx +++ b/src/components/Trade/Board/index.tsx @@ -27,6 +27,18 @@ export default function TradeBoard({ const [hiddenTags, setHiddenTags] = useState([]); const ulRef = useRef(null); + let displayPrice = ''; + + if (price === 0) { + displayPrice = '무료'; + } else if (convertRentalTypeName(rentalType) === '월세') { + displayPrice = `보증금 ${priceCount(price)} / 월세 ${priceCount( + monthlyPrice, + )}`; + } else { + displayPrice = `${convertRentalTypeName(rentalType)} ${priceCount(price)}`; + } + const checkAndManageTags = () => { if (ulRef.current) { const containerWidth = ulRef.current.offsetWidth; @@ -104,11 +116,8 @@ export default function TradeBoard({

위치 : {city}

-

- 가격 :{' '} - {convertRentalTypeName(rentalType) === '월세' - ? `보증금 ${priceCount(price)} / 월세 ${priceCount(monthlyPrice)}` - : `${convertRentalTypeName(rentalType)} ${priceCount(price)}`} +

+ 가격 : {displayPrice}

    {visibleTags.map((tag, index) => ( diff --git a/src/components/Trade/Info/index.tsx b/src/components/Trade/Info/index.tsx index a632a30..1a61cf3 100644 --- a/src/components/Trade/Info/index.tsx +++ b/src/components/Trade/Info/index.tsx @@ -22,8 +22,11 @@ function TradeBoardInfo({ info }: TradeBoardInfoProps) {
    가격{' '}

    - {info?.rentalType && getRentalName(info?.rentalType)}{' '} - {info?.price && priceCount(info?.price)} + {info?.price === 0 + ? '무료' + : `${info?.rentalType && getRentalName(info?.rentalType)} ${ + info?.price && priceCount(info?.price) + }`}

    diff --git a/src/pages/Trade/Write/index.tsx b/src/pages/Trade/Write/index.tsx index 0db6a51..752e0f1 100644 --- a/src/pages/Trade/Write/index.tsx +++ b/src/pages/Trade/Write/index.tsx @@ -34,6 +34,9 @@ export default function TradeWritePage() { const { state }: { state: { data: TradeBoardDetailType } } = useLocation(); + const priceRef = useRef(null); + const montlyPriceRef = useRef(null); + const [form, setForm] = useState({ houseType: state ? state.data.houseType : 'LAND', rentalType: state ? state.data.rentalType : 'SALE', @@ -111,6 +114,28 @@ export default function TradeWritePage() { return returnString; }; + const onCheckFree = (e: React.ChangeEvent) => { + const isChecked = e.currentTarget.checked; + if (isChecked) { + setForm((prev) => { + return { ...prev, price: 0, monthlyPrice: 0 }; + }); + if (priceRef.current) { + priceRef.current.disabled = true; + } + if (montlyPriceRef.current) { + montlyPriceRef.current.disabled = true; + } + } else { + if (priceRef.current) { + priceRef.current.disabled = false; + } + if (montlyPriceRef.current) { + montlyPriceRef.current.disabled = false; + } + } + }; + const thumbnailHandler = async (e: React.ChangeEvent) => { if (e.currentTarget.files !== null) { const file = e.currentTarget.files[0]; @@ -301,18 +326,30 @@ export default function TradeWritePage() { value={form.detail} />
    -
    - - +
    +
    + + +
    + + + +
    * 기본 정보

    *는 필수로 입력해야 하는 값입니다.

    -
    +