Merge pull request #246 from JEOLLOGA/feat/#245/basic-seo

[FEAT] robots.txt 및 메타태그 정보 추가
JEOLLOGA · Mar 6, 2025 · c77feae · c77feae
2 parents b786c4a + 92d4b13
commit c77feae
Show file tree

Hide file tree

Showing 18 changed files with 69 additions and 90 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>절로가</title>
+    <title>절로가 | 템플스테이 간편 탐색 서비스</title>
+    <meta
+      name="description"
+      content="템플스테이를 만나는 가장 쉬운 방법, 전국 사찰의 템플스테이 프로그램을 한눈에 비교하고, 나에게 맞는 힐링을 찾아보세요. 자연 속에서 명상과 쉼을 경험하며, 평범한 하루에 특별한 휴식을 더해 보세요." />
 
     <!-- Google Tag Manager -->
     <script>
@@ -21,14 +24,19 @@
     </script>
     <!-- End Google Tag Manager -->
 
-    <meta property="og:title" content="절로가" />
+    <meta property="og:title" content="절로가 | 템플스테이 간편 탐색 서비스" />
     <meta property="og:image" content="public/img_og.png" />
-    <meta property="og:description" content="템플스테이를 만나는 가장 쉬운 방법," />
+    <meta
+      property="og:description"
+      content="템플스테이를 만나는 가장 쉬운 방법, 전국 사찰의 템플스테이 프로그램을 한눈에 비교하고, 나에게 맞는 힐링을 찾아보세요. 자연 속에서 명상과 쉼을 경험하며, 평범한 하루에 특별한 휴식을 더해 보세요." />
     <meta property="og:url" content="https://www.gototemplestay.com/" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="절로가" />
     <meta property="og:locale" content="ko_KR" />
-    <meta name="keywords" content="템플스테이, 절로가, 여행, 사찰, 명상, 힐링" />
+    <meta
+      name="keywords"
+      content="템플스테이, 절로가, 여행, 사찰, 명상, 힐링, 템플스테이 추천, 휴식형 템플스테이, 체험형 템플스테이" />
+    <link rel="canonical" href="https://www.gototemplestay.com/" />
   </head>
   <body>
     <!-- Google Tag Manager (noscript) -->

diff --git a/robots.txt b/robots.txt
@@ -0,0 +1,9 @@
+User-agent: *
+
+Disallow: /login/
+Disallow: /loginStart/
+Disallow: /auth/
+Disallow: /onboarding/
+Disallow: /onboarding?
+
+Sitemap: https://www.gototemplestay.com/sitemap.xml
diff --git a/sitemap.xml b/sitemap.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://www.gototemplestay.com/</loc>
+  <lastmod>2025-01-26T17:24:56+00:00</lastmod>
+</url>
+
+
+</urlset>
diff --git a/src/components/card/lookCard/LookCard.tsx b/src/components/card/lookCard/LookCard.tsx
@@ -21,13 +21,10 @@ const LookCard = ({ name = '일로와' }: LookCardProps) => {
       />
       <div className={styles.textWrapper}>
         <div className={styles.textBox}>
-          <span>
-            <span className={styles.name}>{name}</span> 님을 위한
-            <br />
-            템플스테이,
-            <br />
-            찾으러 가볼까요?
-          </span>
+          <h1 className={styles.titleStyle}>
+            <span className={styles.name}>{name}</span>
+            {`님을 위한\n템플스테이,\n찾으러 가볼까요?`}
+          </h1>
           <div>
             <BasicBtn
               onClick={() => handleSearch()}

diff --git a/src/components/card/lookCard/lookCard.css.ts b/src/components/card/lookCard/lookCard.css.ts
@@ -37,3 +37,7 @@ export const textBox = style({
 export const name = style({
   ...theme.FONTS.h0Sb22,
 });
+
+export const titleStyle = style({
+  whiteSpace: 'pre-line',
+});
diff --git a/src/components/card/mapCard/MapCard.tsx b/src/components/card/mapCard/MapCard.tsx
@@ -8,7 +8,7 @@ const MapCard = () => {
   return (
     <section className={styles.mapWrapper}>
       <div className={styles.titleBox}>
-        <h2 className={styles.title}>원하는 지역을 골라보세요!</h2>
+        <p className={styles.title}>원하는 지역을 골라보세요!</p>
         <Icon.IcnDoubleArrowDown />
       </div>
       <Map />

diff --git a/src/components/card/popularCard/PopularCard.tsx b/src/components/card/popularCard/PopularCard.tsx
@@ -10,9 +10,9 @@ interface PopularCardProps {
   templeLoc: string;
   templeImg: string;
   tag: string;
-  onClick: () => void;
   isLiked?: boolean;
   onLikeToggle: (liked: boolean) => void;
+  link: string;
 }
 
 const PopularCard = ({
@@ -21,9 +21,9 @@ const PopularCard = ({
   templeLoc,
   templeImg,
   tag,
-  onClick,
   isLiked = false,
   onLikeToggle,
+  link,
 }: PopularCardProps) => {
   const [liked, setLiked] = useState(isLiked);
 
@@ -41,23 +41,14 @@ const PopularCard = ({
   };
 
   return (
-    <div
-      className={styles.cardWrapper}
-      onClick={onClick}
-      role="button"
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          onClick();
-        }
-      }}>
+    <a href={link} className={styles.cardWrapper}>
       <div>
         <div className={styles.imgBox} style={{ backgroundImage: `url(${templeImg})` }}>
           <RankBtn ranking={ranking} />
         </div>
         <div className={styles.bottomWrapper}>
           <div className={styles.bottomContainer}>
-            <span className={styles.templeName}>{templeName}</span>
+            <h3 className={styles.templeName}>{templeName}</h3>
             <div className={styles.bottomBox}>
               <span>{templeLoc}</span>
               <Icon.IcnDivider />
@@ -69,7 +60,7 @@ const PopularCard = ({
           </button>
         </div>
       </div>
-    </div>
+    </a>
   );
 };
 

diff --git a/src/components/card/templeStayCard/TempleStayCard.tsx b/src/components/card/templeStayCard/TempleStayCard.tsx
@@ -16,8 +16,8 @@ interface TempleStayCardProps {
   liked: boolean;
   layout: 'vertical' | 'horizontal';
   onToggleWishlist: (templestayId: number, liked: boolean) => void;
-  onClick?: (templestayId: number) => void;
   onRequireLogin?: () => void;
+  link: string;
 }
 
 const TempleStayCard = ({
@@ -31,7 +31,7 @@ const TempleStayCard = ({
   liked,
   layout,
   onToggleWishlist,
-  onClick,
+  link,
   onRequireLogin,
 }: TempleStayCardProps) => {
   const [isWished, setIsWished] = useState(liked);
@@ -51,10 +51,7 @@ const TempleStayCard = ({
   };
 
   return (
-    <article
-      className={isHorizontal ? styles.horizontalContainer : styles.verticalContainer}
-      onClick={() => onClick?.(templestayId)}
-      role="presentation">
+    <a href={link} className={isHorizontal ? styles.horizontalContainer : styles.verticalContainer}>
       {imgUrl ? (
         <section className={isHorizontal ? styles.horizontalImgSection : styles.verticalImgSection}>
           <img
@@ -82,7 +79,7 @@ const TempleStayCard = ({
         region={region}
         type={type}
       />
-    </article>
+    </a>
   );
 };
 

diff --git a/src/components/card/templeStayCard/searchCardList/SearchCardList.tsx b/src/components/card/templeStayCard/searchCardList/SearchCardList.tsx
@@ -1,6 +1,3 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
 import TempleStayCard from '../TempleStayCard';
 import container from './searchCardList.css';
 
@@ -26,12 +23,6 @@ const SearchCardList = ({
   onToggleWishlist,
   onRequireLogin,
 }: SearchCardListProps) => {
-  const navigate = useNavigate();
-
-  const handleCardClick = (templestayId: number) => {
-    navigate(`/detail/${templestayId}`);
-  };
-
   return (
     <section className={container}>
       {data.map((temple) => (
@@ -47,8 +38,8 @@ const SearchCardList = ({
           liked={temple.liked}
           layout={layout}
           onToggleWishlist={onToggleWishlist}
-          onClick={() => handleCardClick(temple.templestayId)}
           onRequireLogin={onRequireLogin}
+          link={`/detail/${temple.templestayId}`}
         />
       ))}
     </section>

diff --git a/src/components/card/templeStayCard/wishCardList/WishCardList.tsx b/src/components/card/templeStayCard/wishCardList/WishCardList.tsx
@@ -1,5 +1,4 @@
 import TempleStayCard from '@components/card/templeStayCard/TempleStayCard';
-import React from 'react';
 
 import container from './wishCardList.css';
 
@@ -16,14 +15,8 @@ interface WishCardListProps {
   }[];
   layout: 'vertical' | 'horizontal';
   onToggleWishlist: (templestayId: number, liked: boolean) => void;
-  onClick?: (templestayId: number) => void;
 }
-const WishCardList = ({
-  data,
-  layout = 'vertical',
-  onToggleWishlist,
-  onClick,
-}: WishCardListProps) => {
+const WishCardList = ({ data, layout = 'vertical', onToggleWishlist }: WishCardListProps) => {
   return (
     <section className={container}>
       {data.map((temple) => (
@@ -39,7 +32,7 @@ const WishCardList = ({
           liked={temple.liked}
           layout={layout}
           onToggleWishlist={onToggleWishlist}
-          onClick={onClick}
+          link={`/detail/${temple.templestayId}`}
         />
       ))}
     </section>

diff --git a/src/components/carousel/curationCarousel/CurationCarousel.tsx b/src/components/carousel/curationCarousel/CurationCarousel.tsx
@@ -2,8 +2,6 @@ import CurationCard from '@components/curation/curationCard/CurationCard';
 import { CURATION_INFO } from '@constants/curationInfo';
 import useCarousel from '@hooks/useCarousel';
 import registDragEvent from '@utils/registDragEvent';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import * as styles from './curationCarousel.css';
 
@@ -13,13 +11,6 @@ const CurationCarousel = () => {
     moveDistance: 295,
   });
 
-  const navigate = useNavigate();
-
-  const handleClick = (index: number) => {
-    navigate(`/curation/${index + 1}`);
-    window.scrollTo(0, 0);
-  };
-
   return (
     <section ref={carouselRef} className={styles.carouselWrapper}>
       <div className={styles.emptyBox} />
@@ -36,7 +27,7 @@ const CurationCarousel = () => {
             bgImage={data.bgImage}
             title={data.title}
             subtitle={data.subtitle}
-            onClick={() => handleClick(index)}
+            link={`/curation/${index + 1}`}
           />
         ))}
       </div>

diff --git a/src/components/carousel/popularCarousel/PopularCarousel.tsx b/src/components/carousel/popularCarousel/PopularCarousel.tsx
@@ -6,8 +6,6 @@ import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import useCarousel from '@hooks/useCarousel';
 import { useQueryClient } from '@tanstack/react-query';
 import registDragEvent from '@utils/registDragEvent';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import * as styles from './popularCarousel.css';
 
@@ -30,8 +28,6 @@ const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
       moveDistance: 355,
     });
 
-  const navigate = useNavigate();
-
   if (isLoading) {
     return <ExceptLayout type="loading" />;
   }
@@ -78,8 +74,8 @@ const PopularCarousel = ({ onRequireLogin }: PopularCarouselProps) => {
                 templeImg={rankings.imgUrl}
                 isLiked={rankings.liked}
                 tag={rankings.tag}
-                onClick={() => navigate(`/detail/${rankings.templestayId}`)}
                 onLikeToggle={(liked: boolean) => handleLikeToggle(rankings.templestayId, liked)}
+                link={`/detail/${rankings.templestayId}`}
               />
             ))}
         </div>

diff --git a/src/components/curation/curationCard/CurationCard.tsx b/src/components/curation/curationCard/CurationCard.tsx
@@ -4,20 +4,17 @@ interface CurationCardProps {
   bgImage: string;
   title: string;
   subtitle: string;
-  onClick: () => void;
+  link: string;
 }
 
-const CurationCard = ({ bgImage, title, subtitle, onClick }: CurationCardProps) => {
+const CurationCard = ({ bgImage, title, subtitle, link }: CurationCardProps) => {
   return (
-    <button
-      className={styles.cardContainer}
-      style={{ backgroundImage: `url(${bgImage})` }}
-      onClick={onClick}>
+    <a href={link} className={styles.cardContainer} style={{ backgroundImage: `url(${bgImage})` }}>
       <div className={styles.textbox}>
         <p className={styles.title}>{title}</p>
         <p className={styles.subtitle}>{subtitle}</p>
       </div>
-    </button>
+    </a>
   );
 };
 

diff --git a/src/components/detailTitle/DetailTitle.tsx b/src/components/detailTitle/DetailTitle.tsx
@@ -19,7 +19,7 @@ const DetailTitle = ({
 }: DetailTitleProps) => {
   return (
     <div className={titleContainerStyle}>
-      <p className={titleStyle({ size })}>{title}</p>
+      <h2 className={titleStyle({ size })}>{title}</h2>
       {isTotal && (
         <button className={buttonStyle} onClick={onClick} disabled={rightBtnDisabled}>
           {rigntBtnLabel}

diff --git a/src/pages/wishList/WishListPage.tsx b/src/pages/wishList/WishListPage.tsx
@@ -6,15 +6,13 @@ import Pagination from '@components/common/pagination/Pagination';
 import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import * as styles from './wishListPage.css';
 
 const WishListPage = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const userId = Number(localStorage.getItem('userId'));
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
 
   const { data, isLoading, isError } = useWishlistQuery(currentPage, userId);
   const addWishlistMutation = useAddWishlist();
@@ -64,10 +62,6 @@ const WishListPage = () => {
     }
   };
 
-  const handleNavigate = (templestayId: number) => {
-    navigate(`/detail/${templestayId}`);
-  };
-
   if (isLoading) {
     return <ExceptLayout type="loading" />;
   }
@@ -91,7 +85,6 @@ const WishListPage = () => {
               data={wishlist}
               layout="vertical"
               onToggleWishlist={handleToggleWishlist}
-              onClick={(templestayId: number) => handleNavigate(templestayId)}
             />
           </div>
           <Pagination