Refactor global CSS into component-specific stylesheets

src/components/BetaPopup.jsx

@@ -6,6 +6,8 @@ import { appBoundClassNames as classNames } from '../common/boundClassNames';
 
 import CloseButton from './CloseButton';
 
+import styles from './BetaPopup.module.scss';
+
 class BetaPopup extends Component {
   constructor(props) {
     super(props);
@@ -30,24 +32,22 @@ class BetaPopup extends Component {
     }
 
     return (
-      <div className={classNames('section', 'section--popup')}>
-        <CloseButton onClick={this.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) => (
-              <div>{l}</div>
-            ))}
-          </div>
-          <div className={classNames('buttons')}>
-            <a
-              href={link}
-              className={classNames('text-button')}
-              target="_blank"
-              rel="noopener noreferrer">
-              피드백 제출하기
-            </a>
-          </div>
+      <div className={classNames('section', styles.popup)}>
+        <CloseButton className={styles.closeButton} onClick={this.close} />
+        <div className={classNames('title')}>{title}</div>
+        <div className={styles.contents}>
+          {content.map((text, idx) => (
+            <p key={idx}>{text}</p>
+          ))}
+        </div>
+        <div className={classNames('buttons')}>
+          <a
+            href={link}
+            className={classNames('text-button')}
+            target="_blank"
+            rel="noopener noreferrer">
+            피드백 제출하기
+          </a>
         </div>
       </div>
     );

src/components/BetaPopup.module.scss

@@ -0,0 +1,37 @@
+@use '@/sass/abstracts/font' as font;
+@use '@/sass/abstracts/mixins' as *;
+@use '@/sass/abstracts/variables' as *;
+
+.popup {
+  position: absolute;
+  z-index: 200;
+  top: 50%;
+  left: 50%;
+
+  display: flex;
+  flex-direction: column;
+
+  transform: translate(-50%, calc(-50% - #{$header-height} / 2));
+
+  box-shadow:
+    $section-box-shadow,
+    0 0 0 1000px rgb(0 0 0 / 0.3);
+  width: 260px;
+  height: 240px;
+}
+
+.contents {
+  flex: auto;
+
+  line-height: font.$line-height-normal + font.$delta-line-height-longcontent;
+
+  & > p:not(:last-child) {
+    margin-bottom: 4px;
+  }
+}
+
+.closeButton {
+  @include mixin-media-landscape {
+    display: initial;
+  }
+}

src/components/CloseButton.jsx

@@ -5,10 +5,10 @@ import { appBoundClassNames as classNames } from '../common/boundClassNames';
 
 class CloseButton extends Component {
   render() {
-    const { onClick } = this.props;
+    const { onClick, className } = this.props;
 
     return (
-      <div className={classNames('close-button-wrap')}>
+      <div className={classNames('close-button-wrap', className)}>
         <button onClick={onClick}>
           <i className={classNames('icon', 'icon--close-section')} />
         </button>
@@ -19,6 +19,7 @@ class CloseButton extends Component {
 
 CloseButton.propTypes = {
   onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
 };
 
 export default CloseButton;

src/components/CountController.jsx

@@ -1,17 +1,18 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { withTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 
-import { appBoundClassNames as classNames } from '../common/boundClassNames';
+import classNames from 'classnames';
+import styles from './CountController.module.scss';
 
 class CountController extends Component {
   render() {
     const { count, updateCount } = this.props;
 
     return (
-      <div className={classNames('course-status--info--controller')}>
+      <div className={styles.controller}>
         <i
-          className={classNames('icon', 'icon--planner-minus')}
+          className={classNames(styles.icon, styles.iconPlannerMinus)}
           onClick={() => {
             if (count > 0) {
               updateCount(count - 1);
@@ -20,7 +21,7 @@ class CountController extends Component {
         />
         <div>{count}</div>
         <i
-          className={classNames('icon', 'icon--planner-plus')}
+          className={classNames(styles.icon, styles.iconPlannerPlus)}
           onClick={() => {
             updateCount(count + 1);
           }}

src/components/CountController.module.scss

@@ -0,0 +1,29 @@
+.controller {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.icon {
+  display: inline-block;
+
+  margin: calc(calc(font.$line-height-normal - 12px) / 2) 0;
+  width: 12px;
+  height: 12px;
+
+  background: none no-repeat center center;
+
+  vertical-align: top;
+
+  &PlannerPlus {
+    margin-left: 8px;
+
+    background-image: url(@/static/icons/plus_circled.svg);
+  }
+
+  &PlannerMinus {
+    margin-right: 8px;
+
+    background-image: url(@/static/icons/minus_circled.svg);
+  }
+}

src/components/CourseStatus.jsx

@@ -1,27 +1,26 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import { appBoundClassNames as classNames } from '../common/boundClassNames';
+import styles from './CourseStatus.module.scss';
 
 class CourseStatus extends Component {
   render() {
     const { entries } = this.props;
 
     return (
       <div>
-        {entries.map((e) => (
-          <div className={classNames('course-status')} key={e.name}>
-            <div className={classNames('course-status--name')}>{e.name}</div>
+        {entries.map(({ name, info }) => (
+          <div className={styles.courseTypes} key={name}>
+            <div className={styles.title}>{name}</div>
             <div>
-              {e.info.map((k) => (
+              {info.map((k) => (
                 <div
-                  className={classNames('course-status--info')}
+                  className={styles.info}
                   onMouseOver={k.onMouseOver}
                   onMouseOut={k.onMouseOut}
                   key={k.name}>
-                  <div className={classNames('course-status--info--name')}>{k.name}</div>
-                  <div />
+                  <span className={styles.infoName}>{k.name}</span>
                   {k.controller}
                 </div>
               ))}

src/components/CourseStatus.module.scss

@@ -0,0 +1,28 @@
+@use '@/sass/abstracts/variables' as *;
+
+.courseTypes:not(:last-child) {
+  margin-bottom: $attribute-margin-bottom + 2px;
+}
+
+.title {
+  margin-bottom: $attribute-margin-bottom;
+
+  font-weight: bold;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  margin-left: 8px;
+  width: calc(100% - 8px);
+
+  &:not(:last-child) {
+    margin-bottom: $attribute-margin-bottom;
+  }
+}
+
+.infoName {
+  align-self: center;
+}

src/components/CreditBar.jsx

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import { appBoundClassNames as classNames } from '../common/boundClassNames';
 import { ItemFocusFrom } from '../reducers/planner/itemFocus';
 
+import styles from './CreditBar.module.scss';
+
 class CreditBar extends Component {
   render() {
     const {
@@ -55,31 +57,22 @@ class CreditBar extends Component {
     ];
 
     return (
-      <div className={classNames('credit-bar')}>
-        <div className={classNames('credit-bar__text')}>{text}</div>
-        <div className={classNames('credit-bar__body')}>
+      <div className={styles.credit}>
+        <div className={styles.text}>{text}</div>
+        <div className={styles.progressBar}>
           <div
             className={classNames(
-              'credit-bar__body__bar',
-              'credit-bar__body__bar--taken',
               `background-color--${isCategoryFocused ? 19 : colorIndex}`,
               'background-color--dark',
             )}
             style={{ width: `${widths[0]}%` }}
           />
           <div
-            className={classNames(
-              'credit-bar__body__bar',
-              'credit-bar__body__bar--focused',
-              'background-color--19',
-              'background-color--dark',
-            )}
+            className={classNames('background-color--19', 'background-color--dark')}
             style={{ width: `${widths[1]}%` }}
           />
           <div
             className={classNames(
-              'credit-bar__body__bar',
-              'credit-bar__body__bar--planned',
               `background-color--${isCategoryFocused ? 19 : colorIndex}`,
               'background-color--dark',
               'background-color--stripe',
@@ -88,8 +81,6 @@ class CreditBar extends Component {
           />
           <div
             className={classNames(
-              'credit-bar__body__bar',
-              'credit-bar__body__bar--focused',
               'background-color--19',
               'background-color--dark',
               'background-color--stripe',

src/components/CreditBar.module.scss

@@ -0,0 +1,37 @@
+@use '@/sass/abstracts/color' as color;
+@use '@/sass/abstracts/font' as font;
+@use '@/sass/abstracts/variables' as *;
+
+$bar-height: 6px;
+$margin-tb-base: calc(
+  calc(calc(font.$line-height-normal - $bar-height) - font.$line-height-smallest) / 2
+);
+
+.credit {
+  position: relative;
+
+  margin: calc($margin-tb-base - 4px) 0 calc($margin-tb-base + 4px) 0;
+  width: 50%;
+}
+
+.text {
+  text-align: right;
+  font-size: font.$size-smallest;
+  line-height: font.$line-height-smallest;
+
+  & > span {
+    color: color.$highlight;
+  }
+}
+
+.progressBar {
+  display: flex;
+  flex-direction: row;
+
+  overflow: hidden;
+
+  border-radius: calc($bar-height / 2);
+  height: $bar-height;
+
+  background-color: #eee;
+}