diff --git a/src/app/instructor/my/page.tsx b/src/app/instructor/my/page.tsx index 5fc67f3..b8b2e26 100644 --- a/src/app/instructor/my/page.tsx +++ b/src/app/instructor/my/page.tsx @@ -1,5 +1,15 @@ +import { CommissionsHistorySection, MyInfoSection } from "@/widgets/instructor/my"; + const page = () => { - return
강사 마이페이지
; + return ( +
+

마이페이지

+
+ + +
+
+ ); }; export default page; diff --git a/src/features/instructor/my/index.ts b/src/features/instructor/my/index.ts new file mode 100644 index 0000000..e3672fc --- /dev/null +++ b/src/features/instructor/my/index.ts @@ -0,0 +1,8 @@ +export type { CommissionHistoryItem } from "@/features/instructor/my/model/my"; +export { + CATEGORY_BADGE_MAP, + commissionHistoryData, + PLAN_DISPLAY_MAP, +} from "@/features/instructor/my/model/my"; +export { default as CommissionsHeader } from "@/features/instructor/my/ui/CommissionsHeader"; +export { default as CommissionsHistoryRow } from "@/features/instructor/my/ui/CommissionsHistoryRow"; diff --git a/src/features/instructor/my/model/my.ts b/src/features/instructor/my/model/my.ts new file mode 100644 index 0000000..f191c96 --- /dev/null +++ b/src/features/instructor/my/model/my.ts @@ -0,0 +1,115 @@ +import { BadgeVariant } from "@/shared/ui/Badge"; + +// [강사] 마이페이지 외주 내역 조회 +export type CommissionHistoryItem = { + commissionId: number; + category: string; + title: string; + createdAt: string; + plan: "BASIC" | "PLUS" | "MAX"; + totalAmount: number; + status: "COMPLETED" | "ONGOING"; +}; + +export const PLAN_DISPLAY_MAP: Record = { + BASIC: "기본", + PLUS: "플러스", + MAX: "맥스", +}; + +export const CATEGORY_BADGE_MAP: Record = { + FLYER_TEXTBOOK_COVER_INNER: "교재", +}; + +export const commissionHistoryData: CommissionHistoryItem[] = [ + { + commissionId: 1, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "YMB 영어교재 표지디자인 외주", + createdAt: "2025-05-05", + plan: "BASIC", + totalAmount: 400000, + status: "COMPLETED", + }, + { + commissionId: 2, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "해커스톡 왕초보 영어 기초 문법편 표지디자인 외주", + createdAt: "2025-04-18", + plan: "PLUS", + totalAmount: 480000, + status: "COMPLETED", + }, + { + commissionId: 3, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "토익 실전 모의고사 Part 5·6 표지디자인 외주", + createdAt: "2025-03-24", + plan: "MAX", + totalAmount: 560000, + status: "COMPLETED", + }, + { + commissionId: 4, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "수능 영어 독해 빈칸추론 완성 표지디자인 외주", + createdAt: "2025-03-02", + plan: "BASIC", + totalAmount: 400000, + status: "COMPLETED", + }, + { + commissionId: 5, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "중학 수학 개념서 1학기 과정 표지디자인 외주", + createdAt: "2025-02-14", + plan: "PLUS", + totalAmount: 480000, + status: "ONGOING", + }, + { + commissionId: 6, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "고등 국어 문학 현대시 집중 표지디자인 외주", + createdAt: "2025-01-28", + plan: "MAX", + totalAmount: 560000, + status: "ONGOING", + }, + { + commissionId: 7, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "중등 과학 탐구 물질과 에너지 표지디자인 외주", + createdAt: "2024-12-19", + plan: "BASIC", + totalAmount: 400000, + status: "COMPLETED", + }, + { + commissionId: 8, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "고등 수학 II 미적분 집중 완성 표지디자인 외주", + createdAt: "2024-11-30", + plan: "PLUS", + totalAmount: 480000, + status: "COMPLETED", + }, + { + commissionId: 9, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "초등 사회 한국사 인물편 표지디자인 외주", + createdAt: "2024-11-12", + plan: "BASIC", + totalAmount: 400000, + status: "ONGOING", + }, + { + commissionId: 10, + category: "FLYER_TEXTBOOK_COVER_INNER", + title: "고등 영어 듣기평가 모의고사 표지디자인 외주", + createdAt: "2024-10-27", + plan: "MAX", + totalAmount: 560000, + status: "COMPLETED", + }, +]; diff --git a/src/features/instructor/my/ui/CommissionsHeader.tsx b/src/features/instructor/my/ui/CommissionsHeader.tsx new file mode 100644 index 0000000..377eec2 --- /dev/null +++ b/src/features/instructor/my/ui/CommissionsHeader.tsx @@ -0,0 +1,14 @@ +const CommissionsHeader = () => { + return ( +
+

외주

+
+

외주 신청 일자

+

플랜

+

금액

+
+
+ ); +}; + +export default CommissionsHeader; diff --git a/src/features/instructor/my/ui/CommissionsHistoryRow.tsx b/src/features/instructor/my/ui/CommissionsHistoryRow.tsx new file mode 100644 index 0000000..038147c --- /dev/null +++ b/src/features/instructor/my/ui/CommissionsHistoryRow.tsx @@ -0,0 +1,30 @@ +import { + CATEGORY_BADGE_MAP, + CommissionHistoryItem, + PLAN_DISPLAY_MAP, +} from "@/features/instructor/my/model/my"; +import { ArrowRightIcon } from "@/shared/assets/icons"; +import Badge from "@/shared/ui/Badge"; + +const CommissionsHistoryRow = ({ item }: { item: CommissionHistoryItem }) => { + const { category, title, createdAt, plan, totalAmount } = item; + + return ( +
+
+ +
+

{title}

+ +
+
+
+

{createdAt.replaceAll("-", ".")}

+

{PLAN_DISPLAY_MAP[plan]}

+

{totalAmount.toLocaleString()}원

+
+
+ ); +}; + +export default CommissionsHistoryRow; diff --git a/src/widgets/instructor/home/lib/usePagination.ts b/src/shared/lib/hooks/usePagination.ts similarity index 100% rename from src/widgets/instructor/home/lib/usePagination.ts rename to src/shared/lib/hooks/usePagination.ts diff --git a/src/shared/ui/Badge.tsx b/src/shared/ui/Badge.tsx index d5bb49d..2ffe82b 100644 --- a/src/shared/ui/Badge.tsx +++ b/src/shared/ui/Badge.tsx @@ -1,4 +1,4 @@ -export type BadgeVariant = "3인" | "4인" | "5인" | "pass" | "fail" | "waiting"; +export type BadgeVariant = "3인" | "4인" | "5인" | "교재" | "pass" | "fail" | "waiting"; const badgeStyleMap: Record = { "3인": { @@ -16,6 +16,11 @@ const badgeStyleMap: Record { const { wrapper, text, label } = badgeStyleMap[variant]; return ( -
+

{label}

); diff --git a/src/shared/ui/PageIndicator.tsx b/src/shared/ui/PageIndicator.tsx index 8ced0ea..f2e4955 100644 --- a/src/shared/ui/PageIndicator.tsx +++ b/src/shared/ui/PageIndicator.tsx @@ -1,17 +1,28 @@ +import { cn } from "@/shared/lib/utils/cn"; + interface PageIndicatorProps { total: number; current: number; + variant?: "home" | "my"; } -const PageIndicator = ({ total, current }: PageIndicatorProps) => { +const PageIndicator = ({ total, current, variant = "home" }: PageIndicatorProps) => { return ( -
- {Array.from({ length: total }, (_, i) => ( -
- ))} +
+ {Array.from({ length: total }, (_, i) => { + const active = i === current; + + return ( +
+ ); + })}
); }; diff --git a/src/widgets/instructor/home/ui/DraftSubmissionStatusSection.tsx b/src/widgets/instructor/home/ui/DraftSubmissionStatusSection.tsx index b0beace..7417226 100644 --- a/src/widgets/instructor/home/ui/DraftSubmissionStatusSection.tsx +++ b/src/widgets/instructor/home/ui/DraftSubmissionStatusSection.tsx @@ -6,9 +6,9 @@ import { DraftSubmissionStatusRow, } from "@/features/instructor/home"; import { NextButton, PrevButton } from "@/shared/assets/icons"; +import usePagination from "@/shared/lib/hooks/usePagination"; import PageIndicator from "@/shared/ui/PageIndicator"; import { DRAFT_SUBMISSION_ITEMS_PER_PAGE } from "@/widgets/instructor/home/config/home"; -import usePagination from "@/widgets/instructor/home/lib/usePagination"; const DraftSubmissionStatusSection = () => { const { current, totalPages, pageItems, handlePrev, handleNext } = usePagination( diff --git a/src/widgets/instructor/home/ui/MatchingCommissionsSection.tsx b/src/widgets/instructor/home/ui/MatchingCommissionsSection.tsx index cb0778a..125a567 100644 --- a/src/widgets/instructor/home/ui/MatchingCommissionsSection.tsx +++ b/src/widgets/instructor/home/ui/MatchingCommissionsSection.tsx @@ -6,9 +6,9 @@ import { matchingStatusData, } from "@/features/instructor/home"; import { NextButton, PrevButton } from "@/shared/assets/icons"; +import usePagination from "@/shared/lib/hooks/usePagination"; import PageIndicator from "@/shared/ui/PageIndicator"; import { MATCHING_ITEMS_PER_PAGE } from "@/widgets/instructor/home/config/home"; -import usePagination from "@/widgets/instructor/home/lib/usePagination"; const MatchingCommissionsSection = () => { const { current, totalPages, pageItems, handlePrev, handleNext } = usePagination( diff --git a/src/widgets/instructor/home/ui/ModifyingCommissionsSection.tsx b/src/widgets/instructor/home/ui/ModifyingCommissionsSection.tsx index 2cf2c98..2399a76 100644 --- a/src/widgets/instructor/home/ui/ModifyingCommissionsSection.tsx +++ b/src/widgets/instructor/home/ui/ModifyingCommissionsSection.tsx @@ -6,9 +6,9 @@ import { modifyingStatusData, } from "@/features/instructor/home"; import { NextButton, PrevButton } from "@/shared/assets/icons"; +import usePagination from "@/shared/lib/hooks/usePagination"; import PageIndicator from "@/shared/ui/PageIndicator"; import { MODIFYING_ITEMS_PER_PAGE } from "@/widgets/instructor/home/config/home"; -import usePagination from "@/widgets/instructor/home/lib/usePagination"; const ModifyingCommissionsSection = () => { const { current, totalPages, pageItems, handlePrev, handleNext } = usePagination( diff --git a/src/widgets/instructor/my/config/my.ts b/src/widgets/instructor/my/config/my.ts new file mode 100644 index 0000000..91089ff --- /dev/null +++ b/src/widgets/instructor/my/config/my.ts @@ -0,0 +1 @@ +export const COMMISSION_HISTORY_ITEMS_PER_PAGE = 3; diff --git a/src/widgets/instructor/my/index.ts b/src/widgets/instructor/my/index.ts new file mode 100644 index 0000000..a67b28e --- /dev/null +++ b/src/widgets/instructor/my/index.ts @@ -0,0 +1,2 @@ +export { default as CommissionsHistorySection } from "@/widgets/instructor/my/ui/CommissionsHistorySection"; +export { default as MyInfoSection } from "@/widgets/instructor/my/ui/MyInfoSection"; diff --git a/src/widgets/instructor/my/model/my.ts b/src/widgets/instructor/my/model/my.ts new file mode 100644 index 0000000..f4c428a --- /dev/null +++ b/src/widgets/instructor/my/model/my.ts @@ -0,0 +1,18 @@ +// [강사] 마이페이지 본인 정보 + 통계 조회 +export type MyInfo = { + name: string; + profileImageUrl: string; + stats: { + totalCommissionCount: number; + ongoingCommissionCount: number; + }; +}; + +export const myInfoData: MyInfo = { + name: "고다현", + profileImageUrl: "", + stats: { + totalCommissionCount: 5, + ongoingCommissionCount: 5, + }, +}; diff --git a/src/widgets/instructor/my/ui/CommissionsHistorySection.tsx b/src/widgets/instructor/my/ui/CommissionsHistorySection.tsx new file mode 100644 index 0000000..3ff6100 --- /dev/null +++ b/src/widgets/instructor/my/ui/CommissionsHistorySection.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { + commissionHistoryData, + CommissionsHeader, + CommissionsHistoryRow, +} from "@/features/instructor/my"; +import { NextButton, PrevButton } from "@/shared/assets/icons"; +import usePagination from "@/shared/lib/hooks/usePagination"; +import PageIndicator from "@/shared/ui/PageIndicator"; +import { COMMISSION_HISTORY_ITEMS_PER_PAGE } from "@/widgets/instructor/my/config/my"; + +const CommissionsHistorySection = () => { + const { current, totalPages, pageItems, handlePrev, handleNext } = usePagination( + commissionHistoryData, + COMMISSION_HISTORY_ITEMS_PER_PAGE, + ); + + return ( +
+

외주 내역 확인

+
+ + {pageItems.map(item => ( + + ))} +
+
+ + + +
+
+ ); +}; + +export default CommissionsHistorySection; diff --git a/src/widgets/instructor/my/ui/MyInfoSection.tsx b/src/widgets/instructor/my/ui/MyInfoSection.tsx new file mode 100644 index 0000000..b80fbae --- /dev/null +++ b/src/widgets/instructor/my/ui/MyInfoSection.tsx @@ -0,0 +1,30 @@ +import { ProfileCircleIcon } from "@/shared/assets/icons"; +import { myInfoData } from "@/widgets/instructor/my/model/my"; + +const MyInfoSection = () => { + const { name, stats } = myInfoData; + + return ( +
+
+ +

{name}

+
+
+
+
+

외주 이용 횟수

+

{stats.totalCommissionCount}회

+
+
+
+

진행 중인 외주 건수

+

{stats.ongoingCommissionCount}건

+
+
+
+
+ ); +}; + +export default MyInfoSection;