[Fix] 오픈그래프, 카카오톡 공유 이미지 수정

index.html

@@ -7,7 +7,7 @@
 		<meta name='description' content='Rolling : 롤링페이퍼 커뮤니티 플랫폼' />
 		<meta property='og:title' content='Rolling : 롤링페이퍼 커뮤니티 플랫폼' />
 		<meta property='og:description' content='친구나 동료들과 따뜻한 메시지를 주고받아 보세요' />
-		<meta property='og:image' content='/images/image_opengraph.png' />
+		<meta property='og:image' content='/images/image_opengraph_wide.png' />
 		<meta property='og:image:width' content='1200' />
 		<meta property='og:image:height' content='630' />
 		<meta property='og:type' content='website' />

src/contexts/AppProvider.jsx

@@ -5,8 +5,8 @@ import { ModalProvider } from './ModalProvider';
 
 export default function AppProvider({ children }) {
   return (
-    <ModalProvider>
-      <ToastProvider>{children}</ToastProvider>
-    </ModalProvider>
+    <ToastProvider>
+      <ModalProvider>{children}</ModalProvider>
+    </ToastProvider>
   );
 }

src/contexts/ModalProvider.jsx

@@ -13,6 +13,9 @@ export const ModalProvider = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
 
+  const modalWrapperRef = useRef(null);
+  const isMouseDownInsideModal = useRef(false);
+
   const location = useLocation();
 
   const closeTimeoutRef = useRef(null);
@@ -46,6 +49,35 @@ export const ModalProvider = ({ children }) => {
     setIsOpen(false);
   };
 
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (e) => {
+      if (modalWrapperRef.current?.contains(e.target)) {
+        isMouseDownInsideModal.current = true;
+      } else {
+        isMouseDownInsideModal.current = false;
+      }
+    };
+
+    const handleMouseUp = (e) => {
+      if (
+        !modalWrapperRef.current?.contains(e.target) &&
+        isMouseDownInsideModal.current === false
+      ) {
+        closeModal();
+      }
+    };
+
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isOpen]);
+
+  //Modal이 열렸을 때 esc를 누르면 Modal Close
   useEffect(() => {
     if (!isOpen) return;
 
@@ -61,6 +93,7 @@ export const ModalProvider = ({ children }) => {
     };
   }, [isOpen]);
 
+  //페이지 주소가 이동되면 Modal 강제 종료
   useEffect(() => {
     if (!isOpen) return;
     closeModalImmediately();
@@ -71,13 +104,11 @@ export const ModalProvider = ({ children }) => {
       {children}
       {isOpen > 0 &&
         createPortal(
-          <div
-            className={`${styles['modal-background']} ${styles[isClosing ? 'isClosing' : '']}`}
-            onClick={closeModal}
-          >
+          <div className={`${styles['modal-background']} ${styles[isClosing ? 'isClosing' : '']}`}>
             <div
               className={`${styles['modal-wrapper']} ${styles[isClosing ? 'isClosing' : '']}`}
               onClick={(e) => e.stopPropagation()}
+              ref={modalWrapperRef}
             >
               {modal}
             </div>

src/contexts/ToastProvider.module.scss

@@ -7,6 +7,7 @@ $wrapper-width-desktop: 524px;
 	height: 64px;
 	bottom: 70px;
 	left: 50%;
+	z-index: 99999;
 	transform: translateX(-50%);
 	> * {
 		position: absolute;

src/hooks/useKakaoShare.jsx

@@ -5,7 +5,7 @@ export const useKakaoShare = () => {
     if (!window.Kakao || !window.Kakao.isInitialized()) return;
     const currentUrl = window.location.href;
     const origin = window.location.origin;
-    const imageUrl = `${origin}/images/image_opengraph.png`;
+    const imageUrl = `${origin}/images/image_opengraph_narrow.png`;
     window.Kakao.Share.sendDefault({
       objectType: 'feed',
       content: {

src/pages/CreateRollingPaperPage/components/ColorPickerModal.jsx

@@ -2,25 +2,62 @@ import { useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import styles from './ColorPickerModal.module.scss';
 import Modal from '../../../components/Modal';
+import copyIcon from '@/assets/icons/icon_copy.svg';
+import { useToast } from '@/hooks/useToast';
 
 const ColorPickerModal = ({ initialColor = '#ffffff', onSubmit, onClose }) => {
   const [color, setColor] = useState(initialColor);
+  const { showToast } = useToast();
+
+  const handleColorInputChange = (e) => {
+    setColor(e.target.value);
+  };
+
+  const handleColorCopyClick = () => {
+    const isHexColor = (str) => /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(str);
+    if (isHexColor(color)) {
+      showToast({ type: 'success', message: '복사 성공', timer: 1000 });
+    } else {
+      showToast({ type: 'fail', message: '유효한 값이 아닙니다', timer: 1000 });
+    }
+  };
 
   return (
     <Modal className={styles['modal-styler']}>
       <Modal.contentArea>
-        <HexColorPicker color={color} onChange={setColor} />
-        <div className={styles['color-info-box']}>
+        <HexColorPicker color={color} onChange={setColor} style={{ cursor: 'pointer' }} />
+        <div className={styles['color-picker-modal__description-container']}>
           <span style={{ color: `var(--color-gray-400)` }}>HEX</span>
-          <div className={styles['color-info']}>
-            <div className={styles['color']} style={{ backgroundColor: color }} />
-            <div className={styles['color-context']}>{color}</div>
+          <div className={styles['color-picker-modal__description']}>
+            <div
+              className={styles['color-picker-modal__color-display']}
+              style={{ backgroundColor: color }}
+            />
+            <input
+              className={styles['color-picker-modal__color-value-input']}
+              value={color}
+              onChange={handleColorInputChange}
+            />
+            <div className={styles['color-picker-modal__copy-button-area']}>
+              <img
+                src={copyIcon}
+                className={styles['color-picker-modal__copy-button']}
+                onClick={handleColorCopyClick}
+              />
+            </div>
           </div>
         </div>
       </Modal.contentArea>
       <Modal.buttonArea className={styles['button-area']}>
-        <button onClick={() => onSubmit(color)}>확인</button>
-        <button onClick={onClose}>취소</button>
+        <button
+          className={styles['color-picker-modal__button-submit']}
+          onClick={() => onSubmit(color)}
+        >
+          색상 선택
+        </button>
+        <button className={styles['color-picker-modal__button-cancel']} onClick={onClose}>
+          취소
+        </button>
       </Modal.buttonArea>
     </Modal>
   );

src/pages/CreateRollingPaperPage/components/ColorPickerModal.module.scss

@@ -1,39 +1,115 @@
 .modal-styler {
-	padding: 10px;
+	padding: 20px;
 }
 
 .button-area {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
+	gap: 10px;
+	margin-top: 15px;
 }
 
-.color-info-box {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding-top: 10px;
-	gap: 5px;
-}
+.color-picker-modal {
+	&__description-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-top: 10px;
+		gap: 5px;
+	}
 
-.color-info {
-	border: 1px solid var(--color-gray-200);
-	height: 40px;
-	width: 100%;
-	border-radius: 5px;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-}
+	&__description {
+		border: 1px solid var(--color-gray-200);
+		height: 40px;
+		width: 100%;
+		border-radius: 5px;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 5px;
+	}
 
-.color {
-	aspect-ratio: 1;
-	height: 100%;
-	border-radius: 5px;
-}
+	&__color-display {
+		aspect-ratio: 1;
+		height: 100%;
+		border-radius: 5px;
+	}
+
+	&__color-value-input {
+		text-align: center;
+		border: none;
+		font-size: 18px;
+		border-left: 1px solid var(--color-gray-200);
+		width: 8ch;
+		text-align: center;
+		flex-grow: 1;
+	}
+
+	&__copy-button-area {
+		aspect-ratio: 1;
+		height: 100%;
+		border-radius: 5px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	&__copy-button {
+		aspect-ratio: 1;
+		width: 65%;
+		border-radius: 20%;
+		cursor: pointer;
+		&:hover {
+			background-color: var(--color-gray-100);
+		}
+	}
+
+	&__button-submit {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		gap: 10px;
+		width: 100%;
+		background-color: var(--color-purple-600);
+		border: none;
+		border-radius: 8px;
+		font-weight: 400;
+		font-size: 13px;
+		line-height: 25px;
+		color: var(--color-white);
+		cursor: pointer;
+
+		&:hover {
+			background-color: var(--color-purple-700);
+		}
+
+		&:disabled {
+			background-color: var(--color-gray-300);
+			cursor: auto;
+		}
+	}
+
+	&__button-cancel {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		gap: 10px;
+		width: 50%;
+		background-color: var(--color-white);
+		border: 1px solid var(--color-purple-600);
+		border-radius: 8px;
+		font-weight: 400;
+		font-size: 13px;
+		line-height: 25px;
+		color: var(--color-purple-600);
+		cursor: pointer;
 
-.color-context {
-	flex-grow: 1;
-	text-align: center;
+		&:hover {
+			background-color: var(--color-purple-100);
+		}
+	}
 }

src/pages/CreateRollingPaperPage/components/ColorSwatch.jsx

@@ -1,14 +1,14 @@
 import styles from './ColorSwatch.module.scss';
 import iconSelectedDark from '@/assets/icons/icon_success_darkgray_lg.svg';
 import iconSelectedLight from '@/assets/icons/icon_success_gray_lg.svg';
-import { isColorDark } from '../../../utils/getIsColorDark';
+import { getIsColorDark } from '../../../utils/getIsColorDark';
 
 const ColorSwatch = ({ hexColor, selectedColor, onColorSelect }) => {
   return (
     <div className={styles['color-swatch__item-wrapper']} onClick={() => onColorSelect(hexColor)}>
       <div className={styles['color-swatch__item']} style={{ backgroundColor: hexColor }} />
       {selectedColor === hexColor &&
-        (isColorDark(hexColor) ? (
+        (getIsColorDark(hexColor) ? (
           <img src={iconSelectedLight} className={styles['color-swatch__item-selected']} />
         ) : (
           <img src={iconSelectedDark} className={styles['color-swatch__item-selected']} />

src/utils/getBackgroundStylesFromPostData.js

@@ -0,0 +1,29 @@
+import { getColorFromCloudinaryImageUrl } from './getColorFromCloudinaryImageUrl';
+
+export const getBackgroundStylesFromPostData = ({ backgroundColor, backgroundImageURL }) => {
+  let backgroundStyle = {
+    backgroundColor: 'none',
+    backgroundImage: 'none',
+    backgroundRepeat: 'no-repeaet',
+    backgroundPosition: 'center',
+    backgroundSize: 'cover',
+  };
+
+  if (!backgroundImageURL) {
+    backgroundStyle.backgroundColor = `var(--color-${backgroundColor}-200)`;
+  } else {
+    const urlObj = new URL(backgroundImageURL);
+    const parts = urlObj.pathname.split('/'); // ['','dxho7f5dm','image','upload','v1749409044','colors','6a6a6a.png']
+    const folderCandidate = parts[5]; // public_id 시작 부분 (index 5)
+    if (folderCandidate === 'colors') {
+      const imageHexColor = getColorFromCloudinaryImageUrl(backgroundImageURL);
+      backgroundStyle.backgroundColor = imageHexColor;
+    } else if (folderCandidate === 'images') {
+      backgroundStyle.backgroundImage = `url(${backgroundImageURL})`;
+    } else {
+      backgroundStyle.backgroundImage = `url(${backgroundImageURL})`;
+    }
+  }
+
+  return backgroundStyle;
+};

src/utils/getColorFromCloudinaryImage.js → src/utils/getColorFromCloudinaryImageUrl.js

@@ -1,6 +1,6 @@
 //cloudinary 파일명에서 색상을 읽어옵니다.
 //ex. ...colors/131313.svg는 #131313 입니다.
-export const getColorFromCloudinaryImage = (url) => {
+export const getColorFromCloudinaryImageUrl = (url) => {
   if (!url) return null;
   const urlObj = new URL(url);
   const parts = urlObj.pathname.split('/'); // ['','dxho7f5dm','image','upload','v1749409044','colors','6a6a6a.png']