diff --git a/src/components/Common/Footer/index.tsx b/src/components/Common/Footer/index.tsx index 2ee78b5..ed5f4a1 100644 --- a/src/components/Common/Footer/index.tsx +++ b/src/components/Common/Footer/index.tsx @@ -40,7 +40,7 @@ export default function Footer() { ); }} > - 빈집거래 서비스 관련 + 농가거래 서비스 관련 diff --git a/src/components/Common/Navbar/index.tsx b/src/components/Common/Navbar/index.tsx index 0bebe97..0314b3e 100644 --- a/src/components/Common/Navbar/index.tsx +++ b/src/components/Common/Navbar/index.tsx @@ -37,7 +37,7 @@ function DesktopNavbar({ 오도이촌 소개 - 빈집거래 + 농가거래 오도이촌 소개 - 빈집거래 + 농가거래 커뮤니티 {token ? : } diff --git a/src/components/Trade/Board/index.tsx b/src/components/Trade/Board/index.tsx index 2e662d3..1f2762e 100644 --- a/src/components/Trade/Board/index.tsx +++ b/src/components/Trade/Board/index.tsx @@ -2,13 +2,14 @@ import { useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import dayjs from 'dayjs'; import { RentalType, TradeBoardType } from '@/types/Board/tradeType'; -import { convertRentalTypeName, priceCount } from '@/utils/utils'; +import { convertRentalTypeName, getHouseName, priceCount } from '@/utils/utils'; import styles from './styles.module.scss'; type TradeBoardProps = Omit; export default function TradeBoard({ houseId, + houseType, rentalType, city, price, @@ -97,7 +98,9 @@ export default function TradeBoard({ )}
-

{title}

+

+ [{getHouseName(houseType)}] {title} +

위치 : {city}

diff --git a/src/components/Trade/Dropdown/index.tsx b/src/components/Trade/Dropdown/index.tsx index 0a79cb3..50dc5e8 100644 --- a/src/components/Trade/Dropdown/index.tsx +++ b/src/components/Trade/Dropdown/index.tsx @@ -1,11 +1,15 @@ import { motion } from 'framer-motion'; import { MenuType } from '@/types/Board/tradeType'; -import { TradeCategoryType, TradeCityType } from '@/constants/trade'; +import { + TradeCategoryType, + TradeCityType, + TradeHouseType, +} from '@/constants/trade'; import { tradeDropdownVariants } from '@/constants/variants'; import styles from './styles.module.scss'; type DropdownProps = { - menu: TradeCategoryType[] | TradeCityType[]; + menu: TradeHouseType[] | TradeCategoryType[] | TradeCityType[]; setMenu: React.Dispatch>; setSelectedMenu: React.Dispatch>; }; diff --git a/src/components/Trade/Info/index.tsx b/src/components/Trade/Info/index.tsx index d78ddf2..e1f9096 100644 --- a/src/components/Trade/Info/index.tsx +++ b/src/components/Trade/Info/index.tsx @@ -1,6 +1,6 @@ import dayjs from 'dayjs'; import { TradeBoardDetailType } from '@/types/Board/tradeType'; -import { getRentalName } from '@/utils/utils'; +import { getHouseName, getRentalName, priceCount } from '@/utils/utils'; import styles from './styles.module.scss'; // TODO: undefined 처리하기 @@ -12,43 +12,35 @@ function TradeBoardInfo({ info }: TradeBoardInfoProps) { return (
- 기본정보 + 임대정보 및 판매자 정보 +
+ 유형

{info?.houseType && getHouseName(info?.houseType)}

+
위치

{info?.city}

- 면적{' '} + 가격{' '}

- {info?.size}m2 + {info?.rentalType && getRentalName(info?.rentalType)}{' '} + {info?.price && priceCount(info?.price)}

- 용도

{info?.purpose}

-
-
- 준공연도

{dayjs(info?.createdDate).format('YYYY')}년

-
-
- 층수

{info?.floorNum === 0 ? '-' : `${info?.floorNum}층`}

+ 전화번호

{info?.contact}

- 임대정보 및 판매자 정보 + 기본정보
- 가격{' '} -

- {info?.rentalType && getRentalName(info?.rentalType)} {info?.price} - 만원 -

+ 면적

{info?.size}㎡

- 전화번호

{info?.contact}

+ 준공연도

{dayjs(info?.createdDate).format('YYYY')}년

+
+
+ 용도

{info?.purpose}

- {info?.userType === 'AGENT' && ( -
- 공인중개사명

{info?.agentName !== '' ? info?.agentName : 'X'}

-
- )}
); diff --git a/src/components/Trade/SearchBar/index.tsx b/src/components/Trade/SearchBar/index.tsx index 79ad6e1..565b638 100644 --- a/src/components/Trade/SearchBar/index.tsx +++ b/src/components/Trade/SearchBar/index.tsx @@ -1,16 +1,18 @@ import { useEffect, useRef, useState } from 'react'; import { GoTriangleDown } from 'react-icons/go'; import { AnimatePresence } from 'framer-motion'; -import { MenuType, RentalType } from '@/types/Board/tradeType'; -import { convertRentalTypeName } from '@/utils/utils'; -import { tradeCategory, tradeCity } from '@/constants/trade'; +import { HouseType, MenuType, RentalType } from '@/types/Board/tradeType'; +import { convertHouseTypeName, convertRentalTypeName } from '@/utils/utils'; +import { houseCategory, tradeCategory, tradeCity } from '@/constants/trade'; import styles from './styles.module.scss'; import Dropdown from '../Dropdown'; type SearchBarProps = { + houseType: string; rentalType: string; city: string; search: string; + setHouseType: React.Dispatch>; setRentalType: React.Dispatch>; setCity: React.Dispatch>; setSearch: React.Dispatch>; @@ -19,9 +21,11 @@ type SearchBarProps = { }; export default function SearchBar({ + houseType, rentalType, city, search, + setHouseType, setRentalType, setCity, setSearch, @@ -60,8 +64,38 @@ export default function SearchBar({
+ setSelectedMenu('houseType')} + > +
+

+ {houseType === '' + ? '유형' + : convertHouseTypeName(houseType as HouseType)} +

+ +
+ + {selectedMenu === 'houseType' && ( + + )} + + + +
+

{rentalType === '' - ? '유형' + ? '거래' : convertRentalTypeName(rentalType as RentalType)}

@@ -126,7 +160,7 @@ export default function SearchBar({ ? styles.selectedSearchItem : styles.searchItem } - style={{ flexGrow: '3' }} + style={{ flexGrow: '1' }} onClick={() => setSelectedMenu('search')} >
diff --git a/src/constants/trade.ts b/src/constants/trade.ts index a1e6cf0..0961920 100644 --- a/src/constants/trade.ts +++ b/src/constants/trade.ts @@ -1,10 +1,26 @@ -import { RecommendedTagType, RentalType } from '@/types/Board/tradeType'; +import { + HouseType, + RecommendedTagType, + RentalType, +} from '@/types/Board/tradeType'; export type TradeCategoryType = { content: string; type: RentalType | ''; }; +export type TradeHouseType = { + content: string; + type: HouseType | ''; +}; + +export const houseCategory: TradeHouseType[] = [ + { content: '전체', type: '' }, + { content: '토지', type: 'LAND' }, + { content: '주택', type: 'HOUSE' }, + { content: '농가', type: 'FARM_HOUSE' }, +]; + export const tradeCategory: TradeCategoryType[] = [ { content: '전체', type: '' }, { content: '매매', type: 'SALE' }, diff --git a/src/pages/MyPage/home/index.tsx b/src/pages/MyPage/home/index.tsx index 556db5d..16263a3 100644 --- a/src/pages/MyPage/home/index.tsx +++ b/src/pages/MyPage/home/index.tsx @@ -47,7 +47,7 @@ function MyHomePage() {

{user?.nick_name}님의{' '} - {user?.userType === 'AGENT' ? '빈집거래 활동' : '마이페이지'} + {user?.userType === 'AGENT' ? '농가거래 활동' : '마이페이지'}

{user?.userType === 'AGENT' ? : } diff --git a/src/pages/Trade/Board/index.tsx b/src/pages/Trade/Board/index.tsx index 21edbed..8effec8 100644 --- a/src/pages/Trade/Board/index.tsx +++ b/src/pages/Trade/Board/index.tsx @@ -23,7 +23,7 @@ import { DeleteHouseAPI } from '@/apis/houses'; import userStore from '@/store/userStore'; import useModalState from '@/hooks/useModalState'; import useToastMessageType from '@/hooks/useToastMessageType'; -import { getMoveInType, getUserType } from '@/utils/utils'; +import { getHouseName, getMoveInType, getUserType } from '@/utils/utils'; import { ApiResponseWithDataType } from '@/types/apiResponseType'; import { opacityVariants } from '@/constants/variants'; import styles from './styles.module.scss'; @@ -47,7 +47,7 @@ export default function TradeBoardPage() { const ref = useRef(null); const handleDeleteButtonClick = async (houseId: number) => { - if (houseId === 0) throw new Error('없는 빈집거래 게시물입니다.'); + if (houseId === 0) throw new Error('없는 농가거래 게시물입니다.'); await DeleteHouseAPI(houseId); handleToastMessageProps('POST_DELETE_SUCCESS', () => { handleModalClose(); @@ -104,7 +104,10 @@ export default function TradeBoardPage() { {getUserType(data?.data.userType || 'NONE')} -

{data?.data.title}

+

+ {data?.data.houseType && `[${getHouseName(data?.data.houseType)}]`}{' '} + {data?.data.title} +

{data?.data.nickName} @@ -173,6 +176,20 @@ export default function TradeBoardPage() { >

+ {data?.data.userType === 'AGENT' && ( +
+
+
+ 공인중개사명{' '} +

{data.data.agentName !== '' ? data.data.agentName : 'X'}

+
+
+ 상세 설명{' '} +

{data.data.agentDetail && data.data.agentDetail}

+
+
+
+ )}
매물 특징 @@ -197,7 +214,7 @@ export default function TradeBoardPage() {
- 빈집거래 프로세스가 궁금하신가요? + 농가거래 프로세스가 궁금하신가요? + ))} + +
+
+
    {tradeCategory.slice(1).map((item) => (
- +
- +
- +
- + {user?.userType === 'AGENT' && (
- +
)} + {user?.userType === 'AGENT' && ( +
+ + +
+ )}
@@ -289,21 +350,19 @@ export default function TradeWritePage() {
- +
- +
-
+ {/*
-
+
*/}
diff --git a/src/pages/Trade/Write/styles.module.scss b/src/pages/Trade/Write/styles.module.scss index 7566d47..a25facd 100644 --- a/src/pages/Trade/Write/styles.module.scss +++ b/src/pages/Trade/Write/styles.module.scss @@ -307,6 +307,10 @@ border-color: var(--main-color); } +.essential{ + color: var(--main-color); +} + /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { diff --git a/src/pages/Trade/index.tsx b/src/pages/Trade/index.tsx index f33b036..8574be3 100644 --- a/src/pages/Trade/index.tsx +++ b/src/pages/Trade/index.tsx @@ -27,6 +27,7 @@ export default function TradePage() { const [currentPage, setCurrentPage] = useState(0); const [isLastPage, setIsLastPage] = useState(false); + const [houseType, setHouseType] = useState(''); const [rentalType, setRentalType] = useState(''); const [city, setCity] = useState(''); const [search, setSearch] = useState(''); @@ -89,18 +90,20 @@ export default function TradePage() { >
-

빈집거래

+

농가거래

-            {`자신의 빈집을 등록하거나 다양한 지역의
-빈집을 구경할 수 있는 공간입니다.`}
+            주말농장 토지나 시골집을 등록하고
+            
 구경할 수 있는 공간입니다.
{ } }; +// 매매 타입 이름 가져오기 +export const getHouseName = (house: HouseType) => { + switch (house) { + case 'LAND': + return '토지'; + case 'HOUSE': + return '주택'; + case 'FARM_HOUSE': + return '농가'; + default: + return ''; + } +}; + // 매매 타입 이름 가져오기 export const getRentalName = (rental: RentalType) => { switch (rental) { @@ -125,7 +140,7 @@ export const checkBeforePost = ( return true; }; -// 빈집거래 글쓰기 필수 입력사항 체크 +// 농가거래 글쓰기 필수 입력사항 체크 export const checkBeforeTradePost = ( user: User, tradeBoardForm: TradeBoardForm, @@ -139,9 +154,8 @@ export const checkBeforeTradePost = ( monthlyPrice, contact, agentName, + agentDetail, size, - floorNum, - createdDate, purpose, title, code, @@ -183,18 +197,17 @@ export const checkBeforeTradePost = ( alert('중개사 이름을 입력해주세요.'); return false; } - if (size === '') { - alert('평수를 입력해주세요.'); - return false; - } - if (floorNum < 0) { - alert('1층 이상의 값만 작성해주세요.'); + + if (user.userType === 'AGENT' && agentDetail === '') { + alert('상세 설명을 적어주세요.'); return false; } - if (createdDate === '') { - alert('준공일을 입력해주세요.'); + + if (size === '') { + alert('평수를 입력해주세요.'); return false; } + if (purpose === '') { alert('용도를 입력해주세요.'); return false; @@ -271,6 +284,12 @@ export const convertRentalTypeName = (typeName: RentalType) => { if (typeName === 'MONTHLYRENT') return '월세'; }; +export const convertHouseTypeName = (typeName: HouseType) => { + if (typeName === 'LAND') return '토지'; + if (typeName === 'HOUSE') return '주택'; + if (typeName === 'FARM_HOUSE') return '농가'; +}; + // 문자가 자음이거나 모음인지 확인하는 함수 export const isConsonant = (char: string) => { const pattern = /[ㄱ-ㅎ|ㅏ-ㅣ]/;