refactor: split PlannerPage styles

sparcs-kaist · May 12, 2024 · 5afcc20 · 5afcc20
1 parent 33165d4
commit 5afcc20
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 96 deletions.
diff --git a/src/pages/PlannerPage.jsx b/src/pages/PlannerPage.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { useLocation } from 'react-router';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -24,6 +24,8 @@ import SummarySubSection from '../components/sections/planner/plannerandinfos/Su
 import TrackSettingsSection from '../components/sections/planner/TrackSettingsSection';
 import BetaPopup from '../components/BetaPopup';
 
+import styles from './PlannerPage.module.scss';
+
 class PlannerPage extends Component {
   componentWillUnmount() {
     const {
@@ -43,36 +45,35 @@ class PlannerPage extends Component {
     const { isTrackSettingsSectionOpen, selectedPlanner } = this.props;
 
     return (
-      <>
-        <section className={classNames('content', 'content--no-scroll')}>
-          <div className={classNames('page-grid', 'page-grid--planner')}>
-            <PlannerTabs />
-            <CourseListTabs />
-            <div className={classNames('section', 'section--planner-and-infos')}>
-              <PlannerSubSection />
-              <Divider
-                orientation={{
-                  desktop: Divider.Orientation.VERTICAL,
-                  mobile: Divider.Orientation.HORIZONTAL,
-                }}
-                isVisible={{
-                  desktop: true,
-                  mobile: false,
-                }}
-                gridArea="divider-main"
-              />
-              <TrackSubSection />
-              <Divider
-                orientation={Divider.Orientation.HORIZONTAL}
-                isVisible={{
-                  desktop: true,
-                  mobile: false,
-                }}
-                gridArea="divider-sub-1"
-              />
-              <SummarySubSection />
-              {/* TODO: Implement ShareSubSection */}
-              {/* <Divider
+      <section className={classNames('content', 'content--no-scroll')}>
+        <div className={styles.grid}>
+          <PlannerTabs />
+          <CourseListTabs />
+          <div className={classNames('section', styles.planner)}>
+            <PlannerSubSection />
+            <Divider
+              orientation={{
+                desktop: Divider.Orientation.VERTICAL,
+                mobile: Divider.Orientation.HORIZONTAL,
+              }}
+              isVisible={{
+                desktop: true,
+                mobile: false,
+              }}
+              gridArea="divider-main"
+            />
+            <TrackSubSection />
+            <Divider
+              orientation={Divider.Orientation.HORIZONTAL}
+              isVisible={{
+                desktop: true,
+                mobile: false,
+              }}
+              gridArea="divider-sub-1"
+            />
+            <SummarySubSection />
+            {/* TODO: Implement ShareSubSection */}
+            {/* <Divider
                 orientation={Divider.Orientation.HORIZONTAL}
                 isVisible={{
                   desktop: true,
@@ -81,21 +82,20 @@ class PlannerPage extends Component {
                 gridArea="divider-sub-2"
               />
               <ShareSubSection /> */}
-            </div>
-            <CourseListSection />
-            <CourseManageSection />
-            {isTrackSettingsSectionOpen && selectedPlanner && <TrackSettingsSection />}
           </div>
-          <BetaPopup
-            title="졸업플래너 베타 서비스 안내"
-            content={[
-              '졸업플레너 서비스는 현재 베타 상태입니다.',
-              '일부 학점 계산이 정확하지 않거나 기능 사용이 불편할 수 있으며, 이는 정식 출시 때 개선될 예정입니다.',
-            ]}
-            link="https://sparcs.page.link/otl-feedback"
-          />
-        </section>
-      </>
+          <CourseListSection />
+          <CourseManageSection />
+          {isTrackSettingsSectionOpen && selectedPlanner && <TrackSettingsSection />}
+        </div>
+        <BetaPopup
+          title="졸업플래너 베타 서비스 안내"
+          content={[
+            '졸업플레너 서비스는 현재 베타 상태입니다.',
+            '일부 학점 계산이 정확하지 않거나 기능 사용이 불편할 수 있으며, 이는 정식 출시 때 개선될 예정입니다.',
+          ]}
+          link="https://sparcs.page.link/otl-feedback"
+        />
+      </section>
     );
   }
 }

diff --git a/src/pages/PlannerPage.module.scss b/src/pages/PlannerPage.module.scss
@@ -0,0 +1,61 @@
+@use '@/sass/abstracts/mixins' as *;
+@use '@/sass/abstracts/variables' as *;
+
+.grid {
+  display: grid;
+
+  height: 100%;
+  padding: 0 $section-margin-lr $section-margin-bottom;
+
+  @include mixin-media-landscape {
+    grid-template-columns:
+      $tabs-width-vertical
+      $section-width-desktop-1v3-left
+      $section-margin-lr
+      1fr;
+    grid-template-rows:
+      $tabs-height-horizontal
+      2fr
+      $section-margin-bottom
+      0.9fr
+      80px;
+    grid-template-areas:
+      '.                  planner-tabs        planner-tabs        planner-tabs'
+      '.                  planner-and-infos   planner-and-infos   planner-and-infos'
+      '.                  .                   .                   .'
+      'course-list-tabs   course-list         .                   course-manage'
+      'course-list-tabs   course-list         .                   course-manage';
+
+    margin-left: -$tabs-width-vertical;
+  }
+  @include mixin-media-portrait {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'planner-and-infos';
+  }
+}
+
+.planner {
+  display: grid;
+  grid-area: planner-and-infos;
+
+  @include mixin-media-landscape {
+    grid-template-columns: 1fr min-content calc(
+        #{$section-width-desktop-1v3-left} - (#{$section-padding} * 2)
+      );
+    grid-template-rows: min-content min-content 1fr min-content min-content;
+    grid-template-areas:
+      'planner  divider-main    track'
+      'planner  divider-main    divider-sub-1'
+      'planner  divider-main    planner-summary'
+      'planner  divider-main    divider-sub-2'
+      'planner  divider-main    planner-share';
+
+    border-top-left-radius: 0;
+  }
+  @include mixin-media-portrait {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'planner';
+  }
+}
diff --git a/src/sass/App.module.scss b/src/sass/App.module.scss
@@ -253,34 +253,6 @@ a {
     }
   }
 
-  &--planner {
-    @include mixin-media-landscape {
-      margin-left: -$tabs-width-vertical;
-      grid-template-columns:
-        $tabs-width-vertical
-        $section-width-desktop-1v3-left
-        $section-margin-lr
-        1fr;
-      grid-template-rows:
-        $tabs-height-horizontal
-        2fr
-        $section-margin-bottom
-        0.9fr
-        80px;
-      grid-template-areas:
-        '.                  planner-tabs        planner-tabs        planner-tabs'
-        '.                  planner-and-infos   planner-and-infos   planner-and-infos'
-        '.                  .                   .                   .'
-        'course-list-tabs   course-list         .                   course-manage'
-        'course-list-tabs   course-list         .                   course-manage';
-    }
-    @include mixin-media-portrait {
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr;
-      grid-template-areas: 'planner-and-infos';
-    }
-  }
-
   &--syllabus {
     @include mixin-media-landscape {
       width: calc(900px + #{$section-padding} * 2);
@@ -701,29 +673,6 @@ a {
     }
   }
 
-  &--planner-and-infos {
-    grid-area: planner-and-infos;
-    display: grid;
-    @include mixin-media-landscape {
-      border-top-left-radius: 0;
-      grid-template-columns: 1fr min-content calc(
-          #{$section-width-desktop-1v3-left} - (#{$section-padding} * 2)
-        );
-      grid-template-rows: min-content min-content 1fr min-content min-content;
-      grid-template-areas:
-        'planner  divider-main    track'
-        'planner  divider-main    divider-sub-1'
-        'planner  divider-main    planner-summary'
-        'planner  divider-main    divider-sub-2'
-        'planner  divider-main    planner-share';
-    }
-    @include mixin-media-portrait {
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr;
-      grid-template-areas: 'planner';
-    }
-  }
-
   &--course-manage {
     @include mixin-media-landscape {
       grid-area: course-manage;