Feat: #204 일정 수정 모달에서 일정 상세 모달로 돌아가기 버튼 추가 #205
Conversation
Walkthrough이 변경 사항은 Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (21)
src/components/modal/ModalButton.tsx (2)
3-3: 색상 속성 추가에 대한 승인 및 개선 제안
color속성을 추가한 것은 좋은 변경사항입니다. 버튼 텍스트의 스타일을 더 유연하게 조정할 수 있게 되었습니다.개선 제안: 가독성을 높이기 위해 이 색상 옵션들을 별도의 타입으로 정의하는 것을 고려해 보세요. 예를 들어:
type ButtonTextColor = 'text-white' | 'text-emphasis' | 'text-default'; type ModalButtonProps = React.PropsWithChildren<{ // ... 다른 속성들 color: ButtonTextColor; // ... 나머지 속성들 }>;이렇게 하면 코드의 재사용성과 유지보수성이 향상될 수 있습니다.
8-8: 컴포넌트 구현 변경 승인 및 일관성 개선 제안
ModalButton컴포넌트에colorprop을 추가하고className에서 사용한 것은 적절한 변경입니다. 이로 인해 버튼 텍스트 색상을 동적으로 스타일링할 수 있게 되었습니다.개선 제안:
backgroundColorprop도colorprop과 유사한 방식으로 처리하는 것이 어떨까요? 예를 들어:type ButtonBackgroundColor = 'bg-main' | 'bg-delete' | 'bg-sub' | 'bg-button' | 'bg-kakao'; type ModalButtonProps = React.PropsWithChildren<{ // ... 다른 속성들 color: ButtonTextColor; backgroundColor: ButtonBackgroundColor; // ... 나머지 속성들 }>;이렇게 하면
color와backgroundColor속성의 처리 방식이 일관되어 코드의 가독성과 유지보수성이 향상될 수 있습니다.Also applies to: 15-15
src/components/modal/team/CreateModalTeam.tsx (1)
27-29: 색상 속성 추가 승인
ModalButton컴포넌트에color속성을 추가한 것은 좋은 변경사항입니다. 이는 버튼 스타일링을 더 동적이고 일관되게 만드는 데 도움이 됩니다.다만, 향후 유지보수성을 높이기 위해 다음과 같은 개선을 고려해 보시는 것은 어떨까요?
-<ModalButton formId={createTeamFormId} color="text-white" backgroundColor="bg-main"> +<ModalButton formId={createTeamFormId} variant="primary"> 등록 </ModalButton>이렇게 하면
variant속성을 통해 미리 정의된 스타일 세트를 사용할 수 있어, 코드의 일관성을 유지하고 향후 스타일 변경 시 유연성을 높일 수 있습니다.src/components/task/calendar/CustomEventWrapper.tsx (2)
Line range hint
1-22: 타입 정의가 잘 되어 있습니다. 약간의 개선 제안이 있습니다.새로운
CustomEventWrapperProps타입 정의가 잘 되어 있습니다. 커뮤니티에서 제공하는 TypeScript 정의와 실제 컴포넌트에 전달되는 props 사이의 불일치를 해결하는 좋은 접근 방식입니다.가독성을 더욱 높이기 위해, 다음과 같이 타입 정의를 분리하는 것을 고려해 보세요:
type BaseEventWrapperProps = Omit<EventWrapperProps<CustomEvent>, 'continuesEarlier' | 'continuesLater'>; type CustomEventWrapperProps = PropsWithChildren< BaseEventWrapperProps & { continuesPrior: boolean; continuesAfter: boolean; } >;이렇게 하면 타입 정의가 더 명확해지고 필요한 경우
BaseEventWrapperProps를 재사용할 수 있습니다.
Line range hint
24-36: 컴포넌트 구현이 잘 되어 있습니다. 타입 안전성을 위한 작은 제안이 있습니다.
CustomEventWrapper컴포넌트의 구현이 잘 되어 있습니다. props를 새로운CustomEventWrapperProps타입으로 캐스팅한 것과hover:brightness-90CSS 클래스를 추가한 것은 좋은 변경사항입니다.타입 안전성을 더욱 높이기 위해, 다음과 같이 컴포넌트의 props 타입을 직접
CustomEventWrapperProps로 지정하는 것을 고려해 보세요:export default function CustomEventWrapper({ children, event, continuesPrior, continuesAfter }: CustomEventWrapperProps) { // ... 나머지 코드는 그대로 }이렇게 하면 타입 캐스팅을 피할 수 있고, TypeScript가 더 정확한 타입 체크를 수행할 수 있습니다.
src/components/modal/project/UpdateModalProject.tsx (2)
30-35:ModalButton컴포넌트의 변경사항이 적절해 보입니다.
colorprop이 추가되어 버튼 텍스트 색상을 동적으로 설정할 수 있게 되었습니다. 이는 PR 목표와 일치하며, 이전에 하드코딩된text-white클래스를 대체합니다.일관성을 위해 다음과 같이 prop 순서를 조정하는 것이 어떨까요?
<ModalButton formId={updateProjectFormId} + color="text-white" + backgroundColor="bg-main" onClick={handleUpdateClick} - color="text-white" - backgroundColor="bg-main" > 수정 </ModalButton>이렇게 하면 관련 스타일 prop들이 함께 그룹화되어 가독성이 향상될 것 같습니다.
Line range hint
1-38: PR 목표와 관련된 주요 기능이 누락되었습니다.현재 변경사항은
ModalButton의 스타일 관련 prop 추가에 국한되어 있습니다. 그러나 PR의 주요 목표인 다음 기능들이 구현되지 않았습니다:
- 일정 수정 모달에서 일정 상세 모달로 돌아가는 "뒤로 가기" 버튼 추가
- 일정 수정 후 모달이 자동으로 닫히는 기능 제거
이러한 기능을 구현하기 위해 다음과 같은 변경이 필요할 것 같습니다:
- "뒤로 가기" 버튼 추가
handleUpdateClick함수 수정하여 모달이 자동으로 닫히지 않도록 변경- 일정 상세 모달로 돌아가는 로직 구현
이러한 변경사항을 구현하는데 도움이 필요하시다면 말씀해 주세요. 구체적인 코드 제안을 드릴 수 있습니다.
src/components/modal/project-status/CreateModalProjectStatus.tsx (1)
30-32:ModalButton에colorprop 추가 승인
ModalButton컴포넌트에colorprop을 추가한 것은 좋은 개선입니다. 이는 버튼 스타일의 일관성과 유연성을 향상시킵니다.더 나은 재사용성을 위해
color값을 상수나 테마 설정에서 가져오는 것을 고려해 보세요. 예를 들어:import { COLORS } from '@/constants/theme'; // ... <ModalButton formId={createStatusFormId} color={COLORS.TEXT_WHITE} backgroundColor="bg-main"> 등록 </ModalButton>이렇게 하면 향후 색상 scheme을 쉽게 변경할 수 있습니다.
src/components/modal/task/CreateModalTask.tsx (1)
51-51: 버튼 텍스트 색상 설정이 명시적으로 추가되었습니다.이 변경은 버튼의 텍스트 색상을 명시적으로 설정하여 UI의 일관성을 개선합니다. 이는 좋은 변경사항입니다.
다만, 더 나은 유지보수를 위해 색상 값을 상수나 테마 설정으로 분리하는 것을 고려해 보시는 것은 어떨까요? 예를 들어:
const BUTTON_TEXT_COLOR = 'text-white'; // ... <ModalButton formId={createTaskFormId} color={BUTTON_TEXT_COLOR} backgroundColor="bg-main">이렇게 하면 나중에 색상 변경이 필요할 때 한 곳에서만 수정하면 되어 편리할 것 같습니다.
src/components/task/kanban/TaskItem.tsx (3)
49-56: DetailModalTask 컴포넌트 props 업데이트 승인 및 개선 제안
DetailModalTask컴포넌트의 props 업데이트는 적절합니다. 개별 속성을 전달하는 것은 더 명확하고 유연한 접근 방식입니다.성능 최적화를 위해
useMemo를 사용하여projectId와 같은 값을 메모이제이션하는 것을 고려해 보세요. 예:const memoizedProjectId = useMemo(() => project.projectId, [project.projectId]);그런 다음
projectId={memoizedProjectId}를 사용할 수 있습니다.
58-63: UpdateModalTask 컴포넌트 props 업데이트 승인 및 최적화 제안
UpdateModalTask컴포넌트의 props 업데이트는DetailModalTask의 변경사항과 일관성이 있어 적절합니다.성능 최적화를 위해
project객체 전체를 전달하는 대신 필요한 특정 속성만 전달하는 것을 고려해 보세요. 예를 들어:<UpdateModalTask projectId={project.projectId} taskId={taskId} openDetailModal={openDetailModal} onClose={closeUpdateModal} />이렇게 하면 불필요한 리렌더링을 방지하고 컴포넌트 간의 결합도를 낮출 수 있습니다.
Line range hint
1-68: 전체적인 변경 사항 요약 및 향후 개선 방향이 PR의 변경 사항들은 모달 기능 개선이라는 목표에 잘 부합합니다.
TaskItem컴포넌트가 더 구체적인 props를 처리하도록 업데이트되어 유연성이 향상되었습니다.향후 개선을 위한 제안:
- React Reparenting 문제 해결을 위한 구체적인 계획을 수립하세요.
- 성능 최적화를 위해
useMemo와 같은 React 훅을 적절히 활용하세요.- 컴포넌트 간 데이터 전달을 최소화하고 필요한 속성만 전달하도록 리팩토링을 고려하세요.
- 변경된 기능에 대한 단위 테스트를 추가하여 코드의 안정성을 높이세요.
이러한 개선사항들을 통해 코드의 품질과 성능을 더욱 향상시킬 수 있을 것입니다.
src/components/modal/project-status/UpdateModalProjectStatus.tsx (3)
64-66: 버튼 스타일링 개선 승인
ModalButton컴포넌트에color속성을 추가한 것은 좋은 변경사항입니다. 이는 버튼 텍스트의 가시성을 향상시키고 스타일링을 더 명확하게 만듭니다.일관성을 위해
backgroundColor속성도 문자열로 변경하는 것을 고려해보세요. 예를 들어:-<ModalButton formId={updateStatusFormId} color="text-white" backgroundColor="bg-main"> +<ModalButton formId={updateStatusFormId} color="text-white" backgroundColor="bg-main">이렇게 하면 모든 속성이 같은 형식을 가지게 되어 코드의 일관성이 향상됩니다.
67-69: 삭제 버튼 스타일링 개선 승인삭제 버튼에
color속성을 추가한 것은 적절한 변경사항입니다. 이로 인해 버튼 텍스트의 가시성이 향상되고 사용자 경험이 개선될 것입니다.앞서 제안한 것과 마찬가지로, 일관성을 위해
backgroundColor속성도 문자열로 변경하는 것을 고려해보세요. 예를 들어:-<ModalButton color="text-white" backgroundColor="bg-delete" onClick={() => handleDeleteClick(statusId)}> +<ModalButton color="text-white" backgroundColor="bg-delete" onClick={() => handleDeleteClick(statusId)}>이렇게 하면 모든 버튼 컴포넌트의 속성이 동일한 형식을 가지게 되어 코드의 일관성이 향상됩니다.
Line range hint
1-74: 전체적인 변경사항 요약 및 평가이 PR의 변경사항은
UpdateModalProjectStatus컴포넌트의 버튼 스타일링을 개선하는 데 중점을 두고 있습니다.ModalButton컴포넌트에color속성을 추가함으로써 버튼 텍스트의 가시성이 향상되었습니다. 이는 사용자 경험을 개선하고 인터페이스의 일관성을 높이는 데 기여할 것입니다.주요 개선사항:
- "수정" 및 "삭제" 버튼에
color="text-white"속성 추가- 버튼 스타일링의 명확성 및 일관성 향상
향후 개선을 위한 제안:
backgroundColor속성의 값도 문자열 형식으로 통일하여 코드의 일관성을 더욱 높일 수 있습니다.- 버튼 스타일에 대한 테마 또는 설정 파일을 만들어 중앙에서 관리하는 것을 고려해보세요. 이는 향후 스타일 변경 시 유지보수를 용이하게 할 것입니다.
전반적으로, 이 변경사항은 PR의 목표를 잘 달성하고 있으며, 사용자 인터페이스의 품질을 향상시키는 데 기여할 것입니다.
src/components/modal/task/UpdateModalTask.tsx (1)
217-219: "돌아가기" 버튼이 성공적으로 구현되었습니다.버튼 스타일링과
handleDetailClick함수의 사용이 적절합니다. PR의 목적을 완전히 달성했습니다.접근성 향상을 위해
aria-label을 추가하는 것을 고려해 보세요. 예:<ModalButton color="text-emphasis" backgroundColor="bg-button" onClick={handleDetailClick} aria-label="상세 모달로 돌아가기" > 돌아가기 </ModalButton>src/hooks/query/useTaskQuery.ts (1)
Line range hint
208-208: 쿼리 무효화 정밀도 향상 및 개선 제안
exact: true옵션을 추가한 것은 좋은 변경입니다. 이는useUpdateTaskInfo와 일관성 있게 적용되었습니다.개선 제안: 파일 및 담당자 쿼리 제거에도
exact: true옵션을 적용하는 것이 어떨까요? 이렇게 하면 더 정밀한 쿼리 관리가 가능할 것 같습니다.다음과 같이 변경을 고려해보세요:
-queryClient.removeQueries({ queryKey: filesQueryKey, exact: true }); -queryClient.removeQueries({ queryKey: assigneesQueryKey, exact: true }); +queryClient.removeQueries({ queryKey: filesQueryKey, exact: true }); +queryClient.removeQueries({ queryKey: assigneesQueryKey, exact: true });src/components/modal/task/DetailModalTask.tsx (3)
73-73: [로딩 상태 및 데이터 존재 여부 확인 로직 개선 제안]현재 로딩 상태와
task의 존재 여부만을 확인하고 있습니다. 렌더링 시status,assigneeList,taskFileList가 필요하므로 이들도 존재하는지 확인하는 것이 좋습니다.-{isStatusLoading || isTaskLoading || isAssigneeLoading || isTaskFileLoading || !task ? ( +{isStatusLoading || isTaskLoading || isAssigneeLoading || isTaskFileLoading || !task || !status || !assigneeList || !taskFileList ? (
86-86: [task.taskName사용 시 안전성 확인]
task.taskName을 사용할 때task객체가 존재한다고 가정하고 있습니다. 하지만 타입 안정성을 위해task?.taskName처럼 옵셔널 체이닝을 사용하는 것을 고려해보세요.-<span>{task.taskName}</span> +<span>{task?.taskName}</span>
90-90: [getTaskPeriod함수의 인자 전달 방식 확인]
getTaskPeriod함수에task객체 전체를 전달하고 있습니다. 해당 함수의 시그니처에 맞게 필요한 프로퍼티만 전달하는 것이 명확할 수 있습니다.-<span>{getTaskPeriod(task)}</span> +<span>{getTaskPeriod({ startDate: task.startDate, endDate: task.endDate })}</span>src/pages/project/CalendarPage.tsx (1)
37-37:initialTask선언 위치 개선 제안 [니트픽]
initialTask변수가 컴포넌트 함수 외부에 선언되어 있습니다. 컴포넌트 내부에 선언하여 코드의 응집도를 높이고 가독성을 향상시킬 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (14)
- src/components/modal/ModalButton.tsx (1 hunks)
- src/components/modal/project-status/CreateModalProjectStatus.tsx (1 hunks)
- src/components/modal/project-status/UpdateModalProjectStatus.tsx (1 hunks)
- src/components/modal/project/CreateModalProject.tsx (1 hunks)
- src/components/modal/project/UpdateModalProject.tsx (1 hunks)
- src/components/modal/task/CreateModalTask.tsx (1 hunks)
- src/components/modal/task/DetailModalTask.tsx (5 hunks)
- src/components/modal/task/UpdateModalTask.tsx (4 hunks)
- src/components/modal/team/CreateModalTeam.tsx (1 hunks)
- src/components/modal/team/UpdateModalTeam.tsx (1 hunks)
- src/components/task/calendar/CustomEventWrapper.tsx (1 hunks)
- src/components/task/kanban/TaskItem.tsx (2 hunks)
- src/hooks/query/useTaskQuery.ts (1 hunks)
- src/pages/project/CalendarPage.tsx (3 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/components/modal/team/UpdateModalTeam.tsx
🧰 Additional context used
🪛 Biome
src/components/modal/ModalButton.tsx
[error] 9-9: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (13)
src/components/modal/project/CreateModalProject.tsx (1)
25-27: 변경 사항이 적절해 보입니다.
ModalButton컴포넌트에colorprop이 추가되었습니다. 이는 버튼 텍스트의 색상을 동적으로 설정할 수 있게 해주는 좋은 개선사항입니다. 이 변경으로 인해 버튼의 스타일링이 더 유연해지고 재사용성이 향상될 것으로 보입니다.다음 스크립트를 실행하여 다른
ModalButton사용 위치에서도colorprop이 일관되게 사용되고 있는지 확인해 주세요:✅ Verification successful
이전 스크립트에서 파일 유형 인식 오류가 발생했습니다.
rg명령어의 파일 유형을typescriptreact에서tsx로 수정했습니다. 아래 스크립트를 실행하여 다시 확인해 주세요.
rg 명령어의 파일 유형 인식 오류로 인해 이전 스크립트가 실패했습니다.
rg명령어에서--type옵션 대신-g "*.tsx"를 사용하여.tsx파일에서ModalButton사용 위치를 검색하도록 수정했습니다. 아래 스크립트를 실행하여 다시 확인해 주세요.
검증 완료: 모든
ModalButton사용에colorprop이 포함되어 있습니다.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: `ModalButton` 컴포넌트의 사용을 확인합니다. # Test: `ModalButton` 컴포넌트의 모든 사용 위치를 검색합니다. # 예상 결과: 모든 `ModalButton` 사용에 `color` prop이 포함되어 있어야 합니다. rg --type typescript --type typescriptreact '<ModalButton' -A 3Length of output: 100
Script:
#!/bin/bash # Description: `ModalButton` 컴포넌트의 사용을 확인합니다. # Test: `ModalButton` 컴포넌트의 모든 사용 위치를 검색합니다. # 예상 결과: 모든 `ModalButton` 사용에 `color` prop이 포함되어 있어야 합니다. rg --type tsx '<ModalButton' -A 3Length of output: 63
Script:
#!/bin/bash # Description: `ModalButton` 컴포넌트의 사용을 확인합니다. # Test: `ModalButton` 컴포넌트의 모든 사용 위치를 검색합니다. # 예상 결과: 모든 `ModalButton` 사용에 `color` prop이 포함되어 있어야 합니다. rg -g "*.tsx" '<ModalButton' -A 3Length of output: 4277
src/components/task/kanban/TaskItem.tsx (1)
23-23: task 객체에서 statusId 추출 승인
statusId를 task 객체에서 추출하는 것은 적절한 변경사항입니다. 이는 업데이트된TaskItemProps타입과 일치하며, 모달 컴포넌트에 필요한 데이터를 제공합니다.src/components/modal/task/UpdateModalTask.tsx (4)
41-42: 새로운 prop이 올바르게 추가되었습니다.
openDetailModalprop의 추가는 PR의 목적인 "돌아가기" 버튼 기능 구현에 부합합니다. 타입이() => void로 정의된 것은 적절합니다.
45-50: 컴포넌트 함수 시그니처가 올바르게 업데이트되었습니다.새로운
openDetailModalprop이 컴포넌트 매개변수에 정확히 추가되었습니다. 기존 props와 일관된 구조분해할당 문법을 사용하여 가독성을 유지하고 있습니다.
135-135:handleFormSubmit함수가 간소화되었습니다.
async키워드 제거는 적절하지만,updateTaskInfoMutate가 비동기 함수일 경우 오류 처리에 영향을 줄 수 있습니다.오류 처리가 적절히 이루어지는지 확인해 주세요. 필요하다면 try-catch 블록을 사용하여 오류를 처리하는 것을 고려해 보세요.
137-141: "돌아가기" 기능이 올바르게 구현되었습니다.
handleDetailClick함수는 PR의 목적에 부합하며, 상세 모달을 열고 현재 모달을 닫는 순서가 논리적입니다. 사용자 경험 향상에 기여할 것으로 보입니다.src/hooks/query/useTaskQuery.ts (2)
185-185: 쿼리 무효화 정밀도 향상
exact: true옵션을 추가한 것은 좋은 변경입니다. 이 변경으로 인해 정확히 일치하는 쿼리만 무효화되어, 불필요한 리페치를 줄이고 성능을 향상시킬 수 있습니다.
185-185: 전체적인 변경 요약 및 영향이번 변경사항들은 쿼리 무효화의 정밀도를 향상시키는 데 중점을 두고 있습니다.
exact: true옵션을 추가함으로써, 불필요한 리페치를 줄이고 애플리케이션의 성능을 개선할 수 있습니다. 이러한 변경은 React Query의 최신 버전에서 권장되는 방식과 일치하며, 전반적으로 코드 품질을 향상시킵니다.다만,
useDeleteTask함수에서 파일 및 담당자 쿼리 제거 시에도exact: true옵션을 적용하면 더욱 일관성 있는 접근이 될 것 같습니다.Also applies to: 208-208
src/components/modal/task/DetailModalTask.tsx (5)
33-37: [데이터 패칭 훅의 의존성 및 데이터 일관성 확인]여러 개의
useRead훅을 사용하여 데이터를 패칭하고 있습니다. 각 훅이 의존하는 파라미터(projectId,statusId,taskId)가 올바르게 전달되고 있으며, 패칭된 데이터(status,task,assigneeList,taskFileList)가 컴포넌트 내에서 일관성 있게 사용되고 있는지 확인해주세요.
128-131: [추가된 ModalButton Props에 따른 스타일 적용 확인]
ModalButton컴포넌트에color와backgroundColorProps가 추가되었습니다. 해당 Props가 제대로 전달되고 스타일이 의도한 대로 적용되고 있는지 확인해주세요.
19-21: [변경된 Props에 따른 영향 범위 확인 요청]
ViewModalTaskProps의 타입이 변경되어projectId,statusId,taskId를 받도록 수정되었습니다. 이로 인해DetailModalTask컴포넌트를 사용하는 모든 곳에서 해당 Props를 올바르게 전달하고 있는지 확인해야 합니다.다음 스크립트를 사용하여
DetailModalTask컴포넌트의 사용처를 찾아 Props가 올바르게 수정되었는지 검토해주세요:#!/bin/bash # Description: DetailModalTask 컴포넌트의 사용처 확인 rg --type tsx 'DetailModalTask' src/
12-12: [확인 필요] 사용되지 않는 import 확인
useDeleteTask,useReadAssignees,useReadStatusTasks,useReadTaskFiles중 실제로 사용되지 않는 훅이 있는지 확인해주세요. 사용되지 않는 경우 import 구문에서 제거하여 코드의 가독성과 성능을 향상시킬 수 있습니다.다음 스크립트를 실행하여 해당 훅들이 사용되고 있는지 확인해보세요:
54-54: [함수 호출 시 인자 순서 및 타입 확인 필요]
fetchData함수 호출 시 전달되는 인자들의 순서와 타입이downloadTaskFile함수의 정의와 일치하는지 확인해주세요. 인자 순서가 다를 경우 예상치 못한 동작이나 에러가 발생할 수 있습니다.다음 스크립트를 사용하여
downloadTaskFile함수의 정의를 확인해주세요:
|
@Yoonyesol @ice-bear98 리뷰 감사합니다! 돌아가기 버튼 잘 추가한 것 같아요 ㅎㅎ |
PR Type
What kind of change does this PR introduce?
Related Issues
What does this PR do?
Other information
캘린더 양식에서는 문제없이 수정이 가능하지만, 칸반 보드에서 문제가 되는 부분이 있습니다.
일정 수정 모달에서는 다음과 같이 크게 3가지 영역으로 나뉘어 개별적으로 일정 정보를 수정하고 있습니다.
이중에서 1번의 경우에서 특히 일정 상태를 수정할 때 발생하는 문제입니다. (일정명, 기간, 일정 내용 수정은 괜찮습니다.) 일정명, 기간, 일정 내용은 수정이 되더라도 TaskItem이라는 컴포넌트가 리렌더링이될 뿐 빠르게 언마운트 후 마운트하지 않습니다. 하지만 일정 상태를 수정하는 경우, 상태를 수정한 TaskItem에 한해서면 언마운트 후 마운트를 수행합니다. 때문에 일정 수정 모달의 showModal 정보가 초기화 되면서 모달 컴포넌트가 자동으로 사라집니다.
처음에는 react 상태(props, state), key 등의 영향으로 발생하는건가 고민해보았지만, 뚜렷히 원인을 찾을 수 없었고, react-beautiful-dnd 라이브러리의 issue를 확인하여 비슷한 상황을 겪은 내용을 찾았습니다. 해당 이슈도 dragend 이후 item이 unmount-remount가 일어난다는 것이었고, 이를 통해 react에도 등록되어 있는 이슈임을 알게 되었습니다.
내용을 읽어보던중 react reparenting이라는 개념을 처음 접하게 되었습니다. react reparenting이란 부모에 속한 자식 노드가 다른 부모에게 옮겨갈 때 구성된 트리 구조가 변경되게 되어 언마운트와 리마운트가 일어난다는 개념이었습니다. 일단은 지금까지 만든 내용을 넣고 다른 PR에서 해결하려고 생각하고 있습니다.
Reparenting is now possible with React를 참고하여 해결책을 찾아보려고 합니다.
View