Migrate tile components

src/components/sections/main/TodaysTimetableSection.jsx

@@ -10,13 +10,13 @@ import { appBoundClassNames as classNames } from '../../../common/boundClassName
 import { TIMETABLE_START_HOUR, TIMETABLE_END_HOUR } from '../../../common/constants';
 
 import Scroller from '../../Scroller';
-import HorizontalTimetableTile from '../../tiles/HorizontalTimetableTile';
 
 import userShape from '../../../shapes/model/session/UserShape';
 import semesterShape from '../../../shapes/model/subject/SemesterShape';
 
 import { getOngoingSemester } from '../../../utils/semesterUtils';
 import { getColorNumber } from '../../../utils/lectureUtils';
+import HorizontalTimetableTile from '@/components/tiles/HorizontalTimetableTile';
 
 class TodaysTimetableSection extends Component {
   constructor(props) {

src/components/sections/planner/courselist/CourseListSection.jsx

@@ -120,9 +120,9 @@ class CourseListSection extends Component {
           type_en: 'Humanities & Social Elective',
           credit: 3,
           credit_au: 0,
-          title: getTitleOfArbitrary('인문사회선택', 'Humanities & Social Elective', null),
-          title_en: getTitleEnOfArbitrary('인문사회선택', 'Humanities & Social Elective', null),
-          old_code: getOldCodeOfArbitrary('인문사회선택', 'Humanities & Social Elective', null),
+          title: getTitleOfArbitrary('인문사회선택'),
+          title_en: getTitleEnOfArbitrary('Humanities & Social Elective'),
+          old_code: getOldCodeOfArbitrary('Humanities & Social Elective', null),
         },
       ];
     }
@@ -138,9 +138,9 @@ class CourseListSection extends Component {
           type_en: 'Major Required',
           credit: 3,
           credit_au: 0,
-          title: getTitleOfArbitrary('전공필수', 'Major Required', matchingDepartment),
-          title_en: getTitleEnOfArbitrary('전공필수', 'Major Required', matchingDepartment),
-          old_code: getOldCodeOfArbitrary('전공필수', 'Major Required', matchingDepartment),
+          title: getTitleOfArbitrary('전공필수'),
+          title_en: getTitleEnOfArbitrary('Major Required'),
+          old_code: getOldCodeOfArbitrary('Major Required', matchingDepartment),
         },
         {
           id: getIdOfArbitrary('전공선택', 'Major Elective', matchingDepartment),
@@ -150,9 +150,9 @@ class CourseListSection extends Component {
           type_en: 'Major Elective',
           credit: 3,
           credit_au: 0,
-          title: getTitleOfArbitrary('전공선택', 'Major Elective', matchingDepartment),
-          title_en: getTitleEnOfArbitrary('전공선택', 'Major Elective', matchingDepartment),
-          old_code: getOldCodeOfArbitrary('전공선택', 'Major Elective', matchingDepartment),
+          title: getTitleOfArbitrary('전공선택'),
+          title_en: getTitleEnOfArbitrary('Major Elective'),
+          old_code: getOldCodeOfArbitrary('Major Elective', matchingDepartment),
         },
       ];
     }

src/components/sections/planner/plannerandinfos/PlannerSubSection.jsx

@@ -29,7 +29,7 @@ import {
 } from '../../../../utils/itemUtils';
 import { getCategoryOfItem, getColorOfItem } from '../../../../utils/itemCategoryUtils';
 import { isDimmedItem, isFocusedItem, isTableClickedItem } from '../../../../utils/itemFocusUtils';
-import PlannerTile from '../../../tiles/PlannerTile';
+import PlannerTile from '@/components/tiles/PlannerTile';
 import { getSemesterName } from '../../../../utils/semesterUtils';
 import PlannerOverlay from '../../../PlannerOverlay';
 

src/components/sections/timetable/timetableandinfos/TimetableSubSection.jsx

@@ -7,7 +7,7 @@ import { range } from 'lodash';
 import { appBoundClassNames as classNames } from '../../../../common/boundClassNames';
 import { TIMETABLE_START_HOUR, TIMETABLE_END_HOUR } from '../../../../common/constants';
 
-import TimetableTile from '../../../tiles/TimetableTile';
+import TimetableTile from '@/components/tiles/TimetableTile';
 
 import { setLectureFocus, clearLectureFocus } from '../../../../actions/timetable/lectureFocus';
 import {
@@ -44,7 +44,7 @@ import {
   getColorNumber,
 } from '../../../../utils/lectureUtils';
 import { performDeleteFromTable } from '../../../../common/commonOperations';
-import TimetableDragTile from '../../../tiles/TimetableDragTile';
+import TimetableDragTile from '@/components/tiles/TimetableDragTile';
 
 class TimetableSubSection extends Component {
   constructor(props) {

src/components/tiles/HorizontalTimetableTile.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+
+import { appBoundClassNames as classNames } from '@/common/boundClassNames';
+import { useTranslatedString } from '@/hooks/useTranslatedString';
+import Classtime from '@/shapes/model/subject/Classtime';
+import Lecture from '@/shapes/model/subject/Lecture';
+import { getProfessorsShortStr } from '@/utils/lectureUtils';
+
+interface Props {
+  lecture: Lecture;
+  classtime?: Classtime;
+  beginIndex: number;
+  endIndex: number;
+  color: number;
+  cellWidth: number;
+  cellHeight: number;
+}
+
+/**
+ * 메인페이지의 오늘의 시간표에 보여지는 가로로된 시간표 타일
+ */
+const HorizontalTimetableTile: React.FC<Props> = ({
+  lecture,
+  classtime,
+  beginIndex,
+  endIndex,
+  color,
+  cellWidth,
+  cellHeight,
+}) => {
+  const translate = useTranslatedString();
+
+  return (
+    <div
+      className={classNames('tile', 'tile--horizontal-timetable', `background-color--${color}`)}
+      style={{
+        left: 2 + cellWidth * beginIndex + 2,
+        top: 15 + 3,
+        width: cellWidth * (endIndex - beginIndex) - 3,
+        height: cellHeight - 3 * 2,
+      }}>
+      <div className={classNames('tile--horizontal-timetable__content')}>
+        <p className={classNames('tile--horizontal-timetable__content__title')}>
+          {translate(lecture, 'title')}
+        </p>
+        <p className={classNames('tile--horizontal-timetable__content__info')}>
+          {getProfessorsShortStr(lecture)}
+        </p>
+        <p className={classNames('tile--horizontal-timetable__content__info')}>
+          {classtime && translate(classtime, 'classroom')}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default withTranslation()(React.memo(HorizontalTimetableTile));

src/components/tiles/PlannerTile.jsx → src/components/tiles/PlannerTile.tsx

@@ -1,16 +1,44 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { appBoundClassNames as classNames } from '../../common/boundClassNames';
+import { appBoundClassNames as classNames } from '@/common/boundClassNames';
+import { useTranslatedString } from '@/hooks/useTranslatedString';
+import { PlannerItemType } from '@/shapes/enum';
+import ArbitraryPlannerItem from '@/shapes/model/planner/ArbitraryPlannerItem';
+import FuturePlannerItem from '@/shapes/model/planner/FuturePlannerItem';
+import TakenPlannerItem from '@/shapes/model/planner/TakenPlannerItem';
+import { getCourseOfItem, getSemesterOfItem } from '@/utils/itemUtils';
 
-import takenPlannerItemShape from '../../shapes/model/planner/TakenPlannerItemShape';
-import futurePlannerItemShape from '../../shapes/model/planner/FuturePlannerItemShape';
-import arbitraryPlannerItemShape from '../../shapes/model/planner/ArbitraryPlannerItemShape';
-import { getCourseOfItem, getSemesterOfItem } from '../../utils/itemUtils';
+export type ItemType = TakenPlannerItem | FuturePlannerItem | ArbitraryPlannerItem;
 
-const PlannerTile = ({
-  t,
+interface Props {
+  item: ItemType;
+  yearIndex: number;
+  //
+  semesterIndex: 0 | 1;
+  beginIndex: number;
+  endIndex: number;
+  color: number;
+  tableSize: number;
+  cellWidth: number;
+  cellHeight: number;
+  isPlannerWithSummer: boolean;
+  isPlannerWithWinter: boolean;
+  isDuplicate: boolean;
+  isRaised: boolean;
+  isHighlighted: boolean;
+  isDimmed: boolean;
+  isSimple: boolean;
+  onMouseOver?: (item: ItemType) => void;
+  onMouseOut?: (item: ItemType) => void;
+  onClick?: (item: ItemType) => void;
+  deleteLecture: (item: ItemType) => void;
+}
+
+/**
+ * 졸업플래너의 타일
+ */
+const PlannerTile: React.FC<Props> = ({
   item,
   yearIndex,
   semesterIndex,
@@ -21,7 +49,6 @@ const PlannerTile = ({
   cellWidth,
   cellHeight,
   isPlannerWithSummer,
-  isPlannerWithWinter,
   isDuplicate,
   isRaised,
   isHighlighted,
@@ -32,22 +59,13 @@ const PlannerTile = ({
   onClick,
   deleteLecture,
 }) => {
-  const handleMouseOver = onMouseOver
-    ? (event) => {
-        onMouseOver(item);
-      }
-    : null;
-  const handleMouseOut = onMouseOut
-    ? (event) => {
-        onMouseOut(item);
-      }
-    : null;
-  const handleClick = onClick
-    ? (event) => {
-        onClick(item);
-      }
-    : null;
-  const handleDeleteFromTableClick = (event) => {
+  const translate = useTranslatedString();
+
+  const handleMouseOver = onMouseOver && (() => onMouseOver(item));
+  const handleMouseOut = onMouseOut && (() => onMouseOut(item));
+  const handleClick = onClick && (() => onClick(item));
+
+  const handleDeleteFromTableClick = (event: React.MouseEvent) => {
     event.stopPropagation();
     deleteLecture(item);
   };
@@ -69,7 +87,7 @@ const PlannerTile = ({
         'tile',
         'tile--planner',
         `background-color--${color}`,
-        item.item_type === 'TAKEN' ? null : 'background-color--stripe',
+        item.item_type === PlannerItemType.TAKEN ? null : 'background-color--stripe',
         isRaised ? 'tile--raised' : null,
         isHighlighted ? 'tile--highlighted' : null,
         isDimmed ? 'tile--dimmed' : null,
@@ -84,20 +102,20 @@ const PlannerTile = ({
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
       onClick={handleClick}>
-      {item.item_type !== 'TAKEN' ? (
+      {item.item_type !== PlannerItemType.TAKEN && (
         <button
           className={classNames('tile--planner__button')}
           onClick={handleDeleteFromTableClick}>
           <i className={classNames('icon', 'icon--delete-lecture')} />
         </button>
-      ) : null}
+      )}
       <div className={classNames('tile--planner__content')}>
         <p
           className={classNames(
             'tile--planner__content__title',
             isSimple ? 'mobile-hidden' : null,
           )}>
-          {getCourseOfItem(item)[t('js.property.title')]}
+          {translate(getCourseOfItem(item), 'title')}
         </p>
         {getSemesterOfItem(item) % 2 === 0 && (
           <p
@@ -110,7 +128,7 @@ const PlannerTile = ({
             S
           </p>
         )}
-        {item.item_type === 'ARBITRARY' && (
+        {item.item_type === PlannerItemType.ARBITRARY && (
           <p
             className={classNames(
               'tile--planner__content__label',
@@ -148,31 +166,4 @@ const PlannerTile = ({
   );
 };
 
-PlannerTile.propTypes = {
-  item: PropTypes.oneOfType([
-    takenPlannerItemShape,
-    futurePlannerItemShape,
-    arbitraryPlannerItemShape,
-  ]).isRequired,
-  yearIndex: PropTypes.number.isRequired,
-  semesterIndex: PropTypes.oneOf([0, 1]).isRequired,
-  beginIndex: PropTypes.number.isRequired,
-  endIndex: PropTypes.number.isRequired,
-  color: PropTypes.number.isRequired,
-  tableSize: PropTypes.number.isRequired,
-  cellWidth: PropTypes.number.isRequired,
-  cellHeight: PropTypes.number.isRequired,
-  isPlannerWithSummer: PropTypes.bool.isRequired,
-  isPlannerWithWinter: PropTypes.bool.isRequired,
-  isDuplicate: PropTypes.bool.isRequired,
-  isRaised: PropTypes.bool.isRequired,
-  isHighlighted: PropTypes.bool.isRequired,
-  isDimmed: PropTypes.bool.isRequired,
-  isSimple: PropTypes.bool.isRequired,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  onClick: PropTypes.func,
-  deleteLecture: PropTypes.func.isRequired,
-};
-
 export default withTranslation()(React.memo(PlannerTile));