Merge pull request #50 from sparcs-kaist/migration@components/blocks3

Migrate course and project related blocks

.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.

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,28 @@
+---
+name: Feature
+about: Suggest an idea for this project
+title: '[FEAT]'
+labels: feat
+---
+
+## 동기 \*
+
+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.

.github/PULL_REQUEST_TEMPLATE/migration.md

@@ -0,0 +1,16 @@
+---
+name: Migration
+about: Migrate to TypeScript and refactor components
+title: 'Migrate ...'
+labels: migrate
+---
+
+## Description
+
+PR의 목적, 내용 요약 등을 간단히 작성합니다.
+
+## Checklist
+
+PR에 포함된 task 목록을 간단히 작성합니다.
+
+- [ ] 없음

src/components/blocks/CourseBlock.tsx

@@ -0,0 +1,85 @@
+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 Course from '@/shapes/model/subject/Course';
+import BlockLink from '@/shapes/BlockLink';
+import Attributes from '@/components/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;
+}
+
+/**
+ * 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,
+  course,
+  shouldShowReadStatus,
+  isRead,
+  isRaised,
+  isDimmed,
+  onMouseOver,
+  onMouseOut,
+  onClick,
+  linkTo,
+}) => {
+  const translate = useTranslatedString();
+
+  const RootTag = linkTo ? Link : 'div';
+
+  return (
+    <RootTag
+      className={classNames(
+        'block',
+        'block--course',
+        onClick ? 'block--clickable' : null,
+        isRaised ? 'block--raised' : null,
+        isDimmed ? 'block--dimmed' : null,
+      )}
+      onClick={() => onClick?.(course)}
+      onMouseOver={() => onMouseOver?.(course)}
+      onMouseOut={() => onMouseOut?.(course)}
+      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>{translate(course, 'title')}</strong>
+        &nbsp;
+        <span>{course.old_code}</span>
+      </div>
+      <Attributes
+        entries={[
+          {
+            name: t('ui.attribute.classification'),
+            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 },
+        ]}
+        longInfo
+      />
+    </RootTag>
+  );
+};
+
+export default withTranslation()(React.memo(CourseBlock));

src/components/blocks/CourseSimpleBlock.tsx

@@ -0,0 +1,26 @@
+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;
+}
+
+/**
+ * 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();
+
+  return (
+    <div className={classNames('block', 'block--course-simple')}>
+      <div className={classNames('block--course-simple__title')}>{translate(course, 'title')}</div>
+      <div className={classNames('block--course-simple__subtitle')}>{course.old_code}</div>
+    </div>
+  );
+};
+
+export default withTranslation()(React.memo(CourseSimpleBlock));