[Feat/modal]: 메인페이지 모달 중복 에러 수정 및 페이지 이동 시 모달 닫힘 기능 구현

src/app/bookshelf/page.tsx

@@ -27,7 +27,7 @@ import Image from "next/image";
 
 export default function Dnd() {
   const { toRead, reading, done, setItems } = useLikedBookStore();
-  const { isOpen, data } = useModalStore();
+  const { isOpen } = useModalStore();
   const [activeId, setActiveId] = useState<string | null>(null);
   const [isOutside, setIsOutside] = useState<boolean>(false);
 
@@ -91,7 +91,7 @@ export default function Dnd() {
           ) : null}
         </DragOverlay>
 
-        {isOpen && data && <Modal />}
+        {isOpen && <Modal />}
       </DndContext>
     </article>
   );

src/app/components/home/Carousel.tsx

@@ -6,8 +6,14 @@ import Modal from "../modal/Modal";
 
 import { Book } from "@/types/common";
 
-export default function Carousel({ books }: { books: Book[] }) {
-  const { isOpen, openModalWithData, data } = useModalStore();
+export default function Carousel({
+  books,
+  isModal,
+}: {
+  books: Book[];
+  isModal: boolean;
+}) {
+  const { isOpen, openModalWithData } = useModalStore();
 
   return (
     <section className="group relative z-0 flex h-[213px] w-full items-center overflow-hidden border-2 border-neutral-200">
@@ -49,7 +55,7 @@ export default function Carousel({ books }: { books: Book[] }) {
           );
         })}
       </div>
-      {data && isOpen && <Modal />}
+      {isOpen && isModal && <Modal />}
     </section>
   );
 }

src/app/components/modal/Modal.tsx

@@ -14,9 +14,6 @@ export default function Modal() {
   const { closeModal, data, isBookMark } = useModalStore();
 
   useEffect(() => {
-    // const body = document.body as HTMLBodyElement;
-    // body.classList.add("modal-open");
-
     const handlePopState = () => {
       closeModal();
     };
@@ -25,7 +22,7 @@ export default function Modal() {
     useScrollLock.enable(); // 스크롤 잠김
     return () => {
       useScrollLock.disable(); // 스크롤 잠김 해제
-      // body.classList.remove("modal-open");
+      closeModal(); // 뒤로가기 or 앞으로가기 시 모달 닫기
     };
   }, []);
 
@@ -41,8 +38,6 @@ export default function Modal() {
   ];
 
   return createPortal(
-    // <>
-    //   {data && (
     <div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-black bg-opacity-50">
       <div className="relative flex w-[600px] flex-col justify-start gap-7 border-2 border-black bg-white p-16 drop-shadow-black">
         <Image
@@ -91,8 +86,6 @@ export default function Modal() {
         )}
       </div>
     </div>,
-    //   )}
-    // </>,
     document.querySelector("#global-modal") as HTMLDivElement,
   );
 }

src/app/page.tsx

@@ -21,12 +21,12 @@ export default async function Home() {
           <h1 className="text-2xl font-bold">오늘의 주제</h1>
           <h3 className="text-xl font-semibold">{topics[randomIndex]}</h3>
         </div>
-        <Carousel books={bookData.topic} />
+        <Carousel books={bookData.topic} isModal={true} />
         <div className="flex items-center gap-7">
           <h1 className="text-2xl font-bold">오늘의 작가</h1>
           <h3 className="text-xl font-semibold">{authors[randomIndex]}</h3>
         </div>
-        <Carousel books={bookData.author} />
+        <Carousel books={bookData.author} isModal={false} />
       </div>
     </main>
   );

src/data/topics.ts

@@ -1,15 +1,15 @@
 const topics = [
   "미래",
   "심리",
-  "역사",
+  "인공지능",
   "자기계발",
-  "동화",
+  "코딩",
   "철학",
   "여행",
   "건강",
   "환경",
   "요리",
-  "신기술",
+  "잠",
   "예술",
   "습관",
   "건축",