From 60597c221a300343a2e4492dc26b45bdfa6da2a2 Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Wed, 30 Oct 2024 22:36:38 +0900
Subject: [PATCH 01/10] fix. image block

---
 .../src/lib/components/image/image-viewer.tsx |  55 +-
 .../react-notion-custom/src/lib/index.css     | 571 +++++++++---------
 2 files changed, 308 insertions(+), 318 deletions(-)

diff --git a/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx b/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
index a55d54b..4a8f5ff 100644
--- a/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
+++ b/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
@@ -63,11 +63,14 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
 
   useEffect(() => {
     if (!isOpened) {
+      document.body.style.overflow = "visible";
       return;
     }
 
     imageRef.current?.focus();
 
+    document.body.style.overflow = "hidden";
+
     const handleKeyDown = (e: KeyboardEvent) => {
       const keyDownEvents: { [key: string]: () => void } = {
         Escape: () => setIsOpened(false),
@@ -120,7 +123,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
         {isOpened && (
           <motion.div
             role="dialog"
-            className={`notion-image-viewer-container ${isCursorVisible ? "notion-visible-cursor" : "notion-hide-cursor"}`}
+            className={`notion-image-viewer-container`}
             aria-modal="true"
             onMouseMove={handleMoveMouse}
             initial={{ opacity: 0 }}
@@ -135,40 +138,40 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
             <motion.img
               key={urls[currentImageIndex]}
               ref={imageRef}
-              className={`notion-image-viewer-container-image ${isCursorVisible ? "notion-visible-cursor" : "notion-hide-cursor"}`}
+              className={`notion-image-viewer-container-image`}
               src={urls[currentImageIndex]}
               alt="posting image"
               style={{
                 transform: `scale(${scale})`,
                 transformOrigin: `${scaleOriginX * 100}% ${scaleOriginY * 100}%`,
-                cursor: getCursorStyle(scale),
+                cursor: isCursorVisible ? getCursorStyle(scale) : "none",
               }}
               onClick={handleZoomInOut}
             />
 
-            {isCursorVisible && (
-              <ImageViewerTools
-                url={urls[currentImageIndex]}
-                currentImageIndex={currentImageIndex}
-                imageLength={urls.length}
-                scaleInputRef={scaleInputRef}
-                scale={scale}
-                displayScale={displayScale}
-                setIsOpened={setIsOpened}
-                onScaleUp={handleScaleUp}
-                onScaleDown={handleScaleDown}
-                isScaleFocus={isScaleFocus}
-                setIsScaleFocus={setIsScaleFocus}
-                onScaleBlur={handleScaleBlur}
-                onScaleFocus={handleScaleFocus}
-                onScaleEnter={handleScaleEnter}
-                onScaleChange={handleScaleChange}
-                hasPrevious={hasPrevious}
-                hasNext={hasNext}
-                toPreviousImage={toPreviousImage}
-                toNextImage={toNextImage}
-              />
-            )}
+            {/* {isCursorVisible && ( */}
+            <ImageViewerTools
+              url={urls[currentImageIndex]}
+              currentImageIndex={currentImageIndex}
+              imageLength={urls.length}
+              scaleInputRef={scaleInputRef}
+              scale={scale}
+              displayScale={displayScale}
+              setIsOpened={setIsOpened}
+              onScaleUp={handleScaleUp}
+              onScaleDown={handleScaleDown}
+              isScaleFocus={isScaleFocus}
+              setIsScaleFocus={setIsScaleFocus}
+              onScaleBlur={handleScaleBlur}
+              onScaleFocus={handleScaleFocus}
+              onScaleEnter={handleScaleEnter}
+              onScaleChange={handleScaleChange}
+              hasPrevious={hasPrevious}
+              hasNext={hasNext}
+              toPreviousImage={toPreviousImage}
+              toNextImage={toNextImage}
+            />
+            {/* )} */}
           </motion.div>
         )}
       </AnimatePresence>
diff --git a/packages/react-notion-custom/src/lib/index.css b/packages/react-notion-custom/src/lib/index.css
index 9fcec22..c1aa56f 100644
--- a/packages/react-notion-custom/src/lib/index.css
+++ b/packages/react-notion-custom/src/lib/index.css
@@ -722,298 +722,6 @@
   border-top: 1px solid rgba(223, 223, 222, 1);
 }
 
-/* image */
-.notion-image img {
-  width: 100%;
-  object-fit: contain;
-  pointer-events: auto;
-  cursor: default;
-}
-
-.notion-image:not(:last-child) {
-  margin-bottom: 4px;
-}
-
-.notion-image:not(:first-child) {
-  margin-top: 4px;
-}
-
-.notion-image-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.notion-image img {
-  width: 100%;
-  object-fit: contain;
-  pointer-events: auto;
-  cursor: default;
-}
-
-.notion-image:not(:last-child) {
-  margin-bottom: 4px;
-}
-
-.notion-image:not(:first-child) {
-  margin-top: 4px;
-}
-
-.notion-image-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.notion-image-viewer-tools button {
-  background-color: #160b04;
-  padding: 6px;
-  width: 32px;
-  height: 32px;
-  border: 0;
-  margin: 0;
-  user-select: none;
-}
-
-.notion-image-viewer-tools button.disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: default;
-}
-
-.notion-image-viewer-tools button:hover {
-  background-color: rgba(44, 44, 44, 0.81);
-}
-
-.notion-image-viewer-tools button:disabled {
-  background-color: rgba(0, 0, 0, 0.618);
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: default;
-}
-
-.notion-image-viewer-tools > nav {
-  display: flex;
-  margin-right: 12px;
-}
-
-.notion-image-viewer-tools > nav > button:first-child {
-  width: 36px;
-  padding-left: 8px;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.notion-image-viewer-tools > nav > button:last-child {
-  width: 36px;
-  padding-right: 8px;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.notion-image-viewer-controls {
-  margin-right: 25px;
-}
-
-.notion-image-viewer-tools > .notion-image-viewer-scaler > button:first-child {
-  width: 36px;
-  padding-left: 8px;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.notion-image-viewer-tools .notion-image-viewer-scaler {
-  display: flex;
-  font-size: 14px;
-}
-
-.notion-image-viewer-scaler-input {
-  background-color: rgba(0, 0, 0, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #888888;
-  width: 60px;
-}
-
-.notion-image-viewer-scaler-input:hover {
-  background-color: rgba(0, 0, 0, 0.2);
-  display: flex;
-  align-items: center;
-}
-
-.notion-image-viewer-scaler button {
-  width: 60;
-  padding: 5;
-}
-
-.notion-image-viewer-scaler input {
-  background-color: transparent;
-  border: 0;
-  font-size: inherit;
-  color: inherit;
-  padding: 0px;
-  padding-top: 1px;
-  overflow: hidden;
-  line-height: 1;
-  text-align: center;
-}
-
-.notion-image-viewer-scaler-input-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 60px !important;
-  color: #888888;
-}
-
-.notion-image-viewer-tools .notion-image-viewer-scaler input:focus {
-  color: white;
-  outline: 1px solid #008080;
-  width: 28px;
-}
-
-/* Chrome, Safari, Edge, Opera */
-.notion input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-.notion input[type="number"] {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-.notion-image-viewer-tools .notion-image-viewer-scaler > button:first-of-type {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.notion-image-viewer-tools .notion-image-viewer-scaler > button:last-of-type {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.notion-image-viewer-tools button > img {
-  width: 100%;
-  height: 100%;
-}
-
-.notion-image-viewer-tools button.notion-image-viewer-tools-download {
-  border-left: solid 1px gray;
-  border-right: solid 1px gray;
-  margin: 0px 1px;
-}
-
-.notion-image-viewer-tools button.notion-image-viewer-tools-close {
-  width: 36px;
-  padding-right: 8px;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.notion-image-viewer-tools button:not(:disabled) {
-  cursor: pointer;
-}
-
-.notion-image-viewer-opener {
-  cursor: pointer;
-}
-
-.notion-image-viewer-container {
-  display: flex;
-  position: fixed;
-  inset: 0;
-  overflow: hidden;
-  z-index: 999;
-  justify-content: center;
-  align-items: center;
-  padding-top: 32px;
-  padding-bottom: 32px;
-  flex-direction: column;
-}
-
-@media screen and (min-width: 768px) {
-  .notion-image-viewer-container {
-    padding-left: 32px;
-    padding-right: 32px;
-  }
-}
-
-.notion-image-viewer-overlay {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  background-color: black;
-  opacity: 0.8;
-  cursor: default;
-}
-
-.notion-image-viewer-container-image {
-  max-width: fit-content;
-  max-height: 100%;
-  object-fit: contain;
-  position: relative;
-  z-index: 0;
-  transform-origin: 0.4s ease-in-out;
-}
-
-.notion-image-viewer-tools {
-  display: flex;
-  position: absolute;
-  bottom: 32px;
-  left: 50%;
-  transform: translateX(-50%);
-  transition: 2s all ease-in-out;
-}
-
-.notion-image-viewer-tooltip-container {
-  position: relative;
-  display: inline-block;
-}
-
-.notion-image-viewer-tooltip {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: -35px;
-  left: -35%;
-  transform: translateX(-50%);
-  background-color: rgb(38, 38, 38);
-  color: white;
-  padding: 8px;
-  border-radius: 4px;
-  font-size: 15px;
-  white-space: nowrap;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.notion-image-viewer-tooltip p:last-child {
-  margin-left: 5px;
-  color: #d3d3d3;
-  font-size: 13px;
-}
-
-.notion .notion-image button {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  width: auto;
-  height: auto;
-  overflow: visible;
-  text-align: left;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
 .notion-video {
   margin: 4px 0px;
 }
@@ -1317,3 +1025,282 @@ input::-webkit-inner-spin-button {
   line-height: 20px;
   caret-color: rgb(55, 53, 47);
 }
+
+/* image */
+.notion-image img {
+  width: 100%;
+  object-fit: contain;
+  pointer-events: auto;
+  cursor: default;
+}
+
+.notion-image:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.notion-image:not(:first-child) {
+  margin-top: 4px;
+}
+
+.notion-image-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.notion-image img {
+  width: 100%;
+  object-fit: contain;
+  pointer-events: auto;
+  cursor: default;
+}
+
+.notion-image:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.notion-image:not(:first-child) {
+  margin-top: 4px;
+}
+
+.notion-image-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.notion-image-viewer-tools button {
+  background-color: #060606c4;
+  padding: 6px;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  margin: 0;
+  user-select: none;
+  cursor: pointer;
+}
+
+.notion-image-viewer-tools button > img {
+  cursor: pointer;
+}
+
+.notion-image-viewer-tools button:disabled {
+  pointer-events: none;
+  cursor: default;
+  background-color: #060606a1;
+}
+
+.notion-image-viewer-tools button:hover {
+  background-color: #060606a1;
+}
+
+.notion-image-viewer-tools > .notion-image-viewer-controls {
+  display: flex;
+  margin-right: 25px;
+}
+
+.notion-image-viewer-tools
+  > .notion-image-viewer-controls
+  > .notion-image-viewer-tooltip-container:first-child
+  button,
+.notion-image-viewer-tools > .notion-image-viewer-scaler button:first-child {
+  width: 36px;
+  padding-left: 8px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.notion-image-viewer-tools
+  > .notion-image-viewer-controls
+  > .notion-image-viewer-tooltip-container:last-child
+  button,
+.notion-image-viewer-tools > nav > button:last-child {
+  width: 36px;
+  padding-right: 8px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.notion-image-viewer-tools .notion-image-viewer-scaler {
+  display: flex;
+  font-size: 14px;
+}
+
+.notion-image-viewer-scaler-input {
+  background-color: #060606c4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #888888;
+  width: 60px;
+  height: 32px;
+}
+
+.notion-image-viewer-scaler-input:hover {
+  background-color: #060606a1;
+  display: flex;
+  align-items: center;
+}
+
+.notion-image-viewer-scaler button {
+  width: 60;
+  padding: 5;
+}
+
+.notion-image-viewer-scaler input {
+  background-color: transparent;
+  border: 0;
+  font-size: inherit;
+  color: inherit;
+  padding: 0px;
+  padding-top: 1px;
+  overflow: hidden;
+  line-height: 1;
+  text-align: center;
+}
+
+.notion-image-viewer-scaler-input-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px !important;
+  color: #888888;
+}
+
+.notion-image-viewer-tools .notion-image-viewer-scaler input:focus {
+  color: white;
+  outline: 1px solid #2d75a0;
+  width: 28px;
+}
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.notion-image-viewer-tools .notion-image-viewer-scaler > button:first-of-type {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.notion-image-viewer-tools .notion-image-viewer-scaler > button:last-of-type {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.notion-image-viewer-tools button > img {
+  width: 100%;
+  height: 100%;
+}
+.notion-image-viewer-tools button.notion-image-viewer-tools-download {
+  border-left: solid 1px white;
+  border-right: solid 1px white;
+  opacity: 0.9;
+}
+.notion-image-viewer-tools button.notion-image-viewer-tools-close {
+  width: 36px;
+  padding-right: 8px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.notion-image-viewer-opener {
+  cursor: pointer;
+}
+
+.notion-image-viewer-container {
+  display: flex;
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  z-index: 999;
+  justify-content: center;
+  align-items: center;
+  padding-top: 32px;
+  padding-bottom: 32px;
+  flex-direction: column;
+}
+
+@media screen and (min-width: 768px) {
+  .notion-image-viewer-container {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+
+.notion-image-viewer-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: black;
+  opacity: 0.9;
+  cursor: default;
+  overscroll-behavior: none;
+  overflow: hidden;
+}
+
+.notion-image-viewer-container-image {
+  max-width: fit-content;
+  max-height: 100%;
+  object-fit: contain;
+  position: relative;
+  z-index: 0;
+  transform-origin: 0.4s ease-in-out;
+}
+
+.notion-image-viewer-tools {
+  display: flex;
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: 2s all ease-in-out;
+}
+
+.notion-image-viewer-tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.notion-image-viewer-tooltip {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -35px;
+  left: -35%;
+  transform: translateX(-50%);
+  background-color: rgb(38, 38, 38);
+  color: white;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.notion-image-viewer-tooltip p:last-child {
+  margin-left: 5px;
+  color: #d3d3d3;
+  font-size: 13px;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+}

From 21029f47acfbcbee576075400d28d581e9e9f5ad Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Wed, 30 Oct 2024 22:47:13 +0900
Subject: [PATCH 02/10] cursor visible

---
 .../image-viewer/use-cursor-visibility.tsx    | 12 ++---
 .../src/lib/components/image/image-viewer.tsx | 49 +++++++++----------
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/packages/react-notion-custom/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx b/packages/react-notion-custom/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx
index 08527e8..0cbf398 100644
--- a/packages/react-notion-custom/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx
+++ b/packages/react-notion-custom/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useCallback } from "react";
 
-export const useCursorVisibility = (isScaleFocus: boolean) => {
+export const useCursorVisibility = () => {
   const [isCursorVisible, setIsisCursorVisible] = useState(true);
   const cursorTimeOutRef = useRef<NodeJS.Timeout>();
 
@@ -13,12 +13,10 @@ export const useCursorVisibility = (isScaleFocus: boolean) => {
       clearTimeout(cursorTimeOutRef.current);
     }
 
-    if (!isScaleFocus) {
-      cursorTimeOutRef.current = setTimeout(() => {
-        setIsisCursorVisible(false);
-      }, 2000);
-    }
-  }, [isScaleFocus]);
+    cursorTimeOutRef.current = setTimeout(() => {
+      setIsisCursorVisible(false);
+    }, 2000);
+  }, []);
 
   return {
     isCursorVisible,
diff --git a/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx b/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
index 4a8f5ff..7ddcc1a 100644
--- a/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
+++ b/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
@@ -51,8 +51,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     handleScaleDown,
   } = useImageScale();
 
-  const { isCursorVisible, handleMoveMouse } =
-    useCursorVisibility(isScaleFocus);
+  const { isCursorVisible, handleMoveMouse } = useCursorVisibility();
 
   useEffect(() => {
     if (currentImageIndex || isOpened) {
@@ -149,29 +148,29 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
               onClick={handleZoomInOut}
             />
 
-            {/* {isCursorVisible && ( */}
-            <ImageViewerTools
-              url={urls[currentImageIndex]}
-              currentImageIndex={currentImageIndex}
-              imageLength={urls.length}
-              scaleInputRef={scaleInputRef}
-              scale={scale}
-              displayScale={displayScale}
-              setIsOpened={setIsOpened}
-              onScaleUp={handleScaleUp}
-              onScaleDown={handleScaleDown}
-              isScaleFocus={isScaleFocus}
-              setIsScaleFocus={setIsScaleFocus}
-              onScaleBlur={handleScaleBlur}
-              onScaleFocus={handleScaleFocus}
-              onScaleEnter={handleScaleEnter}
-              onScaleChange={handleScaleChange}
-              hasPrevious={hasPrevious}
-              hasNext={hasNext}
-              toPreviousImage={toPreviousImage}
-              toNextImage={toNextImage}
-            />
-            {/* )} */}
+            {(isCursorVisible || isScaleFocus) && (
+              <ImageViewerTools
+                url={urls[currentImageIndex]}
+                currentImageIndex={currentImageIndex}
+                imageLength={urls.length}
+                scaleInputRef={scaleInputRef}
+                scale={scale}
+                displayScale={displayScale}
+                setIsOpened={setIsOpened}
+                onScaleUp={handleScaleUp}
+                onScaleDown={handleScaleDown}
+                isScaleFocus={isScaleFocus}
+                setIsScaleFocus={setIsScaleFocus}
+                onScaleBlur={handleScaleBlur}
+                onScaleFocus={handleScaleFocus}
+                onScaleEnter={handleScaleEnter}
+                onScaleChange={handleScaleChange}
+                hasPrevious={hasPrevious}
+                hasNext={hasNext}
+                toPreviousImage={toPreviousImage}
+                toNextImage={toNextImage}
+              />
+            )}
           </motion.div>
         )}
       </AnimatePresence>

From 01d5a0e87cc3b08fdec4e6139cdc3d2c216f6d2d Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Thu, 31 Oct 2024 15:04:17 +0900
Subject: [PATCH 03/10] Fix. overlay cursor hide

---
 .../src/lib/components/image/image-viewer.tsx                  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx b/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
index 7ddcc1a..3ea03ec 100644
--- a/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
+++ b/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
@@ -133,6 +133,9 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
             <button
               className="notion-image-viewer-overlay"
               onClick={() => setIsOpened(false)}
+              style={{
+                cursor: isCursorVisible ? "default" : "none",
+              }}
             />
             <motion.img
               key={urls[currentImageIndex]}

From 34b932bf5665a8630b0f555d8e7185b0455d0ef4 Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Thu, 31 Oct 2024 15:09:21 +0900
Subject: [PATCH 04/10] style. input css

---
 packages/react-notion-custom/src/lib/index.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-notion-custom/src/lib/index.css b/packages/react-notion-custom/src/lib/index.css
index c1aa56f..ffd4241 100644
--- a/packages/react-notion-custom/src/lib/index.css
+++ b/packages/react-notion-custom/src/lib/index.css
@@ -1171,14 +1171,18 @@
   width: 28px;
 }
 /* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
+.notion-image-viewer-tools
+  .notion-image-viewer-scaler
+  input::-webkit-outer-spin-button,
+.notion-image-viewer-tools
+  .notion-image-viewer-scaler
+  input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   appearance: none;
   margin: 0;
 }
 /* Firefox */
-input[type="number"] {
+.notion-image-viewer-tools .notion-image-viewer-scaler input[type="number"] {
   -moz-appearance: textfield;
   appearance: textfield;
 }

From 5640badb7d840ca9d8484e921598006e5a272116 Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Thu, 31 Oct 2024 17:22:09 +0900
Subject: [PATCH 05/10] fix. hide scroll layout shift

---
 .../src/lib/components/image/image-viewer.tsx  | 15 ++++++++++++---
 packages/react-notion-custom/src/lib/index.css | 18 +++++++++---------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx b/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
index 3ea03ec..8878ea0 100644
--- a/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
+++ b/packages/react-notion-custom/src/lib/components/image/image-viewer.tsx
@@ -60,16 +60,25 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     }
   }, [isOpened, currentImageIndex, setScale, setDisplayScale]);
 
+  useEffect(() => {
+    const notion = document.querySelector(".notion") as HTMLElement;
+
+    notion.style.marginRight = "0px";
+    document.body.style.overflow = "visible";
+
+    if (isOpened) {
+      document.body.style.overflow = "hidden";
+      notion.style.marginRight = "15px";
+    }
+  }, [isOpened]);
+
   useEffect(() => {
     if (!isOpened) {
-      document.body.style.overflow = "visible";
       return;
     }
 
     imageRef.current?.focus();
 
-    document.body.style.overflow = "hidden";
-
     const handleKeyDown = (e: KeyboardEvent) => {
       const keyDownEvents: { [key: string]: () => void } = {
         Escape: () => setIsOpened(false),
diff --git a/packages/react-notion-custom/src/lib/index.css b/packages/react-notion-custom/src/lib/index.css
index ffd4241..e759250 100644
--- a/packages/react-notion-custom/src/lib/index.css
+++ b/packages/react-notion-custom/src/lib/index.css
@@ -1027,7 +1027,7 @@
 }
 
 /* image */
-.notion-image img {
+.notion-viewer-opener > img {
   width: 100%;
   object-fit: contain;
   pointer-events: auto;
@@ -1047,13 +1047,6 @@
   flex-direction: column;
 }
 
-.notion-image img {
-  width: 100%;
-  object-fit: contain;
-  pointer-events: auto;
-  cursor: default;
-}
-
 .notion-image:not(:last-child) {
   margin-bottom: 4px;
 }
@@ -1226,6 +1219,8 @@
   padding-top: 32px;
   padding-bottom: 32px;
   flex-direction: column;
+  width: 100vw;
+  height: 100vh;
 }
 
 @media screen and (min-width: 768px) {
@@ -1241,7 +1236,7 @@
   background-color: black;
   opacity: 0.9;
   cursor: default;
-  overscroll-behavior: none;
+  overscroll-behavior: contain;
   overflow: hidden;
 }
 
@@ -1291,6 +1286,11 @@
   font-size: 13px;
 }
 
+.notion-scroll-block {
+  overflow: hidden;
+  margin-right: 15px;
+}
+
 button {
   background: none;
   border: none;

From 3d7e6271fb180173d66b9207f097c6331ab465af Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Sun, 3 Nov 2024 02:39:39 +0900
Subject: [PATCH 06/10] style. global button change

---
 packages/core/src/lib/index.css   | 2 +-
 packages/story/src/lib/Notion.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/lib/index.css b/packages/core/src/lib/index.css
index e759250..d425914 100644
--- a/packages/core/src/lib/index.css
+++ b/packages/core/src/lib/index.css
@@ -1291,7 +1291,7 @@
   margin-right: 15px;
 }
 
-button {
+.notion-viewer-opener {
   background: none;
   border: none;
   padding: 0;
diff --git a/packages/story/src/lib/Notion.tsx b/packages/story/src/lib/Notion.tsx
index e4d7d9f..c4aa0ea 100644
--- a/packages/story/src/lib/Notion.tsx
+++ b/packages/story/src/lib/Notion.tsx
@@ -1,4 +1,4 @@
-import { Notion, type Block } from "@notionpresso/react";
+import { Notion, type Block } from "../../../core/src/lib";
 
 export default function StoryComponent({
   blocks,

From cb27815caabe7f6fe0d402a17315656ab610da50 Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Sun, 3 Nov 2024 02:50:23 +0900
Subject: [PATCH 07/10] refactor. typo error

---
 .../image/hooks/image-viewer/use-cursor-visibility.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx b/packages/core/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx
index 0cbf398..2f21a01 100644
--- a/packages/core/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx
+++ b/packages/core/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx
@@ -1,11 +1,11 @@
 import { useState, useRef, useCallback } from "react";
 
 export const useCursorVisibility = () => {
-  const [isCursorVisible, setIsisCursorVisible] = useState(true);
+  const [isCursorVisible, setIsCursorVisible] = useState(true);
   const cursorTimeOutRef = useRef<NodeJS.Timeout>();
 
   const handleMoveMouse = useCallback(() => {
-    setIsisCursorVisible(true);
+    setIsCursorVisible(true);
 
     clearTimeout(cursorTimeOutRef.current);
 
@@ -14,7 +14,7 @@ export const useCursorVisibility = () => {
     }
 
     cursorTimeOutRef.current = setTimeout(() => {
-      setIsisCursorVisible(false);
+      setIsCursorVisible(false);
     }, 2000);
   }, []);
 

From 137a7f15db8cb6b1c115dd9113ff47b07eb94608 Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Tue, 5 Nov 2024 16:09:53 +0900
Subject: [PATCH 08/10] draft. style css

---
 packages/core/src/lib/index.css | 44 ++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/lib/index.css b/packages/core/src/lib/index.css
index d425914..2696253 100644
--- a/packages/core/src/lib/index.css
+++ b/packages/core/src/lib/index.css
@@ -1060,6 +1060,25 @@
   flex-direction: column;
 }
 
+.notion-viewer-opener,
+.notion-image-viewer-overlay {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .notion-image-viewer-tools button {
   background-color: #060606c4;
   padding: 6px;
@@ -1238,6 +1257,8 @@
   cursor: default;
   overscroll-behavior: contain;
   overflow: hidden;
+  height: 100vh;
+  width: 100vw;
 }
 
 .notion-image-viewer-container-image {
@@ -1285,26 +1306,3 @@
   color: #d3d3d3;
   font-size: 13px;
 }
-
-.notion-scroll-block {
-  overflow: hidden;
-  margin-right: 15px;
-}
-
-.notion-viewer-opener {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  width: auto;
-  height: auto;
-  overflow: visible;
-  text-align: left;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  appearance: none;
-}

From 33f34de4e559b44c3075e28a8a5231f92f45b6c2 Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Wed, 6 Nov 2024 01:20:44 +0900
Subject: [PATCH 09/10] fix. layout shift

---
 package.json                                  |  2 +-
 .../src/lib/components/image/image-viewer.tsx | 33 +++++++----
 .../src/lib/components/image/lib/get-gap.ts   | 56 +++++++++++++++++++
 .../src/lib/components/image/lib/index.ts     |  1 +
 packages/core/src/lib/index.css               |  3 +-
 packages/story/.gitignore                     |  4 +-
 packages/story/src/lib/Notion.tsx             |  2 +-
 7 files changed, 84 insertions(+), 17 deletions(-)
 create mode 100644 packages/core/src/lib/components/image/lib/get-gap.ts

diff --git a/package.json b/package.json
index 52385c6..1a2b016 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "cli:test": "npm run test --workspace=notion-dump",
     "story:build": "npm run build-storybook --workspace=story",
     "story:start": "npm run storybook --workspace=story",
-    "library:build": "npm run build --workspace=react-notion-custom",
+    "library:build": "npm run build --workspace=@notionpresso/react",
     "prepare": "husky install",
     "format": "prettier --write ."
   },
diff --git a/packages/core/src/lib/components/image/image-viewer.tsx b/packages/core/src/lib/components/image/image-viewer.tsx
index 8878ea0..ced1ebc 100644
--- a/packages/core/src/lib/components/image/image-viewer.tsx
+++ b/packages/core/src/lib/components/image/image-viewer.tsx
@@ -10,6 +10,7 @@ import {
 import { getCursorStyle } from "./lib";
 
 import ImageViewerTools from "./image-viewer-tools";
+import { getGapStyles, getGapWidth } from "./lib/get-gap";
 
 type ImageViewerProps = {
   children: React.ReactNode;
@@ -60,18 +61,6 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     }
   }, [isOpened, currentImageIndex, setScale, setDisplayScale]);
 
-  useEffect(() => {
-    const notion = document.querySelector(".notion") as HTMLElement;
-
-    notion.style.marginRight = "0px";
-    document.body.style.overflow = "visible";
-
-    if (isOpened) {
-      document.body.style.overflow = "hidden";
-      notion.style.marginRight = "15px";
-    }
-  }, [isOpened]);
-
   useEffect(() => {
     if (!isOpened) {
       return;
@@ -117,6 +106,26 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     [urls, setCurrentImageIndex, setIsOpened],
   );
 
+  useEffect(() => {
+    const styleElement = document.createElement("style");
+
+    if (isOpened) {
+      document.body.setAttribute("data-scroll-locked", "true");
+      const gap = getGapWidth();
+
+      const scrollLockedStyles = getGapStyles(gap);
+      styleElement.textContent = scrollLockedStyles;
+      document.head.appendChild(styleElement);
+    }
+
+    return () => {
+      document.body.removeAttribute("data-scroll-locked");
+      if (styleElement.parentNode) {
+        styleElement.parentNode.removeChild(styleElement);
+      }
+    };
+  }, [isOpened]);
+
   return (
     <>
       <button
diff --git a/packages/core/src/lib/components/image/lib/get-gap.ts b/packages/core/src/lib/components/image/lib/get-gap.ts
new file mode 100644
index 0000000..bffbb74
--- /dev/null
+++ b/packages/core/src/lib/components/image/lib/get-gap.ts
@@ -0,0 +1,56 @@
+interface GapOffset {
+  left: number;
+  top: number;
+  right: number;
+  gap: number;
+}
+
+export const zeroGap = {
+  left: 0,
+  top: 0,
+  right: 0,
+  gap: 0,
+};
+
+const parse = (x: string | null) => parseInt(x || "", 10) || 0;
+
+export const getOffset = (): number[] => {
+  const cs = window.getComputedStyle(document.body);
+
+  const left = cs["marginLeft"];
+  const top = cs["marginTop"];
+  const right = cs["marginRight"];
+
+  return [parse(left), parse(top), parse(right)];
+};
+
+export const getGapWidth = (): GapOffset => {
+  if (typeof window === "undefined") {
+    return zeroGap;
+  }
+
+  const offsets = getOffset();
+  const documentWidth = document.documentElement.clientWidth;
+  const windowWidth = window.innerWidth;
+
+  return {
+    left: offsets[0],
+    top: offsets[1],
+    right: offsets[2],
+    gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
+  };
+};
+
+export const getGapStyles = ({ left, top, right, gap }: GapOffset) => `
+  body[data-scroll-locked] {
+    padding-left: ${left}px;
+    padding-top: ${top}px;
+    padding-right: ${right}px;
+    margin-right: ${gap}px !important;
+    overflow: hidden !important;
+    overscroll-behavior: contain;
+    margin-left: 0;
+    margin-top: 0;
+    position: relative !important;
+    }
+`;
diff --git a/packages/core/src/lib/components/image/lib/index.ts b/packages/core/src/lib/components/image/lib/index.ts
index 3ae2488..9a1861d 100644
--- a/packages/core/src/lib/components/image/lib/index.ts
+++ b/packages/core/src/lib/components/image/lib/index.ts
@@ -1,4 +1,5 @@
 export * from "./download-image-file";
+export * from "./get-gap";
 export * from "./get-image-url-or-null";
 export * from "./get-cursor-style";
 export * from "./scale-round";
diff --git a/packages/core/src/lib/index.css b/packages/core/src/lib/index.css
index 2696253..e12380f 100644
--- a/packages/core/src/lib/index.css
+++ b/packages/core/src/lib/index.css
@@ -1238,8 +1238,8 @@
   padding-top: 32px;
   padding-bottom: 32px;
   flex-direction: column;
-  width: 100vw;
   height: 100vh;
+  width: 100vw;
 }
 
 @media screen and (min-width: 768px) {
@@ -1258,7 +1258,6 @@
   overscroll-behavior: contain;
   overflow: hidden;
   height: 100vh;
-  width: 100vw;
 }
 
 .notion-image-viewer-container-image {
diff --git a/packages/story/.gitignore b/packages/story/.gitignore
index bc6d306..657e206 100644
--- a/packages/story/.gitignore
+++ b/packages/story/.gitignore
@@ -23,4 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-*storybook.log
\ No newline at end of file
+*storybook.log
+
+.cache
\ No newline at end of file
diff --git a/packages/story/src/lib/Notion.tsx b/packages/story/src/lib/Notion.tsx
index c4aa0ea..e4d7d9f 100644
--- a/packages/story/src/lib/Notion.tsx
+++ b/packages/story/src/lib/Notion.tsx
@@ -1,4 +1,4 @@
-import { Notion, type Block } from "../../../core/src/lib";
+import { Notion, type Block } from "@notionpresso/react";
 
 export default function StoryComponent({
   blocks,

From a015c8a5391b09bc962dffc41eef6280515d4df4 Mon Sep 17 00:00:00 2001
From: myjeong19 <myjeong19@naver.com>
Date: Tue, 12 Nov 2024 18:28:01 +0900
Subject: [PATCH 10/10] refactor. use-prevent-scroll

---
 .../image/hooks/image-viewer/index.ts         |  1 +
 .../hooks/image-viewer/use-prevent-scroll.tsx | 25 +++++++++++++++++++
 .../src/lib/components/image/image-viewer.tsx | 22 ++--------------
 3 files changed, 28 insertions(+), 20 deletions(-)
 create mode 100644 packages/core/src/lib/components/image/hooks/image-viewer/use-prevent-scroll.tsx

diff --git a/packages/core/src/lib/components/image/hooks/image-viewer/index.ts b/packages/core/src/lib/components/image/hooks/image-viewer/index.ts
index 073a40d..d9a495b 100644
--- a/packages/core/src/lib/components/image/hooks/image-viewer/index.ts
+++ b/packages/core/src/lib/components/image/hooks/image-viewer/index.ts
@@ -1,3 +1,4 @@
 export * from "./use-cursor-visibility";
 export * from "./use-image-navigation";
 export * from "./use-image-scale";
+export * from "./use-prevent-scroll";
diff --git a/packages/core/src/lib/components/image/hooks/image-viewer/use-prevent-scroll.tsx b/packages/core/src/lib/components/image/hooks/image-viewer/use-prevent-scroll.tsx
new file mode 100644
index 0000000..570e3f6
--- /dev/null
+++ b/packages/core/src/lib/components/image/hooks/image-viewer/use-prevent-scroll.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+import { getGapStyles, getGapWidth } from "../../lib";
+
+export const usePreventScroll = (isOpened: boolean) => {
+  useEffect(() => {
+    const styleElement = document.createElement("style");
+
+    if (isOpened) {
+      document.body.setAttribute("data-scroll-locked", "true");
+      const gap = getGapWidth();
+
+      const scrollLockedStyles = getGapStyles(gap);
+      styleElement.textContent = scrollLockedStyles;
+      document.head.appendChild(styleElement);
+    }
+
+    return () => {
+      document.body.removeAttribute("data-scroll-locked");
+      if (styleElement.parentNode) {
+        styleElement.parentNode.removeChild(styleElement);
+      }
+    };
+  }, [isOpened]);
+};
diff --git a/packages/core/src/lib/components/image/image-viewer.tsx b/packages/core/src/lib/components/image/image-viewer.tsx
index ced1ebc..18edcf3 100644
--- a/packages/core/src/lib/components/image/image-viewer.tsx
+++ b/packages/core/src/lib/components/image/image-viewer.tsx
@@ -5,12 +5,12 @@ import {
   useCursorVisibility,
   useImageNavigation,
   useImageScale,
+  usePreventScroll,
 } from "./hooks/image-viewer";
 
 import { getCursorStyle } from "./lib";
 
 import ImageViewerTools from "./image-viewer-tools";
-import { getGapStyles, getGapWidth } from "./lib/get-gap";
 
 type ImageViewerProps = {
   children: React.ReactNode;
@@ -106,25 +106,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     [urls, setCurrentImageIndex, setIsOpened],
   );
 
-  useEffect(() => {
-    const styleElement = document.createElement("style");
-
-    if (isOpened) {
-      document.body.setAttribute("data-scroll-locked", "true");
-      const gap = getGapWidth();
-
-      const scrollLockedStyles = getGapStyles(gap);
-      styleElement.textContent = scrollLockedStyles;
-      document.head.appendChild(styleElement);
-    }
-
-    return () => {
-      document.body.removeAttribute("data-scroll-locked");
-      if (styleElement.parentNode) {
-        styleElement.parentNode.removeChild(styleElement);
-      }
-    };
-  }, [isOpened]);
+  usePreventScroll(isOpened);
 
   return (
     <>