[FEAT] 강사 수정사항 요청 페이지 퍼블리싱

src/app/globals.css

@@ -57,6 +57,9 @@
   --color-blue-bright: #e0eeff;
   --color-blue-main: #0248c2;
 
+  /* Overlay */
+  --color-overlay-hover: rgba(86, 75, 96, 0.58);
+
   /* =========================
     Typography
     ========================= */
@@ -175,6 +178,12 @@
     ========================= */
   --shadow-dropdown: 0 0 20px 4px rgba(0, 0, 0, 0.05);
 
+  /* =========================
+    Blur Tokens
+    ========================= */
+  --blur-hover: 1.7px;
+  --blur-button: 2px;
+
   /* =========================
     Radius Tokens
     ========================= */
@@ -185,6 +194,7 @@
   --radius-12: 12px;
   --radius-14: 14px;
   --radius-20: 20px;
+  --radius-24: 24px;
   --radius-32: 32px;
   --radius-48: 48px;
   --radius-100: 100px;

src/app/instructor/layout.tsx

@@ -11,7 +11,7 @@ const InstructorLayout = ({ children }: { children: ReactNode }) => {
       <div className="bg-gray-10 flex flex-1 overflow-hidden">
         <Sidebar bottom={<SidebarMenu label="로그아웃" />}>
           <SidebarMenu label="새 외주 작성" href="/instructor/write" />
-          <SidebarMenu label="진행 중 외주" href="/instructor" />
+          <SidebarMenu label="진행 중 외주" href="/instructor" matchPrefix="/instructor/revision" />
           <SidebarMenu label="마이페이지" href="/instructor/my" />
         </Sidebar>
         <main className="scrollbar-hide flex flex-1 flex-col overflow-y-auto">{children}</main>

src/app/instructor/revision/[commissionId]/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+
+import Button from "@/shared/ui/Button";
+import Modal from "@/shared/ui/modal/Modal";
+import { RevisionCategorySection, RevisionCommentSection } from "@/widgets/instructor/revision";
+import { MAX_SELECTABLE_COUNT } from "@/widgets/instructor/revision/config/revision";
+import {
+  draftFilesData,
+  draftRevisionDetailData,
+} from "@/widgets/instructor/revision/model/revision";
+
+const Page = () => {
+  const router = useRouter();
+  const { commissionId } = useParams<{ commissionId: string }>();
+  const draftRevisionDetail = draftRevisionDetailData.find(
+    detail => detail.commissionId === Number(commissionId),
+  );
+  const draftFiles = draftFilesData.find(files => files.commissionId === Number(commissionId));
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [comments, setComments] = useState<Record<string, string>>({});
+  const [isFinalizeModalOpen, setIsFinalizeModalOpen] = useState(false);
+
+  const isFinalizeActive = selectedCategories.length === 0;
+  const isSubmitActive =
+    selectedCategories.length > 0 &&
+    selectedCategories.every(category => (comments[category] ?? "").trim().length > 0);
+
+  const handleToggleCategory = (category: string) => {
+    setSelectedCategories(prev => {
+      if (prev.includes(category)) {
+        return prev.filter(selected => selected !== category);
+      }
+      if (prev.length >= MAX_SELECTABLE_COUNT) {
+        return prev;
+      }
+      return [...prev, category];
+    });
+  };
+
+  const handleChangeComment = (category: string, value: string) => {
+    setComments(prev => ({ ...prev, [category]: value }));
+  };
+
+  const handleCloseFinalizeModal = () => {
+    setIsFinalizeModalOpen(false);
+  };
+
+  const handleConfirmFinalize = () => {
+    setIsFinalizeModalOpen(false);
+    router.push("/instructor");
+  };
+
+  if (draftRevisionDetail == null) {
+    return null;
+  }
+
+  return (
+    <div className="mx-auto flex w-235 flex-col items-center pt-16 pb-19.5">
+      <h1 className="text-title2-sb w-full py-4 pb-8 text-left text-black">
+        {draftRevisionDetail.title}
+      </h1>
+      <div className="flex flex-col gap-10">
+        <RevisionCategorySection
+          draftTitle={draftRevisionDetail.title}
+          designerComment={draftRevisionDetail.currentDraft.designerComment}
+          remainingRevisionCount={draftRevisionDetail.remainingRevisionCount}
+          maxRevisionCount={draftRevisionDetail.maxRevisionCount}
+          selectedCategories={selectedCategories}
+          onToggleCategory={handleToggleCategory}
+          fileUrls={draftFiles?.fileUrls ?? []}
+        />
+        <RevisionCommentSection
+          comments={comments}
+          selectedCategories={selectedCategories}
+          onChangeComment={handleChangeComment}
+        />
+        <div className="flex w-full flex-row justify-end gap-4">
+          <Button
+            className="w-fit"
+            variant={isFinalizeActive ? "medium_primary" : "medium_disabled"}
+            onClick={isFinalizeActive ? () => setIsFinalizeModalOpen(true) : undefined}
+          >
+            최종 시안으로 선택하기
+          </Button>
+          <Button className="w-fit" variant={isSubmitActive ? "medium_primary" : "medium_disabled"}>
+            수정사항 전달하기
+          </Button>
+        </div>
+      </div>
+      <Modal
+        isOpen={isFinalizeModalOpen}
+        type="double"
+        title={"최종 시안으로 선택하시겠습니까?"}
+        description={"현재 디자인을 최종시안으로 선택하시면 \n더 이상 수정을 요청할 수 없습니다."}
+        confirmLabel="확인"
+        cancelLabel="취소"
+        onConfirm={handleConfirmFinalize}
+        onCancel={handleCloseFinalizeModal}
+        onClose={handleCloseFinalizeModal}
+      />
+    </div>
+  );
+};
+
+export default Page;

src/app/instructor/write/page.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 import { useWriteFormStore } from "@/features/instructor/write";
-import Modal from "@/shared/ui/Modal";
+import Modal from "@/shared/ui/modal/Modal";
 import { Step1Content, Step2Content, Step3Content } from "@/widgets/instructor/write";
 
 const WritePageContent = () => {

src/features/instructor/home/model/home.ts

@@ -130,7 +130,7 @@ export const modifyingStatusData: ModifyingItem[] = [
   {
     commissionId: 45,
     title: "한국사 능력검정 — 중급 핵심 요약",
-    isSubmitted: true,
+    isSubmitted: false,
     hasUpdate: true,
     finalDeadline: "2026-07-10",
   },

src/features/instructor/home/ui/ModifyingCommissionsRow.tsx

@@ -1,11 +1,14 @@
+import { useRouter } from "next/navigation";
+
 import { getDDay } from "@/features/instructor/home/lib/getDDay";
 import { ModifyingItem } from "@/features/instructor/home/model/home";
 import { cn } from "@/shared/lib/utils/cn";
 import Button from "@/shared/ui/Button";
 import Tag from "@/shared/ui/Tag";
 
 const ModifyingCommissionsRow = ({ item }: { item: ModifyingItem }) => {
-  const { title, finalDeadline, isSubmitted, hasUpdate } = item;
+  const router = useRouter();
+  const { commissionId, title, finalDeadline, isSubmitted, hasUpdate } = item;
 
   return (
     <div className="border-b-gray-10 hover:bg-gray-5 flex h-15 cursor-pointer items-center border-b py-3 transition-colors duration-150">
@@ -20,7 +23,11 @@ const ModifyingCommissionsRow = ({ item }: { item: ModifyingItem }) => {
         {isSubmitted ? (
           <button className="text-body1-m text-purple-70 w-20">전송완료</button>
         ) : (
-          <Button variant="small_secondary" className="w-fit">
+          <Button
+            variant="small_secondary"
+            className="w-fit"
+            onClick={() => router.push(`/instructor/revision/${commissionId}`)}
+          >
             확인하기
           </Button>
         )}

src/shared/lib/hooks/useDragScrollbar.ts

@@ -0,0 +1,75 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
+
+interface UseDragScrollbarProps {
+  scrollRef: RefObject<HTMLElement | null>;
+}
+
+export const useDragScrollbar = ({ scrollRef }: UseDragScrollbarProps) => {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [progress, setProgress] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    const scrollEl = scrollRef.current;
+    if (!scrollEl || isDragging) return;
+
+    const syncProgress = () => {
+      const max = scrollEl.scrollWidth - scrollEl.clientWidth;
+      setProgress(max > 0 ? scrollEl.scrollLeft / max : 0);
+    };
+
+    syncProgress();
+    scrollEl.addEventListener("scroll", syncProgress);
+    return () => scrollEl.removeEventListener("scroll", syncProgress);
+  }, [scrollRef, isDragging]);
+
+  useEffect(() => {
+    const scrollEl = scrollRef.current;
+    if (!scrollEl) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      scrollEl.scrollLeft += e.deltaY;
+    };
+
+    scrollEl.addEventListener("wheel", handleWheel, { passive: false });
+    return () => scrollEl.removeEventListener("wheel", handleWheel);
+  }, [scrollRef]);
+
+  const moveToClientX = useCallback(
+    (clientX: number) => {
+      const track = trackRef.current;
+      const scrollEl = scrollRef.current;
+      if (!track || !scrollEl) return;
+
+      const { left, width } = track.getBoundingClientRect();
+      const ratio = Math.min(Math.max((clientX - left) / width, 0), 1);
+      const max = scrollEl.scrollWidth - scrollEl.clientWidth;
+
+      setProgress(ratio);
+      scrollEl.scrollLeft = ratio * max;
+    },
+    [scrollRef],
+  );
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => moveToClientX(e.clientX);
+    const handleMouseUp = () => setIsDragging(false);
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, moveToClientX]);
+
+  const handleTrackMouseDown = (clientX: number) => {
+    setIsDragging(true);
+    moveToClientX(clientX);
+  };
+
+  return { trackRef, progress, handleTrackMouseDown };
+};

src/shared/ui/CommentCard.tsx

@@ -0,0 +1,15 @@
+interface CommentCardProps {
+  title: string;
+  comment: string;
+}
+
+const CommentCard = ({ title, comment }: CommentCardProps) => {
+  return (
+    <div className="bg-purple-5 border-purple-10 rounded-12 flex w-full flex-col gap-2.5 border px-6 py-4">
+      <h1 className="text-main-main text-body1-sb">{title}</h1>
+      <h2 className="text-gray-80 text-body2-r scrollbar-hide h-16.5 overflow-y-auto">{comment}</h2>
+    </div>
+  );
+};
+
+export default CommentCard;

src/shared/ui/DragScrollbar.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import type { RefObject } from "react";
+
+import { useDragScrollbar } from "@/shared/lib/hooks/useDragScrollbar";
+import { cn } from "@/shared/lib/utils/cn";
+
+interface DragScrollbarProps {
+  scrollRef: RefObject<HTMLElement | null>;
+  className?: string;
+}
+
+const DragScrollbar = ({ scrollRef, className }: DragScrollbarProps) => {
+  const { trackRef, progress, handleTrackMouseDown } = useDragScrollbar({ scrollRef });
+  const percent = `${progress * 100}%`;
+
+  return (
+    <div className={cn("flex h-12 items-center", className)}>
+      <div
+        ref={trackRef}
+        className="bg-purple-10 relative h-2 w-full cursor-pointer"
+        onMouseDown={e => handleTrackMouseDown(e.clientX)}
+      >
+        <div className="bg-purple-30 absolute inset-y-0 left-0" style={{ width: percent }} />
+        <div
+          className="rounded-48 border-main-main absolute top-1/2 size-12 -translate-x-1/2 -translate-y-1/2 cursor-grab border-4 bg-white active:cursor-grabbing"
+          style={{ left: percent }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DragScrollbar;

src/shared/ui/SidebarMenu.tsx

@@ -9,13 +9,16 @@ import { SIDEBAR_ICON_MAP } from "@/shared/config/sidebarMenu";
 interface SidebarMenuProps {
   label: string;
   href?: string;
+  matchPrefix?: string;
 }
 
-const SidebarMenu = ({ label, href }: SidebarMenuProps) => {
+const SidebarMenu = ({ label, href, matchPrefix }: SidebarMenuProps) => {
   const pathname = usePathname();
   const [isHovered, setIsHovered] = useState(false);
 
-  const isSelected = href ? pathname === href : false;
+  const isSelected = href
+    ? pathname === href || (!!matchPrefix && pathname.startsWith(matchPrefix))
+    : false;
   const isActive = isSelected || isHovered;
   const icons = SIDEBAR_ICON_MAP[label];
 

src/shared/ui/Thumbnail.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image";
+
+import { SearchIcon } from "@/shared/assets/icons";
+import { cn } from "@/shared/lib/utils/cn";
+
+interface ThumbnailProps {
+  src?: string;
+  alt?: string;
+  className?: string;
+  onDetailClick?: () => void;
+}
+
+const Thumbnail = ({
+  src = "/images/thumbnail_mock.jpg",
+  alt = "썸네일",
+  className,
+  onDetailClick,
+}: ThumbnailProps) => {
+  return (
+    <div
+      className={cn(
+        "rounded-12 bg-gray-20 group relative h-full w-full overflow-hidden",
+        className,
+      )}
+    >
+      <Image src={src} alt={alt} fill sizes="250px" loading="eager" className="object-cover" />
+      <div className="bg-overlay-hover backdrop-blur-hover absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100" />
+      <button
+        type="button"
+        onClick={onDetailClick}
+        className="backdrop-blur-button text-body2-m rounded-12 absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 cursor-pointer flex-row items-center gap-2.5 bg-white/18 px-4 py-2 text-white opacity-0 transition-opacity group-hover:opacity-100"
+      >
+        자세히 보기
+        <SearchIcon className="size-5" />
+      </button>
+    </div>
+  );
+};
+
+export default Thumbnail;