Migrate tile components

src/components/tiles/HorizontalTimetableTile.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+
+import { appBoundClassNames as classNames } from '../../common/boundClassNames';
+
+import Lecture from '@/shapes/model/subject/Lecture';
+import Classtime from '@/shapes/model/subject/Classtime';
+import { useTranslatedString } from '@/hooks/useTranslatedString';
+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--horizonatal-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--horizonatal-timetable__content')}>
+        <p className={classNames('tile--horizonatal-timetable__content__title')}>
+          {translate(lecture, 'title')}
+        </p>
+        <p className={classNames('tile--horizonatal-timetable__content__info')}>
+          {getProfessorsShortStr(lecture)}
+        </p>
+        <p className={classNames('tile--horizonatal-timetable__content__info')}>
+          {classtime && translate(classtime, 'classroom')}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default withTranslation()(React.memo(HorizontalTimetableTile));

src/components/tiles/PlannerTile.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+
+import { appBoundClassNames as classNames } from '../../common/boundClassNames';
+import TakenPlannerItem from '@/shapes/model/planner/TakenPlannerItem';
+import FuturePlannerItem from '@/shapes/model/planner/FuturePlannerItem';
+import ArbitraryPlannerItem from '@/shapes/model/planner/ArbitraryPlannerItem';
+import { useTranslatedString } from '@/hooks/useTranslatedString';
+import { getCourseOfItem, getSemesterOfItem } from '@/utils/itemUtils';
+import { PlannerItemType } from '@/shapes/enum';
+
+export type ItemType = TakenPlannerItem | FuturePlannerItem | ArbitraryPlannerItem;
+
+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,
+  beginIndex,
+  endIndex,
+  color,
+  tableSize,
+  cellWidth,
+  cellHeight,
+  isPlannerWithSummer,
+  isDuplicate,
+  isRaised,
+  isHighlighted,
+  isDimmed,
+  isSimple,
+  onMouseOver,
+  onMouseOut,
+  onClick,
+  deleteLecture,
+}) => {
+  const translate = useTranslatedString();
+
+  const handleMouseOver = onMouseOver
+    ? () => {
+        onMouseOver(item);
+      }
+    : undefined;
+  const handleMouseOut = onMouseOut
+    ? () => {
+        onMouseOut(item);
+      }
+    : undefined;
+  const handleClick = onClick
+    ? () => {
+        onClick(item);
+      }
+    : undefined;
+  const handleDeleteFromTableClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    deleteLecture(item);
+  };
+
+  const getTop = () => {
+    const base = 17 + (isPlannerWithSummer ? 15 : 0) + cellHeight * tableSize;
+    if (semesterIndex === 0) {
+      return base - cellHeight * endIndex + 2;
+    }
+    if (semesterIndex === 1) {
+      return base + cellHeight * 2 + 11 + cellHeight * beginIndex + 1;
+    }
+    return base;
+  };
+
+  return (
+    <div
+      className={classNames(
+        'tile',
+        'tile--planner',
+        `background-color--${color}`,
+        item.item_type === PlannerItemType.TAKEN ? null : 'background-color--stripe',
+        isRaised ? 'tile--raised' : null,
+        isHighlighted ? 'tile--highlighted' : null,
+        isDimmed ? 'tile--dimmed' : null,
+        item.is_excluded ? 'tile--planner--excluded' : null,
+      )}
+      style={{
+        left: 26 + (cellWidth + 15) * yearIndex - 1,
+        top: getTop(),
+        width: cellWidth + 2,
+        height: cellHeight * (endIndex - beginIndex) - 3,
+      }}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onClick={handleClick}>
+      {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,
+          )}>
+          {translate(getCourseOfItem(item), 'title')}
+        </p>
+        {getSemesterOfItem(item) % 2 === 0 && (
+          <p
+            className={classNames(
+              'tile--planner__content__label',
+              isSimple ? 'mobile-hidden' : null,
+              `background-color--${color}`,
+              'background-color--dark',
+            )}>
+            S
+          </p>
+        )}
+        {item.item_type === PlannerItemType.ARBITRARY && (
+          <p
+            className={classNames(
+              'tile--planner__content__label',
+              isSimple ? 'mobile-hidden' : null,
+              `background-color--${color}`,
+              'background-color--dark',
+            )}>
+            ?
+          </p>
+        )}
+        {item.is_excluded && (
+          <p
+            className={classNames(
+              'tile--planner__content__label',
+              isSimple ? 'mobile-hidden' : null,
+              `background-color--${color}`,
+              'background-color--dark',
+            )}>
+            X
+          </p>
+        )}
+        {isDuplicate && (
+          <p
+            className={classNames(
+              'tile--planner__content__label',
+              isSimple ? 'mobile-hidden' : null,
+              `background-color--${color}`,
+              'background-color--dark',
+            )}>
+            !
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default withTranslation()(React.memo(PlannerTile));

src/components/tiles/TimetableDragTile.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+
+import { appBoundClassNames as classNames } from '../../common/boundClassNames';
+
+interface Props {
+  dayIndex: number;
+  beginIndex: number;
+  endIndex: number;
+  cellWidth: number;
+  cellHeight: number;
+}
+
+/**
+ * 모의시간표에서 시간대를 드래그 할 때 보여지는 드래그 영역 타일
+ */
+const TimetableDragTile: React.FC<Props> = ({
+  dayIndex,
+  beginIndex,
+  endIndex,
+  cellWidth,
+  cellHeight,
+}) => {
+  return (
+    <div
+      className={classNames('tile', 'tile--timetable-drag')}
+      style={{
+        left: (cellWidth + 5) * dayIndex + 17,
+        width: cellWidth + 2,
+        top: cellHeight * beginIndex + 19,
+        height: cellHeight * (endIndex - beginIndex) - 3,
+      }}
+    />
+  );
+};
+
+export default withTranslation()(React.memo(TimetableDragTile));