refactor: modal 역할별 리팩토링

app/(site)/@modal/(.)i/image/[...info]/page.tsx

@@ -1,7 +1,7 @@
 import { MovieImageModal } from '@/entities/modal'
 
 type Props = {
-  params: { info: [string, 'poster' | 'backdrop', string] }
+  params: { info: [movieId: string, 'poster' | 'backdrop', imageUrl: string] }
 }
 
 export default function Page({ params }: Props) {

src/entities/modal/MovieDetailModal.tsx

@@ -11,12 +11,10 @@ type Props = {
 
 export function MovieDetailModal({ movieId }: Props) {
   return (
-    <Modal>
-      <Modal.Content>
-        <Suspense fallback={<MovieDetailContentSkeleton />}>
-          <MovieDetailContent movieId={movieId} />
-        </Suspense>
-      </Modal.Content>
+    <Modal isClose>
+      <Suspense fallback={<MovieDetailContentSkeleton />}>
+        <MovieDetailContent movieId={movieId} />
+      </Suspense>
     </Modal>
   )
 }

src/entities/modal/MovieImageModal.tsx

@@ -23,22 +23,18 @@ export function MovieImageModal({ imageUrl, imageType, movieId }: Props) {
     },
   }
 
+  const imageSrc =
+    imageType === 'backdrop'
+      ? getImageUrl(imageType, '/' + imageUrl, 'w1280')
+      : getImageUrl(imageType, '/' + imageUrl, 'w500')
+
+  console.log(imageSrc)
+
   return (
     <Modal>
-      <Modal.Content>
-        <div className={styles.container}>
-          <Image
-            src={
-              imageType === 'backdrop'
-                ? getImageUrl('backdrop', '/' + imageUrl, 'w1280')
-                : getImageUrl('poster', '/' + imageUrl, 'w500')
-            }
-            alt={movieId + imageType}
-            width={size[imageType].width}
-            height={size[imageType].height}
-          />
-        </div>
-      </Modal.Content>
+      <div className={styles.container}>
+        <Image src={imageSrc} alt={movieId + imageType} width={size[imageType].width} height={size[imageType].height} />
+      </div>
     </Modal>
   )
 }

src/entities/modal/SignInModal.tsx

@@ -1,9 +1,5 @@
 import { Modal } from '@/shared/ui'
 
 export function SignInModal() {
-  return (
-    <Modal>
-      <Modal.Content></Modal.Content>
-    </Modal>
-  )
+  return <Modal></Modal>
 }

src/entities/modal/SignUpModal.tsx

@@ -1,9 +1,5 @@
 import { Modal } from '@/shared/ui'
 
 export function SignUpModal() {
-  return (
-    <Modal>
-      <Modal.Content></Modal.Content>
-    </Modal>
-  )
+  return <Modal></Modal>
 }

src/shared/hook/index.ts

@@ -1 +1,3 @@
+export { useBlockScroll } from './use-block-scroll'
 export { useDragHandler } from './use-drag-handler'
+export { useHistoryBack } from './use-history-back'

src/shared/hook/use-block-scroll.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect } from 'react'
 
 export function useBlockScroll() {

src/shared/hook/use-history-back.ts

@@ -0,0 +1,20 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+import { SITE_PATH } from '@/shared/constants'
+
+export function useHistoryBack() {
+  const router = useRouter()
+  const history = typeof window !== 'undefined' ? window.history : []
+
+  const onClickBack = () => {
+    if (history.length) {
+      router.back()
+    } else {
+      router.push(SITE_PATH.home, { scroll: true })
+    }
+  }
+
+  return { onClickBack }
+}

src/shared/ui/CloseButton.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import Image from 'next/image'
+
+import { useHistoryBack } from '@/shared/hook'
+import styles from '@/shared/ui/close-button.module.scss'
+
+export function CloseButton() {
+  const { onClickBack } = useHistoryBack()
+  return (
+    <Image
+      onClick={onClickBack}
+      className={styles.closeButton}
+      width={50}
+      height={50}
+      src="/svg/close.svg"
+      alt="닫기 버튼"
+    />
+  )
+}

src/shared/ui/Modal.tsx

@@ -1,60 +1,23 @@
-'use client'
+import { PropsWithChildren } from 'react'
 
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import { PropsWithChildren, useEffect } from 'react'
-
-import { SITE_PATH } from '@/shared/constants'
 import RQProvider from '@/shared/lib/react-query/RQProvider'
-import { getScrollbarWidth } from '@/shared/lib/util'
+import { CloseButton } from '@/shared/ui/CloseButton'
+import { ModalBackGround } from '@/shared/ui/ModalBackGround'
 
 import styles from './modal.module.scss'
 
-function Content({ children }: PropsWithChildren) {
-  const onInnerClick = (e: React.MouseEvent) => {
-    e.stopPropagation()
-  }
-
-  return (
-    <div onClick={onInnerClick} className={styles.modalContent}>
-      {children}
-    </div>
-  )
+type Props = {
+  isClose?: boolean
 }
 
-function ModalBackGround({ children }: Readonly<PropsWithChildren>) {
-  const router = useRouter()
-  const history = typeof window !== 'undefined' ? window.history : []
-
-  useEffect(() => {
-    const width = getScrollbarWidth()
-
-    if (Object.is(width, undefined)) return
-
-    document.body.style.overflow = 'hidden'
-    document.body.style.marginRight = `${width}px`
-    return () => {
-      document.body.style.overflow = 'auto'
-      document.body.style.marginRight = '0px'
-    }
-  }, [])
-
-  const onClickBack = () => {
-    if (history.length) {
-      router.back()
-    } else {
-      router.push(SITE_PATH.home, { scroll: true })
-    }
-  }
-
+export function Modal({ children, isClose = false }: Readonly<PropsWithChildren<Props>>) {
   return (
-    <RQProvider>
-      <button className={styles.container} onClick={onClickBack}>
-        <Image className={styles.closeButton} src="/public/svg/close.svg" alt="닫기 버튼" />
-        {children}
-      </button>
-    </RQProvider>
+    <section className={styles.container}>
+      <ModalBackGround />
+      {isClose && <CloseButton />}
+      <RQProvider>
+        <div className={styles.content}>{children}</div>
+      </RQProvider>
+    </section>
   )
 }
-
-export const Modal = Object.assign(ModalBackGround, { Content })

src/shared/ui/ModalBackGround.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { useBlockScroll, useHistoryBack } from '@/shared/hook'
+import styles from '@/shared/ui/modal.module.scss'
+
+export function ModalBackGround() {
+  useBlockScroll()
+  const { onClickBack } = useHistoryBack()
+
+  return <div onClick={onClickBack} className={styles.background} />
+}

src/shared/ui/close-button.module.scss

@@ -0,0 +1,9 @@
+.closeButton {
+  cursor: pointer;
+  z-index: 9990;
+  width: 80px;
+  height: 80px;
+  position: absolute;
+  top: 5%;
+  right: 5%;
+}

src/shared/ui/modal.module.scss

@@ -1,32 +1,34 @@
 .container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9990;
+  width: 100%;
+  height: 100dvh;
+}
+
+.background {
   cursor: pointer;
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 9999;
+  z-index: 9000;
   background: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100dvh;
 }
 
-.modalContent {
+.content {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -60%);
+  z-index: 9991;
+  transform: translate(-50%, -50%);
   width: 700px;
-  height: 400px;
+  height: fit-content;
+  min-height: 400px;
   border-radius: 20px;
   border: 2px solid #fffffe;
   padding: 20px;
   background: #101820;
-}
-
-.closeButton {
-  z-index: 9990;
-  width: 80px;
-  height: 80px;
-  position: absolute;
-  top: 5%;
-  right: 5%;
-}
+}

src/widgets/detail/DetailBottomSection.tsx

@@ -9,10 +9,8 @@ type Props = {
 export function DetailBottomSection({ movieId }: Props) {
   return (
     <section>
-      <Suspense>
+      <Suspense fallback={null}>
         <MovieImagesSlide movieId={movieId} />
-      </Suspense>
-      <Suspense>
         <MovieContentForm movieId={movieId} />
       </Suspense>
     </section>