Merge pull request #187 from ODOICHON/feat/#173

Feat/#173 마이페이지 빈집중개 - 내 매물 관리 페이지

package.json

@@ -32,6 +32,7 @@
     "msw": "^1.0.1",
     "quill-image-resize-module-ts": "^3.0.3",
     "react": "^18.2.0",
+    "react-calendar": "^4.6.1",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",

src/Routes.tsx

@@ -1,6 +1,7 @@
 import { lazy } from 'react';
 import { RouteObject } from 'react-router-dom';
 import GlobalLayout from '@/pages/_layout';
+import MyselfPage from './pages/Mypage/trade/myself';
 
 const MainPage = lazy(() => import('@/pages/Main'));
 const LoginPage = lazy(() => import('@/pages/Login'));
@@ -40,7 +41,7 @@ export const routes: RouteObject[] = [
           },
           {
             path: 'trade/myself',
-            element: <div>myself</div>,
+            element: <MyselfPage />,
           },
           {
             path: 'trade/save',

src/apis/houses.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosError } from 'axios';
+import { HouseStatusType } from '@/types/Board/myPageType';
 import { TradeBoardDetailType, TradeBoardForm } from '@/types/Board/tradeType';
 import {
   ApiResponseType,
@@ -13,7 +14,23 @@ export const PostHouseAPI = async (form: TradeBoardForm) => {
     return response.data;
   } catch (error) {
     const err = error as AxiosError<ApiResponseType>;
-    return err.response?.data;
+    return Promise.reject(err);
+  }
+};
+
+export const PutHouseStatusAPI = async (
+  form: HouseStatusType,
+  houseId: number,
+) => {
+  try {
+    const response = await axios.put<ApiResponseType>(
+      `/houses/status/${houseId}`,
+      form,
+    );
+    return response.data;
+  } catch (error) {
+    const err = error as AxiosError<ApiResponseType>;
+    return Promise.reject(err);
   }
 };
 

src/components/Common/NoPosts/index.tsx

@@ -0,0 +1,25 @@
+import { HiOutlineDotsHorizontal } from 'react-icons/hi';
+import styles from './styles.module.scss';
+
+type NoPostsProps = {
+  text: string;
+  subText?: string;
+  padding?: boolean;
+};
+
+export default function NoPosts({
+  text,
+  subText,
+  padding = true,
+}: NoPostsProps) {
+  return (
+    <div
+      className={styles.wrapper}
+      style={padding ? { padding: '10rem 0' } : {}}
+    >
+      <HiOutlineDotsHorizontal className={styles.ellipsis} />
+      <p>{text}</p>
+      {subText && <p>{subText}</p>}
+    </div>
+  );
+}

src/components/Community/NoPosts/styles.module.scss → src/components/Common/NoPosts/styles.module.scss

@@ -4,7 +4,6 @@
   justify-content: center;
   align-items: center;
   gap: 1rem;
-  padding: 10rem 0;
   color: var(--darkgray-color);
   & > p {
     font-size: 1.5rem;

src/components/Common/Pagenation/index.tsx → src/components/Common/Pagination/index.tsx

@@ -3,19 +3,19 @@ import nextArrow from '@/assets/common/nextArrow.svg';
 import prevArrow from '@/assets/common/prevArrow.svg';
 import styles from './styles.module.scss';
 
-type PagenationProps = {
+type PaginationProps = {
   totalPage: number;
   currentPage: number;
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
 };
 
 const PAEG_LIMIT = 5; // 한 번에 최대 5개의 페이지가 보여짐
 
-export default function Pagenation({
+export default function Pagination({
   totalPage,
   currentPage,
   setCurrentPage,
-}: PagenationProps) {
+}: PaginationProps) {
   const [pageNumbers, setPageNumbers] = useState<number[]>([]);
 
   const getPageNumbers = useCallback(
@@ -60,7 +60,7 @@ export default function Pagenation({
   }, [totalPage, currentPage]);
 
   return (
-    <div className={styles.pagenation}>
+    <div className={styles.pagination}>
       <button
         id="prevPage"
         className={styles.pageButton}

src/components/Common/Pagenation/styles.module.scss → src/components/Common/Pagination/styles.module.scss

@@ -1,6 +1,7 @@
-.pagenation {
+.pagination {
   display: flex;
   align-self: center;
+  justify-content: center;
   margin-bottom: 7.5rem;
 }
 

src/components/Common/ui/Button/index.tsx

@@ -0,0 +1,35 @@
+import styles from './styles.module.scss';
+
+type ButtonProps = {
+  text: string;
+  borderColor?: string;
+  textColor?: string;
+  backgroundColor?: string;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+export default function Button({
+  text,
+  borderColor,
+  textColor,
+  backgroundColor,
+  disabled,
+  onClick,
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={disabled ? styles.disabledButton : styles.button}
+      style={{
+        borderColor: borderColor || 'black',
+        backgroundColor: backgroundColor || 'transparent',
+        color: textColor || 'black',
+      }}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {text}
+    </button>
+  );
+}

src/components/Common/ui/Button/styles.module.scss

@@ -0,0 +1,20 @@
+.button {
+  border-style: solid;
+  border-width: 1px;
+  width: 5.624rem;
+  height: 2.5rem;
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.disabledButton {
+  @extend .button;
+  cursor: auto;
+  &:hover {
+    opacity: 1;
+  }
+}