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

feat: pc 삭제 버튼 및 api 구현

parent 921c6ad4
Branches
No related tags found
No related merge requests found
Pipeline #10798 passed
import axios from '../axios';
const deletePC = async (pcId) => {
try {
const response = await axios.delete(`/my/pc/${pcId}`);
return response.data;
} catch (error) {
if (error.response?.status === 401) {
const unauthorizedError = new Error("인증되지 않은 요청입니다");
unauthorizedError.response = {
data: {
message: "인증되지 않은 요청입니다",
statusCode: 401,
data: {}
}
};
throw unauthorizedError;
}
throw error;
}
};
export default deletePC;
\ No newline at end of file
......@@ -404,7 +404,7 @@ export const handlers = [
http.post(`${api}/auth/verify/email`, async ({ request }) => {
const { email } = await request.json();
return HttpResponse.json({
message: "인증번호가 해당 이메일로 발송었습니다.",
message: "인증번호가 해당 이메일로 발송��었습니다.",
statusCode: 200,
data: {
verificationCode: "123456" // 실제로는 이메일로 발송됨
......@@ -518,6 +518,27 @@ export const handlers = [
}
});
}),
// PC 삭제
http.delete(`${api}/my/pc/:pcId`, async ({ request, params }) => {
const authHeader = request.headers.get('Authorization');
if (!authHeader) {
return HttpResponse.json({
message: "인증되지 않은 요청입니다",
statusCode: 401,
data: {}
}, { status: 401 });
}
return HttpResponse.json({
message: "PC가 성공적으로 삭제되었습니다",
statusCode: 200,
data: {
id: params.pcId,
deletedAt: new Date().toISOString()
}
});
}),
];
// 부품 조회 함수
......
......@@ -274,3 +274,36 @@
margin-right: 1rem;
}
}
.pc-item-buttons {
display: flex;
gap: 8px;
}
.edit-button,
.delete-button {
padding: 4px 12px;
font-size: 13px;
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 8px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.edit-button:hover,
.delete-button:hover {
background-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-light);
transform: translateY(-1px);
}
.edit-button:disabled,
.delete-button:disabled {
background-color: var(--primary-light);
border-color: var(--primary-light);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
......@@ -5,6 +5,7 @@ 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";
const CertifiedCombination = () => {
const [pcs, setPcs] = useState([]);
......@@ -16,6 +17,7 @@ const CertifiedCombination = () => {
const [editingName, setEditingName] = useState("");
const navigate = useNavigate();
const [isPartsLoading, setIsPartsLoading] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
useEffect(() => {
const fetchPCs = async () => {
......@@ -107,6 +109,28 @@ const CertifiedCombination = () => {
setEditingName(e.target.value);
};
const handleDeleteClick = async (pcId, e) => {
e.stopPropagation();
if (!window.confirm('정말로 이 PC를 삭제하시겠습니까?')) {
return;
}
setIsDeleting(true);
try {
await deletePC(pcId);
setPcs(pcs.filter(pc => pc.id !== pcId));
if (selectedPc?.id === pcId) {
setSelectedPc(pcs.find(pc => pc.id !== pcId) || null);
}
} catch (error) {
console.error("PC 삭제 중 오류 발생:", error);
alert("PC 삭제 중 오류가 발생했습니다");
} finally {
setIsDeleting(false);
}
};
return (
<div className="layout">
<aside className="sidebar">
......@@ -152,6 +176,7 @@ const CertifiedCombination = () => {
) : (
<div className="pc-item-content" onClick={() => handlePcClick(pc.id)}>
<span>{pc.name}</span>
<div className="pc-item-buttons">
<button
className="edit-button"
onClick={(e) => {
......@@ -161,6 +186,14 @@ const CertifiedCombination = () => {
>
수정
</button>
<button
className="delete-button"
onClick={(e) => handleDeleteClick(pc.id, e)}
disabled={isDeleting}
>
{isDeleting ? '삭제 중...' : '삭제'}
</button>
</div>
</div>
)}
</li>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment