✨ feat: Table component 구현

src/components/common/table/Table.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useState } from 'react';
+import TableStatus from './TableStatus';
+import TableButtons from './TableButtons';
+import Pagination from '../Pagination';
+import formatWorkTime from '@/utils/formatWorkTime';
+import {
+  getNoticeApplications,
+  getUserApplications,
+} from '@/api/applicationApi';
+
+interface UserProps {
+  className?: string;
+  mode: 'user';
+  userId: string;
+}
+
+interface NoticeProps {
+  className?: string;
+  mode: 'notice';
+  shopId: string;
+  noticeId: string;
+}
+
+export default function Table(props: UserProps | NoticeProps) {
+  const { className, mode } = props;
+  const headers =
+    mode === 'notice'
+      ? ['신청자', '소개', '전화번호', '상태']
+      : ['가게', '일자', '시급', '상태'];
+  const [datas, setDatas] = useState<(string | undefined)[][]>(
+    Array(5).fill(['', '', '', '']),
+  );
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (mode === 'notice') {
+          const { items, count } = await getNoticeApplications(
+            props.shopId,
+            props.noticeId,
+            {
+              offset: (page - 1) * 5,
+              limit: 5,
+            },
+          );
+
+          setTotalPage(count ? Math.ceil(count / 5) : 1);
+          setDatas(
+            [...items, ...[null, null, null, null, null]]
+              .slice(0, 5)
+              .map((element) => {
+                if (!element) return ['', '', '', ''];
+
+                return [
+                  element.item.user.item.name,
+                  element.item.user.item.bio,
+                  element.item.user.item.phone,
+                  element.item.status,
+                  element.item.id,
+                ];
+              }),
+          );
+        } else {
+          const { items, count } = await getUserApplications(props.userId, {
+            offset: (page - 1) * 5,
+            limit: 5,
+          });
+
+          setTotalPage(count ? Math.ceil(count / 5) : 1);
+          setDatas(
+            [...items, ...[null, null, null, null, null]]
+              .slice(0, 5)
+              .map((element) => {
+                if (!element) return ['', '', '', ''];
+
+                return [
+                  element.item.shop.item.name,
+                  `${formatWorkTime({
+                    startsAt: element.item.notice.item.startsAt,
+                    workhour: element.item.notice.item.workhour,
+                  })} (${element.item.notice.item.workhour}시간)`,
+                  element.item.notice.item.hourlyPay.toLocaleString('ko-KR') +
+                    '원',
+                  element.item.status,
+                ];
+              }),
+          );
+        }
+      } catch {
+        setDatas(Array(5).fill(['', '', '', '']));
+        setPage(1);
+        setTotalPage(1);
+      }
+    })();
+  }, [mode, page]);
+
+  return (
+    <div
+      className={`@container scrollbar-hide overflow-x-auto rounded-[10px] border border-gray-20 bg-white ${className}`}
+    >
+      <table className="w-full min-w-888 border-separate border-spacing-0 text-left md:min-w-946">
+        <thead className="h-39 bg-red-10 text-caption/16 md:h-49 md:text-body2/22">
+          <tr>
+            <th className="w-227 border-b border-gray-20 px-7 font-regular md:px-11">
+              {headers[0]}
+            </th>
+            <th className="w-300 border-b border-gray-20 px-8 font-regular md:px-12">
+              {headers[1]}
+            </th>
+            <th className="w-200 border-b border-gray-20 px-8 font-regular md:px-12">
+              {headers[2]}
+            </th>
+            <th className="sticky right-0 border-b border-l border-gray-20 bg-red-10 px-7 font-regular md:px-11 @min-[947px]:border-l-transparent">
+              {headers[3]}
+            </th>
+          </tr>
+        </thead>
+        <tbody className="text-body2/22 font-regular md:text-body1/26">
+          {datas.map((data, index) => (
+            <tr key={index}>
+              <td className="border-b border-gray-20 pt-12 pr-8 pb-11 pl-7 md:pt-20 md:pr-12 md:pb-19 md:pl-11">
+                <div className="line-clamp-1 max-h-22 overflow-hidden md:line-clamp-2 md:max-h-51">
+                  {data[0]}
+                </div>
+              </td>
+              <td className="border-b border-gray-20 px-8 pt-12 pb-11 md:px-12 md:pt-20 md:pb-19">
+                <div className="line-clamp-1 max-h-22 overflow-hidden md:line-clamp-2 md:max-h-51">
+                  {data[1]}
+                </div>
+              </td>
+              <td className="border-b border-gray-20 px-8 pt-12 pb-11 md:px-12 md:pt-20 md:pb-19">
+                <div className="line-clamp-1 max-h-22 overflow-hidden md:line-clamp-2 md:max-h-51">
+                  {data[2]}
+                </div>
+              </td>
+              <td className="sticky right-0 border-b border-l border-gray-20 bg-white px-7 pt-1 md:px-11 @min-[947px]:border-l-transparent">
+                <div className="min-h-44 content-center md:min-h-67">
+                  {mode === 'notice' && data[3] === 'pending' ? (
+                    <TableButtons
+                      shopId={props.shopId}
+                      noticeId={props.noticeId}
+                      applicaitonId={data[4] ?? ''}
+                    />
+                  ) : (
+                    <TableStatus status={data[3] ?? ''} />
+                  )}
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="sticky right-0 bottom-0 left-0">
+        <Pagination
+          currentPage={page}
+          setCurrentPage={setPage}
+          totalPages={totalPage}
+        />
+      </div>
+    </div>
+  );
+}

src/components/common/table/TableButtons.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useState, type MouseEvent } from 'react';
+import Button from '../Button';
+import TableStatus from './TableStatus';
+import { putNoticeApplications } from '@/api/applicationApi';
+import Modal from '../Modal';
+
+interface Props {
+  shopId: string;
+  noticeId: string;
+  applicaitonId: string;
+}
+
+export default function TableButtons({
+  shopId,
+  noticeId,
+  applicaitonId,
+}: Props) {
+  const [status, setStatus] = useState<'pending' | 'accepted' | 'rejected'>(
+    'pending',
+  );
+  const [modal, setModal] = useState<{
+    isOpen: boolean;
+    status: 'accepted' | 'rejected';
+  }>({
+    isOpen: false,
+    status: 'accepted',
+  });
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+
+  const closeModal = () =>
+    setModal((prev) => {
+      return { ...prev, isOpen: false };
+    });
+
+  const handleModalClick = async () => {
+    closeModal();
+    setStatus(modal.status);
+    try {
+      await putNoticeApplications(shopId, noticeId, applicaitonId, {
+        status: modal.status,
+      });
+    } catch {
+      setStatus('pending');
+    }
+  };
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    setModal({
+      isOpen: true,
+      status: e.currentTarget.value as 'accepted' | 'rejected',
+    });
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return status === 'pending' ? (
+    <>
+      <div className="flex gap-8 md:gap-12">
+        <Button
+          solid={false}
+          size={isMobile ? 'small' : 'medium'}
+          className="w-69 md:w-92"
+          value="rejected"
+          onClick={handleClick}
+        >
+          거절하기
+        </Button>
+        <Button
+          solid={false}
+          size={isMobile ? 'small' : 'medium'}
+          className="w-69 md:w-92"
+          style={{
+            color: 'var(--color-blue-20)',
+            borderColor: 'var(--color-blue-20)',
+          }}
+          value="accepted"
+          onClick={handleClick}
+        >
+          승인하기
+        </Button>
+      </div>
+      {modal.isOpen && (
+        <Modal
+          option="action"
+          onButtonClick={closeModal}
+          onYesButtonClick={handleModalClick}
+          yesButtonContent="예"
+          onClose={closeModal}
+        >
+          신청을 {modal.status === 'accepted' ? '승인' : '거절'}하시겠어요?
+        </Modal>
+      )}
+    </>
+  ) : (
+    <TableStatus status={status} />
+  );
+}

src/components/common/table/TableStatus.tsx

@@ -0,0 +1,19 @@
+export default function TableStatus({ status }: { status: string }) {
+  return status === 'pending' ? (
+    <div className="inline-block rounded-full bg-green-10 px-10 py-6 text-caption/16 text-green-20 md:text-body2/17 md:font-bold">
+      대기중
+    </div>
+  ) : status === 'accepted' ? (
+    <div className="inline-block rounded-full bg-blue-10 px-10 py-6 text-caption/16 text-blue-20 md:text-body2/17 md:font-bold">
+      승인 완료
+    </div>
+  ) : status === 'rejected' ? (
+    <div className="inline-block rounded-full bg-red-10 px-10 py-6 text-caption/16 text-red-40 md:text-body2/17 md:font-bold">
+      거절
+    </div>
+  ) : status === 'canceled' ? (
+    <div className="inline-block rounded-full bg-gray-20 px-10 py-6 text-caption/16 text-gray-50 md:text-body2/17 md:font-bold">
+      취소
+    </div>
+  ) : null;
+}