feat(status): optimize imports and update layout in status page (#171)

kgu-clab · Jun 25, 2024 · 37cf6b1 · 37cf6b1
1 parent 594fa37
commit 37cf6b1
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 19 deletions.
diff --git a/apps/status/app/layout.tsx b/apps/status/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Introduce } from '@/src/widgets/introduce';
 import { Footer, Header } from '@/src/widgets/menu';
 import type { Metadata } from 'next';
 
@@ -16,8 +17,13 @@ export default function RootLayout({
   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 />
+        <div className="bg-clab-primary flex w-full justify-center text-white">
+          <div className="flex w-full max-w-5xl flex-col justify-center p-10 pb-24">
+            <Header />
+            <Introduce />
+          </div>
+        </div>
+        <div className="mb-24 mt-6 flex w-full max-w-5xl flex-col justify-center gap-y-20 p-10">
           {children}
         </div>
         <Footer />

diff --git a/apps/status/app/page.tsx b/apps/status/app/page.tsx
@@ -1,13 +1,9 @@
-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 />
+      <CurrentServices />
     </div>
   );
 }
diff --git a/apps/status/public/image/logo_primary.webp b/apps/status/public/image/logo_primary.webp
diff --git a/apps/status/public/image/logo.webp → apps/status/public/image/logo_secondary.webp b/apps/status/public/image/logo.webp → apps/status/public/image/logo_secondary.webp
diff --git a/apps/status/public/lottie/inspection.json b/apps/status/public/lottie/inspection.json
diff --git a/apps/status/public/lottie/working.json b/apps/status/public/lottie/working.json
diff --git a/apps/status/src/widgets/introduce/ui/Introduce.tsx b/apps/status/src/widgets/introduce/ui/Introduce.tsx
@@ -1,17 +1,17 @@
-import InspectionLottie from './InspectionLottie';
+import IntroduceLottie from './IntroduceLottie';
 
 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">
+      <div className="mt-20 break-keep">
         <h2 className="text-4xl font-bold">
           C-Lab 서비스 상태 페이지에 오신 것을 환영합니다.
         </h2>
-        <p className="mt-5 text-xl">
+        <p className="mt-5 text-xl text-gray-300">
           하단의 정보를 통해 운영중인 서비스의 상태를 확인할 수 있습니다.
         </p>
       </div>
-      <InspectionLottie />
+      <IntroduceLottie />
     </div>
   );
 }
diff --git a/...widgets/introduce/ui/InspectionLottie.tsx → .../widgets/introduce/ui/IntroduceLottie.tsx b/...widgets/introduce/ui/InspectionLottie.tsx → .../widgets/introduce/ui/IntroduceLottie.tsx
@@ -2,14 +2,14 @@
 
 import Lottie from 'react-lottie-player';
 
-import inspectionLottieJson from '@/public/lottie/inspection.json';
+import check from '@/public/lottie/working.json';
 
-export default function InspectionLottie() {
+export default function IntroduceLottie() {
   return (
     <Lottie
       className="hidden w-[400px] shrink-0 md:block"
       loop
-      animationData={inspectionLottieJson}
+      animationData={check}
       play
     />
   );

diff --git a/apps/status/src/widgets/menu/ui/Header.tsx b/apps/status/src/widgets/menu/ui/Header.tsx
@@ -1,8 +1,19 @@
+import Image from 'next/image';
+
 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>
+        <Image
+          src="/image/logo_primary.webp"
+          className="size-10"
+          width={64}
+          height={64}
+          alt="씨랩 로고"
+        />
+        <h1 className="text-3xl font-bold">
+          C-Lab <span className="font-medium">Status</span>
+        </h1>
       </div>
     </div>
   );

diff --git a/apps/status/src/widgets/service-status/ui/ServiceStatusItem.tsx b/apps/status/src/widgets/service-status/ui/ServiceStatusItem.tsx
@@ -10,17 +10,17 @@ interface StatusItemProps {
 function StatusTag({ status }: { status: boolean }) {
   return (
     <div
-      className={`w-fit rounded-md ${status ? 'bg-green-600' : 'bg-red-500'} px-2 py-1 text-center text-sm text-white`}
+      className={`w-fit rounded-md ${status ? 'bg-green-500' : 'bg-red-500'} px-2 py-1 text-center text-sm font-medium text-white`}
     >
       {status ? '서비스 중' : '서비스 일시 중단'}
     </div>
   );
 }
 
 export default function StatusItem({
+  status,
   serviceName,
   serviceURL,
-  status,
 }: StatusItemProps) {
   return (
     <li className="flex flex-col items-center overflow-hidden rounded-lg border shadow-xl transition-all hover:scale-105">
@@ -30,7 +30,7 @@ export default function StatusItem({
             className="h-40"
             width={200}
             height={200}
-            src="/image/logo.webp"
+            src="/image/logo_secondary.webp"
             alt="C-LAB 로고"
           />
         </div>