MyCombinationPage.jsx

import React, { useEffect, useState } from "react";
import getMyPCs from "@/api/my/getMyPCs";
import getPartById from "@/api/parts/getPartById";
import { useNavigate } from "react-router-dom";
import './MyCombinationPage.css';
import PartItem from "@/components/PartItem";
import updatePCName from "@/api/my/updatePCName";
import deletePC from "@/api/my/deletePC";
import PCList from "@/components/PCList";
import createUUID from "@/api/my/createUUID";

const CertifiedCombination = () => {
  const [pcs, setPcs] = useState([]);
  const [selectedPc, setSelectedPc] = useState(null);
  const [partsData, setPartsData] = useState([]);
  const [isPartsLoading, setIsPartsLoading] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    const fetchPCs = async () => {
      try {
        const pcsData = await getMyPCs();
        setPcs(pcsData);
        if (pcsData.length > 0) {
          setSelectedPc(pcsData[0]);
        }
      } catch (error) {
        console.error("내 PC 목록 불러오기 중 오류 발생:", error);
      }
    };

    fetchPCs();
  }, []);

  useEffect(() => {
    const fetchParts = async () => {
      if (selectedPc && !selectedPc.parts.some(part => part.partType === "오류")) {
        setIsPartsLoading(true);
        const parts = await Promise.all(
          selectedPc.parts.map(async (partId) => {
            try {
              return await getPartById(partId);
            } catch (error) {
              console.error(`부품 ID ${partId} 불러오기 중 오류 발생:`, error);
              return {
                partType: "오류",
                name: "오류가 발생했습니다.",
                description: `${partId} 부품을 찾을 수 없습니다.`,
                imageUrl: "",
              };
            }
          })
        );
        setPartsData(parts.filter((part) => part !== null));
        setIsPartsLoading(false);
      }
    };

    fetchParts();
  }, [selectedPc]);

  const handlePcClick = (pcId) => {
    const selected = pcs.find((pc) => pc.id === pcId);
    setSelectedPc(selected);
  };

  const handleAddPcClick = () => {
    navigate('/partscertification');
  };

  const handleEditPC = async (pcId, newName) => {
    try {
      await updatePCName(pcId, newName);
      setPcs(pcs.map(pc => 
        pc.id === pcId ? { ...pc, name: newName } : pc
      ));
      if (selectedPc?.id === pcId) {
        setSelectedPc(prev => ({ ...prev, name: newName }));
      }
    } catch (error) {
      console.error("PC 이름 변경 중 오류 발생:", error);
      throw error;
    }
  };

  const handleDeletePC = async (pcId) => {
    try {
      await deletePC(pcId);
      const updatedPcs = pcs.filter(pc => pc.id !== pcId);
      setPcs(updatedPcs);
      
      if (selectedPc?.id === pcId) {
        const nextPc = updatedPcs[0] || null;
        setSelectedPc(nextPc);
        if (!nextPc) {
          setPartsData([]);
        }
      }
    } catch (error) {
      console.error("PC 삭제 중 오류 발생:", error);
      alert("PC 삭제 중 오류가 발생했습니다");
    }
  };

  const handleShare = async () => {
    if (!selectedPc) return;
    
    try {
      const uuid = await createUUID(selectedPc.id);
      const shareUrl = `${window.location.origin}/shared?uuid=${uuid}`;
      
      await navigator.clipboard.writeText(shareUrl);
      alert('공유 링크가 클립보드에 복사되었습니다.');
    } catch (error) {
      console.error("공유 링크 생성 중 오류 발생:", error);
      alert("공유 링크 생성에 실패했습니다.");
    }
  };

  return (
    <div className="layout">
      <PCList
        pcs={pcs}
        selectedPc={selectedPc}
        onPcClick={handlePcClick}
        onEditPC={handleEditPC}
        onDeletePC={handleDeletePC}
        onAddPC={handleAddPcClick}
      />
      <main className={`part-list ${isPartsLoading ? 'loading' : ''}`}>
        {selectedPc && (
          <div className="part-list-header">
            <h2>{selectedPc.name}</h2>
            <button 
              className="share-button"
              onClick={handleShare}
            >
              공유하기
            </button>
          </div>
        )}
        {partsData.map((part, index) => (
          <PartItem key={index} part={part} />
        ))}
      </main>
    </div>
  );
};

export default CertifiedCombination;