[FEAT] 강사 마이페이지 퍼블리싱

src/app/instructor/my/page.tsx

@@ -1,5 +1,15 @@
+import { CommissionsHistorySection, MyInfoSection } from "@/widgets/instructor/my";
+
 const page = () => {
-  return <div>강사 마이페이지</div>;
+  return (
+    <div className="mx-auto flex w-212.75 flex-col items-center pt-15">
+      <h1 className="text-title2-sb w-full pb-10 text-left text-black">마이페이지</h1>
+      <div className="flex flex-col gap-8">
+        <MyInfoSection />
+        <CommissionsHistorySection />
+      </div>
+    </div>
+  );
 };
 
 export default page;

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";

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<CommissionHistoryItem["plan"], string> = {
+  BASIC: "기본",
+  PLUS: "플러스",
+  MAX: "맥스",
+};
+
+export const CATEGORY_BADGE_MAP: Record<string, BadgeVariant> = {
+  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",
+  },
+];

src/features/instructor/my/ui/CommissionsHeader.tsx

@@ -0,0 +1,14 @@
+const CommissionsHeader = () => {
+  return (
+    <div className="text-gray-70 text-caption1-r border-b-gray-20 flex w-full shrink-0 flex-row justify-between border-b px-3 py-2">
+      <p>외주</p>
+      <div className="flex gap-16">
+        <p className="w-25">외주 신청 일자</p>
+        <p className="w-14">플랜</p>
+        <p className="w-25">금액</p>
+      </div>
+    </div>
+  );
+};
+
+export default CommissionsHeader;

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 (
+    <div className="hover:bg-gray-5 border-b-gray-20 flex h-19.25 w-full shrink-0 cursor-pointer items-center justify-between border-b bg-white px-3 py-5 transition-colors duration-150">
+      <div className="flex flex-row gap-6">
+        <Badge variant={CATEGORY_BADGE_MAP[category] ?? "교재"} />
+        <div className="text-gray-90 flex flex-row items-center gap-1">
+          <p className="text-heading3-m max-w-70 truncate">{title}</p>
+          <ArrowRightIcon className="size-6" />
+        </div>
+      </div>
+      <div className="flex flex-row items-center gap-16">
+        <p className="text-gray-70 text-heading2-m w-25">{createdAt.replaceAll("-", ".")}</p>
+        <p className="text-gray-70 text-heading2-m w-14">{PLAN_DISPLAY_MAP[plan]}</p>
+        <p className="text-gray-90 text-heading3-m w-25">{totalAmount.toLocaleString()}원</p>
+      </div>
+    </div>
+  );
+};
+
+export default CommissionsHistoryRow;

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<BadgeVariant, { wrapper: string; text: string; label: string }> = {
   "3인": {
@@ -16,6 +16,11 @@ const badgeStyleMap: Record<BadgeVariant, { wrapper: string; text: string; label
     text: "text-body2-sb text-red-main",
     label: "5인",
   },
+  교재: {
+    wrapper: "rounded-4 w-fit px-2 bg-purple-20",
+    text: "text-body2-sb text-purple-60",
+    label: "교재",
+  },
   pass: {
     wrapper: "flex items-center justify-center rounded-32 w-14.5 px-3 py-1 bg-blue-bright",
     text: "text-caption1-m text-blue-main",
@@ -40,7 +45,7 @@ interface BadgeProps {
 const Badge = ({ variant }: BadgeProps) => {
   const { wrapper, text, label } = badgeStyleMap[variant];
   return (
-    <div className={wrapper}>
+    <div className={`shrink-0 whitespace-nowrap ${wrapper}`}>
       <p className={text}>{label}</p>
     </div>
   );

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 (
-    <div className="flex items-center gap-2">
-      {Array.from({ length: total }, (_, i) => (
-        <div
-          key={i}
-          className={`size-2 rounded-full transition-colors duration-300 ${i === current ? "bg-gray-700" : "bg-gray-300"}`}
-        />
-      ))}
+    <div className={cn("flex items-center", variant === "my" ? "gap-3" : "gap-2")}>
+      {Array.from({ length: total }, (_, i) => {
+        const active = i === current;
+
+        return (
+          <div
+            key={i}
+            className={cn(
+              "transition-colors duration-300",
+              variant === "my" ? "rounded-12 size-3" : "size-2 rounded-full",
+              active ? (variant === "my" ? "bg-gray-90" : "bg-gray-70") : "bg-gray-30",
+            )}
+          />
+        );
+      })}
     </div>
   );
 };

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(

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(

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(

src/widgets/instructor/my/config/my.ts

@@ -0,0 +1 @@
+export const COMMISSION_HISTORY_ITEMS_PER_PAGE = 3;

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";

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,
+  },
+};

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 (
+    <div className="rounded-12 flex h-auto w-212.75 flex-col gap-6 bg-white p-6">
+      <h1 className="text-heading1-sb text-black">외주 내역 확인</h1>
+      <div className="flex h-66.25 flex-col">
+        <CommissionsHeader />
+        {pageItems.map(item => (
+          <CommissionsHistoryRow key={item.commissionId} item={item} />
+        ))}
+      </div>
+      <div className="flex flex-row items-center justify-center gap-8">
+        <PrevButton className="size-12 cursor-pointer" onClick={handlePrev} />
+        <PageIndicator total={totalPages} current={current} variant="my" />
+        <NextButton className="size-12 cursor-pointer" onClick={handleNext} />
+      </div>
+    </div>
+  );
+};
+
+export default CommissionsHistorySection;

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 (
+    <div className="w-212.75">
+      <div className="flex flex-row items-center gap-4 rounded-t-xl bg-purple-50 px-6 py-5">
+        <ProfileCircleIcon className="size-8 text-white" />
+        <p className="text-heading2-sb text-white">{name}</p>
+      </div>
+      <div className="rounded-b-xl bg-white px-30 py-6">
+        <div className="flex justify-between">
+          <div className="flex w-fit flex-row gap-14 px-20 whitespace-nowrap">
+            <p className="text-gray-70 text-body2-m">외주 이용 횟수</p>
+            <p className="text-gray-80 text-heading3-sb">{stats.totalCommissionCount}회</p>
+          </div>
+          <div className="border-gray-30 w-1 border-l" />
+          <div className="flex w-fit flex-row gap-14 px-20 whitespace-nowrap">
+            <p className="text-gray-70 text-body2-m">진행 중인 외주 건수</p>
+            <p className="text-gray-80 text-heading3-sb">{stats.ongoingCommissionCount}건</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyInfoSection;