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

src/api/employer.ts

@@ -1,5 +1,5 @@
 import axios from '@/lib/axios';
-import RegisterFormData from '@/types/myShop';
+import { RegisterFormData } from '@/types/myShop';
 import { default as originAxios } from 'axios';
 
 export async function postShop(body: Omit<RegisterFormData, 'image'>) {

src/components/features/my-shop/indexModal.tsx

@@ -0,0 +1,46 @@
+import { Modal } from '@/components/ui';
+import { useRouter } from 'next/router';
+
+interface Props {
+  guestRedirect: boolean;
+  setGuestRedirect: (value: boolean) => void;
+  employeeRedirect: boolean;
+  setEmployeeRedirect: (value: boolean) => void;
+}
+
+const IndexModal = ({
+  guestRedirect,
+  setGuestRedirect,
+  employeeRedirect,
+  setEmployeeRedirect,
+}: Props) => {
+  const router = useRouter();
+  return (
+    <>
+      <Modal
+        open={guestRedirect}
+        onClose={() => setGuestRedirect(false)}
+        variant='warning'
+        title='로그인이 필요합니다.'
+        primaryText='확인'
+        onPrimary={() => {
+          setGuestRedirect(false);
+          router.push('/login');
+        }}
+      />
+      <Modal
+        open={employeeRedirect}
+        onClose={() => setEmployeeRedirect(false)}
+        variant='warning'
+        title='접근권한이 없습니다.'
+        primaryText='확인'
+        onPrimary={() => {
+          setEmployeeRedirect(false);
+          router.push('/');
+        }}
+      />
+    </>
+  );
+};
+
+export default IndexModal;

src/components/features/my-shop/registerAddress.tsx

@@ -1,6 +1,6 @@
 import { Dropdown, Input } from '@/components/ui';
 import { ADDRESS_CODE } from '@/constants/dropdown';
-import RegisterFormData from '@/types/myShop';
+import { RegisterFormData } from '@/types/myShop';
 
 interface Props {
   formData: RegisterFormData;

src/components/features/my-shop/registerDescription.tsx

@@ -1,4 +1,4 @@
-import RegisterFormData from '@/types/myShop';
+import { RegisterFormData } from '@/types/myShop';
 
 interface Props {
   formData: RegisterFormData;

src/components/features/my-shop/registerName.tsx

@@ -1,6 +1,6 @@
 import { Dropdown, Input } from '@/components/ui';
 import { CATEGORY_CODE } from '@/constants/dropdown';
-import RegisterFormData from '@/types/myShop';
+import { RegisterFormData } from '@/types/myShop';
 
 interface Props {
   formData: RegisterFormData;

src/components/features/my-shop/registerWage.tsx

@@ -1,5 +1,5 @@
 import { Input } from '@/components/ui';
-import RegisterFormData from '@/types/myShop';
+import { RegisterFormData } from '@/types/myShop';
 import { ChangeEvent } from 'react';
 
 interface Props {

src/components/features/my-shop/shopForm.tsx

@@ -6,7 +6,7 @@ import RegisterName from '@/components/features/my-shop/registerName';
 import RegisterWage from '@/components/features/my-shop/registerWage';
 import { Container } from '@/components/layout';
 import { Button, Icon } from '@/components/ui';
-import RegisterFormData from '@/types/myShop';
+import { RegisterFormData } from '@/types/myShop';
 import { ChangeEvent, useEffect, useState } from 'react';
 
 interface ShopFromProps {

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/pages/my-shop/edit.tsx

@@ -3,7 +3,7 @@ import ShopForm from '@/components/features/my-shop/shopForm';
 import { Header, Wrapper } from '@/components/layout';
 import useAuth from '@/hooks/useAuth';
 import { NextPageWithLayout } from '@/pages/_app';
-import RegisterFormData from '@/types/myShop';
+import { RegisterFormData } from '@/types/myShop';
 import { useEffect, useState } from 'react';
 
 const Edit: NextPageWithLayout = () => {

src/pages/my-shop/index.tsx

@@ -1,47 +1,117 @@
 import { getNotice, getShop } from '@/api/employer';
-import { Frame } from '@/components/layout';
-import { Button, Notice } from '@/components/ui';
+import IndexModal from '@/components/features/my-shop/indexModal';
+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 { user, bootstrapped } = useAuth();
+  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 [guestRedirect, setGuestRedirect] = useState(false);
+  const [employeeRedirect, setEmployeeRedirect] = useState(false);
+  const observerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!bootstrapped) return;
+    if (user === null) {
+      setGuestRedirect(true);
+      return;
+    }
+    if (user?.type === 'employee') {
+      setEmployeeRedirect(true);
+      return;
+    }
+  }, [user, bootstrapped]);
 
   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]);
+
   return (
     <>
-      {user?.shop ? (
+      <IndexModal
+        guestRedirect={guestRedirect}
+        setGuestRedirect={setGuestRedirect}
+        employeeRedirect={employeeRedirect}
+        setEmployeeRedirect={setEmployeeRedirect}
+      />
+      {!user?.shop ? (
+        <Frame
+          title='내 가게'
+          content='내 가게를 소개하고 공고도 등록해 보세요.'
+          buttonText='가게 등록하기'
+          href='/my-shop/register'
+        />
+      ) : (
         <>
-          <Notice notice={shopData} variant='shop'>
+          <Notice notice={shopData} variant='shop' className='mt-5 tablet:mt-8'>
             <div className='flex gap-2'>
               <Button
                 as={Link}
@@ -60,20 +130,39 @@ const Myshop = () => {
               </Button>
             </div>
           </Notice>
-          <Frame
-            title='등록한 공고'
-            content='공고를 등록해 보세요.'
-            buttonText='공고 등록하기'
-            href='/employer/shops/${user.shop.item.id}/notices/register'
-          />
+          <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`}
+              />
+            )}
+          </section>
         </>
-      ) : (
-        <Frame
-          title='내 가게'
-          content='내 가게를 소개하고 공고도 등록해 보세요.'
-          buttonText='가게 등록하기'
-          href='/my-shop/register'
-        />
       )}
     </>
   );

src/pages/my-shop/register.tsx

@@ -2,7 +2,7 @@ import { postPresignedUrl, postShop, uploadImage } from '@/api/employer';
 import ShopForm from '@/components/features/my-shop/shopForm';
 import { Header, Wrapper } from '@/components/layout';
 import { NextPageWithLayout } from '@/pages/_app';
-import RegisterFormData from '@/types/myShop';
+import { RegisterFormData } from '@/types/myShop';
 
 const Register: NextPageWithLayout = () => {
   const handleRegister = async (formData: RegisterFormData) => {

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 }[];
+}