[Feat] 롤링페이퍼 POST 데이터에 따라 자동으로 스타일 객체 반환하는 함수 제작

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']

src/utils/getContentStylesFromPostData.js

@@ -0,0 +1,34 @@
+import { getColorFromCloudinaryImageUrl } from './getColorFromCloudinaryImageUrl';
+import { getIsColorDark } from './getIsColorDark';
+
+export const getContentStylesFromPostData = (backgroundImageURL) => {
+  const contentNormalColorStyle = {};
+
+  const contentDarkColorStyle = {
+    color: `var(--color-white)`,
+  };
+
+  const contentImageStyle = {
+    color: `var(--color-white)`,
+    background: `linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 100%)`,
+  };
+
+  if (!backgroundImageURL) {
+    return contentNormalColorStyle;
+  } 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);
+      const isDark = getIsColorDark(imageHexColor);
+      if (isDark) {
+        return contentDarkColorStyle;
+      }
+    } else if (folderCandidate === 'images') {
+      return contentImageStyle;
+    } else {
+      return contentImageStyle;
+    }
+  }
+};

src/utils/getIsColorDark.js

@@ -1,4 +1,4 @@
-export const isColorDark = (hexColor) => {
+export const getIsColorDark = (hexColor) => {
   const { r, g, b } = hexToRgb(hexColor);
   const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
   return luminance <= 128;