Merge branch 'dev' into style/#54

DCNJ-Uket · Jun 25, 2024 · cb1d4b4 · cb1d4b4
2 parents ae5f11d + b649373
commit cb1d4b4
Show file tree

Hide file tree

Showing 12 changed files with 275 additions and 2 deletions.
diff --git a/apps/admin/app/layout.tsx b/apps/admin/app/layout.tsx
@@ -1,7 +1,10 @@
 import type { Metadata } from "next";
 
 import { Inter } from "next/font/google";
+
 import "@uket/ui/globals.css";
+import Nav from "@/components/Nav";
+import Footer from "@/components/Footer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,7 +20,17 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <main className="flex h-dvh flex-col">
+          <header className="container sticky top-0">
+            <Nav />
+          </header>
+          <main className="grow">{children}</main>
+          <footer>
+            <Footer />
+          </footer>
+        </main>
+      </body>
     </html>
   );
 }
diff --git a/apps/admin/app/qr-scan/_components/GreetingHeader.tsx b/apps/admin/app/qr-scan/_components/GreetingHeader.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const GreetingHeader = () => {
+  return (
+    <div className="w-full bg-[#F2F2F2] px-5 py-3 text-sm">
+      <span className="font-black">건국대학교 </span>
+      <span className="font-bold">관리자님, 안녕하세요.</span>
+    </div>
+  );
+};
+
+export default GreetingHeader;
diff --git a/apps/admin/app/qr-scan/_components/QRFinderIcon.tsx b/apps/admin/app/qr-scan/_components/QRFinderIcon.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+const QRFinderIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      className="text-brand relative left-0 top-0 z-[1] box-border h-full w-full "
+      height="100%"
+      width="100%"
+    >
+      <path
+        fill="none"
+        d="M25,10 L10,10 L10,25"
+        stroke="currentColor"
+        strokeWidth="1"
+      ></path>
+      <path
+        fill="none"
+        d="M10,75 L10,90 L25,90"
+        stroke="currentColor"
+        strokeWidth="1"
+      ></path>
+      <path
+        fill="none"
+        d="M75,90 L90,90 L90,75"
+        stroke="currentColor"
+        strokeWidth="1"
+      ></path>
+      <path
+        fill="none"
+        d="M90,25 L90,10 L75,10"
+        stroke="currentColor"
+        strokeWidth="1"
+      ></path>
+    </svg>
+  );
+};
+
+export default QRFinderIcon;
diff --git a/apps/admin/app/qr-scan/_components/QRReaderSection.tsx b/apps/admin/app/qr-scan/_components/QRReaderSection.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import dynamic from "next/dynamic";
+import { LoaderCircleIcon } from "@ui/components/ui/icon";
+
+const QRScanner = dynamic(() => import("./QRScanner"), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-full items-center text-brand">
+      <LoaderCircleIcon className="w-8 h-8 animate-spin"/>
+    </div>
+  ),
+});
+
+const QRReaderSection = () => {
+  return (
+    <section className="flex grow justify-center">
+      <main className="relative h-full sm:max-w-fit">
+        <QRScanner />
+      </main>
+    </section>
+  );
+};
+
+export default QRReaderSection;
diff --git a/apps/admin/app/qr-scan/_components/QRScanner.tsx b/apps/admin/app/qr-scan/_components/QRScanner.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+import { Scanner } from "@yudiel/react-qr-scanner";
+
+import QRFinderIcon from "./QRFinderIcon";
+
+// TODO: onScan에 실제 스캔 후 동작할 함수 연결
+const QRScanner = () => {
+  return (
+    <div className="relative h-full">
+      <Scanner
+        formats={["qr_code"]}
+        onScan={result => result}
+        classNames={{ video: "object-cover" }}
+        styles={{ finderBorder: 1 }}
+        components={{ finder: false }}
+      >
+        <QRFinderIcon />
+        <h1 className="absolute left-0 top-6 w-full text-2xl font-bold text-white sm:text-3xl">
+          <p className="flex justify-center">
+            <span className="bg-brand px-1">입장 QR 코드를 스캔</span>
+            <span>해 주세요.</span>
+          </p>
+        </h1>
+        <footer className="absolute bottom-16 left-0 w-full text-white">
+          <p className="flex justify-center font-medium">
+            QR 코드를 가운데 위치 시키세요.
+          </p>
+        </footer>
+      </Scanner>
+    </div>
+  );
+};
+
+export default QRScanner;
diff --git a/apps/admin/app/qr-scan/page.tsx b/apps/admin/app/qr-scan/page.tsx
@@ -0,0 +1,11 @@
+import QRReaderSection from "./_components/QRReaderSection";
+import GreetingHeader from "./_components/GreetingHeader";
+
+export default function QRReadPage() {
+  return (
+    <main className="flex h-full flex-col">
+      <GreetingHeader />
+      <QRReaderSection />
+    </main>
+  );
+}
diff --git a/apps/admin/components/Footer.tsx b/apps/admin/components/Footer.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import React from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { cn } from "@ui/lib/utils";
+
+// TODO: 실제 링크로 대체
+const links = [
+  {
+    href: "/qr-scan",
+    title: "QR 스캔하기",
+  },
+  {
+    href: "#축제",
+    title: "축제 정보 관리",
+  },
+  {
+    href: "#입금",
+    title: "입금 내역 확인",
+  },
+  {
+    href: "#예매",
+    title: "예매 내역 확인",
+  },
+];
+
+const Footer = () => {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex h-14">
+      {links.map(({ href, title }) => (
+        <Link
+          href={href}
+          key={href}
+          className={cn(
+            "flex h-full items-center justify-center text-[10px] text-[#5E5E6E] px-4 grow",
+            pathname === href && "text-brand border-brand border-t-2 font-bold",
+          )}
+        >
+          {title}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/apps/admin/components/Nav.tsx b/apps/admin/components/Nav.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import Image from "next/image";
+
+import LogoImage from "/public/logo.png";
+
+const Nav = () => {
+  return (
+    <nav className="flex items-end gap-2 py-4">
+      <div className="relative w-16">
+        <Image
+          src={LogoImage}
+          alt="로고"
+          width={200}
+          height={200}
+          className="object-cover"
+        />
+      </div>
+      <p className="text-brand flex flex-col justify-end text-sm font-bold">
+        for admin
+      </p>
+    </nav>
+  );
+};
+
+export default Nav;
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -12,6 +12,7 @@
   "package-manager-strict": false,
   "dependencies": {
     "@uket/ui": "workspace:*",
+    "@yudiel/react-qr-scanner": "^2.0.4",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18"

diff --git a/apps/admin/public/logo.png b/apps/admin/public/logo.png
diff --git a/packages/ui/src/components/ui/icon.tsx b/packages/ui/src/components/ui/icon.tsx
@@ -1 +1,10 @@
-export { RotateCcwIcon, LoaderCircle, Search, Moon, Sun } from "lucide-react";
+export {
+  RotateCcwIcon,
+  LoaderCircle,
+  Search,
+  Moon,
+  Sun,
+  SwitchCameraIcon,
+  ScanIcon,
+  LoaderCircleIcon,
+} from "lucide-react";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml