feat(land): migration landing page and create first section (#257)

* chore(land): upgrade Next.js version from 14 to 15

* chore(land): set font and directory

* feat(land): set layout with navbar and footer

* refactor(land): change directory structure

* feat(land): create sidebar and add icon package

* style(land): add font and update font directory structure

* feat(land): create text slider component

* feat(land): create home page first section

* fix(land): change page export

* refactor(land): use function declaration and change tag

* refactor(land): remove 'use client' and replace button with next/link

* refactor(land): update nav and sidebar to client-side rendering

* refactor(land): replace <a> tag with Next.js <Link> components

apps/land/package.json

@@ -3,26 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 6003",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@clab-platforms/design-system": "workspace:*",
     "@clab-platforms/utils": "workspace:*",
-    "next": "14.0.4",
-    "react": "^18",
-    "react-dom": "^18"
+    "@clab-platforms/icon": "workspace:*",
+    "@tanstack/react-query": "^5.59.20",
+    "next": "15.0.0-rc.1",
+    "react": "19.0.0-rc-ed15d500-20241110",
+    "react-dom": "19.0.0-rc-ed15d500-20241110"
   },
   "devDependencies": {
     "@clab-platforms/config": "workspace:*",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
-    "eslint-config-next": "14.0.4",
+    "eslint-config-next": "15.0.0-rc.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"

apps/land/src/app/PageLayout.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@clab-platforms/utils';
+
+import { Footer, Nav } from '@/components';
+
+interface PageProps {
+  nav?: boolean;
+  footer?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export default function Page({
+  nav = false,
+  footer = false,
+  className,
+  children,
+}: PageProps) {
+  return (
+    <>
+      {nav && <Nav />}
+      <div className={cn('m-auto pt-12', className)}>{children}</div>
+      {footer && <Footer />}
+    </>
+  );
+}

apps/land/src/app/fonts.css

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'NanumSquare';
+  src: url('/font/NanumSquareR.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'NanumSquare';
+  src: url('/font/NanumSquareB.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DungGeunMo';
+  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/DungGeunMo.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}

apps/land/src/app/globals.css

@@ -0,0 +1,81 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 0, 0, 0;
+  --background-end-rgb: 0, 0, 0;
+
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  font-family: 'NanumSquare', sans-serif;
+  font-weight: normal;
+  font-size: 14px;
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@media (min-width: 768px) {
+  :root {
+    font-size: 18px;
+  }
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari, and Opera */
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge, and Firefox */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+  }
+}
+
+.textLoopWrapper {
+  overflow: hidden;
+  width: 100%;
+  white-space: nowrap;
+}
+
+.textLoop {
+  display: inline-flex;
+}
+
+.textLoop > p {
+  margin-right: 4rem;
+  font-size: 20vh;
+}
+
+.textLoopLeft {
+  animation: slide 10s infinite linear;
+  --slide-end-offset: -50%;
+  --slide-start-offset: 0%;
+}
+
+.textLoopRight {
+  animation: slide 10s infinite linear;
+  --slide-end-offset: 0%;
+  --slide-start-offset: -50%;
+}
+
+@keyframes slide {
+  0% {
+    transform: translateX(var(--slide-start-offset, 0%));
+  }
+  100% {
+    transform: translateX(var(--slide-end-offset, 0%));
+  }
+}

apps/land/src/app/home/components/TextSlider.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@clab-platforms/utils';
+
+interface TextSliderProps {
+  keywords: Array<string>;
+  direction: string;
+}
+
+export default function TextSlider({ keywords, direction }: TextSliderProps) {
+  return (
+    <div className="textLoopWrapper">
+      <div
+        className={cn(
+          'textLoop',
+          direction === 'left' ? 'textLoopLeft' : 'textLoopRight',
+        )}
+      >
+        {keywords.map((keyword) => (
+          <p
+            key={keyword}
+            className="text-clab-yellow-gray font-dung-geun-mo text-9xl font-bold"
+          >
+            {keyword}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/land/src/app/home/components/index.ts

@@ -0,0 +1 @@
+export { default as TextSlider } from './TextSlider';

apps/land/src/app/home/page.tsx

@@ -0,0 +1,29 @@
+import PageLayout from '@/app/PageLayout';
+import { KEYWORDS, PATH } from '@/constants';
+import Link from 'next/link';
+
+import TextSlider from './components/TextSlider';
+
+export default function Home() {
+  return (
+    <PageLayout nav footer className="h-screen w-full">
+      <div className="flex size-full flex-col items-center justify-between overflow-hidden">
+        <TextSlider keywords={KEYWORDS} direction="right" />
+        <div className="flex flex-col space-y-4 text-center">
+          <h1 className="text-4xl font-bold leading-normal md:text-6xl md:leading-normal">
+            당신의 가치를 찾기 위한 여정
+            <br />
+            여기 C-Lab에서.
+          </h1>
+          <Link
+            href={PATH.APPLICATION}
+            className="bg-clab-yellow border-clab-yellow hover:text-clab-yellow mx-auto rounded-full border px-10 py-2 text-xl font-bold text-black hover:bg-opacity-0"
+          >
+            JOIN-US
+          </Link>
+        </div>
+        <TextSlider keywords={[...KEYWORDS].reverse()} direction="left" />
+      </div>
+    </PageLayout>
+  );
+}

apps/land/src/app/layout.tsx

@@ -0,0 +1,29 @@
+import '@clab-platforms/design-system/dist/index.css';
+
+import { Providers } from '@/utils';
+import type { Metadata } from 'next';
+
+import './fonts.css';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'C-Lab',
+  description: '경기대학교 AI컴퓨터공학부 학술동아리 C-Lab입니다.',
+  icons: {
+    icon: '/favicon.ico',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: JSX.Element | JSX.Element[];
+}>) {
+  return (
+    <html lang="ko">
+      <body className="scrollbar-hide flex min-h-screen flex-col">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

apps/land/src/app/page.tsx

@@ -0,0 +1,6 @@
+import { PATH } from '@/constants';
+import { redirect } from 'next/navigation';
+
+export default function Home() {
+  redirect(PATH.HOME);
+}

apps/land/src/components/Footer.tsx

@@ -0,0 +1,25 @@
+import { INFORMATION_URL } from '@/constants';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <footer className="bg-clab-gray flex min-h-56 justify-between px-8 py-12 md:px-20 ">
+      <div className="flex flex-col justify-between">
+        <Image src="/favicon.ico" width={56} height={56} alt="C-Lab" />
+        <ul className="space-y-1 text-sm">
+          <p>Developed By C-Lab CoreTeam</p>
+          <p>© C-Lab. All rights reserved.</p>
+        </ul>
+      </div>
+      <Link href={INFORMATION_URL.GITHUB} target="_blank">
+        <Image
+          src="/github-mark-white.svg"
+          width={40}
+          height={40}
+          alt="C-Lab"
+        />
+      </Link>
+    </footer>
+  );
+}