Feat[#98]: 마이페이지 - 등록한 게시글 탭 컨텐츠 구현

src/apis/activities.ts

@@ -4,7 +4,7 @@ import {
   REVIEWS_API,
   RESERVATIONS_API,
   IMAGE_API,
-  PAGE_SIZE,
+  DEFAULT_PAGE_SIZE,
   PAGE_METHOD,
 } from '@/constants';
 
@@ -17,7 +17,7 @@ const Activities = {
 
   getList: () =>
     instance.get(ACTIVITIES_API, {
-      params: { size: PAGE_SIZE, method: PAGE_METHOD },
+      params: { size: DEFAULT_PAGE_SIZE, method: PAGE_METHOD },
     }),
 
   getScheduleList: (activityId: number, year: string, month: string) =>
@@ -27,7 +27,7 @@ const Activities = {
 
   getReviewList: (activityId: number) =>
     instance.get(`${ACTIVITIES_API}/${activityId}${REVIEWS_API}`, {
-      params: { size: PAGE_SIZE },
+      params: { size: DEFAULT_PAGE_SIZE },
     }),
 
   create: (value: ActivityCreateBody) => instance.post(ACTIVITIES_API, value),

src/apis/myActivities.ts

@@ -3,7 +3,7 @@ import {
   RESERVATION_DASHBOARD_API,
   RESERVED_SCHEDULE_API,
   RESERVATIONS_API,
-  PAGE_SIZE,
+  DEFAULT_PAGE_SIZE,
 } from '@/constants';
 
 import { ReservationStatus, EditReservationStatusBody, MyActivitiesBody } from '@/types';
@@ -14,7 +14,7 @@ export const MyActivities = {
   getList: () =>
     instance.get(`${MY_ACTIVITIES_API}`, {
       params: {
-        size: PAGE_SIZE,
+        size: DEFAULT_PAGE_SIZE,
       },
     }),
 
@@ -36,7 +36,7 @@ export const MyActivities = {
   getHourlyReservationList: (activityId: number, scheduleId: number, status: ReservationStatus) =>
     instance.get(`${MY_ACTIVITIES_API}/${activityId}${RESERVATIONS_API}`, {
       params: {
-        size: PAGE_SIZE,
+        size: DEFAULT_PAGE_SIZE,
         scheduleId,
         status,
       },

src/apis/myNotifications.ts

@@ -1,12 +1,12 @@
-import { MY_NOTIFICATIONS_API, PAGE_SIZE } from '@/constants';
+import { MY_NOTIFICATIONS_API, DEFAULT_PAGE_SIZE } from '@/constants';
 
 import instance from './axios';
 
 export const MyNotifications = {
   get: () =>
     instance.get(MY_NOTIFICATIONS_API, {
       params: {
-        size: PAGE_SIZE,
+        size: DEFAULT_PAGE_SIZE,
       },
     }),
 

src/apis/myReservations.ts

@@ -1,4 +1,4 @@
-import { MY_RESERVATIONS_API, PAGE_SIZE, REVIEWS_API } from '@/constants';
+import { MY_RESERVATIONS_API, DEFAULT_PAGE_SIZE, REVIEWS_API } from '@/constants';
 
 import { CreateReviewParams, MyReservationsStatus } from '@/types';
 
@@ -8,7 +8,7 @@ export const MyReservations = {
   get: (status: MyReservationsStatus) =>
     instance.get(MY_RESERVATIONS_API, {
       params: {
-        size: PAGE_SIZE,
+        size: DEFAULT_PAGE_SIZE,
         status,
       },
     }),

src/components/commons/Pagination/index.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 import classNames from 'classnames/bind';
 
-import { PAGE_SIZE, SVGS } from '@/constants';
+import { DEFAULT_PAGE_SIZE, SVGS } from '@/constants';
 
 import usePagination from '@/hooks/usePagination';
 
@@ -32,7 +32,7 @@ const Pagination = ({ totalCount, pageState, postPerPage, onClick }: PaginationP
   } = usePagination(totalCount, pageState, postPerPage, onClick);
 
   const isArrowActivated = currentPageGroupIndex !== pagesArray.length - 1;
-  const showPagination = !!totalCount && totalCount !== PAGE_SIZE;
+  const showPagination = !!totalCount && postPerPage !== DEFAULT_PAGE_SIZE;
 
   return (
     showPagination && (

src/components/mypage/MyPosts/MyPosts.module.scss

@@ -0,0 +1,40 @@
+.mypost-container {
+  @include column-flexbox(start, stretch, 2.4rem);
+}
+
+.title-area {
+  @include flexbox(between, center);
+}
+
+.selected-game {
+  @include flexbox(start, center, 0.8rem);
+
+  &-title {
+    @include text-style(18, $white);
+  }
+
+  &-count {
+    @include text-style(14, $primary, bold);
+  }
+}
+
+.card {
+  &-area {
+    @include column-flexbox(start, stretch, 1.6rem);
+  }
+
+  &-list {
+    @include column-flexbox(start, stretch, 1.2rem);
+  }
+}
+
+.filter-sort {
+  @include flexbox(between, center);
+
+  position: relative;
+}
+
+.dropdown {
+  flex-shrink: 0;
+  width: 12rem;
+}

src/components/mypage/MyPosts/index.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+
+import classNames from 'classnames/bind';
+
+import { GAME_FILTERS, PRICE_TO_POST_TYPES } from '@/constants';
+import { formatCategoryToGameNameKR } from '@/utils';
+import { getPostPageSize } from '@/utils/getPageSize';
+
+import { RegisteredCard } from '@/components/commons/cards';
+import Dropdown from '@/components/commons/Dropdown';
+import Filter from '@/components/commons/Filter';
+import Pagination from '@/components/commons/Pagination';
+import EmptyCard from '@/components/layout/empty/EmptyCard';
+import MockActivityDatas from '@/constants/mockData/myActivitiesMockData.json';
+import { useDeviceType } from '@/hooks/useDeviceType';
+import useProcessedDataList from '@/hooks/useProcessedDataList';
+
+import { ActivityResponse, MyActivitiesResponse, Order, SortOption } from '@/types';
+
+import styles from './MyPosts.module.scss';
+
+const cx = classNames.bind(styles);
+
+const MockApiResponse: MyActivitiesResponse = {
+  cursorId: 0,
+  totalCount: 0,
+  activities: MockActivityDatas,
+};
+
+const initialFilter = {
+  category: GAME_FILTERS[0].id,
+};
+
+const initialSortOption: SortOption<ActivityResponse> = {
+  key: 'createdAt',
+  type: 'date',
+  order: 'desc',
+};
+
+const dropdownOptions: {
+  title: string;
+  value: Order;
+}[] = [
+  { title: '최신순', value: 'desc' },
+  { title: '오래된순', value: 'asc' },
+];
+
+const MyPosts = () => {
+  const [page, setPage] = useState(1);
+  const [selectFilter, setSelectFilter] = useState(initialFilter);
+  const [sortOption, setSortOption] = useState(initialSortOption);
+  const currentDeviceType = useDeviceType();
+
+  const pageSize = getPostPageSize(currentDeviceType);
+
+  const { pagedDataList, totalCount } = useProcessedDataList({
+    initialDataList: MockApiResponse.activities,
+    selectFilter,
+    sortOption,
+    page,
+    setPage,
+    postsPerPage: pageSize,
+  });
+
+  const handleClickPage = (pageNumber: number) => setPage(pageNumber);
+  const handleSelectFilter = (selectedId: string) => setSelectFilter({ category: selectedId });
+  const handleOptionChange = (value: string | number) => setSortOption((prev) => ({ ...prev, order: value as Order }));
+
+  return (
+    <div className={cx('mypost-container')}>
+      <div className={cx('title-area')}>
+        <h2 className={cx('selected-game')}>
+          <span className={cx('selected-game-title')}>
+            {formatCategoryToGameNameKR(selectFilter.category) ?? '전체'}
+          </span>
+          <span className={cx('selected-game-count')}>{totalCount}</span>
+        </h2>
+        <div className={cx('dropdown', 'sm-only')}>
+          <Dropdown options={dropdownOptions} onChange={handleOptionChange} isSmall />
+        </div>
+      </div>
+      <div className={cx('card-area')}>
+        <div className={cx('filter-sort')}>
+          <Filter items={GAME_FILTERS} selectedFilterId={selectFilter.category} onChange={handleSelectFilter} />
+          <div className={cx('dropdown', 'sm-hidden')}>
+            <Dropdown options={dropdownOptions} onChange={handleOptionChange} isSmall />
+          </div>
+        </div>
+        {totalCount ? (
+          <ul className={cx('card-list')}>
+            {pagedDataList.map((data) => (
+              <li key={data.id}>
+                <RegisteredCard
+                  path={''}
+                  postType={PRICE_TO_POST_TYPES[data.price]}
+                  title={data.title}
+                  address={data.address}
+                  category={formatCategoryToGameNameKR(data.category)}
+                  createdAt={data.createdAt}
+                />
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <EmptyCard text='No Post' />
+        )}
+      </div>
+      <Pagination totalCount={totalCount} pageState={page} postPerPage={pageSize} onClick={handleClickPage} />
+    </div>
+  );
+};
+
+export default MyPosts;

src/components/mypage/MypageContent/index.tsx

@@ -6,6 +6,7 @@ import { MYPAGE_TAB_OPTIONS } from '@/constants';
 
 import ProfileSummary from '@/components/commons/ProfileSummary';
 import Tab from '@/components/commons/Tab';
+import MyPosts from '@/components/mypage/MyPosts';
 import { USER_DATA } from '@/constants/mockData/headerMockData';
 import { MY_ACTIVITIES, MY_RESERVATIONS } from '@/constants/mockData/profileSummaryMockData';
 
@@ -14,7 +15,7 @@ import styles from './MypageContent.module.scss';
 const cx = classNames.bind(styles);
 
 const tabContentMap: TabContent = {
-  myPost: <div>MyPostTabContent component here</div>,
+  myPost: <MyPosts />,
   myReservation: <div>ReservedTabContent component here</div>,
   reservationsStatus: <div>ReservationsStatusTabContent component here</div>,
 };

src/constants/paging.ts

@@ -1,4 +1,4 @@
-export const PAGE_SIZE = 1000;
+export const DEFAULT_PAGE_SIZE = 1000;
 
 export const PAGE_METHOD = 'offset';
 

src/constants/postTypes.ts

@@ -1,11 +1,13 @@
+import { PostTypes } from '@/types';
+
 export const POST_TYPES = {
   offline: '오프라인',
   online: '온라인',
   'clan-recruitment': '클랜 모집',
   'game-strategy': '게임 공략',
 };
 
-export const PRICE_TO_POST_TYPES = {
+export const PRICE_TO_POST_TYPES: Record<number, PostTypes> = {
   0: 'offline',
   1: 'online',
   2: 'clan-recruitment',

src/hooks/usePaginatedDataList.ts

@@ -15,7 +15,7 @@ const usePaginatedDataList = <T>({ initialDataList, page, setPage, postsPerPage
 
   useEffect(() => {
     setPage(1);
-  }, [initialDataList, setPage]);
+  }, [initialDataList, postsPerPage, setPage]);
 
   useEffect(() => {
     setPagedDataList(initialDataList.filter((data, index) => index >= startIndex && index < endIndex));

src/utils/getPageSize.ts

@@ -0,0 +1,9 @@
+import { DEFAULT_PAGE_SIZE, POSTS_PER_PAGE, REVIEWS_PER_PAGE } from '@/constants';
+
+import { DeviceType } from '@/types';
+
+export const getPostPageSize = (deviceType: DeviceType) =>
+  deviceType === 'Mobile' ? DEFAULT_PAGE_SIZE : POSTS_PER_PAGE;
+
+export const getReviewPageSize = (deviceType: DeviceType) =>
+  deviceType === 'Mobile' ? DEFAULT_PAGE_SIZE : REVIEWS_PER_PAGE;