diff --git a/src/pages/my-profile/index.tsx b/src/pages/my-profile/index.tsx index afe28f2..fe8dd8a 100644 --- a/src/pages/my-profile/index.tsx +++ b/src/pages/my-profile/index.tsx @@ -3,13 +3,16 @@ import Image from 'next/image'; import Link from 'next/link'; import { useEffect, useMemo, useState } from 'react'; +import { Container } from '@/components/layout'; // ✅ my-shop과 동일 패턴 import Frame from '@/components/layout/frame/frame'; import Button from '@/components/ui/button/button'; import Table from '@/components/ui/table/Table'; -import type { TableRowProps } from '@/components/ui/table/TableRowProps'; + import { ICONS, ICON_SIZES } from '@/constants/icon'; import { useUserApplications } from '@/context/userApplicationsProvider'; import useAuth from '@/hooks/useAuth'; + +import type { TableRowProps } from '@/components/ui/table/TableRowProps'; import type { ApiResponse } from '@/types/api'; import type { ApplicationItem } from '@/types/applications'; import type { User, UserType } from '@/types/user'; @@ -22,8 +25,6 @@ export default function MyProfileDetailPage() { const [offset, setOffset] = useState(0); const limit = 5; - const [tableRows, setTableRows] = useState([]); - // 프로필 비었는지 판단 (User | null 안전) function isProfileEmpty(u: User | null): boolean { const name = u?.name?.trim() ?? ''; @@ -37,12 +38,13 @@ export default function MyProfileDetailPage() { const headers: string[] = ['가게명', '근무일시', '시급', '상태']; const userType: UserType = 'employee'; - // 서버 응답 → TableRowProps 매핑 + // 서버 응답 → TableRowProps 매핑 (shopId/noticeId 포함) const rows: TableRowProps[] = useMemo(() => { return applications.map((app: ApiResponse) => { const a = app.item; const status = a.status === 'accepted' ? 'approved' : a.status === 'rejected' ? 'rejected' : 'pending'; + return { id: a.id, name: a.shop.item.name, @@ -52,6 +54,7 @@ export default function MyProfileDetailPage() { status, bio: '', phone: '', + // ✅ TableRow가 요구하는 키 채움 shopId: a.shop.item.id, noticeId: a.notice.item.id, }; @@ -78,46 +81,20 @@ export default function MyProfileDetailPage() { const pagedRows = useMemo(() => currentRows.slice(offset, offset + limit), [currentRows, offset]); - useEffect(() => { - const mappedRows: TableRowProps[] = applications.map(app => { - const a = app.item; - const status = - a.status === 'accepted' ? 'approved' : a.status === 'rejected' ? 'rejected' : 'pending'; - return { - id: a.id, - name: a.shop.item.name, - hourlyPay: `${a.notice.item.hourlyPay.toLocaleString()}원`, - startsAt: a.notice.item.startsAt, - workhour: a.notice.item.workhour, - status, - bio: '', - phone: '', - shopId: a.shop.item.id, - noticeId: a.notice.item.id, - }; - }); - - setTableRows(mappedRows); - }, [applications]); - return (
- {/* 공통 컨테이너: Table과 좌측선/폭 동일 */} -
- {profileIsEmpty ? ( - <> -

내 프로필

-
- -
- - ) : ( - // ✅ 데스크탑에서 제목과 카드가 같은 flex 라인에 놓이도록 + {/* ───────────────── 상단 영역 ───────────────── */} + {profileIsEmpty ? ( + // ✅ 2중 컨테이너 제거: Frame만 단독 렌더 + + ) : ( + // ✅ 공용 Container로 감싸서 my-shop과 동일한 레이아웃 패턴 +

내 프로필 @@ -185,52 +162,49 @@ export default function MyProfileDetailPage() {

- )} - + + )} - {/* 하단: 신청 내역 — 프로필 있고 로그인 상태일 때만 */} + {/* ──────────────── 하단: 신청 내역 ──────────────── */} {!profileIsEmpty && isLogin && ( -
-
- {isLoading && currentRows.length === 0 ? ( - <> -
-

신청 내역

-
-
-
- {[...Array(5)].map((_, i) => ( -
- ))} -
-
- - ) : currentRows.length === 0 ? ( - - ) : ( -
+
+ {isLoading && currentRows.length === 0 ? ( + +
+

신청 내역

+
+
+
+ {[...Array(5)].map((_, i) => ( +
+ ))} +
+
+ + ) : currentRows.length === 0 ? ( + // ✅ 2중 컨테이너 제거: Frame만 단독 렌더 + + ) : ( + +
- setTableRows(prev => - prev.map(row => (row.id === id ? { ...row, status: newStatus } : row)) - ) - } + onStatusUpdate={() => {}} // ✅ 이 페이지에서는 상태 변경 없음(필수 prop 무해한 no-op) /> - )} - + + )} )}