fix: migrate all basic ui components

src/components/Attributes.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { appBoundClassNames as classNames } from '../common/boundClassNames';
+import { useTranslation } from 'react-i18next';
+
+interface AttributeEntry {
+  name: string;
+  info: string | React.ReactNode;
+  onMouseOver?: () => void;
+  onMouseOut?: () => void;
+  onInfoClick?: () => void;
+  isInfoClickDisabled?: boolean;
+}
+
+interface AttributesProps {
+  entries: AttributeEntry[];
+  fixedWidthName?: boolean;
+  longName?: boolean;
+  longInfo?: boolean;
+}
+
+const Attributes = ({
+  entries,
+  fixedWidthName = false,
+  longName = false,
+  longInfo = false,
+}: AttributesProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      {entries.map((e) => (
+        <div
+          className={classNames(
+            'attribute',
+            longName ? 'attribute--long-name' : '',
+            longInfo ? 'attribute--long-info' : '',
+          )}
+          onMouseOver={e.onMouseOver}
+          onMouseOut={e.onMouseOut}
+          key={e.name}>
+          <div className={classNames(fixedWidthName ? t('jsx.className.fixedByLang') : '')}>
+            {e.name}
+          </div>
+          {e.onInfoClick ? (
+            <div
+              className={classNames(
+                'text-button',
+                e.isInfoClickDisabled ? 'text-button--disabled' : '',
+              )}
+              onClick={e.onInfoClick}>
+              {e.info}
+            </div>
+          ) : (
+            <div>{e.info}</div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Attributes;

src/components/BetaPopup.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { appBoundClassNames as classNames } from '../common/boundClassNames';
+
+import CloseButton from './CloseButton';
+
+interface BetaPopupProps {
+  title: string;
+  content: string[];
+  link: string;
+}
+
+const BetaPopup = ({ title, content, link }: BetaPopupProps) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const close = () => {
+    setIsOpen(false);
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className={classNames('section', 'section--popup')}>
+      <CloseButton onClick={close} />
+      <div className={classNames('subsection', 'subsection--flex', 'subsection--beta-popup')}>
+        <div className={classNames('title')}>{title}</div>
+        <div className={classNames('subsection--beta-popup__content')}>
+          {content.map((l, index) => (
+            <div key={index}>{l}</div>
+          ))}
+        </div>
+        <div className={classNames('buttons')}>
+          <a
+            href={link}
+            className={classNames('text-button')}
+            target="_blank"
+            rel="noopener noreferrer">
+            피드백 제출하기
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BetaPopup;

src/components/CloseButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { appBoundClassNames as classNames } from '../common/boundClassNames';
+
+interface CloseButtonProps {
+  onClick: () => void;
+}
+
+const CloseButton = ({ onClick }: CloseButtonProps) => {
+  return (
+    <div className={classNames('close-button-wrap')}>
+      <button onClick={onClick}>
+        <i className={classNames('icon', 'icon--close-section')} />
+      </button>
+    </div>
+  );
+};
+
+export default CloseButton;

src/components/CountController.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { appBoundClassNames as classNames } from '../common/boundClassNames';
+
+interface CountControllerProps {
+  count: number;
+  updateCount: (newCount: number) => void;
+}
+
+const CountController: React.FC<CountControllerProps> = ({ count, updateCount }) => {
+  return (
+    <div className={classNames('course-status--info--controller')}>
+      <i
+        className={classNames('icon', 'icon--planner-minus')}
+        onClick={() => {
+          if (count > 0) {
+            updateCount(count - 1);
+          }
+        }}
+      />
+      <div>{count}</div>
+      <i
+        className={classNames('icon', 'icon--planner-plus')}
+        onClick={() => {
+          updateCount(count + 1);
+        }}
+      />
+    </div>
+  );
+};
+
+export default CountController;