shoptime/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx

import React, {
  useCallback,
  useEffect,
} from 'react';

import classNames from 'classnames';

import Spottable from '@enact/spotlight/Spottable';

import css from './HomeTodayDeal.module.less';

const SpottableComponent = Spottable("div");

export default function HomeTodayDeal({
  children,
  imageAlt,
  imgName,
  imgPath,
  priceInfo,
  productId,
  productName,
  soldoutFlag,
  isHorizontal,
  rolling,
  ...rest
}) {
  const handleClick = useCallback(
    (productId) => {
      console.log("상세 페이지 이동");
    },
    [productId]
  );

  const parsePriceInfo = useCallback(
    (priceInfo) => {
      const priceParts = priceInfo
        .split("|")
        .filter((part) => part !== "N")
        .map((item) => item.trim());

      let originalPrice, discountedPrice, discountRate;
      if (priceParts.length === 4) {
        [originalPrice, discountedPrice, , discountRate] = priceParts;
      } else if (priceParts.length === 2) {
        [originalPrice, discountedPrice] = priceParts;
        discountRate = null;
      } else {
        originalPrice = null;
        discountedPrice = null;
        discountRate = null;
      }

      return { originalPrice, discountedPrice, discountRate };
    },
    [priceInfo]
  );

  const { originalPrice, discountedPrice, discountRate } =
    parsePriceInfo(priceInfo);

  useEffect(() => {});

  return (
    <div className={css.rollingWrap}>
      {rolling === true && (
        <SpottableComponent
          className={classNames(css.arrow, css.leftBtn)}
        ></SpottableComponent>
      )}
      <SpottableComponent
        className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
        onClick={() => handleClick(productId)}
      >
        <div>
          <div className={css.textBox}>{productName}</div>
          <div className={css.accBox}>
            {discountedPrice}
            {discountedPrice != originalPrice ? (
              <span className={css.saleAccBox}>{originalPrice}</span>
            ) : (
              <></>
            )}
          </div>
        </div>

        <div className={css.itemImgBox}>
          <img src={imgPath} />
        </div>
      </SpottableComponent>

      {rolling === true && (
        <SpottableComponent
          className={classNames(css.arrow, css.rightBtn)}
        ></SpottableComponent>
      )}
    </div>
  );
}