Migrate redux reducer about planner

src/actions/planner/list.ts

@@ -4,7 +4,6 @@ export const RESET = `${BASE_STRING}RESET` as const;
 export const SET_SELECTED_LIST_CODE = `${BASE_STRING}SER_SELECTED_LIST_CODE` as const;
 export const SET_LIST_COURSES = `${BASE_STRING}SET_LIST_COURSES` as const;
 export const CLEAR_SEARCH_LIST_COURSES = `${BASE_STRING}CLEAR_SEARCH_LIST_COURSES` as const;
-export const ADD_COURSE_READ = `${BASE_STRING}ADD_COURSE_READ` as const;
 
 import { CourseListCode } from '@/shapes/enum';
 import Course from '@/shapes/model/subject/Course';
@@ -36,16 +35,8 @@ export function clearSearchListCourses() {
   };
 }
 
-export function addCourseRead(course: Course) {
-  return {
-    type: ADD_COURSE_READ,
-    course: course,
-  };
-}
-
 export type ListAction =
   | ReturnType<typeof reset>
   | ReturnType<typeof setSelectedListCode>
   | ReturnType<typeof setListCourses>
-  | ReturnType<typeof clearSearchListCourses>
-  | ReturnType<typeof addCourseRead>;
+  | ReturnType<typeof clearSearchListCourses>;

src/reducers/planner/index.js → src/reducers/planner/index.ts

@@ -11,4 +11,5 @@ const CombinedReducer = combineReducers({
   search: search,
 });
 
+export type PlannerState = ReturnType<typeof CombinedReducer>;
 export default CombinedReducer;

src/reducers/planner/itemFocus.ts

@@ -0,0 +1,112 @@
+import {
+  RESET,
+  SET_ITEM_FOCUS,
+  CLEAR_ITEM_FOCUS,
+  SET_CATEGORY_FOCUS,
+  CLEAR_CATEGORY_FOCUS,
+  SET_REVIEWS,
+  SET_LECTURES,
+  ItemFocusAction,
+} from '@/actions/planner/itemFocus';
+import { ItemFocusFrom } from '@/shapes/enum';
+import ItemFocus from '@/shapes/state/planner/ItemFocus';
+
+const initialState: ItemFocus = {
+  from: ItemFocusFrom.NONE,
+  clicked: false,
+  item: null,
+  course: null,
+  category: null,
+  reviews: null,
+  lectures: null,
+};
+
+/*
+  모든 ItemFocus 는 아래 5가지 중 하나의 타입을 가짐
+  type ItemFocus = NoneItem | ListItem | AddingItem | TableItem | CategoryItem;
+
+  CategoryItem 에 focusing 할 경우에는 SET_CATEGORY_FOCUS 액션을, 
+  ListItem | AddingItem | TableItem 에 focusing 할 경우에는 SET_ITEM_FOCUS 액션을 사용함.
+
+  (구체적인 사진은 notion과 PR 에 첨부된 사진을 참고.)
+  1. NoneItem
+      포커싱된 아이템이 없을 때.
+  2. ListItem
+      Planner 테이블 아래의 course list 중 하나의 항목을 클릭했을 때 포커싱되는 상태를 나타냄.
+  3. AddingItem 
+      Planner 테이블에 아이템을 추가할 때 
+  4. TableItem
+      Planner 테이블에서  각 항목을 클릭했을 때 포커싱되는 상태를 나타냄.
+      Future, Taken, Arbitrary 중하나임. 
+  5. CategoryItem
+      플래너 우측의 기초/전공/교양 과목의 이수 상황을 보여주는 바에서 특정 카테고리를 호버하면 Focus, 언호버하면 Focus 해제됨.
+      [CategoryIndex, N, M] 
+      CategoryIndex: 0, 1, 2, 3, 4 중 하나. 
+          순서대로 기초, 전공, 연구, 교양, 기타.
+      N: 
+          세부 전공을 의미.  전공/부전/복수/심화/자유 등을 가르킴. 
+      M: 
+        0, 1 중 하나. 0이면 필수 과목, 1이면 선택 과목. 
+      (ex. [0, 1, 0] => 기초 1번째 필수 과목)
+*/
+const itemFocus = (state: ItemFocus = initialState, action: ItemFocusAction) => {
+  switch (action.type) {
+    case RESET: {
+      return initialState;
+    }
+    case SET_ITEM_FOCUS: {
+      const courseChanged = !state.course || state.course.id !== action.course.id;
+      const changedItem = courseChanged ? { reviews: null, lectures: null } : {};
+      return {
+        ...state,
+        from: action.from,
+        clicked: action.clicked,
+        item: action.item,
+        course: action.course,
+        changedItem,
+      };
+    }
+    case CLEAR_ITEM_FOCUS: {
+      return {
+        ...state,
+        from: ItemFocusFrom.NONE,
+        clicked: false,
+        item: null,
+        course: null,
+        reviews: null,
+        lectures: null,
+      };
+    }
+    case SET_CATEGORY_FOCUS: {
+      return {
+        ...state,
+        from: ItemFocusFrom.CATEGORY,
+        category: action.category,
+      };
+    }
+    case CLEAR_CATEGORY_FOCUS: {
+      return {
+        ...state,
+        from: ItemFocusFrom.NONE,
+        category: null,
+      };
+    }
+    case SET_REVIEWS: {
+      return {
+        ...state,
+        reviews: action.reviews,
+      };
+    }
+    case SET_LECTURES: {
+      return {
+        ...state,
+        lectures: action.lectures,
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+export default itemFocus;

src/reducers/planner/list.ts

@@ -0,0 +1,82 @@
+import {
+  RESET,
+  SET_SELECTED_LIST_CODE,
+  SET_LIST_COURSES,
+  CLEAR_SEARCH_LIST_COURSES,
+  ListAction,
+} from '../../actions/planner/list';
+
+import { CourseListCode, DepartmentCode } from '@/shapes/enum';
+import Course from '@/shapes/model/subject/Course';
+
+type CourseDepartmentLists = {
+  [K in CourseListCode]: {
+    courses: Course[] | null;
+  };
+} & {
+  [K in DepartmentCode]?: {
+    courses: Course[] | null;
+  };
+};
+
+interface ListState {
+  selectedListCode: CourseListCode | DepartmentCode;
+  lists: CourseDepartmentLists;
+}
+
+const initialState: ListState = {
+  selectedListCode: CourseListCode.SEARCH,
+  lists: {
+    [CourseListCode.SEARCH]: {
+      courses: [],
+    },
+    [CourseListCode.BASIC]: {
+      courses: null,
+    },
+    [CourseListCode.HUMANITY]: {
+      courses: null,
+    },
+    [CourseListCode.TAKEN]: {
+      courses: null,
+    },
+  },
+};
+
+const list = (state = initialState, action: ListAction) => {
+  switch (action.type) {
+    case RESET: {
+      return initialState;
+    }
+    case SET_SELECTED_LIST_CODE: {
+      return { ...state, selectedListCode: action.listCode };
+    }
+    case SET_LIST_COURSES: {
+      return {
+        ...state,
+        lists: {
+          ...state.lists,
+          [action.code]: {
+            ...state.lists[action.code],
+            courses: action.courses,
+          },
+        },
+      };
+    }
+    case CLEAR_SEARCH_LIST_COURSES:
+      return {
+        ...state,
+        lists: {
+          ...state.lists,
+          [CourseListCode.SEARCH]: {
+            ...state.lists[CourseListCode.SEARCH],
+            courses: null,
+          },
+        },
+      };
+    default: {
+      return state;
+    }
+  }
+};
+
+export default list;