feat(time): add HomePage (#88)

kgu-clab · Apr 5, 2024 · 2744f47 · 2744f47
1 parent 582be6a
commit 2744f47
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 4 deletions.
diff --git a/apps/time/app/layout.tsx b/apps/time/app/layout.tsx
@@ -1,12 +1,16 @@
 import type { Metadata } from 'next';
 import { Noto_Sans_KR } from 'next/font/google';
+import { cn } from '@utils/component';
 import './globals.css';
 
 const inter = Noto_Sans_KR({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: '경기타임',
   description: '경기대학교에 계신 모든 순간을 도와드릴게요.',
+  icons: {
+    icon: '/favicon.ico',
+  },
 };
 
 export default function RootLayout({
@@ -16,7 +20,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <body className={inter.className}>{children}</body>
+      <body
+        className={cn(inter.className, 'bg-gray-50 min-h-screen flex flex-col')}
+      >
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/apps/time/app/page.tsx b/apps/time/app/page.tsx
@@ -1,7 +1,118 @@
+import PageLayout from '@components/common/PageLayout';
+import {
+  HomeCard,
+  HomeCardDescription,
+  HomeCardHeader,
+  HomeCardIcon,
+} from '@components/home/HomeCard';
+import { PATH } from '@constants/path';
+import {
+  FcComboChart,
+  FcCalculator,
+  FcReading,
+  FcMultipleDevices,
+  FcDownload,
+  FcGraduationCap,
+  FcLandscape,
+  FcViewDetails,
+} from 'react-icons/fc';
+
+const buttons = [
+  {
+    row: false,
+    disabled: false,
+    to: PATH.TIMETABLE,
+    title: '시간표',
+    description: '강의 시간표를 조합하고 관리할 수 있어요',
+    icon: <FcComboChart size={64} />,
+  },
+  {
+    row: false,
+    disabled: false,
+    to: PATH.GRADE,
+    title: '학점',
+    description: '학점을 계산하고 관리할 수 있어요',
+    icon: <FcCalculator size={64} />,
+  },
+  {
+    row: false,
+    disabled: false,
+    to: PATH.LIBRARY,
+    title: '도서관',
+    description: '도서관 좌석 현황을 확인할 수 있어요',
+    icon: <FcReading size={64} />,
+  },
+  {
+    row: false,
+    disabled: false,
+    to: PATH.LOST,
+    title: '분실물',
+    description: '분실물을 등록하고 찾을 수 있어요',
+    icon: <FcMultipleDevices size={64} />,
+  },
+  {
+    row: true,
+    disabled: true,
+    to: PATH.GRADUATION,
+    title: '졸업요건진단',
+    description:
+      'Kutis에서 2017년까지 제공되던 졸업요건 진단 기능을 경기타임팀에서 개발 중이에요, 많은 기대 부탁드려요',
+    icon: <FcGraduationCap size={64} />,
+  },
+  {
+    row: false,
+    disabled: true,
+    to: PATH.FESTIVAL,
+    title: '축제',
+    description: '학교 축제 정보를 제공해 드려요, 축제 시즌 때 만나요',
+    icon: <FcLandscape size={64} />,
+  },
+  {
+    row: false,
+    disabled: false,
+    to: PATH.FOOD,
+    title: '학식',
+    description: '감성코어, 기숙사 학식 정보를 제공해 드려요',
+    icon: <FcViewDetails size={64} />,
+  },
+] as const;
+
 export default function Home() {
   return (
-    <main className="flex flex-col items-center justify-between min-h-screen">
-      경기타임
-    </main>
+    <PageLayout nav footer className="space-y-4">
+      <div className="text-xl font-semibold text-center">
+        <h2 className="inline-block font-bold text-transparent bg-gradient-to-r from-sky-600 via-indigo-500 to-purple-500 bg-clip-text">
+          OPEN-BETA
+        </h2>
+        <p className="flex justify-center gap-2 text-xs text-gray-500">
+          현재 불안정하거나 구현되지 않는 기능이 있을 수 있습니다.
+        </p>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        {buttons.map(({ row, disabled, to, title, description, icon }) => (
+          <HomeCard
+            key={title}
+            to={to}
+            className={row ? 'col-span-2' : 'col-span-1'}
+            disabled={disabled}
+          >
+            <HomeCardHeader>{title}</HomeCardHeader>
+            <HomeCardDescription>{description}</HomeCardDescription>
+            <HomeCardIcon>{icon}</HomeCardIcon>
+          </HomeCard>
+        ))}
+      </div>
+      <HomeCard to={PATH.GUIDE}>
+        <div className="flex items-center gap-4">
+          <FcDownload size={32} />
+          <div>
+            <p className="font-semibold">애플리케이션 설치 가이드</p>
+            <p className="text-sm text-gray-500">
+              경기타임를 모바일에 다운로드하고 싶으신가요?
+            </p>
+          </div>
+        </div>
+      </HomeCard>
+    </PageLayout>
   );
 }