shadcn DropdownMenu 사용할 때 스크롤바 없어지는 현상 해결하는 방법

저 다크모드 버튼을 클릭하기 전과 후에 스크롤바가 있다 없다 해서 생기는 레이아웃 변경 현상이 매우 신경쓰였는데, 다른 사람들에게 보여주니 같은 말을 한다..! 고쳐야겠다고 생각했다.

해결 방법은 modal 속성을 false로 설정하는 것이다.

'use client';

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Moon, Sun } from 'lucide-react';
import { useTheme } from 'next-themes';

import { Button } from '../ui/button';

const ColorModeButton = () => {
    const { setTheme } = useTheme();

    return (
        <DropdownMenu modal={false}>
            <DropdownMenuTrigger asChild>
                <Button size="icon" className="rounded-full shadow-lg">
                    <Sun size={22} className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                    <Moon size={22} className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                    <span className="sr-only">Toggle theme</span>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setTheme('light')}>밝게</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme('dark')}>어둡게</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme('system')}>시스템 설정</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
};

export default ColorModeButton;

radix 문서에서 modality 라는 단어를 본 기억이 있어서 찾아보니 이 스크롤바 문제와 관련이 있었다.

The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.

드롭다운 메뉴의 모달성입니다. true로 설정하면 외부 요소와의 상호 작용이 비활성화되고 메뉴 콘텐츠만 스크린 리더에 표시됩니다.

modal의 기본값은 true이기 때문에 클릭시 외부 요소와 상호 작용할 수 없도록 스크롤바가 사라진다.

---

modal={true}인 상태에서 버튼을 토글할 때 변화하는 속성

(드롭다운 클릭 전)

(드롭다운 클릭 후)

DOM 속성에서 보듯이 라이브러리 자체에서 스크롤에 락을 거는 것을 확인할 수 있다. 라이브러리를 까보면 react-remove-scroll을 사용하고 있다고 한다.

레딧 - Radix data-scroll-locked