Merge pull request #174 from ODOICHON/feat/#172

feat: 마이페이지 home 구현

src/Routes.tsx

@@ -7,6 +7,7 @@ const LoginPage = lazy(() => import('@/pages/Login'));
 const SignUpPage = lazy(() => import('@/pages/SignUp'));
 const AgentSignUpPage = lazy(() => import('@/pages/SignUp/AgentSignUp'));
 const MyPage = lazy(() => import('@/pages/Mypage'));
+const MyPageHome = lazy(() => import('@/pages/Mypage/home'));
 const IntroducePage = lazy(() => import('@/pages/Introduce'));
 const IntroWritePage = lazy(() => import('@/pages/Introduce/Write'));
 const IntroBoardPage = lazy(() => import('@/pages/Introduce/Board'));
@@ -20,7 +21,6 @@ const TradeBoardPage = lazy(() => import('@/pages/Trade/Board'));
 const TradeWritePage = lazy(() => import('@/pages/Trade/Write'));
 const TradeProcessPage = lazy(() => import('@/pages/Trade/Process'));
 const NotFoundPage = lazy(() => import('@/pages/NotFound'));
-
 export const routes: RouteObject[] = [
   {
     path: '/',
@@ -36,7 +36,7 @@ export const routes: RouteObject[] = [
         children: [
           {
             path: 'home',
-            element: <div>homepage</div>,
+            element: <MyPageHome />,
           },
           {
             path: 'trade/myself',

src/components/MyPage/MyHomeCard/index.tsx

@@ -0,0 +1,17 @@
+import styles from './styles.module.scss';
+
+type MyHomeCardProps = {
+  title: string;
+  count: number;
+};
+
+function MyHomeCard({ title, count }: MyHomeCardProps) {
+  return (
+    <li key={title} className={styles.card}>
+      <span>{title}</span>
+      <span>{count}</span>
+    </li>
+  );
+}
+
+export default MyHomeCard;

src/components/MyPage/MyHomeCard/styles.module.scss

@@ -0,0 +1,19 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+
+  & > span:first-child {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #878d91;
+  }
+
+  & > span:last-child {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: var(--main-color);
+  }
+}

src/components/MyPage/MyHomePopularCard/index.tsx

@@ -0,0 +1,37 @@
+import { useNavigate } from 'react-router-dom';
+import dayjs from 'dayjs';
+import styles from './styles.module.scss';
+
+type MyHomePopularCardProps = {
+  houseId: string;
+  imgUrl: string;
+  title: string;
+  nickName: string;
+  createdAt: string;
+};
+
+function MyHomePopularCard({
+  houseId,
+  imgUrl,
+  title,
+  nickName,
+  createdAt,
+}: MyHomePopularCardProps) {
+  const navigate = useNavigate();
+
+  return (
+    <article
+      role="presentation"
+      className={styles.wrapper}
+      onClick={() => navigate(`/community/free_board/${houseId}`)}
+    >
+      <img className={styles.imgWrapper} src={imgUrl} alt="thumbnail" />
+      <h1 className={styles.title}>{title}</h1>
+      <p className={styles.sub}>
+        {nickName} | {dayjs(createdAt).format('YYYY.MM.DD')}
+      </p>
+    </article>
+  );
+}
+
+export default MyHomePopularCard;

src/components/MyPage/MyHomePopularCard/styles.module.scss

@@ -0,0 +1,37 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  cursor: pointer;
+  transition: 0.2s ease-in;
+  &:hover {
+    transform: translateY(-0.25rem);
+  }
+}
+
+.imgWrapper {
+  border-radius: 10px;
+  width: 100%;
+  width: 100%;
+  object-fit: cover;
+  aspect-ratio: 2;
+}
+
+.title {
+  font-family: 'Pretendard';
+  font-weight: bold;
+  font-size: 1.2rem;
+  color: #000000;
+  line-height: 2.5rem;
+  padding-left: 0.5rem;
+  word-break: break-all;
+  white-space: pre-line;
+}
+
+.sub {
+  font-family: 'Pretendard';
+  font-size: 1.125rem;
+  line-height: 1rem;
+  color: #4d5256;
+  padding-left: 0.5rem;
+}

src/pages/Community/Board/index.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from 'react';
-import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import {
+  Navigate,
+  useLocation,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { motion } from 'framer-motion';
 import Loading from '@/components/Common/Loading';
@@ -24,10 +29,13 @@ export default function CommunityBoardPage() {
   const { category } = useParams();
   const navigate = useNavigate();
   const { token } = userStore();
+  const { state } = useLocation();
 
   const [currentPage, setCurrentPage] = useState(1);
   const [focusedCategory, setFocusedCategory] = useState('ALL');
-  const [focusedFilter, setFocusedFilter] = useState('RECENT');
+  const [focusedFilter, setFocusedFilter] = useState(
+    state?.location === '/mypage/home' ? 'POPULAR' : 'RECENT',
+  );
   const [search, handleSearch, setSearch] = useInput('');
 
   const queryClient = useQueryClient();

src/pages/Mypage/home/index.tsx

@@ -0,0 +1,168 @@
+import { Link } from 'react-router-dom';
+import { MdOutlineArrowForwardIos } from 'react-icons/md';
+import { useQuery } from '@tanstack/react-query';
+import NoPosts from '@/components/Community/NoPosts';
+import MyHomeCard from '@/components/MyPage/MyHomeCard';
+import MyHomePopularCard from '@/components/MyPage/MyHomePopularCard';
+import TradeBoard from '@/components/Trade/Board';
+import { QueryKeys, restFetcher } from '@/queryClient';
+import { BoardPageType } from '@/types/Board/boardType';
+import { CommunityBoardPageType } from '@/types/Board/communityType';
+import { IntroBoardType } from '@/types/Board/introType';
+import { TradeBoardType } from '@/types/Board/tradeType';
+import userStore from '@/store/userStore';
+import { ApiResponseWithDataType } from '@/types/apiResponseType';
+import styles from './styles.module.scss';
+
+type myBoardType = Omit<
+  IntroBoardType,
+  'code' | 'nickName' | 'commentCount' | 'fixed'
+>;
+
+function MyPageHome() {
+  const { user } = userStore();
+
+  const { data: myBoardListData } = useQuery<
+    ApiResponseWithDataType<BoardPageType<myBoardType>>
+  >([QueryKeys.MINE, QueryKeys.COMMUNITY_BOARD], () =>
+    restFetcher({
+      method: 'GET',
+      path: 'boards/my',
+      params: { page: 0, limit: 3 },
+    }),
+  );
+
+  const { data: myCommentListData } = useQuery<
+    ApiResponseWithDataType<BoardPageType<myBoardType>>
+  >([QueryKeys.MINE, QueryKeys.COMMENT], () =>
+    restFetcher({
+      method: 'GET',
+      path: 'boards/my/comment',
+      params: { page: 0 },
+    }),
+  );
+
+  const { data: myLikeListData } = useQuery<
+    ApiResponseWithDataType<BoardPageType<myBoardType>>
+  >([QueryKeys.MINE, QueryKeys.LIKE], () =>
+    restFetcher({
+      method: 'GET',
+      path: 'boards/my/love',
+      params: { page: 0 },
+    }),
+  );
+
+  const { data: myScrapBoardListData } = useQuery<
+    ApiResponseWithDataType<BoardPageType<TradeBoardType>>
+  >([QueryKeys.MINE, QueryKeys.TRADE_BOARD], () =>
+    restFetcher({
+      method: 'GET',
+      path: 'houses/scrap',
+      params: { page: 0 },
+    }),
+  );
+
+  const fetchBoardList = () => {
+    const params = {
+      prefix: 'DEFAULT',
+      order: 'POPULAR',
+      page: 0,
+    };
+    return restFetcher({ method: 'GET', path: 'boards', params });
+  };
+
+  const { data: boardPopularListData } = useQuery<
+    ApiResponseWithDataType<CommunityBoardPageType>
+  >([QueryKeys.COMMUNITY_BOARD, QueryKeys.MINE, 'POPULAR'], () =>
+    fetchBoardList(),
+  );
+
+  return (
+    <section className={styles.container}>
+      <article>
+        <div className={styles.titleContainer}>
+          <span>{user?.userName}님의 마이페이지</span>
+        </div>
+        <ul className={styles.cardWrapper}>
+          <MyHomeCard
+            key="내가 쓴 글"
+            title="내가 쓴 글"
+            count={myBoardListData?.data.totalElements || 0}
+          />
+          <MyHomeCard
+            key="내가 쓴 댓글"
+            title="내가 쓴 댓글"
+            count={myCommentListData?.data.totalElements || 0}
+          />
+          <MyHomeCard
+            key="좋아요한 글"
+            title="좋아요한 글"
+            count={myLikeListData?.data.totalElements || 0}
+          />
+        </ul>
+      </article>
+
+      <article>
+        <div className={styles.titleContainer}>
+          <span className={styles.title}>스크랩한 글</span>
+          <Link to="/mypage/trade/scrap">
+            더보기
+            <MdOutlineArrowForwardIos />
+          </Link>
+        </div>
+        {myScrapBoardListData &&
+        myScrapBoardListData.data.content.length > 0 ? (
+          <ul className={styles.boardWrapper}>
+            {myScrapBoardListData.data.content.slice(0, 2).map((content) => (
+              <TradeBoard
+                key={content.houseId}
+                houseId={content.houseId}
+                rentalType={content.rentalType}
+                city={content.city}
+                price={content.price}
+                monthlyPrice={content.monthlyPrice}
+                isCompleted={content.isCompleted}
+                nickName={content.nickName}
+                createdAt={content.createdAt}
+                imageUrl={content.imageUrl}
+                title={content.title}
+                recommendedTagName={content.recommendedTagName}
+              />
+            ))}
+          </ul>
+        ) : (
+          <NoPosts />
+        )}
+      </article>
+
+      <article>
+        <div className={styles.titleContainer}>
+          <span className={styles.title}>이번주 인기 게시글</span>
+          {/* TODO: location으로 넘겨서 조건 처리로 우선 적용 ( 고민중 ) */}
+          <Link to="/community/free_board" state={{ location: '/mypage/home' }}>
+            더보러가기 <MdOutlineArrowForwardIos />
+          </Link>
+        </div>
+        {boardPopularListData &&
+        boardPopularListData.data.content.length > 0 ? (
+          <ul className={styles.boardPopularWrapper}>
+            {boardPopularListData.data.content.slice(0, 3).map((content) => (
+              <MyHomePopularCard
+                key={content.boardId}
+                houseId={content.boardId}
+                title={content.title}
+                imgUrl={content.imageUrl}
+                nickName={content.nickName}
+                createdAt={content.createdAt}
+              />
+            ))}
+          </ul>
+        ) : (
+          <NoPosts />
+        )}
+      </article>
+    </section>
+  );
+}
+
+export default MyPageHome;