dong-be/fdr-45-otp

package.json

@@ -17,23 +17,23 @@
     "axios": "^1.7.2",
     "clsx": "^2.1.1",
     "next": "14.2.4",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-markdown": "8.0.6",
     "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@iconify/react": "^5.0.1",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "eslint": "^8",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3"
   }
 }

src/app/staff/home/page.tsx

@@ -0,0 +1,41 @@
+'use client';
+import Border from '@/components/Border';
+import TwoCircleMenu from '@/components/TwoCircleMenu';
+import Mode from '@/components/staff/home/Mode';
+import PinGroup from '@/components/staff/home/otp/PinGroup';
+import { useCallback, useState } from 'react';
+
+export default function Staff() {
+  const [isQrPage, setIsQrPage] = useState<boolean>(true);
+
+  const handleClick = useCallback((value: boolean) => {
+    setIsQrPage(() => value);
+  }, []);
+
+  return (
+    <main className="w-full h-screen flex justify-center bg-2 p-5">
+      <Border variant="white">
+        <section className="font-season italic text-4xl grid place-items-center py-8">
+          <h1>Welcome,</h1>
+          <h1>Staff</h1>
+        </section>
+        <section className="pb-3 w-full h-7 rounded-3xl bg-black flex justify-between">
+          <Mode
+            message="QR-Reader"
+            reference={true}
+            status={isQrPage}
+            handleClick={handleClick}
+          />
+          <Mode
+            message="OTP"
+            reference={false}
+            status={isQrPage}
+            handleClick={handleClick}
+          />
+        </section>
+        {isQrPage ? <></> : <PinGroup />}
+      </Border>
+      <TwoCircleMenu />
+    </main>
+  );
+}

src/components/staff/home/Mode.tsx

@@ -0,0 +1,12 @@
+import { ModeInterface } from '@/types/staff/home/mode';
+
+export default function Mode(props: ModeInterface) {
+  return (
+    <button
+      onClick={() => props.handleClick(props.reference)}
+      className={`w-7/12 rounded-3xl h-7 text-center ${props.reference === props.status ? 'text-white bg-black' : 'text-black bg-white'}`}
+    >
+      {props.message}
+    </button>
+  );
+}

src/components/staff/home/otp/PinGroup.tsx

@@ -0,0 +1,61 @@
+'use client';
+import Pin from './utils/Pin';
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import line from '@/assets/line.svg';
+import { PinDTO } from '@/dtos/pinDTO';
+import { getAllPins, resetPin } from '@/utils/pin';
+
+export default function PinGroup() {
+  const [pins, setPins] = useState<PinDTO[] | null>(null);
+
+  useEffect(() => {
+    const fetchUserEstamp = async (): Promise<void> => {
+      const pins = await getAllPins();
+      setPins(pins ?? null);
+    };
+    fetchUserEstamp();
+  }, []);
+
+  const handleReset = async (ind: number) => {
+    if (!pins) return;
+    const updatedPins: PinDTO[] = [...pins];
+    const pin = await resetPin(pins[ind].activity_id);
+    if (pin) {
+      updatedPins[ind] = pin;
+    }
+    setPins(updatedPins);
+  };
+
+  return (
+    <section className="py-3 w-full">
+      <div className="py-3 flex flex-col justify-center items-center">
+        <h1 className="font-season italic text-xl">Workshop</h1>
+        <Image
+          src={line}
+          alt="line"
+        />
+      </div>
+      <div className="relative group cursor-pointer w-full h-3/5 z-50">
+        <div className="absolute -inset-1 bg-gray-300 rounded-lg blur" />
+        <div className="relative px-7 py-6 bg-white h-full ring-1 overflow-scroll ring-gray-900/5 rounded-lg flex flex-col items-center">
+          {pins ? (
+            pins.map((data: PinDTO, index: number) => (
+              <>
+                <Pin
+                  key={index}
+                  otp={data}
+                  index={index}
+                  handleClick={handleReset}
+                />
+                {index !== 8 && <hr className="w-4/5" />}
+              </>
+            ))
+          ) : (
+            <h1 className="font-season font-bold text-2xl">No Data</h1>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/staff/home/otp/utils/Pin.tsx

@@ -0,0 +1,21 @@
+import { OtpPinReset } from '@/types/staff/home/otp/pins';
+import { Icon } from '@iconify/react/dist/iconify.js';
+export default function Pin(props: OtpPinReset) {
+  return (
+    <section className="flex w-full items-center justify-between">
+      <div className="flex flex-col justify-evenly">
+        <h1>{props.otp.activity_id}</h1>
+        <h1 className="text-4xl ">
+          {props.otp.code.substring(0, 3)} {props.otp.code.substring(3, 6)}
+        </h1>
+      </div>
+      <div>
+        <Icon
+          icon="tabler:reload"
+          className="w-6 h-6 text-black"
+          onClick={() => props.handleClick(props.index)}
+        />
+      </div>
+    </section>
+  );
+}

src/dtos/pinDTO.ts

@@ -0,0 +1,4 @@
+export type PinDTO = {
+  activity_id: string;
+  code: string;
+};

src/types/staff/home/mode.ts

@@ -0,0 +1,6 @@
+export type ModeInterface = {
+  message: string;
+  reference: boolean;
+  status: boolean;
+  handleClick(val: boolean): void;
+};

src/types/staff/home/otp/pins.ts

@@ -0,0 +1,7 @@
+import { PinDTO } from '@/dtos/pinDTO';
+
+export type OtpPinReset = {
+  otp: PinDTO;
+  index: number;
+  handleClick(ind: number): void;
+};

src/utils/pin.ts

@@ -0,0 +1,48 @@
+import { AxiosResponse } from 'axios';
+import { getAccessToken } from './auth';
+import { apiClient } from './axios';
+import { PinDTO } from '@/dtos/pinDTO';
+
+export const getAllPins = async (): Promise<PinDTO[] | null> => {
+  const accessToken = await getAccessToken();
+
+  if (!accessToken) {
+    return null;
+  }
+
+  try {
+    const res: AxiosResponse<{ pins: PinDTO[] }> = await apiClient.get('/pin', {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    return res.data.pins;
+  } catch (error) {
+    console.log('error:', error);
+    return null;
+  }
+};
+
+export const resetPin = async (activityId: string): Promise<PinDTO | null> => {
+  const accessToken = await getAccessToken();
+
+  if (!accessToken) {
+    return null;
+  }
+
+  try {
+    const res: AxiosResponse<{ pin: PinDTO }> = await apiClient.post(
+      `/pin/reset/${activityId}`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    );
+    return res.data.pin;
+  } catch (error) {
+    console.log('error:', error);
+    return null;
+  }
+};