[김은재] 상세공고 반응형 / 등록한 공고 무한스크롤

api/myShop.ts

@@ -44,3 +44,17 @@ export const updateShopDetails = async (shopId: string, data: FormData) => {
     throw error;
   }
 };
+
+export const fetchUserInfo = async (token: string, userId: string) => {
+  try {
+    const response = await axios.get(`${BASE_URL}/users/${userId}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error("Failed to fetch user info:", error);
+    return null;
+  }
+};

api/notice.ts

@@ -2,11 +2,16 @@ import { BASE_URL, BASE_API_URL } from "@/constants/url";
 import { INoticeLinks } from "@/types/Notice";
 import axios from "axios";
 
-export const getNoticeDetailedData = async (shopId: string, noticeId: string) => {
+export const getNoticeDetailedData = async (
+  shopId: string,
+  noticeId: string
+) => {
   let res;
 
   try {
-    res = await axios.get(`${BASE_API_URL}/shops/${shopId}/notices/${noticeId}`);
+    res = await axios.get(
+      `${BASE_API_URL}/shops/${shopId}/notices/${noticeId}`
+    );
   } catch (error) {
     if (axios.isAxiosError(error)) {
       alert(error);
@@ -16,16 +21,17 @@ export const getNoticeDetailedData = async (shopId: string, noticeId: string) =>
 };
 
 export const getApplicantList = async (shopId: string, noticeId: string) => {
-  let res;
-
   try {
-    res = await axios.get(`${BASE_API_URL}/shops/${shopId}/notices/${noticeId}/applications`);
+    const res = await axios.get(
+      `${BASE_API_URL}/shops/${shopId}/notices/${noticeId}/applications?limit=100`
+    );
+    return res;
   } catch (error) {
     if (axios.isAxiosError(error)) {
-      alert(error);
+      alert("데이터를 가져오는 중 오류가 발생했습니다.");
     }
+    throw error;
   }
-  return res?.data;
 };
 
 export const postApplicant = async (shopId: string, noticeId: string) => {
@@ -52,7 +58,10 @@ export const postApplicant = async (shopId: string, noticeId: string) => {
   }
 };
 
-export const putApplicationStatus = async (status: string, idObj: { [key: string]: string }) => {
+export const putApplicationStatus = async (
+  status: string,
+  idObj: { [key: string]: string }
+) => {
   const accessToken =
     "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJlMzFmNDkzMy1jNGJjLTQyYjItOTllMC1jNTg1OGNmMGM2NDciLCJpYXQiOjE3MTc4Mzk4Mzd9.EiuJoitWu9Onu0sp2sxkYgBWcu3DMAv1XIhsI8VBV1A";
   let res;
@@ -76,3 +85,23 @@ export const putApplicationStatus = async (status: string, idObj: { [key: string
   }
   return res;
 };
+
+export interface FormData {
+  shopId: string;
+}
+
+export const getMyNoticeList = async (
+  shopId: string,
+  offset = 0,
+  limit = 6
+) => {
+  try {
+    const response = await axios.get(
+      `${BASE_API_URL}/shops/${shopId}/notices?offset=${offset}&limit=${limit}`
+    );
+
+    return response.data;
+  } catch (error) {
+    throw new Error("Failed to fetch data");
+  }
+};

atoms/employerAtom.ts

@@ -15,6 +15,6 @@ export const employerAtom = atom({
     address2: "",
     description: "",
     imageUrl: "",
-    originalHourlyPay: "",
+    originalHourlyPay: 0,
   },
 });

components/Shop/ShopNotice/ShopNotice.module.scss

@@ -0,0 +1,78 @@
+@import "@/styles/const.scss";
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  width: 964px;
+  padding: 60px 0;
+
+  @media (max-width: $TABLET) {
+    width: 100%;
+    padding: 0 0 60px 0;
+  }
+}
+
+.header {
+  width: 30%;
+}
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 20px;
+
+  @media (max-width: $MOBILE) {
+    font-size: 20px;
+  }
+}
+.notice {
+  width: 964px;
+  height: 217px;
+  border: 1px solid var(--gray20);
+  border-radius: 12px;
+  padding: 60px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: $TABLET) {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  @media (max-width: $MOBILE) {
+  }
+}
+
+.notice-wrapper {
+  width: 346px;
+  gap: 24px;
+  @include flex-column;
+  align-items: center;
+
+  @media (max-width: $TABLET) {
+    flex-direction: column;
+  }
+
+  @media (max-width: $MOBILE) {
+    width: 150px;
+  }
+}
+
+.button-wrapper {
+  width: 100%;
+  display: flex;
+  gap: 8px;
+}
+
+.my-notice-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+  overflow: hidden;
+  width: 100%;
+  transition: transform 0.5s ease;
+  justify-items: center;
+}

components/Shop/ShopNotice/index.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useRef, useState } from "react";
+import styles from "./ShopNotice.module.scss";
+import classNames from "classnames/bind";
+import Button from "@/components/Button";
+import Post from "@/components/Post";
+import { useRecoilValue } from "recoil";
+import { employerAtom } from "@/atoms/employerAtom";
+import { getMyNoticeList } from "@/api/notice";
+import { INoticeWithShopData } from "@/types/Notice";
+import { NoticeEmptyProps } from "./ShopNotice.types";
+import { calculateIncreasePercent } from "@/utils/calculateIncreasePercent";
+import Link from "next/link";
+import Spinner from "@/components/Spinner";
+
+const cx = classNames.bind(styles);
+
+const ShopNotice = ({ onClick }: NoticeEmptyProps) => {
+  const targetRef = useRef(null);
+  const [hasNextData, setHasNextData] = useState(false);
+  const [offset, setOffset] = useState(0);
+  const shopValue = useRecoilValue(employerAtom);
+  const [postList, setPostList] = useState<INoticeWithShopData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!shopValue) return;
+    handleGetMyNoticeList(shopValue.shopId, offset);
+  }, [shopValue]);
+
+  useEffect(() => {
+    if (!targetRef.current || !shopValue) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && hasNextData) {
+          handleGetMyNoticeList(shopValue.shopId, offset);
+        }
+      },
+      { threshold: 0 }
+    );
+
+    observer.observe(targetRef.current);
+
+    if (!hasNextData) observer.unobserve(targetRef.current);
+
+    return () => observer.disconnect();
+  }, [targetRef, hasNextData, offset]);
+
+  const handleGetMyNoticeList = async (
+    shopId: string,
+    currentOffset: number
+  ) => {
+    try {
+      setLoading(true);
+      const result = await getMyNoticeList(shopId, currentOffset);
+      const resultNoticeList = result.items.map(
+        (element: { item: INoticeWithShopData; links: any[] }) => {
+          element.item.shop = {
+            id: shopValue.shopId,
+            name: shopValue.name,
+            category: shopValue.category,
+            address1: shopValue.address1,
+            address2: shopValue.address2,
+            description: shopValue.description,
+            imageUrl: shopValue.imageUrl,
+            originalHourlyPay: shopValue.originalHourlyPay,
+          };
+          return element.item;
+        }
+      );
+
+      setPostList((prev) => {
+        return [...prev, ...resultNoticeList];
+      });
+      setHasNextData(result.hasNext);
+      setOffset((prevOffset) => prevOffset + result.limit);
+    } catch (e) {
+      setError("Failed to fetch data");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className={cx("container")}>
+      <div className={cx("header")}>
+        <h1 className={cx("title")}>등록한 공고</h1>
+      </div>
+      {postList.length === 0 && (
+        <div className={cx("notice")}>
+          <div className={cx("notice-wrapper")}>
+            <p>공고를 등록해 보세요.</p>
+            <Button
+              btnColorType="orange"
+              btnCustom="userNoticeDetailed"
+              onClick={onClick}
+            >
+              공고 등록하기
+            </Button>
+          </div>
+        </div>
+      )}
+      <div className={cx("my-notice-list")}>
+        {postList.map((item, i) => {
+          const increasePercent = calculateIncreasePercent(
+            item.shop?.originalHourlyPay,
+            item.hourlyPay
+          );
+
+          return (
+            <Link key={i} href={`/my-shop/${item.id}`}>
+              <Post
+                key={item.id}
+                startsAt={item.startsAt}
+                workhour={item.workhour}
+                increasePercent={increasePercent}
+                shopName={item.shop?.name}
+                shopAddress1={item.shop?.address1}
+                hourlyPay={item.hourlyPay}
+                shopImageUrl={item.shop?.imageUrl}
+              />
+            </Link>
+          );
+        })}
+      </div>
+      {loading && <Spinner />}
+      {hasNextData && <div ref={targetRef} />}
+      {error && <div>{error}</div>}
+    </div>
+  );
+};
+
+export default ShopNotice;

components/Shop/ShopView/index.tsx

@@ -8,7 +8,7 @@ import { fetchShopData } from "@/api/myShop";
 import { useRecoilValue } from "recoil";
 import Spinner from "@/components/Spinner";
 import { employerAtom } from "@/atoms/employerAtom";
-import ShopNoticeEmpty from "../ShopEmpty";
+import ShopNotice from "../ShopNotice";
 import ShopNoticeForm from "../ShopNotice/ShopNoticeForm";
 
 const cx = classNames.bind(styles);
@@ -109,7 +109,7 @@ const ShopView: React.FC<ShopViewProps> = ({ onEdit }) => {
               </div>
             </div>
           </div>
-          <ShopNoticeEmpty onClick={handleOpenNoticeForm} />
+          <ShopNotice onClick={handleOpenNoticeForm} />
         </>
       )}
     </div>

components/Spinner/Spinner.module.scss

@@ -1,5 +1,5 @@
 .container {
-  height: 90vh;
+  height: 400px;
   display: flex;
   align-items: center;
   justify-content: center;

components/layout/Header/UiButton/index.tsx

@@ -8,11 +8,7 @@ export default function UiButton({ name, id, handleClickButton }: ButtonProps) {
   };
 
   return (
-    <button
-      className={styles.uiButton}
-      type="button"
-      onClick={handleClickMovePage}
-    >
+    <button className={styles.uiButton} type="button" onClick={handleClickMovePage}>
       {name}
     </button>
   );