Skip to content
Snippets Groups Projects
Commit 3736a80b authored by 정원제's avatar 정원제 :guitar:
Browse files

hotfix: 각 PC 상태가 별도로 관리되도록 조정

parent ebc54d98
No related branches found
No related tags found
No related merge requests found
Pipeline #10809 passed
import React, { useState } from 'react';
const PCItem = ({ pc, isSelected, onPcClick, onEdit, onDelete }) => {
const [isEditing, setIsEditing] = useState(false);
const [editName, setEditName] = useState(pc.name);
const [isLoading, setIsLoading] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
const [error, setError] = useState(null);
const handleEditClick = (e) => {
e.stopPropagation();
setIsEditing(true);
setEditName(pc.name);
setError(null);
};
const handleCancel = (e) => {
e.stopPropagation();
setIsEditing(false);
setError(null);
};
const handleSubmit = async (e) => {
e.stopPropagation();
if (!editName.trim()) {
setError("PC 이름을 입력해주세요");
return;
}
setIsLoading(true);
try {
await onEdit(pc.id, editName);
setIsEditing(false);
} catch (error) {
setError("PC 이름 변경 중 오류가 발생했습니다");
} finally {
setIsLoading(false);
}
};
const handleDelete = async (e) => {
e.stopPropagation();
if (!window.confirm('정말로 이 PC를 삭제하시겠습니까?')) {
return;
}
setIsDeleting(true);
try {
await onDelete(pc.id);
} catch (error) {
console.error("PC 삭제 중 오류 발생:", error);
} finally {
setIsDeleting(false);
}
};
return (
<li
className={`pc-item ${isSelected ? 'active' : ''}`}
>
{isEditing ? (
<div className="edit-name-container" onClick={e => e.stopPropagation()}>
<input
type="text"
value={editName}
onChange={(e) => setEditName(e.target.value)}
placeholder="PC 이름 입력"
/>
<div className="edit-buttons">
<button
onClick={handleSubmit}
disabled={isLoading}
>
{isLoading ? '저장 중...' : '저장'}
</button>
<button
onClick={handleCancel}
className="cancel-button"
disabled={isLoading}
>
취소
</button>
</div>
{error && <div className="error-message">{error}</div>}
</div>
) : (
<div className="pc-item-content" onClick={() => onPcClick(pc.id)}>
<span>{pc.name}</span>
<div className="pc-item-buttons">
<button
className="edit-button"
onClick={handleEditClick}
disabled={isDeleting}
>
수정
</button>
<button
className="delete-button"
onClick={handleDelete}
disabled={isDeleting}
>
{isDeleting ? '삭제 중...' : '삭제'}
</button>
</div>
</div>
)}
</li>
);
};
export default PCItem;
\ No newline at end of file
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import PCItem from "./PCItem";
const PCList = ({ pcs, selectedPc, onPcClick }) => ( const PCList = ({
pcs,
selectedPc,
onPcClick,
onEditPC,
onDeletePC,
onAddPC
}) => {
return (
<aside className="sidebar"> <aside className="sidebar">
<h3>내 PC 목록</h3> <h3>내 PC 목록</h3>
<ul> <ul>
{pcs.map((pc) => ( {pcs.map((pc) => (
<li <PCItem
key={pc.id} key={pc.id}
onClick={() => onPcClick(pc.id)} pc={pc}
className={`pc-item ${selectedPc && selectedPc.id === pc.id ? 'active' : ''}`} isSelected={selectedPc && selectedPc.id === pc.id}
> onPcClick={onPcClick}
{pc.name} onEdit={onEditPC}
</li> onDelete={onDeletePC}
/>
))} ))}
</ul> </ul>
<button className="add-pc-btn"> <button className="add-pc-btn" onClick={onAddPC}>
<Link to="/partscertification" className="add-pc-btn-link">
<span>+</span> <span>+</span>
<span>새 PC 등록하기</span> <span>새 PC 등록하기</span>
</Link>
</button> </button>
</aside> </aside>
); );
};
export default PCList; export default PCList;
\ No newline at end of file
...@@ -6,18 +6,14 @@ import './MyCombinationPage.css'; ...@@ -6,18 +6,14 @@ import './MyCombinationPage.css';
import PartItem from "@/components/PartItem"; import PartItem from "@/components/PartItem";
import updatePCName from "@/api/my/updatePCName"; import updatePCName from "@/api/my/updatePCName";
import deletePC from "@/api/my/deletePC"; import deletePC from "@/api/my/deletePC";
import PCList from "@/components/PCList";
const CertifiedCombination = () => { const CertifiedCombination = () => {
const [pcs, setPcs] = useState([]); const [pcs, setPcs] = useState([]);
const [selectedPc, setSelectedPc] = useState(null); const [selectedPc, setSelectedPc] = useState(null);
const [partsData, setPartsData] = useState([]); const [partsData, setPartsData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [editingPcId, setEditingPcId] = useState(null);
const [editingName, setEditingName] = useState("");
const navigate = useNavigate();
const [isPartsLoading, setIsPartsLoading] = useState(false); const [isPartsLoading, setIsPartsLoading] = useState(false);
const [isDeleting, setIsDeleting] = useState(false); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
const fetchPCs = async () => { const fetchPCs = async () => {
...@@ -71,52 +67,19 @@ const CertifiedCombination = () => { ...@@ -71,52 +67,19 @@ const CertifiedCombination = () => {
navigate('/partscertification'); navigate('/partscertification');
}; };
const handleEditClick = (pc) => { const handleEditPC = async (pcId, newName) => {
setError(null);
setEditingPcId(pc.id);
setEditingName(pc.name);
};
const handleCancel = () => {
setEditingPcId(null);
setError(null);
};
const handleNameSubmit = async (pcId) => {
if (!editingName.trim()) {
setError("PC 이름을 입력해주세요");
return;
}
setIsLoading(true);
setError(null);
try { try {
await updatePCName(pcId, editingName); await updatePCName(pcId, newName);
setPcs(pcs.map(pc => setPcs(pcs.map(pc =>
pc.id === pcId ? { ...pc, name: editingName } : pc pc.id === pcId ? { ...pc, name: newName } : pc
)); ));
setEditingPcId(null);
} catch (error) { } catch (error) {
setError("PC 이름 변경 중 오류가 발생했습니다");
console.error("PC 이름 변경 중 오류 발생:", error); console.error("PC 이름 변경 중 오류 발생:", error);
} finally { throw error;
setIsLoading(false);
} }
}; };
const handleNameChange = (e) => { const handleDeletePC = async (pcId) => {
setEditingName(e.target.value);
};
const handleDeleteClick = async (pcId, e) => {
e.stopPropagation();
if (!window.confirm('정말로 이 PC를 삭제하시겠습니까?')) {
return;
}
setIsDeleting(true);
try { try {
await deletePC(pcId); await deletePC(pcId);
setPcs(pcs.filter(pc => pc.id !== pcId)); setPcs(pcs.filter(pc => pc.id !== pcId));
...@@ -126,85 +89,19 @@ const CertifiedCombination = () => { ...@@ -126,85 +89,19 @@ const CertifiedCombination = () => {
} catch (error) { } catch (error) {
console.error("PC 삭제 중 오류 발생:", error); console.error("PC 삭제 중 오류 발생:", error);
alert("PC 삭제 중 오류가 발생했습니다"); alert("PC 삭제 중 오류가 발생했습니다");
} finally {
setIsDeleting(false);
} }
}; };
return ( return (
<div className="layout"> <div className="layout">
<aside className="sidebar"> <PCList
<h3>내 PC 목록</h3> pcs={pcs}
<ul> selectedPc={selectedPc}
{pcs.map((pc) => ( onPcClick={handlePcClick}
<li onEditPC={handleEditPC}
key={pc.id} onDeletePC={handleDeletePC}
className={`pc-item ${selectedPc && selectedPc.id === pc.id ? 'active' : ''}`} onAddPC={handleAddPcClick}
>
{editingPcId === pc.id ? (
<div className="edit-name-container">
<input
type="text"
value={editingName}
onChange={handleNameChange}
onClick={(e) => e.stopPropagation()}
placeholder="PC 이름 입력"
/> />
<div className="edit-buttons">
<button
onClick={(e) => {
e.stopPropagation();
handleNameSubmit(pc.id);
}}
disabled={isLoading}
>
{isLoading ? '저장 중...' : '저장'}
</button>
<button
onClick={(e) => {
e.stopPropagation();
handleCancel();
}}
className="cancel-button"
disabled={isLoading}
>
취소
</button>
</div>
{error && <div className="error-message">{error}</div>}
</div>
) : (
<div className="pc-item-content" onClick={() => handlePcClick(pc.id)}>
<span>{pc.name}</span>
<div className="pc-item-buttons">
<button
className="edit-button"
onClick={(e) => {
e.stopPropagation();
handleEditClick(pc);
}}
>
수정
</button>
<button
className="delete-button"
onClick={(e) => handleDeleteClick(pc.id, e)}
disabled={isDeleting}
>
{isDeleting ? '삭제 중...' : '삭제'}
</button>
</div>
</div>
)}
</li>
))}
</ul>
<button className="add-pc-btn" onClick={handleAddPcClick}>
<span>+</span>
<span>새 PC 등록하기</span>
</button>
</aside>
<main className={`part-list ${isPartsLoading ? 'loading' : ''}`}> <main className={`part-list ${isPartsLoading ? 'loading' : ''}`}>
{partsData.map((part, index) => ( {partsData.map((part, index) => (
<PartItem key={index} part={part} /> <PartItem key={index} part={part} />
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment