codeit-FE18-part3 · sohyun0 · Oct 18, 2025 · Oct 17, 2025 · Oct 18, 2025
diff --git a/src/api/applications.ts b/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;
 }
 
 // 특정 가게 특정 공고 지원자 목록

diff --git a/src/components/features/noticeList/noticeListSection.tsx b/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(() => {

diff --git a/src/components/ui/badge/StatusBadge.tsx b/src/components/ui/badge/StatusBadge.tsx
@@ -5,7 +5,7 @@ export type StatusType = 'pending' | 'accepted' | 'rejected';
 
 interface StatusBadgeProps {
   status: StatusType;
-  variant: 'employer' | 'employee';
+  variant: 'employer' | 'employee' | 'guest';
   onApprove: () => void;
   onReject: () => void;
 }

diff --git a/src/components/ui/card/post/post.tsx b/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} 공고 상세로 이동`}>

diff --git a/src/components/ui/table/Table.tsx b/src/components/ui/table/Table.tsx
@@ -1,13 +1,12 @@
 import { Pagination } from '@/components/ui';
 import { TableRowProps } from '@/components/ui/table/TableRowProps';
 import { cn } from '@/lib/utils/cn';
-import { UserType } from '@/types/user';
 import TableRow from './TableRow';
 
 interface TableProps {
-  data: TableRowProps[];
+  tableData: TableRowProps[];
+  userType: 'employer' | 'employee' | 'guest';
   headers: string[];
-  userType: UserType;
   total: number;
   limit: number;
   offset: number;
@@ -17,7 +16,7 @@ interface TableProps {
 // <Table headers={headers} data={data} userType={type} /> type은 확인이 좀 더 필요합니다
 
 export default function Table({
-  data,
+  tableData,
   headers,
   userType,
   total,
@@ -52,8 +51,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} variant={userType} />
               ))}
             </tbody>
           </table>

diff --git a/src/components/ui/table/TableRow.tsx b/src/components/ui/table/TableRow.tsx
@@ -7,7 +7,7 @@ import { useState } from 'react';
 
 interface TableTypeVariant {
   rowData: TableRowProps;
-  variant: 'employer' | 'employee';
+  variant: 'employer' | 'employee' | 'guest';
 }
 
 const TD_BASE = 'border-b border-r px-3 py-5 text-base gap-3 md:border-r-0';

diff --git a/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx b/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx
diff --git a/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx b/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx
@@ -1,89 +1,212 @@
-import { getApplications, getNoticeById } from '@/api/applications';
-import { Button, Notice, Table } from '@/components/ui';
+import { Button, Modal, Notice, Table } from '@/components/ui';
 import { TableRowProps } from '@/components/ui/table/TableRowProps';
 import useAuth from '@/hooks/useAuth';
-import { NoticeCard } from '@/types/notice';
+import axiosInstance from '@/lib/axios';
+import { getNoticeStatus } from '@/lib/utils/getNoticeStatus';
+import { toNoticeCard } from '@/lib/utils/parse';
+import type { NoticeCard } from '@/types/notice';
+import { Shop } from '@/types/shop';
+import { UserRole } from '@/types/user';
+import type { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
-const EmployerNoticePage = () => {
-  const router = useRouter();
-  const { query } = router;
-  const shopId = Array.isArray(query.shopId) ? query.shopId[0] : query.shopId;
-  const noticeId = Array.isArray(query.noticeId) ? query.noticeId[0] : query.noticeId;
+interface ModalItems {
+  title?: string;
+  primaryText?: string;
+  secondaryText?: string;
+  onPrimary?: () => void;
+  onSecondary?: () => void;
+}
+interface EditItems extends ModalItems {
+  noShop?: ModalItems;
+  shop?: ModalItems;
+}
+interface ApplicationTableApiResponse {
+  item: {
+    id: string;
+    status: string;
+    user?: {
+      href: string;
+      item: {
+        id: string;
+        name: string;
+        bio: string;
+        phone: string;
+      };
+    };
+    notice?: {
+      item?: {
+        startsAt: string;
+        workhour: number;
+        hourlyPay?: number;
+      };
+    };
+  };
+  links: unknown[];
+}
 
-  const { user } = useAuth();
+const EDIT_ITEMS: Record<UserRole, EditItems> = {
+  guest: {
+    title: '로그인이 필요합니다',
+    primaryText: '로그인하기',
+    secondaryText: '닫기',
+  },
+  employer: {
+    shop: {},
+    noShop: {
+      title: '내 가게를 먼저 등록해주세요',
+      primaryText: '가게 등록',
+      secondaryText: '닫기',
+    },
+  },
+  employee: {
+    title: '접근할 수 없습니다',
+    primaryText: '확인',
+  },
+};
+
+function hasShopFields(user: Shop | null) {
+  if (!user) return false;
+  return Boolean(
+    user.name &&
+      user.category &&
+      user.address1 &&
+      user.address2 &&
+      user.description &&
+      user.imageUrl &&
+      user.originalHourlyPay
+  );
+}
 
-  const [notice, setNotice] = useState<NoticeCard>();
+export const getServerSideProps: GetServerSideProps<{ notice: NoticeCard }> = async ({
+  params,
+}) => {
+  const { shopId, noticeId } = params as { shopId: string; noticeId: string };
+  try {
+    const noticeRes = await axiosInstance.get(`shops/${shopId}/notices/${noticeId}`);
+    return { props: { notice: toNoticeCard(noticeRes.data) } };
+  } catch {
+    return {
+      notFound: true,
+    };
+  }
+};
 
-  const [headers, setHeaders] = useState<string[]>([]);
+const EmployerNoticeDetailPage = ({ notice }: { notice: NoticeCard }) => {
+  const headers = ['신청자', '소개', '전화번호', '상태'];
   const [data, setData] = useState<TableRowProps[]>([]);
 
   const [offset, setOffset] = useState(0);
   const limit = 5;
 
-  // employer만 접근 가능
-  useEffect(() => {
-    if (user && !user.shop) {
-      router.replace('/');
+  const { role, isLogin, user } = useAuth();
+  const router = useRouter();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modal, setModal] = useState<ModalItems | null>(null);
+
+  const status = getNoticeStatus(notice.closed, notice.startsAt);
+  const canEdit = useMemo(() => status === 'open', [status]);
+
+  // 공고 편집하기
+  const handleEditClick = useCallback(() => {
+    if (!canEdit) return;
+
+    if (!isLogin) {
+      const items = EDIT_ITEMS.guest;
+      setModal({
+        ...items,
+        onPrimary: () => router.push('/login'),
+        onSecondary: () => setModalOpen(false),
+      });
+      setModalOpen(true);
+      return;
     }
-  }, [user, router]);
 
-  // 공고 조회
-  useEffect(() => {
-    if (!shopId || !noticeId) return;
+    if (role === 'employee') {
+      const items = EDIT_ITEMS.employee;
+      setModal({
+        ...items,
+        onPrimary: () => setModalOpen(false),
+      });
+      setModalOpen(true);
+      return;
+    }
 
-    const fetchNotice = async () => {
-      const result = await getNoticeById(shopId, noticeId);
-      setNotice(result);
-    };
+    const hasShop = hasShopFields(user?.shop?.item ?? null);
+    if (!hasShop) {
+      const items = EDIT_ITEMS.employer.noShop;
+      setModal({
+        ...items,
+        onPrimary: () => router.push('/my-shop'),
+        onSecondary: () => setModalOpen(false),
+      });
+      setModalOpen(true);
+      return;
+    }
 
-    fetchNotice().catch(() => {
-      setNotice(undefined);
-    });
-  }, [shopId, noticeId]);
+    router.push(`/employer/shops/${notice.shopId}/notices/${notice.id}/edit`);
+  }, [canEdit, isLogin, role, user, notice, router]);
 
-  // 지원자 목록 조회
-  useEffect(() => {
-    if (!shopId || !noticeId) return;
+  // 신청자 불러오기
 
+  useEffect(() => {
     const fetchApplications = async () => {
-      const applications = await getApplications(shopId, noticeId, offset, limit);
-      setHeaders(['신청자', '소개', '전화번호', '상태']);
-      setData(
-        applications.map(app => ({
-          id: app.id,
-          name: app.user?.name ?? '-',
-          startsAt: '-',
-          workhour: 0,
-          hourlyPay: '-',
-          status: app.status,
-          bio: '-',
-          phone: '-',
-        }))
+      const res = await axiosInstance.get<{ items: ApplicationTableApiResponse[] }>(
+        `/shops/${notice.shopId}/notices/${notice.id}/applications`,
+        { params: { offset, limit } }
       );
+
+      const tableData: TableRowProps[] = res.data.items.map(app => {
+        const userItem = app.item.user?.item;
+        const noticeItem = app.item.notice?.item;
+
+        return {
+          id: app.item.id,
+          name: userItem?.name ?? '-',
+          bio: userItem?.bio ?? '-',
+          phone: userItem?.phone ?? '-',
+          startsAt: noticeItem?.startsAt ?? '-',
+          workhour: noticeItem?.workhour ?? 0,
+          hourlyPay: noticeItem?.hourlyPay
+            ? `${noticeItem.hourlyPay.toLocaleString()}원`
+            : '정보 없음',
+          status: app.item.status,
+        };
+      });
+
+      setData(tableData);
     };
 
     fetchApplications();
-  }, [shopId, noticeId, offset]);
-
-  if (!notice) return null;
+  }, [notice.shopId, notice.id, offset, limit]);
 
   return (
-    <div className='p-4'>
-      <Notice notice={notice} variant='notice'>
+    <div>
+      <Notice notice={notice} className='py-10 tablet:py-16'>
         <Button
-          variant='secondary'
-          size='md'
-          className='w-full'
-          onClick={() => router.push(`/employer/notices/${notice.id}/edit`)}
+          size='xs38'
+          full
+          className='font-bold'
+          variant={'secondary'}
+          onClick={handleEditClick}
         >
           공고 편집하기
         </Button>
+        <Modal
+          open={modalOpen}
+          onClose={() => setModalOpen(false)}
+          variant='warning'
+          title={modal?.title ?? '유저 정보를 확인해주세요'}
+          primaryText={modal?.primaryText ?? '확인'}
+          onPrimary={modal?.onPrimary ?? (() => setModalOpen(false))}
+          secondaryText={modal?.secondaryText}
+          onSecondary={modal?.onSecondary}
+        />
       </Notice>
       <Table
         headers={headers}
-        data={data}
+        tableData={data}
         userType='employer'
         total={data.length}
         limit={limit}
@@ -94,4 +217,4 @@ const EmployerNoticePage = () => {
   );
 };
 
-export default EmployerNoticePage;
+export default EmployerNoticeDetailPage;