fix:핀하우스 Home / 자격진단 및 마이페이지

next.config.ts

@@ -25,6 +25,16 @@ const nextConfig: NextConfig = {
         hostname: "t1.kakaocdn.net",
         pathname: "/**",
       },
+      {
+        protocol: "https",
+        hostname: "k.kakaocdn.net",
+        pathname: "/**",
+      },
+      {
+        protocol: "http",
+        hostname: "k.kakaocdn.net",
+        pathname: "/**",
+      },
     ],
   },
   webpack(config: Configuration) {

src/entities/home/hooks/homeHooks.ts

@@ -100,28 +100,33 @@ export const useGlobalPageNation = <TItem>({
   });
 };
 
+const recommendedFetchedKey = (userId: string) => `home-recommended-fetched:${userId ?? "anon"}`;
+
 export const useRecommendedNotice = () => {
+  const { userName } = useOAuthStore();
+  const isBrowser = typeof window !== "undefined";
+
+  const fetched =
+    isBrowser && !!userName
+      ? sessionStorage.getItem(recommendedFetchedKey(userName)) === "query"
+      : false;
+
   return useInfiniteQuery<SliceResponse<ListingItem>, Error>({
-    queryKey: ["HOME_RECOMMENDED"],
+    queryKey: ["HOME_RECOMMENDED", userName],
     initialPageParam: 1,
     retry: false,
+    enabled: isBrowser && !!userName && !fetched,
+    staleTime: Infinity,
+    gcTime: Infinity,
     queryFn: async ({ pageParam }) => {
-      try {
-        return await getNoticeByPinPoint<SliceResponse<ListingItem>>({
-          url: HOME_RECOMMENDED_ENDPOINT,
-          params: { page: Number(pageParam), offSet: 10 },
-        });
-      } catch (e) {
-        if (axios.isAxiosError(e)) {
-          const message = e.response?.data?.message ?? e.response?.data?.error ?? e.message;
-          toast.error(message);
-          throw new Error(message);
-        }
-        throw e instanceof Error ? e : new Error("Unknown error");
-      }
-    },
-    getNextPageParam: lastPage => {
-      return lastPage.hasNext ? lastPage.pages + 1 : undefined;
+      const data = await getNoticeByPinPoint<SliceResponse<ListingItem>>({
+        url: HOME_RECOMMENDED_ENDPOINT,
+        params: { page: Number(pageParam), offSet: 10 },
+      });
+
+      sessionStorage.setItem(recommendedFetchedKey(userName), "query");
+      return data;
     },
+    getNextPageParam: lastPage => (lastPage.hasNext ? lastPage.pages + 1 : undefined),
   });
 };

src/features/home/index.ts

@@ -1,5 +1,5 @@
 export * from "./ui/homeContentsCard";
-export * from "./ui/homeActionCardList";
+export * from "./ui/homeAction/homeActionCardList";
 export * from "./ui/homeContentsCard";
 export * from "./ui/homeHeader";
 export * from "./ui/homeHero";

src/features/home/ui/homeAction/homeActionCardList.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { useHomeActionCard } from "@/src/features/home/ui/homeUseHooks/homeUseHooks";
+import { PinpointStandard } from "@/src/features/home/ui/homeAction/pinpointStandard";
+import { QualificationDiagnosis } from "@/src/features/home/ui/homeAction/qualificationdiagnosis";
+
+export const ActionCardList = () => {
+  const { onListingsPageMove, onEligibilityPageMove } = useHomeActionCard();
+
+  return (
+    <div className="mb-4 flex gap-4">
+      <PinpointStandard onListingsPageMove={onListingsPageMove} />
+      <QualificationDiagnosis onEligibilityPageMove={onEligibilityPageMove} />
+    </div>
+  );
+};

src/features/home/ui/homeAction/pinpointStandard.tsx

@@ -0,0 +1,35 @@
+import { ArrowUpRight } from "@/src/assets/icons/button/arrowUpRight";
+import { useNoticeCount } from "@/src/entities/home/hooks/homeHooks";
+import { useOAuthStore } from "@/src/features/login/model";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { SliceResponse } from "@/src/entities/home/model/type";
+import { ListingItem } from "@/src/entities/listings/model/type";
+import { getNoticeByPinPoint } from "@/src/entities/home/interface/homeInterface";
+import { HOME_RECOMMENDED_ENDPOINT } from "@/src/shared/api";
+
+type PinpointStandardProps = {
+  onListingsPageMove: () => void;
+};
+
+export const PinpointStandard = ({ onListingsPageMove }: PinpointStandardProps) => {
+  const { data } = useNoticeCount();
+  const count = data?.count;
+  console.log(count);
+  return (
+    <div
+      className="flex min-h-[88px] flex-1 cursor-pointer flex-col justify-between rounded-lg bg-primary-blue-300 px-4 py-3"
+      onClick={onListingsPageMove}
+    >
+      <div className="flex items-center justify-between text-white">
+        <p className="text-sm font-bold leading-tight opacity-[0.7] hover:cursor-pointer">
+          핀포인트 기준
+        </p>
+        <div className="flex items-center justify-center">
+          <ArrowUpRight />
+        </div>
+      </div>
+
+      <p className="text-xl font-bold leading-tight text-white">{count}건</p>
+    </div>
+  );
+};

src/features/home/ui/homeAction/qualificationdiagnosis.tsx

@@ -0,0 +1,38 @@
+import { ArrowUpRight } from "@/src/assets/icons/button/arrowUpRight";
+import { useRecommendedNotice } from "@/src/entities/home/hooks/homeHooks";
+
+type QualificationDiagnosisProps = {
+  onEligibilityPageMove: () => void;
+};
+export const QualificationDiagnosis = ({ onEligibilityPageMove }: QualificationDiagnosisProps) => {
+  const { data: recommend } = useRecommendedNotice();
+  const count = recommend?.pages[0]?.totalCount;
+
+  return (
+    <div
+      className="flex min-h-[88px] flex-1 cursor-pointer flex-col justify-between rounded-lg px-4 py-3"
+      style={{ background: "#FFBA18" }}
+      onClick={onEligibilityPageMove}
+    >
+      <div className="flex items-center justify-between text-white">
+        <p className="text-sm font-bold leading-tight opacity-[0.7] hover:cursor-pointer">
+          자격진단 기준
+        </p>
+
+        <div className="flex items-center justify-center">
+          <ArrowUpRight />
+        </div>
+      </div>
+
+      <div className="flex gap-2 text-xl leading-tight">
+        <p className="font-bold text-white">{count ? count : "0"}건</p>
+        <span
+          className="flex items-center rounded-xl bg-greyscale-grey-25 p-1 text-xs font-bold"
+          style={{ color: "#FFBA18" }}
+        >
+          <p>0% 완료</p>
+        </span>
+      </div>
+    </div>
+  );
+};