Skip to content

Commit 5afcc20

Browse files
injoonHinjoonH
committed
refactor: split PlannerPage styles
1 parent 33165d4 commit 5afcc20

File tree

3 files changed

+106
-96
lines changed

3 files changed

+106
-96
lines changed

‎src/pages/PlannerPage.jsx‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react';
1+
import { Component } from 'react';
22
import { useLocation } from 'react-router';
33
import { connect } from 'react-redux';
44
import PropTypes from 'prop-types';
@@ -24,6 +24,8 @@ import SummarySubSection from '../components/sections/planner/plannerandinfos/Su
2424
import TrackSettingsSection from '../components/sections/planner/TrackSettingsSection';
2525
import BetaPopup from '../components/BetaPopup';
2626

27+
import styles from './PlannerPage.module.scss';
28+
2729
class PlannerPage extends Component {
2830
componentWillUnmount() {
2931
const {
@@ -43,36 +45,35 @@ class PlannerPage extends Component {
4345
const { isTrackSettingsSectionOpen, selectedPlanner } = this.props;
4446

4547
return (
46-
<>
47-
<section className={classNames('content', 'content--no-scroll')}>
48-
<div className={classNames('page-grid', 'page-grid--planner')}>
49-
<PlannerTabs />
50-
<CourseListTabs />
51-
<div className={classNames('section', 'section--planner-and-infos')}>
52-
<PlannerSubSection />
53-
<Divider
54-
orientation={{
55-
desktop: Divider.Orientation.VERTICAL,
56-
mobile: Divider.Orientation.HORIZONTAL,
57-
}}
58-
isVisible={{
59-
desktop: true,
60-
mobile: false,
61-
}}
62-
gridArea="divider-main"
63-
/>
64-
<TrackSubSection />
65-
<Divider
66-
orientation={Divider.Orientation.HORIZONTAL}
67-
isVisible={{
68-
desktop: true,
69-
mobile: false,
70-
}}
71-
gridArea="divider-sub-1"
72-
/>
73-
<SummarySubSection />
74-
{/* TODO: Implement ShareSubSection */}
75-
{/* <Divider
48+
<section className={classNames('content', 'content--no-scroll')}>
49+
<div className={styles.grid}>
50+
<PlannerTabs />
51+
<CourseListTabs />
52+
<div className={classNames('section', styles.planner)}>
53+
<PlannerSubSection />
54+
<Divider
55+
orientation={{
56+
desktop: Divider.Orientation.VERTICAL,
57+
mobile: Divider.Orientation.HORIZONTAL,
58+
}}
59+
isVisible={{
60+
desktop: true,
61+
mobile: false,
62+
}}
63+
gridArea="divider-main"
64+
/>
65+
<TrackSubSection />
66+
<Divider
67+
orientation={Divider.Orientation.HORIZONTAL}
68+
isVisible={{
69+
desktop: true,
70+
mobile: false,
71+
}}
72+
gridArea="divider-sub-1"
73+
/>
74+
<SummarySubSection />
75+
{/* TODO: Implement ShareSubSection */}
76+
{/* <Divider
7677
orientation={Divider.Orientation.HORIZONTAL}
7778
isVisible={{
7879
desktop: true,
@@ -81,21 +82,20 @@ class PlannerPage extends Component {
8182
gridArea="divider-sub-2"
8283
/>
8384
<ShareSubSection /> */}
84-
</div>
85-
<CourseListSection />
86-
<CourseManageSection />
87-
{isTrackSettingsSectionOpen && selectedPlanner && <TrackSettingsSection />}
8885
</div>
89-
<BetaPopup
90-
title="졸업플래너 베타 서비스 안내"
91-
content={[
92-
'졸업플레너 서비스는 현재 베타 상태입니다.',
93-
'일부 학점 계산이 정확하지 않거나 기능 사용이 불편할 수 있으며, 이는 정식 출시 때 개선될 예정입니다.',
94-
]}
95-
link="https://sparcs.page.link/otl-feedback"
96-
/>
97-
</section>
98-
</>
86+
<CourseListSection />
87+
<CourseManageSection />
88+
{isTrackSettingsSectionOpen && selectedPlanner && <TrackSettingsSection />}
89+
</div>
90+
<BetaPopup
91+
title="졸업플래너 베타 서비스 안내"
92+
content={[
93+
'졸업플레너 서비스는 현재 베타 상태입니다.',
94+
'일부 학점 계산이 정확하지 않거나 기능 사용이 불편할 수 있으며, 이는 정식 출시 때 개선될 예정입니다.',
95+
]}
96+
link="https://sparcs.page.link/otl-feedback"
97+
/>
98+
</section>
9999
);
100100
}
101101
}

‎src/pages/PlannerPage.module.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@use '@/sass/abstracts/mixins' as *;
2+
@use '@/sass/abstracts/variables' as *;
3+
4+
.grid {
5+
display: grid;
6+
7+
height: 100%;
8+
padding: 0 $section-margin-lr $section-margin-bottom;
9+
10+
@include mixin-media-landscape {
11+
grid-template-columns:
12+
$tabs-width-vertical
13+
$section-width-desktop-1v3-left
14+
$section-margin-lr
15+
1fr;
16+
grid-template-rows:
17+
$tabs-height-horizontal
18+
2fr
19+
$section-margin-bottom
20+
0.9fr
21+
80px;
22+
grid-template-areas:
23+
'. planner-tabs planner-tabs planner-tabs'
24+
'. planner-and-infos planner-and-infos planner-and-infos'
25+
'. . . .'
26+
'course-list-tabs course-list . course-manage'
27+
'course-list-tabs course-list . course-manage';
28+
29+
margin-left: -$tabs-width-vertical;
30+
}
31+
@include mixin-media-portrait {
32+
grid-template-columns: 1fr;
33+
grid-template-rows: 1fr;
34+
grid-template-areas: 'planner-and-infos';
35+
}
36+
}
37+
38+
.planner {
39+
display: grid;
40+
grid-area: planner-and-infos;
41+
42+
@include mixin-media-landscape {
43+
grid-template-columns: 1fr min-content calc(
44+
#{$section-width-desktop-1v3-left} - (#{$section-padding} * 2)
45+
);
46+
grid-template-rows: min-content min-content 1fr min-content min-content;
47+
grid-template-areas:
48+
'planner divider-main track'
49+
'planner divider-main divider-sub-1'
50+
'planner divider-main planner-summary'
51+
'planner divider-main divider-sub-2'
52+
'planner divider-main planner-share';
53+
54+
border-top-left-radius: 0;
55+
}
56+
@include mixin-media-portrait {
57+
grid-template-columns: 1fr;
58+
grid-template-rows: 1fr;
59+
grid-template-areas: 'planner';
60+
}
61+
}

‎src/sass/App.module.scss‎

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -253,34 +253,6 @@ a {
253253
}
254254
}
255255

256-
&--planner {
257-
@include mixin-media-landscape {
258-
margin-left: -$tabs-width-vertical;
259-
grid-template-columns:
260-
$tabs-width-vertical
261-
$section-width-desktop-1v3-left
262-
$section-margin-lr
263-
1fr;
264-
grid-template-rows:
265-
$tabs-height-horizontal
266-
2fr
267-
$section-margin-bottom
268-
0.9fr
269-
80px;
270-
grid-template-areas:
271-
'. planner-tabs planner-tabs planner-tabs'
272-
'. planner-and-infos planner-and-infos planner-and-infos'
273-
'. . . .'
274-
'course-list-tabs course-list . course-manage'
275-
'course-list-tabs course-list . course-manage';
276-
}
277-
@include mixin-media-portrait {
278-
grid-template-columns: 1fr;
279-
grid-template-rows: 1fr;
280-
grid-template-areas: 'planner-and-infos';
281-
}
282-
}
283-
284256
&--syllabus {
285257
@include mixin-media-landscape {
286258
width: calc(900px + #{$section-padding} * 2);
@@ -701,29 +673,6 @@ a {
701673
}
702674
}
703675

704-
&--planner-and-infos {
705-
grid-area: planner-and-infos;
706-
display: grid;
707-
@include mixin-media-landscape {
708-
border-top-left-radius: 0;
709-
grid-template-columns: 1fr min-content calc(
710-
#{$section-width-desktop-1v3-left} - (#{$section-padding} * 2)
711-
);
712-
grid-template-rows: min-content min-content 1fr min-content min-content;
713-
grid-template-areas:
714-
'planner divider-main track'
715-
'planner divider-main divider-sub-1'
716-
'planner divider-main planner-summary'
717-
'planner divider-main divider-sub-2'
718-
'planner divider-main planner-share';
719-
}
720-
@include mixin-media-portrait {
721-
grid-template-columns: 1fr;
722-
grid-template-rows: 1fr;
723-
grid-template-areas: 'planner';
724-
}
725-
}
726-
727676
&--course-manage {
728677
@include mixin-media-landscape {
729678
grid-area: course-manage;

0 commit comments

Comments
 (0)