[25.06.07 / TASK-189] Refactor - QR 로그인 모달 UI 일부 개선 (#41)

Author: six-standard

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

@@ -12,7 +12,7 @@ import { useResponsive, useModal } from '@/hooks';
 import { logout, me } from '@/apis';
 import { defaultStyle, Section, textStyle } from './Section';
 import { Modal } from '../notice/Modal';
-import { QRCode } from '../QRCode';
+import { QRCode } from '../qrcode';
 
 const PARAMS = {
   MAIN: '?asc=false&sort=',

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

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

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

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react';
+
+const ROLLBACK_AFTER_CLICK_MS = 1000;
+
+interface IProp {
+  url?: string;
+  disabled?: boolean;
+}
+
+export const CopyButton = ({ url, disabled }: IProp) => {
+  const [clicked, setClicked] = useState(false);
+  const clickedRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (clickedRef.current) clearTimeout(clickedRef.current);
+    };
+  }, []);
+
+  const handleClick = async () => {
+    if (clicked || !url) return;
+
+    try {
+      await navigator.clipboard.writeText(url);
+      setClicked(true);
+
+      if (clickedRef.current) clearTimeout(clickedRef.current);
+
+      clickedRef.current = setTimeout(() => setClicked(false), ROLLBACK_AFTER_CLICK_MS);
+    } catch (err) {
+      console.error('클립보드 복사 실패:', err);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={disabled}
+      className={`
+        relative block p-4 rounded-lg leading-none overflow-hidden transition-all duration-200
+        after:absolute after:inset-0 after:flex after:items-center after:justify-center truncate
+        after:rounded-lg after:transition-all after:duration-300 after:font-medium after:pointer-events-none
+        ${
+          disabled
+            ? 'cursor-not-allowed bg-BG-ALT text-TEXT-SUB opacity-50'
+            : clicked
+              ? 'cursor-pointer bg-BG-MAIN text-TEXT-MAIN hover:shadow-lg after:content-["복사_완료!"] after:bg-PRIMARY-SUB after:text-BG-MAIN after:opacity-100 after:scale-100'
+              : 'cursor-pointer bg-BG-MAIN text-TEXT-MAIN hover:shadow-lg after:content-["클릭해서_복사하기"] after:bg-BG-MAIN after:text-TEXT-MAIN after:opacity-0 after:scale-95 hover:after:opacity-100 hover:after:scale-100'
+        }
+      `}
+    >
+      {url}
+    </button>
+  );
+};

src/app/(auth-required)/components/qrcode/CopyButton.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { QRCodeSVG } from 'qrcode.react';
+import { useQuery } from '@tanstack/react-query';
+import { useState, useRef, useEffect } from 'react';
+import { COLORS, env, PATHS, SCREENS } from '@/constants';
+import { useResponsive } from '@/hooks';
+import { createQRToken } from '@/apis';
+import { Modal as Layout } from '@/components';
+import { formatTimeToMMSS } from '@/utils/dateUtil';
+import { CopyButton } from './CopyButton';
+
+const TIMER_DURATION = 5 * 60; // 5분 = 300초
+
+export const QRCode = () => {
+  const width = useResponsive();
+  const [timeLeft, setTimeLeft] = useState(TIMER_DURATION);
+
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const isExpired = timeLeft === 0;
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: [PATHS.QRLOGIN],
+    queryFn: createQRToken,
+    refetchOnMount: true,
+    staleTime: 0,
+    refetchOnWindowFocus: false,
+  });
+  const url = `${env.BASE_URL}/api/qr-login?token=${data?.token}`;
+
+  // 타이머 시작
+  useEffect(() => {
+    if (!isLoading) {
+      timerRef.current = setInterval(() => setTimeLeft((prev) => (prev <= 1 ? 0 : prev - 1)), 1000);
+    }
+
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [isLoading]);
+
+  return (
+    <Layout title="QR 로그인">
+      <div className="flex items-center justify-center gap-10">
+        <div
+          className={
+            isExpired || isLoading
+              ? `relative after:inset-0 after:absolute after:m-auto after:bg-BG-MAIN after:size-fit after:text-TEXT-MAIN after:px-3 after:py-1 after:rounded-lg after:font-medium ${isLoading ? 'after:content-["로딩중"]' : 'after:content-["만료됨"]'}`
+              : ''
+          }
+        >
+          <QRCodeSVG
+            value={url}
+            width={width < SCREENS.MBI ? 130 : 171}
+            height={width < SCREENS.MBI ? 130 : 171}
+            enableBackground={0}
+            bgColor={COLORS.BG.SUB}
+            fgColor={COLORS.TEXT.MAIN}
+            className={`transition-all ${isExpired || isLoading ? 'blur-sm' : ''}`}
+          />
+        </div>
+        <div className="flex flex-col items-center gap-4">
+          <h3 className="text-T4 text-TEXT-ALT leading-none">만료까지</h3>
+          <h2
+            className={`text-T2 leading-none min-w-[130px] text-center ${timeLeft <= 60 ? 'text-DESTRUCTIVE-SUB' : 'text-TEXT-MAIN'}`}
+          >
+            {formatTimeToMMSS(timeLeft)}
+          </h2>
+          {isExpired && !isLoading && (
+            <button
+              className="text-I1 text-BG-MAIN bg-PRIMARY-MAIN px-5 py-1 rounded-sm"
+              onClick={async () => {
+                await refetch();
+                setTimeLeft(TIMER_DURATION);
+              }}
+            >
+              새로고침
+            </button>
+          )}
+        </div>
+      </div>
+
+      <CopyButton url={url} disabled={isExpired || isLoading} />
+    </Layout>
+  );
+};

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

@@ -46,3 +46,12 @@ export const convertDateToKST = (date?: string): KSTDateFormat | undefined => {
     full: kstDate,
   };
 };
+
+export const formatTimeToMMSS = (time: number) => {
+  const minute = Math.floor(time / 60)
+    .toString()
+    .padStart(2, '0');
+  const second = (time % 60).toString().padStart(2, '0');
+
+  return `${minute}분 ${second}초`;
+};