nextjs shadcn/ui 에서 미디어쿼리 작업하기

 

반응형 웹사이트 제작은 이제 그냥 필수이다. 미디어쿼리 작업을 할 때 항상 브레이크 포인트를 잡는 것이 애매하다라고 생각하는데

우선은 768px 최소로 했을 경우를 두고 작업에 들어갔다. 

 

shadcn/ui 이란?

Radix UI 및 Tailwind CSS를 사용하여 구축된 재사용 가능한 컴포넌트. 컴포넌트 라이브러리가 아닌 앱에 copy and paste 하여 재사용 가능한 구성요소 모음이다. npm install 을 하여 종속성 설치를 하지 않는다는 이야기다. tailwind css를 기반으로 하고 있다. 커스텀을 할 땐 tailwind css 법칙을 따르면 된다. 

 

사용하기 위해서는 Nextjs , tailwind css 가 설치되어있어야한다. 

다 각설하고 shadcn/ui를 쓰면서 미디어쿼리 작업을 하려면 일일히 css를 건드는 것보다는 조금 간편한 방법이 있다

 

 

 

1. shadcn/ui에서 제공하는 hook 사용하기

 

아래는 shadcn/ui가 제공하는 깃헙이다. 이곳에서 각종 ui 코드를 확인할 수 있다. 

use-media-query 파일을 그대로 복사해서 자신이 하고 있는 프로젝트로 붙여넣는다. 

 

https://github.com/shadcn-ui/ui/blob/main/apps/www/hooks/use-media-query.tsx

ui/apps/www/hooks/use-media-query.tsx at main · shadcn-ui/ui

 

 

2. 반응형 메뉴를 만들어보자.

"use client";

import { useMediaQuery } from "@/hooks/use-media-query";

// 모바일 버젼일 때 나와야할 drawer 
import { Drawer, DrawerContent, DrawerTrigger } from "./ui/drawer";

// 기존의 메뉴
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
} from "@/components/ui/navigation-menu";
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
import Link from "next/link";
import { Menu } from "lucide-react";

const MainMenu = () => {
  const isDesktop = useMediaQuery("(min-width: 768px)");

  const menuList: { title: string; href: string }[] = [
.....
  ];

  const menuDisplay = (menuList: any[]) => {
    return (
 .......
    );
  };

  return (
    <div className="flex h-50 justify-between">
..................
    </div>
  );
};

export default MainMenu;

 

복붙했던 useMediaQuery를 호출해서 그 안에 매개변수로 원하는 수치를 넣어준다

 

 

const isDesktop = useMediaQuery("(min-width: 768px)");

 

 

 

 

3. 정해진 범위가 필요한 곳에 넣어서 적용하자

  return (
    <div className="flex h-50 justify-between">
      <div className="flex items-center p-5">
        <Link href="/" className="flex z-40 font-semibold">
          Logo
        </Link>
      </div>
      ////////////// 여기요오오오오 
      {isDesktop ? (
        <div className="flex gap-6">
          <NavigationMenu>
            <NavigationMenuList>{menuDisplay(menuList)}</NavigationMenuList>
          </NavigationMenu>
        </div>
      ) : (
        <div className="flex p-1">
          <Drawer direction="right">
            <DrawerTrigger>
              <Menu />
            </DrawerTrigger>
            <DrawerContent>
              <NavigationMenu orientation="vertical" className="items-start">
                <NavigationMenuList className="h-full flex-col items-start space-x-0">
                  {menuDisplay(menuList)}
                </NavigationMenuList>
              </NavigationMenu>
            </DrawerContent>
          </Drawer>
        </div>
      )}
    </div>
  );

 

 

drawer은  클릭시에 옆이나 아래에서 쓰윽 - 하고 나타나는 팝업창같은 걸 이야기하는데 서랍열듯이~ 아래와 같은 ui이다.

 

 

isDesktop이면 일반 header에 붙는 메뉴가 나오고, 아니면 drawer이 나오게 했다. 

간단하지욥? 

다음에는 drawer 방향을 전환하는 방법을 공유하겠음!