feat: modify end date

hanseulhee · Jul 16, 2024 · 43f0cb1 · 43f0cb1
1 parent daa9093
commit 43f0cb1
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 39 deletions.
diff --git a/src/pages/End/index.tsx b/src/pages/End/index.tsx
@@ -12,7 +12,7 @@ function End() {
           <OneLineContent summary="안녕하세요 온수역 맛집 소개 서비스 온수냠냠냠입니다 ! 👋🏻 👋🏻" />
 
           <OneLineContent
-            highlight="2024년 12월 1일부로 온수냠냠냠 서비스를 종료"
+            highlight="2024년 7월 5일부로 온수냠냠냠 서비스를 종료"
             summary="하고자 합니다."
           />
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,46 +1,46 @@
-import { Theme, css } from '@emotion/react'
-import ErrorIcon from '@mui/icons-material/Error'
-import PlaceCard from 'components/Card/PlaceCard'
-import Footer from 'components/Footer'
-import Carousel from 'components/common/Main/Carousel'
-import useGetRestaurant from 'hooks/api/useGetRestaurant'
-import useIntersectionObserver from 'hooks/useIntersectionObserver'
-import useScrollRestoration from 'hooks/useScrollRestoration'
-import Link from 'next/link'
-import { useCallback, useEffect, useState } from 'react'
-import theme from 'styles/Theme/theme'
+import { Theme, css } from "@emotion/react";
+import ErrorIcon from "@mui/icons-material/Error";
+import PlaceCard from "components/Card/PlaceCard";
+import Footer from "components/Footer";
+import Carousel from "components/common/Main/Carousel";
+import useGetRestaurant from "hooks/api/useGetRestaurant";
+import useIntersectionObserver from "hooks/useIntersectionObserver";
+import useScrollRestoration from "hooks/useScrollRestoration";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import theme from "styles/Theme/theme";
 
 function Home() {
-  useScrollRestoration()
-  const [pageNumber, setPageNumber] = useState(0)
+  useScrollRestoration();
+  const [pageNumber, setPageNumber] = useState(0);
 
   const { intersectionTargetRef } = useIntersectionObserver({
     callback: useCallback(
       (entry: IntersectionObserverEntry, observer: IntersectionObserver) => {
         if (entry[0].isIntersecting) {
-          setPageNumber((prev) => prev + 1)
-          observer.unobserve(entry[0].target)
+          setPageNumber((prev) => prev + 1);
+          observer.unobserve(entry[0].target);
         }
       },
-      [],
+      []
     ),
-  })
+  });
 
-  const { restaurants, isLoading } = useGetRestaurant(pageNumber)
+  const { restaurants, isLoading } = useGetRestaurant(pageNumber);
   const [combinedRestaurants, setCombinedRestaurants] = useState<
     IGetRestaurantDataContent[]
-  >([])
+  >([]);
 
   useEffect(() => {
     setCombinedRestaurants((prevCombinedRestaurants) => {
       const uniqueNewRestaurants = restaurants.filter((newRestaurant) => {
         return !prevCombinedRestaurants.some(
-          (prevRestaurant) => prevRestaurant.id === newRestaurant.id,
-        )
-      })
-      return [...prevCombinedRestaurants, ...uniqueNewRestaurants]
-    })
-  }, [pageNumber, restaurants])
+          (prevRestaurant) => prevRestaurant.id === newRestaurant.id
+        );
+      });
+      return [...prevCombinedRestaurants, ...uniqueNewRestaurants];
+    });
+  }, [pageNumber, restaurants]);
 
   return (
     <div css={wrapper}>
@@ -49,7 +49,7 @@ function Home() {
       <div css={contentWrapper}>
         <ErrorIcon css={exclamationMark} />
         <span css={noticeSummary}>
-          2024.12.01부로 서비스가 종료될 예정입니다. 관련 내용은&nbsp;
+          2024.07.05부로 서비스가 종료되었습니다. 관련 내용은&nbsp;
           <Link href="/End" passHref>
             <b>해당 링크</b>
           </Link>
@@ -67,27 +67,29 @@ function Home() {
               summary={restaurant.summary}
               img={restaurant?.outsideImage.s3Url}
             />
-          )
+          );
         })}
       </div>
 
       <div ref={intersectionTargetRef} css={dataStatus}>
-        {isLoading ? '로딩중 🍔🍕🍟🌭🍿🥞🍗' : '데이터를 모두 확인했습니다.'}
+        {isLoading ? "로딩중 🍔🍕🍟🌭🍿🥞🍗" : "데이터를 모두 확인했습니다."}
       </div>
 
-      <Footer />
+      <div css={footerWrapper}>
+        <Footer />
+      </div>
     </div>
-  )
+  );
 }
 
-export default Home
+export default Home;
 
 const wrapper = css`
   min-height: 100%;
   position: relative;
   width: 100%;
   overflow-x: hidden;
-`
+`;
 
 const inWrapper = css`
   display: flex;
@@ -96,15 +98,15 @@ const inWrapper = css`
   width: 100%;
   height: auto;
   flex-wrap: wrap;
-`
+`;
 
 const dataStatus = css`
   font-size: 0.7rem;
   text-align: center;
   margin-bottom: 1.45rem;
   color: ${theme.color.grey500};
   font-weight: ${theme.fontWeight.bold};
-`
+`;
 
 const contentWrapper = css`
   display: flex;
@@ -116,17 +118,22 @@ const contentWrapper = css`
     color: #ffa200;
     border-bottom: 1px solid #ffc800;
   }
-`
+`;
 
 const noticeSummary = (theme: Theme) => css`
   font-weight: ${theme.fontWeight.bold};
   font-size: 0.69rem;
   color: ${theme.color.grey500};
-`
+`;
 
 const exclamationMark = (theme: Theme) => css`
   color: ${theme.color.yellow};
   font-size: 1rem;
-  margin-bottom: 0.2rem;
+
   margin-right: 0.1rem;
-`
+`;
+
+const footerWrapper = css`
+  position: absolute;
+  bottom: 0;
+`;