Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
M
meanspec-frontend
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
MeanSpec (SCE338 2024-2 Group 1)
meanspec-frontend
Commits
3736a80b
Commit
3736a80b
authored
5 months ago
by
정원제
Browse files
Options
Downloads
Patches
Plain Diff
hotfix: 각 PC 상태가 별도로 관리되도록 조정
parent
ebc54d98
Branches
Branches containing commit
No related tags found
No related merge requests found
Pipeline
#10809
passed
5 months ago
Stage: package
Changes
3
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
src/components/PCItem.jsx
+111
-0
111 additions, 0 deletions
src/components/PCItem.jsx
src/components/PCList.jsx
+29
-21
29 additions, 21 deletions
src/components/PCList.jsx
src/pages/MyCombinationPage/MyCombinationPage.jsx
+15
-118
15 additions, 118 deletions
src/pages/MyCombinationPage/MyCombinationPage.jsx
with
155 additions
and
139 deletions
src/components/PCItem.jsx
0 → 100644
+
111
−
0
View file @
3736a80b
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
This diff is collapsed.
Click to expand it.
src/components/PCList.jsx
+
29
−
21
View file @
3736a80b
import
React
from
"
react
"
;
import
{
Link
}
from
"
react-router-do
m
"
;
import
PCItem
from
"
./PCIte
m
"
;
const
PCList
=
({
pcs
,
selectedPc
,
onPcClick
})
=>
(
const
PCList
=
({
pcs
,
selectedPc
,
onPcClick
,
onEditPC
,
onDeletePC
,
onAddPC
})
=>
{
return
(
<
aside
className
=
"sidebar"
>
<
h3
>
내 PC 목록
</
h3
>
<
ul
>
{
pcs
.
map
((
pc
)
=>
(
<
li
<
PCItem
key
=
{
pc
.
id
}
onClick
=
{
()
=>
onPcClick
(
pc
.
id
)
}
className
=
{
`pc-item
${
selectedPc
&&
selectedPc
.
id
===
pc
.
id
?
'
active
'
:
''
}
`
}
>
{
pc
.
name
}
</
li
>
pc
=
{
pc
}
isSelected
=
{
selectedPc
&&
selectedPc
.
id
===
pc
.
id
}
onPcClick
=
{
onPcClick
}
onEdit
=
{
onEditPC
}
onDelete
=
{
onDeletePC
}
/>
))
}
</
ul
>
<
button
className
=
"add-pc-btn"
>
<
Link
to
=
"/partscertification"
className
=
"add-pc-btn-link"
>
<
button
className
=
"add-pc-btn"
onClick
=
{
onAddPC
}
>
<
span
>
+
</
span
>
<
span
>
새 PC 등록하기
</
span
>
</
Link
>
</
button
>
</
aside
>
);
};
export
default
PCList
;
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/pages/MyCombinationPage/MyCombinationPage.jsx
+
15
−
118
View file @
3736a80b
...
...
@@ -6,18 +6,14 @@ 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
"
;
const
CertifiedCombination
=
()
=>
{
const
[
pcs
,
setPcs
]
=
useState
([]);
const
[
selectedPc
,
setSelectedPc
]
=
useState
(
null
);
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
[
isDeleting
,
setIsDeleting
]
=
useState
(
false
);
const
navigate
=
useNavigate
(
);
useEffect
(()
=>
{
const
fetchPCs
=
async
()
=>
{
...
...
@@ -71,52 +67,19 @@ const CertifiedCombination = () => {
navigate
(
'
/partscertification
'
);
};
const
handleEditClick
=
(
pc
)
=>
{
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
);
const
handleEditPC
=
async
(
pcId
,
newName
)
=>
{
try
{
await
updatePCName
(
pcId
,
editing
Name
);
await
updatePCName
(
pcId
,
new
Name
);
setPcs
(
pcs
.
map
(
pc
=>
pc
.
id
===
pcId
?
{
...
pc
,
name
:
editing
Name
}
:
pc
pc
.
id
===
pcId
?
{
...
pc
,
name
:
new
Name
}
:
pc
));
setEditingPcId
(
null
);
}
catch
(
error
)
{
setError
(
"
PC 이름 변경 중 오류가 발생했습니다
"
);
console
.
error
(
"
PC 이름 변경 중 오류 발생:
"
,
error
);
}
finally
{
setIsLoading
(
false
);
throw
error
;
}
};
const
handleNameChange
=
(
e
)
=>
{
setEditingName
(
e
.
target
.
value
);
};
const
handleDeleteClick
=
async
(
pcId
,
e
)
=>
{
e
.
stopPropagation
();
if
(
!
window
.
confirm
(
'
정말로 이 PC를 삭제하시겠습니까?
'
))
{
return
;
}
setIsDeleting
(
true
);
const
handleDeletePC
=
async
(
pcId
)
=>
{
try
{
await
deletePC
(
pcId
);
setPcs
(
pcs
.
filter
(
pc
=>
pc
.
id
!==
pcId
));
...
...
@@ -126,85 +89,19 @@ const CertifiedCombination = () => {
}
catch
(
error
)
{
console
.
error
(
"
PC 삭제 중 오류 발생:
"
,
error
);
alert
(
"
PC 삭제 중 오류가 발생했습니다
"
);
}
finally
{
setIsDeleting
(
false
);
}
};
return
(
<
div
className
=
"layout"
>
<
aside
className
=
"sidebar"
>
<
h3
>
내 PC 목록
</
h3
>
<
ul
>
{
pcs
.
map
((
pc
)
=>
(
<
li
key
=
{
pc
.
id
}
className
=
{
`pc-item
${
selectedPc
&&
selectedPc
.
id
===
pc
.
id
?
'
active
'
:
''
}
`
}
>
{
editingPcId
===
pc
.
id
?
(
<
div
className
=
"edit-name-container"
>
<
input
type
=
"text"
value
=
{
editingName
}
onChange
=
{
handleNameChange
}
onClick
=
{
(
e
)
=>
e
.
stopPropagation
()
}
placeholder
=
"PC 이름 입력"
<
PCList
pcs
=
{
pcs
}
selectedPc
=
{
selectedPc
}
onPcClick
=
{
handlePcClick
}
onEditPC
=
{
handleEditPC
}
onDeletePC
=
{
handleDeletePC
}
onAddPC
=
{
handleAddPcClick
}
/>
<
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
'
:
''
}
`
}
>
{
partsData
.
map
((
part
,
index
)
=>
(
<
PartItem
key
=
{
index
}
part
=
{
part
}
/>
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment