From 3394fa91a24a604faa20c729f5dbc509f69a8d8d Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Wed, 13 Mar 2024 15:48:42 +0900
Subject: [PATCH 01/11] chore: add PR template for migration

---
 .github/PULL_REQUEST_TEMPLATE/migration.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 .github/PULL_REQUEST_TEMPLATE/migration.md

diff --git a/.github/PULL_REQUEST_TEMPLATE/migration.md b/.github/PULL_REQUEST_TEMPLATE/migration.md
new file mode 100644
index 0000000..675ad27
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE/migration.md
@@ -0,0 +1,16 @@
+---
+name: Migration
+about: Migrate to TypeScript and refactor components
+title:
+labels: migrate
+---
+
+## Description
+
+<!-- PR의 목적, 내용 요약 등을 간단히 작성합니다. -->
+
+## Checklist
+
+<!-- PR에 포함된 task 목록을 간단히 작성합니다. -->
+
+- [ ] 없음

From 99a854142b35b20be0bb26b1545aaf8012b68466 Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Wed, 13 Mar 2024 15:49:20 +0900
Subject: [PATCH 02/11] chore: add issue templates for feature and bug

---
 .github/ISSUE_TEMPLATE/bug_report.md | 37 ++++++++++++++++++++++++++++
 .github/ISSUE_TEMPLATE/feature.md    | 28 +++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 create mode 100644 .github/ISSUE_TEMPLATE/feature.md

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..ba97997
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us fix bugs
+title: '[BUG]'
+labels: bug
+---
+
+## 설명 \*
+
+A clear and concise description of what the bug is.
+
+## 재현 순서 \*
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+## 테스트 환경 \*
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Web Version: [e.g. 1.1.0]
+
+## 스크린샷
+
+If applicable, add screenshots to help explain your problem.
+
+## 에러 로그
+
+```sh
+(OPTIONAL)
+```
+
+## 추가 정보
+
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md
new file mode 100644
index 0000000..e1f9e5c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature.md
@@ -0,0 +1,28 @@
+---
+name: Feature
+about: Suggest an idea for this project
+title: '[FEAT]'
+labels: enhancement
+---
+
+## 동기 \*
+
+A clear and concise description of what the motivation is.
+
+## 제안 내용 \*
+
+A clear and concise description of what you want to happen.
+
+## 스크린샷
+
+If applicable, add screenshots to help explain your feature request.
+
+## 테스트 환경
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Web Version: [e.g. 1.1.0]
+
+## 추가 정보
+
+Add any other context or screenshots about the feature request here.

From b00094ceacbd530bcf90f22952f7a1ab181c58bb Mon Sep 17 00:00:00 2001
From: Seungbin Oh <sboh1214@gmail.com>
Date: Thu, 14 Mar 2024 06:14:23 +0900
Subject: [PATCH 03/11] chore: modify title and label of templates

---
 .github/ISSUE_TEMPLATE/feature.md          | 2 +-
 .github/PULL_REQUEST_TEMPLATE/migration.md | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md
index e1f9e5c..e00231d 100644
--- a/.github/ISSUE_TEMPLATE/feature.md
+++ b/.github/ISSUE_TEMPLATE/feature.md
@@ -2,7 +2,7 @@
 name: Feature
 about: Suggest an idea for this project
 title: '[FEAT]'
-labels: enhancement
+labels: feat
 ---
 
 ## 동기 \*
diff --git a/.github/PULL_REQUEST_TEMPLATE/migration.md b/.github/PULL_REQUEST_TEMPLATE/migration.md
index 675ad27..e8afe22 100644
--- a/.github/PULL_REQUEST_TEMPLATE/migration.md
+++ b/.github/PULL_REQUEST_TEMPLATE/migration.md
@@ -1,16 +1,16 @@
 ---
 name: Migration
 about: Migrate to TypeScript and refactor components
-title:
+title: 'Migration ...'
 labels: migrate
 ---
 
 ## Description
 
-<!-- PR의 목적, 내용 요약 등을 간단히 작성합니다. -->
+PR의 목적, 내용 요약 등을 간단히 작성합니다.
 
 ## Checklist
 
-<!-- PR에 포함된 task 목록을 간단히 작성합니다. -->
+PR에 포함된 task 목록을 간단히 작성합니다.
 
 - [ ] 없음

From 13a9f9311cac75287a3116cea717cf0397b13c70 Mon Sep 17 00:00:00 2001
From: Seungbin Oh <sboh1214@gmail.com>
Date: Thu, 14 Mar 2024 06:16:44 +0900
Subject: [PATCH 04/11] chore: change title of Migration PR

---
 .github/PULL_REQUEST_TEMPLATE/migration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE/migration.md b/.github/PULL_REQUEST_TEMPLATE/migration.md
index e8afe22..b03ec02 100644
--- a/.github/PULL_REQUEST_TEMPLATE/migration.md
+++ b/.github/PULL_REQUEST_TEMPLATE/migration.md
@@ -1,7 +1,7 @@
 ---
 name: Migration
 about: Migrate to TypeScript and refactor components
-title: 'Migration ...'
+title: 'Migrate ...'
 labels: migrate
 ---
 

From ef3f08da39565319050369d2cf6568577e6e259c Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Sun, 17 Mar 2024 20:02:17 +0900
Subject: [PATCH 05/11] migrate: @/components/blocks/CourseBlock.tsx

---
 .../{CourseBlock.jsx => CourseBlock.tsx}      | 64 +++++++++++--------
 1 file changed, 37 insertions(+), 27 deletions(-)
 rename src/components/blocks/{CourseBlock.jsx => CourseBlock.tsx} (62%)

diff --git a/src/components/blocks/CourseBlock.jsx b/src/components/blocks/CourseBlock.tsx
similarity index 62%
rename from src/components/blocks/CourseBlock.jsx
rename to src/components/blocks/CourseBlock.tsx
index f960d5b..bb67999 100644
--- a/src/components/blocks/CourseBlock.jsx
+++ b/src/components/blocks/CourseBlock.tsx
@@ -1,16 +1,33 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 import { getProfessorsFullStr } from '../../utils/courseUtils';
-
-import courseShape from '../../shapes/model/subject/CourseShape';
-import linkShape from '../../shapes/LinkShape';
+import Course from '@/shapes/model/subject/Course';
+import BlockLink from '@/shapes/BlockLink';
 import Attributes from '../Attributes';
+import { useTranslatedString } from '@/hooks/useTranslatedString';
+
+interface Props {
+  t: (string: string) => string;
+  course: Course;
+  shouldShowReadStatus?: boolean;
+  isRead?: boolean;
+  isRaised?: boolean;
+  isDimmed?: boolean;
+  onMouseOver?: (course: Course) => void;
+  onMouseOut?: (course: Course) => void;
+  onClick?: (course: Course) => void;
+  linkTo?: BlockLink;
+}
 
-const CourseBlock = ({
+/**
+ *
+ * Component `CourseBlock` displays a overview of a course in `DictionaryPage`.
+ * It shows the title, classification, professors, and description of the course.
+ *
+ */
+const CourseBlock: React.FC<Props> = ({
   t,
   course,
   shouldShowReadStatus,
@@ -22,21 +39,23 @@ const CourseBlock = ({
   onClick,
   linkTo,
 }) => {
+  const translate = useTranslatedString();
+
   const handleMouseOver = onMouseOver
-    ? (event) => {
+    ? () => {
         onMouseOver(course);
       }
-    : null;
+    : undefined;
   const handleMouseOut = onMouseOut
-    ? (event) => {
+    ? () => {
         onMouseOut(course);
       }
-    : null;
+    : undefined;
   const handleClick = onClick
-    ? (event) => {
+    ? () => {
         onClick(course);
       }
-    : null;
+    : undefined;
 
   const RootTag = linkTo ? Link : 'div';
 
@@ -52,14 +71,14 @@ const CourseBlock = ({
       onClick={handleClick}
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
-      to={linkTo}>
+      to={linkTo ?? ''}>
       <div className={classNames('block--course__title')}>
         {!shouldShowReadStatus ? null : isRead ? (
           <i className={classNames('icon', 'icon--status-read')} />
         ) : (
           <i className={classNames('icon', 'icon--status-unread')} />
         )}
-        <strong>{course[t('js.property.title')]}</strong>
+        <strong>{translate(course, 'title')}</strong>
         &nbsp;
         <span>{course.old_code}</span>
       </div>
@@ -67,7 +86,10 @@ const CourseBlock = ({
         entries={[
           {
             name: t('ui.attribute.classification'),
-            info: `${course.department[t('js.property.name')]}, ${course[t('js.property.type')]}`,
+            info: `${course.department && translate(course.department, 'name')}, ${translate(
+              course,
+              'type',
+            )}`,
           },
           { name: t('ui.attribute.professors'), info: getProfessorsFullStr(course) },
           { name: t('ui.attribute.description'), info: course.summary },
@@ -78,16 +100,4 @@ const CourseBlock = ({
   );
 };
 
-CourseBlock.propTypes = {
-  course: courseShape.isRequired,
-  shouldShowReadStatus: PropTypes.bool,
-  isRead: PropTypes.bool,
-  isRaised: PropTypes.bool,
-  isDimmed: PropTypes.bool,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  onClick: PropTypes.func,
-  linkTo: linkShape,
-};
-
 export default withTranslation()(React.memo(CourseBlock));

From 595597b7f4d3f0cdfc3e5c29e46256a2612dcbd3 Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Sun, 17 Mar 2024 20:10:02 +0900
Subject: [PATCH 06/11] migrate: @/components/blocks/CourseSimpleBlock.tsx

---
 ...eSimpleBlock.jsx => CourseSimpleBlock.tsx} | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)
 rename src/components/blocks/{CourseSimpleBlock.jsx => CourseSimpleBlock.tsx} (61%)

diff --git a/src/components/blocks/CourseSimpleBlock.jsx b/src/components/blocks/CourseSimpleBlock.tsx
similarity index 61%
rename from src/components/blocks/CourseSimpleBlock.jsx
rename to src/components/blocks/CourseSimpleBlock.tsx
index 6de48b2..bd49b0d 100644
--- a/src/components/blocks/CourseSimpleBlock.jsx
+++ b/src/components/blocks/CourseSimpleBlock.tsx
@@ -1,23 +1,22 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
-
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
+import Course from '@/shapes/model/subject/Course';
+import { useTranslatedString } from '@/hooks/useTranslatedString';
+
+interface Props {
+  course: Course;
+}
 
-import courseShape from '../../shapes/model/subject/CourseShape';
+const CourseSimpleBlock: React.FC<Props> = ({ course }) => {
+  const translate = useTranslatedString();
 
-const CourseSimpleBlock = ({ t, course }) => {
   return (
     <div className={classNames('block', 'block--course-simple')}>
-      <div className={classNames('block--course-simple__title')}>
-        {course[t('js.property.title')]}
-      </div>
+      <div className={classNames('block--course-simple__title')}>{translate(course, 'title')}</div>
       <div className={classNames('block--course-simple__subtitle')}>{course.old_code}</div>
     </div>
   );
 };
 
-CourseSimpleBlock.propTypes = {
-  course: courseShape.isRequired,
-};
-
 export default withTranslation()(React.memo(CourseSimpleBlock));

From 130650495144bc2929810815b262fc99048ddb12 Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Sun, 17 Mar 2024 20:21:07 +0900
Subject: [PATCH 07/11] migrate: @/components/blocks/PlannerCourseBlock.tsx

---
 ...CourseBlock.jsx => PlannerCourseBlock.tsx} | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)
 rename src/components/blocks/{PlannerCourseBlock.jsx => PlannerCourseBlock.tsx} (61%)

diff --git a/src/components/blocks/PlannerCourseBlock.jsx b/src/components/blocks/PlannerCourseBlock.tsx
similarity index 61%
rename from src/components/blocks/PlannerCourseBlock.jsx
rename to src/components/blocks/PlannerCourseBlock.tsx
index 4641e07..091fce5 100644
--- a/src/components/blocks/PlannerCourseBlock.jsx
+++ b/src/components/blocks/PlannerCourseBlock.tsx
@@ -1,13 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
+import Course from '@/shapes/model/subject/Course';
+import { ArbitraryPseudoCourse } from '@/shapes/state/planner/ItemFocus';
+import { useTranslatedString } from '@/hooks/useTranslatedString';
 
-import courseShape from '../../shapes/model/subject/CourseShape';
-import { arbitraryPseudoCourseShape } from '../../shapes/state/planner/ItemFocusShape';
+interface Props {
+  t: (string: string) => string;
+  course: Course | ArbitraryPseudoCourse;
+  isRaised?: boolean;
+  isDimmed?: boolean;
+  isAdded: boolean;
+  onMouseOver?: (course: Course | ArbitraryPseudoCourse) => void;
+  onMouseOut?: (course: Course | ArbitraryPseudoCourse) => void;
+  onClick?: (course: Course | ArbitraryPseudoCourse) => void;
+  addToPlanner: (course: Course | ArbitraryPseudoCourse) => void;
+}
 
-const PlannerCourseBlock = ({
+const PlannerCourseBlock: React.FC<Props> = ({
   t,
   course,
   isRaised,
@@ -18,22 +28,24 @@ const PlannerCourseBlock = ({
   onClick,
   addToPlanner,
 }) => {
+  const translate = useTranslatedString();
+
   const handleMouseOver = onMouseOver
-    ? (event) => {
+    ? () => {
         onMouseOver(course);
       }
-    : null;
+    : undefined;
   const handleMouseOut = onMouseOut
-    ? (event) => {
+    ? () => {
         onMouseOut(course);
       }
-    : null;
+    : undefined;
   const handleClick = onClick
-    ? (event) => {
+    ? () => {
         onClick(course);
       }
-    : null;
-  const handleAddToPlannerClick = (event) => {
+    : undefined;
+  const handleAddToPlannerClick = (event: React.MouseEvent) => {
     event.stopPropagation();
     addToPlanner(course);
   };
@@ -54,10 +66,13 @@ const PlannerCourseBlock = ({
       <div className={classNames('block__completed-text')}>{t('ui.others.added')}</div>
       <div className={classNames('block--planner-course__text')}>
         <div className={classNames('block--planner-course__text__caption')}>
-          {`${course.department[t('js.property.name')]} / ${course[t('js.property.type')]}`}
+          {`${course.department && translate(course.department, 'name')} / ${translate(
+            course,
+            'type',
+          )}`}
         </div>
         <div className={classNames('block--planner-course__text__title')}>
-          {course[t('js.property.title')]}
+          {translate(course, 'title')}
         </div>
         <div className={classNames('block--planner-course__text__subtitle')}>{course.old_code}</div>
       </div>
@@ -70,15 +85,4 @@ const PlannerCourseBlock = ({
   );
 };
 
-PlannerCourseBlock.propTypes = {
-  course: PropTypes.oneOfType([courseShape, arbitraryPseudoCourseShape]).isRequired,
-  isRaised: PropTypes.bool,
-  isDimmed: PropTypes.bool,
-  isAdded: PropTypes.bool.isRequired,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  onClick: PropTypes.func,
-  addToPlanner: PropTypes.func,
-};
-
 export default withTranslation()(React.memo(PlannerCourseBlock));

From dd9980dd10b545ebc568314950317a6ba0362f86 Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Sun, 17 Mar 2024 20:29:03 +0900
Subject: [PATCH 08/11] migrate: @/components/blocks/Projectblock.tsx

---
 .../{ProjectBlock.jsx => ProjectBlock.tsx}    | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)
 rename src/components/blocks/{ProjectBlock.jsx => ProjectBlock.tsx} (63%)

diff --git a/src/components/blocks/ProjectBlock.jsx b/src/components/blocks/ProjectBlock.tsx
similarity index 63%
rename from src/components/blocks/ProjectBlock.jsx
rename to src/components/blocks/ProjectBlock.tsx
index ec1dbb4..330aa29 100644
--- a/src/components/blocks/ProjectBlock.jsx
+++ b/src/components/blocks/ProjectBlock.tsx
@@ -1,15 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-
 import { appBoundClassNames as classNames } from '../../common/boundClassNames';
 
-const ProjectBlock = ({ t, project, isRaised, onClick }) => {
+interface Props {
+  project: {
+    index: number;
+    mainTitle: string;
+    subTitle: string;
+    period: string;
+  };
+  onClick?: (project: { index: number }) => void;
+  isRaised: boolean;
+}
+
+/**
+ *
+ * Component `ProjectBlock` displays an overview of a project in `CreditPage`.
+ * It shows the title, subtitle, and period of the project.
+ *
+ */
+const ProjectBlock: React.FC<Props> = ({ project, isRaised, onClick }) => {
   const handleClick = onClick
-    ? (event) => {
+    ? () => {
         onClick(project);
       }
-    : null;
+    : undefined;
 
   return (
     <div
@@ -27,15 +42,4 @@ const ProjectBlock = ({ t, project, isRaised, onClick }) => {
   );
 };
 
-ProjectBlock.propTypes = {
-  project: PropTypes.shape({
-    index: PropTypes.number.isRequired,
-    mainTitle: PropTypes.string.isRequired,
-    subTitle: PropTypes.string.isRequired,
-    period: PropTypes.string.isRequired,
-  }).isRequired,
-  onClick: PropTypes.func,
-  isRaised: PropTypes.bool.isRequired,
-};
-
 export default withTranslation()(React.memo(ProjectBlock));

From b69df0f528fe8ab62bce4b5fa3082cf5f5fed9bf Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Sun, 17 Mar 2024 20:40:36 +0900
Subject: [PATCH 09/11] docs: add and update docstrings

---
 src/components/blocks/CourseBlock.tsx        | 4 +---
 src/components/blocks/CourseSimpleBlock.tsx  | 4 ++++
 src/components/blocks/PlannerCourseBlock.tsx | 4 ++++
 src/components/blocks/ProjectBlock.tsx       | 4 +---
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/blocks/CourseBlock.tsx b/src/components/blocks/CourseBlock.tsx
index bb67999..0d74a80 100644
--- a/src/components/blocks/CourseBlock.tsx
+++ b/src/components/blocks/CourseBlock.tsx
@@ -22,10 +22,8 @@ interface Props {
 }
 
 /**
- *
- * Component `CourseBlock` displays a overview of a course in `DictionaryPage`.
+ * Component `CourseBlock` displays an overview of a course within the search results on the `DictionaryPage`.
  * It shows the title, classification, professors, and description of the course.
- *
  */
 const CourseBlock: React.FC<Props> = ({
   t,
diff --git a/src/components/blocks/CourseSimpleBlock.tsx b/src/components/blocks/CourseSimpleBlock.tsx
index bd49b0d..0a45e7a 100644
--- a/src/components/blocks/CourseSimpleBlock.tsx
+++ b/src/components/blocks/CourseSimpleBlock.tsx
@@ -8,6 +8,10 @@ interface Props {
   course: Course;
 }
 
+/**
+ * Component `CourseSimpleBlock` displays a brief overview of a course within the `CourseRelatedCoursesSubSection` on the `DictionaryPage`.
+ * It shows the title and code of the course.
+ */
 const CourseSimpleBlock: React.FC<Props> = ({ course }) => {
   const translate = useTranslatedString();
 
diff --git a/src/components/blocks/PlannerCourseBlock.tsx b/src/components/blocks/PlannerCourseBlock.tsx
index 091fce5..31e32df 100644
--- a/src/components/blocks/PlannerCourseBlock.tsx
+++ b/src/components/blocks/PlannerCourseBlock.tsx
@@ -17,6 +17,10 @@ interface Props {
   addToPlanner: (course: Course | ArbitraryPseudoCourse) => void;
 }
 
+/**
+ * Component `PlannerCourseBlock` displays an overview of a course within the search results on the `PlannerPage`.
+ * It shows the title, classification, and code of the course.
+ */
 const PlannerCourseBlock: React.FC<Props> = ({
   t,
   course,
diff --git a/src/components/blocks/ProjectBlock.tsx b/src/components/blocks/ProjectBlock.tsx
index 330aa29..2d7aadd 100644
--- a/src/components/blocks/ProjectBlock.tsx
+++ b/src/components/blocks/ProjectBlock.tsx
@@ -14,10 +14,8 @@ interface Props {
 }
 
 /**
- *
- * Component `ProjectBlock` displays an overview of a project in `CreditPage`.
+ * Component `ProjectBlock` displays an overview of a project on the `CreditPage`.
  * It shows the title, subtitle, and period of the project.
- *
  */
 const ProjectBlock: React.FC<Props> = ({ project, isRaised, onClick }) => {
   const handleClick = onClick

From 89c39399a66465caa261254086a09fa9edc2b5e7 Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Wed, 20 Mar 2024 14:37:21 +0900
Subject: [PATCH 10/11] chore: update import paths to absolute

---
 src/components/blocks/CourseBlock.tsx        | 6 +++---
 src/components/blocks/CourseSimpleBlock.tsx  | 2 +-
 src/components/blocks/PlannerCourseBlock.tsx | 2 +-
 src/components/blocks/ProjectBlock.tsx       | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/blocks/CourseBlock.tsx b/src/components/blocks/CourseBlock.tsx
index 0d74a80..a11281f 100644
--- a/src/components/blocks/CourseBlock.tsx
+++ b/src/components/blocks/CourseBlock.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { withTranslation } from 'react-i18next';
-import { appBoundClassNames as classNames } from '../../common/boundClassNames';
-import { getProfessorsFullStr } from '../../utils/courseUtils';
+import { appBoundClassNames as classNames } from '@/common/boundClassNames';
+import { getProfessorsFullStr } from '@/utils/courseUtils';
 import Course from '@/shapes/model/subject/Course';
 import BlockLink from '@/shapes/BlockLink';
-import Attributes from '../Attributes';
+import Attributes from '@/components/Attributes';
 import { useTranslatedString } from '@/hooks/useTranslatedString';
 
 interface Props {
diff --git a/src/components/blocks/CourseSimpleBlock.tsx b/src/components/blocks/CourseSimpleBlock.tsx
index 0a45e7a..80a6107 100644
--- a/src/components/blocks/CourseSimpleBlock.tsx
+++ b/src/components/blocks/CourseSimpleBlock.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
-import { appBoundClassNames as classNames } from '../../common/boundClassNames';
+import { appBoundClassNames as classNames } from '@/common/boundClassNames';
 import Course from '@/shapes/model/subject/Course';
 import { useTranslatedString } from '@/hooks/useTranslatedString';
 
diff --git a/src/components/blocks/PlannerCourseBlock.tsx b/src/components/blocks/PlannerCourseBlock.tsx
index 31e32df..61d1915 100644
--- a/src/components/blocks/PlannerCourseBlock.tsx
+++ b/src/components/blocks/PlannerCourseBlock.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
-import { appBoundClassNames as classNames } from '../../common/boundClassNames';
+import { appBoundClassNames as classNames } from '@/common/boundClassNames';
 import Course from '@/shapes/model/subject/Course';
 import { ArbitraryPseudoCourse } from '@/shapes/state/planner/ItemFocus';
 import { useTranslatedString } from '@/hooks/useTranslatedString';
diff --git a/src/components/blocks/ProjectBlock.tsx b/src/components/blocks/ProjectBlock.tsx
index 2d7aadd..f80f257 100644
--- a/src/components/blocks/ProjectBlock.tsx
+++ b/src/components/blocks/ProjectBlock.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
-import { appBoundClassNames as classNames } from '../../common/boundClassNames';
+import { appBoundClassNames as classNames } from '@/common/boundClassNames';
 
 interface Props {
   project: {

From 76ae6748fa210086a33f7b6317718f60a30229bb Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Wed, 20 Mar 2024 14:55:18 +0900
Subject: [PATCH 11/11] refactor: simplify event handlers

---
 src/components/blocks/CourseBlock.tsx        | 22 +++-----------------
 src/components/blocks/PlannerCourseBlock.tsx | 21 +++----------------
 src/components/blocks/ProjectBlock.tsx       |  8 +------
 3 files changed, 7 insertions(+), 44 deletions(-)

diff --git a/src/components/blocks/CourseBlock.tsx b/src/components/blocks/CourseBlock.tsx
index a11281f..e4e06f9 100644
--- a/src/components/blocks/CourseBlock.tsx
+++ b/src/components/blocks/CourseBlock.tsx
@@ -39,22 +39,6 @@ const CourseBlock: React.FC<Props> = ({
 }) => {
   const translate = useTranslatedString();
 
-  const handleMouseOver = onMouseOver
-    ? () => {
-        onMouseOver(course);
-      }
-    : undefined;
-  const handleMouseOut = onMouseOut
-    ? () => {
-        onMouseOut(course);
-      }
-    : undefined;
-  const handleClick = onClick
-    ? () => {
-        onClick(course);
-      }
-    : undefined;
-
   const RootTag = linkTo ? Link : 'div';
 
   return (
@@ -66,9 +50,9 @@ const CourseBlock: React.FC<Props> = ({
         isRaised ? 'block--raised' : null,
         isDimmed ? 'block--dimmed' : null,
       )}
-      onClick={handleClick}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
+      onClick={() => onClick?.(course)}
+      onMouseOver={() => onMouseOver?.(course)}
+      onMouseOut={() => onMouseOut?.(course)}
       to={linkTo ?? ''}>
       <div className={classNames('block--course__title')}>
         {!shouldShowReadStatus ? null : isRead ? (
diff --git a/src/components/blocks/PlannerCourseBlock.tsx b/src/components/blocks/PlannerCourseBlock.tsx
index 61d1915..c90af9e 100644
--- a/src/components/blocks/PlannerCourseBlock.tsx
+++ b/src/components/blocks/PlannerCourseBlock.tsx
@@ -34,21 +34,6 @@ const PlannerCourseBlock: React.FC<Props> = ({
 }) => {
   const translate = useTranslatedString();
 
-  const handleMouseOver = onMouseOver
-    ? () => {
-        onMouseOver(course);
-      }
-    : undefined;
-  const handleMouseOut = onMouseOut
-    ? () => {
-        onMouseOut(course);
-      }
-    : undefined;
-  const handleClick = onClick
-    ? () => {
-        onClick(course);
-      }
-    : undefined;
   const handleAddToPlannerClick = (event: React.MouseEvent) => {
     event.stopPropagation();
     addToPlanner(course);
@@ -64,9 +49,9 @@ const PlannerCourseBlock: React.FC<Props> = ({
         isDimmed ? 'block--dimmed' : null,
         isAdded ? 'block--completed' : null,
       )}
-      onClick={handleClick}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}>
+      onClick={() => onClick?.(course)}
+      onMouseOver={() => onMouseOver?.(course)}
+      onMouseOut={() => onMouseOut?.(course)}>
       <div className={classNames('block__completed-text')}>{t('ui.others.added')}</div>
       <div className={classNames('block--planner-course__text')}>
         <div className={classNames('block--planner-course__text__caption')}>
diff --git a/src/components/blocks/ProjectBlock.tsx b/src/components/blocks/ProjectBlock.tsx
index f80f257..3ec6a2f 100644
--- a/src/components/blocks/ProjectBlock.tsx
+++ b/src/components/blocks/ProjectBlock.tsx
@@ -18,12 +18,6 @@ interface Props {
  * It shows the title, subtitle, and period of the project.
  */
 const ProjectBlock: React.FC<Props> = ({ project, isRaised, onClick }) => {
-  const handleClick = onClick
-    ? () => {
-        onClick(project);
-      }
-    : undefined;
-
   return (
     <div
       className={classNames(
@@ -32,7 +26,7 @@ const ProjectBlock: React.FC<Props> = ({ project, isRaised, onClick }) => {
         onClick ? 'block--clickable' : null,
         isRaised ? 'block--raised' : null,
       )}
-      onClick={handleClick}>
+      onClick={() => onClick?.(project)}>
       <div className={classNames('block--project__title')}>{project.mainTitle}</div>
       <div className={classNames('block--project__title')}>{project.subTitle}</div>
       <div className={classNames('block--project__content')}>{project.period}</div>