✨ 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
+}

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

@@ -0,0 +1,151 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import useColumns from '../api/useColumns'
+import { useCreateColumn } from '../hooks/useCreateColumn'
+import { useColumnModalStore } from '../store/useColumnModalStore'
+
+export default function CreateColumnModal() {
+  const { modalType, modalData, closeModal } = useColumnModalStore()
+  const isModalOpen = modalType === 'create'
+
+  const [title, setTitle] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  // 기존 컬럼 목록 가져오기 (중복 체크용)
+  const { data: columns } = useColumns(modalData?.dashboardId || 0)
+  const createColumnMutation = useCreateColumn()
+
+  useEffect(() => {
+    if (!isModalOpen) {
+      setTitle('')
+      setIsSubmitting(false)
+    }
+  }, [isModalOpen])
+
+  if (!isModalOpen) {
+    return null
+  }
+
+  // 중복 컬럼명 체크
+  const isDuplicate = columns?.some(
+    (column) => column.title.toLowerCase() === title.toLowerCase(),
+  )
+
+  // 컬럼 최대 개수 체크 (10개)
+  const isMaxColumns = columns && columns.length >= 10
+
+  // 에러 메시지 표시 여부에 따른 높이 계산
+  const hasError = isDuplicate || isMaxColumns
+  const modalHeight = hasError ? 'h-286' : 'h-266'
+
+  // 생성 버튼 활성화 조건
+  const isCreateDisabled =
+    !title.trim() || isDuplicate || isMaxColumns || isSubmitting
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (!title.trim() || isDuplicate || isMaxColumns) {
+      return
+    }
+
+    try {
+      setIsSubmitting(true)
+
+      await createColumnMutation.mutateAsync({
+        title: title.trim(),
+        dashboardId: modalData!.dashboardId,
+      })
+
+      closeModal()
+    } catch (error) {
+      // 에러는 useCreateColumn에서 toast로 처리됨
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  // 입력값 변경 처리
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value)
+  }
+
+  // 모달 외부 클릭 시 닫기
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      closeModal()
+    }
+  }
+
+  return (
+    // 모달 백드롭
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      onClick={handleBackdropClick}
+    >
+      {/* 모달 컨테이너 - 에러 메시지에 따른 동적 높이 */}
+      <div className={`BG-white ${modalHeight} w-568 rounded-8 p-24`}>
+        <h2 className="Text-black mb-24 text-24 font-bold">새 컬럼 생성</h2>
+
+        <form onSubmit={handleSubmit}>
+          {/* 제목 입력 */}
+          <div className="mb-24">
+            <label htmlFor="title" className="Text-black mb-8 block text-18">
+              이름
+            </label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              value={title}
+              onChange={handleChange}
+              placeholder="새로운 프로젝트"
+              className={`w-full rounded-8 px-12 py-10 text-16 outline-none ${
+                hasError ? 'Border-error' : 'Border-section'
+              }`}
+              maxLength={30}
+              autoFocus
+              required
+            />
+
+            {/* 에러 메시지 표시 */}
+            {isDuplicate && (
+              <p className="mt-8 text-14 text-red-500">
+                중복된 컬럼 이름입니다
+              </p>
+            )}
+            {isMaxColumns && (
+              <p className="mt-8 text-14 text-red-500">
+                컬럼은 최대 10개까지 생성 가능합니다
+              </p>
+            )}
+          </div>
+
+          {/* 하단 버튼 */}
+          <div className="flex justify-end gap-10">
+            <button
+              type="button"
+              onClick={closeModal}
+              className="Border-btn Text-black h-54 w-256 rounded-8 px-16 py-10 text-16 font-semibold"
+            >
+              취소
+            </button>
+            <button
+              type="submit"
+              disabled={isCreateDisabled}
+              className={`BG-violet h-54 w-256 rounded-8 px-16 py-10 text-16 font-semibold text-white transition-opacity ${
+                isCreateDisabled
+                  ? 'cursor-not-allowed opacity-50'
+                  : 'hover:opacity-90'
+              }`}
+            >
+              생성
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}