From 00a3bee36e5a160cd4bd4dd6d162718ec8782802 Mon Sep 17 00:00:00 2001
From: jellie <talentforest0501@gmail.com>
Date: Tue, 17 Jun 2025 00:59:50 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=A0=84=EC=B2=B4=20=EC=BA=A0=ED=8D=BC?=
 =?UTF-8?q?=EC=8A=A4,=20=EA=B5=90=EC=9C=A1=EA=B3=BC=EC=A0=95=20=ED=95=84?=
 =?UTF-8?q?=ED=84=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: 사용자 관리 전체 캠퍼스, 교육과정 필터
---
 src/components/common/input/SearchInput.tsx   |   4 +-
 src/components/common/table/TableBody.tsx     |  33 ++-
 src/components/lounge/form/LoungeForm.tsx     |   6 +-
 src/components/mypage/MyCollection.tsx        | 101 ++++----
 src/components/notice/NoticePostCard.tsx      |  17 +-
 .../notice/layout/NoticeDisplayList.tsx       |  26 +-
 .../session/ManagingSessionCard.tsx           |   7 +-
 src/hooks/common/useFilterCampusCourse.ts     |  39 ++-
 src/hooks/post/useHandlePostTable.ts          |   2 +-
 .../session/useHandleSessionApplicantList.ts  |  21 +-
 .../SessionApplicantManagementDetail.tsx      | 244 ++++++++++--------
 src/pages/admin/UserManagement.tsx            |  58 ++++-
 src/pages/admin/UserPostCollection.tsx        |  56 ++--
 src/pages/trainee/Lounge.tsx                  |   4 +-
 src/pages/trainee/Notice.tsx                  |   1 +
 src/services/admin/userToManageQueries.ts     |  86 +++---
 src/services/post/loungeQueries.ts            |  12 +-
 src/services/post/myPostQueries.ts            |  62 ++---
 src/services/post/noticeQueries.ts            |  24 +-
 src/services/session/sessionsQueries.ts       |  49 +---
 src/services/store/storeQueries.ts            |   4 +-
 src/types/notice/index.d.ts                   |   4 +-
 src/types/session/index.d.ts                  |   5 +-
 tsconfig.json                                 |   4 +-
 24 files changed, 461 insertions(+), 408 deletions(-)

diff --git a/src/components/common/input/SearchInput.tsx b/src/components/common/input/SearchInput.tsx
index 760e8d1d..89247518 100644
--- a/src/components/common/input/SearchInput.tsx
+++ b/src/components/common/input/SearchInput.tsx
@@ -50,7 +50,7 @@ const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
         className={`flex h-12 w-[422px] items-center justify-between bg-white hover:text-black hover:outline hover:outline-1 hover:outline-gray-300 ${inputStyle === 'rounded' ? 'rounded-full' : 'rounded-xl'} px-4 ${!isFocus && 'text-gray-400'} ${className}`}
         htmlFor={name}
       >
-        {!isFocus && <FaMagnifyingGlass />}
+        {!isFocus && <FaMagnifyingGlass className="mr-2" />}
         <TextInput
           ref={ref}
           name={name}
@@ -59,7 +59,7 @@ const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
           onChange={onChange}
           toggleFocus={onToggleFocus}
           onEnter={handlePressEnter}
-          className="ml-2 border-none px-0"
+          className="border-none px-0"
         />
         {value && value !== '' && (
           <button type="button" onClick={resetChange}>
diff --git a/src/components/common/table/TableBody.tsx b/src/components/common/table/TableBody.tsx
index 88fe1020..aa50d58f 100644
--- a/src/components/common/table/TableBody.tsx
+++ b/src/components/common/table/TableBody.tsx
@@ -1,32 +1,47 @@
 import { ReactNode } from 'react';
 import { Fragment } from 'react/jsx-runtime';
 
+import LoopLoading from '@/components/common/LoopLoading';
+
 interface TableBodyProps<T> {
   paginationList: T[];
   children: (item: T) => ReactNode;
   colLength: number;
+  isLoading: boolean;
 }
 
 export default function TableBody<T extends { createdAt: string }>({
   paginationList,
   children,
   colLength,
+  isLoading,
 }: TableBodyProps<T>) {
   return (
     <tbody>
-      {paginationList.length !== 0 ? (
-        paginationList.map(pageItem => (
-          <Fragment key={pageItem.createdAt}>{children(pageItem)}</Fragment>
-        ))
-      ) : (
+      {isLoading && (
         <tr>
-          <td colSpan={colLength}>
-            <span className="flex justify-center py-14 text-mainGray">
-              아직 정보가 없어요
-            </span>
+          <td colSpan={5} className="mx-auto">
+            <div className="flex justify-center py-3">
+              <LoopLoading size={115} />
+            </div>
           </td>
         </tr>
       )}
+
+      {!isLoading &&
+        (paginationList.length !== 0 ? (
+          paginationList.map(pageItem => (
+            <Fragment key={pageItem.createdAt}>{children(pageItem)}</Fragment>
+          ))
+        ) : (
+          <tr>
+            <td colSpan={colLength}>
+              <span className="flex justify-center py-14 text-mainGray">
+                아직 정보가 없어요
+              </span>
+            </td>
+          </tr>
+        ))}
     </tbody>
   );
 }
diff --git a/src/components/lounge/form/LoungeForm.tsx b/src/components/lounge/form/LoungeForm.tsx
index c1bd9fb6..cddcf620 100644
--- a/src/components/lounge/form/LoungeForm.tsx
+++ b/src/components/lounge/form/LoungeForm.tsx
@@ -83,10 +83,10 @@ export default function LoungeForm() {
   const { data: projectsDetail } = useGetPostDetail<LoungeDto.GetProjectDetail>(
     Number(modifyProjectId || 0),
   );
-  const { mutateAsync: postProject } =
+  const { mutateAsync: postProject, isPending: isPostProjectPending } =
     usePostMyPost<LoungeDto.PostProjectParams>();
 
-  const { mutateAsync: putProject } =
+  const { mutateAsync: putProject, isPending: isEditProjectPending } =
     usePutMyPost<LoungeDto.PostProjectParams>();
 
   const { techStackList } = useTechStackList();
@@ -114,6 +114,8 @@ export default function LoungeForm() {
   const { handleImagesInHtmlContent } = useHandleImage();
 
   const onSubmit: SubmitHandler<FormValues> = async data => {
+    if (isPostProjectPending || isEditProjectPending) return;
+
     const descriptionWithHandledImage = await handleImagesInHtmlContent(
       data.projectDescription,
       modifyProjectId ? projectsDetail?.description : undefined,
diff --git a/src/components/mypage/MyCollection.tsx b/src/components/mypage/MyCollection.tsx
index 4cae23fe..2b814d13 100644
--- a/src/components/mypage/MyCollection.tsx
+++ b/src/components/mypage/MyCollection.tsx
@@ -133,60 +133,61 @@ export default function MyCollection() {
         currCollection={currCollection}
         onTabClick={(collection: Collection) => {
           initializePostCheckedBoxList();
-          handleChangeFilter({ postTypes: [] });
+          handleChangeFilter({ postTypes: [], page: 1 });
           setCurrCollection(collection);
         }}
       />
 
       {currCollection !== '내가 찜한 글' && (
         <>
-          <div className="mb-8 flex min-h-[230px] flex-col rounded-[20px] bg-white p-6">
-            {!isMyPostListLoading && !isMyCommentListLoading && (
-              <TableContainer colWidthList={[3, 10, 12, 64, 6]}>
-                <TableHeader
-                  headerCellList={headerCellList}
-                  currCollection={currCollection}
-                  isCheckBoxChecked={isCheckBoxChecked}
-                  disabledCheckBox={false}
-                  onCheckboxClick={onCheckBoxClick}
-                  onChangeOrder={onChangeOrder}
-                  categoryOptionList={contentList.categoryOptionList}
-                  checkedCategoryOptionList={checkedCategoryOptionList}
-                  onChangeCategory={onChangeCategory}
-                  disabledDelete={disabledDelete}
-                  onDeleteConfirmClick={() =>
-                    onDeleteConfirmClick(currCollection, checkedPostIdList)
-                  }
-                />
-                <TableBody<UserPost | UserComment>
-                  paginationList={currPostList?.content || []}
-                  colLength={5}
-                >
-                  {post => (
-                    <PostTableRow
-                      headerCellList={headerCellList}
-                      post={post}
-                      handleShowDialog={handleShowDialog}
-                      checkedPostIdList={checkedPostIdList}
-                      onPostCheckboxChange={onPostCheckboxChange}
-                      onDeleteConfirmClick={(postId: number) =>
-                        onDeleteConfirmClick(currCollection, [postId])
-                      }
-                    />
-                  )}
-                </TableBody>
-              </TableContainer>
-            )}
+          <div className="mb-8 flex min-h-[220px] flex-col rounded-[20px] bg-white px-6 pb-4 pt-6">
+            <TableContainer colWidthList={[3, 10, 12, 64, 6]}>
+              <TableHeader
+                headerCellList={headerCellList}
+                currCollection={currCollection}
+                isCheckBoxChecked={isCheckBoxChecked}
+                disabledCheckBox={false}
+                onCheckboxClick={onCheckBoxClick}
+                onChangeOrder={onChangeOrder}
+                categoryOptionList={contentList.categoryOptionList}
+                checkedCategoryOptionList={checkedCategoryOptionList}
+                onChangeCategory={onChangeCategory}
+                disabledDelete={disabledDelete}
+                onDeleteConfirmClick={() =>
+                  onDeleteConfirmClick(currCollection, checkedPostIdList)
+                }
+              />
+              <TableBody<UserPost | UserComment>
+                paginationList={currPostList?.content || []}
+                colLength={5}
+                isLoading={isMyCommentListLoading || isMyPostListLoading}
+              >
+                {post => (
+                  <PostTableRow
+                    headerCellList={headerCellList}
+                    post={post}
+                    handleShowDialog={handleShowDialog}
+                    checkedPostIdList={checkedPostIdList}
+                    onPostCheckboxChange={onPostCheckboxChange}
+                    onDeleteConfirmClick={(postId: number) =>
+                      onDeleteConfirmClick(currCollection, [postId])
+                    }
+                  />
+                )}
+              </TableBody>
+            </TableContainer>
           </div>
 
-          <Pagination
-            totalPages={totalPage || 1}
-            currentPage={tableFilter.page}
-            onPageChange={(page: number) => {
-              handleChangeFilter({ page, size: 3 });
-              initializePostCheckedBoxList();
-            }}
-          />
+          {totalPage && (
+            <Pagination
+              totalPages={totalPage}
+              currentPage={tableFilter.page}
+              onPageChange={(page: number) => {
+                handleChangeFilter({ page, size: 3 });
+                initializePostCheckedBoxList();
+              }}
+            />
+          )}
         </>
       )}
 
@@ -195,11 +196,9 @@ export default function MyCollection() {
           {!isScrapedPostListLoading &&
             (scrapedPostList?.content.length !== 0 ? (
               <ul className="grid min-h-[230px] grid-cols-3 gap-5">
-                {scrapedPostList?.content
-                  ?.slice(0, 3)
-                  ?.map(card => (
-                    <ScrapedPostCard key={card.postId} card={card} />
-                  ))}
+                {scrapedPostList?.content?.map(card => (
+                  <ScrapedPostCard key={card.postId} card={card} />
+                ))}
               </ul>
             ) : (
               <div className="flex h-[230px] items-center justify-center rounded-[20px] border bg-white p-3">
diff --git a/src/components/notice/NoticePostCard.tsx b/src/components/notice/NoticePostCard.tsx
index d8951ceb..4f60bd51 100644
--- a/src/components/notice/NoticePostCard.tsx
+++ b/src/components/notice/NoticePostCard.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { useNoticeIncrementViewCount } from '@/services/post/noticeMutations';
 
@@ -33,15 +33,20 @@ export default function NoticePostCard({ notice }: NoticePostCardProps) {
 
   const { mutateAsync: postViewCount } = useNoticeIncrementViewCount();
 
+  const navigate = useNavigate();
+
   const onViewCount = useCallback(async () => {
     await postViewCount({ noticeId: notice.noticeId });
-  }, [notice.noticeId, postViewCount]);
+    navigate(`/notice/post/${notice.postId}`);
+  }, [navigate, notice.noticeId, notice.postId, postViewCount]);
 
   return (
-    <Link
-      to={`/notice/post/${notice.postId}`}
-      className="flex w-full flex-col rounded-2xl bg-white p-4 px-6 py-4"
+    <div
+      role="button"
+      tabIndex={0}
+      className="flex w-full cursor-pointer flex-col rounded-2xl bg-white p-4 px-6 py-4"
       onClick={onViewCount}
+      onKeyDown={e => e.key === 'Enter' && onViewCount()}
     >
       <div className="flex w-full items-center justify-between">
         <Tag
@@ -85,6 +90,6 @@ export default function NoticePostCard({ notice }: NoticePostCardProps) {
           {formatDate(notice.createdDateTime)}
         </div>
       </div>
-    </Link>
+    </div>
   );
 }
diff --git a/src/components/notice/layout/NoticeDisplayList.tsx b/src/components/notice/layout/NoticeDisplayList.tsx
index d2598c0d..45c5cb39 100644
--- a/src/components/notice/layout/NoticeDisplayList.tsx
+++ b/src/components/notice/layout/NoticeDisplayList.tsx
@@ -1,6 +1,5 @@
 import {
   useGetCloseSoonNoticeList,
-  useGetInfiniteNoticeList,
   useGetThisWeekNoticeList,
 } from '@/services/post/noticeQueries';
 
@@ -8,7 +7,7 @@ import { HasAdminRole, NoticeDisplay } from '@/types';
 
 import TitleLinkWithRoleTag from '@/components/common/TitleLinkWithRoleTag';
 
-type NoticeTitle = '공지사항' | 'NEW' | '마감임박';
+type NoticeTitle = 'NEW' | '마감임박';
 
 interface NoticeInfoListProps {
   title: NoticeTitle;
@@ -19,40 +18,29 @@ export default function NoticeDisplayList({
   title,
   className = '',
 }: NoticeInfoListProps) {
-  const {
-    data: thisWeekNoticeList = [],
-    isLoading: isInfiniteNoticListLoading,
-  } = useGetThisWeekNoticeList();
-
-  const {
-    data = {
-      pages: [{ notices: [] }],
-    },
-    isLoading: isInfiniteNoticeListLoading,
-  } = useGetInfiniteNoticeList({ page: 1, size: 4 });
-
   const {
     data: closeSoonNoticeList = [],
     isLoading: isCloseSoonNoticeList, //
   } = useGetCloseSoonNoticeList({ size: 4, days: 7 });
 
-  const isLoading =
-    isCloseSoonNoticeList ||
-    isInfiniteNoticeListLoading ||
-    isInfiniteNoticListLoading;
+  const {
+    data: thisWeekNoticeList = [],
+    isLoading: isInfiniteNoticListLoading,
+  } = useGetThisWeekNoticeList();
 
   const noticeObj: {
     [key in NoticeTitle]: (NoticeDisplay & {
       manager?: { role: keyof HasAdminRole };
     })[];
   } = {
-    공지사항: data.pages[0].notices,
     마감임박: closeSoonNoticeList,
     NEW: thisWeekNoticeList,
   };
 
   const noticeDisplayList = noticeObj[title];
 
+  const isLoading = isCloseSoonNoticeList || isInfiniteNoticListLoading;
+
   return (
     !isLoading &&
     (noticeDisplayList?.length !== 0 ? (
diff --git a/src/components/session/ManagingSessionCard.tsx b/src/components/session/ManagingSessionCard.tsx
index b59d024c..a8033154 100644
--- a/src/components/session/ManagingSessionCard.tsx
+++ b/src/components/session/ManagingSessionCard.tsx
@@ -63,7 +63,10 @@ export default function ManagingSessionCard({
         )}
       </div>
 
-      <h4 className="mt-3 line-clamp-2 text-xl font-medium text-black">
+      <h4
+        className="mt-3 line-clamp-2 text-xl font-medium text-black"
+        title={`${title} ${session.ordinal}회차`}
+      >
         {title} {session.ordinal}회차
       </h4>
 
@@ -74,7 +77,7 @@ export default function ManagingSessionCard({
           {meetingPlace &&
             (meetingType === 'ONLINE' ? (
               <a
-                href={meetingPlace} // NOTE: url 변경하기
+                href={meetingPlace}
                 target="_blank"
                 rel="noreferrer"
                 className="overflow-x-scroll truncate whitespace-nowrap text-blue-300 underline underline-offset-1 scrollbar-hide"
diff --git a/src/hooks/common/useFilterCampusCourse.ts b/src/hooks/common/useFilterCampusCourse.ts
index ad374999..9630d6b9 100644
--- a/src/hooks/common/useFilterCampusCourse.ts
+++ b/src/hooks/common/useFilterCampusCourse.ts
@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import {
   initialUserProfile,
   useGetUserProfile,
@@ -20,28 +22,41 @@ export const useFilterCampusCourse = ({
    * 캠퍼스 목록
    * - 매니저가 '갖고 있는' 캠퍼스만 나타낸다.
    * */
-  const campusOptionList = campusList?.map(({ id, campusName }) => ({
-    id,
-    name: campusName,
-  }));
+  const campusOptionList = [
+    { id: 0, campusName: '전체캠퍼스' },
+    ...campusList,
+  ]?.map(({ id, campusName }) => ({ id, name: campusName }));
 
-  const currCampusId = selectedCampusId || campusList[0]?.id;
+  const currCampusId = selectedCampusId || campusOptionList[0]?.id;
 
   const selectedCampusOption = campusOptionList?.find(
     ({ id }) => id === currCampusId,
   );
 
-  const courseListByCampusData = useGetCourseListByCampus([currCampusId]);
-
-  const courseListByCampus = courseListByCampusData[0].data;
+  const courseListByCampusData = useGetCourseListByCampus(
+    currCampusId === 0 || !currCampusId ? [] : [currCampusId],
+  );
 
   /**
    * 캠퍼스별 교육과정 목록
    * - 매니저가 '갖고 있는' 캠퍼스별 교육과정만 나타낸다.
    */
-  const courseOptionList = (courseListByCampus || [])
-    .map(({ id, title: name }) => ({ id, name }))
-    .filter(({ id }) => !!courseList.find(({ courseId }) => courseId === id));
+  const courseOptionList = useMemo(() => {
+    const selectAllCourseOption = { id: 0, name: '전체 교육과정' };
+
+    if (selectedCampusId === 0 || !selectedCampusId) {
+      return [selectAllCourseOption];
+    }
+
+    const courseListByCampus = courseListByCampusData[0]?.data;
+    const allCourseList =
+      courseListByCampus?.map(({ id, title: name }) => ({ id, name })) || [];
+
+    return [selectAllCourseOption, ...allCourseList].filter(
+      ({ id }) =>
+        id === 0 || !!courseList.find(({ courseId }) => courseId === id),
+    );
+  }, [courseList, courseListByCampusData, selectedCampusId]);
 
   const selectedCourseOption =
     courseOptionList?.find(({ id }) => id === selectedCourseId) ||
@@ -52,6 +67,6 @@ export const useFilterCampusCourse = ({
     selectedCampusOption,
     courseOptionList,
     selectedCourseOption,
-    courseListByCampus,
+    courseListByCampusData,
   };
 };
diff --git a/src/hooks/post/useHandlePostTable.ts b/src/hooks/post/useHandlePostTable.ts
index cc1fbaaa..cf19bd88 100644
--- a/src/hooks/post/useHandlePostTable.ts
+++ b/src/hooks/post/useHandlePostTable.ts
@@ -70,7 +70,7 @@ export const useHandlePostTable = <T extends string>({
 
   const onChangeCategory = (optionList: Option[]) => {
     const postTypes = optionList.map(({ key }) => key as PostTypeKey);
-    handleChangeFilter({ postTypes });
+    handleChangeFilter({ postTypes, page: 1 });
   };
 
   const onChangeOrder = () => {
diff --git a/src/hooks/session/useHandleSessionApplicantList.ts b/src/hooks/session/useHandleSessionApplicantList.ts
index 0d7da4e6..bf5f5815 100644
--- a/src/hooks/session/useHandleSessionApplicantList.ts
+++ b/src/hooks/session/useHandleSessionApplicantList.ts
@@ -11,6 +11,8 @@ import { useGetSessionApplicantList } from '@/services/session/sessionsQueries';
 import { Applicant, AppliedSessionStatusKey } from '@/types';
 
 interface UseHandleSessionApplicantListProps {
+  page: number;
+  size: number;
   sessionId: number;
   searchParticipantStatus?: AppliedSessionStatusKey;
 }
@@ -23,10 +25,9 @@ const initialApplicantList = {
   nextPage: null,
 };
 
-export const useHandleSessionApplicantList = ({
-  sessionId,
-  searchParticipantStatus,
-}: UseHandleSessionApplicantListProps) => {
+export const useHandleSessionApplicantList = (
+  params: UseHandleSessionApplicantListProps,
+) => {
   const [checkedList, setCheckedList] = useState<
     { participantId: number; name: string; status: AppliedSessionStatusKey }[]
   >([]);
@@ -34,18 +35,13 @@ export const useHandleSessionApplicantList = ({
   const queryClient = useQueryClient();
 
   const {
-    data: { content: applicantList = [] } = initialApplicantList,
+    data: { content: applicantList = [], totalPages } = initialApplicantList,
     isLoading: isApplicantListLoading,
-  } = useGetSessionApplicantList({
-    sessionId,
-    page: 1,
-    size: 10,
-    searchParticipantStatus,
-  });
+  } = useGetSessionApplicantList(params);
 
   const invalidateQueries = async () => {
     await queryClient.invalidateQueries({
-      queryKey: ['useGetSessionApplicantList', sessionId],
+      queryKey: ['useGetSessionApplicantList', params.sessionId],
     });
   };
 
@@ -96,6 +92,7 @@ export const useHandleSessionApplicantList = ({
 
   return {
     applicantList,
+    totalPages,
     isApplicantListLoading,
     checkedList,
     onCheckedChange,
diff --git a/src/pages/admin/SessionApplicantManagementDetail.tsx b/src/pages/admin/SessionApplicantManagementDetail.tsx
index eb262a08..bcd7608f 100644
--- a/src/pages/admin/SessionApplicantManagementDetail.tsx
+++ b/src/pages/admin/SessionApplicantManagementDetail.tsx
@@ -11,6 +11,7 @@ import {
 } from '@/constants';
 import {
   useDialogContext,
+  useFilterData,
   useHandleSessionApplicantList,
   useHandleTabNavigation,
 } from '@/hooks';
@@ -27,17 +28,28 @@ import { formatDate, getDDay } from '@/utils';
 import { BsCalendar, BsCalendar2Minus, BsClock } from 'react-icons/bs';
 
 import EmptyContent from '@/components/common/EmptyContent';
+import Pagination from '@/components/common/Pagination';
 import TabNavigation from '@/components/common/TabNavigation';
 import SquareButton from '@/components/common/button/SquareButton';
 import Checkbox from '@/components/common/checkbox/Checkbox';
 import Modal from '@/components/common/modal/Modal';
 import MyCourseListWithHover from '@/components/user/MyCourseListWithHover';
 
+const initialFilter = {
+  page: 1,
+  size: 1,
+};
+
 export default function SessionApplicantManagementDetail() {
   const { state } = useLocation() as {
     state?: { sessionDetail: NoticeSessionDetail };
   };
 
+  const {
+    currFilter: tableFilter,
+    handleChangeFilter, //
+  } = useFilterData({ initialFilter });
+
   const { postId } = useParams();
   const [searchParams] = useSearchParams();
 
@@ -62,6 +74,7 @@ export default function SessionApplicantManagementDetail() {
 
   const {
     applicantList,
+    totalPages,
     isApplicantListLoading,
     checkedList,
 
@@ -74,6 +87,7 @@ export default function SessionApplicantManagementDetail() {
     rejectApplicant,
     isPending,
   } = useHandleSessionApplicantList({
+    ...tableFilter,
     sessionId: session?.sessionId || +currSessionId!,
     searchParticipantStatus:
       tabName === 'ALL' ? undefined : (tabName as AppliedSessionStatusKey),
@@ -193,38 +207,41 @@ export default function SessionApplicantManagementDetail() {
       <Header
         title="특강 / 행사 신청 현황"
         subTitleChildren={
-          <div className="flex items-center gap-4">
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
             <span className="text-[#A2C27D]">
               {noticeDetail?.title} {session.ordinal}회차
             </span>
-            <div className="flex items-center gap-1">
-              <span className="text-[15px] text-darkGray">일자</span>
-              <BsCalendar size={13} className="text-darkGray" />{' '}
-              <span className="text-[15px] text-darkGray">
-                {formatDate(session.sessionStartDateTime, 'yyyy.MM.dd')}{' '}
-              </span>
-            </div>
 
-            <div className="flex items-center gap-1">
-              <span className="text-[15px] text-darkGray">시간</span>
-              <BsClock size={13} className="text-darkGray" />
-              <span className="text-[15px] text-darkGray">
-                {formatDate(session.sessionStartDateTime, 'HH:mm')}~
-                {formatDate(session.sessionEndDateTime, 'HH:mm')}
-              </span>
-            </div>
-
-            <div className="flex items-center gap-1">
-              <span className="text-[15px] text-darkGray">마감</span>
-              <BsCalendar2Minus size={13} className="text-darkGray" />
-              <span className="text-[15px] text-darkGray">
-                {formatDate(
-                  noticeDetail?.applicationEndDateTime,
-                  'yyyy.MM.dd HH:mm',
-                )}{' '}
-                {noticeDetail?.applicationEndDateTime &&
-                  `(D${getDDay(noticeDetail?.applicationEndDateTime)})`}
-              </span>
+            <div className="flex gap-x-4">
+              <div className="flex items-center gap-1">
+                <span className="text-[15px] text-darkGray">일자</span>
+                <BsCalendar size={13} className="text-darkGray" />{' '}
+                <span className="text-[15px] text-darkGray">
+                  {formatDate(session.sessionStartDateTime, 'yyyy.MM.dd')}{' '}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-1">
+                <span className="text-[15px] text-darkGray">시간</span>
+                <BsClock size={13} className="text-darkGray" />
+                <span className="text-[15px] text-darkGray">
+                  {formatDate(session.sessionStartDateTime, 'HH:mm')}~
+                  {formatDate(session.sessionEndDateTime, 'HH:mm')}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-1">
+                <span className="text-[15px] text-darkGray">마감</span>
+                <BsCalendar2Minus size={13} className="text-darkGray" />
+                <span className="text-[15px] text-darkGray">
+                  {formatDate(
+                    noticeDetail?.applicationEndDateTime,
+                    'yyyy.MM.dd HH:mm',
+                  )}{' '}
+                  {noticeDetail?.applicationEndDateTime &&
+                    `(D${getDDay(noticeDetail?.applicationEndDateTime)})`}
+                </span>
+              </div>
             </div>
           </div>
         }
@@ -289,87 +306,98 @@ export default function SessionApplicantManagementDetail() {
           className="h-full rounded-[20px] bg-lightGray py-20"
         />
       ) : (
-        <ul className="space-y-4">
-          {!isApplicantListLoading &&
-            applicantList?.map(
-              ({
-                noticeParticipantId,
-                userName,
-                campuses,
-                courses,
-                email,
-                phoneNumber,
-                applicationDateTime,
-                status,
-              }) => {
-                const userCampuses = campuses
-                  ?.map(({ name }) => name.slice(0, -3))
-                  .join(', ');
-
-                return (
-                  <li key={noticeParticipantId} className="flex items-center">
-                    {getSessionStatus(session.sessionEndDateTime) ===
-                      'ACTIVE' && (
-                      <Checkbox
-                        id="applicant"
-                        checked={
-                          !!checkedList.find(
-                            ({ participantId: id }) =>
-                              id === noticeParticipantId,
-                          )
-                        }
-                        onChange={() =>
-                          onCheckedChange({
-                            noticeParticipantId,
-                            status,
-                            userName,
-                          })
-                        }
-                        inputClassName="bg-white !size-5 !mr-3"
-                      />
-                    )}
-
-                    <div
-                      className={`relative w-full ${gridStyle} items-center rounded-2xl bg-white py-4 shadow-card [&>*]:text-center [&>span]:truncate`}
-                    >
-                      <span className="text-darkGray-active" title={userName}>
-                        {userName}
-                      </span>
-                      <span
-                        className="text-darkGray-active"
-                        title={`${userCampuses}` || '정보 없음'}
+        <>
+          <ul className="space-y-4">
+            {!isApplicantListLoading &&
+              applicantList?.map(
+                ({
+                  noticeParticipantId,
+                  userName,
+                  campuses,
+                  courses,
+                  email,
+                  phoneNumber,
+                  applicationDateTime,
+                  status,
+                }) => {
+                  const userCampuses = campuses
+                    ?.map(({ name }) => name.slice(0, -3))
+                    .join(', ');
+
+                  return (
+                    <li key={noticeParticipantId} className="flex items-center">
+                      {getSessionStatus(session.sessionEndDateTime) ===
+                        'ACTIVE' && (
+                        <Checkbox
+                          id="applicant"
+                          checked={
+                            !!checkedList.find(
+                              ({ participantId: id }) =>
+                                id === noticeParticipantId,
+                            )
+                          }
+                          onChange={() =>
+                            onCheckedChange({
+                              noticeParticipantId,
+                              status,
+                              userName,
+                            })
+                          }
+                          inputClassName="bg-white !size-5 !mr-3"
+                        />
+                      )}
+
+                      <div
+                        className={`relative w-full ${gridStyle} items-center rounded-2xl bg-white py-4 shadow-card [&>*]:text-center [&>span]:truncate`}
                       >
-                        {`${userCampuses}` || '정보 없음'}
-                      </span>
-
-                      <MyCourseListWithHover
-                        courseList={courses.map(({ name }) => ({
-                          courseTitle: name,
-                        }))}
-                        hoverBoxClassName="w-[400px]"
-                      />
-
-                      <span className="text-darkGray-active" title={email}>
-                        {email}
-                      </span>
-                      <span
-                        className="text-darkGray-active"
-                        title={phoneNumber}
-                      >
-                        {phoneNumber}
-                      </span>
-                      <span className="text-darkGray-active">
-                        {formatDate(applicationDateTime, 'MM.dd HH:mm') || '-'}
-                      </span>
-                      <span className={` ${STATUS_STYLES[status]}`}>
-                        {appliedSessionStatusObj[status]}
-                      </span>
-                    </div>
-                  </li>
-                );
-              },
-            )}
-        </ul>
+                        <span className="text-darkGray-active" title={userName}>
+                          {userName}
+                        </span>
+                        <span
+                          className="text-darkGray-active"
+                          title={`${userCampuses}` || '정보 없음'}
+                        >
+                          {`${userCampuses}` || '정보 없음'}
+                        </span>
+
+                        <MyCourseListWithHover
+                          courseList={courses.map(({ name }) => ({
+                            courseTitle: name,
+                          }))}
+                          hoverBoxClassName="w-[400px]"
+                        />
+
+                        <span className="text-darkGray-active" title={email}>
+                          {email}
+                        </span>
+                        <span
+                          className="text-darkGray-active"
+                          title={phoneNumber}
+                        >
+                          {phoneNumber}
+                        </span>
+                        <span className="text-darkGray-active">
+                          {formatDate(applicationDateTime, 'MM.dd HH:mm') ||
+                            '-'}
+                        </span>
+                        <span className={` ${STATUS_STYLES[status]}`}>
+                          {appliedSessionStatusObj[status]}
+                        </span>
+                      </div>
+                    </li>
+                  );
+                },
+              )}
+          </ul>
+
+          <Pagination
+            totalPages={totalPages}
+            currentPage={tableFilter.page}
+            onPageChange={(page: number) => {
+              handleChangeFilter({ page });
+            }}
+          />
+        </>
       )}
     </MainView>
   );
diff --git a/src/pages/admin/UserManagement.tsx b/src/pages/admin/UserManagement.tsx
index 545d0e03..6c5c4ecb 100644
--- a/src/pages/admin/UserManagement.tsx
+++ b/src/pages/admin/UserManagement.tsx
@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import {
   UserManagementFilter,
   useGetInfiniteTraineeList,
@@ -38,7 +40,7 @@ type InitialFilter = Pick<
 
 const initialFilter: InitialFilter = {
   page: 1,
-  size: 7,
+  size: 10,
   keyword: '',
 };
 
@@ -64,17 +66,29 @@ export default function UserManagement() {
     selectedCampusOption,
     courseOptionList,
     selectedCourseOption,
-    courseListByCampus,
+    courseListByCampusData,
   } = useFilterCampusCourse({ selectedCampusId, selectedCourseId });
 
-  const userFilter = {
-    ...debouncedFilter,
-    campusId: selectedCampusId || campusOptionList[0]?.id,
-    courseId: selectedCourseId || courseOptionList[0]?.id,
-  };
+  const campusAndCourseId = useMemo(() => {
+    const selectAllCourseOption =
+      !selectedCampusId ||
+      selectedCampusId === 0 ||
+      !selectedCourseId ||
+      selectedCourseId === 0;
+
+    const courseId = !selectAllCourseOption
+      ? { courseId: selectedCourseId }
+      : {};
+
+    return selectedCampusId && selectedCampusId !== 0
+      ? { campusId: selectedCampusId, ...courseId }
+      : {};
+  }, [selectedCampusId, selectedCourseId]);
 
   const currTab = (tabName ?? 'trainee-list') as UserManagementTabType;
 
+  const userFilter = { ...debouncedFilter, ...campusAndCourseId };
+
   const { data: userList } = useGetInfiniteUserList(currTab, userFilter);
 
   const { data: traineeList } = useGetInfiniteTraineeList(currTab, userFilter);
@@ -105,7 +119,13 @@ export default function UserManagement() {
             ? userManagementTabListForHasSuperAdmin
             : userManagementTabList
         }
-        onChangeValue={handleChangeTab}
+        onChangeValue={(type: string) => {
+          if (currTab !== type) {
+            setSelectedCampusId(campusOptionList[0].id);
+            setSelectedCourseId(courseOptionList[0].id);
+          }
+          handleChangeTab(type);
+        }}
         tabClassName="!p-3"
       />
 
@@ -115,18 +135,29 @@ export default function UserManagement() {
             defaultLabel="캠퍼스 선택"
             options={campusOptionList}
             selectedOption={selectedCampusOption}
-            onChangeValue={option => setSelectedCampusId(option[0].id)}
+            onChangeValue={option => {
+              if (selectedCampusId !== option[0].id) {
+                handleChangeFilter({ page: initialFilter.page });
+              }
+              setSelectedCampusId(option[0].id);
+            }}
             selectBoxClassName="w-full rounded-xl border-0 justify-between items-center h-12"
             optionClassName="text-lg hover:bg-lightGray-active !py-2 pl-1 data-[selected=true]:text-black data-[selected=true]:font-bold"
           />
         )}
 
-        {courseListByCampus?.length !== 0 && (
+        {courseListByCampusData[0]?.data?.length !== 0 && (
           <SingleSelectDropdown
             defaultLabel="교육과정 선택"
             options={courseOptionList}
             selectedOption={selectedCourseOption}
-            onChangeValue={option => setSelectedCourseId(option[0].id)}
+            onChangeValue={option => {
+              if (selectedCourseId !== option[0].id) {
+                setSelectedCourseId(courseOptionList[0].id);
+                handleChangeFilter({ page: initialFilter.page });
+              }
+              setSelectedCourseId(option[0].id);
+            }}
             selectBoxClassName="!max-w-[450px] rounded-xl border-0 justify-between items-center h-12"
             optionClassName="text-lg hover:bg-lightGray-active !py-2 pl-1 data-[selected=true]:text-black data-[selected=true]:font-bold"
           />
@@ -136,7 +167,10 @@ export default function UserManagement() {
           name="search"
           value={currFilter.keyword}
           placeholder="이름을 입력해주세요."
-          onChange={handleChangeKeyword}
+          onChange={event => {
+            handleChangeFilter({ page: initialFilter.page });
+            handleChangeKeyword(event);
+          }}
           className="ml-auto text-lg"
           inputStyle="square"
           resetChange={handleResetFilter}
diff --git a/src/pages/admin/UserPostCollection.tsx b/src/pages/admin/UserPostCollection.tsx
index 1ae273b4..33b7e144 100644
--- a/src/pages/admin/UserPostCollection.tsx
+++ b/src/pages/admin/UserPostCollection.tsx
@@ -129,41 +129,43 @@ export default function UserPostCollection({
       <PostCollectionTabList<UserCollection>
         collectionList={['게시글', '댓글', '찜한 글']}
         currCollection={currCollection}
-        onTabClick={onCollectionTabClick}
+        onTabClick={(collection: UserCollection) => {
+          handleChangeFilter({ postTypes: [], page: 1 });
+          onCollectionTabClick(collection);
+        }}
         user={{ userId, username }}
       />
 
       {currCollection !== '찜한 글' && (
         <div className="flex flex-col gap-y-6">
           <div className="flex !min-h-[270px] flex-1 flex-col rounded-[20px] border border-mainGray-hover bg-white px-4 py-5 pb-4">
-            {!isUserPostListLoading && !isUserCommentListLoading && (
-              <TableContainer colWidthList={[18, 20, 55]}>
-                <TableHeader<UserCollection>
-                  headerCellList={headerCellList}
-                  currCollection={currCollection}
-                  onChangeOrder={onChangeOrder}
-                  categoryOptionList={contentList.categoryOptionList}
-                  checkedCategoryOptionList={checkedCategoryOptionList}
-                  onChangeCategory={onChangeCategory}
-                />
-
-                <TableBody<UserPost | UserComment>
-                  colLength={3}
-                  paginationList={currPostList?.content || []}
-                >
-                  {post => (
-                    <PostTableRow
-                      headerCellList={headerCellList}
-                      handleShowDialog={handleShowDialog}
-                      post={post}
-                    />
-                  )}
-                </TableBody>
-              </TableContainer>
-            )}
+            <TableContainer colWidthList={[18, 20, 55]}>
+              <TableHeader<UserCollection>
+                headerCellList={headerCellList}
+                currCollection={currCollection}
+                onChangeOrder={onChangeOrder}
+                categoryOptionList={contentList.categoryOptionList}
+                checkedCategoryOptionList={checkedCategoryOptionList}
+                onChangeCategory={onChangeCategory}
+              />
+
+              <TableBody<UserPost | UserComment>
+                colLength={3}
+                paginationList={currPostList?.content || []}
+                isLoading={isUserPostListLoading || isUserCommentListLoading}
+              >
+                {post => (
+                  <PostTableRow
+                    headerCellList={headerCellList}
+                    handleShowDialog={handleShowDialog}
+                    post={post}
+                  />
+                )}
+              </TableBody>
+            </TableContainer>
           </div>
 
-          {currPostList?.content?.length !== 0 && (
+          {currPostList?.content?.length !== 0 && totalPage && (
             <Pagination
               totalPages={totalPage || 1}
               currentPage={tableFilter.page}
diff --git a/src/pages/trainee/Lounge.tsx b/src/pages/trainee/Lounge.tsx
index 0a452050..24c07d73 100644
--- a/src/pages/trainee/Lounge.tsx
+++ b/src/pages/trainee/Lounge.tsx
@@ -47,7 +47,7 @@ export default function Lounge() {
   const pType = searchParams.get('pType');
 
   const {
-    data: { projects = [], totalPages, currentPage } = initialProjectList,
+    data: { projects = [], totalPages } = initialProjectList,
     isLoading,
   } = useGetLoungeProjectList(debouncedFilter);
 
@@ -171,7 +171,7 @@ export default function Lounge() {
       {projects.length !== 0 && (
         <Pagination
           totalPages={totalPages}
-          currentPage={currentPage}
+          currentPage={currFilter.page}
           onPageChange={(pageNumber: number) => {
             handleChangeFilter({ page: pageNumber });
           }}
diff --git a/src/pages/trainee/Notice.tsx b/src/pages/trainee/Notice.tsx
index 58d6fcf4..afd48c1f 100644
--- a/src/pages/trainee/Notice.tsx
+++ b/src/pages/trainee/Notice.tsx
@@ -66,6 +66,7 @@ export default function Notice() {
         placeholder="찾으시는 공지사항 내용을 입력해 주세요"
         onChange={handleChangeKeyword}
         resetChange={handleResetKeyword}
+        inputStyle="square"
         className="mt-6 w-full"
       />
 
diff --git a/src/services/admin/userToManageQueries.ts b/src/services/admin/userToManageQueries.ts
index 2ee0c213..ceb8e5c6 100644
--- a/src/services/admin/userToManageQueries.ts
+++ b/src/services/admin/userToManageQueries.ts
@@ -14,9 +14,7 @@ import { UserManagementDto } from '@/types/admin/userToManageDto';
 
 import { UserCollection } from '@/pages/admin/UserPostCollection';
 
-export type UserManagementFilter = {
-  page: number;
-  size: number;
+export type UserManagementFilter = PaginationFilter & {
   offset?: number;
   campusId?: number;
   courseId?: number;
@@ -24,33 +22,36 @@ export type UserManagementFilter = {
   roles?: RoleKey[];
 };
 
+const getUserList = async (params: UserManagementFilter, url: string) => {
+  const { keyword, page, ...rest } = params;
+
+  const { data } = await axiosInstance.get<UserManagementDto.GetUserList>(url, {
+    params: {
+      ...rest,
+      ...(keyword !== '' ? { keyword } : {}),
+      page: page - 1,
+    },
+  });
+
+  return {
+    userList: data.content.map(user => ({
+      ...user,
+      campus: user.campus.sort((a, b) => a.name.localeCompare(b.name)),
+      course: user.course.sort((a, b) => a.name.localeCompare(b.name)),
+    })),
+    totalCounts: data.totalCount,
+    totalPages: Math.ceil(data.totalCount / params.size),
+  };
+};
+
 /** 사용자 목록 조회 */
 export const useGetInfiniteUserList = (
   currTab: UserManagementTabType,
   params: UserManagementFilter,
 ) => {
-  const getUserList = async () => {
-    const offset = (params.page - 1) * params.size;
-
-    const { data } = await axiosInstance.get<UserManagementDto.GetUserList>(
-      `/admin/users`,
-      { params: { ...params, offset } },
-    );
-
-    return {
-      userList: data.content.map(user => ({
-        ...user,
-        campus: user.campus.sort((a, b) => a.name.localeCompare(b.name)),
-        course: user.course.sort((a, b) => a.name.localeCompare(b.name)),
-      })),
-      totalCounts: data.totalCount,
-      totalPages: Math.ceil(data.totalCount / params.size),
-    };
-  };
-
   return useQuery({
     queryKey: ['useGetInfiniteUserList', params],
-    queryFn: getUserList,
+    queryFn: () => getUserList(params, `/admin/users`),
     enabled: currTab === 'user-list',
   });
 };
@@ -60,28 +61,9 @@ export const useGetInfiniteTraineeList = (
   currTab: UserManagementTabType,
   params: UserManagementFilter,
 ) => {
-  const getUserList = async () => {
-    const offset = (params.page - 1) * params.size;
-
-    const { data } = await axiosInstance.get<UserManagementDto.GetUserList>(
-      `/admin/users/trainees`,
-      { params: { ...params, offset } },
-    );
-
-    return {
-      userList: data.content.map(user => ({
-        ...user,
-        campus: user.campus.sort((a, b) => a.name.localeCompare(b.name)),
-        course: user.course.sort((a, b) => a.name.localeCompare(b.name)),
-      })),
-      totalCounts: data.totalCount,
-      totalPages: Math.ceil(data.totalCount / params.size),
-    };
-  };
-
   return useQuery({
     queryKey: ['useGetInfiniteTraineeList', params],
-    queryFn: getUserList,
+    queryFn: () => getUserList(params, `/admin/users/trainees`),
     enabled: currTab === 'trainee-list',
   });
 };
@@ -136,7 +118,7 @@ export const useGetUserScrapList = (
   const getUserScrapList = async () => {
     const { data } = await axiosInstance.get<UserManagementDto.GetScrapList>(
       `/admin/users/${userId}/scrap`,
-      { params },
+      { params: { ...params, page: params.page - 1 } },
     );
     return data;
   };
@@ -155,15 +137,15 @@ export const useGetUserPostList = (
   currCollection: UserCollection,
 ) => {
   const postTypes =
-    params.postTypes?.length !== 0
-      ? { postTypes: params.postTypes?.join(',') }
-      : {};
+    params.postTypes && params.postTypes?.length !== 0
+      ? params.postTypes?.join(',')
+      : 'NOTICE,PROJECT,STUDY,MEAL';
 
   const getUserPostList = async () => {
     const { data: postList } =
       await axiosInstance.get<UserManagementDto.GetPostList>(
         `/admin/users/${userId}/post`,
-        { params: { ...params, postTypes } },
+        { params: { ...params, page: params.page - 1, postTypes } },
       );
 
     return {
@@ -194,7 +176,13 @@ export const useGetUserCommentList = (
   const getUserCommentList = async () => {
     const { data } = await axiosInstance.get<UserManagementDto.GetCommentList>(
       `/admin/users/${userId}/comments`,
-      { params: { ...params, postTypes: params.postTypes?.join(',') } },
+      {
+        params: {
+          ...params,
+          page: params.page - 1,
+          postTypes: params.postTypes?.join(','),
+        },
+      },
     );
 
     return {
diff --git a/src/services/post/loungeQueries.ts b/src/services/post/loungeQueries.ts
index 47ace6fa..f4ead77b 100644
--- a/src/services/post/loungeQueries.ts
+++ b/src/services/post/loungeQueries.ts
@@ -11,8 +11,7 @@ import { extractValidParams } from '@/utils';
 export const useGetLoungeProjectList = (params: LoungeProjectFilter) => {
   const [searchParams] = useSearchParams();
 
-  const { page, size, position, techStack, meetingType, sort, keyword } =
-    params;
+  const { position, techStack, meetingType, sort, keyword, ...rest } = params;
 
   const tabParams =
     extractValidParams(searchParams).pType === 'ALL'
@@ -36,15 +35,16 @@ export const useGetLoungeProjectList = (params: LoungeProjectFilter) => {
 
   const sortParams = sort ? { sort } : {};
 
+  const keywordParams = keyword ? { keyword } : {};
+
   const newParams = {
-    page,
-    size,
-    keyword,
+    ...rest,
     ...sortParams,
     ...positionParams,
     ...techStackParams,
     ...meetingTypeParams,
     ...onScrapedParams,
+    ...keywordParams,
   };
 
   const isEditing = extractValidParams(searchParams).pType === 'EDIT';
@@ -54,7 +54,7 @@ export const useGetLoungeProjectList = (params: LoungeProjectFilter) => {
     queryFn: async () => {
       const { data } = await axiosInstance.get<LoungeDto.GetProjectList>(
         '/project',
-        { params: newParams },
+        { params: { ...newParams, page: newParams.page - 1 } },
       );
       return data;
     },
diff --git a/src/services/post/myPostQueries.ts b/src/services/post/myPostQueries.ts
index fbaf058c..d5b97dad 100644
--- a/src/services/post/myPostQueries.ts
+++ b/src/services/post/myPostQueries.ts
@@ -12,12 +12,12 @@ export const useGetMyPostList = (
   const postTypes =
     params.postTypes && params.postTypes.length !== 0
       ? { postTypes: params.postTypes?.join(',') }
-      : {};
+      : { postTypes: 'PROJECT,STUDY,MEAL' };
 
   const getMyPostList = async () => {
     const { data: postList } = await axiosInstance.get<MyPostDto.GetPostList>(
       `/mypage/getPost`,
-      { params: { ...params, ...postTypes } },
+      { params: { ...params, page: params.page - 1, ...postTypes } },
     );
 
     return {
@@ -39,34 +39,6 @@ export const useGetMyPostList = (
   });
 };
 
-export const useGetMyScrapedPostList = (
-  collection: MyCollection,
-  params: PaginationFilter,
-) => {
-  const getMyScrapedPostList = async () => {
-    const { data: postList } =
-      await axiosInstance.get<MyPostDto.GetScrapedPostList>(
-        `/mypage/getScrap`,
-        { params },
-      );
-
-    return {
-      ...postList,
-      content: postList.content.map(({ postType, ptype, ...rest }) => {
-        return {
-          ...rest,
-          postType: postType === 'PROJECT' ? ptype : postType,
-        };
-      }),
-    };
-  };
-  return useQuery({
-    queryKey: ['useGetMyScrapedPostList', params],
-    queryFn: getMyScrapedPostList,
-    enabled: collection === '내가 찜한 글',
-  });
-};
-
 export const useGetMyCommentList = (
   collection: MyCollection,
   params: MyPostDto.GetPostListParams,
@@ -79,7 +51,7 @@ export const useGetMyCommentList = (
   const getMyCommentList = async () => {
     const { data } = await axiosInstance.get<MyPostDto.GetCommentList>(
       `/mypage/getComments`,
-      { params: { ...params, ...postTypes } },
+      { params: { ...params, page: params.page - 1, ...postTypes } },
     );
 
     return {
@@ -100,3 +72,31 @@ export const useGetMyCommentList = (
     enabled: collection === '내가 쓴 댓글',
   });
 };
+
+export const useGetMyScrapedPostList = (
+  collection: MyCollection,
+  params: PaginationFilter,
+) => {
+  const getMyScrapedPostList = async () => {
+    const { data: postList } =
+      await axiosInstance.get<MyPostDto.GetScrapedPostList>(
+        `/mypage/getScrap`,
+        { params: { ...params, page: params.page - 1 } },
+      );
+
+    return {
+      ...postList,
+      content: postList.content.map(({ postType, ptype, ...rest }) => {
+        return {
+          ...rest,
+          postType: postType === 'PROJECT' ? ptype : postType,
+        };
+      }),
+    };
+  };
+  return useQuery({
+    queryKey: ['useGetMyScrapedPostList', params],
+    queryFn: getMyScrapedPostList,
+    enabled: collection === '내가 찜한 글',
+  });
+};
diff --git a/src/services/post/noticeQueries.ts b/src/services/post/noticeQueries.ts
index a6cf4c72..b48ed7b1 100644
--- a/src/services/post/noticeQueries.ts
+++ b/src/services/post/noticeQueries.ts
@@ -34,31 +34,27 @@ export const useGetInfiniteNoticeList = (filterParams: NoticeFilter) => {
 
   return useInfiniteQuery({
     queryKey: ['useGetInfiniteNoticeList', noticeFilerParams],
-    queryFn: async ({ pageParam = 1 }) => {
+    queryFn: async ({ pageParam = 0 }) => {
       const { data } = await axiosInstance.get<NoticeDto.GetNoticeList>(
         `/notices`,
         {
           params: {
             ...noticeFilerParams,
-            offset: (pageParam - 1) * filterParams.size,
             page: pageParam,
+            offset: pageParam * filterParams.size,
           },
         },
       );
 
-      const hasNextPage = !data.isLastPage;
-
-      const nextPage = hasNextPage ? pageParam + 1 : undefined;
-
       return {
         notices: data.notices,
         currentPage: pageParam,
-        offset: (pageParam - 1) * filterParams.size,
-        nextPage,
+        offset: pageParam * filterParams.size,
+        nextPage: !data.isLastPage ? pageParam + 1 : undefined,
       };
     },
     getNextPageParam: lastPage => lastPage.nextPage,
-    initialPageParam: 1,
+    initialPageParam: 0,
   });
 };
 
@@ -67,16 +63,16 @@ export const useGetInfiniteSessionNoticeList = (
 ) => {
   return useInfiniteQuery({
     queryKey: ['useGetInfiniteSessionNoticeList', filterParams],
-    queryFn: async ({ pageParam = 1 }) => {
-      const offset = (pageParam - 1) * filterParams.size;
+    queryFn: async ({ pageParam = 0 }) => {
+      const offset = pageParam * filterParams.size;
 
       const [specialLectureRes, eventRes] = await Promise.all([
         axiosInstance.get<NoticeDto.GetNoticeList>(`/notices`, {
           params: {
             ...filterParams,
             noticeType: 'SPECIAL_LECTURE',
-            offset,
             page: pageParam,
+            offset,
           },
         }),
         axiosInstance.get<NoticeDto.GetNoticeList>(`/notices`, {
@@ -105,7 +101,7 @@ export const useGetInfiniteSessionNoticeList = (
       };
     },
     getNextPageParam: lastPage => lastPage.nextPage,
-    initialPageParam: 1,
+    initialPageParam: 0,
   });
 };
 
@@ -113,7 +109,7 @@ export const useGetThisWeekNoticeList = () => {
   const getThisWeekNotice = async () => {
     const { data } = await axiosInstance.get<NoticeDto.GetNoticeList>(
       `/notices`,
-      { params: { page: 1, size: 20 } },
+      { params: { page: 0, size: 20 } },
     );
     const thisWeekNotice = data.notices
       .filter(({ createdDateTime }) => isInThisWeek(createdDateTime))
diff --git a/src/services/session/sessionsQueries.ts b/src/services/session/sessionsQueries.ts
index c93588b8..bef6c4a2 100644
--- a/src/services/session/sessionsQueries.ts
+++ b/src/services/session/sessionsQueries.ts
@@ -4,7 +4,7 @@ import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 
 import { axiosInstance } from '@/services/axiosInstance';
 
-import { AppliedSessionStatusKey, SessionDto } from '@/types';
+import { AppliedSessionStatusKey, PaginationFilter, SessionDto } from '@/types';
 
 /** TRAINEE API */
 export const useGetAppliedSessionList = (type = 'allList') => {
@@ -25,10 +25,7 @@ export const useGetAppliedSessionList = (type = 'allList') => {
 export const useGetNoticeSessionList = ({
   filterParams,
 }: {
-  filterParams: {
-    page: number;
-    size: number;
-  };
+  filterParams: PaginationFilter;
 }) => {
   const [searchParams] = useSearchParams();
   const tabName = searchParams.get('tab');
@@ -40,56 +37,42 @@ export const useGetNoticeSessionList = ({
 
   return useInfiniteQuery({
     queryKey: ['useGetNoticeSessionList', params],
-    queryFn: async ({ pageParam = 1 }) => {
+    queryFn: async ({ pageParam = 0 }) => {
       const { data } = await axiosInstance.get<SessionDto.GetNoticeSessionList>(
         `/notices/sessions`,
         {
           params: {
             ...params,
-            offset: (pageParam - 1) * filterParams.size,
+            offset: pageParam * filterParams.size,
             page: pageParam,
           },
         },
       );
 
-      const hasNextPage = !data?.isLastPage;
-
-      const nextPage = hasNextPage ? pageParam + 1 : undefined;
-
       return {
         noticeSessionList: data.noticeSession,
         currentPage: pageParam,
-        offset: (pageParam - 1) * filterParams.size,
-        nextPage,
+        offset: pageParam * filterParams.size,
+        nextPage: !data?.isLastPage ? pageParam + 1 : undefined,
       };
     },
     getNextPageParam: lastPage => lastPage.nextPage,
-    initialPageParam: 1,
+    initialPageParam: 0,
   });
 };
 
-export const useGetSessionApplicantList = ({
-  sessionId,
-  page = 1,
-  size = 10,
-  searchParticipantStatus,
-}: {
+export const useGetSessionApplicantList = (params: {
   sessionId: number;
-  page?: number;
-  size?: number;
+  page: number;
+  size: number;
   searchParticipantStatus?: AppliedSessionStatusKey;
 }) => {
   const getSessionApplicantList = async () => {
     const { data } =
       await axiosInstance.get<SessionDto.GetSessionApplicantList>(
-        `/notices/sessions/${sessionId}`,
+        `/notices/sessions/${params.sessionId}`,
         {
-          params: {
-            sessionId,
-            page,
-            size,
-            searchParticipantStatus,
-          },
+          params: { ...params, page: params.page - 1 },
         },
       );
     return {
@@ -102,12 +85,8 @@ export const useGetSessionApplicantList = ({
     };
   };
   return useQuery<SessionDto.GetSessionApplicantList>({
-    queryKey: [
-      'useGetSessionApplicantList',
-      sessionId,
-      searchParticipantStatus,
-    ],
+    queryKey: ['useGetSessionApplicantList', params],
     queryFn: getSessionApplicantList,
-    enabled: !!Number(sessionId),
+    enabled: !!Number(params.sessionId),
   });
 };
diff --git a/src/services/store/storeQueries.ts b/src/services/store/storeQueries.ts
index f076392f..023efc0c 100644
--- a/src/services/store/storeQueries.ts
+++ b/src/services/store/storeQueries.ts
@@ -22,7 +22,7 @@ export const useGetInfiniteStoreList = () => {
 
   return useInfiniteQuery({
     queryKey: ['useGetInfiniteStoreList', newSearchParams],
-    queryFn: async ({ pageParam = 1 }) => {
+    queryFn: async ({ pageParam = 0 }) => {
       const { data } = await axiosInstance.get<GetStoreListResponse>(
         `/store/list`,
         {
@@ -40,7 +40,7 @@ export const useGetInfiniteStoreList = () => {
       };
     },
     getNextPageParam: lastPage => lastPage.nextPage,
-    initialPageParam: 1,
+    initialPageParam: 0,
   });
 };
 
diff --git a/src/types/notice/index.d.ts b/src/types/notice/index.d.ts
index 9f4b71a8..f71a0dbc 100644
--- a/src/types/notice/index.d.ts
+++ b/src/types/notice/index.d.ts
@@ -1,6 +1,6 @@
 import { noticeCategoryDisplay, noticeTabDisplay } from '@/constants';
 import { NoticeDto } from '@/types/notice/noticeDto';
-import { PaginationFilter } from '@/types/serviceType';
+import { PaginationFilter } from '@/types/pageable';
 import { AppliedSessionStatusKey } from '@/types/session';
 import { HasAdminRole } from '@/types/user';
 
@@ -62,11 +62,11 @@ export type NoticeSession = {
 
 /* Notice 필터 */
 export type NoticeFilter = PaginationFilter & {
+  offset?: boolean;
   noticeType?: NoticeCategoryDisplayKey;
   roleType?: NoticeTabDisplayKey;
   keyword?: string;
   onlyScraped?: boolean;
-  offset?: boolean;
 };
 
 export type NoticeCommentParams = {
diff --git a/src/types/session/index.d.ts b/src/types/session/index.d.ts
index 407f63d8..5953acbf 100644
--- a/src/types/session/index.d.ts
+++ b/src/types/session/index.d.ts
@@ -1,4 +1,5 @@
 import { appliedSessionStatusObj, sessionStatusObj } from '@/constants';
+import { PaginationFilter } from '@/types/pageable';
 
 export * from '@/types/session/participantDto';
 export * from '@/types/session/sessionDto';
@@ -14,9 +15,7 @@ export type AppliedSessionStatusKey = keyof AppliedSessionStatusObj;
 export type AppliedSessionStatusValue =
   AppliedSessionStatusObj[AppliedSessionStatusKey];
 
-export type SessionFilter = {
-  page: number;
-  size: number;
+export type SessionFilter = PaginationFilter & {
   keyword: string;
   applicationStatus?: 'ACTIVE' | 'INACTIVE';
 };
diff --git a/tsconfig.json b/tsconfig.json
index ff33a84e..c040e576 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,9 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "strictNullChecks": true,
+    "noImplicitAny": true
   },
   "include": ["src"]
 }

From 8d19268e2453397756e304c687fd97158568b0de Mon Sep 17 00:00:00 2001
From: jellie <talentforest0501@gmail.com>
Date: Wed, 18 Jun 2025 14:24:30 +0900
Subject: [PATCH 2/3] =?UTF-8?q?design:=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/calendar/Calendar.tsx          |  2 +-
 .../calendar/SmallCalendarBottomEvent.tsx     |  2 +-
 src/components/mypage/MyCollection.tsx        | 16 +++++-----
 .../post-collection/PostTableRow.tsx          | 17 +++++++----
 src/components/user/MyCourseProgressCard.tsx  |  2 +-
 src/hooks/post/useHandlePostTable.ts          | 30 +++++++++----------
 src/pages/trainee/Home.tsx                    |  2 +-
 7 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/components/calendar/Calendar.tsx b/src/components/calendar/Calendar.tsx
index b83f9239..5b5b15e8 100644
--- a/src/components/calendar/Calendar.tsx
+++ b/src/components/calendar/Calendar.tsx
@@ -117,7 +117,7 @@ export default function Calendar({
           {!isCourseCalendarLoadingArr?.includes(true) &&
             sideViewEvents &&
             ((sideViewEvents as FullCalendarEvent[]).length !== 0 ? (
-              <ul className="flex w-full flex-col justify-center gap-4 px-2 pt-2">
+              <ul className="flex w-full flex-col justify-center gap-2 px-2 pt-2">
                 {(sideViewEvents as FullCalendarEvent[]).map(
                   ({ id, start, end, title }) => (
                     <SmallCalendarBottomEvent
diff --git a/src/components/calendar/SmallCalendarBottomEvent.tsx b/src/components/calendar/SmallCalendarBottomEvent.tsx
index 3589fb48..7275eb9a 100644
--- a/src/components/calendar/SmallCalendarBottomEvent.tsx
+++ b/src/components/calendar/SmallCalendarBottomEvent.tsx
@@ -10,7 +10,7 @@ export default function SmallCalendarBottomEvent({
   time,
 }: SmallCalendarBottomEventProps) {
   return (
-    <li className="line-clamp-1 flex w-full items-center">
+    <li className="line-clamp-1 flex w-full items-center py-1">
       <div className="min-w-[154px]">
         <span className="inline-block w-[50px] text-justify text-mainGray-active">
           {date}
diff --git a/src/components/mypage/MyCollection.tsx b/src/components/mypage/MyCollection.tsx
index 2b814d13..e27d2e6f 100644
--- a/src/components/mypage/MyCollection.tsx
+++ b/src/components/mypage/MyCollection.tsx
@@ -41,7 +41,7 @@ export default function MyCollection() {
   const initialFilter: MyPostDto.GetPostListParams = {
     page: 1,
     size: 3,
-    // order: 'latest',
+    // order: 'latest',  NOTE: 최신순 정렬 적용 필요
   };
 
   const {
@@ -72,10 +72,10 @@ export default function MyCollection() {
     currPostList,
     page: { totalPage },
     postCheckbox: {
-      checkedPostIdList,
+      currCheckedIdList,
       isCheckBoxChecked,
-      onCheckBoxClick,
-      onPostCheckboxChange,
+      onHeaderCheckBoxClick,
+      onTableItemCheckboxChange,
       initializePostCheckedBoxList,
     },
     deletePost: {
@@ -147,14 +147,14 @@ export default function MyCollection() {
                 currCollection={currCollection}
                 isCheckBoxChecked={isCheckBoxChecked}
                 disabledCheckBox={false}
-                onCheckboxClick={onCheckBoxClick}
+                onCheckboxClick={onHeaderCheckBoxClick}
                 onChangeOrder={onChangeOrder}
                 categoryOptionList={contentList.categoryOptionList}
                 checkedCategoryOptionList={checkedCategoryOptionList}
                 onChangeCategory={onChangeCategory}
                 disabledDelete={disabledDelete}
                 onDeleteConfirmClick={() =>
-                  onDeleteConfirmClick(currCollection, checkedPostIdList)
+                  onDeleteConfirmClick(currCollection, currCheckedIdList)
                 }
               />
               <TableBody<UserPost | UserComment>
@@ -167,8 +167,8 @@ export default function MyCollection() {
                     headerCellList={headerCellList}
                     post={post}
                     handleShowDialog={handleShowDialog}
-                    checkedPostIdList={checkedPostIdList}
-                    onPostCheckboxChange={onPostCheckboxChange}
+                    checkedPostIdList={currCheckedIdList}
+                    onCheckboxChange={onTableItemCheckboxChange}
                     onDeleteConfirmClick={(postId: number) =>
                       onDeleteConfirmClick(currCollection, [postId])
                     }
diff --git a/src/components/post-collection/PostTableRow.tsx b/src/components/post-collection/PostTableRow.tsx
index b6f2ce26..b018d47f 100644
--- a/src/components/post-collection/PostTableRow.tsx
+++ b/src/components/post-collection/PostTableRow.tsx
@@ -14,7 +14,7 @@ interface PostTableRowProps {
   headerCellList: Header[];
   post: UserPost | UserComment;
   checkedPostIdList?: number[];
-  onPostCheckboxChange?: (postId: number) => void;
+  onCheckboxChange?: (postId: number) => void;
   handleShowDialog?: (
     postType: 'MEAL' | 'STORE',
     linkedId: number,
@@ -24,11 +24,14 @@ interface PostTableRowProps {
   onDeleteConfirmClick?: (postId: number) => void;
 }
 
+// 내가 쓴 댓글은 commentId로 적용
+// 내가 쓴 글은 postId로 적용...
+
 export default function PostTableRow({
   headerCellList,
   post,
   checkedPostIdList,
-  onPostCheckboxChange,
+  onCheckboxChange,
   handleShowDialog,
   deleteDisabled,
   onDeleteConfirmClick,
@@ -45,16 +48,18 @@ export default function PostTableRow({
   const nickname =
     (post as UserPost)?.createdNickName || (post as UserComment)?.userNickname;
 
+  const id = (post as UserComment)?.commentId || (post as UserPost)?.postId;
+
   return (
     <tr className="hover:bg-gray4 group">
       {headerCellList.includes('체크박스') &&
         checkedPostIdList &&
-        onPostCheckboxChange && (
+        onCheckboxChange && (
           <TableDataCell className="!p-0 [&>label>input]:mr-0 [&>label>input]:size-5">
             <Checkbox
               id={postType}
-              checked={!!checkedPostIdList.includes(postId)}
-              onChange={() => onPostCheckboxChange(postId)}
+              checked={!!checkedPostIdList.includes(id)}
+              onChange={() => onCheckboxChange(id)}
               inputClassName="!rounded-lg"
             />
           </TableDataCell>
@@ -103,7 +108,7 @@ export default function PostTableRow({
         <TableDataCell className="[&>button]:px-2">
           <TrashButton
             className="px-1.5 py-2"
-            onConfirmClick={() => onDeleteConfirmClick(postId)}
+            onConfirmClick={() => onDeleteConfirmClick(id)}
             disabled={deleteDisabled}
           />
         </TableDataCell>
diff --git a/src/components/user/MyCourseProgressCard.tsx b/src/components/user/MyCourseProgressCard.tsx
index aa3bea58..cd26c210 100644
--- a/src/components/user/MyCourseProgressCard.tsx
+++ b/src/components/user/MyCourseProgressCard.tsx
@@ -61,7 +61,7 @@ export default function MyCourseProgressCard() {
         className="absolute right-2 top-0.5 text-darkGray-hover"
         onClick={openModalClick}
       />
-      <div className="flex flex-1 flex-col justify-between rounded-[20px] bg-white py-5">
+      <div className="flex h-[509px] flex-col justify-between rounded-[20px] bg-white py-5">
         <ul className="mb-4 flex gap-4 px-4">
           {[`D${DDay}`, `${progress}% 달성`].map(text => (
             <li key={text}>
diff --git a/src/hooks/post/useHandlePostTable.ts b/src/hooks/post/useHandlePostTable.ts
index cf19bd88..aebe689e 100644
--- a/src/hooks/post/useHandlePostTable.ts
+++ b/src/hooks/post/useHandlePostTable.ts
@@ -31,22 +31,22 @@ export const useHandlePostTable = <T extends string>({
 }: UseHandlePostTableProps<T>) => {
   const queryClient = useQueryClient();
 
-  const [checkedPostIdList, setCheckedPostIdList] = useState<number[]>([]);
+  const [currCheckedIdList, setCurrCheckedIdList] = useState<number[]>([]);
 
-  const onPostCheckboxChange = (postId: number) => {
-    setCheckedPostIdList(prev => {
-      if (prev.includes(postId)) {
-        return prev.filter(checkedPostId => checkedPostId !== postId);
+  const onTableItemCheckboxChange = (Id: number) => {
+    setCurrCheckedIdList(prev => {
+      if (prev.includes(Id)) {
+        return prev.filter(checkedPostId => checkedPostId !== Id);
       }
-      return [...prev, postId];
+      return [...prev, Id];
     });
   };
 
   const onPostCheckboxListChange = (postIdList: number[]) => {
-    setCheckedPostIdList(postIdList);
+    setCurrCheckedIdList(postIdList);
   };
 
-  const initializePostCheckedBoxList = () => setCheckedPostIdList([]);
+  const initializePostCheckedBoxList = () => setCurrCheckedIdList([]);
 
   const { mutateAsync: deletePost, isPending: isDeletePostPending } =
     useDeleteMyPost();
@@ -56,11 +56,11 @@ export const useHandlePostTable = <T extends string>({
 
   const isCheckBoxChecked =
     contentList?.content.length !== 0 &&
-    checkedPostIdList.length === contentList?.content.length;
+    currCheckedIdList.length === contentList?.content.length;
 
-  const onCheckBoxClick = () => {
+  const onHeaderCheckBoxClick = () => {
     const idList = contentList?.content.map(({ postId }) => postId) || [];
-    const checkedIdList = checkedPostIdList.length !== 0 ? [] : idList;
+    const checkedIdList = currCheckedIdList.length !== 0 ? [] : idList;
     return onPostCheckboxListChange(checkedIdList);
   };
 
@@ -79,7 +79,7 @@ export const useHandlePostTable = <T extends string>({
   };
 
   const disabledDelete =
-    contentList?.content.length === 0 || checkedPostIdList.length === 0;
+    contentList?.content.length === 0 || currCheckedIdList.length === 0;
 
   const onDeleteConfirmClick = (collection: T, postIdList: number[]) => {
     initializePostCheckedBoxList();
@@ -106,10 +106,10 @@ export const useHandlePostTable = <T extends string>({
       currentPage: contentList?.number,
     },
     postCheckbox: {
-      checkedPostIdList,
+      currCheckedIdList,
       isCheckBoxChecked,
-      onCheckBoxClick,
-      onPostCheckboxChange,
+      onHeaderCheckBoxClick,
+      onTableItemCheckboxChange,
       initializePostCheckedBoxList,
     },
     order: {
diff --git a/src/pages/trainee/Home.tsx b/src/pages/trainee/Home.tsx
index 750fd338..19d3120e 100644
--- a/src/pages/trainee/Home.tsx
+++ b/src/pages/trainee/Home.tsx
@@ -81,7 +81,7 @@ export default function Home() {
       </Header>
 
       <div className="mb-14 grid grid-cols-[1.2fr_1fr_1fr] grid-rows-[auto_auto] gap-x-8">
-        <section className="relative overflow-hidden">
+        <section className="relative h-full overflow-hidden">
           <Title title="나의 새싹 정보" className="mb-[14px]" />
           <MyCourseProgressCard />
         </section>

From 21e0ea25a304e74f4df9bb2bd48d8723dd061c25 Mon Sep 17 00:00:00 2001
From: jellie <talentforest0501@gmail.com>
Date: Thu, 19 Jun 2025 01:22:28 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/table/TableBody.tsx     |  4 +-
 src/components/mypage/MyCollection.tsx        |  2 +-
 .../post-collection/PostTableRow.tsx          | 43 +++++++-----
 src/hooks/post/useHandlePostTable.ts          | 67 +++++++++++++------
 4 files changed, 78 insertions(+), 38 deletions(-)

diff --git a/src/components/common/table/TableBody.tsx b/src/components/common/table/TableBody.tsx
index aa50d58f..9a8f83aa 100644
--- a/src/components/common/table/TableBody.tsx
+++ b/src/components/common/table/TableBody.tsx
@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
 import { Fragment } from 'react/jsx-runtime';
 
+import { UserComment, UserPost } from '@/types';
+
 import LoopLoading from '@/components/common/LoopLoading';
 
 interface TableBodyProps<T> {
@@ -10,7 +12,7 @@ interface TableBodyProps<T> {
   isLoading: boolean;
 }
 
-export default function TableBody<T extends { createdAt: string }>({
+export default function TableBody<T extends UserPost | UserComment>({
   paginationList,
   children,
   colLength,
diff --git a/src/components/mypage/MyCollection.tsx b/src/components/mypage/MyCollection.tsx
index e27d2e6f..ecc5543c 100644
--- a/src/components/mypage/MyCollection.tsx
+++ b/src/components/mypage/MyCollection.tsx
@@ -167,7 +167,7 @@ export default function MyCollection() {
                     headerCellList={headerCellList}
                     post={post}
                     handleShowDialog={handleShowDialog}
-                    checkedPostIdList={currCheckedIdList}
+                    checkedIdList={currCheckedIdList}
                     onCheckboxChange={onTableItemCheckboxChange}
                     onDeleteConfirmClick={(postId: number) =>
                       onDeleteConfirmClick(currCollection, [postId])
diff --git a/src/components/post-collection/PostTableRow.tsx b/src/components/post-collection/PostTableRow.tsx
index b018d47f..8ddcf7b5 100644
--- a/src/components/post-collection/PostTableRow.tsx
+++ b/src/components/post-collection/PostTableRow.tsx
@@ -10,32 +10,29 @@ import TrashButton from '@/components/common/button/TrashButton';
 import Checkbox from '@/components/common/checkbox/Checkbox';
 import TableDataCell from '@/components/common/table/TableDataCell';
 
-interface PostTableRowProps {
+interface PostTableRowProps<T> {
   headerCellList: Header[];
-  post: UserPost | UserComment;
-  checkedPostIdList?: number[];
-  onCheckboxChange?: (postId: number) => void;
+  post: T;
+  checkedIdList?: number[];
+  onCheckboxChange?: (id: number) => void;
   handleShowDialog?: (
     postType: 'MEAL' | 'STORE',
     linkedId: number,
     data: { comment: string; nickname: string },
   ) => void;
   deleteDisabled?: boolean;
-  onDeleteConfirmClick?: (postId: number) => void;
+  onDeleteConfirmClick?: (id: number) => void;
 }
 
-// 내가 쓴 댓글은 commentId로 적용
-// 내가 쓴 글은 postId로 적용...
-
-export default function PostTableRow({
+export default function PostTableRow<T extends UserPost | UserComment>({
   headerCellList,
   post,
-  checkedPostIdList,
+  checkedIdList,
   onCheckboxChange,
   handleShowDialog,
   deleteDisabled,
   onDeleteConfirmClick,
-}: PostTableRowProps) {
+}: PostTableRowProps<T>) {
   const { createdAt, postId, postType } = post;
 
   const type = {
@@ -44,21 +41,33 @@ export default function PostTableRow({
     STUDY: 'lounge',
   };
 
-  const title = (post as UserPost)?.title || (post as UserComment)?.content;
-  const nickname =
-    (post as UserPost)?.createdNickName || (post as UserComment)?.userNickname;
+  function isUserComment(data: UserPost | UserComment): data is UserComment {
+    return 'commentId' in data;
+  }
+
+  const data = isUserComment(post)
+    ? {
+        id: post?.commentId,
+        title: post.content,
+        nickname: post.userNickname,
+      }
+    : {
+        id: post.postId,
+        title: post.title,
+        nickname: post.createdNickName,
+      };
 
-  const id = (post as UserComment)?.commentId || (post as UserPost)?.postId;
+  const { id, title, nickname } = data;
 
   return (
     <tr className="hover:bg-gray4 group">
       {headerCellList.includes('체크박스') &&
-        checkedPostIdList &&
+        checkedIdList &&
         onCheckboxChange && (
           <TableDataCell className="!p-0 [&>label>input]:mr-0 [&>label>input]:size-5">
             <Checkbox
               id={postType}
-              checked={!!checkedPostIdList.includes(id)}
+              checked={!!checkedIdList.includes(id)}
               onChange={() => onCheckboxChange(id)}
               inputClassName="!rounded-lg"
             />
diff --git a/src/hooks/post/useHandlePostTable.ts b/src/hooks/post/useHandlePostTable.ts
index aebe689e..6ada4554 100644
--- a/src/hooks/post/useHandlePostTable.ts
+++ b/src/hooks/post/useHandlePostTable.ts
@@ -2,11 +2,13 @@ import { useState } from 'react';
 
 import { useQueryClient } from '@tanstack/react-query';
 
+import { useDialogContext } from '@/hooks/common/useDialogContext';
+
 import { useDeleteComment } from '@/services/comment/commentMutations';
 import { useDeleteMyPost } from '@/services/post/postMutation';
 
 import { Option, PostTypeKey, UserManagementDto } from '@/types';
-import { MyPostDto } from '@/types/mypage/myPostDto';
+import { MyPostDto, UserComment, UserPost } from '@/types/mypage/myPostDto';
 
 type ContentList = {
   contentList?:
@@ -25,6 +27,7 @@ interface UseHandlePostTableProps<T> {
 }
 
 export const useHandlePostTable = <T extends string>({
+  currCollection,
   contentList: { contentList, categoryOptionList },
   tableFilter,
   handleChangeFilter,
@@ -42,8 +45,8 @@ export const useHandlePostTable = <T extends string>({
     });
   };
 
-  const onPostCheckboxListChange = (postIdList: number[]) => {
-    setCurrCheckedIdList(postIdList);
+  const onPostCheckboxListChange = (idList: number[]) => {
+    setCurrCheckedIdList(idList);
   };
 
   const initializePostCheckedBoxList = () => setCurrCheckedIdList([]);
@@ -59,8 +62,12 @@ export const useHandlePostTable = <T extends string>({
     currCheckedIdList.length === contentList?.content.length;
 
   const onHeaderCheckBoxClick = () => {
-    const idList = contentList?.content.map(({ postId }) => postId) || [];
+    const idList = currCollection.includes('게시글')
+      ? (contentList?.content as UserPost[]).map(({ postId }) => postId)
+      : (contentList?.content as UserComment[]).map(({ commentId: id }) => id);
+
     const checkedIdList = currCheckedIdList.length !== 0 ? [] : idList;
+
     return onPostCheckboxListChange(checkedIdList);
   };
 
@@ -81,22 +88,44 @@ export const useHandlePostTable = <T extends string>({
   const disabledDelete =
     contentList?.content.length === 0 || currCheckedIdList.length === 0;
 
-  const onDeleteConfirmClick = (collection: T, postIdList: number[]) => {
-    initializePostCheckedBoxList();
+  const { showToast } = useDialogContext();
+
+  const handleBatchDelete = async (
+    deleteFn: (id: number) => void,
+    idList: number[],
+    queryKey: string[],
+  ) => {
+    const results = await Promise.allSettled(idList.map(deleteFn));
+    await queryClient.invalidateQueries({ queryKey });
+    const errorCounts = results.filter(r => r.status === 'rejected').length;
+
+    if (errorCounts) {
+      showToast(
+        `삭제 중 일부 항목에 오류가 발생하여 삭제하지 못했습니다. 오류 발생 항목 개수: ${errorCounts}`,
+      );
+    } else {
+      showToast('선택한 항목이 삭제되었습니다.');
+    }
+  };
 
-    return postIdList.map(async postId => {
-      if (collection.includes('게시글')) {
-        await deletePost({ postId });
-        await queryClient.invalidateQueries({ queryKey: ['useGetMyPostList'] });
-      }
-      if (collection.includes('댓글')) {
-        await deleteComment({ commentId: postId });
-        await queryClient.invalidateQueries({
-          queryKey: ['useGetMyCommentList'],
-        });
-      }
-      return postId;
-    });
+  const onDeleteConfirmClick = async (collection: T, idList: number[]) => {
+    if (collection.includes('게시글')) {
+      await handleBatchDelete(
+        id => deletePost({ postId: id }),
+        idList,
+        ['useGetMyPostList'], //
+      );
+    }
+
+    if (collection.includes('댓글')) {
+      await handleBatchDelete(
+        id => deleteComment({ commentId: id }),
+        idList,
+        ['useGetMyCommentList'], //
+      );
+    }
+
+    initializePostCheckedBoxList();
   };
 
   return {