From 88878b1719e21d0b0c572d65606c2e030f3d04cb Mon Sep 17 00:00:00 2001
From: Tokyun02 <developtk02@gmail.com>
Date: Wed, 12 Feb 2025 16:44:57 +0900
Subject: [PATCH 1/2] =?UTF-8?q?:lipstick:=20feat=20:=20=EC=BB=AC=EB=9F=BC?=
 =?UTF-8?q?=20empty=20list=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/columns/ColumnList.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/columns/ColumnList.tsx b/src/components/columns/ColumnList.tsx
index fb13264..218bafd 100644
--- a/src/components/columns/ColumnList.tsx
+++ b/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,11 +14,16 @@ 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>
-      ))}
+
+      {!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} />
     </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>
+  );
+}

From 4f3186cdccdc8ae6ff5b70e8e8ed5c2efcbde164 Mon Sep 17 00:00:00 2001
From: Tokyun02 <developtk02@gmail.com>
Date: Wed, 12 Feb 2025 17:07:58 +0900
Subject: [PATCH 2/2] =?UTF-8?q?:recycle:=20refactor=20:=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=BC=20=EC=A4=91=EB=B3=B5=20=EC=9D=B4=EB=A6=84=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/columns/AddColumnBtn.tsx | 20 ++++++++++++++++++--
 src/components/columns/ColumnList.tsx   |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/columns/AddColumnBtn.tsx b/src/components/columns/AddColumnBtn.tsx
index 801ffaa..a402628 100644
--- a/src/components/columns/AddColumnBtn.tsx
+++ b/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,13 +13,20 @@ 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',
@@ -27,6 +34,7 @@ export default function AddColumnBtn({ dashboardId }: { dashboardId: number }) {
       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('컬럼이 생성되었습니다!');
diff --git a/src/components/columns/ColumnList.tsx b/src/components/columns/ColumnList.tsx
index 218bafd..15a552d 100644
--- a/src/components/columns/ColumnList.tsx
+++ b/src/components/columns/ColumnList.tsx
@@ -24,7 +24,7 @@ export default function ColumnList() {
           </li>
         ))
       )}
-      <AddColumnBtn dashboardId={dashbaordId} />
+      <AddColumnBtn dashboardId={dashbaordId} columns={data?.data} />
     </ul>
   );
 }