Merge pull request #294 from ODOICHON/develop

농가거래 서비스 배포

.github/workflows/deploy.yml

@@ -87,7 +87,7 @@ jobs:
         if: contains(github.ref, 'develop')
         run: |
           aws deploy create-deployment \
-          --application-name duaily-dev-deploy \
+          --application-name ${{ secrets.DEPLOY_APPLICATION_NAME_DEV }} \
           --deployment-config-name CodeDeployDefault.AllAtOnce \
           --deployment-group-name ${{ secrets.DEPLOY_GROUP_DEV }} \
           --s3-location bucket=${{ secrets.S3_BUCKET_NAME_DEV }},bundleType=zip,key=$PROJECT_NAME/$GITHUB_SHA.zip
@@ -96,7 +96,7 @@ jobs:
         if: contains(github.ref, 'main')
         run: |
           aws deploy create-deployment \
-          --application-name duaily-deploy \
+          --application-name ${{ secrets.DEPLOY_APPLICATION_NAME }} \
           --deployment-config-name CodeDeployDefault.AllAtOnce \
           --deployment-group-name ${{ secrets.DEPLOY_GROUP }} \
           --s3-location bucket=${{ secrets.S3_BUCKET_NAME }},bundleType=zip,key=$PROJECT_NAME/$GITHUB_SHA.zip

package.json

@@ -43,7 +43,7 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.8.1",
     "sass": "^1.58.1",
-    "swiper": "^9.0.5",
+    "swiper": "^11.1.4",
     "uuid": "^9.0.0",
     "vite": "^4.1.0",
     "vite-tsconfig-paths": "^4.0.5",

src/apis/reissue.ts

@@ -1,8 +1,5 @@
-import axios, { AxiosError } from 'axios';
-import {
-  ApiResponseType,
-  ApiResponseWithDataType,
-} from '@/types/apiResponseType';
+import axios from 'axios';
+import { ApiResponseWithDataType } from '@/types/apiResponseType';
 
 export const reissue = async () => {
   try {
@@ -16,6 +13,6 @@ export const reissue = async () => {
     );
     return data;
   } catch (err) {
-    alert((err as AxiosError<ApiResponseType>).response?.data.message);
+    console.error(err);
   }
 };

src/components/Common/Footer/index.tsx

@@ -40,7 +40,7 @@ export default function Footer() {
               );
             }}
           >
-            빈집거래 서비스 관련
+            농가거래 서비스 관련
           </button>
         </span>
       </div>

src/components/Common/Navbar/index.tsx

@@ -37,7 +37,7 @@ function DesktopNavbar({
           오도이촌 소개
         </Link>
         <Link className={isFocus('trade')} ref={tradeRef} to="/trade">
-          빈집거래
+          농가거래
         </Link>
         <Link
           className={isFocus('community')}

src/components/Common/ToggleMenu/index.tsx

@@ -43,7 +43,7 @@ export default function ToggleMenu() {
           alt="close"
         />
         <Link to="/introduce">오도이촌 소개</Link>
-        <Link to="/trade">빈집거래</Link>
+        <Link to="/trade">농가거래</Link>
         <Link to="/community/free_board">커뮤니티</Link>
         {token ? <AfterLogin /> : <BeforeLogin />}
       </div>

src/components/Trade/AddressModal/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import DaumPostcodeEmbed, { Address } from 'react-daum-postcode';
 import styles from './styles.module.scss';
 
@@ -8,6 +8,7 @@ type AddressModalProps = {
 };
 
 function AddressModal({ callback, setIsPostcodeOpen }: AddressModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
   const handleComplete = (data: Address) => {
     let fullAddress = data.address;
     let extraAddress = '';
@@ -25,9 +26,19 @@ function AddressModal({ callback, setIsPostcodeOpen }: AddressModalProps) {
     callback(fullAddress, data.zonecode);
     setIsPostcodeOpen((pre) => !pre);
   };
+  useEffect(() => {
+    const handleCloseModal = (e: Event | React.MouseEvent) => {
+      if (!modalRef.current || !modalRef.current!.contains(e.target as Node))
+        setIsPostcodeOpen(false);
+    };
+    window.addEventListener('mousedown', handleCloseModal);
+    return () => {
+      window.removeEventListener('mousedown', handleCloseModal);
+    };
+  }, [modalRef]);
   return (
     <div className={styles.background}>
-      <section className={styles.container}>
+      <section ref={modalRef} className={styles.container}>
         <DaumPostcodeEmbed onComplete={handleComplete} autoClose={false} />
       </section>
     </div>

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<TradeBoardType, 'recommendedTag'>;
 
 export default function TradeBoard({
   houseId,
+  houseType,
   rentalType,
   city,
   price,
@@ -97,7 +98,9 @@ export default function TradeBoard({
         )}
       </div>
       <div className={styles.contentsWrapper}>
-        <h1>{title}</h1>
+        <h1>
+          [{getHouseName(houseType)}] {title}
+        </h1>
         <p>
           <strong>위치</strong> : {city}
         </p>

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<React.SetStateAction<string>>;
   setSelectedMenu: React.Dispatch<React.SetStateAction<MenuType>>;
 };

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 (
     <section className={styles.infoContainer}>
       <article>
-        <span>기본정보</span>
+        <span>임대정보 및 판매자 정보</span>
+        <div>
+          유형 <p>{info?.houseType && getHouseName(info?.houseType)}</p>
+        </div>
         <div>
           위치 <p>{info?.city}</p>
         </div>
         <div>
-          면적{' '}
+          가격{' '}
           <p>
-            {info?.size}m<sup>2</sup>
+            {info?.rentalType && getRentalName(info?.rentalType)}{' '}
+            {info?.price && priceCount(info?.price)}
           </p>
         </div>
         <div>
-          용도 <p>{info?.purpose}</p>
-        </div>
-        <div>
-          준공연도 <p>{dayjs(info?.createdDate).format('YYYY')}년</p>
-        </div>
-        <div>
-          층수 <p>{info?.floorNum === 0 ? '-' : `${info?.floorNum}층`}</p>
+          전화번호 <p>{info?.contact}</p>
         </div>
       </article>
       <article>
-        <span>임대정보 및 판매자 정보</span>
+        <span>기본정보</span>
         <div>
-          가격{' '}
-          <p>
-            {info?.rentalType && getRentalName(info?.rentalType)} {info?.price}
-            만원
-          </p>
+          면적 <p>{info?.size}㎡</p>
         </div>
         <div>
-          전화번호 <p>{info?.contact}</p>
+          준공연도 <p>{dayjs(info?.createdDate).format('YYYY')}년</p>
+        </div>
+        <div>
+          용도 <p>{info?.purpose}</p>
         </div>
-        {info?.userType === 'AGENT' && (
-          <div>
-            공인중개사명 <p>{info?.agentName !== '' ? info?.agentName : 'X'}</p>
-          </div>
-        )}
       </article>
     </section>
   );

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<React.SetStateAction<string>>;
   setRentalType: React.Dispatch<React.SetStateAction<string>>;
   setCity: React.Dispatch<React.SetStateAction<string>>;
   setSearch: React.Dispatch<React.SetStateAction<string>>;
@@ -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({
       <section
         ref={dropdownRef}
         className={styles.selectItem}
-        style={{ flexGrow: '2' }}
+        style={{ flexGrow: '1' }}
       >
+        <span
+          role="presentation"
+          className={
+            selectedMenu === 'houseType'
+              ? styles.selectedSearchItem
+              : styles.searchItem
+          }
+          onClick={() => setSelectedMenu('houseType')}
+        >
+          <div>
+            <p style={{ color: houseType !== '' ? 'black' : '' }}>
+              {houseType === ''
+                ? '유형'
+                : convertHouseTypeName(houseType as HouseType)}
+            </p>
+            <GoTriangleDown color="#d9d9d9" size="1.25rem" />
+          </div>
+          <AnimatePresence>
+            {selectedMenu === 'houseType' && (
+              <Dropdown
+                menu={houseCategory}
+                setMenu={setHouseType}
+                setSelectedMenu={setSelectedMenu}
+              />
+            )}
+          </AnimatePresence>
+        </span>
+
+        <div className={styles.divider} />
+
         <span
           role="presentation"
           className={
@@ -74,7 +108,7 @@ export default function SearchBar({
           <div>
             <p style={{ color: rentalType !== '' ? 'black' : '' }}>
               {rentalType === ''
-                ? '유형'
+                ? '거래'
                 : convertRentalTypeName(rentalType as RentalType)}
             </p>
             <GoTriangleDown color="#d9d9d9" size="1.25rem" />
@@ -126,7 +160,7 @@ export default function SearchBar({
             ? styles.selectedSearchItem
             : styles.searchItem
         }
-        style={{ flexGrow: '3' }}
+        style={{ flexGrow: '1' }}
         onClick={() => setSelectedMenu('search')}
       >
         <form onSubmit={handleSubmit}>

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' },

src/hooks/useSwiperRef.ts

@@ -0,0 +1,14 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useSwiperRef = <T extends HTMLElement>() => {
+  const [wrapper, setWrapper] = useState<T | null>(null);
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    setWrapper(ref.current);
+  }, []);
+
+  return [wrapper, ref] as const;
+};
+
+export default useSwiperRef;

src/pages/Introduce/index.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { motion } from 'framer-motion';
-import { Scrollbar } from 'swiper';
+import { Scrollbar } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import ReviewBoard from '@/components/Introduce/ReviewBoard';
 import TrendBoard from '@/components/Introduce/TrendBoard';