#44 feat: 단원 CRUD 핸들러 버튼 연동 및 적용

package.json

@@ -12,6 +12,10 @@
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.2.2",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.90.20",
     "axios": "^1.13.4",
@@ -22,6 +26,7 @@
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.1.11",
+    "zod": "^3.22.0",
     "zustand": "^5.0.10"
   },
   "devDependencies": {

src/App.tsx

@@ -12,6 +12,7 @@ import StudentProfilePage from '@/pages/admin/student/StudentProfilePage';
 import KakaoCallbackPage from '@/pages/common/KakaoCallbackPage';
 import PrivateRoute from '@/widgets/private-route/ui/PrivateRoute';
 import {useSyncUserRole} from '@/features/auth/sync-user-role/model/useSyncUserRole';
+import UnitEditorPage from '@/pages/unit-editor/UnitEditorPage';
 
 const AppRoutes = () => {
   useSyncUserRole();
@@ -41,14 +42,18 @@ const AppRoutes = () => {
               path='assignments/create'
               element={<AssignmentCreatePage />}
             />
-            <Route path='assignments/:id' element={<AssignmentSelectPage />} />
+            <Route
+              path='assignments/select'
+              element={<AssignmentSelectPage />}
+            />
             <Route path='courses/:id' element={<CourseOverviewPage />} />
             <Route path='courses/create' element={<CourseCreatePage />} />
             <Route path='student' element={<StudentManagementPage />} />
             <Route
               path='student/profile/:studentId'
               element={<StudentProfilePage />}
             />
+            <Route path='units/:id' element={<UnitEditorPage />} />
           </Route>
         </Route>
       </Route>

src/entities/assignment/model/types.ts

@@ -6,5 +6,5 @@ import type {SubmissionStatus} from '@/shared/model/common';
 export interface Assignment {
   id: number;
   title: string;
-  submittedStatus: SubmissionStatus;
+  submittedStatus?: SubmissionStatus;
 }

src/entities/course/model/types.ts

@@ -91,3 +91,12 @@ export type CourseOptionsResponse = ApiResponse<{
   count: number;
   courses: DashboardCourse[];
 }>;
+
+// 단원 조회-생성 페이지 응답 타입 정의 - 단일 단원
+export type SingleUnitResponse = ApiResponse<Unit>;
+
+// 단원 조회-생성 페이지 응답 타입 정의 - 전체 단원 목록
+export type AllUnitsResponse = ApiResponse<{
+  count: number;
+  units: Pick<Unit, 'id' | 'title' | 'assignmentCount'>[];
+}>;

src/entities/student/ui/StudentProfile.tsx

@@ -1,7 +1,7 @@
 import ProfileImage from '@/assets/svg/profileImage.svg?react';
 import ChatIcon from '@/assets/svg/chatIcon.svg?react';
 import MailIcon from '@/assets/svg/mailIcon.svg?react';
-import Button from '@/shared/ui/Button';
+import Button from '@/shared/ui/button/Button';
 
 interface StudentProfileProps {
   name: string;

src/entities/student/ui/StudentTable.tsx

@@ -1,4 +1,4 @@
-import {Checkbox} from '@/shared/ui/Checkbox';
+import {Checkbox} from '@/shared/ui/checkbox/Checkbox';
 import {ProgressIndicators} from '@/shared/ui/ProgressIndicators';
 import {useState, useEffect} from 'react';
 import {Link} from 'react-router-dom';

src/entities/unit/api/unitApi.ts

@@ -0,0 +1,46 @@
+import {privateAxios} from '@/shared/api/axiosInstance';
+import type {TUnitFormSchema} from '../model/types';
+import type {ApiResponse} from '@/shared/model';
+import type {AllUnitsResponse, Unit} from '@/entities/course/model/types';
+
+// 강의별 전체 단원 조회
+export const getAllUnitsByCourseId = async (
+  courseId: number
+): Promise<AllUnitsResponse> => {
+  const response = await privateAxios.get(`/courses/${courseId}/units`);
+  return response.data;
+};
+
+// 단일 단원 조회
+export const getUnitById = async (
+  unitId: number | null
+): Promise<ApiResponse<Unit>> => {
+  const response = await privateAxios.get(`/units/${unitId}`);
+  return response.data;
+};
+
+// 단원 삭제
+export const deleteUnit = async (
+  unitId: number
+): Promise<ApiResponse<string>> => {
+  const response = await privateAxios.delete(`/units/${unitId}`);
+  return response.data;
+};
+
+// 단원 생성
+export const createUnit = async (
+  courseId: number,
+  unit: TUnitFormSchema
+): Promise<ApiResponse<Unit>> => {
+  const response = await privateAxios.post(`/units/${courseId}`, unit);
+  return response.data;
+};
+
+// 단원 수정
+export const updateUnit = async (
+  unitId: number,
+  unit: TUnitFormSchema
+): Promise<ApiResponse<Unit>> => {
+  const response = await privateAxios.put(`/units/${unitId}`, unit);
+  return response.data;
+};

src/entities/unit/api/unitMutations.ts

@@ -0,0 +1,24 @@
+import type {TUnitFormSchema} from '../model/types';
+import {createUnit, deleteUnit, updateUnit} from './unitApi';
+
+export const unitMutations = {
+  // 단원 추가 뮤테이션 옵션
+  createUnit: {
+    mutationKey: ['createUnit'],
+    mutationFn: ({courseId, unit}: {courseId: number; unit: TUnitFormSchema}) =>
+      createUnit(courseId, unit),
+  },
+
+  // 단원 수정 뮤테이션 옵션
+  updateUnit: {
+    mutationKey: ['updateUnit'],
+    mutationFn: ({unitId, unit}: {unitId: number; unit: TUnitFormSchema}) =>
+      updateUnit(unitId, unit),
+  },
+
+  // 단원 삭제 뮤테이션 옵션
+  deleteUnit: {
+    mutationKey: ['deleteUnit'],
+    mutationFn: (unitId: number) => deleteUnit(unitId),
+  },
+};

src/entities/unit/api/unitQueries.ts

@@ -0,0 +1,19 @@
+import {queryOptions} from '@tanstack/react-query';
+import {getAllUnitsByCourseId, getUnitById} from './unitApi';
+
+export const unitQueries = {
+  // 강의별 전체 단원 조회 쿼리 옵션
+  getUnitList: (courseId: number) =>
+    queryOptions({
+      queryKey: ['units', courseId],
+      queryFn: () => getAllUnitsByCourseId(courseId),
+    }),
+
+  // 단일 단원 조회 쿼리 옵션
+  getUnitDetails: (unitId: number | null) =>
+    queryOptions({
+      queryKey: ['units', 'detail', unitId],
+      queryFn: () => getUnitById(unitId),
+      enabled: !!unitId,
+    }),
+};

src/entities/unit/model/types.ts

@@ -0,0 +1,17 @@
+import {z} from 'zod';
+
+// 단원 생성/수정 폼 스키마
+export const unitFormSchema = z
+  .object({
+    title: z.string().min(1, '단원 제목을 입력해주세요.'),
+    releaseDate: z.string().min(1, '공개일을 입력해주세요.'),
+    dueDate: z.string().min(1, '마감일을 입력해주세요.'),
+    assignmentIds: z.array(z.number()).optional(),
+  })
+  .refine((data) => data.releaseDate <= data.dueDate, {
+    message: '날짜 범위가 올바르지 않습니다.',
+    path: ['dueDate'],
+  });
+
+// 단원 생성/수정 폼 타입
+export type TUnitFormSchema = z.infer<typeof unitFormSchema>;

src/index.css

@@ -28,6 +28,7 @@
 :root {
   font-family: Pretendard;
   background-color: #f6f5f8;
+  box-sizing: border-box;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -54,6 +55,7 @@
   --color-badge-red: #ff6f6f;
 
   --font-coolvetica: 'Coolvetica', sans-serif;
+  --shadow-box: 2px 4px 10px 0 rgba(0, 0, 0, 0.05);
   --shadow-card: 0px 0px 14px 0px rgba(223, 219, 240, 0.4);
   --shadow-modal: 4px 4px 7px 0px rgba(0, 0, 0, 0.1);
   --shadow-dropdown: 2px 4px 7px 0px rgba(0, 0, 0, 0.1);
@@ -90,3 +92,13 @@
 input::placeholder {
   color: var(--color-light-black);
 }
+
+.input-field {
+  @apply bg-white w-[295px] px-[14.6px] py-[10.5px] rounded-[9px] border-[0.9px] border-purple-stroke focus:outline-1 focus:outline-primary;
+}
+
+@layer base {
+  label {
+    @apply flex flex-col gap-[12.5px];
+  }
+}

src/pages/admin/assignments/AssignmentCreatePage.tsx

@@ -3,7 +3,7 @@ import LabeledInput from '@/shared/ui/LabeledInput';
 import FileUpload from '@/shared/ui/FileUpload';
 import {useState} from 'react';
 import LabeledDropdown from '@/shared/ui/LabeledDropdown';
-import Button from '@/shared/ui/Button';
+import Button from '@/shared/ui/button/Button';
 import AddIcon from '@/assets/svg/addIcon.svg?react';
 
 const PUBLIC_OPTIONS = ['공개', '비공개'];

src/pages/common/LandingPage.tsx

@@ -5,7 +5,7 @@ import snowCodeEntry from '@/assets/images/snowCode_entry.svg';
 import snowCodeStudent from '@/assets/images/snowCode_student.svg';
 import snowCodeAdmin from '@/assets/images/snowCode_admin.svg';
 import ArrowrightIcon from '@/assets/svg/arrowrightIcon.svg?react';
-import Button from '@/shared/ui/Button';
+import Button from '@/shared/ui/button/Button';
 
 type HoverState = 'none' | 'student' | 'admin';
 

src/pages/common/UserIdInputPage.tsx

@@ -3,7 +3,7 @@ import {useNavigate, useLocation} from 'react-router-dom';
 import SnowCodeEntryMini from '@/assets/images/snowCode_entry_mini.svg';
 import kakaoLogo from '@/assets/images/kakao_logo.svg';
 import ArrowleftIcon from '@/assets/svg/arrowleftIcon.svg?react';
-import Button from '@/shared/ui/Button';
+import Button from '@/shared/ui/button/Button';
 import {kakaoService} from '@/features/auth/kakao/lib/kakaoService';
 
 export default function UserIdInputPage() {

src/pages/course-overview/ui/AssignmentList.tsx

@@ -1,4 +1,4 @@
-import Badge from '@/shared/ui/Badge';
+import Badge from '@/shared/ui/badge/Badge';
 import {Link} from 'react-router-dom';
 import type {Assignment} from '@/entities/assignment/model/types';
 

src/pages/course-overview/ui/CourseActionsBar.tsx

@@ -1,4 +1,4 @@
-import Button from '@/shared/ui/Button';
+import Button from '@/shared/ui/button/Button';
 import {Link} from 'react-router-dom';
 
 // 강의 관리 버튼 바 (관리자 전용)
@@ -10,7 +10,7 @@ const CourseActionsBar = ({isActiveCourse}: {isActiveCourse: boolean}) => {
           학생 목록
         </Button>
       </Link>
-      <Link to=''>
+      <Link to={`/admin/units/3`}>
         <Button color={isActiveCourse ? 'outlinePurple' : 'primary'}>
           단원 추가
         </Button>

src/pages/course-overview/ui/UnitItem.tsx

@@ -1,6 +1,6 @@
 import AssignmentList from './AssignmentList';
 import Lock from '@/assets/svg/lock.svg?react';
-import Badge from '@/shared/ui/Badge';
+import Badge from '@/shared/ui/badge/Badge';
 import {formatPeriod} from '@/shared/lib/course';
 import type {Unit} from '@/entities/course/model/types';
 

src/pages/dashboard/Dashboard.tsx

@@ -1,6 +1,6 @@
 import LogoIcon from '@/assets/images/snowCode_logo.svg?react';
 import CourseList from './ui/CourseList';
-import Button from '@/shared/ui/Button';
+import Button from '@/shared/ui/button/Button';
 import AddIcon from '@/assets/svg/addIcon.svg?react';
 import ScheduleList from './ui/ScheduleList';
 import {Link} from 'react-router-dom';

src/pages/dashboard/ui/ScheduleCard.tsx

@@ -1,4 +1,4 @@
-import Badge from '@/shared/ui/Badge';
+import Badge from '@/shared/ui/badge/Badge';
 import type {Schedule} from '@/entities/course/model/types';
 
 type AssignmentType = Schedule['assignments'][number];

src/pages/select-assignment/AssignmentSelectPage.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/shared/mocks/assignmentSelectResponse';
 import {useCourseFilter} from '@/features/course/filter-course/lib/useCourseFilter';
 import {AssignmentPageLayout} from '@/widgets/assignment-page-layout';
-import SelectableItem from '@/shared/ui/SelectableItem';
+import ListRow from '@/shared/ui/list-row/ListRow';
 
 const AssignmentSelectPage = () => {
   const {courses} = courseOptionsResponse.response; // /courses/my API 응답 모킹
@@ -41,7 +41,7 @@ const AssignmentSelectPage = () => {
           title={`${assignmentList.length}문제`}
           onSelect={handleAssignmentSelect}
           renderItem={(assignment) => (
-            <SelectableItem
+            <ListRow
               title={assignment.title}
               selected={selectedAssignments.includes(assignment.id)}
             />