Merge pull request #737 from davidktlee/open-graph

Open graph 수정
Kernel360 · Apr 12, 2024 · aa0363c · aa0363c
2 parents 361f914 + d8ff466
commit aa0363c
Show file tree

Hide file tree

Showing 39 changed files with 380 additions and 341 deletions.
diff --git a/README.md b/README.md
@@ -71,3 +71,6 @@
 | <img src="https://avatars.githubusercontent.com/u/118032886?v=4" width="130" height="130"> | <img src="https://avatars.githubusercontent.com/u/101683784?v=4" width="130" height="130"> | <img src="https://avatars.githubusercontent.com/u/124959156?v=4" width="130" height="130"> | <img src="https://avatars.githubusercontent.com/u/80247908?v=4" width="130" height="130"> |
 | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: |
 |                           [손민우](https://github.com/minson96)                            |                          [박석희](https://github.com/stoneHee99)                           |                          [신종민](https://github.com/ShineCorine)                          |                           [장호윤](https://github.com/Uknow928)                           |
+
+
+[발표 자료](https://docs.google.com/presentation/d/1N9lMXZxVvgh2tXTOIiMeZSenrc-aH0WZPwsuBEA7wVw/edit?usp=sharing)
diff --git a/frontend/src/app/(with-header)/(home)/nearby/page.tsx b/frontend/src/app/(with-header)/(home)/nearby/page.tsx
@@ -12,10 +12,15 @@ export const metadata: Metadata = {
   openGraph: {
     title: '장소/코스 검색',
     description: `원하는 장소/코스를 검색해보세요.`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
+    type: 'website',
+    siteName: '이길로그',
+    locale: 'ko-KR',
   },
   twitter: {
     title: '장소/코스 검색',
     description: `원하는 장소/코스를 검색해보세요.`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
   },
 };
 
@@ -33,7 +38,7 @@ export default async function NearbyPage() {
     );
   }
   const result = await getMySpotIds();
-  const spotIds = result.status === 'success' && result.data.ids;
+  const spotIds = result.status === 'succeed' && result.data.ids;
   if (spotIds) {
     return (
       <section className="w-full h-full">

diff --git a/frontend/src/app/(with-header)/(home)/places/popular/page.tsx b/frontend/src/app/(with-header)/(home)/places/popular/page.tsx
@@ -13,10 +13,15 @@ export const metadata: Metadata = {
   openGraph: {
     title: '인기 장소/코스',
     description: `현재 인기있는 장소/코스를 만나보세요.`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
+    type: 'website',
+    siteName: '이길로그',
+    locale: 'ko-KR',
   },
   twitter: {
     title: '인기 장소/코스',
     description: `현재 인기있는 장소/코스를 만나보세요.`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
   },
 };
 

diff --git a/frontend/src/app/(with-header)/(home)/places/recommended/page.tsx b/frontend/src/app/(with-header)/(home)/places/recommended/page.tsx
@@ -11,10 +11,16 @@ export const metadata: Metadata = {
   openGraph: {
     title: '맞춤 추천',
     description: `개인별 맞춤 추천 지역의 장소/코스를 만나보세요.`,
+
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
+    type: 'website',
+    siteName: '이길로그',
+    locale: 'ko-KR',
   },
   twitter: {
     title: '맞춤 추천',
     description: `개인별 맞춤 추천 지역의 장소/코스를 만나보세요.`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
   },
 };
 

diff --git a/frontend/src/app/(with-header)/(home)/places/regions/[id]/page.tsx b/frontend/src/app/(with-header)/(home)/places/regions/[id]/page.tsx
@@ -1,11 +1,8 @@
 import Link from 'next/link';
-
 import { authenticateUser } from '@/app/_components/mypage/hooks/authenticateUser';
 import { myInfoSchema } from '@/types/response';
 import { getInterestedRegions, getRegionPlaces } from '../../../action';
-
 import DummyPlace from '@/app/_components/place/dummy/DummyPlace';
-
 import { RegionPlaces } from '@/app/_components/place/places';
 import { Metadata } from 'next';
 
@@ -15,10 +12,15 @@ export const metadata: Metadata = {
   openGraph: {
     title: '관심 지역',
     description: `관심 지역을 설정하고 관심 지역의 장소/코스를 만나보세요.`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
+    type: 'website',
+    siteName: '이길로그',
+    locale: 'ko-KR',
   },
   twitter: {
     title: '관심 지역',
     description: `관심 지역을 설정하고 관심 지역의 장소/코스를 만나보세요.`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
   },
 };
 

diff --git a/frontend/src/app/(with-header)/(home)/search/page.tsx b/frontend/src/app/(with-header)/(home)/search/page.tsx
@@ -11,6 +11,19 @@ import { Metadata } from 'next';
 export const metadata: Metadata = {
   title: '이길로그 검색 페이지',
   description: '원하는 장소/코스를 검색해보세요.',
+  openGraph: {
+    title: '이길로그 검색 페이지',
+    description: '원하는 장소/코스를 검색해보세요.',
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
+    type: 'website',
+    siteName: '이길로그',
+    locale: 'ko-KR',
+  },
+  twitter: {
+    title: '이길로그 검색 페이지',
+    description: '원하는 장소/코스를 검색해보세요.',
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
+  },
 };
 
 export default async function SearchPage({

diff --git a/frontend/src/app/(with-header)/(mypage)/mypage/favorite/course/page.tsx b/frontend/src/app/(with-header)/(mypage)/mypage/favorite/course/page.tsx
@@ -5,14 +5,8 @@ import React from 'react';
 export default async function FavoriteCoursePage() {
   const res = await getFavoriteCourses();
 
-  if (res.status === 'failed') {
-    // throw로 변경해야함
-    return (
-      <div className="w-full h-full flex flex-col break-words justify-center items-center text-3xl text-center text-main">
-        코스를 불러오는데 실패했습니다. <hr /> 다시 시도해주세요.
-      </div>
-    );
-  }
+  if (res.status === 'failed') throw new Error(res.message);
+
   return (
     <>
       {!!res.data.contents.length ? (

diff --git a/frontend/src/app/(with-header)/add/[slug]/page.tsx b/frontend/src/app/(with-header)/add/[slug]/page.tsx
@@ -1,7 +1,25 @@
 import AddCourse from '@/app/_components/add/course/AddCourse';
 import AddSpot from '@/app/_components/add/spot/AddSpot';
-
 import type { TChoosePlace } from '@/context/travel/schema';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '장소/코스 추가',
+  description: `원하는 장소/코스를 추가하고 공유해보세요.`,
+  openGraph: {
+    title: '장소/코스 추가',
+    description: `원하는 장소/코스를 추가하고 공유해보세요.`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
+    type: 'website',
+    siteName: '이길로그',
+    locale: 'ko-KR',
+  },
+  twitter: {
+    title: '장소 / 코스 추가',
+    description: `원하는 장소/코스를 추가하고 공유해보세요.`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
+  },
+};
 
 export default function AddPage({
   params,

diff --git a/frontend/src/app/(with-header)/area/error.tsx b/frontend/src/app/(with-header)/area/error.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import ErrorComponent from '@/app/_components/ErrorComponent';
+import { checkBatchimEnding } from '@/utils';
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <ErrorComponent
+      title={`지역정보${checkBatchimEnding('지역정보') ? '을' : '를'}`}
+      reset={reset}
+    />
+  );
+}
diff --git a/frontend/src/app/(with-header)/area/page.tsx b/frontend/src/app/(with-header)/area/page.tsx
@@ -1,34 +1,20 @@
 import BackButton from '@/app/_components/place/BackButton';
 import AreaList from '@/app/_components/setting/area/AreaList';
 import { getAllArea } from '@/app/_components/setting/area/actions';
-import ToastMsg from '@/app/_components/ui/toast/ToastMsg';
-import { mypageAllAreaSchema } from '@/types/myPageResponse';
 import React from 'react';
 
 export default async function SetAreaPage() {
   const res = await getAllArea();
-  const categories = mypageAllAreaSchema.safeParse(res);
-  if (!categories.success)
-    return (
-      <>
-        <nav className="relative py-4 flex justify-center items-center">
-          <BackButton className="absolute left-2" />
-          <span className="text-2xl font-light">지역 선택</span>
-        </nav>
-        <div className="w-full h-full flex flex-col break-keep justify-center items-center text-3xl text-center text-main">
-          지역 정보를 불러오는데 실패했습니다. <br />
-          다시 시도해주세요.
-        </div>
-      </>
-    );
+
+  if (res.status === 'failed') throw new Error(res.message);
 
   return (
     <>
       <nav className="relative py-4 flex justify-center items-center">
         <BackButton className="absolute left-2" />
         <span className="text-2xl font-light">지역 선택</span>
       </nav>
-      <AreaList categories={categories.data.categories} />
+      <AreaList categories={res.data.categories} />
     </>
   );
 }
diff --git a/frontend/src/app/(without-header)/login/page.tsx b/frontend/src/app/(without-header)/login/page.tsx
@@ -1,5 +1,3 @@
-export const dynamic = 'force-dynamic';
-
 import React from 'react';
 
 import KakaoBtn from '@/app/_components/ui/button/Kakao';
@@ -18,14 +16,23 @@ export const metadata: Metadata = {
   openGraph: {
     title: '로그인',
     description: `로그인 후 이길로그의 여러 기능을 만나보세요`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
+    type: 'website',
+    siteName: '이길로그',
+    locale: 'ko-KR',
   },
   twitter: {
     title: '로그인',
     description: `로그인 후 이길로그의 여러 기능을 만나보세요`,
+    images: { url: '/logo/og-logo.png', alt: '이길로그 로고 이미지' },
   },
 };
 
-export default async function LoginPage() {
+export default async function LoginPage({
+  searchParams,
+}: {
+  searchParams: { status: string };
+}) {
   const { KAKAO_ID, GOOGLE_CLIENT_ID, NAVER_SEARCH_ID } = process.env;
 
   const kakaoHref = await kakaoOAuthEndpoint(KAKAO_ID);
@@ -38,8 +45,15 @@ export default async function LoginPage() {
         containerStyle="w-full flex justify-end h-1/6 mr-6 mt-5"
         style="cursor-pointer w-12 h-12 stroke-2 stroke-black hover:stroke-gray-700 active:stroke-gray-500"
       />
-      <div className="h-2/6">
+      <div className="h-2/6 flex flex-col justify-stretch">
         <LoginLogo className="w-[290px] h-[96px]" />
+        <div className="grow"></div>
+        {searchParams?.status === 'failed' && (
+          <div className="text-center pb-5 text-white font-semibold animate-appear">
+            로그인에 실패했습니다. <br />
+            다시 시도해주세요.
+          </div>
+        )}
       </div>
       <div className="w-full mx-7 h-2/6">
         <div className="w-full flex gap-x-4 px-8  relative ">

diff --git a/frontend/src/app/_components/mypage/MyPageSelectBtns.tsx b/frontend/src/app/_components/mypage/MyPageSelectBtns.tsx
@@ -28,7 +28,6 @@ interface TMyPageSelectBtn {
   ) => void;
 }
 
-// 똑같이 쓰이는 부분이 있다면 컴포넌트 재사용성 고려해야 함.
 export default function MyPageSelectBtns({
   selectOption,
   sortOption,

diff --git a/frontend/src/app/_components/mypage/bookmark/BookmarkList.tsx b/frontend/src/app/_components/mypage/bookmark/BookmarkList.tsx
@@ -61,22 +61,21 @@ export default function MyPageBookmarkList({
     size: number,
     sortOrder: string,
   ) => {
-    try {
-      setIsLoading(true);
-      const bookmarkList = await getMyPageBookmarks(pageNum, size, sortOrder);
-      if (bookmarkList.status === 'failed') {
-        setAllBookmarkList([]);
-        setErrorText('북마크 데이터를 불러오는데 실패했습니다.');
-        setIsLoading(false);
-        return;
-      }
-      setHasNext((prev) => (prev = bookmarkList.data.has_next));
-      setAllBookmarkList([...bookmarkList.data.bookmarks]);
-    } catch (error) {
+    setIsLoading(true);
+    const bookmarkList = await getMyPageBookmarks(pageNum, size, sortOrder);
+    if (bookmarkList.status === 'failed') {
+      setAllBookmarkList([]);
+      setHasNext(false);
       setErrorText('북마크 데이터를 불러오는데 실패했습니다.');
-    } finally {
+      setTimeout(() => {
+        setErrorText('');
+      }, 2000);
       setIsLoading(false);
+      return;
     }
+    setHasNext((prev) => (prev = bookmarkList.data.has_next));
+    setAllBookmarkList([...bookmarkList.data.bookmarks]);
+    setIsLoading(false);
   };
 
   useEffect(() => {

diff --git a/frontend/src/app/_components/mypage/bookmark/bookmarkActions.ts b/frontend/src/app/_components/mypage/bookmark/bookmarkActions.ts
@@ -3,12 +3,14 @@ import { myPageBookmarkListSchema } from '@/types/myPageResponse';
 import { getBaseUrl } from '@/app/utilActions';
 import { cookies } from 'next/headers';
 import { parseResult } from '@/utils';
+import { TBackendRequestResult } from '@/types/response';
+import z from 'zod';
 
 export const getMyPageBookmarks = async (
   pageNo: number = 1,
   size: number = 5,
   sortOrder: string = 'desc',
-) => {
+): Promise<TBackendRequestResult<z.infer<typeof myPageBookmarkListSchema>>> => {
   const BASE_URL = await getBaseUrl();
   const cookie = cookies().get('SESSION')?.value;
   const res = await fetch(
@@ -28,6 +30,5 @@ export const getMyPageBookmarks = async (
   );
   const result = await res.json();
   const bookmarkList = parseResult(myPageBookmarkListSchema, result);
-
   return bookmarkList;
 };
diff --git a/frontend/src/app/_components/mypage/course/CourseDetail.tsx b/frontend/src/app/_components/mypage/course/CourseDetail.tsx
@@ -134,16 +134,16 @@ export default function CourseDetail({
     const modifiedData = checkCourseDifference(courseDetail, modifyCourse);
     setIsModifyMode(false);
     if (!modifiedData) return;
-    try {
-      setIsLoading(true);
-      const res = await patchCourseDetail(courseId, modifiedData);
-      if (res.status === 'failed') setErrorText(res.message);
-    } catch (error) {
-      setErrorText('수정에 실패했습니다.');
-    } finally {
-      setIsDialogOpened(false);
-      setIsLoading(false);
-    }
+
+    setIsLoading(true);
+    const res = await patchCourseDetail(courseId, modifiedData);
+    if (res.status === 'failed') setErrorText(res.message);
+    setErrorText('수정에 실패했습니다.');
+    setTimeout(() => {
+      setErrorText('');
+    }, 2000);
+    setIsDialogOpened(false);
+    setIsLoading(false);
   };
 
   const getCoordsList = async (spots: TModifyCourse['spots']) => {