✨ Feat: 가게 등록 공고 조회 / 무한스크롤 구현

src/components/features/noticeList/noticeListSection.tsx

@@ -13,7 +13,7 @@ interface NoticeListSectionProps {
 }
 
 const NoticeListSection = ({ q, initialFilters }: NoticeListSectionProps) => {
-  const { notices, isLoading, isInitialized, error, pagination, fetchNotices,reset, filters } =
+  const { notices, isLoading, isInitialized, error, pagination, fetchNotices, reset, filters } =
     useNotices();
 
   useEffect(() => {

src/components/layout/footer/footer.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 const Footer = () => {
   return (
     <footer>
-      <Container className='max-w-full bg-gray-100'>
+      <Container className='max-w-full bg-gray-200'>
         <div className='mx-auto flex flex-wrap justify-between gap-10 px-5 py-8 desktop:w-[964px]'>
           <div className='order-3 flex-grow text-caption font-normal text-gray-500 tablet:order-1 tablet:flex-grow-0 tablet:text-body-m'>
             ©codeit - 2023

src/context/authProvider.tsx

@@ -34,7 +34,7 @@ export const AuthContext = createContext<AuthContextValue | null>(null);
 const TOKEN_KEY = 'thejulge_token';
 const USER_ID_KEY = 'thejulge_user_id';
 const EXPIRES_KEY = 'thejulge_expires_at';
-const EXPIRES_DURATION_MS = 10 * 60 * 1000; // 10분
+const EXPIRES_DURATION_MS = 1000 * 60 * 1000; // 10분
 
 /** storage helpers */
 const isBrowser = () => typeof window !== 'undefined';

src/pages/my-shop/index.tsx

@@ -1,80 +1,159 @@
 import { getNotice, getShop } from '@/api/employer';
-import { Frame } from '@/components/layout';
-import { Button, Notice } from '@/components/ui';
+import { Container, Frame } from '@/components/layout';
+import { Button, Notice, Post } from '@/components/ui';
 import useAuth from '@/hooks/useAuth';
+import { NoticeItem, NoticeResponse, ShopItem } from '@/types/myShop';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
-
-interface ShopItem {
-  id: string;
-  title?: string;
-  description?: string;
-}
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 const Myshop = () => {
   const { user } = useAuth();
-  const [shopData, setShopData] = useState({});
-  const [shopNotice, setShopNotice] = useState({});
+  const [shopData, setShopData] = useState<ShopItem>({
+    id: '',
+    name: '',
+    category: '',
+    address1: '',
+    imageUrl: '',
+    originalHourlyPay: 0,
+    description: '',
+  });
+  const [shopNotice, setShopNotice] = useState<NoticeItem[]>([]);
+  const [nextOffset, setNextOffset] = useState<number | null>(0);
+  const [loading, setLoading] = useState(false);
+  const observerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
+    if (!user?.shop) return;
+    const shopId = user.shop.item.id;
+
     const get = async () => {
-      if (!user?.shop) return;
       try {
-        const [shopRes, noticeRes] = await Promise.all([
-          getShop(user.shop.item.id),
-          getNotice(user.shop.item.id, { offset: 0, limit: 6 }),
-        ]);
-
+        const shopRes = await getShop(shopId);
         const { description, ...rest } = shopRes.item;
-        const formattedShopData = { ...rest, shopDescription: description };
-        setShopData(formattedShopData);
-        setShopNotice(noticeRes);
-        //console.log('공고 조회:', noticeRes);
+        setShopData({ ...rest, shopDescription: description });
+        setShopNotice([]);
+        setNextOffset(0);
+        loadMoreNotice();
       } catch (error) {
         alert(error);
       }
     };
     get();
   }, [user]);
 
+  const loadMoreNotice = useCallback(async () => {
+    if (!user?.shop || nextOffset === null || loading) return;
+    setLoading(true);
+    try {
+      const noticeRes: NoticeResponse = await getNotice(user.shop.item.id, {
+        offset: nextOffset,
+        limit: 6,
+      });
+      setShopNotice(prevShopNotice => {
+        const newItems = noticeRes.items.map(i => i.item);
+        const merged = [...prevShopNotice, ...newItems];
+        const unique = merged.filter(
+          (item, index, self) => index === self.findIndex(i => i.id === item.id)
+        );
+        return unique;
+      });
+      setNextOffset(noticeRes.hasNext ? nextOffset + noticeRes.items.length : null);
+    } catch (error) {
+      alert(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [user?.shop, nextOffset, loading]);
+
+  useEffect(() => {
+    if (!observerRef.current) return;
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries[0].isIntersecting) {
+          loadMoreNotice();
+        }
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(observerRef.current);
+    return () => observer.disconnect();
+  }, [loadMoreNotice]);
+
+  if (!user)
+    return (
+      <Frame
+        title='내 가게'
+        content='로그인 후 가게를 관리할 수 있습니다.'
+        buttonText='로그인하기'
+        href='/login'
+      />
+    );
+
+  if (!user.shop)
+    return (
+      <Frame
+        title='내 가게'
+        content='내 가게를 소개하고 공고도 등록해 보세요.'
+        buttonText='가게 등록하기'
+        href='/my-shop/register'
+      />
+    );
+
   return (
     <>
-      {user?.shop ? (
-        <>
-          <Notice notice={shopData} variant='shop'>
-            <div className='flex gap-2'>
-              <Button
-                as={Link}
-                href='/my-shop/edit'
-                variant='secondary'
-                className='h-[38px] flex-1 tablet:h-12'
-              >
-                편집하기
-              </Button>
-              <Button
-                as={Link}
-                href={`/employer/shops/${user.shop.item.id}/notices/register`}
-                className='h-[38px] flex-1 tablet:h-12'
-              >
-                공고 등록하기
-              </Button>
-            </div>
-          </Notice>
+      <Notice notice={shopData} variant='shop' className='mt-5 tablet:mt-8'>
+        <div className='flex gap-2'>
+          <Button
+            as={Link}
+            href='/my-shop/edit'
+            variant='secondary'
+            className='h-[38px] flex-1 tablet:h-12'
+          >
+            편집하기
+          </Button>
+          <Button
+            as={Link}
+            href={`/employer/shops/${user.shop.item.id}/notices/register`}
+            className='h-[38px] flex-1 tablet:h-12'
+          >
+            공고 등록하기
+          </Button>
+        </div>
+      </Notice>
+      <section className='mt-10 max-w-full bg-gray-100 tablet:mt-20'>
+        {shopNotice.length > 0 ? (
+          <>
+            <Container as='section' isPage className='pt-0'>
+              <div className='mt-7 tablet:mt-0'>
+                <h2 className='mb-4 text-heading-l font-bold tablet:mb-8'>내가 등록한 공고</h2>
+                <div className='grid grid-cols-2 gap-x-4 gap-y-8 desktop:grid-cols-3'>
+                  {shopNotice.map(item => {
+                    const mergedNotice = {
+                      ...item,
+                      imageUrl: shopData.imageUrl,
+                      name: shopData.name,
+                      address1: shopData.address1,
+                      shopId: shopData.id,
+                      originalHourlyPay: shopData.originalHourlyPay,
+                    };
+                    return <Post key={item.id} notice={mergedNotice} />;
+                  })}
+                </div>
+                <div ref={observerRef} className='flex h-12 items-center justify-center'>
+                  {loading && <p className='text-gray-500'>불러오는 중...</p>}
+                </div>
+              </div>
+            </Container>
+          </>
+        ) : (
           <Frame
             title='등록한 공고'
             content='공고를 등록해 보세요.'
             buttonText='공고 등록하기'
-            href='/employer/shops/${user.shop.item.id}/notices/register'
+            href={`/employer/shops/${user.shop.item.id}/notices/register`}
           />
-        </>
-      ) : (
-        <Frame
-          title='내 가게'
-          content='내 가게를 소개하고 공고도 등록해 보세요.'
-          buttonText='가게 등록하기'
-          href='/my-shop/register'
-        />
-      )}
+        )}
+      </section>
     </>
   );
 };

src/types/myShop.ts

@@ -1,4 +1,4 @@
-interface RegisterFormData {
+export interface RegisterFormData {
   name: string;
   category?: string;
   address1?: string;
@@ -9,4 +9,32 @@ interface RegisterFormData {
   imageUrl?: string;
 }
 
-export default RegisterFormData;
+export interface ShopItem {
+  id: string;
+  name: string;
+  category: string;
+  address1: string;
+  imageUrl: string;
+  originalHourlyPay: number;
+  description: string;
+}
+
+export interface ShopResponse {
+  item: ShopItem;
+}
+
+export interface NoticeItem {
+  id: string;
+  hourlyPay: number;
+  startsAt: string;
+  workhour: number;
+  closed: boolean;
+}
+
+export interface NoticeResponse {
+  offset: number;
+  limit: number;
+  count: number;
+  hasNext: boolean;
+  items: { item: NoticeItem }[];
+}