Refactor/109/columns

src/components/columns/AddColumnBtn.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ColumnForm, columnFormSchema } from '@/apis/columns/types';
+import { ColumnForm, columnFormSchema, ColumnsResponse } from '@/apis/columns/types';
 import DashboardButton from '@/components/ui/Button/DashboardButton';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -13,20 +13,28 @@ import { useColumnMutation } from '@/apis/columns/queries';
 import { getErrorMessage } from '@/utils/errorMessage';
 import xIcon from '@/assets/icons/x.svg';
 import Image from 'next/image';
+import { some } from 'es-toolkit/compat';
 
-export default function AddColumnBtn({ dashboardId }: { dashboardId: number }) {
+interface AddColumnBtnProps {
+  dashboardId: number;
+  columns: ColumnsResponse['data'] | void;
+}
+
+export default function AddColumnBtn({ dashboardId, columns }: AddColumnBtnProps) {
   const {
     handleSubmit,
     register,
     reset,
     formState: { errors, isValid, isSubmitting, isDirty },
+    setError,
   } = useForm<ColumnForm>({
     resolver: zodResolver(columnFormSchema),
     mode: 'onChange',
     defaultValues: {
       title: '',
     },
   });
+
   const modalRef = useRef<ModalHandle>(null);
   const { create } = useColumnMutation(dashboardId);
   const alert = useAlert();
@@ -38,6 +46,14 @@ export default function AddColumnBtn({ dashboardId }: { dashboardId: number }) {
 
   const onSubmit = async (formData: ColumnForm) => {
     try {
+      if (columns) {
+        const isExist = some(columns, { title: formData.title });
+        if (isExist) {
+          setError('title', { message: '중복된 컬럼 이름입니다.' });
+          return;
+        }
+      }
+
       await create(formData);
       handleReset();
       alert('컬럼이 생성되었습니다!');

src/components/columns/ColumnList.tsx

@@ -4,6 +4,7 @@ import { useColumnsQuery } from '@/apis/columns/queries';
 import { useParams } from 'next/navigation';
 import ColumnItem from './ColumnItem';
 import AddColumnBtn from './AddColumnBtn';
+import { isEmpty } from 'es-toolkit/compat';
 
 export default function ColumnList() {
   const params = useParams();
@@ -13,12 +14,17 @@ export default function ColumnList() {
   return (
     <ul className='flex flex-col lg:flex-row'>
       {isLoading && Array.from({ length: 3 }, (_, index) => <SkeletionItem key={index} />)}
-      {data?.data.map((column) => (
-        <li key={column.id} className='flex flex-col gap-4 border-b border-r-0 p-6 lg:min-h-[calc(100dvh-70px)] lg:border-b-0 lg:border-r'>
-          <ColumnItem column={column} />
-        </li>
-      ))}
-      <AddColumnBtn dashboardId={dashbaordId} />
+
+      {!isLoading && isEmpty(data?.data) ? (
+        <EmptyList />
+      ) : (
+        data?.data.map((column) => (
+          <li key={column.id} className='flex flex-col gap-4 border-b border-r-0 p-6 lg:min-h-[calc(100dvh-70px)] lg:border-b-0 lg:border-r'>
+            <ColumnItem column={column} />
+          </li>
+        ))
+      )}
+      <AddColumnBtn dashboardId={dashbaordId} columns={data?.data} />
     </ul>
   );
 }
@@ -40,3 +46,14 @@ export function SkeletionItem() {
     </li>
   );
 }
+
+function EmptyList() {
+  return (
+    <li className='flex animate-pulse flex-col items-center gap-4 border-b border-r-0 p-6 lg:min-h-[calc(100dvh-70px)] lg:border-b-0 lg:border-r'>
+      <p className='gray-300 w-56 text-center'>컬럼이 비어있습니다.</p>
+      <div className='flex h-12 w-full items-center justify-center rounded bg-gray-200'>
+        <div className='h-6 w-6 rounded bg-gray-300' />
+      </div>
+    </li>
+  );
+}