4. 사이드바 모달

lucide-react icons 설치

➡️ https://lucide.dev/

$ npm install lucide-react

 

package.json 에 추가 완료됨.

 

jsx 파일에 import 해서 사용.

import { '사용할 아이콘' } from "lucide-react";

 

---

 

• 토글 1개 → 2개

...
const [isModalOpen, setIsModalOpen] = useState(false);
...
<MainModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />

⬇️⬇️⬇️

...
const [isMainModalOpen, setIsMainModalOpen] = useState(false);
const [isBookmarkModalOpen, setIsBookmarkModalOpen] = useState(false);
...
<MainModal
        isOpen={isMainModalOpen}
        onClose={() => setIsMainModalOpen(false)}
      />
      <BookmarkModal
        isOpen={isBookmarkModalOpen}
        onClose={() => setIsBookmarkModalOpen(false)}
      />

 

 

• 한쪽 모달 열릴 때 다른 쪽 모달 닫히기 (동시에 열리기 방지)

 const toggleMainModal = () => {
    setIsMainModalOpen((prev) => !prev);
    setIsBookmarkModalOpen(false);
  };

  const toggleBookmarkModal = () => {
    setIsBookmarkModalOpen((prev) => !prev);
    setIsMainModalOpen(false);
  };

---

혹시 Tailwindcss 기본 단위 외에 더 세밀하게 조정하고 싶으면,
className="w-[00rem]"으로 설정

//검색창 너비 조정
className="w-[27rem] p-2 rounded-md border border-gray-300 focus:border-vintagePink focus:ring-vintagePink focus:ring-1 focus:outline-none"