[dashboard] dashboard modal에 dropdown, button 컴포넌트 적용, 전반적인 리팩토링

[Ospac]

#️⃣ Related Issue

#25

📝 Problem

• dashboard modal 컴포넌트들에 ESLint 오류 수정
• dashboard modal들에 개별적인 dropdown과 관련 함수들이 반복됨
• 개별적인 button이 반복됨

✅ Solving

• dashboard modal
  • 폴더분리: modal 관련파일들 -> src/components/dashboard/modal
  • ESLint 오류 대부분 수정 (코드 구조에서 오는 오류는 수정하지 않았음)
  • 개별적인 dropdown UI와 관련 함수들을 정리하고 공통 컴포넌트 적용 (column-task-card등에도 적용)
  • 기존의 modal-base를 modal-button으로 명칭 변경
    • modal-base를 새로 만들어서 기본적인 modal 함수와 UI를 포함 -> modal-button과 button이 필요없는 modal에 적용
    • button 컴포넌트를 modla-button에 적용
• dropdown 개선 (useCallbackWhenClickItem 추가 및 UI 수정)

기능 구현에 앞서서 리팩토링이 필요하다고 생각했었는데요.
코드가 굉장히 정리가 되었습니다 🥺

나중에 시간이 나면 React Portal을 써서 modal을 관리하는 코드로 개선 해볼 여지도 있을 것 같네요.

📚 Attachment

이해를 돕기 위한 설명 자료

modal-base UI 코드

modal-button UI 코드

modal-base가 modal-button을 감싸고 modal-button이 또 다른 컴포넌트를 감싸는 구조입니다.

Dropdown 적용

edit-task-form.tsx
코드가 별로 안줄어든 것처럼 보이지만 😅 기존 코드가 dropdown에 필요한 state와 함수, ref가 여러번 반복되서 정의되었기 때문에, 많이 개선된 모습입니다 ㅎ

해당 파일에 onClick 이벤트로 setIsStatusDropdownOpen(!isStatusDropdownOpen)같은 코드는 사실 dropdown 상태를 내부에서 관리하기 때문에 삭제해야하는 코드지만, 해당 상태에 따라서 화살표가 회전하는 UI가 있어서 아직 깔끔하게 없애지는 못했네요😅

Pn Rule

Note

• P1: 꼭 반영해 주세요 (Request changes)
• P2: 적극적으로 고려해 주세요 (Request changes)
• P3: 웬만하면 반영해 주세요 (Comment)
• P4: 반영해도 좋고 넘어가도 좋습니다 (Approve)
• P5: 그냥 사소한 의견입니다 (Approve)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
taskify	Error			Sep 5, 2025 0:44am