[25.05.08 / TASK-139] Feature - QR 로그인 (#31)

Author: six-standard

package.json

@@ -28,6 +28,7 @@
     "@tanstack/react-query": "^5.69.0",
     "chart.js": "^4.4.7",
     "next": "14.2.18",
+    "qrcode.react": "^4.2.0",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",

pnpm-lock.yaml

@@ -17,3 +17,6 @@ export const me = async () => await instance<null, UserDto>(PATHS.ME);
 export const logout = async () => await instance(PATHS.LOGOUT, { method: 'POST', body: undefined });
 
 export const sampleLogin = async () => await instance(PATHS.SAMPLELOGIN, { method: 'POST' });
+
+export const createQRToken = async () =>
+  await instance<null, { token: string }>(PATHS.QRLOGIN, { method: 'POST' });

src/apis/user.request.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { QRCodeSVG } from 'qrcode.react';
+import { useQuery } from '@tanstack/react-query';
+import { COLORS, env, PATHS, SCREENS } from '@/constants';
+import { useResponsive } from '@/hooks';
+import { createQRToken } from '@/apis';
+import { Modal as Layout } from '@/components';
+
+export const QRCode = () => {
+  const width = useResponsive();
+
+  const { data, isSuccess } = useQuery({ queryKey: [PATHS.QRLOGIN], queryFn: createQRToken });
+
+  return (
+    <Layout title="QR 로그인" className="w-fit h-fit">
+      {isSuccess ? (
+        <QRCodeSVG
+          value={`${env.BASE_URL}/api/qr-login?token=${data.token}`}
+          width={width < SCREENS.MBI ? 140 : 181}
+          height={width < SCREENS.MBI ? 140 : 181}
+          enableBackground={0}
+          bgColor={COLORS.BG.SUB}
+          fgColor={COLORS.TEXT.MAIN}
+          className="transition-all"
+        />
+      ) : (
+        <div className="size-[180px] max-MBI:size-[140px] bg-BG-ALT" />
+      )}
+    </Layout>
+  );
+};

src/app/(auth-required)/components/QRCode.tsx

@@ -12,6 +12,7 @@ import { logout, me } from '@/apis';
 import { useModal } from '@/hooks/useModal';
 import { defaultStyle, Section, textStyle } from './Section';
 import { Modal } from '../notice/Modal';
+import { QRCode } from '../QRCode';
 
 const PARAMS = {
   MAIN: '?asc=false&sort=',
@@ -105,14 +106,23 @@ export const Header = () => {
               <div className="w-0 h-0 border-[15px] ml-3 mr-3 border-TRANSPARENT border-b-BG-SUB" />
               <div className="cursor-pointer h-fit flex-col rounded-[4px] bg-BG-SUB shadow-BORDER-MAIN shadow-md">
                 <button
-                  className="text-DESTRUCTIVE-SUB text-I3 p-5 max-MBI:p-4 flex whitespace-nowrap w-auto hover:bg-BG-ALT"
+                  className="text-DESTRUCTIVE-SUB text-I3 p-5 max-MBI:p-4 flex whitespace-nowrap w-full justify-center hover:bg-BG-ALT"
                   onClick={() => {
                     start();
                     out();
                   }}
                 >
                   로그아웃
                 </button>
+                <button
+                  className="text-TEXT-MAIN text-I3 p-5 max-MBI:p-4 flex items-center justify-center whitespace-nowrap w-full hover:bg-BG-ALT"
+                  onClick={() => {
+                    setOpen(false);
+                    ModalOpen(<QRCode />);
+                  }}
+                >
+                  QR 로그인
+                </button>
               </div>
             </div>
           )}

src/app/(auth-required)/components/header/index.tsx

@@ -0,0 +1,3 @@
+export * from './header';
+export * from './notice';
+export * from './QRCode';

src/app/(auth-required)/components/index.ts

@@ -19,15 +19,16 @@ export const Notice = () => {
 
   useEffect(() => {
     try {
-      const lastUpdated = new Date(data?.posts[0].created_at?.split('T')[0] as string).getTime();
+      if (!data?.posts[0]) return;
 
+      const lastUpdated = new Date(data?.posts[0].created_at?.split('T')[0] as string).getTime();
       const daysSinceUpdate = Math.ceil((new Date().getTime() - lastUpdated) / DAY_IN_MS);
 
-      if (daysSinceUpdate <= RECENT_POST_THRESHOLD_DAYS) {
-        const expiry = localStorage.getItem(NOTIFICATION_STORAGE_KEY);
-        if (!expiry || parseInt(expiry, 10) < new Date().getTime()) {
-          setShow(true);
-        }
+      if (daysSinceUpdate > RECENT_POST_THRESHOLD_DAYS) return;
+
+      const expiry = localStorage.getItem(NOTIFICATION_STORAGE_KEY);
+      if (!expiry || parseInt(expiry, 10) < new Date().getTime()) {
+        setShow(true);
       }
     } catch (error) {
       console.error('알림 날짜 처리 중 오류 발생:', error);

src/app/(auth-required)/components/notice/index.tsx

@@ -24,7 +24,7 @@ export const Modal = ({ title, children, ...rest }: IProp) => {
     <div
       {...rest}
       className={twMerge(
-        'overflow-auto flex flex-col gap-3 p-10 max-MBI:p-7 rounded-md bg-BG-SUB',
+        'overflow-auto flex flex-col gap-5 p-10 max-MBI:p-7 rounded-md bg-BG-SUB',
         rest.className,
       )}
     >

src/components/Icon/icons/Close.svg

@@ -1,6 +1,7 @@
 export const PATHS = {
   LOGIN: '/login',
   SAMPLELOGIN: '/login-sample',
+  QRLOGIN: '/qr-login',
   NOTIS: '/notis',
   EVENT: '/event',
   STAY: '/stay',