[🐛fix] 테이블 신청자 api 연동 #82

src/api/applications.ts

@@ -43,8 +43,26 @@ export const putApplication = async (shopId: string, noticeId: string, applicati
 
 // 특정 가게 특정 공고 정보
 export async function getNoticeById(shopId: string, noticeId: string): Promise<NoticeCard> {
-  const { data } = await axiosInstance.get<NoticeCard>(`/shops/${shopId}/notices/${noticeId}`);
-  return data;
+  const { data } = await axiosInstance.get(`/shops/${shopId}/notices/${noticeId}`);
+
+  // API 응답 -> NoticeCard 형태로 매핑
+  const noticeCard: NoticeCard = {
+    id: data.id,
+    name: data.shop?.name ?? '',
+    shopId: data.shop?.id ?? shopId,
+    address1: data.shop?.address1 ?? '',
+    hourlyPay: data.hourlyPay ?? 0,
+    originalHourlyPay: data.originalHourlyPay ?? data.hourlyPay ?? 0,
+    workhour: data.workhour ?? 0,
+    startsAt: data.startsAt,
+    closed: data.closed ?? false,
+    imageUrl: data.imageUrl ?? '',
+    description: data.description ?? '',
+    category: data.category ?? '기타', // 누락 필수
+    shopDescription: data.shopDescription ?? '', // 누락 필수
+  };
+
+  return noticeCard;
 }
 
 // 특정 가게 특정 공고 지원자 목록
@@ -62,3 +80,12 @@ export async function getApplications(
 
   return applications;
 }
+
+// 신청 상태 업데이트
+export const updateApplicationStatus = async (
+  applicationId: string,
+  status: 'accepted' | 'rejected'
+) => {
+  const res = await axiosInstance.put(`/applications/${applicationId}/status`, { status });
+  return res.data;
+};

src/components/features/noticeList/noticeListSection.tsx

@@ -13,7 +13,7 @@ interface NoticeListSectionProps {
 }
 
 const NoticeListSection = ({ q, initialFilters }: NoticeListSectionProps) => {
-  const { notices, isLoading, isInitialized, error, pagination, fetchNotices,reset, filters } =
+  const { notices, isLoading, isInitialized, error, pagination, fetchNotices, reset, filters } =
     useNotices();
 
   useEffect(() => {

src/components/ui/badge/StatusBadge.tsx

@@ -1,16 +1,24 @@
 import { Button } from '@/components/ui/button';
+import { UserRole } from '@/types/user';
 import Badge from './Badge';
 
 export type StatusType = 'pending' | 'accepted' | 'rejected';
 
 interface StatusBadgeProps {
   status: StatusType;
-  variant: 'employer' | 'employee';
+  userRole: UserRole;
   onApprove: () => void;
   onReject: () => void;
+  applicationId: string;
+  onStatusChange: (id: string, status: StatusType) => void;
 }
 
-export default function StatusBadge({ status, variant, onApprove, onReject }: StatusBadgeProps) {
+export default function StatusBadge({
+  status,
+  userRole: variant,
+  onApprove,
+  onReject,
+}: StatusBadgeProps) {
   if (status === 'pending' && variant === 'employer') {
     return (
       <div className='flex w-1/2 flex-col gap-2 md:flex-row'>

src/components/ui/badge/statusbadge.stories.tsx

@@ -15,31 +15,31 @@ type Story = StoryObj<typeof StatusBadge>;
 export const Accept: Story = {
   args: {
     status: 'accepted',
-    variant: 'employer',
+    userRole: 'employer',
   },
 };
 
 // Reject 거절 뱃지
 export const Reject: Story = {
   args: {
     status: 'rejected',
-    variant: 'employer',
+    userRole: 'employer',
   },
 };
 
 // Pending 대기중 employee 뱃지
 export const PendingEmployee: Story = {
   args: {
     status: 'pending',
-    variant: 'employee',
+    userRole: 'employee',
   },
 };
 
 // Pending 대기중 employer
 export const PendingEmployer: Story = {
   args: {
     status: 'pending',
-    variant: 'employer',
+    userRole: 'employer',
     onApprove: () => alert('승인!'),
     onReject: () => alert('거절!'),
   },

src/components/ui/card/post/post.tsx

@@ -2,6 +2,7 @@ import { cardLayout, CardStatusVariant } from '@/components/ui/card/card.styles'
 import CardBadge from '@/components/ui/card/cardBadge';
 import CardImage from '@/components/ui/card/cardImage';
 import CardInfo from '@/components/ui/card/cardInfo';
+import useAuth from '@/hooks/useAuth';
 import { getTime } from '@/lib/utils/dateFormatter';
 import { formatNumber } from '@/lib/utils/formatNumber';
 import { getNoticeStatus } from '@/lib/utils/getNoticeStatus';
@@ -18,6 +19,7 @@ const STATUS_LABEL = {
 } as const;
 
 const Post = ({ notice }: PostProps) => {
+  const { user } = useAuth();
   const {
     id,
     hourlyPay,
@@ -33,7 +35,8 @@ const Post = ({ notice }: PostProps) => {
   const status = getNoticeStatus(closed, startsAt);
   const { date, startTime, endTime } = getTime(startsAt, workhour);
   const statusVariant: CardStatusVariant = status === 'open' ? 'open' : 'inactive';
-  const href = `/notices/${shopId}/${id}`;
+  const href =
+    user && user.shop ? `/employer/shops/${shopId}/notices/${id}` : `/notices/${shopId}/${id}`;
 
   return (
     <Link href={href} className={postFrame()} aria-label={`${name} 공고 상세로 이동`}>

src/components/ui/table/Table.stories.tsx

@@ -1,6 +1,6 @@
 import Table from '@/components/ui/table/Table';
 import { TableRowProps } from '@/components/ui/table/TableRowProps';
-import { UserType } from '@/types/user';
+import { UserRole, UserType } from '@/types/user';
 import { Meta, StoryObj } from '@storybook/nextjs';
 import { useEffect, useState } from 'react';
 import { fetchTableData } from './testApi';
@@ -16,29 +16,29 @@ export default meta;
 
 type Story = StoryObj<typeof Table>;
 
-function TableWithTestApi({ userType }: { userType: UserType }) {
+function TableWithTestApi({ userRole }: { userRole: UserRole }) {
   const [headers, setHeaders] = useState<string[]>([]);
   const [data, setData] = useState<TableRowProps[]>([]);
   const [offset, setOffset] = useState(0);
   const limit = 5;
 
   useEffect(() => {
     const getData = async () => {
-      const res = await fetchTableData(userType);
+      const res = await fetchTableData(userRole);
       setHeaders(res.headers);
       setData(res.data as TableRowProps[]);
     };
     getData();
-  }, [userType]);
+  }, [userRole]);
 
   const count = data.length;
   const paginatedData = data.slice(offset, offset + limit);
 
   return (
     <Table
       headers={headers}
-      data={paginatedData}
-      userType={userType}
+      tableData={paginatedData}
+      userRole={userRole}
       total={count}
       limit={limit}
       offset={offset}
@@ -49,14 +49,14 @@ function TableWithTestApi({ userType }: { userType: UserType }) {
 
 export const EmployerTable: Story = {
   args: {
-    userType: 'employer',
+    userRole: 'employer',
   },
-  render: args => <TableWithTestApi userType={args.userType as UserType} />,
+  render: args => <TableWithTestApi userRole={args.userRole as UserType} />,
 };
 
 export const EmployeeTable: Story = {
   args: {
-    userType: 'employee',
+    userRole: 'employee',
   },
-  render: args => <TableWithTestApi userType={args.userType as UserType} />,
+  render: args => <TableWithTestApi userRole={args.userRole as UserType} />,
 };

src/components/ui/table/Table.tsx

@@ -1,25 +1,23 @@
 import { Pagination } from '@/components/ui';
 import { TableRowProps } from '@/components/ui/table/TableRowProps';
 import { cn } from '@/lib/utils/cn';
-import { UserType } from '@/types/user';
+import { UserRole } from '@/types/user';
 import TableRow from './TableRow';
 
 interface TableProps {
-  data: TableRowProps[];
+  tableData: TableRowProps[];
+  userRole: UserRole;
   headers: string[];
-  userType: UserType;
   total: number;
   limit: number;
   offset: number;
   onPageChange: (newOffset: number) => void;
 }
 
-// <Table headers={headers} data={data} userType={type} /> type은 확인이 좀 더 필요합니다
-
 export default function Table({
-  data,
+  tableData,
   headers,
-  userType,
+  userRole,
   total,
   limit,
   offset,
@@ -28,7 +26,7 @@ export default function Table({
   return (
     <div className='py-[60px]'>
       <div className='px-8 text-xl font-bold md:px-10 lg:mx-auto lg:max-w-[1000px] lg:px-0'>
-        {userType === 'employer' ? '신청자 목록' : '신청 목록'}
+        {userRole === 'employer' ? '신청자 목록' : '신청 목록'}
       </div>
       <div className='m-7 overflow-hidden rounded-lg border bg-white lg:mx-auto lg:max-w-[1000px]'>
         <div className='scroll-bar overflow-x-auto'>
@@ -52,8 +50,8 @@ export default function Table({
               </tr>
             </thead>
             <tbody>
-              {data.map(row => (
-                <TableRow key={row.id} rowData={row} variant={userType} />
+              {tableData.map(row => (
+                <TableRow key={row.id} {...row} rowData={row} userRole={userRole} />
               ))}
             </tbody>
           </table>

src/components/ui/table/TableRow.tsx

@@ -3,27 +3,33 @@ import { StatusType } from '@/components/ui/badge/StatusBadge';
 import { TableRowProps } from '@/components/ui/table/TableRowProps';
 import { cn } from '@/lib/utils/cn';
 import { getTime } from '@/lib/utils/dateFormatter';
+import { UserRole } from '@/types/user';
 import { useState } from 'react';
 
 interface TableTypeVariant {
   rowData: TableRowProps;
-  variant: 'employer' | 'employee';
+  userRole: UserRole;
 }
 
 const TD_BASE = 'border-b border-r px-3 py-5 text-base gap-3 md:border-r-0';
 const TD_STATUS = 'border-b px-2 py-[9px]';
 
-export default function TableRow({ rowData, variant }: TableTypeVariant) {
+export default function TableRow({ rowData, userRole: userRole }: TableTypeVariant) {
   const { date, startTime, endTime, duration } = getTime(rowData.startsAt, rowData.workhour);
   const [status, setStatus] = useState<StatusType>(rowData.status as StatusType);
 
+  const handleStatusChange = (id: string, newStatus: StatusType) => {
+    setStatus(newStatus);
+  };
+
   const handleApprove = () => setStatus('accepted');
   const handleReject = () => setStatus('rejected');
 
   return (
     <tr className='text-left'>
       <td className={cn(TD_BASE, 'sticky left-0 z-10 bg-white')}>{rowData.name}</td>
-      {variant === 'employee' ? (
+
+      {userRole === 'employee' ? (
         <>
           <td className={TD_BASE}>{`${date} ${startTime} ~ ${date} ${endTime} (${duration})`}</td>
           <td className={TD_BASE}>{rowData.hourlyPay}</td>
@@ -36,8 +42,10 @@ export default function TableRow({ rowData, variant }: TableTypeVariant) {
       )}
       <td className={TD_STATUS}>
         <StatusBadge
+          applicationId={rowData.id}
           status={status}
-          variant={variant}
+          userRole={userRole}
+          onStatusChange={handleStatusChange}
           onApprove={handleApprove}
           onReject={handleReject}
         />

src/components/ui/table/testApi.tsx

@@ -1,9 +1,9 @@
-import type { UserType } from '@/types/user';
+import type { UserRole } from '@/types/user';
 
-export const fetchTableData = async (userType: UserType) => {
+export const fetchTableData = async (userRole: UserRole) => {
   return new Promise<{ headers: string[]; data: unknown[] }>(resolve => {
     setTimeout(() => {
-      if (userType === 'employer') {
+      if (userRole === 'employer') {
         resolve({
           headers: ['신청자', '소개', '전화번호', '상태'],
           data: [