Refactor/store

package.json

@@ -31,6 +31,7 @@
     "@mui/icons-material": "^7.3.6",
     "@mui/material": "^7.3.6",
     "axios": "^1.13.2",
+    "lottie-react": "^2.4.1",
     "next": "15.5.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",

src/pages/store/_components/PageComponents/NoResult.style.ts

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+import { colors } from '@/styles/colors';
+
+export const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+
+export const PageText = styled.div`
+  font-size: 14px;
+  font-weight: 700;
+  color: ${colors.gray[30]};
+`;

src/pages/store/_components/PageComponents/NoResult.tsx

@@ -0,0 +1,19 @@
+import Lottie from 'lottie-react';
+
+import noResultAnimation from '@/lottie/No Result.json';
+import * as S from '@/pages/store/_components/PageComponents/NoResult.style';
+
+const NoResult = () => {
+  return (
+    <S.PageContainer>
+      <Lottie
+        animationData={noResultAnimation}
+        loop
+        style={{ width: 70, height: 70 }}
+      />
+      <S.PageText>공고가 없습니다</S.PageText>
+    </S.PageContainer>
+  );
+};
+
+export default NoResult;

src/pages/store/_components/PageComponents/SearchDataEmpty.style.ts

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+import { colors } from '@/styles/colors';
+
+export const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+
+export const PageText = styled.div`
+  font-size: 14px;
+  font-weight: 700;
+  color: ${colors.gray[30]};
+`;

src/pages/store/_components/PageComponents/SearchDataEmpty.tsx

@@ -0,0 +1,19 @@
+import Lottie from 'lottie-react';
+
+import noResultAnimation from '@/lottie/No Result.json';
+import * as S from '@/pages/store/_components/PageComponents/SearchDataEmpty.style';
+
+const SearchDataEmpty = () => {
+  return (
+    <S.PageContainer>
+      <Lottie
+        animationData={noResultAnimation}
+        loop
+        style={{ width: 70, height: 70 }}
+      />
+      <S.PageText>검색 결과가 없습니다</S.PageText>
+    </S.PageContainer>
+  );
+};
+
+export default SearchDataEmpty;

src/pages/store/index.page.style.ts

@@ -124,6 +124,12 @@ export const AllJobList = styled.div`
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
 
+  &.empty {
+    grid-template-columns: 1fr;
+    place-items: center;
+    min-height: 300px;
+  }
+
   @media ${media.tablet} {
     gap: 50px;
   }

src/pages/store/index.page.tsx

@@ -12,6 +12,7 @@ import { NoticeListResponse } from '@/types/user/noticeList';
 import RightDrawer from './_components/DetailFilter/Drawer';
 import BasicPopover from './_components/DetailFilter/Popover';
 import FilterOptionSelect from './_components/Drawer/FilterDrawer';
+import NoResult from './_components/PageComponents/NoResult';
 import PaginationRounded from './_components/Pagination';
 import { useNotice } from './_hooks/useNotice';
 
@@ -34,7 +35,7 @@ const StoreList = () => {
   const [filterTrigger, setFilterTrigger] = useState(0);
   const [filterCount, setFilterCount] = useState(0);
 
-  const { notice } = useNotice({
+  const { notice: noticeData } = useNotice({
     sortValue,
     offset: LIMIT * (page - 1),
     limit: LIMIT,
@@ -96,6 +97,8 @@ const StoreList = () => {
     setPage(1);
   }, [sortValue]);
 
+  const isEmpty = noticeData && noticeData.items.length === 0;
+
   return (
     <>
       <S.JobSuggestSection>
@@ -149,21 +152,25 @@ const StoreList = () => {
           </S.JobFilterContainer>
         </S.JobListHeader>
         <S.AllJobListContainer>
-          <S.AllJobList>
-            {notice?.items.map(({ item }) => (
-              <Link
-                key={item.id}
-                href={`/store/${item.shop.item.id}/${item.id}`}
-              >
-                <ListCard key={item.id} notice={item} />
-              </Link>
-            ))}
+          <S.AllJobList className={isEmpty ? 'empty' : ''}>
+            {isEmpty ? (
+              <NoResult />
+            ) : (
+              noticeData?.items.map(({ item }) => (
+                <Link
+                  key={item.id}
+                  href={`/store/${item.shop.item.id}/${item.id}`}
+                >
+                  <ListCard notice={item} />
+                </Link>
+              ))
+            )}
           </S.AllJobList>
         </S.AllJobListContainer>
         <PaginationRounded
           page={page}
           onChange={setPage}
-          totalCount={notice?.count ?? 0}
+          totalCount={noticeData?.count ?? 0}
           limit={LIMIT}
         ></PaginationRounded>
       </S.AllJobContainer>

src/pages/store/search.page.style.ts

@@ -61,6 +61,12 @@ export const JobSearchSection = styled.div`
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
 
+  &.empty {
+    grid-template-columns: 1fr;
+    place-items: center;
+    min-height: 300px;
+  }
+
   @media ${media.tablet} {
     gap: 40px;
   }

src/pages/store/search.page.tsx

@@ -10,6 +10,7 @@
 import RightDrawer from './_components/DetailFilter/Drawer';
 import BasicPopover from './_components/DetailFilter/Popover';
 import FilterOptionSelect from './_components/Drawer/FilterDrawer';
+import SearchDataEmpty from './_components/PageComponents/SearchDataEmpty';
 import PaginationRounded from './_components/Pagination';
 import { useNotice } from './_hooks/useNotice';
 
@@ -60,7 +61,7 @@
     if (!keyword) {
       router.push('/store');
     }
   }, [router.isReady, keyword]);
 
   const showEmptyMessage = keyword.length > 0 && notice?.items.length === 0;
 
@@ -103,13 +104,13 @@
           )}
         </S.JobFilterContainer>
       </S.SearchHeader>
-      <S.JobSearchSection>
+      <S.JobSearchSection className={showEmptyMessage ? 'empty' : ''}>
         {notice?.items.map(({ item }) => (
           <Link key={item.id} href={`/store/${item.shop.item.id}/${item.id}`}>
             <ListCard key={item.id} notice={item} />
           </Link>
         ))}
-        {showEmptyMessage && <div>검색값이 없습니다</div>}
+        {showEmptyMessage && <SearchDataEmpty />}
       </S.JobSearchSection>
       <PaginationRounded
         page={page}