Merge pull request #173 from prgrms-web-devcourse-final-project/fix/168-login-focus

[fix] 로그인 포커스 수정, 모달 포커스 추가

Author: yoo-nji

dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.2ufi9jpmuo"
+    "revision": "0.1kau0siulq"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/Button.tsx

@@ -1,39 +1,40 @@
 import { twMerge } from 'tailwind-merge';
+import { forwardRef } from 'react';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'disabled';
   className?: string;
   onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-export default function Button({
-  children,
-  variant = 'primary',
-  className,
-  ...props
-}: ButtonProps) {
-  const buttonStyle = {
-    primary: 'bg-primary-normal hover:bg-primary-hover',
-    secondary: 'bg-white border border-primary-active text-primary-active hover:bg-gray-5',
-    disabled: 'bg-gray-30 cursor-not-allowed',
-  };
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, variant = 'primary', className, ...props }, ref) => {
+    const buttonStyle = {
+      primary: 'bg-primary-normal hover:bg-primary-hover',
+      secondary: 'bg-white border border-primary-active text-primary-active hover:bg-gray-5',
+      disabled: 'bg-gray-30 cursor-not-allowed',
+    };
 
-  return (
-    <>
-      <button
-        className={twMerge(
-          'flex justify-center items-center w-full rounded-lg h-[38px] text-white transition body-m cursor-pointer',
-          buttonStyle[variant],
-          className,
-        )}
-        disabled={variant === 'disabled'}
-        {...props}
-      >
-        {children}
-      </button>
-    </>
-  );
-}
+    return (
+      <>
+        <button
+          ref={ref}
+          className={twMerge(
+            'flex justify-center items-center w-full rounded-lg h-[38px] text-white transition body-m cursor-pointer',
+            buttonStyle[variant],
+            className,
+          )}
+          disabled={variant === 'disabled'}
+          {...props}
+        >
+          {children}
+        </button>
+      </>
+    );
+  },
+);
+
+export default Button;
 
 // 사용 예시
 // <Button variant="secondary" className="w-40 py-3 text-lg">

src/components/Modal.tsx

@@ -1,15 +1,44 @@
 import { useModalStore } from '@/store/modalStore';
 import Button from './Button';
 import { createPortal } from 'react-dom';
+import { useEffect, useRef } from 'react';
 // import { spawn } from 'child_process';
 
 export default function Modal() {
-  const { modal } = useModalStore();
+  const { modal, closeModal } = useModalStore();
+  const confirmButtonRef = useRef<HTMLButtonElement | null>(null);
+  const cancelButtonRef = useRef<HTMLButtonElement | null>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (modal.isOpen) {
+      confirmButtonRef.current?.focus(); // 모달이 열리면 첫 번째 버튼에 포커스 이동
+    }
+  }, [modal.isOpen]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Escape') {
+      closeModal();
+    }
+
+    if (e.key === 'Tab') {
+      e.preventDefault(); // 기본 Tab 동작 막기
+      if (document.activeElement === confirmButtonRef.current) {
+        cancelButtonRef.current?.focus(); // 확인 버튼 → 취소 버튼으로 이동
+      } else {
+        confirmButtonRef.current?.focus(); // 취소 버튼 → 확인 버튼으로 이동
+      }
+    }
+  };
+
   if (!modal.isOpen) return null;
+
   return createPortal(
     <div
+      ref={modalRef}
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
       // onClick={closeModal}
+      onKeyDown={(e) => handleKeyDown(e)}
     >
       <div
         className="bg-white p-5 mx-5 rounded-lg card-shadow w-[287px] min-h-[148px] flex flex-col justify-between"
@@ -26,11 +55,21 @@ export default function Modal() {
         </div>
         {modal.message && <p className="text-center caption-r">{modal.message}</p>}
         <div className="mt-4 flex justify-end gap-[6px]">
-          <Button variant="primary" onClick={modal.onConfirm} className="body-m">
+          <Button
+            ref={confirmButtonRef}
+            variant="primary"
+            onClick={modal.onConfirm}
+            className="body-m focus:bg-primary-active "
+          >
             {modal.confirmText}
           </Button>
           {modal.onCancel && (
-            <Button variant="secondary" onClick={modal.onCancel} className="body-m">
+            <Button
+              ref={cancelButtonRef}
+              variant="secondary"
+              onClick={modal.onCancel}
+              className="body-m focus:bg-gray-5"
+            >
               {modal.cancelText}
             </Button>
           )}

src/pages/Login.tsx

@@ -48,6 +48,9 @@ export default function Login() {
   const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    // 현재 포커스된 요소의 포커스 제거
+    (document.activeElement as HTMLElement | null)?.blur();
+
     const trimmedId = userId.trim();
     const trimmedPassword = userPassword.trim();
 

src/store/modalStore.ts

@@ -26,6 +26,8 @@ export const useModalStore = create<ModalStore>((set) => ({
         isOpen: false,
         title: '',
         message: '',
+        confirmText: '확인',
+        cancelText: '취소',
         onConfirm: undefined,
         onCancel: undefined,
       },