Merge branch 'main' into styling/#124

README.md

@@ -1,7 +1,13 @@
+
 <div align="center">
+
+### [졸부서비스 바로가기](https://mju-graduate.com)
+
+[스토리북](https://65ccb85d5afe55a024495bc0-qsukhlhbnl.chromatic.com/?path=/story/ui-lecture-lecture-search--add-senario)
+
 <img width="413" alt="스크린샷 2024-02-11 오전 10 55 51" src="https://github.com/Myongji-Graduate/MyongjiGraduate-Next/assets/75975946/1f96dc0f-aa21-4503-ad77-4d2e2798f27f">
 
-### [졸부서비스 바로가기](https://mju-graduate.com)
+
 
 </div>
 

app/(sub-page)/grade-upload/page.tsx

@@ -2,6 +2,14 @@ import ContentContainer from '../../ui/view/atom/content-container/content-conta
 import Manual from './components/manual';
 import UploadTakenLecture from '../../ui/lecture/upload-taken-lecture/upload-taken-lecture';
 
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '성적표 업로드',
+  description:
+    'MyiWeb MSI의 성적표만으로 카테고리별 이수 / 미이수 과목 정보 및 잔여학점 조회, 커스텀을 통한 졸업사정예측 서비스를 원클릭으로 제공합니다.',
+};
+
 export default function GradeUploadPage() {
   return (
     <ContentContainer className="flex flex-col justify-center gap-8 min-h-[70vh]">

app/(sub-page)/my/page.tsx

@@ -10,6 +10,24 @@ import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group
 import Responsive from '@/app/ui/responsive';
 import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
 import TakenLectureSkeleton from '@/app/ui/lecture/taken-lecture/taken-lecture.skeleton';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '마이페이지',
+  description: '기이수 과목 및 잔여학점을 조회하고 커스텀을 통한 졸업사정을 예측해요.',
+  openGraph: {
+    siteName: '졸업을 부탁해',
+    url: 'https://mju-graduate.com/my',
+    images: [
+      {
+        url: 'https://github.com/user-attachments/assets/439ca378-e532-4e9b-9152-340b17218710',
+        width: 1200,
+        height: 630,
+        alt: 'my-page image',
+      },
+    ],
+  },
+};
 
 export default function MyPage() {
   return (

app/(sub-page)/result/page.tsx

@@ -6,6 +6,24 @@ import ResultCategory from '@/app/ui/result/result-category/result-category';
 import ResultCategorySkeleton from '@/app/ui/result/result-category/result-category.skeleton';
 import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
 import { ResultCategoryKey } from '@/app/utils/key/result-category.key';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '졸업 요건 검사 결과',
+  description: '졸업사정 결과와, 카테고리별 미이수 / 이수 과목정보 및 잔여학점을 확인해요',
+  openGraph: {
+    siteName: '졸업을 부탁해',
+    url: 'https://mju-graduate.com/result',
+    images: [
+      {
+        url: 'https://github.com/user-attachments/assets/2093a57f-af35-4280-8acb-d403341fc8ff',
+        width: 1200,
+        height: 630,
+        alt: 'result-page iamge',
+      },
+    ],
+  },
+};
 
 interface ResultPageProp {
   searchParams: { category: ResultCategoryKey };

app/(sub-page)/sign-in/page.tsx

@@ -7,8 +7,14 @@ import Separator from '@/app/ui/view/atom/separator';
 import Button from '@/app/ui/view/atom/button/button';
 import Responsive from '@/app/ui/responsive';
 import Link from 'next/link';
+import type { Metadata } from 'next';
 
-export default function Page() {
+export const metadata: Metadata = {
+  title: '로그인',
+  description: '졸업을 부탁해에 로그인 하고 졸업요건을 간편하게 검사해 보세요.',
+};
+
+export default function SignInPage() {
   return (
     <ContentContainer className="md:w-[768px] h-[550px] xl:w-[960px] flex p-9">
       <Responsive minWidth={767}>

app/(sub-page)/sign-up/page.tsx

@@ -2,8 +2,14 @@ import SignUpContainer from './components/sign-up-container';
 import { Suspense } from 'react';
 import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
 import SignUpFormSkeleton from '@/app/ui/user/sign-up-form/sign-up-form.skeleton';
+import type { Metadata } from 'next';
 
-export default function Page() {
+export const metadata: Metadata = {
+  title: '회원가입',
+  description: '졸업을 부탁해에 회원가입 하고 졸업요건을 간편하게 검사해 보세요.',
+};
+
+export default function SignUpPage() {
   return (
     <ContentContainer className="md:w-[768px] xl:w-[960px]">
       <Suspense fallback={<SignUpFormSkeleton />}>

app/(sub-page)/tutorial/page.tsx

@@ -4,6 +4,12 @@ import { cn } from '@/app/utils/shadcn/utils';
 import Image from 'next/image';
 import { TUTORIAL_FEATRUE, TUTORIAL_UPLOAD } from './data';
 import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: '튜토리얼',
+  description: '서비스의 주요 정보와 사용법을 튜토리얼을 통해 확인해봐요.',
+};
 
 function TutorialPage() {
   return (

app/layout.tsx

@@ -7,8 +7,25 @@ import MSWComponent from './mocks/msw-component.mock';
 import UserDeleteModal from './ui/user/user-info-navigator/user-delete-modal';
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  metadataBase: new URL('https://mju-graduate.com'),
+  title: { default: '졸업을 부탁해', template: '%s | 졸업을 부탁해' },
+  description:
+    '명지대학교 졸업사정결과 조회서비스 "졸업을 부탁해"는 미이수 / 이수 과목정보 및 잔여학점 조회, 졸업사정예측 서비스를 원클릭으로 제공합니다.',
+  icons: {
+    icon: 'https://github.com/Myongji-Graduate/MyongjiGraduate-BE/assets/75975946/2a7354ae-dffe-4250-8b83-a211a07ff5d2',
+  },
+  openGraph: {
+    siteName: '졸업을 부탁해',
+    url: 'https://mju-graduate.com',
+    images: [
+      {
+        url: 'https://github.com/Myongji-Graduate/MyongjiGraduate-FE/assets/75975946/79eb6efd-9def-4a95-9c75-367a81ea3474',
+        width: 1200,
+        height: 630,
+        alt: 'default page image',
+      },
+    ],
+  },
 };
 
 export default function RootLayout({