From c9a626ca9ef5dd3d0ff6a647645b472280eb76e0 Mon Sep 17 00:00:00 2001
From: Ji Hyeong Lee <115636461+Jihyeong00@users.noreply.github.com>
Date: Thu, 16 May 2024 20:49:09 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20modal=20=EC=97=AD=ED=95=A0=EB=B3=84?=
 =?UTF-8?q?=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../@modal/(.)i/image/[...info]/page.tsx      |  2 +-
 src/entities/modal/MovieDetailModal.tsx       | 10 ++-
 src/entities/modal/MovieImageModal.tsx        | 24 +++----
 src/entities/modal/SignInModal.tsx            |  6 +-
 src/entities/modal/SignUpModal.tsx            |  6 +-
 src/shared/hook/index.ts                      |  2 +
 src/shared/hook/use-block-scroll.ts           |  2 +
 src/shared/hook/use-history-back.ts           | 20 ++++++
 src/shared/ui/CloseButton.tsx                 | 20 ++++++
 src/shared/ui/Modal.tsx                       | 63 ++++---------------
 src/shared/ui/ModalBackGround.tsx             | 11 ++++
 src/shared/ui/close-button.module.scss        |  9 +++
 src/shared/ui/modal.module.scss               | 30 ++++-----
 src/widgets/detail/DetailBottomSection.tsx    |  4 +-
 14 files changed, 111 insertions(+), 98 deletions(-)
 create mode 100644 src/shared/hook/use-history-back.ts
 create mode 100644 src/shared/ui/CloseButton.tsx
 create mode 100644 src/shared/ui/ModalBackGround.tsx
 create mode 100644 src/shared/ui/close-button.module.scss

diff --git a/app/(site)/@modal/(.)i/image/[...info]/page.tsx b/app/(site)/@modal/(.)i/image/[...info]/page.tsx
index 18d90bb..a64adaf 100644
--- a/app/(site)/@modal/(.)i/image/[...info]/page.tsx
+++ b/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) {
diff --git a/src/entities/modal/MovieDetailModal.tsx b/src/entities/modal/MovieDetailModal.tsx
index 37b2e04..1cb47d8 100644
--- a/src/entities/modal/MovieDetailModal.tsx
+++ b/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>
   )
 }
diff --git a/src/entities/modal/MovieImageModal.tsx b/src/entities/modal/MovieImageModal.tsx
index d6af831..ff194e6 100644
--- a/src/entities/modal/MovieImageModal.tsx
+++ b/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>
   )
 }
diff --git a/src/entities/modal/SignInModal.tsx b/src/entities/modal/SignInModal.tsx
index c8e4a17..2052f31 100644
--- a/src/entities/modal/SignInModal.tsx
+++ b/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>
 }
diff --git a/src/entities/modal/SignUpModal.tsx b/src/entities/modal/SignUpModal.tsx
index ffb51d8..abc870d 100644
--- a/src/entities/modal/SignUpModal.tsx
+++ b/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>
 }
diff --git a/src/shared/hook/index.ts b/src/shared/hook/index.ts
index a14ace6..329c44f 100644
--- a/src/shared/hook/index.ts
+++ b/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'
diff --git a/src/shared/hook/use-block-scroll.ts b/src/shared/hook/use-block-scroll.ts
index c068975..7d01377 100644
--- a/src/shared/hook/use-block-scroll.ts
+++ b/src/shared/hook/use-block-scroll.ts
@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect } from 'react'
 
 export function useBlockScroll() {
diff --git a/src/shared/hook/use-history-back.ts b/src/shared/hook/use-history-back.ts
new file mode 100644
index 0000000..951fb3e
--- /dev/null
+++ b/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 }
+}
diff --git a/src/shared/ui/CloseButton.tsx b/src/shared/ui/CloseButton.tsx
new file mode 100644
index 0000000..9cfd2ce
--- /dev/null
+++ b/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="닫기 버튼"
+    />
+  )
+}
diff --git a/src/shared/ui/Modal.tsx b/src/shared/ui/Modal.tsx
index ddec372..5d46ba8 100644
--- a/src/shared/ui/Modal.tsx
+++ b/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 })
diff --git a/src/shared/ui/ModalBackGround.tsx b/src/shared/ui/ModalBackGround.tsx
new file mode 100644
index 0000000..3b6f048
--- /dev/null
+++ b/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} />
+}
diff --git a/src/shared/ui/close-button.module.scss b/src/shared/ui/close-button.module.scss
new file mode 100644
index 0000000..0889e1d
--- /dev/null
+++ b/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%;
+}
diff --git a/src/shared/ui/modal.module.scss b/src/shared/ui/modal.module.scss
index 284501a..b437d3f 100644
--- a/src/shared/ui/modal.module.scss
+++ b/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%;
-}
+}
\ No newline at end of file
diff --git a/src/widgets/detail/DetailBottomSection.tsx b/src/widgets/detail/DetailBottomSection.tsx
index 21633d4..f73e222 100644
--- a/src/widgets/detail/DetailBottomSection.tsx
+++ b/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>