Merge pull request #50 from CodeitPart3/PROFILE-49-JIN

[feat] UserApplicationTable 컴포넌트 구현 (내 프로필 신청 내역), StatusBadge, numberCommaFormatter 구현

Author: cozy-ito

package.json

@@ -9,10 +9,10 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "postinstall": "node scripts/setup-git-hooks.cjs",
-    "prepare": "husky"
+    "prepare": "husky install"
   },
   "lint-staged": {
-    "**/*.{js,jsx}": [
+    "**/*.{ts,tsx,js.jsx}": [
       "eslint --fix",
       "prettier --write"
     ],

src/components/Pagination.tsx

@@ -52,7 +52,7 @@ export default function Pagination({
   const isLastPage = currentPage === totalPages;
 
   return (
-    <ul className="flex items-center md:gap-1 sm:gap-0.5 select-none text-black">
+    <ul className="flex items-center md:gap-1 gap-0.5 select-none text-black">
       {isTotalPagesMoreThanLimit && (
         <li className="flex items-center mr-4">
           <button
@@ -80,7 +80,7 @@ export default function Pagination({
               disabled={isActive}
               aria-current={isActive ? "page" : undefined}
               className={cn(
-                "md:w-10 md:h-10 sm:w-8 sm:h-8 grid place-content-center rounded-sm md:text-sm sm:text-xs",
+                "md:w-10 md:h-10 w-8 h-8 grid place-content-center rounded-sm md:text-sm text-xs",
                 "cursor-pointer disabled:cursor-default transition-colors duration-150 active:scale-95",
                 isActive ? "bg-red-30 text-white" : "hover:bg-gray-100",
               )}

src/components/StatusBadge.tsx

@@ -0,0 +1,31 @@
+import { ApplicationStatus } from "../types";
+
+import { cn } from "@/utils/cn";
+
+interface StatusBadgeProps {
+  status: ApplicationStatus;
+}
+
+const statusMap: {
+  [key in ApplicationStatus]: { text: string; className: string };
+} = {
+  accepted: { text: "승인 완료", className: "bg-blue-10 text-blue-20" },
+  pending: { text: "대기중", className: "bg-green-10 text-green-20" },
+  canceled: { text: "취소", className: " bg-yellow-100 text-yellow-500" },
+  rejected: { text: "거절", className: "bg-red-40 text-red-10" },
+} as const;
+
+function StatusBadge({ status }: StatusBadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-block py-1.5 px-2.5 rounded-full text-xs md:text-sm font-bold",
+        statusMap[status].className,
+      )}
+    >
+      {statusMap[status].text}
+    </span>
+  );
+}
+
+export default StatusBadge;

src/pages/ProfilePage/components/UserApplicationTable.tsx

@@ -0,0 +1,63 @@
+import Pagination from "@/components/Pagination";
+import StatusBadge from "@/components/StatusBadge";
+import Table from "@/components/Table";
+import { ApplicationItem } from "@/types/application";
+import { formatTimeRange } from "@/utils/datetime";
+import { numberCommaFormatter } from "@/utils/number";
+
+interface UserApplicationTableProps {
+  data: ApplicationItem[];
+  pageCount: number;
+  pageLimit: number;
+  itemCountPerPage?: number;
+}
+
+function UserApplicationTable({
+  data,
+  pageCount,
+  pageLimit,
+  itemCountPerPage = 5,
+}: UserApplicationTableProps) {
+  return (
+    <Table
+      data={data}
+      headRow={() => (
+        <Table.Tr>
+          <Table.Th className="min-w-[10rem] max-w-[14.25rem]">가게</Table.Th>
+          <Table.Th className="min-w-[18rem]">일자</Table.Th>
+          <Table.Th className="min-w-[8.5rem] max-w-[12.5rem]">시급</Table.Th>
+          <Table.Th className="min-w-[8.5rem] max-w-[14.75rem]">상태</Table.Th>
+        </Table.Tr>
+      )}
+      bodyRow={({ id, notice, shop, status }) => (
+        <Table.Tr
+          key={id}
+          className="text-sm md:text-[1rem]"
+          showLastBottomBorder
+        >
+          <Table.Td>{shop.item.name}</Table.Td>
+          <Table.Td>
+            {formatTimeRange(notice.item.startsAt, notice.item.workhour)}
+          </Table.Td>
+          <Table.Td>{numberCommaFormatter(notice.item.hourlyPay)}원</Table.Td>
+          <Table.Td>
+            <StatusBadge status={status} />
+          </Table.Td>
+        </Table.Tr>
+      )}
+      footerRow={() => (
+        <Table.Tr className="flex justify-center">
+          <Table.Td colSpan={3}>
+            <Pagination
+              count={pageCount}
+              limit={pageLimit}
+              itemCountPerPage={itemCountPerPage}
+            />
+          </Table.Td>
+        </Table.Tr>
+      )}
+    />
+  );
+}
+
+export default UserApplicationTable;

src/utils/number.ts

@@ -0,0 +1,7 @@
+/**
+ * 숫자를 전달받아 콤마(,)를 더해 반환합니다.
+ * @example numberCommaFormatter(20000) -> 20,000
+ */
+export const numberCommaFormatter = Intl.NumberFormat("ko-kr", {
+  compactDisplay: "long",
+}).format;