develop <-- feature/dashboard_id #95
Conversation
โฆModal โจ Feat: ์นด๋ ์์ ๋ชจ๋ฌ ๊ตฌํ
|
Caution Review failedThe pull request is closed. """ Walkthrough์นด๋ ์์ ๋ชจ๋ฌ ๊ธฐ๋ฅ์ด ๋๊ท๋ชจ๋ก ์ถ๊ฐ๋์์ต๋๋ค. ์นด๋ ํด๋ฆญ ์ ์์ธ ๋ชจ๋ฌ์ด ์ด๋ฆฌ๊ณ , ์นด๋ ์ ๋ณด ์์ ๋ฐ ์ญ์ ๊ฐ ๊ฐ๋ฅํด์ก์ต๋๋ค. ์ปฌ๋ผ ๋ฐ์ดํฐ๋ ๊ธ๋ก๋ฒ ์คํ ์ด๋ก ๋๊ธฐํ๋๋ฉฐ, ๋ค์ํ ํ๋ฆฌ์ ํ ์ด์ ์ปดํฌ๋ํธ์ API ์ฐ๋, ํ ๋ง๋ณ ์คํ์ผ๋ง, ํ์ ๋ถ๋ฆฌ ๋ฑ์ด ํฌํจ๋์์ต๋๋ค. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Card
participant CardModal
participant CardContent
participant ModifyCardForm
participant API
User->>Card: ์นด๋ ํด๋ฆญ
Card->>CardModal: ๋ชจ๋ฌ ์คํ ์์ฒญ
CardModal->>CardContent: ์นด๋ ์์ธ ์ ๋ณด ๋ ๋๋ง
User->>CardContent: "์์ ํ๊ธฐ" ์ ํ
CardContent->>ModifyCardForm: ์์ ํผ ๋ชจ๋ฌ ์คํ
User->>ModifyCardForm: ์นด๋ ์ ๋ณด ์์ ํ ์ ์ถ
ModifyCardForm->>API: PUT /card/{id} ์์ฒญ
API-->>ModifyCardForm: ์๋ต(์ฑ๊ณต/์คํจ)
ModifyCardForm->>CardContent: ์์ ์๋ฃ, ๋ชจ๋ฌ ๋ซ๊ธฐ
CardContent->>CardModal: ๋ชจ๋ฌ ๋ซ๊ธฐ
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. ๐ง ESLint
npm error Exit handler never called! ๐ Recent review detailsConfiguration used: CodeRabbit UI ๐ Files selected for processing (1)
๐ชง TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 11
๐งน Nitpick comments (19)
src/app/features/dashboard_Id/api/putCard.ts (1)
10-19: ์๋ฌ ์ฒ๋ฆฌ ๊ฐ์ ์ ์API ํจ์์ ์๋ฌ ์ฒ๋ฆฌ๊ฐ ์์ด ๋คํธ์ํฌ ์ค๋ฅ๋ ์๋ฒ ์๋ฌ ์ ์ ์ ํ ์ฒ๋ฆฌ๊ฐ ์ด๋ ต์ต๋๋ค.
๋ค์๊ณผ ๊ฐ์ด ์๋ฌ ์ฒ๋ฆฌ๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ ๊ณ ๋ คํด๋ณด์ธ์:
export async function putCard( payload: CardModifyFormData, cardId: number, ): Promise<ApiResponse> { - const res = await api.put( - `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`, - payload, - ) - return res.data + try { + const res = await api.put( + `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`, + payload, + ) + return res.data + } catch (error) { + console.error('Card update failed:', error) + throw error + } }tailwind.config.ts (1)
21-21: ์ฃผ์ ์คํ ์์ ํ์tablet breakpoint ์ฃผ์์ด ์๋ชป๋์ด ์์ต๋๋ค. ์ค์ ๋ก๋ 376px ~ 744px์ ๋๋ค.
์ฃผ์์ ๋ค์๊ณผ ๊ฐ์ด ์์ ํด์ฃผ์ธ์:
- tablet: { raw: '(min-width: 376px) and (max-width: 744px)' }, // 376 ~ 1919px + tablet: { raw: '(min-width: 376px) and (max-width: 744px)' }, // 376 ~ 744pxsrc/app/features/dashboard_Id/store/useColumnsStore.ts (3)
3-6: ํ์ ์ ์ ๋ถ๋ฆฌ ๊ณ ๋ ค
SimpleColumn์ธํฐํ์ด์ค๋ฅผ ๋ณ๋ ํ์ ํ์ผ๋ก ๋ถ๋ฆฌํ๊ฑฐ๋, ๊ธฐ์กด ํ์ ํ์ผ์ ์ถ๊ฐํ๋ ๊ฒ์ ๊ณ ๋ คํด๋ณด์ธ์. ๋ค๋ฅธ ์ปดํฌ๋ํธ์์๋ ์ฌ์ฉ๋ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.์๋ฅผ ๋ค์ด,
../type/Column.type.tsํ์ผ์ ์์ฑํ๊ฑฐ๋ ๊ธฐ์กด ํ์ ํ์ผ์ ์ถ๊ฐ:// ../type/Column.type.ts export interface SimpleColumn { columnId: number columnTitle: string }๊ทธ๋ฆฌ๊ณ ์คํ ์ด์์๋ importํ์ฌ ์ฌ์ฉ:
import { create } from 'zustand' +import { SimpleColumn } from '../type/Column.type' -export interface SimpleColumn { - columnId: number - columnTitle: string -}
8-8: ๋ค์ด๋ฐ ์ผ๊ด์ฑ ๊ฒํ
ColumnsInDashboard์์ฑ๋ช ์ด PascalCase๋ฅผ ์ฌ์ฉํ๊ณ ์์ด ์ผ๋ฐ์ ์ธ camelCase ์ปจ๋ฒค์ ๊ณผ ๋ค๋ฆ ๋๋ค.์ผ๊ด์ฑ์ ์ํด camelCase๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค:
interface ColumnsStore { - ColumnsInDashboard: SimpleColumn[] + columnsInDashboard: SimpleColumn[] setColumns: (data: SimpleColumn[]) => void } export const useColumnsStore = create<ColumnsStore>((set) => ({ - ColumnsInDashboard: [], + columnsInDashboard: [], - setColumns: (data) => set({ ColumnsInDashboard: data }), + setColumns: (data) => set({ columnsInDashboard: data }), }))
12-13: ์ฃผ์ ๊ฐ์ ์ ์์ฃผ์์ด ํ๊ตญ์ด๋ก ๋์ด ์๋๋ฐ, ์ฝ๋๋ฒ ์ด์ค์ ์ธ์ด ์ผ๊ด์ฑ์ ํ์ธํด๋ณด์ธ์.
๋ค์๊ณผ ๊ฐ์ด ๋ ์์ธํ ์ฃผ์์ ์ถ๊ฐํ๋ ๊ฒ์ ๊ณ ๋ คํด๋ณด์ธ์:
-// ์นด๋ ์์ ๋ชจ๋ฌ์์ ์ฌ์ฉํ๋ ๊ฐ๊ณต๋ ์ปฌ๋ผ ๋ฐ์ดํฐ -// page.tsx์ useEffect์์ ์ด๊ธฐ ์ค์ ๋จ +/** + * ๋์๋ณด๋ ๋ด ์ปฌ๋ผ ์ ๋ณด๋ฅผ ๊ด๋ฆฌํ๋ ์ ์ญ ์คํ ์ด + * - ์นด๋ ์์ ๋ชจ๋ฌ์์ ์ปฌ๋ผ ์ ํ ์ ์ฌ์ฉ + * - page.tsx์ useEffect์์ ์ด๊ธฐ ๋ฐ์ดํฐ ์ค์ + */src/app/features/dashboard_Id/api/usePutCardMutation.ts (3)
5-5: ๋ฏธ์ฌ์ฉ import๋ฅผ ์ ๊ฑฐํด์ฃผ์ธ์.
postCard๊ฐ import๋์์ง๋ง ์ด ํ์ผ์์ ์ฌ์ฉ๋์ง ์์ต๋๋ค. ๋ถํ์ํ import๋ฅผ ์ ๊ฑฐํด์ฃผ์ธ์.-import { postCard } from './postCard'
8-8: ์ฃผ์๊ณผ ์๋ฌ ๋ฉ์์ง๊ฐ ๋ถ์ ํํฉ๋๋ค.์ด ํ ์ ์นด๋ ์์ ์ ์ํ ๊ฒ์ธ๋ฐ ์ฃผ์๊ณผ ์๋ฌ ๋ก๊ทธ์์ "์นด๋ ์์ฑ"์ด๋ผ๊ณ ํ๊ธฐ๋์ด ์์ต๋๋ค. ์ ํํ ์ค๋ช ์ผ๋ก ์์ ํด์ฃผ์ธ์.
-// โ ์นด๋ ์์ฑ ๋ชจ๋ฌ์์ ์ฌ์ฉ (CreateCardForm.tsx) +// โ ์นด๋ ์์ ๋ชจ๋ฌ์์ ์ฌ์ฉ (ModifyCardForm.tsx)- console.error('์นด๋ ์์ฑ ์คํจ:', message ?? '์ ์ ์๋ ์๋ฌ') + console.error('์นด๋ ์์ ์คํจ:', message ?? '์ ์ ์๋ ์๋ฌ')- console.error('์นด๋ ์์ฑ ์คํจ:', error) + console.error('์นด๋ ์์ ์คํจ:', error)Also applies to: 26-26, 28-28
21-21: ์ฟผ๋ฆฌ ํค๋ฅผ ๋ ๊ตฌ์ฒด์ ์ผ๋ก ์ค์ ํ๋ ๊ฒ์ ๊ณ ๋ คํด์ฃผ์ธ์.ํ์ฌ
['cardId']๋ ๋๋ฌด ์ผ๋ฐ์ ์ ๋๋ค. ํน์ ์นด๋๋ ์ปฌ๋ผ์ ๋ฐ์ดํฐ๋ง ๋ฌดํจํํ๋๋ก ๋ ๊ตฌ์ฒด์ ์ธ ํค๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ฑ๋ฅ์ ์ ๋ฆฌํ ์ ์์ต๋๋ค.- queryClient.invalidateQueries({ queryKey: ['cardId'] }) + queryClient.invalidateQueries({ queryKey: ['card', cardId] })src/app/features/dashboard_Id/Card/ColumnTitle.tsx (1)
1-1: Props ํ์ ์ interface๋ก ์ ์ํ๋ ๊ฒ์ ๊ณ ๋ คํด๋ณด์ธ์.ํ์ฌ ์ธ๋ผ์ธ์ผ๋ก ์ ์๋ props ํ์ ์ ๋ณ๋ interface๋ก ์ถ์ถํ๋ฉด ์ฌ์ฌ์ฉ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ด ํฅ์๋ฉ๋๋ค.
+interface ColumnTitleProps { + title: string +} + -export default function ColumnTitle({ title }: { title: string }) { +export default function ColumnTitle({ title }: ColumnTitleProps) {src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx (1)
118-118: ํ๋์ฝ๋ฉ๋ ๋๋น๊ฐ ๋์ ๋ฐ์ํ ํด๋์ค ์ฌ์ฉ์ ๊ถ์ฅํฉ๋๋ค.
w-520ํด๋์ค๋ก ๊ณ ์ ๋๋น๋ฅผ ์ค์ ํ๋ ๊ฒ๋ณด๋คw-full๊ฐ์ ๋ฐ์ํ ํด๋์ค๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์์ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.- className="Input-readOnly w-520" + className="Input-readOnly w-full"src/app/features/dashboard_Id/Card/TagsCanDelete.tsx (1)
3-3: ์ฌ์ฉ๋์ง ์๋ import๋ฅผ ์ ๊ฑฐํด์ฃผ์ธ์.
getColor์ ํธ๋ฆฌํฐ ํจ์๊ฐ import๋์์ง๋ง ์ค์ ๋ก๋ ์ฌ์ฉ๋์ง ์๊ณ ์์ต๋๋ค. ์ฝ๋ ์ ๋ฆฌ๋ฅผ ์ํด ์ ๊ฑฐํ๋ ๊ฒ์ด ์ข๊ฒ ์ต๋๋ค.-import { getColor } from '@/app/shared/lib/getColor'src/app/features/dashboard_Id/Card/Tags.tsx (1)
25-28: ํ ๋ง๋ณ ์์ ๋ก์ง์ ๊ฐ์ ํ์ธ์.๋คํฌ๋ชจ๋์์ ํ ์คํธ ์์์ผ๋ก ๋ผ์ดํธ๋ชจ๋ ๋ฐฐ๊ฒฝ์์ ์ฌ์ฉํ๋ ๋ก์ง์ด ์ง๊ด์ ์ด์ง ์์ต๋๋ค.
- const backgroundColor = isDark - ? bgColorsDark[colorIndex] - : bgColors[colorIndex] - const textColor = isDark ? bgColors[colorIndex] : textColors[colorIndex] + const backgroundColor = isDark ? bgColorsDark[colorIndex] : bgColors[colorIndex] + const textColor = isDark ? '#FFFFFF' : textColors[colorIndex]๋๋ ๋คํฌ๋ชจ๋ ์ ์ฉ ํ ์คํธ ์์ ๋ฐฐ์ด์ ์ถ๊ฐํ์ฌ ๋ ๋ช ํํ๊ฒ ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
src/app/features/dashboard_Id/Card/Card.tsx (2)
22-22: ์ํ ๋ณ์๋ช ์ ๋ ๋ช ํํ๊ฒ ํ์ธ์.
openCard๋ณ์๋ช ์ด ๋ชจํธํฉ๋๋ค. ์นด๋๋ฅผ ์ฌ๋ ๊ฒ์ด ์๋๋ผ ๋ชจ๋ฌ์ ์ฌ๋ ๊ฒ์ด๋ฏ๋ก ๋ ๋ช ํํ ์ด๋ฆ์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๊ฒ ์ต๋๋ค.- const [openCard, setOpenCard] = useState(false) //card.tsx + const [isModalOpen, setIsModalOpen] = useState(false)๊ทธ๋ฆฌ๊ณ ํด๋นํ๋ ๊ณณ์
setOpenCard๋setIsModalOpen์ผ๋ก ๋ณ๊ฒฝํด์ผ ํฉ๋๋ค.
57-69: ๋ง๊ฐ์ผ ํ์ ๋ก์ง์ ๊ฐ์ ํ์ธ์.ํ์ฌ ์บ๋ฆฐ๋ ์์ด์ฝ์ ํญ์ ํ์๋์ง๋ง ๋ง๊ฐ์ผ์ด ์๋ ๊ฒฝ์ฐ์๋ ๋ณด์ฌ์ง๋๋ค. ์ฌ์ฉ์์๊ฒ ํผ๋์ ์ค ์ ์์ต๋๋ค.
- <div className="flex size-full items-center gap-6"> - <Image - src={'/images/calendar.svg'} - alt="๋ง๊ฐ์ผ" - width={18} - height={18} - /> - {dueDate && ( - <div className="Text-gray mt-4 text-12 font-medium leading-none"> - {dueDate.split(' ')[0]} - </div> - )} - </div> + {dueDate && ( + <div className="flex size-full items-center gap-6"> + <Image + src={'/images/calendar.svg'} + alt="๋ง๊ฐ์ผ" + width={18} + height={18} + /> + <div className="Text-gray mt-4 text-12 font-medium leading-none"> + {dueDate.split(' ')[0]} + </div> + </div> + )}src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx (1)
35-35: ์ฃผ์ ๋ด์ฉ์ ์์ ํ์ธ์.35๋ฒ ์ค ์ฃผ์์์ "๋ด๋น์ ์ ๋ฐ์ดํธ"๋ผ๊ณ ๋์ด ์์ง๋ง, ์ค์ ๋ก๋ assignee(๋ด๋น์)๋ฅผ ์ ๋ฐ์ดํธํ๋ ๊ฒ์ด ๋ง์ต๋๋ค. ํผ๋์ ํผํ๊ธฐ ์ํด ์ ํํ ๋ด์ฉ์ผ๋ก ์์ ํด์ฃผ์ธ์.
- setAssignee(assignee) // ๋ด๋น์ ์ ๋ฐ์ดํธ + setAssignee(assignee) // ์ ํ๋ ๋ด๋น์ ์ค์ src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx (1)
35-35: ์ฃผ์ ๋ด์ฉ์ ์์ ํ์ธ์.35๋ฒ ์ค ์ฃผ์์์ "๋ด๋น์ ์ ๋ฐ์ดํธ"๋ผ๊ณ ๋์ด ์์ง๋ง, ์ค์ ๋ก๋ ์ปฌ๋ผ์ ์ ๋ฐ์ดํธํ๋ ๊ฒ์ ๋๋ค.
- setColumn(column) // ๋ด๋น์ ์ ๋ฐ์ดํธ + setColumn(column) // ์ ํ๋ ์ปฌ๋ผ ์ค์ src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx (1)
118-120: delete ์ฐ์ฐ์ ๋์ undefined ํ ๋น ์ฌ์ฉ์ฑ๋ฅ ํฅ์์ ์ํด delete ์ฐ์ฐ์ ๋์ undefined๋ฅผ ํ ๋นํ์ธ์.
- if (!data.dueDate) delete payload.dueDate - if (!data.imageUrl || !preview) delete payload.imageUrl + if (!data.dueDate) payload.dueDate = undefined + if (!data.imageUrl || !preview) payload.imageUrl = undefinedsrc/app/features/dashboard_Id/Card/cardModal/CardContent.tsx (2)
65-76: ๋ฏธ์์ฑ UI ๊ตฌํ ํ์ํ๋ ์ด์คํ๋ ํ ์คํธ์ ํ๋์ฝ๋ฉ๋ ์์๋ค์ ์ค์ ๊ตฌํ์ผ๋ก ๊ต์ฒดํ์ธ์.
<div> - ๊ทธ๋ฆฌ๋๋ก ๊ด๋ฆฌํ๊ธฐ / ์ปฌ๋ผ๋ช ์ ๋ฐ๋ก ์ปดํฌ๋ํธ๋ก ๋ง๋ค์ด ๋นผ๊ธฐ - <div>{column.title}</div> + <ColumnTitle title={columnTitle} /> <Tags tags={tags} /> - <p>์ค๋ช ~~~~~~~~</p> + <p className="Text-gray mt-16 text-14">{card.description}</p> <div> - <div>{assignee.nickname}</div> - <div>{dueDate}</div> + <MyAssignee assignee={assignee} /> + {dueDate && <div className="Text-gray text-12">{dueDate}</div>} </div> </div> - <div> ์ด๋ฏธ์ง ์์ผ๋ฉด ์ด๋ฏธ์ง</div> - <div>๋๊ธ ์ปดํฌ๋ํธ</div> + {imageUrl && ( + <div className="mt-16"> + <Image src={imageUrl} alt={title} width={400} height={300} className="rounded-6" /> + </div> + )} + {/* TODO: ๋๊ธ ์ปดํฌ๋ํธ ์ถ๊ฐ */}์์ฑ๋ ๊ตฌํ์ด ํ์ํ์ ๊ฐ์? ์๋ก์ด ์ด์๋ฅผ ์์ฑํด๋๋ฆด๊น์?
49-51: ์ญ์ ๊ธฐ๋ฅ ๊ตฌํ ํ์์ญ์ ํ๊ธฐ ์ต์ ์ ํด๋ฆญ ํธ๋ค๋ฌ๊ฐ ์์ต๋๋ค.
์ญ์ ๊ธฐ๋ฅ ๊ตฌํ์ ๋์๋๋ฆด๊น์? ์นด๋ ์ญ์ API ํธ์ถ๊ณผ ํ์ธ ๋ชจ๋ฌ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
๐ Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
โ Files ignored due to path filters (3)
public/images/arrow-dropdown.svgis excluded by!**/*.svgpublic/images/close.svgis excluded by!**/*.svgpublic/images/drop-more.svgis excluded by!**/*.svg
๐ Files selected for processing (24)
src/app/dashboard/[id]/page.tsx(3 hunks)src/app/features/dashboard_Id/Card/Card.tsx(3 hunks)src/app/features/dashboard_Id/Card/ColumnTitle.tsx(1 hunks)src/app/features/dashboard_Id/Card/MyAssignee.tsx(1 hunks)src/app/features/dashboard_Id/Card/Tags.tsx(1 hunks)src/app/features/dashboard_Id/Card/TagsCanDelete.tsx(1 hunks)src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx(2 hunks)src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx(1 hunks)src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx(3 hunks)src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx(0 hunks)src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx(1 hunks)src/app/features/dashboard_Id/Card/cardFormModals/input/DateInput.tsx(1 hunks)src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx(1 hunks)src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx(1 hunks)src/app/features/dashboard_Id/Column/Column.tsx(3 hunks)src/app/features/dashboard_Id/api/putCard.ts(1 hunks)src/app/features/dashboard_Id/api/usePutCardMutation.ts(1 hunks)src/app/features/dashboard_Id/lib/getDashboardMembers.ts(1 hunks)src/app/features/dashboard_Id/store/useColumnsStore.ts(1 hunks)src/app/features/dashboard_Id/store/useDragStore.ts(1 hunks)src/app/features/dashboard_Id/type/CardFormData.type.ts(1 hunks)src/app/globals.css(3 hunks)src/app/shared/components/common/Avatar.tsx(2 hunks)tailwind.config.ts(1 hunks)
๐ค Files with no reviewable changes (1)
- src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx
๐งฐ Additional context used
๐งฌ Code Graph Analysis (11)
src/app/features/dashboard_Id/api/usePutCardMutation.ts (2)
src/app/features/dashboard_Id/type/CardFormData.type.ts (1)
CardModifyFormData(1-9)src/app/features/dashboard_Id/api/putCard.ts (1)
putCard(10-19)
src/app/features/dashboard_Id/api/putCard.ts (1)
src/app/features/dashboard_Id/type/CardFormData.type.ts (1)
CardModifyFormData(1-9)
src/app/features/dashboard_Id/Card/Tags.tsx (1)
src/app/features/dashboardId/Card/Tags.tsx (1)
Tags(3-29)
src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx (4)
src/app/features/dashboard_Id/store/useColumnsStore.ts (2)
SimpleColumn(3-6)useColumnsStore(14-17)src/app/features/dashboard_Id/type/CardFormData.type.ts (1)
CardFormData(11-13)src/app/shared/lib/cn.ts (1)
cn(4-6)src/app/features/dashboard_Id/Card/ColumnTitle.tsx (1)
ColumnTitle(1-10)
src/app/dashboard/[id]/page.tsx (2)
src/app/features/dashboard_Id/store/useColumnsStore.ts (1)
useColumnsStore(14-17)src/app/features/dashboard_Id/api/useCardMutation.ts (1)
useCardMutation(7-101)
src/app/features/dashboard_Id/lib/getDashboardMembers.ts (2)
src/app/features/dashboard_Id/type/Member.type.ts (1)
Member(1-10)src/app/features/dashboard_Id/type/Card.type.ts (1)
Assignee(1-5)
src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx (13)
src/app/features/dashboard_Id/store/useColumnsStore.ts (1)
SimpleColumn(3-6)src/app/features/dashboard_Id/api/useUploadCardImage.ts (1)
useUploadCardImage(8-19)src/app/features/dashboard_Id/api/useMembers.ts (1)
useMembers(7-12)src/app/features/dashboard_Id/type/Card.type.ts (1)
Assignee(1-5)src/app/features/dashboard_Id/type/CardFormData.type.ts (2)
CardFormData(11-13)CardModifyFormData(1-9)src/app/features/dashboard_Id/api/usePutCardMutation.ts (1)
usePutCardMutation(9-32)src/app/features/dashboard_Id/Card/cardFormModals/input/Input.tsx (1)
Input(9-28)src/app/features/dashboard_Id/Card/ColumnTitle.tsx (1)
ColumnTitle(1-10)src/app/shared/lib/cn.ts (1)
cn(4-6)src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx (1)
ColumnList(19-44)src/app/features/dashboard_Id/Card/MyAssignee.tsx (1)
MyAssignee(5-18)src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx (1)
AssigneeList(23-49)src/app/features/dashboard_Id/Card/TagsCanDelete.tsx (1)
TagsCanDelete(5-49)
src/app/features/dashboard_Id/Card/Card.tsx (6)
src/app/features/dashboard_Id/type/Card.type.ts (1)
Card(6-19)src/app/features/dashboard_Id/store/useDragStore.ts (1)
useDragStore(14-18)src/app/features/dashboard_Id/Card/Tags.tsx (1)
Tags(5-45)src/app/shared/components/common/Avatar.tsx (1)
Avatar(34-77)src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx (1)
CardModal(6-18)src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx (1)
CardContent(16-91)
src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx (1)
src/app/features/dashboard_Id/Card/MyAssignee.tsx (1)
MyAssignee(5-18)
src/app/shared/components/common/Avatar.tsx (2)
src/app/features/auth/store/useAuthStore.ts (1)
useAuthStore(6-21)src/app/shared/lib/getColor.ts (1)
getColor(1-5)
src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx (2)
src/app/shared/lib/cn.ts (1)
cn(4-6)src/app/features/dashboard_Id/Card/TagsCanDelete.tsx (1)
TagsCanDelete(5-49)
๐ช Biome (1.9.4)
src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
[error] 122-122: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 126-128: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
๐ Additional comments (26)
src/app/features/dashboard_Id/store/useDragStore.ts (1)
3-3: ํ์ import ๊ฒฝ๋ก ๋ณ๊ฒฝ ์น์ธํ์ ์ ์ ํ์ผ์ ์ผ๊ด์ฑ์ ์ํ ๋ฆฌํฉํ ๋ง์ผ๋ก ์ ์ ํฉ๋๋ค.
src/app/features/dashboard_Id/api/putCard.ts (2)
15-15: ํ๊ฒฝ๋ณ์ ์กด์ฌ ์ฌ๋ถ ๊ฒ์ฆ ํ์
NEXT_PUBLIC_TEAM_IDํ๊ฒฝ๋ณ์๊ฐ ์ ์๋์ด ์๋์ง ํ์ธ์ด ํ์ํฉ๋๋ค.๋ค์ ์คํฌ๋ฆฝํธ๋ก ํ๊ฒฝ๋ณ์ ์ค์ ์ ํ์ธํด๋ณด๊ฒ ์ต๋๋ค:
#!/bin/bash # ํ๊ฒฝ๋ณ์ ์ค์ ํ์ผ ํ์ธ echo "=== .env ํ์ผ๋ค ํ์ธ ===" fd "\.env" --type f echo -e "\n=== NEXT_PUBLIC_TEAM_ID ์ฌ์ฉ ํํฉ ===" rg -n "NEXT_PUBLIC_TEAM_ID" --type ts --type tsx --type js echo -e "\n=== ํ๊ฒฝ๋ณ์ ์์ ํ์ผ ํ์ธ ===" if [ -f ".env.example" ]; then cat .env.example | grep "TEAM_ID" || echo "TEAM_ID ๊ด๋ จ ์ค์ ์์" fi
1-3: ๋ค์ ์คํฌ๋ฆฝํธ๋กtestAxios์ ์ค์ axios์ฌ์ฉ ํํฉ ๋ฐ ํ์ผ ์กด์ฌ ์ฌ๋ถ๋ฅผ ์ฌํ์ธํด ์ฃผ์ธ์.#!/bin/bash echo "=== testAxios import ํํฉ ===" rg -n "import.*testAxios" . echo -e "\n=== shared/lib/axios import ํํฉ ===" rg -n "import.*shared/lib/axios" . echo -e "\n=== ์ธ๋ถ axios ๋ชจ๋ import ===" rg -n "import.*from.*['\"]axios['\"]" . echo -e "\n=== shared/lib/axios.ts ํ์ผ ์กด์ฌ ์ฌ๋ถ ===" fd shared/lib/axios.ts echo -e "\n=== shared/lib/testAxios.ts ํ์ผ ์กด์ฌ ์ฌ๋ถ ===" fd shared/lib/testAxios.tssrc/app/features/dashboard_Id/Card/cardModal/CardModal.tsx (1)
12-12: CSS ํด๋์ค๋ช ํ์ธ ํ์
BG-whiteํด๋์ค๊ฐ ํ์ค Tailwind CSS ํด๋์ค๊ฐ ์๋ ๊ฒ ๊ฐ์ต๋๋ค.bg-white๋ฅผ ์๋ํ์ ๊ฑด๊ฐ์?๋ค์ ์คํฌ๋ฆฝํธ๋ก ์ปค์คํ CSS ํด๋์ค ์ ์๋ฅผ ํ์ธํด๋ณด๊ฒ ์ต๋๋ค:
#!/bin/bash # BG-white ํด๋์ค ์ ์ ํ์ธ echo "=== BG-white ํด๋์ค ์ฌ์ฉ ํํฉ ===" rg -n "BG-white" --type css --type scss --type ts --type tsx echo -e "\n=== CSS ํ์ผ์์ BG- ํจํด ํ์ธ ===" rg -n "\.BG-" --type css --type scss echo -e "\n=== Tailwind ์ค์ ์์ ์ปค์คํ ํด๋์ค ํ์ธ ===" rg -n "BG-" tailwind.config.ts || echo "tailwind ์ค์ ์์ BG- ํจํด ์์"src/app/globals.css (4)
22-22: ๋คํฌ๋ชจ๋ ๋ฐฐ๊ฒฝ์ ๊ฐ์ ์ด ์ ์ ํฉ๋๋ค.
#1A1A1A์์#222222๋ก ๋ณ๊ฒฝํ์ฌ ๋ ๋ฐ์ ๋คํฌ๋ชจ๋ ๋ฐฐ๊ฒฝ์ ์ ๊ณตํ๋ ๊ฒ์ ๊ฐ๋ ์ฑ ํฅ์์ ๋์์ด ๋ฉ๋๋ค.
30-32: ์๋ก์ด ์ ํธ๋ฆฌํฐ ํด๋์ค๊ฐ ์ ๊ตฌํ๋์์ต๋๋ค.๋ผ์ดํธ ๋ชจ๋์ ๋คํฌ ๋ชจ๋์ ์ ์ ํ ์์์ ์ ๊ณตํ๋
.BG-lightblueํด๋์ค๊ฐ ์ถ๊ฐ๋์์ต๋๋ค. ๋คํฌ ๋ชจ๋์์#182f52๋ ์ ์ ํ ๋๋น๋ฅผ ์ ๊ณตํ ๊ฒ์ผ๋ก ๋ณด์ ๋๋ค.
57-59: ํ ์คํธ ์์ ์ ํธ๋ฆฌํฐ ํด๋์ค๊ฐ ์ ์ ํ ์ถ๊ฐ๋์์ต๋๋ค.๋คํฌ/๋ผ์ดํธ ๋ชจ๋์ ๋ฐ๋ฅธ ๋ธ๋ฃจ ํ ์คํธ ์์์ด ์ผ๊ด๋๊ฒ ์ ์ฉ๋์ด ํ ๋ง ๊ฐ ์๊ฐ์ ์ผ๊ด์ฑ์ ์ ์งํ ์ ์์ต๋๋ค.
101-101: Input ํด๋์ค์์ ๊ณ ์ ๋๋น ์ ๊ฑฐ๊ฐ ์ ์ ํฉ๋๋ค.
w-520ํด๋์ค๋ฅผ ์ ๊ฑฐํ์ฌ ์ปดํฌ๋ํธ๋ณ๋ก ์ ์ฐํ๊ฒ ๋๋น๋ฅผ ์กฐ์ ํ ์ ์๋๋ก ๊ฐ์ ๋์์ต๋๋ค. ์ด๋ DateInput.tsx์์ ๊ฐ๋ณ์ ์ผ๋ก ๋๋น๋ฅผ ์ค์ ํ๋ ๊ฒ๊ณผ ์ผ์นํฉ๋๋ค.src/app/features/dashboard_Id/lib/getDashboardMembers.ts (2)
1-1: ํ์ ์ ์ ์ค์์ง์คํ๊ฐ ์ ๊ตฌํ๋์์ต๋๋ค.
Assignee์ธํฐํ์ด์ค๋ฅผ ๋ณ๋ ํ์ ํ์ผ์์ importํ์ฌ ํ์ ์ ์์ ์ผ๊ด์ฑ๊ณผ ์ฌ์ฌ์ฉ์ฑ์ ํฅ์์์ผฐ์ต๋๋ค.
9-11: Member์์ Assignee๋ก์ ๋งคํ ๋ก์ง์ด ์ฌ๋ฐ๋ฆ ๋๋ค.
member.userId๋ฅผid๋ก ๋งคํํ๊ณprofileImageUrl์ ํฌํจํ๋ ๋ณ๊ฒฝ์ฌํญ์ด Card.type.ts์ Assignee ์ธํฐํ์ด์ค์ ์ผ์นํฉ๋๋ค. ํ๋ ์ด๋ฆ ํต์ผ์ด ์ ์ ํ ์ด๋ฃจ์ด์ก์ต๋๋ค.src/app/features/dashboard_Id/Card/cardFormModals/input/DateInput.tsx (2)
10-11: props spread ํ ref ์์ฑ ๋ฐฐ์น๊ฐ ์ ์ ํฉ๋๋ค.
{...props}์ดํ์ref์์ฑ์ ๋ฐฐ์นํ์ฌ props์์ ์ ๋ฌ๋ ref๊ฐ ์ค์ ref๋ฅผ ๋ฎ์ด์ฐ์ง ์๋๋ก ๋ณด์ฅํ์ต๋๋ค. ์ด๋ ์ฌ๋ฐ๋ฅธ ํจํด์ ๋๋ค.
14-14: ๊ณ ์ ๋๋น ํด๋์ค ์ถ๊ฐ๋ก ์ผ๊ด์ฑ์ ์ ์งํ์ต๋๋ค.globals.css์์
Input-readOnlyํด๋์ค์ ๊ณ ์ ๋๋น๋ฅผ ์ ๊ฑฐํ๊ณ ์ฌ๊ธฐ์w-520์ ์ง์ ์ถ๊ฐํ์ฌ ์ปดํฌ๋ํธ๋ณ ๋๋น ์ ์ด๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ์ต๋๋ค.src/app/features/dashboard_Id/Card/ColumnTitle.tsx (1)
1-10: ์ปดํฌ๋ํธ ๊ตฌํ์ด ๊น๋ํ๊ณ ์ ์ ํฉ๋๋ค.์ปฌ๋ผ ์ ๋ชฉ์ ํ์ํ๋ ๋จ์ํ๊ณ ๋ช ํํ ์ปดํฌ๋ํธ์ ๋๋ค. globals.css์์ ์๋ก ์ถ๊ฐ๋
BG-lightblue์Text-deepblueํด๋์ค๋ฅผ ์ ์ ํ ํ์ฉํ์ต๋๋ค.src/app/features/dashboard_Id/Card/MyAssignee.tsx (1)
1-18: ๊น๋ํ๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ์ ๋๋ค.๋ด๋น์ ์ ๋ณด๋ฅผ ์ผ๊ด๋๊ฒ ํ์ํ๋ ์ ์ค๊ณ๋ ํ๋ ์ ํ ์ด์ ์ปดํฌ๋ํธ์ ๋๋ค. ํ์ ์์ ์ฑ์ด ๋ณด์ฅ๋๊ณ Avatar ์ปดํฌ๋ํธ์์ ํตํฉ๋ ์ ์ ํฉ๋๋ค.
src/app/features/dashboard_Id/Column/Column.tsx (3)
81-82: ์คํ์ผ ๊ฐ์ ์ด ์ ์ ์ฉ๋์์ต๋๋ค.๋คํฌ ๋ชจ๋ ๊ด๋ จ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๊ณ BG-lightblue ํด๋์ค๋ฅผ ์ฌ์ฉํ์ฌ ์ผ๊ด๋ ํ ๋ง ์ ์ฉ์ด ์ด๋ฃจ์ด์ก์ต๋๋ค.
97-102: ๋ชจ๋ฌ ์ํ ๊ด๋ฆฌ ๋จ์ํ๊ฐ ์ ์ด๋ฃจ์ด์ก์ต๋๋ค.CreateCardModal์์ onClose prop์ ์ ๊ฑฐํ๊ณ ๋ด๋ถ CreateCardForm์์ ์ง์ ์ฒ๋ฆฌํ๋๋ก ๋ณ๊ฒฝ๋ ๊ฒ์ ์ํ ๊ด๋ฆฌ๋ฅผ ๋จ์ํํ๋ ์ข์ ๊ฐ์ ์ ๋๋ค.
92-92: Card ์ปดํฌ๋ํธ์์columnprop์ ์ค์ ํ๋กํผํฐ ์ ๊ทผ ์ฌ๋ถ๋ฅผ ํ์ธํ๊ธฐ ์ํด ์๋ ์คํฌ๋ฆฝํธ๋ฅผ ์คํํด์ฃผ์ธ์.#!/bin/bash file="src/app/features/dashboard_Id/Card/Card.tsx" echo ">> Checking column property access in: $file" rg -n 'column\.' "$file" || echo "โ ๏ธ โcolumnโ prop์์ ์์ฑ ์ ๊ทผ์ ์ฐพ์ ์ ์์ต๋๋ค."src/app/features/dashboard_Id/type/CardFormData.type.ts (1)
1-13: ํ์ ๋ถ๋ฆฌ๋ฅผ ํตํ ๊ด์ฌ์ฌ ๋ถ๋ฆฌ๊ฐ ์ ์ด๋ฃจ์ด์ก์ต๋๋ค.CardModifyFormData์ CardFormData๋ก ๋ถ๋ฆฌํ์ฌ ์นด๋ ์์ ๋ก์ง๊ณผ ๋์๋ณด๋ ์ปจํ ์คํธ๋ฅผ ๋ช ํํ ๊ตฌ๋ถํ์ต๋๋ค. ์ด๋ ์ฌ์ฌ์ฉ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํค๋ ์ข์ ๋ฆฌํฉํ ๋ง์ ๋๋ค.
src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx (2)
123-132: ๋๋กญ๋ค์ด ํ์ดํ ์ ๋๋ฉ์ด์ ์ด ํ๋ฅญํฉ๋๋ค.cn ์ ํธ๋ฆฌํฐ๋ฅผ ํ์ฉํ์ฌ ๋๋กญ๋ค์ด ์ํ์ ๋ฐ๋ฅธ ํ์ดํ ํ์ ์ ๋๋ฉ์ด์ ์ ๊ตฌํํ ๊ฒ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํต๋๋ค. ์กฐ๊ฑด๋ถ ํด๋์ค ์ ์ฉ๋ ๊น๋ํ๊ฒ ์ฒ๋ฆฌ๋์์ต๋๋ค.
221-221: TagsCanDelete ์ปดํฌ๋ํธ๋ก์ ๊ต์ฒด๊ฐ ๊ธฐ๋ฅ์ ํฅ์์์ผฐ์ต๋๋ค.์ ์ ์ธ Tags ์ปดํฌ๋ํธ๋ฅผ TagsCanDelete๋ก ๊ต์ฒดํ์ฌ ํ๊ทธ ์ญ์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ ๊ฒ์ ์ฌ์ฉ์ ํธ์์ฑ์ ํฌ๊ฒ ํฅ์์ํค๋ ๊ฐ์ ์ ๋๋ค.
src/app/features/dashboard_Id/Card/TagsCanDelete.tsx (1)
5-49: ํ ๋ง ์ง์๊ณผ ํ๊ทธ ์ญ์ ๊ธฐ๋ฅ์ด ์ ๊ตฌํ๋์์ต๋๋ค.๊ฒฐ์ ์ ์์ ํ ๋น์ ์ํ ํด์ ์๊ณ ๋ฆฌ์ฆ, ๋คํฌ/๋ผ์ดํธ ํ ๋ง ์ง์, ๊ทธ๋ฆฌ๊ณ ์ง๊ด์ ์ธ ํด๋ฆญ-์ญ์ ๊ธฐ๋ฅ์ด ํ๋ฅญํ๊ฒ ๊ตฌํ๋์์ต๋๋ค. ํ๊ทธ ๊ด๋ฆฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํค๋ ์ปดํฌ๋ํธ์ ๋๋ค.
src/app/features/dashboard_Id/Card/Card.tsx (1)
83-91: ๋ชจ๋ฌ ๋ ๋๋ง ๊ตฌ์กฐ๋ฅผ ๊ฒํ ํ์ธ์.๋ชจ๋ฌ์ด ์นด๋ ์ปดํฌ๋ํธ ๋ด๋ถ์์ ๋ ๋๋ง๋๊ณ ์์ต๋๋ค. ์ด๋ z-index๋ ํฌ์ง์ ๋ง ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํ ์ ์์ต๋๋ค.
CardModal์ด ํฌํธ์ ์ฌ์ฉํ์ฌ ๋ ๋๋ง๋๋ฏ๋ก ํ์ฌ ๊ตฌ์กฐ๊ฐ ์ ์ ํฉ๋๋ค. ๋ชจ๋ฌ ๋ด์ฉ๊ณผ ์ํ ๊ด๋ฆฌ๋ ์ ๊ตฌํ๋์ด ์์ต๋๋ค.
src/app/dashboard/[id]/page.tsx (2)
28-36: ์ปฌ๋ผ ๋ฐ์ดํฐ ๋๊ธฐํ ๋ก์ง์ด ์ ๊ตฌํ๋์์ต๋๋ค.useEffect๋ฅผ ์ฌ์ฉํ ์ปฌ๋ผ ๋ฐ์ดํฐ ๋ณํ ๋ฐ ์คํ ์ด ๋๊ธฐํ๊ฐ ์ ์ ํ๊ฒ ๊ตฌํ๋์ด ์์ต๋๋ค. ์์กด์ฑ ๋ฐฐ์ด๋ ์ฌ๋ฐ๋ฅด๊ฒ ์ค์ ๋์์ต๋๋ค.
142-144: ๋ฐ์ํ ํด๋์ค ์ ๋ฐ์ดํธ๋ฅผ ๊ฒํ ํ์ธ์.
mobile:flex-row tablet:flex-colํด๋์ค ์กฐํฉ์ด ์๋ํ ๋๋ก ์๋ํ๋์ง ํ์ธ์ด ํ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ชจ๋ฐ์ผ์์ ์ธ๋ก ๋ฐฉํฅ, ํ๋ธ๋ฆฟ์์ ๊ฐ๋ก ๋ฐฉํฅ์ด ๋ ์์ฐ์ค๋ฝ์ต๋๋ค.๋ค์์ด ์๋๋ ๋์์ธ์ง ํ์ธํด ์ฃผ์ธ์:
- ๋ชจ๋ฐ์ผ: ๊ฐ๋ก ๋ฐฉํฅ (flex-row)
- ํ๋ธ๋ฆฟ: ์ธ๋ก ๋ฐฉํฅ (flex-col)
์ผ๋ฐ์ ์ธ UX ํจํด๊ณผ ๋ฐ๋๋๋ ๊ฒ ๊ฐ์ต๋๋ค.
src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx (1)
38-44: ํ์ ๋ฐ ์ปดํฌ๋ํธ ์ ๋ฐ์ดํธ๊ฐ ์ ์ ์ฉ๋์์ต๋๋ค.
userId์์id๋ก์ ์์ฑ๋ช ๋ณ๊ฒฝ๊ณผMyAssignee์ปดํฌ๋ํธ ์ฌ์ฉ์ด ์ผ๊ด์ฑ ์๊ฒ ์ ์ฉ๋์ด UI ํต์ผ์ฑ์ด ํฅ์๋์์ต๋๋ค.src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx (1)
19-44: ์ปฌ๋ผ ์ ํ ์ปดํฌ๋ํธ๊ฐ ์ ๊ตฌํ๋์์ต๋๋ค.useColumnsStore๋ฅผ ์ฌ์ฉํ ๋ฐ์ดํฐ ๊ด๋ฆฌ, react-hook-form๊ณผ์ ํตํฉ, ๊ทธ๋ฆฌ๊ณ UI ๊ตฌ์ฑ์ด ๋ชจ๋ ์ ์ ํ๊ฒ ๊ตฌํ๋์ด ์์ต๋๋ค. ColumnTitle ์ปดํฌ๋ํธ ์ฌ์ฉ์ผ๋ก ์ผ๊ด์ฑ ์๋ UI๋ฅผ ์ ๊ณตํฉ๋๋ค.
| const modalRoot = document.getElementById('modal-root') | ||
| if (!modalRoot) return null |
There was a problem hiding this comment.
๐ ๏ธ Refactor suggestion
SSR ์์ ์ฑ ๊ฐ์ ์ ์
document.getElementById๋ฅผ ์ง์ ์ฌ์ฉํ๋ฉด ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
๋ค์๊ณผ ๊ฐ์ด ํด๋ผ์ด์ธํธ ์ฌ์ด๋์์๋ง ์คํ๋๋๋ก ๋ณด์ฅํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค:
export default function CardModal({ children }: ModalProps) {
- const modalRoot = document.getElementById('modal-root')
- if (!modalRoot) return null
+ const modalRoot = typeof window !== 'undefined' ? document.getElementById('modal-root') : null
+ if (!modalRoot) return null๋๋ useEffect๋ฅผ ์ฌ์ฉํ์ฌ ํด๋ผ์ด์ธํธ์์๋ง ์คํ๋๋๋ก ํ ์ ์์ต๋๋ค:
+import { useEffect, useState } from 'react'
+
export default function CardModal({ children }: ModalProps) {
+ const [modalRoot, setModalRoot] = useState<Element | null>(null)
+
+ useEffect(() => {
+ setModalRoot(document.getElementById('modal-root'))
+ }, [])
+
- const modalRoot = document.getElementById('modal-root')
if (!modalRoot) return null๐ค Prompt for AI Agents
In src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx around lines 7 to
8, the direct use of document.getElementById can cause errors during server-side
rendering (SSR). To fix this, move the DOM access inside a useEffect hook or
ensure it only runs on the client side by checking if the window object is
defined before calling document.getElementById. This change will prevent SSR
errors by delaying DOM access until after the component mounts on the client.
| // const colorIndex = getColor(tag, bgColors.length) | ||
| // getColorsํจ์ ์ฌ์ฉํ๋ฉด NaN๊ฐ์ด ๋ ์ ์๋์ ์ํจ.. ์๋ ๋ฌธ์ ์์๋๋ฐ ์ด์ ๋ฅผ ๋ชจ๋ฅด๊ฒ ์. | ||
| const hash = tag | ||
| .split('') | ||
| .reduce((acc, char) => acc + char.charCodeAt(0), 0) | ||
| const colorIndex = hash % 4 |
There was a problem hiding this comment.
๐ ๏ธ Refactor suggestion
getColor ํจ์ ๋ฌธ์ ์ ๊ทผ๋ณธ ์์ธ์ ํด๊ฒฐํ์ธ์.
์ฃผ์์์ ์ธ๊ธํ getColor ํจ์์ NaN ๋ฌธ์ ๋ฅผ ๊ทผ๋ณธ์ ์ผ๋ก ํด๊ฒฐํ๋ ๊ฒ์ด ์ข๊ฒ ์ต๋๋ค. ํ์ฌ ์ธ๋ผ์ธ์ผ๋ก ๊ตฌํํ ํด์ ๊ณ์ฐ์ getColor ํจ์์ ๋์ผํ ๋ก์ง์ ๋๋ค.
๋ค์๊ณผ ๊ฐ์ด ๊ฐ์ ํ ์ ์์ต๋๋ค:
- // const colorIndex = getColor(tag, bgColors.length)
- // getColorsํจ์ ์ฌ์ฉํ๋ฉด NaN๊ฐ์ด ๋ ์ ์๋์ ์ํจ.. ์๋ ๋ฌธ์ ์์๋๋ฐ ์ด์ ๋ฅผ ๋ชจ๋ฅด๊ฒ ์.
- const hash = tag
- .split('')
- .reduce((acc, char) => acc + char.charCodeAt(0), 0)
- const colorIndex = hash % 4
+ const colorIndex = getColor(tag, bgColors.length)getColor ํจ์์ NaN ๋ฌธ์ ๋ฅผ ๋จผ์ ๋๋ฒ๊น ํ์ฌ ํด๊ฒฐํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
๐ Committable suggestion
โผ๏ธ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // const colorIndex = getColor(tag, bgColors.length) | |
| // getColorsํจ์ ์ฌ์ฉํ๋ฉด NaN๊ฐ์ด ๋ ์ ์๋์ ์ํจ.. ์๋ ๋ฌธ์ ์์๋๋ฐ ์ด์ ๋ฅผ ๋ชจ๋ฅด๊ฒ ์. | |
| const hash = tag | |
| .split('') | |
| .reduce((acc, char) => acc + char.charCodeAt(0), 0) | |
| const colorIndex = hash % 4 | |
| const colorIndex = getColor(tag, bgColors.length) |
๐ค Prompt for AI Agents
In src/app/features/dashboard_Id/Card/Tags.tsx around lines 18 to 23, the
getColor function causes NaN errors, so it was replaced with inline hash
calculation. To fix this properly, debug the getColor function to identify why
it returns NaN, such as checking input validity and array length usage. Then
restore the use of getColor by ensuring it handles inputs correctly and returns
a valid index within the color array bounds.
| onDragStart={() => setDraggingCard({ cardData: card })} | ||
| onContextMenu={(e: React.MouseEvent) => e.preventDefault()} | ||
| className="BG-white Border-section relative rounded-6 border-solid px-20 py-16" | ||
| onClick={() => setOpenCard(true)} |
There was a problem hiding this comment.
๐ ๏ธ Refactor suggestion
๋๋๊ทธ์ ํด๋ฆญ ์ด๋ฒคํธ ์ถฉ๋์ ๋ฐฉ์งํ์ธ์.
์นด๋์ ๋๋๊ทธ ๊ธฐ๋ฅ๊ณผ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ชจ๋ ์์ด์ ์๋ํ์ง ์์ ๋ชจ๋ฌ ์ด๋ฆผ์ด ๋ฐ์ํ ์ ์์ต๋๋ค.
- onClick={() => setOpenCard(true)}
+ onClick={(e) => {
+ // ๋๋๊ทธ ์ค์ด ์๋ ๊ฒฝ์ฐ์๋ง ๋ชจ๋ฌ ์ด๊ธฐ
+ if (!isLongPressActive.current) {
+ setOpenCard(true)
+ }
+ }}๋๋ ๋ ์ ๊ตํ ์ฒ๋ฆฌ๋ฅผ ์ํด ๋๋๊ทธ ์์/์ข ๋ฃ ์ํ๋ฅผ ์ถ์ ํ๋ ๋ก์ง์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
Committable suggestion skipped: line range outside the PR's diff.
๐ค Prompt for AI Agents
In src/app/features/dashboard_Id/Card/Card.tsx at line 32, the onClick event
directly opens the modal, which conflicts with the drag functionality causing
unintended modal openings. To fix this, implement logic to track drag start and
end states, and only trigger setOpenCard(true) on click if a drag has not
occurred. This prevents the click event from firing during or immediately after
a drag action.
| const initial = getInitial(nickname.current) | ||
| const bgColor = getColor(nickname.current, customColors.length) | ||
|
|
||
| return profileImageUrl.current ? ( |
There was a problem hiding this comment.
๐ ๏ธ Refactor suggestion
ref.current ์ฐธ์กฐ ์ ๊ฑฐ
ref ์ ๊ฑฐ์ ๋ฐ๋ผ ๋ชจ๋ .current ์ฐธ์กฐ๋ฅผ ์ ๊ฑฐํ์ธ์.
- return profileImageUrl.current ? (
+ return profileImageUrl ? (
<div
className="relative overflow-hidden rounded-full"
style={{ width: size, height: size }}
>
<Image
- src={profileImageUrl.current}
+ src={profileImageUrl}
fill
- alt={`${nickname.current} ํ๋กํ ์ด๋ฏธ์ง`}
+ alt={`${nickname} ํ๋กํ ์ด๋ฏธ์ง`}
className="object-cover"
/>
</div>Also applies to: 58-58, 60-60
๐ค Prompt for AI Agents
In src/app/shared/components/common/Avatar.tsx at lines 52, 58, and 60, remove
all references to `.current` on ref variables since the ref has been removed.
Update the code to directly use the variable or state holding the value instead
of accessing `.current`.
| const initial = getInitial(nickname.current) | ||
| const bgColor = getColor(nickname.current, customColors.length) |
There was a problem hiding this comment.
๐ ๏ธ Refactor suggestion
๋ณ์ ์ฐธ์กฐ ์ ๋ฐ์ดํธ ํ์
ref ์ ๊ฑฐ ํ ๋ณ์ ์ฐธ์กฐ๋ฅผ ์ ๋ฐ์ดํธํ์ธ์.
- const initial = getInitial(nickname.current)
- const bgColor = getColor(nickname.current, customColors.length)
+ const initial = getInitial(nickname)
+ const bgColor = getColor(nickname, customColors.length)๐ Committable suggestion
โผ๏ธ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const initial = getInitial(nickname.current) | |
| const bgColor = getColor(nickname.current, customColors.length) | |
| const initial = getInitial(nickname) | |
| const bgColor = getColor(nickname, customColors.length) |
๐ค Prompt for AI Agents
In src/app/shared/components/common/Avatar.tsx around lines 49 to 50, the code
still references nickname.current after the ref has been removed. Update these
references to use the current variable or state holding the nickname value
directly instead of nickname.current to reflect the removal of the ref.
| <button | ||
| className="Border-btn Text-gray w-full rounded-8 border-solid py-13 text-16 font-medium" | ||
| onClick={onClose} | ||
| > | ||
| ์ทจ์ | ||
| </button> |
There was a problem hiding this comment.
์ทจ์ ๋ฒํผ์ type="button" ์ถ๊ฐ
ํผ ๋ด๋ถ์ ์ทจ์ ๋ฒํผ์ด ์๋์น ์๊ฒ ํผ์ ์ ์ถํ ์ ์์ต๋๋ค.
<button
+ type="button"
className="Border-btn Text-gray w-full rounded-8 border-solid py-13 text-16 font-medium"
onClick={onClose}
>
์ทจ์
</button>๐ Committable suggestion
โผ๏ธ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button | |
| className="Border-btn Text-gray w-full rounded-8 border-solid py-13 text-16 font-medium" | |
| onClick={onClose} | |
| > | |
| ์ทจ์ | |
| </button> | |
| <button | |
| type="button" | |
| className="Border-btn Text-gray w-full rounded-8 border-solid py-13 text-16 font-medium" | |
| onClick={onClose} | |
| > | |
| ์ทจ์ | |
| </button> |
๐ค Prompt for AI Agents
In src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx around
lines 350 to 355, the cancel button inside the form lacks a type attribute,
causing it to default to type="submit" and potentially submit the form
unintentionally. Add type="button" to the button element to prevent it from
submitting the form when clicked.
| console.log(tags) | ||
| }, [tags, tags.length, setValue]) |
There was a problem hiding this comment.
ํ๋ก๋์ ์ฝ๋์์ console.log ์ ๊ฑฐ
๋๋ฒ๊ทธ์ฉ console.log ๋ฌธ์ ์ ๊ฑฐํ์ธ์.
useEffect(() => {
setValue('tags', tags)
- console.log(tags)
}, [tags, tags.length, setValue])๐ Committable suggestion
โผ๏ธ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| console.log(tags) | |
| }, [tags, tags.length, setValue]) | |
| useEffect(() => { | |
| setValue('tags', tags) | |
| }, [tags, tags.length, setValue]) |
๐ค Prompt for AI Agents
In src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx at lines
81 to 82, remove the console.log statement used for debugging to clean up the
production code.
| function onSubmit(data: CardModifyFormData) { | ||
| const payload: CardModifyFormData = { | ||
| ...data, | ||
| columnId: columnId, | ||
| } | ||
|
|
||
| if (!data.dueDate) delete payload.dueDate | ||
| if (!data.imageUrl || !preview) delete payload.imageUrl // delete๋ก ์์ ํ๋์ ํด๋น key๋ฅผ ์ง์์ผ, ์๋ฒ๊ฐ "์์"์ผ๋ก ์ธ์ํจ.. | ||
|
|
||
| console.log('submitted', payload) | ||
| modifyCard({ cardId: card.id, payload: payload }) |
There was a problem hiding this comment.
columnId ๋ก์ง ์ค๋ฅ ๋ฐ console.log ์ ๊ฑฐ
์ ํ๋ ์ปฌ๋ผ์ด ์๋ ๊ธฐ์กด ์นด๋์ columnId๋ฅผ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ, console.log๋ ์ ๊ฑฐํด์ผ ํฉ๋๋ค.
function onSubmit(data: CardModifyFormData) {
const payload: CardModifyFormData = {
...data,
- columnId: columnId,
+ columnId: data.columnId, // ํผ์์ ์ ํํ columnId ์ฌ์ฉ
}
if (!data.dueDate) delete payload.dueDate
if (!data.imageUrl || !preview) delete payload.imageUrl
- console.log('submitted', payload)
modifyCard({ cardId: card.id, payload: payload })
onClose()
}๐ Committable suggestion
โผ๏ธ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function onSubmit(data: CardModifyFormData) { | |
| const payload: CardModifyFormData = { | |
| ...data, | |
| columnId: columnId, | |
| } | |
| if (!data.dueDate) delete payload.dueDate | |
| if (!data.imageUrl || !preview) delete payload.imageUrl // delete๋ก ์์ ํ๋์ ํด๋น key๋ฅผ ์ง์์ผ, ์๋ฒ๊ฐ "์์"์ผ๋ก ์ธ์ํจ.. | |
| console.log('submitted', payload) | |
| modifyCard({ cardId: card.id, payload: payload }) | |
| function onSubmit(data: CardModifyFormData) { | |
| const payload: CardModifyFormData = { | |
| ...data, | |
| columnId: data.columnId, // ํผ์์ ์ ํํ columnId ์ฌ์ฉ | |
| } | |
| if (!data.dueDate) delete payload.dueDate | |
| if (!data.imageUrl || !preview) delete payload.imageUrl // delete๋ก ์์ ํ๋์ ํด๋น key๋ฅผ ์ง์์ผ, ์๋ฒ๊ฐ "์์"์ผ๋ก ์ธ์ํจ.. | |
| modifyCard({ cardId: card.id, payload: payload }) | |
| onClose() | |
| } |
๐งฐ Tools
๐ช Biome (1.9.4)
[error] 122-122: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
๐ค Prompt for AI Agents
In src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx around
lines 112 to 122, the onSubmit function incorrectly uses the selected columnId
instead of the existing card's columnId, and there is a console.log statement
that should be removed. Fix this by replacing the columnId in the payload with
the card's current columnId value and remove the console.log line to clean up
the code.
| onClick={() => { | ||
| onClose() | ||
| console.log('sdfadfdsgreggsfds') | ||
| }} |
There was a problem hiding this comment.
๋๋ฒ๊ทธ ์ฝ๋ ์ ๊ฑฐ
์๋ฏธ ์๋ console.log ๋ฌธ์ ์ ๊ฑฐํ์ธ์.
onClick={() => {
onClose()
- console.log('sdfadfdsgreggsfds')
}}๐ Committable suggestion
โผ๏ธ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onClick={() => { | |
| onClose() | |
| console.log('sdfadfdsgreggsfds') | |
| }} | |
| onClick={() => { | |
| onClose() | |
| }} |
๐ค Prompt for AI Agents
In src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx between lines 58
and 61, remove the meaningless console.log statement inside the onClick handler
to clean up debug code and avoid unnecessary console output.
|
|
||
| <div> | ||
| ๊ทธ๋ฆฌ๋๋ก ๊ด๋ฆฌํ๊ธฐ / ์ปฌ๋ผ๋ช ์ ๋ฐ๋ก ์ปดํฌ๋ํธ๋ก ๋ง๋ค์ด ๋นผ๊ธฐ | ||
| <div>{column.title}</div> |
There was a problem hiding this comment.
์๋ชป๋ ์์ฑ ์ ๊ทผ
column ๊ฐ์ฒด์๋ title ์์ฑ์ด ์์ต๋๋ค. ์ด๋ฏธ ์ถ์ถํ columnTitle์ ์ฌ์ฉํ์ธ์.
- <div>{column.title}</div>
+ <div>{columnTitle}</div>๐ Committable suggestion
โผ๏ธ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div>{column.title}</div> | |
| <div>{columnTitle}</div> |
๐ค Prompt for AI Agents
In src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx at line 67, the
code incorrectly accesses a non-existent 'title' property on the 'column'
object. Replace 'column.title' with the already extracted 'columnTitle' variable
to correctly display the column title.
โฆoplan into feature/dashboard_id
๐ ๋ณ๊ฒฝ ์ฌํญ ๊ฐ์
โจ ์์ฝ
๐ ์์ธ ๋ด์ฉ
๐ ๊ด๋ จ ์ด์
๐ผ๏ธ ์คํฌ๋ฆฐ์ท
โ ์ฒดํฌ๋ฆฌ์คํธ
๐ก ์ฐธ๊ณ ์ฌํญ
Summary by CodeRabbit
์ ๊ท ๊ธฐ๋ฅ
๋ฒ๊ทธ ์์
๋ฆฌํฉํฐ
์คํ์ผ
๋ฌธ์ํ