Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 마이페이지에서 사용자가 자신의 프로젝트를 삭제할 수 있는 기능을 도입합니다. 백엔드 API 연동부터 프론트엔드 UI 컴포넌트(삭제 버튼, 확인 모달)까지 전반적인 삭제 흐름을 구현하여 사용자 경험을 개선하고 프로젝트 관리를 용이하게 합니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
마이페이지의 프로젝트 삭제 기능 추가에 대한 PR 잘 보았습니다. 전반적으로 React Query의 useMutation을 활용한 데이터 처리와 상태 관리가 잘 구현되었습니다. 코드의 가독성과 안정성을 높일 수 있는 몇 가지 개선점을 제안드립니다. ProjectListItem에서는 더 시맨틱하고 접근성이 좋은 IconButton 사용을 제안했고, ProjectListSection에서는 ConfirmDialog를 조건부로 렌더링하여 잠재적인 오류를 방지하고 코드를 간소화하는 방법을 제안했습니다. 자세한 내용은 각 주석을 참고해주세요.
| <Flex | ||
| as="button" | ||
| align="center" | ||
| justify="center" | ||
| borderRadius="md" | ||
| p={1.5} | ||
| cursor="pointer" | ||
| _hover={{ bg: "neutral.100" }} | ||
| transition="background 0.15s" | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| onDelete(); | ||
| }} | ||
| > | ||
| <DeleteIcon color="neutral.400" boxSize={4} /> | ||
| </Flex> |
There was a problem hiding this comment.
Chakra UI의 IconButton 컴포넌트를 사용하면 더 간결하고 시맨틱한 코드를 작성할 수 있습니다. IconButton은 접근성(키보드 네비게이션, ARIA 속성 등)을 기본적으로 지원하며, hover 및 focus 상태 관리도 내장되어 있어 직접 구현할 필요가 없습니다. <Flex as="button"> 대신 IconButton을 사용하시는 것을 권장합니다. IconButton을 사용하려면 @chakra-ui/react에서 import해야 합니다.
<IconButton
aria-label="프로젝트 삭제"
icon={<DeleteIcon color="neutral.400" boxSize={4} />}
variant="ghost"
size="sm"
onClick={(e) => {
e.stopPropagation();
onDelete();
}}
/>
| <ConfirmDialog | ||
| open={deleteTarget !== null} | ||
| onOpenChange={(open) => { | ||
| if (!open) setDeleteTarget(null); | ||
| }} | ||
| title="프로젝트 삭제" | ||
| description={`"${deleteTarget?.title}" 프로젝트를 삭제하시겠습니까?`} | ||
| confirmLabel="삭제" | ||
| cancelLabel="취소" | ||
| onConfirm={() => { | ||
| if (deleteTarget) deleteProject(deleteTarget.id); | ||
| }} | ||
| /> |
There was a problem hiding this comment.
deleteTarget이 null일 때 ConfirmDialog가 렌더링되지는 않지만, description prop으로 전달되는 deleteTarget?.title은 undefined로 평가될 수 있습니다. 이 경우 "undefined" 프로젝트를 삭제하시겠습니까?와 같은 문자열이 생성될 수 있습니다. deleteTarget이 존재할 때만 ConfirmDialog를 렌더링하도록 하여 이 문제를 방지하고 코드를 더 명확하게 만들 수 있습니다. 이렇게 하면 onConfirm 핸들러 내에서 불필요한 null 체크도 제거할 수 있습니다.
| <ConfirmDialog | |
| open={deleteTarget !== null} | |
| onOpenChange={(open) => { | |
| if (!open) setDeleteTarget(null); | |
| }} | |
| title="프로젝트 삭제" | |
| description={`"${deleteTarget?.title}" 프로젝트를 삭제하시겠습니까?`} | |
| confirmLabel="삭제" | |
| cancelLabel="취소" | |
| onConfirm={() => { | |
| if (deleteTarget) deleteProject(deleteTarget.id); | |
| }} | |
| /> | |
| {deleteTarget && ( | |
| <ConfirmDialog | |
| open | |
| onOpenChange={(open) => { | |
| if (!open) setDeleteTarget(null); | |
| }} | |
| title="프로젝트 삭제" | |
| description={`"${deleteTarget.title}" 프로젝트를 삭제하시겠습니까?`} | |
| confirmLabel="삭제" | |
| cancelLabel="취소" | |
| onConfirm={() => deleteProject(deleteTarget.id)} | |
| /> | |
| )} |
2 participants
📝 요약 (Summary)
마이페이지 프로젝트 목록에서 프로젝트를 삭제 기능 추가했습니다.
✅ 주요 변경 사항 (Key Changes)
💻 상세 구현 내용 (Implementation Details)
삭제 API 및 훅 (
useDeleteProject)DELETE /api/projects/:projectId엔드포인트를 호출하는 API 함수와useMutation기반 커스텀 훅을 구현했습니다.onSuccess에서 프로젝트 목록 쿼리를 invalidate하여 삭제 후 목록이 자동 갱신됩니다.onError에서 토스트로 에러 메시지를 표시합니다.프로젝트 카드 삭제 버튼 (
ProjectListItem)각 프로젝트 카드 우측에 삭제 아이콘 버튼을 추가했습니다.
클릭 시 이벤트가 부모 요소로 전파되는 이벤트 버블링을 방지하여 카드 클릭 시 상세 이동으로 이동과 분리됩니다.
삭제 확인 다이얼로그 (
ConfirmDialog)Chakra UI Dialog 기반 공용 확인 다이얼로그를 구현했습니다.
삭제 시 해당 프로젝트 제목을 포함한 확인 메시지를 표시합니다.
프로젝트 카드 상태별 색상 및 유형별 아이콘
프로젝트 상태에 따라 카드 아이콘 영역의 색상을 분기합니다.
COMPLETED - seed (초록)
IN_PROGRESS - progress (노랑)
과제 유형(RoadmapType)별로 아이콘을 매핑하는 ROADMAP_TYPE_ICON 상수를 추가하여 유형에 맞는 아이콘을 표시합니다.
디자인 토큰 (progress)
color-semantic-token.ts에 progress 시맨틱 토큰 Chakra 기본 yellow 색상 사용해서 추가했습니다.
🚀 트러블 슈팅 (Trouble Shooting)
해당 없음
📸 스크린샷 (Screenshots)
#️⃣ 관련 이슈 (Related Issues)