리스트 페이지 개발#75
Conversation
Summary of ChangesHello @HWAN0218, 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! 이 풀 리퀘스트는 리스트 페이지의 기능과 사용자 경험을 전반적으로 개선하는 데 중점을 둡니다. 백엔드 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. Changelog
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. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. 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
The pull request introduces several new features and improvements to the list page, including enhanced task and task list management, better date handling, and UI refinements for mobile and desktop. The changes also include updates to API call handling and data structures to support these new functionalities. Overall, the changes are well-structured and address the stated objectives of developing unimplemented areas.
| mutationFn: async (vars: { | ||
| groupId: number; | ||
| taskListId: number; | ||
| taskId: number; | ||
| body: { name?: string; description?: string; date?: string; doneAt?: string | null }; | ||
| }) => | ||
| fetchJson<Task>( | ||
| body: { | ||
| name?: string; | ||
| description?: string; | ||
| startDate?: string; // | ||
| frequencyType?: ApiFrequency; | ||
| weekDays?: ApiWeekDay[]; | ||
| monthDay?: number; | ||
| doneAt?: string | null; | ||
| }; |
There was a problem hiding this comment.
The mutationFn for usePatchTask now includes startDate, frequencyType, weekDays, and monthDay in the body type. This allows for comprehensive updates to task recurrence settings. However, the body is cast to unknown as never in page.tsx which bypasses type safety. It would be better to ensure the body type is fully compatible or create a specific type for the patch body.
| const body = { | ||
| name: title, | ||
| description: memo, | ||
| startDate: startIso, | ||
| frequencyType: freq, | ||
| weekDays, | ||
| monthDay, | ||
| }; |
There was a problem hiding this comment.
The body object for patchTask.mutateAsync now includes startDate, frequencyType, weekDays, and monthDay, allowing for comprehensive updates to task recurrence. However, the body as unknown as never cast is a type safety bypass. It would be better to define a specific type for the patch body that aligns with the usePatchTask mutation function's body type.
| useEffect(() => { | ||
| queueMicrotask(() => setSelectedTaskIdState(undefined)); | ||
| }, [selectedTaskListId, selectedDateIso]); |
There was a problem hiding this comment.
Resetting selectedTaskIdState when selectedTaskListId or selectedDateIso changes is a critical improvement. This ensures that when the user switches task lists or dates, the task detail panel is correctly reset, preventing the display of stale task details.
| useEffect(() => { | ||
| queueMicrotask(() => setSelectedTaskListIdState(undefined)); | ||
| }, [activeGroupId]); |
There was a problem hiding this comment.
Resetting selectedTaskListIdState on activeGroupId change is a crucial improvement. This ensures that when a user switches teams, the task list selection is cleared, preventing stale or incorrect data from being displayed. Using queueMicrotask is a good way to defer the state update.
| }; | ||
| }); | ||
| }, [taskLists, tasks, selectedTaskListId]); | ||
| }, [taskLists, tasks, selectedTaskListId, isGroupDetailReady]); |
There was a problem hiding this comment.
Adding isGroupDetailReady to the dependency array for todoCardsWithPreview ensures that the memoized value is recomputed only when the group detail data is fully loaded and ready, preventing premature rendering with incomplete data.
| {!hasRealTaskList || tasks.length === 0 ? ( | ||
| <div | ||
| key={task.id} | ||
| className={styles.taskRowClick} | ||
| onClick={(e: MouseEvent) => { | ||
| const t = e.target as HTMLElement | null; | ||
| if (isOpenDetailBlockedTarget(t)) return; | ||
| handleOpenDetail(task.id); | ||
| }} | ||
| onClick={() => (hasRealTaskList ? openTaskCreate() : openTodoCreate())} | ||
| role="button" | ||
| tabIndex={0} | ||
| > | ||
| <div style={{ position: 'relative' }}> | ||
| <TaskListItem | ||
| title={task.name} | ||
| date={selectedDateKey} | ||
| checked={!!task.doneAt} | ||
| isSelected={task.id === selectedTaskId} | ||
| commentCount={task.commentCount} | ||
| frequency={frequencyLabel(task.frequency)} | ||
| onCheckedChange={async (checked) => { | ||
| await handleToggleDone(task.id, checked); | ||
| }} | ||
| onKebabClick={() => | ||
| setOpenedTaskMenuId((prev) => (prev === task.id ? null : task.id)) | ||
| } | ||
| /> | ||
|
|
||
| {openedTaskMenuId === task.id ? ( | ||
| <ul className={styles.taskMenu} role="menu" aria-label="할 일 메뉴"> | ||
| <li> | ||
| <button | ||
| type="button" | ||
| className={styles.taskMenuItem} | ||
| onClick={() => { | ||
| setOpenedTaskMenuId(null); | ||
| openTaskEdit(task); | ||
| }} | ||
| > | ||
| 수정하기 | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button | ||
| type="button" | ||
| className={styles.taskMenuItem} | ||
| onClick={async () => { | ||
| setOpenedTaskMenuId(null); | ||
| await handleDeleteTask(task.id); | ||
| }} | ||
| > | ||
| 삭제하기 | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| ) : null} | ||
| </div> | ||
| <TaskListItem | ||
| title={ | ||
| hasRealTaskList | ||
| ? '할 일을 추가해 주세요' | ||
| : '할 일 목록을 먼저 만들어 주세요' | ||
| } | ||
| date={formatKoreanDateOnly(selectedDateKey)} | ||
| checked={false} | ||
| isSelected={false} | ||
| commentCount={0} | ||
| frequency={undefined} | ||
| onCheckedChange={() => {}} | ||
| onKebabClick={() => {}} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
The taskList section now conditionally renders a placeholder message and an interactive element to either create a task or a task list if no tasks or real task lists exist. This guides the user on how to get started.
| {openedTaskMenuId === task.id ? ( | ||
| <ul className={styles.taskMenu} role="menu" aria-label="할 일 메뉴"> | ||
| <li> | ||
| <button | ||
| type="button" | ||
| className={styles.taskMenuItem} | ||
| onClick={() => { | ||
| setOpenedTaskMenuId(null); | ||
| openTaskEdit(task); | ||
| }} | ||
| > | ||
| 수정하기 | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button | ||
| type="button" | ||
| className={styles.taskMenuItem} | ||
| onClick={async () => { | ||
| setOpenedTaskMenuId(null); | ||
| await handleDeleteTask(task.id); | ||
| }} | ||
| > | ||
| 삭제하기 | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| ) : null} |
There was a problem hiding this comment.
The taskMenu for individual tasks is now correctly rendered when openedTaskMenuId matches the task's ID, providing options to edit or delete the task. This improves task management within the list.
| input={{ | ||
| props: { | ||
| value: todoNameDraft, | ||
| onChange: (e) => setTodoNameDraft(e.target.value), | ||
| autoFocus: true, | ||
| }, |
There was a problem hiding this comment.
The AddTodoList modal now uses a controlled input for the task list name, bound to todoNameDraft. This is a better React practice than direct DOM manipulation and improves form handling.
| /* =========================== | ||
| Mobile/Tablet Sidebar label overflow fix | ||
| =========================== */ | ||
|
|
||
| .drawerFixWrap { | ||
| width: 100%; | ||
| padding-bottom: 8px; | ||
| min-width: 0; | ||
| } | ||
| /* ✅ 모바일/태블릿: 투두카드 + "할일 추가" 한 줄로 (구조 변경 없이 CSS만) */ | ||
| @media (max-width: 1024px) { | ||
| /* 한 줄 컨테이너 */ | ||
| .mobileTodoRow { | ||
| display: flex !important; | ||
| align-items: center !important; | ||
| gap: 12px !important; | ||
| width: 100% !important; | ||
| min-width: 0 !important; | ||
| } | ||
|
|
||
| .drawerFixWrap :global(button), | ||
| .drawerFixWrap :global(a) { | ||
| min-width: 0; | ||
| } | ||
|
|
||
| /* ✅ 모바일/태블릿: (1번처럼) 투두카드 + "할일 추가" 같은 줄 */ | ||
| @media (max-width: 1024px) { | ||
| /* row는 그냥 100% */ | ||
| .mobileTodoRow { | ||
| width: 100% !important; | ||
| min-width: 0 !important; | ||
| } | ||
| .drawerFixWrap :global(span), | ||
| .drawerFixWrap :global(p), | ||
| .drawerFixWrap :global(div) { | ||
| min-width: 0; | ||
| } | ||
|
|
||
| /* ✅ 여기서 핵심: 버튼이 같은 줄에 오도록 flex 컨테이너로 만든다 */ | ||
| .mobileTodoInlineCard { | ||
| display: flex !important; | ||
| align-items: center !important; | ||
| gap: 12px !important; | ||
| .drawerFixWrap :global([class*='label']), | ||
| .drawerFixWrap :global([class*='text']), | ||
| .drawerFixWrap :global([class*='name']) { | ||
| min-width: 0; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| width: 100% !important; | ||
| flex: 1 1 auto !important; | ||
| .drawerFixWrap :global(button:hover) *, | ||
| .drawerFixWrap :global(button[aria-current='page']) *, | ||
| .drawerFixWrap :global(button[aria-selected='true']) * { | ||
| min-width: 0; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } |
There was a problem hiding this comment.
The new CSS rules under .drawerFixWrap are designed to fix overflow issues for labels within the mobile/tablet sidebar. By setting min-width: 0, overflow: hidden, text-overflow: ellipsis, and white-space: nowrap for various elements, it ensures that long text content is truncated with an ellipsis instead of overflowing, improving the UI's responsiveness and appearance.
| @media (max-width: 1024px) { | ||
| :global([class*='SidebarTeamSelect-module__'] *), | ||
| :global([class*='SidebarButton-module__'] *), | ||
| :global([class*='SidebarAddButton-module__'] *) { | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| .todoCardShell, | ||
| .todoCardShellInner { | ||
| width: 100% !important; | ||
| :global([class*='SidebarTeamSelect-module__'] button), | ||
| :global([class*='SidebarTeamSelect-module__'] a), | ||
| :global([class*='SidebarButton-module__'] button), | ||
| :global([class*='SidebarButton-module__'] a) { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| /* 버튼은 고정폭 유지하면서 오른쪽 */ | ||
| .mobileAddBtnWrap { | ||
| margin-left: 0 !important; | ||
| flex: 0 0 112px !important; | ||
| width: 112px !important; | ||
| :global([class*='SidebarTeamSelect-module__'] span), | ||
| :global([class*='SidebarButton-module__'] span) { | ||
| display: block; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } |
There was a problem hiding this comment.
This media query block addresses overflow issues for various elements within SidebarTeamSelect, SidebarButton, and SidebarAddButton on mobile/tablet devices. By setting max-width: 100%, overflow: hidden, text-overflow: ellipsis, and white-space: nowrap, it prevents content from overflowing its container, improving the responsiveness of the sidebar components.
|
Warning Gemini encountered an error creating the review. You can try again by commenting |
2 participants
Summary
Issue
Scope
포함
특이사항