CombinationBox.jsx

import "./CombinationBox.css";
import React, { useEffect, useState } from "react";
import CombinationGrid from "@/components/CombinationGrid/CombinationGrid";
import getPartById from "@/api/parts/getPartById";

const CombinationBox = ({ title, combination }) => {
  const [partDetails, setPartDetails] = useState([]);

  useEffect(() => {
    const fetchPartDetails = async () => {
      try {
        const details = await Promise.all(
          combination.partids ?(
          combination.partids.map(async (partId) => {
            const partData = await getPartById(partId);
            return {
              image: partData.image_url,
              title: partData.name,
              description: partData.description,
            };
          }
        )):
        (
          combination.partIds.map(async (partId) => {
            const partData = await getPartById(partId);
            return {
              image: partData.image_url,
              title: partData.name,
              description: partData.description,
            };
          }
        ))
        );
        setPartDetails(details);
      } catch (error) {
        console.error("부품 정보를 불러오는 중 오류 발생:", error);
      }
    };

    fetchPartDetails();
  }, [combination]);

  const handleShare = () => {
    const partIds = combination.partids || combination.partIds;
    const shareUrl = `${window.location.origin}/shared?parts=${partIds.join(',')}`;
    
    navigator.clipboard.writeText(shareUrl)
      .then(() => {
        alert('공유 링크가 클립보드에 복사되었습니다!');
      })
      .catch((err) => {
        console.error('클립보드 복사 실패:', err);
        alert('링크 복사에 실패했습니다.');
      });
  };

  return (
    <div className="combination-box">
      <div className="combination-header">
        <h1 className="title">{title}</h1>
        <button className="share-button" onClick={handleShare}>
          공유하기
        </button>
      </div>
      <CombinationGrid combination={partDetails} />
    </div>
  );
};

export default CombinationBox;