Merge pull request #179 from isd-sgcu/sun/fdr-77-register-done

Sun/fdr 77 register done

src/app/globals.css

@@ -3,15 +3,20 @@
 @tailwind utilities;
 
 @layer {
-    .bg-1 {
-        background-image: url('https://rpkm67.sgp1.cdn.digitaloceanspaces.com/assets/bg-1.svg');
-        background-repeat: repeat;
-        background-size: cover;
-    }
+  .bg-1 {
+    background-image: url('https://rpkm67.sgp1.cdn.digitaloceanspaces.com/assets/bg-1.svg');
+    background-repeat: repeat;
+    background-size: cover;
+  }
 
-    .bg-2 {
-        background-image: url('https://rpkm67.sgp1.cdn.digitaloceanspaces.com/assets/bg-2.svg');
-        background-repeat: repeat;
-        background-size: cover;
-    }
-}
+  .bg-2 {
+    background-image: url('https://rpkm67.sgp1.cdn.digitaloceanspaces.com/assets/bg-2.svg');
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  .font-outline {
+    -webkit-text-stroke-width: 1pt;
+    -webkit-text-stroke-color: #183f86;
+  }
+}

src/app/rpkm/freshy-night/register-done/page.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@/context/AuthContext';
+
+import BottomButton from '@/components/(main)/home/BottomButton';
+import QrCodeModal from '@/components/rpkm/freshy-night/QrCodeModal';
+import qrcodeIcon from '@public/home/icon/qrcode.svg';
+
+export default function RegisterDone() {
+  const [qrModal, setQrModal] = useState<boolean>(false);
+
+  const { user } = useAuth();
+
+  return (
+    <div className="py-[8%]">
+      <div className="bg-[#FFFEF7E5] w-11/12 justify-between mx-auto py-[5%] flex flex-col items-center gap-y-5 min-h-screen [box-shadow:_0px_0px_15px_0px_rgba(0_0_0_0.50)] [clip-path:polygon(1rem_0,calc(100%-1rem)_0,100%_1rem,100%_calc(100%-1rem),calc(100%-1rem)_100%,1rem_100%,0_calc(100%-1rem),0_1rem)]">
+        <div className="text-center font-sopha font-outline">
+          <p className="text-project-pastel-pink text-8xl/[5rem] [text-shadow:_2px_2px_2px_rgb(0_0_0_/_30%)]">
+            ลงทะเบียน
+          </p>
+          <p className="text-project-yellow text-9xl/[2.5rem] tracking-wide [text-shadow:_2px_2px_2px_rgb(0_0_0_/_30%)]">
+            <span className="-mr-5">ส</span> ำเร็จ
+          </p>
+        </div>
+        <BottomButton
+          onClick={() => setQrModal(true)}
+          src={qrcodeIcon}
+          text="My Qr"
+        />
+      </div>
+      <QrCodeModal
+        setOpen={setQrModal}
+        open={qrModal}
+        userId={user ? user.id : ''}
+      />
+    </div>
+  );
+}

src/components/rpkm/Modal/ModalStyle.ts

@@ -26,6 +26,13 @@ const modalStyles = {
       'cancel-border': 'bg-[#F5F5F5]',
     },
   },
+  'dark-blue': {
+    button: {
+      'accept-background': 'bg-[#183F86] text-[#FFF]',
+      'accept-border': 'bg-[#EFD08B]',
+      width: 'w-3/4',
+    },
+  },
   green: {
     background: 'bg-[#67AB88]',
     button: {

src/components/rpkm/freshy-night/ModalButton.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@/lib/utils';
+
+interface ModalButtonProps {
+  callBackFunction: (params: unknown) => void;
+  borderClassName: string;
+  backgroundClassName: string;
+  buttonWidth?: string | 'w-2/5';
+  children: React.ReactNode;
+}
+
+/**
+ * ModalButton component
+ * @param callBackFunction - function
+ * @param borderClassName - string
+ * @param backgroundClassName - string
+ * @param children - ReactNode
+ * @returns Styled button component
+ */
+const ModalButton: React.FC<ModalButtonProps> = ({
+  callBackFunction,
+  borderClassName,
+  backgroundClassName,
+  buttonWidth,
+  children,
+}) => {
+  return (
+    <button
+      onClick={callBackFunction}
+      className={cn('p-1 inv-rad inv-rad-2', borderClassName, buttonWidth)}
+    >
+      <div
+        className={cn(
+          'py-[0.3rem] px-2 inv-rad inv-rad-2',
+          backgroundClassName
+        )}
+      >
+        {children}
+      </div>
+    </button>
+  );
+};
+
+export default ModalButton;

src/components/rpkm/freshy-night/QrCodeModal.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { useQRCode } from 'next-qrcode';
+
+import ModalButton from '@/components/rpkm/freshy-night/ModalButton';
+import modalStyles from '../Modal/ModalStyle';
+import qrOuterBackground from '@public/rpkm/freshy-night/register-done/qr-outer-background.svg';
+import qrInnerBackground from '@public/rpkm/freshy-night/register-done/qr-inner-background.svg';
+import vector from '@public/rpkm/freshy-night/register-done/vector.svg';
+
+interface QrCodeModalProps {
+  setOpen: (value: boolean) => void;
+  open: boolean;
+  userId: string;
+}
+
+export default function QrCodeModal({
+  setOpen,
+  open,
+  userId,
+}: QrCodeModalProps) {
+  const [viewportHeight, setViewportHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setViewportHeight(0.25 * window.innerHeight);
+    };
+
+    // Initial setup
+    handleResize();
+
+    // Event listener for window resize
+    window.addEventListener('resize', handleResize);
+
+    // Clean up event listener
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const { Canvas } = useQRCode();
+
+  if (!open) return null;
+
+  return (
+    <div className="z-10 inset-0 fixed flex justify-center bg-black bg-opacity-50 self-center">
+      <div className="w-[calc(100vh*(72/156)*(9/10))] h-[64vh] relative self-center flex flex-col justify-center">
+        <div
+          className="w-4/5 h-full opacity-100 self-center flex justify-self-center justify-center bg-contain bg-no-repeat bg-center"
+          style={{ backgroundImage: `url(${qrOuterBackground.src})` }}
+        >
+          <div
+            className="w-11/12 h-[46vh] opacity-100 self-center justify-self-center bg-contain bg-no-repeat bg-center flex flex-col items-center justify-around py-[2vh]"
+            style={{ backgroundImage: `url(${qrInnerBackground.src})` }}
+          >
+            <h5 className="font-athiti text-3xl font-medium">My QR</h5>
+            <Image
+              src={vector}
+              alt="vector"
+              className="w-3/5"
+            />
+            <Canvas
+              text={userId}
+              options={{
+                width: viewportHeight,
+              }}
+            />
+            <ModalButton
+              callBackFunction={() => setOpen(false)}
+              borderClassName={modalStyles['dark-blue'].button['accept-border']}
+              backgroundClassName={
+                modalStyles['dark-blue'].button['accept-background']
+              }
+              buttonWidth={modalStyles['dark-blue'].button.width}
+            >
+              ย้อนกลับ
+            </ModalButton>
+          </div>
+        </div>
+      </div>
+    </div>
+    // <div className="z-10 inset-0 fixed flex justify-center bg-black bg-opacity-50 self-center">
+    //   <div className="w-[calc(100vh*(72/156)*(9/10))] h-[64vh] relative self-center flex flex-col justify-center">
+    //     <div
+    //       className="w-4/5 h-full bg-contain bg-no-repeat bg-center flex flex-col items-center"
+    //       style={{ backgroundImage: `url(${qrInnerBackground.src})` }}
+    //     >
+    //     </div>
+    //   </div>
+    // </div>
+  );
+}

tailwind.config.ts

@@ -50,6 +50,7 @@ const config: Config = {
       },
       dropShadow: {
         font: '0 1.2px 1.2px rgba(0,0,0,0.8)',
+        box: '0px 0px 15px 0px rgba(0, 0, 0, 0.50)',
       },
       animation: {
         shake: 'shaking 60ms infinite',