Feature/#160 해커톤 단건 조회 페이지 구현

frontend/.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["next/babel"],
+  "presets": ["next/babel","@babel/preset-env" ],
   "plugins": [["styled-components", { "ssr": true }]]
 }

frontend/babel.config.json

@@ -1,3 +1,9 @@
 {
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"]
+  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"],
+  "overrides": [
+    {
+      "include": "./node_modules/linkifyjs",
+      "presets": ["@babel/preset-env"]
+    }
+  ]
 }

frontend/package.json

@@ -9,36 +9,63 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@babel/runtime": "^7.25.0",
     "@react-icons/all-files": "^4.1.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@tanstack/react-query": "^5.48.0",
     "@tanstack/react-query-devtools": "^5.48.0",
     "@tanstack/react-query-next-experimental": "^5.48.0",
+    "@tiptap/extension-blockquote": "^2.6.4",
+    "@tiptap/extension-code": "^2.6.4",
+    "@tiptap/extension-code-block-lowlight": "^2.6.4",
+    "@tiptap/extension-highlight": "^2.6.4",
+    "@tiptap/extension-image": "^2.6.4",
+    "@tiptap/extension-link": "^2.6.4",
+    "@tiptap/extension-table": "^2.6.4",
+    "@tiptap/extension-table-cell": "^2.6.4",
+    "@tiptap/extension-table-header": "^2.6.4",
+    "@tiptap/extension-table-row": "^2.6.4",
+    "@tiptap/extension-task-item": "^2.6.4",
+    "@tiptap/extension-task-list": "^2.6.4",
+    "@tiptap/extension-typography": "^2.6.4",
+    "@tiptap/pm": "^2.6.4",
+    "@tiptap/react": "^2.6.4",
+    "@tiptap/starter-kit": "^2.6.4",
     "axios": "^1.7.2",
     "babel-plugin-styled-components": "^2.1.4",
+    "classnames": "^2.5.1",
     "formik": "^2.4.6",
+    "lowlight": "^3.1.0",
     "luxon": "^3.4.4",
+    "marked": "^14.0.0",
     "next": "14.2.3",
     "react": "^18",
     "react-cookies": "^0.1.1",
     "react-dom": "^18",
+    "react-dropzone": "^14.2.3",
     "react-redux": "^9.1.2",
     "react-toastify": "^10.0.5",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "rss-parser": "^3.13.0",
     "styled-components": "^6.1.11",
     "swiper": "^11.1.4",
+    "tiptap-markdown": "^0.8.10",
     "yup": "^1.4.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/preset-env": "^7.25.3",
+    "@tailwindcss/typography": "^0.5.14",
+    "@types/classnames": "^2.3.1",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20",
+    "@types/prismjs": "^1.26.4",
     "@types/react": "^18",
     "@types/react-cookies": "^0.1.3",
     "@types/react-dom": "^18",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",

frontend/src/app/(withSidebar)/hackathon/[slug]/components/HackathonInformationTypeButtons/index.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { hackathonInformationTypes } from '@/data/hackathon';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+interface HackathonInformationTypeButtonsProps {
+  slug: number;
+}
+const HackathonInformationTypeButtons = ({ slug }: HackathonInformationTypeButtonsProps) => {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex flex-wrap border-b border-border">
+      {hackathonInformationTypes.map((type) => (
+        <Link
+          href={type.path(slug)}
+          className={`h-[30px] border-0 bg-white px-4 ${pathname === type.path(slug) ? 'border-b-2 font-bold text-black' : 'text-comment'} border-black hover:border-b-2 hover:text-black`}
+          key={type.name}
+        >
+          {type.name}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default HackathonInformationTypeButtons;

frontend/src/app/(withSidebar)/hackathon/[slug]/layout.tsx

@@ -0,0 +1,19 @@
+import Title from '@/components/Title';
+import { getHackathonInformation } from '@/lib/api/server.api';
+import HackathonInformationTypeButtons from './components/HackathonInformationTypeButtons';
+
+const Layout = async ({
+  children,
+  params: { slug },
+}: Readonly<{ children: React.ReactNode; params: { slug: number } }>) => {
+  const hackathonInformation = await getHackathonInformation(slug);
+  return (
+    <div className="flex w-full flex-col gap-4 rounded-sm bg-white p-5">
+      <Title title={hackathonInformation.name} />
+      <div className="h-0 w-full border border-border" />
+      <HackathonInformationTypeButtons slug={slug} />
+      <div>{children}</div>
+    </div>
+  );
+};
+export default Layout;

frontend/src/app/(withSidebar)/hackathon/[slug]/page.tsx

@@ -0,0 +1,34 @@
+import MarkdownViewer from '@/components/MarkdownViewer';
+import { getHackathonInformation } from '@/lib/api/server.api';
+import Image from 'next/image';
+
+interface HackathonDetailPageProps {
+  params: {
+    slug: number;
+  };
+}
+
+const Page = async ({ params: { slug } }: HackathonDetailPageProps) => {
+  const hackathonInformation = await getHackathonInformation(slug);
+  return (
+    <div>
+      <div className="relative h-60 w-full">
+        <Image
+          src={process.env.NEXT_PUBLIC_FILE_URL + '/' + hackathonInformation.bannerImageName}
+          alt="해커톤 섬네일"
+          className="rounded-t-sm"
+          layout="fill"
+          objectFit="cover"
+          objectPosition="center"
+          quality={100}
+        />
+      </div>
+      <div className="m-2 flex flex-col justify-center gap-2">
+        <div className="text-xl font-bold">{hackathonInformation.name} 참가자 모집 안내</div>
+        <MarkdownViewer content={hackathonInformation.content} />
+      </div>
+    </div>
+  );
+};
+
+export default Page;

frontend/src/app/(withSidebar)/hackathon/[slug]/prize/page.tsx

@@ -0,0 +1,53 @@
+import { getHackathonPrize } from '@/lib/api/server.api';
+
+interface HackathonPrizePageProps {
+  params: {
+    slug: number;
+  };
+}
+
+const Page = async ({ params: { slug } }: HackathonPrizePageProps) => {
+  const prizes = await getHackathonPrize(slug);
+  if (!prizes || prizes.length == 0)
+    return (
+      <div className="flex h-40 w-full items-center justify-center text-comment">수상 결과가 공개되지 않았습니다.</div>
+    );
+  return (
+    <div className="flex w-full flex-col gap-4 rounded-sm bg-white">
+      <table className="border-collapse text-center">
+        <thead>
+          <tr className="border-y-2 border-primary-main bg-primary-light text-primary-main">
+            <th className="py-2">상훈</th>
+            <th>수상팀(팀원수)</th>
+            <th>수상 작품</th>
+          </tr>
+        </thead>
+        <tbody>
+          {prizes.map((prize) => (
+            <>
+              <tr className="border-y border-border">
+                <td rowSpan={prize.teams.length} className="py-2">
+                  {prize.name}
+                </td>
+                <td className="py-2">
+                  {prize.teams[0].name}({prize.teams[0].memberCount})
+                </td>
+                <td>{prize.teams[0].work}</td>
+              </tr>
+              {prize.teams.slice(1).map((team) => (
+                <tr key={team.name} className="border-y border-border">
+                  <td className="py-2">
+                    {team.name}({team.memberCount})
+                  </td>
+                  <td>{team.work}</td>
+                </tr>
+              ))}
+            </>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Page;