✨ Feat: create card modal 카드 생성 모달 구현

package.json

@@ -13,9 +13,11 @@
     "@tanstack/react-query": "^5.80.2",
     "axios": "^1.9.0",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "next": "14.2.25",
     "next-themes": "^0.4.6",
     "react": "18.2.0",
+    "react-datepicker": "^8.4.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.57.0",
     "sonner": "^2.0.5",

src/app/dashboard/[id]/layout.tsx

@@ -0,0 +1,17 @@
+import Header from '@components/common/header/Header'
+
+import Sidebar from '@/app/shared/components/common/sidebar/Sidebar'
+
+export default function AboutLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div>
+      {/* <Sidebar /> */}
+      <Header />
+      <div>{children}</div> {/* 여기에 page.tsx 내용이 들어옴 */}
+    </div>
+  )
+}

src/app/dashboard/[id]/page.tsx

@@ -1,18 +1,21 @@
 'use client'
 
 import Image from 'next/image'
+import { useParams } from 'next/navigation'
 import { useRef } from 'react'
 
-import useColumns from '@/app/api/useColumns'
-
-import { useCardMutation } from './api/useCardMutation'
-import Column from './Column/Column'
-import { useDragStore } from './store/useDragStore'
-import type { Card } from './type/Card'
+import { useCardMutation } from '@/app/features/dashboard_Id/api/useCardMutation'
+import useColumns from '@/app/features/dashboard_Id/api/useColumns'
+import Column from '@/app/features/dashboard_Id/Column/Column'
+import { useDragStore } from '@/app/features/dashboard_Id/store/useDragStore'
+import { Card } from '@/app/features/dashboard_Id/type/Card.type'
 
 export default function DashboardID() {
-  const dashboard = 15120
-  const { data: columns, isLoading, error } = useColumns(dashboard)
+  const params = useParams()
+  const dashboardId = Number(params.id)
+  const { data: columns, isLoading, error } = useColumns(dashboardId)
+  // const { data: columns, isLoading, error } = useColumns(id)
+
   const { draggingCard, setDraggingCard } = useDragStore()
   const cardMutation = useCardMutation()
   const touchPos = useRef({ x: 0, y: 0 })
@@ -124,10 +127,9 @@ export default function DashboardID() {
   if (error) return <p>error...{error.message}</p>
   return (
     <>
-      <div className="fixed left-0 h-1080 w-300 bg-gray-100">사이드바</div>
       <div className="ml-300 select-none">
         <div
-          className="tablet:flex-col flex"
+          className="flex min-h-[calc(100vh-100px)] tablet:flex-col"
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}

src/app/dashboard/[id]/Card/Tags.tsx → src/app/features/dashboardId/Card/Tags.tsx

@@ -9,7 +9,7 @@ export default function Tags({ tags }: { tags: string[] }) {
   return (
     <div className="flex flex-wrap gap-6">
       {tags.map((tag) => {
-        const colorIndex = getColor(tag, bgColors)
+        const colorIndex = getColor(tag, bgColors.length)
 
         return (
           <span

src/app/features/dashboardId/Card/cardFormModals/AssigneeList.tsx

@@ -0,0 +1,29 @@
+import { cn } from '@/app/shared/lib/cn'
+const mockData = ['aaa', 'bbb', 'ccc']
+
+interface AssigneeListProps {
+  setSelectedAssignee: React.Dispatch<React.SetStateAction<string>>
+}
+export default function AssigneeList({
+  setSelectedAssignee,
+}: AssigneeListProps) {
+  return (
+    <div className="BG-white Border-btn Text-gray absolute left-0 top-full z-10 mt-4 w-full rounded-6 text-14">
+      {mockData.map((Assignee, index) => (
+        <div
+          className={cn(
+            'BG-Input-hovered w-full cursor-pointer px-16 py-11 pt-14 placeholder-gray-400 caret-transparent',
+            index !== 0 && 'border-t',
+          )}
+          key={index}
+          onClick={() => {
+            setSelectedAssignee(Assignee)
+            console.log(Assignee)
+          }}
+        >
+          {Assignee}
+        </div>
+      ))}
+    </div>
+  )
+}