Fix: 마이페이지 - 등록한 게시글 탭 수정사항 반영

src/components/commons/Kebabmenu/Kebabmenu.module.scss

@@ -1,6 +1,5 @@
 .kebabmenu {
   position: relative;
-  z-index: $kebab-level;
 
   &-more-btn {
     text-align: right;

src/components/commons/Kebabmenu/index.tsx

@@ -19,7 +19,9 @@ type PopupRef = LegacyRef<HTMLUListElement> | undefined;
 const Kebabmenu = ({ onClick }: KebabmenuProps) => {
   const { isOpen, popupRef, buttonRef, togglePopup } = useTogglePopup();
 
-  const handleSetState = (event: MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
     onClick(event.currentTarget.textContent ?? '');
   };
 
@@ -31,15 +33,12 @@ const Kebabmenu = ({ onClick }: KebabmenuProps) => {
       {isOpen && (
         <ul className={cx('kebabmenu-dropdown-list')} ref={popupRef as unknown as PopupRef}>
           <li className={cx('kebabmenu-dropdown-list-item')}>
-            <button className={cx('kebabmenu-dropdown-list-item-btn')} onClick={(event) => handleSetState(event)}>
+            <button className={cx('kebabmenu-dropdown-list-item-btn')} onClick={handleClick}>
               수정
             </button>
           </li>
           <li className={cx('kebabmenu-dropdown-list-item')}>
-            <button
-              className={cx('kebabmenu-dropdown-list-item-btn', 'delete')}
-              onClick={(event) => handleSetState(event)}
-            >
+            <button className={cx('kebabmenu-dropdown-list-item-btn', 'delete')} onClick={handleClick}>
               삭제
             </button>
           </li>

src/components/commons/buttons/MoreButton.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-import { MouseEventHandler } from 'react';
+import { MouseEvent } from 'react';
 
 import classNames from 'classnames/bind';
 
@@ -11,15 +11,21 @@ import styles from './MoreButton.module.scss';
 const cx = classNames.bind(styles);
 
 type MoreButtonProps = {
-  onClick: MouseEventHandler<HTMLButtonElement>;
+  onClick: () => void;
   isActive: boolean;
 };
 
 export const MoreButton = ({ onClick, isActive }: MoreButtonProps) => {
   const { url, alt } = SVGS.button.more;
 
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    onClick();
+  };
+
   return (
-    <button className={cx('btn-more')} aria-label='메뉴 더보기 버튼' aria-pressed={isActive} onClick={onClick}>
+    <button className={cx('btn-more')} aria-label='메뉴 더보기 버튼' aria-pressed={isActive} onClick={handleClick}>
       <Image src={url} alt={alt} width={24} height={24} />
     </button>
   );

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

@@ -4,15 +4,17 @@
   @include responsive(M) {
     gap: 1.6rem;
   }
-}
 
-.title-area {
-  @include flexbox(between, center);
+  position: relative;
 }
 
 .selected-game {
   @include flexbox(start, center, 0.8rem);
 
+  @include responsive(M) {
+    height: 4rem;
+  }
+
   &-title {
     @include text-style(18, $white);
   }
@@ -34,11 +36,15 @@
 
 .filter-sort {
   @include flexbox(between, center);
-
-  position: relative;
 }
 
 .dropdown {
+  @include responsive(M) {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
   flex-shrink: 0;
   width: 12rem;
 }

src/components/mypage/MyPosts/index.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import classNames from 'classnames/bind';
 
-import { GAME_FILTERS, PRICE_TO_POST_TYPES } from '@/constants';
+import { GAME_FILTERS, PRICE_TO_POST_TYPES, SORT_OPTIONS } from '@/constants';
 import { formatCategoryToGameNameKR } from '@/utils';
 import { getPostPageSize } from '@/utils/getPageSize';
 
@@ -37,20 +37,12 @@ const initialSortOption: SortOption<ActivityResponse> = {
   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 currentDeviceType = useDeviceType();
   const pageSize = getPostPageSize(currentDeviceType);
 
   const { pagedDataList, totalCount } = useProcessedDataList({
@@ -63,27 +55,22 @@ const MyPosts = () => {
   });
 
   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 color='yellow' />
-        </div>
-      </div>
+      <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('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 color='yellow' />
+          <div className={cx('dropdown')}>
+            <Dropdown options={SORT_OPTIONS} onChange={handleOptionChange} isSmall color='yellow' />
           </div>
         </div>
         {totalCount ? (