feat : seo

kasterra · May 13, 2024 · 24abe43 · 24abe43
1 parent c173814
commit 24abe43
Show file tree

Hide file tree

Showing 14 changed files with 179 additions and 6 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -14,6 +14,7 @@ import {
 } from "@remix-run/react";
 import { AuthProvider } from "./contexts/AuthContext";
 import { Toaster } from "react-hot-toast";
+import { CLIENT_SERVER_URL } from "./util/constant";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: normailzeCSS },
@@ -29,6 +30,18 @@ export default function App() {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta
+          name="og:image"
+          content={`${CLIENT_SERVER_URL}/images/og-image.jpg`}
+        />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="850" />
+        <meta http-equiv="Copyright" content="skeep and kasterra" />
+
+        <meta
+          name="og:description"
+          content="경북대에서 만든 교육용 다기능 온라인 저지"
+        />
         <script src="/prism.js" />
         <Meta />
         <Links />

diff --git a/app/routes/_noAuthOnly+/_index.tsx b/app/routes/_noAuthOnly+/_index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useAuthDispatch } from "~/contexts/AuthContext";
-import { useNavigate } from "@remix-run/react";
+import { MetaFunction, useNavigate } from "@remix-run/react";
 import styles from "~/css/routes/login.module.css";
 import formStyles from "~/components/common/form.module.css";
 import LogoSVG from "~/assets/logo.svg";
@@ -64,3 +64,19 @@ const Login = () => {
 };
 
 export default Login;
+
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "로그인 | KOJ",
+    },
+    {
+      property: "description",
+      content: "KOJ 사용을 위해서는 로그인이 필요합니다",
+    },
+    {
+      property: "og:site_name",
+      content: "KOJ - KNU OJ",
+    },
+  ];
+};
diff --git a/app/routes/_procted+/grade+/$lectureId+/$practiceId+/index.tsx b/app/routes/_procted+/grade+/$lectureId+/$practiceId+/index.tsx
@@ -1,4 +1,4 @@
-import { useParams } from "@remix-run/react";
+import { MetaFunction, useParams } from "@remix-run/react";
 import { ReactNode, useEffect, useState } from "react";
 import { getPracticeWithPracticeId } from "~/API/practice";
 import { getPracticeScoreBoard, reJudge } from "~/API/submission";
@@ -114,3 +114,19 @@ const PracticeScoreBoard = () => {
 };
 
 export default PracticeScoreBoard;
+
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "실습별 성적보기 | KOJ",
+    },
+    {
+      property: "description",
+      content: "실습별 성적을 확인하는 화면입니다",
+    },
+    {
+      property: "og:site_name",
+      content: "KOJ - 실습별 성적보기",
+    },
+  ];
+};
diff --git a/app/routes/_procted+/grade+/$lectureId+/index.tsx b/app/routes/_procted+/grade+/$lectureId+/index.tsx
@@ -1,4 +1,4 @@
-import { useNavigate, useParams } from "@remix-run/react";
+import { MetaFunction, useNavigate, useParams } from "@remix-run/react";
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { getLectureScoreBoard, reJudge } from "~/API/submission";
 import TableBase from "~/components/Table/TableBase";
@@ -208,3 +208,19 @@ const LectureScoreBoard = () => {
 };
 
 export default LectureScoreBoard;
+
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "강의별 성적 보기 | KOJ",
+    },
+    {
+      property: "description",
+      content: "강의별 성적을 확인하는 화면입니다",
+    },
+    {
+      property: "og:site_name",
+      content: "KOJ - 성적 확인",
+    },
+  ];
+};
diff --git a/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx b/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx
@@ -385,3 +385,19 @@ const ProblemDetail = ({ superId, id, title }: DetailProps) => {
     </>
   );
 };
+
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "실습 풀어보기 | KOJ",
+    },
+    {
+      name: "description",
+      content: "실습을 풀어봅시다...",
+    },
+    {
+      name: "og:site_name",
+      content: "KOJ 실습 풀이",
+    },
+  ];
+};
diff --git a/app/routes/_procted+/lectures+/_index/index.tsx b/app/routes/_procted+/lectures+/_index/index.tsx
@@ -10,7 +10,7 @@ import {
   getPreviousSemesterLectures,
 } from "~/API/lecture";
 import { useAuth } from "~/contexts/AuthContext";
-import { Link } from "@remix-run/react";
+import { Link, MetaFunction } from "@remix-run/react";
 import LectureAddModal from "./LectureAddModal";
 import LectureEditModal from "./LectureEditModal";
 import { formatLectureInfo, semesterToString } from "~/util";
@@ -317,3 +317,19 @@ const Lectures = () => {
 };
 
 export default Lectures;
+
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "강의 목록 | KOJ",
+    },
+    {
+      property: "description",
+      content: "강의 목록 조회 화면입니다",
+    },
+    {
+      property: "og:site_name",
+      content: "KOJ - 강의 목록",
+    },
+  ];
+};
diff --git a/app/routes/_procted+/students+/$lectureId+/$labId+/history+/index.tsx b/app/routes/_procted+/students+/$lectureId+/$labId+/history+/index.tsx
@@ -3,7 +3,7 @@ import styles from "./index.module.css";
 import dropdownStyles from "~/components/common/dropdown.module.css";
 import chevUpSVG from "~/assets/chevronUp.svg";
 import chevDownSVG from "~/assets/chevronDown.svg";
-import { useNavigate, useParams } from "@remix-run/react";
+import { MetaFunction, useNavigate, useParams } from "@remix-run/react";
 import { useAuth } from "~/contexts/AuthContext";
 import { getLectureWithLectureId } from "~/API/lecture";
 import TableBase from "~/components/Table/TableBase";
@@ -219,3 +219,19 @@ const Table = () => {
 };
 
 export default Table;
+
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "제출이력 조회 | KOJ",
+    },
+    {
+      property: "description",
+      content: "제출이력 조회 화면입니다",
+    },
+    {
+      property: "og:site_name",
+      content: "KOJ - 제출 이력",
+    },
+  ];
+};
diff --git a/app/routes/_procted+/students+/$lectureId+/index.tsx b/app/routes/_procted+/students+/$lectureId+/index.tsx
@@ -3,7 +3,7 @@ import Table from "./Table";
 import styles from "./index.module.css";
 import { useEffect } from "react";
 import toast from "react-hot-toast";
-import { useNavigate } from "@remix-run/react";
+import { MetaFunction, useNavigate } from "@remix-run/react";
 
 const Wrapper = () => {
   const auth = useAuth();
@@ -22,3 +22,19 @@ const Wrapper = () => {
 };
 
 export default Wrapper;
+
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "수강생 관리 | KOJ",
+    },
+    {
+      property: "description",
+      content: "수강생 관리 화면입니다",
+    },
+    {
+      property: "og:site_name",
+      content: "KOJ - 수강생 관리",
+    },
+  ];
+};
diff --git a/app/routes/admin+/research.tsx b/app/routes/admin+/research.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import SubmitModal from "../_procted+/lectures+/$lectureId+/$practiceId+/$labId/SubmitModal";
+import { MetaFunction } from "@remix-run/react";
 
 const Research = () => {
   const [open, setOpen] = useState(false);
@@ -18,3 +19,17 @@ const Research = () => {
 };
 
 export default Research;
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "연구 기능 | KOJ Admin" },
+    {
+      property: "description",
+      content: "연구 기능 화면입니다. 뭐가 들어갈진 모르겠네요",
+    },
+    {
+      property: "og:site_name",
+      content: "KOJ - 제출 이력",
+    },
+  ];
+};
diff --git a/app/routes/admin+/semester-manage.tsx b/app/routes/admin+/semester-manage.tsx
@@ -6,6 +6,7 @@ import styles from "~/components/common/form.module.css";
 import { getSemester, setSemester } from "~/API/admin";
 import { useAuth } from "~/contexts/AuthContext";
 import toast from "react-hot-toast";
+import { MetaFunction } from "@remix-run/react";
 
 const Manage = () => {
   const auth = useAuth();
@@ -67,3 +68,19 @@ const Manage = () => {
 };
 
 export default Manage;
+
+export const meta: MetaFunction = () => {
+  return [
+    {
+      title: "학기 지정 | KOJ Admin",
+    },
+    {
+      property: "description",
+      content: "학기 지정 화면입니다",
+    },
+    {
+      property: "og:site_name",
+      content: "기술적 문제로 학기는 직접 설정합니다",
+    },
+  ];
+};
diff --git a/app/routes/admin+/users/index.tsx b/app/routes/admin+/users/index.tsx
@@ -1,6 +1,7 @@
 import styles from "./users.module.css";
 import Table from "./Table";
 import { AdminTableRowDataProvider } from "./AdminTableRowDataContext";
+import { MetaFunction } from "@remix-run/react";
 
 const Users = () => {
   return (
@@ -13,3 +14,17 @@ const Users = () => {
 };
 
 export default Users;
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "사용자 관리 | KOJ Admin" },
+    {
+      property: "description",
+      content: "사용자 관리 화면입니다",
+    },
+    {
+      property: "og:site_name",
+      content: "KOJ - 사용자 관리",
+    },
+  ];
+};
diff --git a/app/util/constant.ts b/app/util/constant.ts
@@ -1,2 +1,3 @@
 export const STATIC_SERVER_URL = "http://155.230.34.223:53469/static";
 export const API_SERVER_URL = "http://155.230.34.223:53469/api/v1";
+export const CLIENT_SERVER_URL = "http://155.230.34.223:3000";
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/og-image.jpg b/public/images/og-image.jpg