해당 글의 주제 Laravel 언어 설정 변경하기

목표

• 언어 설정 변경하기

1. 기본 언어 설정 변경하기

라라벨의 언어관련 설정은 config/app,php 에서 확인 할 수 있습니다.

기본적으로 언어는 en 으로 설정 되어 있습니다.

    'locale' => 'en',

한글로 설정하고싶다면 해당 부분을 ko 로 변경할 수 있습니다.

2. 번역 제공하기

기본 언어 설정을 변경했다면 해당 언어에 맞는 언어팩을 제공해주어야합니다.

라라벨은 기본적으로 lang 폴더에 영어 관련 언어팩을 포함하고 있습니다.

다른 언어팩을 제공하려면 lang 폴더에 해당 언어로 json 파일을 생성해야합니다.

// lang/ko.json
{
  "Whoops!": "앗!",
  "Hello!": "안녕하세요!",
  "Reset Password Notification": "비밀번호 재설정 알림",
  "You are receiving this email because we received a password reset request for your account.": "귀하의 비밀번호 재설정 요청으로 인해 이 메일이 발송되었습니다.",
  "Reset Password": "비밀번호 재설정",
   // ...생략
}

언어팩을 제공하면 해당 언어에 맞게 메시지들이 변경되어 출력됩니다.

3. 예시

라라벨의 인증 템플릿을 사용하면 영어로된 인증메일을 수신할 수 있습니다.

인증관련 메일은 vendor/laravel/framework/src/Illuminate/Auth/Notifications 폴더에서 기본 인증 메일 관련 기능을 확인 할 수 있습니다.

  protected function buildMailMessage($url)
  {
      return (new MailMessage)
          ->subject(Lang::get('Reset Password Notification'))
          ->line(Lang::get('You are receiving this email because we received a password reset request for your account.'))
          ->action(Lang::get('Reset Password'), $url)
          ->line(Lang::get('This password reset link will expire in :count minutes.', ['count' => config('auth.passwords.'.config('auth.defaults.passwords').'.expire')]))
          ->line(Lang::get('If you did not request a password reset, no further action is required.'));
    }

기존에는 영어로 발송되던 메일이 한글로 전송되어 오는것을 확인 할 수 있습니다.

참고

• 라라벨 공식 문서

해당 글은 개인적인 경험에 의해 주관적으로 작성했습니다. 과제물 관련 코드는 포함되지 않습니다.

최근에 참여한 학습코스를 통해 협업을 할 기회가 생겼습니다.

이전 직장에서는 혼자서 개발하는 업무가 많았기 때문에 협업에 대한 경험이 전무했었는데요. 이번 기회를 통해 한 단계 성장할 수 있어서 매우 기뻤습니다.

글 작성 시점까지 총 두가지의 프론트엔드 구현과제를 달성했습니다.

첫 과제는 상품에 대한 페이지 컴포넌트들이고, 두번째 과제는 하나의 기능 컴포넌트를 구현하는 과제였습니다.

첫 과제의 경험

처음 과제를 받았을 때 조금은 당황스러웠습니다.

그 이유는 기존 직장에서의 업무량에 비해 해당 과제의 양이 충분히 혼자서도 시간내에 감당할 수 있을 만큼 상당히 적었습니다.

그래서 '과연 이 정도의 분량을 7명이서 분담하는게 가능할까? 오히려 분담을 하는게 더 어려운일이 아닐까?' 라는 생각들이 들었습니다.

게다가 협업에 대한 경험이 전무했던지라, 규칙들을 사전에 정의하고 작업에 들어가야한다는 사실을 알고있음에도 당췌 어떤 규칙을 정의해야하는지 몰라 막막했었습니다.

부딪혀보자

제가 결정한 방법은 '우선은 부딪혀보자' 였습니다.

우선은 구성원들에게 기존에 익숙했던 기술스택에 대해 물어보았고, 구성원들의 대다수에게 익숙한 기술 스택을 사용해 작업을 진행하기로 했습니다.

구성원들은 다수가 Styled-components에 대한 사용경험이 있었고, 모두가 React를 메인 스택으로 사용하고 있었습니다.

해당 과제는 Redux의 사용이 필수였는데요. 대다수가 관련 경험이 없기 때문에 저와 다른 구성원 1명이 해당 라이브러리를 사용하는 코드를 작성하기로 했습니다.

결과

이상하게 생각할수도 있지만 부딪혀 얻은 결과에 대해서는 상당히 만족하고 있습니다.

과제의 결과물 자체는 부족한 부분도 있지만, 과제 외적으로 얻은 경험들이 너무 많아서 결과물의 부족함에 대한 아쉬움은 전혀 없습니다.

특히 스스로의 부족함을 진단할 수 있어서 굉장히 좋았습니다.

개인적으로 협업에 대한 경험을 얘기할 때 코드 컨벤션이나 코드 리뷰 등 다양한 협업 관련 키워드들에 대해서는 들어봤기에, 프로젝트를 시작하면 자연스레 효율적인 프로세스로 일이 진행 될 줄 알았으나, 막상 프로젝트가 시작되니 전혀 떠오르지 않았습니다.

특히 처음에 컨벤션을 맞추자고 언급을 해주신 구성원이 있었음에도 불구하고, 놓치고 진행을 하게 되었습니다.

그런 미숙함을 가지고 만들어낸 최종 결과물치곤 제법 동작은 잘 했습니다만, 유지보수는 글쎄요... 아마 굉장히 힘들것 같습니다.

두번째는요?

두번째 과제는 상당히 발전한 협업 프로세스를 통해 진행되었습니다. 그리고 해당 결과물에 대한 만족도는 최상입니다!

어떤 방법을 사용했나요?

공유 문서를 작성했습니다!

미디어 컨텐츠를 통해 이런 모습으로 아이디어 회의를 진행하는 개발자들을 본적있나요?

프로젝트 시작 직후 Notion으로 공유문서를 만들었습니다.

저희가 공유 문서를 만든 목적은 명세분석 및 기획 이었는데요. 처음엔 해당 문서에 양식없이 각자가 생각하는 기능에 대한 설계를 마구잡이로 적기로 했습니다.

마인드 맵 처럼 아이디어를 모으는 단계인거지요!

그 후 중복되는 아이디어를 제거하고, 각 아이디어들을 자세하게 정리하여 결과적으로 꽤 괜찮은 명세 분석 문서를 얻게 되었습니다.

개발 환경을 통일했습니다!

개발을 할때는 환경세팅도 매우 중요한데요.

저희는 공유 문서를 작성하며 개발 환경에 대한 설정도 통일했습니다.

이후엔 코드 작성 스타일에 대한 규칙을 작성하여 모두가 공통된 환경에서 개발을 진행 할 수 있었습니다.

개발환경 및 코딩 스타일로 인해 발생할지도모를 문제점을 미리 제거한거지요! :)

이후의 프로세스에서는 Git 브랜치를 통해 프로젝트를 관리함으로써, 최종 결과물이 나오기까지의 모든과정이 원활하게 진행되었습니다.

두 번의 과제 간 주어진 시간이 많지 않았음에도 불구하고 협업 프로세스에 있어 많은 경험과 개인적인 발전을 이루었습니다.

현재는 진행해야할 과제가 꽤 남아있는데요.

이후의 프로젝트을 진행하면서도 기존에 진행했던 프로세스를 잊지않고 꾸준히 적용하고 발전시킬 계획입니다.

이번 협업 과제는 정말 너무너무 소중하고 값진 경험이었으며, 해당 코스 이후에도 다양한 프로젝트를 통해 협업을 할 기회가 많이 생긴다면 행복할것 같습니다. :)

해당 글의 주제 Laravel, Inertia를 활용한 React SSR 셋업

목표

• React를 모놀리스 방식으로 사용하여 서버와의 연결시간을 단축시키고 싶습니다.
• 인증관련 구현에 많은 시간을 빼앗기고 싶지 않기때문에 Laravel Breeze의 인증 스캐폴딩을 활용하려 합니다.
• 프론트엔드는 Inertia with React로 구성하여 SSR CSR의 장점을 모두 포함하려 합니다.

준비물

• Docker 또는 PHP와 Comperser (해당 글은 Docker를 활용했습니다.)

본격 셋업

해당 프로젝트는 m1칩을 사용하는 Mac에서 진행하고 있습니다.

1. Laravel 설치하기

라라벨 설치는 매우 쉽습니다. 라라벨 공식 문서를 참고하여 설치합니다.

작년 상반기까지만해도 Docker와 m1칩이 제대로 호환되지 않아 brew를 활용해 PHP를 직접 설치했던 기억이 있는데요. 해당 글을 작성하는 시점엔 Docker의 실리콘칩 버전이 정식으로 출시하였기 때문에 개인적으로는 Docker를 활용하는것이 제일 편한 세팅방법이라고 생각합니다.

2. Laravel Breeze!!

Laravel Breeze 설치시 인증관련 Model, View, Controller를 모두 수정하기 때문에 새프로젝트를 구성한 직후 설치해주는게 좋습니다.

해당 프로젝트에서 라라벨을 사용하려는 이유 중 하나가 Laravel Breeze 입니다.

Laravel Breeze는 회원가입, 로그인, 비밀번호 재설정, 이메일 확인, 비밀번호 확인과 같은 인증에 필요한 기본요소를 모두 갖추고 있는데요.

모델, 컨트롤러 외에도 React,Vue,Livewire,Blade 등 의 템플릿으로 프론트엔드의 스캐폴딩을 구성해주기 때문에 인증관련 구현에 시간을 거의 쓰지 않아도 됩니다.

Laravel Breeze가 제공하는 깔끔한 인터페이스. 😎

3. Inertia

Inertia는 SPA프레임워크를 서버와 함께 모놀리스 방식으로 사용할 수 있게 해주는 라이브러리입니다.

서버의 라우팅 방식을 그대로 사용하기때문에 별도의 API가 필요없으며, 서버와 SPA를 통째로 배포가능합니다.

또한 SSR를 지원합니다! 👍

Inertia 공식 문서를 따라 SSR 설정이 가능합니다.

** 하지만 !! **

아무래도 SSR에 대한 지원을 출시한지 얼마되지 않았기 때문에 현재는 React관련 이슈가 있습니다.

이슈 - SSR 설정시 React가 route를 찾기 못합니다. 🥲

그러나 위 이슈는 매우 간단한 과정을 통해 해결할 수 있으므로, 아래에 해결 방법을 공유합니다.

** React SSR 해결방법 **

route를 수동으로 추가하여 해결하는 방법입니다.

위에서 작성한 SSR을 포함한 셋업 과정을 모두 마치셨다면 app/Http/Middleware 경로에 HandleInertiaRequests.php 파일이 있을텐데요.

해당 파일의 share 함수를 아래와 같이 변경 해주어야합니다.

use Tightenco\Ziggy\Ziggy;

...

public function share(Request $request)
{
    $ziggy = new Ziggy($group = null, $request->url()); 
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'ziggy' => $ziggy->toArray()
    ]);
}

그 다음 resources/js/ssr.js 파일을 아래와 같이 변경해주세요.

import React from "react";
import ReactDOMServer from "react-dom/server";
import { createInertiaApp } from "@inertiajs/inertia-react";
import createServer from "@inertiajs/server";
import route from "ziggy-js";

createServer((page) =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        resolve: (name) => require(`./Pages/${name}`),
        setup: ({ App, props }) => {
            // route를 수동으로 추가합니다.
            const Ziggy = {
                ...props.initialPage.props.ziggy,
                location: new URL(props.initialPage.props.ziggy.url),
            };
            global.route = (name, params, absolute, config = Ziggy) =>
                route(name, params, absolute, config);
            return <App {...props} />;
        },
    })
);

mix && mix --mix-config=webpack.ssr.mix.js 명령어로 빌드를 새로해준 다음 node public/js/ssr.js 명령어로 서버를 재시작하면 해당 이슈가 해결이 된 것을 확인 할 수 있습니다.

자바스크립트 사용을 중지해도 렌더링 된 DOM를 볼 수 있습니다. 👍

참고

• Inertia Issues
• Using Ziggy with Inertia Server-Side Rendering

슬라이딩 퍼즐을 만들어보았습니다. 😀 상세 코드는 깃허브에서 확인하실 수 있습니다.

프로젝트 소개

• 슬라이딩 퍼즐 입니다.
• 이미지를 등록하여 퍼즐을 만들 수 있습니다.
• 등록한 이미지를 제거할 수 있습니다.
• 3x3, 4x4, 5x5 난이도를 선택할 수 있습니다.
• Reset 버튼을 통해 문제를 갱신할 수 있습니다.

어려웠던 점

처음에는 퍼즐에 사용될 요소들을 무작정 섞기만 하면 될 줄 알았습니다.

하지만 신나게 퍼즐을 풀다보니 도저히 풀 수 없는 녀석이 튀어나오더라구요 🥲

무슨 이유일까 궁금해서 검색을 해보니 슬라이딩 퍼즐에도 풀 수 있는 문제에 대한 조건이 있었습니다.

이 글은 해당 문제를 해결한 방법에 대해 작성했습니다.

슬라이드 퍼즐 알고리즘 해당 글을 보고 슬라이딩 퍼즐의 조건을 참고 했습니다.

변수

퍼즐을 풀수있는 조건을 알기 전에 각 변수에 대한 설명이 필요합니다.

1. inversion

inversion은 퍼즐의 변수를 1차원 배열로 초기화 했을때 요소 중 하나인 a와 a보다 뒤에있는 b를 비교했을 때 a>b가 참인 경우의 수를 말합니다.

즉, inversion을 세는 경우는 아래와 같습니다.

• a의 인덱스는 b의 인덱스보다 커야한다.
• a > b 가 참이다.

const puzzle = [1,2,3,4,5,9,6,7,8,10,12,11,13,14,15];

위의 경우 처럼 초기화 했을때

• 9는 뒤에 나오는 6,7,8 보다 크기 때문에 inversion을 3증가시킵니다.
• 12는 뒤에 나오는 11 보다 크기 때문에 inversion을 1증가시킵니다.
• 따라서 이 경우 inversion은 4입니다.

2. N

변수 N은 퍼즐의 너비입니다.

3x3 퍼즐의 경우 N은 3입니다. 4x4 퍼즐의 경우 N은 4입니다.

3. fromBottom

변수 fromBottom은 빈 타일이 바닥으로부터 얼마나 떨어져있는지를 나타냅니다.

• 퍼즐 A

퍼즐A의 경우 빈칸은 바닥으로부터 두 번째에 있습니다. 즉 fromBottom은 2입니다.

• 퍼즐 B 퍼즐B의 경우 빈칸은 바닥으로부터 네 번째에 있습니다. 즉 `fromBottom`은 `4`입니다.

조건

풀 수 있는 퍼즐인지 아닌지를 판단하기 위해서는 다음과 같은 조건들이 필요했습니다.

• N이 홀수이면 inversion수가 짝수여야 한다.
• N이 짝수이면 다음과 같은 경우 풀수 있다.
  • fromBottom이 짝수이며 inversion은 홀수이다.
  • fromBottom이 홀수이며 inversion은 짝수이다.
• 다른 모든 경우에는 퍼즐을 풀 수 없다.
  

위의 조건을 달성하기 위해 아래와 같은 resetPuzzle 함수를 작성했습니다.

// difficulty는 난이도별 퍼즐의 배열 초기값 입니다.
const resetPuzzle = useCallback((difficulty) => {
    let ok = false;
    let randomSet;
      // 풀 수 있는 퍼즐이 나올때까지 반복합니다.
    while (!ok) {
      let inversion = 0;
      // 퍼즐을 랜덤하게 섞습니다.
      randomSet = difficulty.tiles.sort(() => Math.random() - Math.random());
      // 각 퍼즐의 순서를 따라가며 inversion을 증가시킵니다.
      randomSet.forEach((item, index) => {
        for (let i = index; i < randomSet.length; i++) {
          if (item > randomSet[i]) {
            inversion++;
          }
        }
      });
      // difficulti.cut은 퍼즐의 너비입니다.
      const N = difficulty.cut;
      if (N % 2 !== 0) {
          // N이 홀수일때
        if (inversion % 2 === 0) {
          // inversion이 짝수이기 때문에 풀수있다.
          ok = true;
        }
      } else {
        // N이 짝수일때
        const fromBottom =
          difficulty.cut - Math.floor(randomSet.indexOf(EMPTY_TILE) / 4);
        // fromBottom이 짝수이고 inversion이 홀수이면 풀수있다.
        if (fromBottom % 2 === 0 && inversion % 2 !== 0) {
          ok = true;
        }
        // fromBottom이 홀수이고 inversion이 짝수이면 풀수있다.
        if (fromBottom % 2 !== 0 && inversion % 2 === 0) {
          ok = true;
        }
      }
    }
    return randomSet;
  }, []);

위와 같은 코드를 통해 풀 수 있는 퍼즐만 표시 할 수 있게 되었습니다. 😀

해당 글은 AutoComplete 컴포넌트에 대해서만 작성했습니다.

지난 글 보러가기 - Modal 컴포넌트

상세코드는 깃허브 에서 열람하실 수 있습니다.

AutoComplete

W3C - Combobox With List Autocomplete Example 위 예시를 참고하여 자동완성을 구현하기 위한 사항들을 아래와 같이 정리했습니다.

• 비어있는 input에서 아래 방향키로 리스트를 열 수 있어야 한다.
• 비어있는 input에서 아래 방향키를 눌렀을시 리스트의 첫아이템으로 포커스가 이동해야 한다.
• 상하 방향키로 리스트를 탐색할 수 있어야 한다.
• Escape 키를 눌렀을시 input의 내용이 삭제되고 리스트가 닫혀야 한다.

1. 키보드 이벤트 할당하기

const inputRef = useRef();
const liRefs = useRef([]);

const focusOnInput = () => {
  if (inputRef.current) {
    inputRef.current.focus();
  }
};

const onListClick = (item) => {
  setKeyword(item);
  setOpen(false);
  focusOnInput();
};

const ARROW_DOWN = "ArrowDown";
const ARROW_UP = "ArrowUp";
const ESCAPE = "Escape";

const onInputkeyDown = (event) => {
  if (event.key === ARROW_DOWN) {
    setOpen(true);
    const first = liRefs.current[0];
    if (first) {
      first.focus();
    }
  }
  if (event.key === ESCAPE) {
    setOpen(false);
  }
};

const onListKeyDown = (event, index) => {
  const next = liRefs.current[index + 1];
  const prev = liRefs.current[index - 1];
  const first = liRefs.current[0];
  const last = liRefs.current[liRefs.current.length - 1];
  if (event.key === ARROW_DOWN) {
    event.preventDefault();
    if (next) {
      next.focus();
    } else {
      first && first.focus();
    }
  }
  if (event.key === ARROW_UP) {
    event.preventDefault();
    if (prev) {
      prev.focus();
    } else {
      last && last.focus();
    }
  }
  if (event.key === ESCAPE) {
    setKeyword("");
    if (inputRef.current) {
      focusOnInput();
    }
    setOpen(false);
  }
};

input 요소와 ul요소에 스크린리더에서 필요한 aira 속성들을 작성해주었습니다. input 요소의 경우 autocomplete 속성은 aria에 해당하는 속성은 아니지만 브라우저가 기본으로 제공하는 자동완성 기능과 혼동될 수 있기에 off로 설정해주었습니다.

<form className="relative" onSubmit={onSubmit} ref={formRef}>
  <input
    ref={inputRef}
    type="search"
    className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
    placeholder={placeholder}
    value={keyword}
    onChange={keywordChange}
    onFocus={inputFocus}
    onKeyDown={onInputkeyDown}
    role="combobox"
    aria-autocomplete="list"
    aria-expanded={list.length > 0 && open ? "true" : "false"}
    autoComplete="off"
    />

  {list.length > 0 && open && (
    <ul
      ref={ulRef}
      role="list"
      className={`${
      absolute ? "absolute" : "static"
                } origin-top-left left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none max-h-80 overflow-y-auto`}
      >
      {list.map((item, index) => (
        <li key={index} role="option" aria-selected={keyword === item}>
          <button
            ref={(el) => (liRefs.current[index] = el)}
            type="button"
            className="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-50 focus:outline-none"
            onClick={() => {
              onListClick(item);
            }}
            onKeyDown={(event) => {
              onListKeyDown(event, index);
            }}
            >
            {item}
          </button>
        </li>
      ))}
    </ul>
  )}
</form>

리스트는 포커스가 가능하도록 button요소를 li태그 내에 작성했습니다. button 요소를 사용하는대신 tabindex 속성을 li요소에 작성할수도 있습니다.

각 button 요소는 keyword가 변경될 시 liRefs.current를 빈 배열로 초기화 시켜준 후 레퍼런스를 동적으로 할당시켜주었습니다.

useEffect(() => {
  liRefs.current = [];
  if (!keyword.trim()) {
    setList(data);
    return;
  }
  const newList = data.filter(
    (item) => item.toLowerCase().indexOf(keyword.toLowerCase()) >= 0
  );
  setList(newList);
}, [keyword, data]);

<button ref={(el) => (liRefs.current[index] = el)} //...생략 />

위 코드들을 통해 input과 li 요소 간 키보드를 사용한 접근이 가능해졌습니다.

2. 포커스 아웃 감지하기

const formRef = useRef();
const ulRef = useRef();

const trackFocus = useCallback(
    (event) => {
      if (event.target.offsetParent !== formRef.current) {
        setOpen(false);
      }
    },
    [setOpen, formRef]
  );

const trackKey = useCallback(() => {
  setTimeout(() => {
    if (
      document.activeElement.offsetParent !== formRef.current &&
      document.activeElement.offsetParent !== ulRef.current
    ) {
      setOpen(false);
    }
  });
}, [setOpen, ulRef]);

useEffect(() => {
  document.addEventListener("click", trackFocus);
  document.addEventListener("keydown", trackKey);
  return () => {
    document.removeEventListener("click", trackFocus);
    document.removeEventListener("keydown", trackKey);
  };
}, [trackFocus, trackKey]);

trackFocus와 trackKey 함수를 작성했습니다. 전자의 경우 마우스 사용자를 위해 작성된 함수로써 전체요소를 감싸는form 요소 외부에 포커스가 위치할시 리스트를 닫아줍니다.

후자의 경우 키보드 사용자를 위해 작성된 전자와 같은 동작을하는 함수입니다. 해당 함수에서 setTimeout을 사용하는 이유는 keydown 이벤트의 동작이 document.activeElement를 찾는 동작보다 더 앞서 발생하기 때문에 비동기적으로 처리해주어야 keydown 이벤트의 동작이 끝난 후 현재 포커스된 요소를 찾아줍니다.

위와 같은 방법을 통해 키보드 사용자와 마우스 사용자 모두 불편함 없이 자동완성 컴포넌트를 사용할수있게 되었습니다. 😄

원티드 프론트엔드 프리온보딩 코스(취업연계)에 지원했습니다. 구현 과제를 달성하며 해결하려 했던 문제들에 대해 이야기를 하고자합니다.

해당 글은 Modal 컴포넌트에 대해서만 작성했습니다.

구현 과제

• Toggle
• Modal (해당 글의 주제)
• Tab
• Tag
• AutoComplete
• ClickToEdit

가이드라인에서는 위 컴포넌트 중 2가지 이상만 구현해도 좋다고했으나, 그 이상을 구현할 경우 가산점이 붙는다고하여 모두 제작하게 되었습니다.

상세코드는 깃허브 에서 열람하실 수 있습니다.

구현범위가 어디까지인가요?

구현 과제 가이드라인에서는 예시 GIF를 제공해줬지만 GIF만으로는 정확한 구현 범위를 알기가 힘들었습니다. 하여, 기존에 자주 사용하던 라이브러리를 참고하여 최대한 웹접근성을 지키는 방향으로 충실히 구현하고자 했습니다.

Modal

W3C - Modal Dialog Example 위 예시를 참고하여 모달을 구현하기 위한 사항들을 아래와 같이 정리했습니다.

• 대화 상자가 화면의 100%를 채워야한다.
• 일부 모바일 장치에서 발생하는 배경 움직임을 숨겨야한다.
• 포커스는 대화 상자내에서만 이동해야한다.
• 대화 상자를 숨기면 기존에 대화 상자를 호출했던 버튼으로 포커스가 이동해야한다.
• Escape 키를 통해 대화 상자를 닫아야한다.

아래에서 설명하는 방법들을 통해 해당 사항을 구현했습니다.

1. 포커스 가능한 요소들 정하기

const [prevActiveEl, setPrevActiveEl] = useState();
const closeBtn = useRef();
const [lastFocusableEl, setLastFocusableEl] = useState();
const contentRef = useRef();

const setLastFocus = useCallback(() => {
  const focusableEls = [
    ...contentRef.current.querySelectorAll(
      'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
    ),
  ].filter(
    (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
  );
  const lastEl = focusableEls[focusableEls.length - 1];
  if (lastEl) {
    setLastFocusableEl(lastEl);
  }
}, [contentRef]);

useEffect(() => {
  if (open && closeBtn.current) {
    setPrevActiveEl(document.activeElement);
    closeBtn.current.focus();
  }
  if (open && contentRef.current) {
    setLastFocus();
  }
}, [open, contentRef]);

제가 만든 모달은 useState를 사용하는 변수 open을 통해 열리고 닫히는데요. open이 false일 때 모달요소가 렌더링 되는것을 방지하기 위해 open이 true인 경우에만 Modal 컴포넌트를 렌더링하도록 했습니다.

때문에 open이 false일 때는 contentRef.current가 존재하지 않습니다.

contentRef는 모달내 콘텐츠를 감싸는 요소인데요.

<div ref={contentRef}>{children}</div>

open이 true일 때 setLastFocus를 통해 포커스가 가능한 모든 요소를 탐색하고 해당 요소 중 마지막 요소를 lastFocusableEl에 저장해주었습니다.

그리고 prevActiveEl에 모달이 열리기전 마지막으로 접근했던 요소를 저장해주고 closeBtn.current로 포커스를 이동시켰습니다.

closeBtn.current는 닫기 버튼인데요. 모달이 열린 후 바로 닫기 버튼으로 포커스를 이동시키는는 이유는 키보드를 사용하는 사용자가 오접근하게될시 닫기버튼으로 빠르게 이동시켜주는 것이 중요하기 때문입니다.

if (prevActiveEl) {
  prevActiveEl.focus();
}

모달이 닫힐 때는 prevActiveEl을 활용하여 처음 모달을 호출했던 버튼으로 포커스를 이동시켜주었습니다.

2. 포커스트랩 배치하기

const focusTrapHead = useRef();
const focusTrapFoot = useRef();

const focusLastEl = useCallback(
  (event) => {
    if (event.target === focusTrapHead.current) {
      if (lastFocusableEl) {
        lastFocusableEl.focus();
      } else {
        closeBtn.current.focus();
      }
    }
  },
  [focusTrapHead, lastFocusableEl]
);

const focusFirstEl = useCallback(
  (event) => {
    if (event.target === focusTrapFoot.current) {
      closeBtn.current.focus();
    }
  },
  [focusTrapFoot]
);

useEffect(() => {
  const focusHead = focusTrapHead.current;
  const focusFoot = focusTrapFoot.current;
  if (focusHead) {
    focusHead.addEventListener("focusin", focusLastEl);
  }
  if (focusFoot) {
    focusFoot.addEventListener("focusin", focusFirstEl);
  }
  return () => {
    if (focusFoot) {
      focusFoot.removeEventListener("focusin", focusLastEl);
    }
    if (focusHead) {
      focusHead.removeEventListener("focusin", focusFirstEl);
    }
  };
}, [focusTrapHead, focusTrapFoot, open, focusFirstEl, focusLastEl]);

모달내에서 포커스가 빠져나가지 못하게하려면 포커스트랩의 배치도 중요합니다.

저는 focusTrapHead와 focusTrapFoot 두개를 만들어 각각 다이얼로그 요소내의 최상단과 최하단에 위치시켰습니다.

Tab키를 사용해 포커스 이동시 순차적으로 이동하기 때문에 최상단과 최하단에 배치하는것이 좋다고 생각했습니다.

<div
  ref={focusTrapHead}
  tabIndex={0}
  className="fixed bg-transparent -top-10"
  style={focusTrapStyle}
  />
<button
  ref={closeBtn}
  type="button"
  className="rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
  onClick={() => setOpen(false)}
  >

  // ...생략

  <div ref={contentRef}>{children}</div>
  <div
    ref={focusTrapFoot}
    tabIndex={0}
    className="fixed bg-transparent -top-10"
    style={focusTrapStyle}
    />

focusTrapHead와 focusTrapFoot 두 요소 모두 tabIndex를 0으로 두어 포커스가 가능합니다.

각 트랩으로 이동시 focusTrapHead는 마지막요소 또는 닫기 버튼으로 이동시켜주고 focusTrapFoot은 최상단트랩의 다음 요소인 닫기 버튼으로 이동시켜주어 포커스가 모달의 외부로 빠져나가지 않게 도와줍니다.

위와 같은 방법을 통해 모달 내의 포커스를 유지 할 수 있었으며, 키보드를 사용하는 유저들도 불편함 없이 모달 컴포넌트를 사용할수있게 되었습니다. 😃