feat: SEO 최적화 기본 작업

index.html

@@ -25,6 +25,10 @@
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
     />
     <title>퍼센트 호텔</title>
+    <meta
+      name="google-site-verification"
+      content="1iByDUnejFS8cGa288SqOArtDYqEEAiamaOkOZioIx8"
+    />
   </head>
   <script>
     (function (m, a, z, e) {

src/components/Helmet/Helmet.tsx

@@ -1,34 +1,70 @@
+import { memo } from "react";
 import { Helmet } from "react-helmet-async";
 
-import { PATH } from "@/constants/path";
-
-export const HelmetTag = ({ text }: { text: string }) => {
-  return (
-    <Helmet>
-      <title>{text} | 퍼센트호텔</title>
-      <meta name="description" content="양도 거래? 취소 보다 빠른 거래!"></meta>
-
-      <meta itemProp="name" content="퍼센트 호텔" />
-      <meta itemProp="description" content="양도 거래? 취소 보다 빠른 거래!" />
-      <meta itemProp="image" content="/icon-192.png" />
-
-      <meta property="og:url" content={PATH.ROOT} />
-      <meta property="og:type" content="website" />
-      <meta property="og:title" content={text} />
-      <meta property="og:site_name" content="퍼센트 호텔" />
-      <meta property="og:image" content="/icon-192.png" />
-      <meta
-        property="og:description"
-        content="양도 거래? 취소 보다 빠른 거래!"
-      />
-
-      <meta property="twitter:card" content="/icon-192.png" />
-      <meta name="twitter:title" content={text} />
-      <meta
-        name="twitter:description"
-        content="양도 거래? 취소 보다 빠른 거래!"
-      />
-      <meta name="twitter:image" content="/src/assets/logos/main_logo.svg" />
-    </Helmet>
-  );
-};
+export const HelmetTag = memo(
+  ({
+    title,
+    schemaType = "TravelAgency",
+    schemaData = {},
+  }: {
+    title?: string;
+    description?: string;
+    schemaType?: string;
+    schemaData?: Record<string, any>;
+  }) => {
+    console.log(schemaData);
+
+    const orig = location.origin;
+    const url = location.href;
+    const defaultDescription =
+      "못 가게된 숙박권 더 이상 돈 날리지 말고, 비싼 호캉스도 믿고 거래하자! 특가보다 저렴한 호캉스 예약.";
+    const fullTitle = `퍼센트호텔${title ? ` | ${title}` : ""}`;
+
+    const baseSchema = {
+      "@context": "https://schema.org",
+      "@type": schemaType,
+      name: `${fullTitle}`,
+      url: orig,
+      logo: `${orig}/assets/logos/main_logo.svg`,
+      description: defaultDescription,
+      address: {
+        "@type": "PostalAddress",
+        addressCountry: "KR",
+      },
+      potentialAction: {
+        "@type": "SearchAction",
+        target: {
+          "@type": "EntryPoint",
+          urlTemplate: `${orig}/search?q={search_term_string}`,
+        },
+        "query-input": "required name=search_term_string",
+      },
+    };
+
+    const fullSchema = { ...baseSchema, ...schemaData };
+
+    return (
+      <Helmet>
+        <title>{fullTitle}</title>
+        <meta name="description" content={defaultDescription} />
+
+        <meta property="og:url" content={url} />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content={fullTitle} />
+        <meta property="og:site_name" content="퍼센트 호텔" />
+        <meta property="og:image" content={`${orig}/og-img.png`} />
+        <meta property="og:description" content={defaultDescription} />
+
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={fullTitle} />
+        <meta name="twitter:description" content={defaultDescription} />
+        <meta
+          name="twitter:image"
+          content={`${orig}/assets/logos/main_logo.svg`}
+        />
+
+        <script type="application/ld+json">{JSON.stringify(fullSchema)}</script>
+      </Helmet>
+    );
+  },
+);

src/components/carousel/Carousel.style.ts

@@ -1,16 +1,10 @@
 import { PiCaretLeftBold, PiCaretRightBold } from "react-icons/pi";
 import styled, { css } from "styled-components";
 
-export const CarouselContainer = styled.div<{
-  $height: number;
-}>`
+export const CarouselContainer = styled.div`
   position: relative;
 
-  min-height: ${(props) => `${props.$height}px`};
-  height: ${(props) => `${props.$height}px`};
-
   overflow: hidden;
-  cursor: grab;
 
   touch-action: pan-y;
 `;

src/components/carousel/Carousel.tsx

@@ -1,9 +1,9 @@
-import { useCarousel } from "@/hooks/common/useCarousel";
-import { useCarouselSize } from "@/hooks/common/useCarouselSize";
-
 import * as S from "./Carousel.style.ts";
 import ProgressiveImg from "../progressiveImg/ProgressiveImg.tsx";
 
+import { useCarousel } from "@/hooks/common/useCarousel";
+import { useCarouselSize } from "@/hooks/common/useCarouselSize";
+
 interface CarouselProps {
   images: string[];
   height?: number;
@@ -41,7 +41,7 @@ const Carousel = ({
   });
   console.log("currentIndex", currentIndex);
   return (
-    <S.CarouselContainer $height={height}>
+    <S.CarouselContainer>
       <S.SliderWrapper>
         <S.SliderContainer
           ref={sliderRef}

src/components/layout/Outlet.tsx

@@ -0,0 +1,22 @@
+import { Outlet as RouterOutlet } from "react-router-dom";
+
+import { HelmetTag } from "@/components/Helmet/Helmet";
+
+const Outlet = ({ title }: { title?: string }) => {
+  const schemaData = {
+    "@type": "WebPage",
+    mainEntityOfPage: {
+      "@type": "WebPage",
+      "@id": `${location.origin}${location.pathname}}`,
+    },
+  };
+
+  return (
+    <>
+      <HelmetTag title={title} schemaData={schemaData} />
+      <RouterOutlet />
+    </>
+  );
+};
+
+export default Outlet;

src/hooks/api/useSearchQuery.ts

@@ -0,0 +1,45 @@
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+
+import type { ISearchFilterInfo } from "@/types/searchFilterInfo";
+
+import { fetchSearchList } from "@/apis/fetchSeachList";
+
+export const useInfiniteSearchQuery = (searchInfo: ISearchFilterInfo) => {
+  const pageSize = 10;
+
+  return useSuspenseInfiniteQuery({
+    queryKey: [
+      "searchItems",
+      searchInfo.location,
+      searchInfo.checkIn,
+      searchInfo.checkOut,
+      searchInfo.quantityPeople,
+      searchInfo.sorted,
+      searchInfo.brunch,
+      searchInfo.pool,
+      searchInfo.oceanView,
+    ],
+    queryFn: ({ pageParam = 0 }) =>
+      fetchSearchList(
+        searchInfo.location,
+        searchInfo.checkIn,
+        searchInfo.checkOut,
+        searchInfo.quantityPeople,
+        searchInfo.sorted,
+        searchInfo.brunch,
+        searchInfo.pool,
+        searchInfo.oceanView,
+        pageParam,
+        pageSize,
+      ),
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      const lastData = lastPage?.content;
+      return lastData && lastData.length === pageSize
+        ? lastPage?.number + 1
+        : undefined;
+    },
+  });
+};

src/pages/alarmPage/AlarmPage.tsx

@@ -8,8 +8,9 @@ import { fetchUserInfo } from "@/apis/fetchUserInfo";
 import NoResult from "@/components/noResult/NoResult";
 import { PATH } from "@/constants/path";
 import { isMobileSafari } from "@/utils/isMobileSafari";
+import { HelmetTag } from "@/components/Helmet/Helmet";
 
-const AlarmPage = () => {
+const AlarView = () => {
   const mobileSafari = isMobileSafari();
 
   const { data: userData } = useSuspenseQuery({
@@ -66,4 +67,21 @@ const AlarmPage = () => {
   }
 };
 
+const AlarmPage = () => {
+  const schemaData = {
+    "@type": "WebPage",
+    mainEntityOfPage: {
+      "@type": "WebPage",
+      "@id": `${location.origin}${location.pathname}}`,
+    },
+  };
+
+  return (
+    <>
+      <HelmetTag title="알림" schemaData={schemaData} />
+      <AlarView />
+    </>
+  );
+};
+
 export default AlarmPage;

src/pages/connectYanoljaPage/IntroPage/IntroPage.tsx

@@ -1,12 +1,12 @@
-import XIcon from "@/assets/icons/ic_x.png";
-import PercentHotelLogo from "@/assets/logos/Percent-hotel_logo_b.png";
-import YanoljaLogo from "@/assets/logos/Yanolja_CI.png";
-import { PATH } from "@/constants/path";
 import { useNavigate } from "react-router-dom";
 
 import * as S from "./IntroPage.style.ts";
 
+import XIcon from "@/assets/icons/ic_x.png";
+import PercentHotelLogo from "@/assets/logos/Percent-hotel_logo_b.png";
+import YanoljaLogo from "@/assets/logos/Yanolja_CI.png";
 import ProgressiveImg from "@/components/progressiveImg/ProgressiveImg.tsx";
+import { PATH } from "@/constants/path";
 
 const IntroPage = () => {
   const navigate = useNavigate();

src/pages/connectYanoljaPage/successPage/SuccessPage.tsx

@@ -1,11 +1,11 @@
-import PercentHotelLogo from "@/assets/logos/Percent-hotel_logo_b.png";
-import { PATH } from "@/constants/path";
 import { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import * as S from "./SuccessPage.style.ts";
 
+import PercentHotelLogo from "@/assets/logos/Percent-hotel_logo_b.png";
 import Success from "@/components/lottie/success/Success";
+import { PATH } from "@/constants/path";
 
 const SuccessPage = () => {
   const navigate = useNavigate();

src/pages/connectYanoljaPage/verificationPage/VerificationPage.tsx

@@ -1,10 +1,11 @@
+import { FormProvider, useForm } from "react-hook-form";
+
+import * as S from "./VerificationPage.style";
+
 import YanoljaLogo from "@/assets/logos/Yanolja_CI.png";
 import SubmitButton from "@/pages/connectYanoljaPage/verificationPage/components/submitButton/SubmitButton";
 import TermsAgreementSection from "@/pages/connectYanoljaPage/verificationPage/components/termsAgreementSection/TermsAgreementSection";
 import VerificationSection from "@/pages/connectYanoljaPage/verificationPage/components/verificationSection/VerificationSection";
-import { FormProvider, useForm } from "react-hook-form";
-
-import * as S from "./VerificationPage.style";
 
 const VerificationPage = () => {
   const methods = useForm({