[fix] 상태에 따른 공고 버튼 문구 변경 로직 추가, 최근 본 공고 버그 수정

src/apis/loaders/notice.ts

@@ -2,6 +2,7 @@ import { getShopApplications } from "../services/applicationService";
 import { getNotice } from "../services/noticeService";
 
 import { PostData } from "@/components/Post/PostList";
+import { UserType } from "@/types/user";
 import { getLocalStorageValue } from "@/utils/localStorage";
 
 interface LoadNoticeParams {
@@ -19,12 +20,20 @@ export const loadNotice = async ({ shopId, noticeId }: LoadNoticeParams) => {
 
 const MAX_VISIBLE_RECENT_NOTICES = 6;
 
-export const loadRecentNotices = (noticeId: string) => {
+export const loadRecentNotices = (noticeId: string, userType?: UserType) => {
   const allRecentNotices =
     getLocalStorageValue<PostData[]>("recentNotices") ?? [];
 
   const recentNotices = allRecentNotices
     .filter(({ id }) => id !== noticeId)
+    .map(({ link, ...restNoticeInfo }) => {
+      const type = userType ?? "employee";
+      const splittedLink = link.split("/");
+      splittedLink[splittedLink.length - 1] = type;
+
+      const updatedLink = splittedLink.join("/");
+      return { link: updatedLink, ...restNoticeInfo };
+    })
     .slice(0, MAX_VISIBLE_RECENT_NOTICES);
 
   return recentNotices;

src/components/NoticeDetailInfo/NoticeDetailInfo.tsx

@@ -14,6 +14,7 @@ interface NoticeDetailInfoCardProps {
   noticeId: string;
   user?: User | null;
   isEmployerPage?: boolean;
+  isStartApplication?: boolean;
 }
 
 function NoticeDetailInfoCard({
@@ -22,6 +23,7 @@ function NoticeDetailInfoCard({
   noticeInfo,
   user,
   isEmployerPage,
+  isStartApplication = false,
 }: NoticeDetailInfoCardProps) {
   const {
     hourlyPay,
@@ -42,7 +44,7 @@ function NoticeDetailInfoCard({
 
   const applicationId = currentUserApplication?.item.id ?? "";
   const applicationStatus = currentUserApplication?.item.status;
-  const isPast = isPastDate(startsAt, workhour);
+  const isPast = isPastDate(startsAt);
   const isDisabledNotice =
     isPast ||
     closed ||
@@ -71,9 +73,11 @@ function NoticeDetailInfoCard({
           buttons={
             isEmployerPage ? (
               <NoticeEmployerActionButton
-                userShopId={user?.shopId}
-                noticeShopId={shopId}
                 noticeId={noticeId}
+                isMyShop={user?.shopId === shopId}
+                isStartApplication={isStartApplication}
+                isPastNotice={isPastDate(startsAt)}
+                isClosed={closed}
               />
             ) : (
               <NoticeEmployeeActionButton

src/components/NoticeDetailInfo/NoticeEmployerActionButton.tsx

@@ -3,21 +3,42 @@ import { useNavigate } from "react-router-dom";
 import Button from "../Button";
 
 interface NoticeEmployerActionButtonProps {
-  userShopId?: string;
-  noticeShopId: string;
   noticeId: string;
+  isMyShop: boolean;
+  isStartApplication: boolean;
+  isPastNotice: boolean;
+  isClosed: boolean;
 }
 
 function NoticeEmployerActionButton({
-  userShopId,
-  noticeShopId,
   noticeId,
+  isMyShop,
+  isStartApplication,
+  isPastNotice,
+  isClosed,
 }: NoticeEmployerActionButtonProps) {
+  let buttonText = "";
+  let isDisabled = true;
+
+  if (!isMyShop) {
+    buttonText = "다른 가게의 공고 편집 불가";
+  } else if (isPastNotice) {
+    buttonText = "기간이 지난 공고입니다.";
+  } else if (isClosed) {
+    buttonText = "마감된 공고입니다.";
+  } else if (isStartApplication) {
+    buttonText = "이미 지원을 받은 공고입니다.";
+  } else {
+    buttonText = "공고 편집하기";
+    isDisabled = false;
+  }
+
   const navigate = useNavigate();
-  const isMyShop = userShopId === noticeShopId;
 
   const moveToEditNoticePage = () => {
-    navigate(`/notice/edit/${noticeId}`);
+    if (isMyShop && !isPastNotice && isClosed && !isStartApplication) {
+      navigate(`/notice/edit/${noticeId}`);
+    }
   };
 
   return (
@@ -26,9 +47,9 @@ function NoticeEmployerActionButton({
       variant="white"
       className={"py-[14px]"}
       onClick={moveToEditNoticePage}
-      disabled={!isMyShop}
+      disabled={isDisabled}
     >
-      {isMyShop ? "공고 편집하기" : "다른 가게의 공고 편집 불가"}
+      {buttonText}
     </Button>
   );
 }

src/pages/NoticeEmployeePage/NoticeEmployeePage.tsx

@@ -37,7 +37,7 @@ export default function NoticeEmployeePage() {
         <div className="flex flex-col gap-8 lg:w-[64rem] mx-auto mb-[3.75rem] px-3 sm:px-8 py-10 sm:py-[3.75rem]">
           <h2 className="text-[1.625rem] font-bold">최근에 본 공고</h2>
 
-          {recentNotices.length > 0 ? (
+          {recentNotices?.length > 0 ? (
             <PostList posts={recentNotices} />
           ) : (
             <div className="flex items-center justify-center w-full h-[20rem] text-black">

src/pages/NoticeEmployeePage/loader/noticeEmployeeLoader.ts

@@ -1,15 +1,17 @@
 import { LoaderFunction } from "react-router-dom";
 
 import { loadNotice, loadRecentNotices } from "@/apis/loaders/notice";
+import { useUserStore } from "@/hooks/useUserStore";
 
 const noticeEmployeeLoader: LoaderFunction = async ({ params }) => {
+  const user = useUserStore.getState().user;
   const { shopId, noticeId } = params as {
     shopId: string;
     noticeId: string;
   };
 
   const noticeInfo = await loadNotice({ shopId, noticeId });
-  const recentNotices = loadRecentNotices(noticeId);
+  const recentNotices = loadRecentNotices(noticeId, user?.type);
 
   return { noticeInfo, recentNotices };
 };

src/pages/NoticeEmployerPage/NoticeEmployerPage.tsx

@@ -2,7 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom";
 
 import NoticeDetailInfo from "../../components/NoticeDetailInfo/NoticeDetailInfo";
 
-import NoticeApplicationTableContainer from "./components/NoticeApplicationTableContainer";
+import NoticeApplicationTable from "./components/NoticeApplicationTable";
+import useShopApplications from "./hooks/useShopApplications";
 
 import PostList, { PostData } from "@/components/Post/PostList";
 import useUpdateRecentNotices from "@/hooks/useUpdateRecentNotices";
@@ -19,6 +20,15 @@ export default function NoticeEmployerPage() {
     noticeId: string;
   };
   const { user } = useUserStore();
+  const {
+    refetch: refetchShopApplications,
+    shopApplications,
+    totalCount,
+  } = useShopApplications({
+    shopId,
+    noticeId,
+    type: user?.type,
+  });
 
   const isMyShop = user?.shopId === shopId;
 
@@ -37,6 +47,7 @@ export default function NoticeEmployerPage() {
             noticeInfo={noticeInfo}
             user={user}
             isEmployerPage
+            isStartApplication={shopApplications?.length > 0}
           />
         </div>
       </section>
@@ -47,14 +58,15 @@ export default function NoticeEmployerPage() {
             {isMyShop ? "신청자 목록" : "최근에 본 공고"}
           </h2>
           {isMyShop && (
-            <NoticeApplicationTableContainer
-              shopId={shopId}
-              noticeId={noticeId}
+            <NoticeApplicationTable
+              data={shopApplications}
+              totalCount={totalCount}
+              refetch={refetchShopApplications}
             />
           )}
 
           {!isMyShop &&
-            (recentNotices.length > 0 ? (
+            (recentNotices?.length > 0 ? (
               <PostList posts={recentNotices} />
             ) : (
               <div className="flex items-center justify-center w-full h-[20rem] text-black">

src/pages/NoticeEmployerPage/hooks/useShopApplications.ts

@@ -4,15 +4,18 @@ import { useSearchParams } from "react-router-dom";
 
 import { getShopApplications } from "@/apis/services/applicationService";
 import { ApplicationItem } from "@/types/application";
+import { UserType } from "@/types/user";
 
 interface UseShopApplicationsParams {
+  type?: UserType;
   shopId: string;
   noticeId: string;
   offset?: number;
   limit?: number;
 }
 
 const useShopApplications = ({
+  type,
   shopId,
   noticeId,
   offset = 5,
@@ -45,8 +48,10 @@ const useShopApplications = ({
   };
 
   useEffect(() => {
-    fetchShopApplication();
-  }, [shopId, noticeId, offset, limit, page]);
+    if (type === "employer") {
+      fetchShopApplication();
+    }
+  }, [type, shopId, noticeId, offset, limit, page]);
 
   return {
     refetch: fetchShopApplication,

src/pages/NoticeEmployerPage/loader/noticeEmployerLoader.ts

@@ -16,7 +16,7 @@ const noticeEmployerLoader: LoaderFunction = async ({ params }) => {
     return { noticeInfo };
   }
 
-  const recentNotices = loadRecentNotices(noticeId);
+  const recentNotices = loadRecentNotices(noticeId, user?.type);
   return { noticeInfo, recentNotices };
 };