Merge pull request #172 from KGU-C-Lab/feature/#171

status 페이지 개발 및 BUG 48 수정

apps/member/src/components/community/BoardCollectCard/BoardCollectCard.tsx

@@ -1,6 +1,8 @@
 import { LiaCommentSolid } from 'react-icons/lia';
 import { Link } from 'react-router-dom';
 
+import { toDecodeHTMLEntities } from '@clab/utils';
+
 import Image from '@components/common/Image/Image';
 
 import { PATH_FINDER } from '@constants/path';
@@ -35,7 +37,9 @@ const BoardCollectCard = ({
         </div>
         <div className="grid w-full">
           <p className="truncate font-semibold">{title}</p>
-          <p className="truncate text-gray-500">{content}</p>
+          <p className="truncate text-gray-500">
+            {toDecodeHTMLEntities(content)}
+          </p>
         </div>
         <div className="flex justify-between gap-2">
           <p className="flex w-12 items-center gap-1">

apps/status/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/status/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/status/app/globals.css

@@ -0,0 +1,56 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family:
+    'Pretendard Variable',
+    Pretendard,
+    -apple-system,
+    BlinkMacSystemFont,
+    system-ui,
+    Roboto,
+    'Helvetica Neue',
+    'Segoe UI',
+    'Apple SD Gothic Neo',
+    'Noto Sans KR',
+    'Malgun Gothic',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  font-size: 14px;
+}
+
+@media (min-width: 768px) {
+  :root {
+    font-size: 16px;
+  }
+}
+
+@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 */
+  }
+}
+
+a,
+img {
+  -webkit-user-drag: none;
+}

apps/status/app/layout.tsx

@@ -0,0 +1,27 @@
+import { Footer, Header } from '@/src/widgets/menu';
+import type { Metadata } from 'next';
+
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'C-LAB Status',
+  description: 'C-LAB 서비스들의 상태를 한눈에 확인해보세요',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="min-w-dvw relative flex min-h-dvh flex-col items-center justify-center bg-white">
+        <div className="xs:p-10 mb-20 flex w-full max-w-5xl flex-col justify-center gap-y-20 p-5">
+          <Header />
+          {children}
+        </div>
+        <Footer />
+      </body>
+    </html>
+  );
+}

apps/status/app/page.tsx

@@ -0,0 +1,13 @@
+import { Introduce } from '@/src/widgets/introduce';
+import { Notification } from '@/src/widgets/notification';
+import { CurrentServices } from '@/src/widgets/service-status';
+
+export default function Home() {
+  return (
+    <div className="flex size-full flex-col items-start justify-center gap-y-10">
+      <Introduce />
+      <CurrentServices status={false} />
+      <Notification />
+    </div>
+  );
+}

apps/status/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

apps/status/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "status",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "14.2.4",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-lottie-player": "^2.0.0"
+  },
+  "devDependencies": {
+    "@clab/config": "workspace:^",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

apps/status/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

apps/status/src/shared/constant/index.ts

@@ -0,0 +1 @@
+export * from './serviceList';

apps/status/src/shared/constant/serviceList.ts

@@ -0,0 +1,11 @@
+export const SERVICE_LIST = {
+  Auth: 'https://auth.clab.page/',
+  Member: 'https://www.clab.page/',
+  Land: 'https:///play.clab.page/',
+};
+
+export const SERVICE_STATUS_LIST = {
+  Auth: true,
+  Member: false,
+  Land: true,
+};

apps/status/src/shared/index.ts

@@ -0,0 +1,2 @@
+export * from './constant';
+export * from './type';

apps/status/src/shared/type/index.ts

@@ -0,0 +1 @@
+export * from './service';

apps/status/src/shared/type/service.ts

@@ -0,0 +1,3 @@
+import { SERVICE_LIST } from '../constant';
+
+export type ServiceList = keyof typeof SERVICE_LIST;

apps/status/src/shared/ui/Title.tsx

@@ -0,0 +1,11 @@
+interface TitleProps {
+  text: string;
+}
+
+export default function Title({ text }: TitleProps) {
+  return (
+    <div className="w-full border-b pb-2">
+      <h3 className="text-2xl font-semibold">{text}</h3>
+    </div>
+  );
+}

apps/status/src/widgets/introduce/index.ts

@@ -0,0 +1 @@
+export * from './ui';

apps/status/src/widgets/introduce/ui/InspectionLottie.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import Lottie from 'react-lottie-player';
+
+import inspectionLottieJson from '@/public/lottie/inspection.json';
+
+export default function InspectionLottie() {
+  return (
+    <Lottie
+      className="hidden w-[400px] shrink-0 md:block"
+      loop
+      animationData={inspectionLottieJson}
+      play
+    />
+  );
+}

apps/status/src/widgets/introduce/ui/Introduce.tsx

@@ -0,0 +1,17 @@
+import InspectionLottie from './InspectionLottie';
+
+export default function Introduce() {
+  return (
+    <div className="flex w-full flex-col justify-center gap-4 md:flex-row">
+      <div className="mt-12 break-keep">
+        <h2 className="text-4xl font-bold">
+          C-Lab 서비스 상태 페이지에 오신 것을 환영합니다.
+        </h2>
+        <p className="mt-5 text-xl">
+          하단의 정보를 통해 운영중인 서비스의 상태를 확인할 수 있습니다.
+        </p>
+      </div>
+      <InspectionLottie />
+    </div>
+  );
+}

apps/status/src/widgets/introduce/ui/index.ts

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

apps/status/src/widgets/menu/index.ts

@@ -0,0 +1 @@
+export * from './ui';

apps/status/src/widgets/menu/ui/Footer.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <div className="bg-clab-primary xs:p-10 w-full p-5 text-white">
+      <div>
+        <p className="text-3xl font-bold">C-Lab</p>
+        <p className="mt-2">경기대학교 컴퓨터공학부 개발보안동아리</p>
+      </div>
+      <div className="my-2">
+        <p>Developed By C-Lab Core Team</p>
+        <p className="mt-1">
+          김관식, 한관희, 김가을, 이한음, 김정은, 전민주, 신현호, 송재훈
+        </p>
+        <p className="mt-1 font-bold">© C-Lab. All rights reserved.</p>
+      </div>
+      <Link href="https://github.com/kgu-c-lab" target="_blank">
+        <Image
+          src="/svg/github.svg"
+          width={32}
+          height={32}
+          alt="깃허브 아이콘"
+        />
+      </Link>
+    </div>
+  );
+}

apps/status/src/widgets/menu/ui/Header.tsx

@@ -0,0 +1,9 @@
+export default function Header() {
+  return (
+    <div className="flex w-full items-center justify-between py-6">
+      <div className="flex items-center gap-x-2">
+        <h1 className="text-3xl font-bold">C-Lab Status</h1>
+      </div>
+    </div>
+  );
+}

apps/status/src/widgets/menu/ui/index.ts

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

apps/status/src/widgets/notification/index.ts

@@ -0,0 +1 @@
+export * from './ui';

apps/status/src/widgets/notification/ui/Notification.tsx

@@ -0,0 +1,18 @@
+import Title from '@/src/shared/ui/Title';
+
+import NotificationItem from './NotificationItem';
+
+export default function Notification() {
+  return (
+    <div className="w-full">
+      <Title text="서비스 공지" />
+      <ul className="mt-7">
+        <NotificationItem
+          date={new Date()}
+          title="멤버스 점검"
+          description="멤버스 임시 점검 예정입니다"
+        />
+      </ul>
+    </div>
+  );
+}