✨ feat: 컬럼 관리 기능 (생성/수정/삭제)

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

@@ -7,6 +7,8 @@ import { useEffect, useRef } from 'react'
 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 ColumnModalRenderer from '@/app/features/dashboard_Id/components/ColumnModalRenderer'
+import { useColumnModalStore } from '@/app/features/dashboard_Id/store/useColumnModalStore'
 import { useColumnsStore } from '@/app/features/dashboard_Id/store/useColumnsStore'
 import { useDragStore } from '@/app/features/dashboard_Id/store/useDragStore'
 import { Card } from '@/app/features/dashboard_Id/type/Card.type'
@@ -15,7 +17,7 @@ export default function DashboardID() {
   const params = useParams()
   const dashboardId = Number(params.id)
   const { data: columns, isLoading, error } = useColumns(dashboardId)
-  // const { data: columns, isLoading, error } = useColumns(id)
+  const { openModal } = useColumnModalStore()
 
   const { draggingCard, setDraggingCard } = useDragStore()
   const { setColumns } = useColumnsStore()
@@ -25,6 +27,10 @@ export default function DashboardID() {
   const longPressTimer = useRef<number | null>(null)
   const isLongPressActive = useRef(false)
 
+  const handleCreateColumn = () => {
+    openModal('create', { dashboardId })
+  }
+
   useEffect(() => {
     if (columns) {
       const transformed = columns.map((column) => ({
@@ -141,14 +147,19 @@ export default function DashboardID() {
     <>
       <div className="select-none">
         <div
-          className="flex min-h-[calc(100vh-100px)] mobile:flex-row tablet:flex-col"
+          className="mobile:flex-row tablet:flex-col flex min-h-[calc(100vh-100px)]"
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}
         >
-          {columns?.map((column) => <Column key={column.id} column={column} />)}
+          {columns?.map((column) => (
+            <Column key={column.id} column={column} dashboardId={dashboardId} />
+          ))}
           <div className="BG-gray Border-column p-20">
-            <button className="BG-white Border-btn flex items-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold">
+            <button
+              className="BG-white Border-btn flex items-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold"
+              onClick={handleCreateColumn}
+            >
               <span>새로운 컬럼 추가하기</span>
               <div className="flex h-22 w-22 items-center justify-center rounded-4 bg-blue-100">
                 <Image
@@ -162,6 +173,7 @@ export default function DashboardID() {
           </div>
         </div>
       </div>
+      <ColumnModalRenderer />
     </>
   )
 }

src/app/features/dashboard_Id/Column/Column.tsx

@@ -8,11 +8,20 @@ import useCards from '../api/useCards'
 import Card from '../Card/Card'
 import CreateCardForm from '../Card/cardFormModals/CreateCardForm'
 import CreateCardModal from '../Card/cardFormModals/CreateCardModal'
+import { useColumnModalStore } from '../store/useColumnModalStore'
 import { useDragStore } from '../store/useDragStore'
 import type { Column as ColumnType } from '../type/Column.type'
-export default function Column({ column }: { column: ColumnType }) {
+
+export default function Column({
+  column,
+  dashboardId,
+}: {
+  column: ColumnType
+  dashboardId: number
+}) {
   const { id, title }: { id: number; title: string } = column
   const { data, isLoading, error } = useCards(id)
+  const { openModal } = useColumnModalStore()
   const [isDraggingover, setDraggingover] = useState(false)
   const { draggingCard, clearDraggingCard } = useDragStore()
   const cardMutation = useCardMutation()
@@ -21,6 +30,14 @@ export default function Column({ column }: { column: ColumnType }) {
   const [openCreateColumn, setOpenCreateColumn] = useState(false) //page.tsx
   const [oepnConfigColumn, setConfigColumn] = useState(false)
 
+  const handleConfigColumn = () => {
+    openModal('edit', {
+      dashboardId,
+      columnId: id,
+      columnTitle: title,
+    })
+  }
+
   if (isLoading) return <p>loading...</p>
   if (error) return <p>error...{error.message}</p>
 
@@ -52,7 +69,7 @@ export default function Column({ column }: { column: ColumnType }) {
       }}
       data-column-id={id}
       className={cn(
-        'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20 tablet:w-584',
+        'BG-gray Border-column tablet:w-584 flex w-354 shrink-0 flex-col gap-16 p-20',
         {
           'BG-drag-hovered': isDraggingover,
         },
@@ -71,7 +88,8 @@ export default function Column({ column }: { column: ColumnType }) {
           alt="컬럼 설정"
           width={20}
           height={20}
-          onClick={() => setConfigColumn(true)}
+          onClick={handleConfigColumn}
+          className="cursor-pointer"
         />
       </div>
       <button

src/app/features/dashboard_Id/api/deleteColumn.ts

@@ -0,0 +1,7 @@
+import authHttpClient from '@/app/shared/lib/axios'
+
+export async function deleteColumn(columnId: number): Promise<void> {
+  await authHttpClient.delete(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/columns/${columnId}`,
+  )
+}

src/app/features/dashboard_Id/api/fetchMembers.ts

@@ -1,10 +1,9 @@
-import api from '@/app/shared/lib/testAxios'
+import authHttpClient from '@/app/shared/lib/axios'
 
-// import api from '@/app/shared/lib/axios'
 import { Member, MembersResponse } from '../type/Member.type'
 
 export async function fetchMembers(dashboardId: number): Promise<Member[]> {
-  const res = await api.get<MembersResponse>(
+  const res = await authHttpClient.get<MembersResponse>(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/members?&dashboardId=${dashboardId}`,
   )
   return res.data.members

src/app/features/dashboard_Id/api/postCard.ts

@@ -1,14 +1,13 @@
-import api from '@/app/shared/lib/testAxios'
+import authHttpClient from '@/app/shared/lib/axios'
 
-// import api from '@/app/shared/lib/axios'
 import { CardFormData } from '../type/CardFormData.type'
 
 interface ApiResponse {
   message: string
 }
 
 export async function postCard(payload: CardFormData): Promise<ApiResponse> {
-  const res = await api.post(
+  const res = await authHttpClient.post(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards`,
     payload,
   )

src/app/features/dashboard_Id/api/postCardImage.ts

@@ -1,4 +1,4 @@
-import api from '@/app/shared/lib/testAxios'
+import authHttpClient from '@/app/shared/lib/axios'
 
 // ✅ 카드 이미지 파일 업로드 시 - 카드 생성 요청에(post) 전달 가능한 형태의 데이터로, 응답 받아서 사용할 예정
 export async function postCardImages(
@@ -7,7 +7,7 @@ export async function postCardImages(
 ): Promise<{ imageUrl: string }> {
   const formData = new FormData()
   formData.append('image', file)
-  const res = await api.post(
+  const res = await authHttpClient.post(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/columns/${columnId}/card-image`,
     formData,
     {

src/app/features/dashboard_Id/api/postColumn.ts

@@ -0,0 +1,13 @@
+import authHttpClient from '@/app/shared/lib/axios'
+
+import { CreateColumnRequest, CreateColumnResponse } from '../type/Column.type'
+
+export async function postColumn(
+  payload: CreateColumnRequest,
+): Promise<CreateColumnResponse> {
+  const response = await authHttpClient.post<CreateColumnResponse>(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/columns`,
+    payload,
+  )
+  return response.data
+}

src/app/features/dashboard_Id/api/putCard.ts

@@ -1,6 +1,5 @@
-import api from '@/app/shared/lib/testAxios'
+import authHttpClient from '@/app/shared/lib/axios'
 
-// import api from '@/app/shared/lib/axios'
 import { CardModifyFormData } from '../type/CardFormData.type'
 
 interface ApiResponse {
@@ -11,7 +10,7 @@ export async function putCard(
   payload: CardModifyFormData,
   cardId: number,
 ): Promise<ApiResponse> {
-  const res = await api.put(
+  const res = await authHttpClient.put(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`,
     payload,
   )

src/app/features/dashboard_Id/api/updateCardColumn.ts

@@ -1,12 +1,11 @@
-import api from '@/app/shared/lib/testAxios'
-// import api from '@/app/shared/lib/axios'
+import authHttpClient from '@/app/shared/lib/axios'
 
 // 카드 이동 - 해당 카드의 컬럼ID를 변경하는 방식(PUT)
 export async function updateCardColumn(
   cardId: number,
   columnId: number,
 ): Promise<{ success: boolean }> {
-  const res = await api.put<{ success: boolean }>(
+  const res = await authHttpClient.put<{ success: boolean }>(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`,
     {
       columnId: columnId,

src/app/features/dashboard_Id/api/updateColumn.ts

@@ -0,0 +1,14 @@
+import authHttpClient from '@/app/shared/lib/axios'
+
+import { UpdateColumnRequest, UpdateColumnResponse } from '../type/Column.type'
+
+export async function updateColumn(
+  columnId: number,
+  payload: UpdateColumnRequest,
+): Promise<UpdateColumnResponse> {
+  const response = await authHttpClient.put<UpdateColumnResponse>(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/columns/${columnId}`,
+    payload,
+  )
+  return response.data
+}

src/app/features/dashboard_Id/components/ColumnModalRenderer.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { useColumnModalStore } from '../store/useColumnModalStore'
+import CreateColumnModal from './CreateColumnModal'
+import DeleteColumnConfirmModal from './DeleteColumnConfirmModal'
+import EditColumnModal from './EditColumnModal'
+
+export default function ColumnModalRenderer() {
+  const { modalType } = useColumnModalStore()
+
+  if (modalType === 'create') return <CreateColumnModal />
+  if (modalType === 'edit') return <EditColumnModal />
+  if (modalType === 'deleteConfirm') return <DeleteColumnConfirmModal />
+
+  return null
+}