Feat/48 49/columns

src/apis/columns/queries.ts

@@ -0,0 +1,51 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { deleteColumn, getColumns, postColumn, putColumn } from '.';
+import { ColumnForm } from './types';
+
+export const useColumnsQuery = (dashboardId: number) => {
+  return useQuery({
+    queryKey: ['columns', dashboardId],
+    queryFn: () =>
+      getColumns({
+        dashboardId,
+      }),
+  });
+};
+
+export const useColumnMutation = (dashboardId: number) => {
+  const queryClient = useQueryClient();
+
+  const post = useMutation({
+    mutationFn: (data: ColumnForm) => {
+      return postColumn(dashboardId, data);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['columns', dashboardId] });
+    },
+  });
+
+  const put = useMutation({
+    mutationFn: ({ id, formData }: { id: number; formData: ColumnForm }) => {
+      return putColumn(id, formData);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['columns', dashboardId] });
+    },
+  });
+
+  const remove = useMutation({
+    mutationFn: (id: number) => {
+      return deleteColumn(id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['columns', dashboardId] });
+    },
+  });
+  return {
+    create: post.mutateAsync,
+    update: put.mutateAsync,
+    remove: remove.mutateAsync,
+  };
+};

src/app/(after-login)/dashboard/[id]/page.tsx

@@ -1,16 +1,5 @@
-import Link from 'next/link';
-import Button from '@/components/ui/Button/Button';
+import ColumnList from '@/components/columns/ColumnList';
 
-export default async function DashboardDetailPage({ params }: { params: Promise<{ id: string }> }) {
-  const id = (await params).id;
-
-  return (
-    <div className='p-10'>
-      <div>
-        <Link href={`/dashboard/${id}/edit`}>
-          <Button>수정하기</Button>
-        </Link>
-      </div>
-    </div>
-  );
+export default function DashboardDetailPage() {
+  return <ColumnList />;
 }

src/components/columns/AddColumnBtn.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { ColumnForm, columnFormSchema } from '@/apis/columns/types';
+import DashboardButton from '@/components/ui/Button/DashboardButton';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal/Modal';
+import { useRef } from 'react';
+import useAlert from '@/hooks/useAlert';
+import { Input } from '@/components/ui/Field';
+import Button from '../ui/Button/Button';
+import { useColumnMutation } from '@/apis/columns/queries';
+import { getErrorMessage } from '@/utils/errorMessage';
+import xIcon from '@/assets/icons/x.svg';
+import Image from 'next/image';
+
+export default function AddColumnBtn({ dashboardId }: { dashboardId: number }) {
+  const {
+    handleSubmit,
+    register,
+    reset,
+    formState: { errors, isValid, isSubmitting, isDirty },
+  } = useForm<ColumnForm>({
+    resolver: zodResolver(columnFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      title: '',
+    },
+  });
+  const modalRef = useRef<ModalHandle>(null);
+  const { create } = useColumnMutation(dashboardId);
+  const alert = useAlert();
+
+  const handleReset = () => {
+    reset();
+    modalRef.current?.close();
+  };
+
+  const onSubmit = async (formData: ColumnForm) => {
+    try {
+      await create(formData);
+      handleReset();
+      alert('컬럼이 생성되었습니다!');
+    } catch (error) {
+      const message = getErrorMessage(error);
+      handleReset();
+      alert(message);
+    }
+  };
+
+  const isDisabled = !isDirty || !isValid || isSubmitting;
+
+  return (
+    <li className='flex flex-col gap-4 border-b p-6 lg:min-h-[calc(100dvh-70px)] lg:border-b-0'>
+      <div className='lg:h-7' />
+      <DashboardButton variant='column' onClick={() => modalRef.current?.open()} />
+      <Modal ref={modalRef}>
+        <ModalContent>
+          <ModalHeader className='flex justify-between'>
+            <span>새 컬럼 생성</span>
+            <Image src={xIcon} alt='컬럼 생성 취소 아이콘' width={24} height={24} onClick={() => handleReset()} className='cursor-pointer' />
+          </ModalHeader>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Input label='이름' error={errors.title?.message} placeholder='컬럼 이름을 입력해주세요' {...register('title')} />
+            <ModalFooter>
+              <Button type='button' variant='outline' onClick={() => handleReset()}>
+                취소
+              </Button>
+              <Button type='submit' disabled={isDisabled}>
+                {isSubmitting ? '생성중' : '생성'}
+              </Button>
+            </ModalFooter>
+          </form>
+        </ModalContent>
+      </Modal>
+    </li>
+  );
+}

src/components/columns/ColumnItem.tsx

@@ -0,0 +1,31 @@
+import { Column } from '@/apis/columns/types';
+import ColumnSettingBtn from './ColumnSettingBtn';
+import Dot from '@/components/ui/Dot/Dot';
+import DashboardButton from '@/components/ui/Button/DashboardButton';
+
+interface ColumnItemProps {
+  column: Column;
+}
+
+//TODO: 할 일 카드 리스트 구현 예정
+export default function ColumnItem({ column }: ColumnItemProps) {
+  return (
+    <>
+      <Title column={column} />
+      <DashboardButton variant='addTodo' />
+    </>
+  );
+}
+
+function Title({ column }: { column: Column }) {
+  return (
+    <div className='flex h-7 justify-between'>
+      <div className='flex items-center gap-4'>
+        <Dot color='#760DDE' />
+        <span className='text-2lg font-bold text-gray-70'>{column.title}</span>
+        <span className='rounded-[4px] bg-gray-20 px-2 py-0.5 text-xs font-medium text-gray-50'>1</span>
+      </div>
+      <ColumnSettingBtn column={column} />
+    </div>
+  );
+}

src/components/columns/ColumnList.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useColumnsQuery } from '@/apis/columns/queries';
+import { useParams } from 'next/navigation';
+import ColumnItem from './ColumnItem';
+import AddColumnBtn from './AddColumnBtn';
+
+export default function ColumnList() {
+  const params = useParams();
+  const dashbaordId = Number(params.id);
+  const { data, isLoading } = useColumnsQuery(dashbaordId);
+
+  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} />
+    </ul>
+  );
+}
+
+export function SkeletionItem() {
+  return (
+    <li className='flex animate-pulse flex-col gap-4 border-b border-r-0 p-6 lg:min-h-[calc(100dvh-70px)] lg:border-b-0 lg:border-r'>
+      <div className='flex h-7 items-center justify-between'>
+        <div className='flex items-center gap-2'>
+          <div className='h-3 w-3 rounded-full bg-gray-300' />
+          <div className='h-5 w-56 rounded bg-gray-300' />
+          <div className='h-6 w-6 rounded bg-gray-300' />
+        </div>
+        <div className='ml-4 h-5 w-5 rounded-full bg-gray-300' />
+      </div>
+      <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>
+  );
+}

src/components/columns/ColumnSettingBtn.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { useRef } from 'react';
+import { Modal, ModalContent, ModalFooter, ModalHandle, ModalHeader } from '@/components/ui/Modal/Modal';
+import Image from 'next/image';
+import Setting from '@/assets/icons/setting.svg';
+import Button from '@/components/ui/Button/Button';
+import { useForm } from 'react-hook-form';
+import { Column, ColumnForm, columnFormSchema } from '@/apis/columns/types';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Input } from '@/components/ui/Field';
+import { getErrorMessage } from '@/utils/errorMessage';
+import useAlert from '@/hooks/useAlert';
+import { useColumnMutation } from '@/apis/columns/queries';
+import xIcon from '@/assets/icons/x.svg';
+
+export default function ColumnSettingBtn({ column }: { column: Column }) {
+  const {
+    handleSubmit,
+    register,
+    reset,
+    formState: { errors, isValid, isSubmitting, isDirty },
+  } = useForm<ColumnForm>({
+    resolver: zodResolver(columnFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      title: column.title,
+    },
+  });
+  const updateModalRef = useRef<ModalHandle>(null);
+  const removeModalRef = useRef<ModalHandle>(null);
+  const { update, remove } = useColumnMutation(column.dashboardId);
+  const alert = useAlert();
+
+  const handleReset = (updatedTitle?: string) => {
+    reset({
+      title: updatedTitle ?? column.title,
+    });
+    updateModalRef.current?.close();
+  };
+
+  const onClick = () => {
+    updateModalRef.current?.close();
+    removeModalRef.current?.open();
+  };
+
+  const onSubmit = async (formData: ColumnForm) => {
+    try {
+      await update({ id: column.id, formData });
+      handleReset(formData.title);
+      alert('수정이 완료되었습니다!');
+    } catch (error) {
+      const message = getErrorMessage(error);
+      handleReset();
+      alert(message);
+    }
+  };
+
+  const onDelete = async () => {
+    try {
+      await remove(column.id);
+      removeModalRef.current?.close();
+      alert('컬럼이 삭제되었습니다!');
+    } catch (error) {
+      const message = getErrorMessage(error);
+      removeModalRef.current?.close();
+      alert(message);
+    }
+  };
+
+  const isDisabled = !isDirty || !isValid || isSubmitting;
+
+  return (
+    <div className='cursor-pointer'>
+      <Image src={Setting} alt='관리 버튼' width={18} height={18} onClick={() => updateModalRef.current?.open()} />
+      {/* 컬럼 수정 모달 */}
+      <Modal ref={updateModalRef}>
+        <ModalContent>
+          <ModalHeader className='flex justify-between'>
+            <span>컬럼 관리</span>
+            <Image src={xIcon} alt='컬럼 관리 취소 아이콘' width={24} height={24} onClick={() => handleReset()} className='cursor-pointer' />
+          </ModalHeader>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Input label='이름' error={errors.title?.message} placeholder='컬럼 이름을 입력해주세요' {...register('title')} />
+            <ModalFooter>
+              <Button type='button' variant='outline' onClick={onClick}>
+                삭제
+              </Button>
+              <Button type='submit' disabled={isDisabled}>
+                {isSubmitting ? '수정중' : '수정'}
+              </Button>
+            </ModalFooter>
+          </form>
+        </ModalContent>
+      </Modal>
+      {/* 컬럼 제거 모달 */}
+      <Modal ref={removeModalRef}>
+        <ModalContent>
+          <div className='py-3 text-center'>컬럼의 모든 카드가 삭제됩니다.</div>
+          <ModalFooter>
+            <Button
+              variant='outline'
+              onClick={() => {
+                removeModalRef.current?.close();
+                updateModalRef.current?.open();
+              }}
+            >
+              취소
+            </Button>
+            <Button onClick={async () => await onDelete()}>삭제</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+}