${gnb.render()}
+ ${modalNoticeContainer.render(modalProps)}
![main-page__background-img]()
![main-page__round-logo]()
전공이수로드맵
-
+ ![curriculum-image__content]()
`;
};
diff --git a/src/components/curriculum-image/curriculum-image.style.scss b/src/components/curriculum-image/curriculum-image.style.scss
new file mode 100644
index 0000000..1f61bde
--- /dev/null
+++ b/src/components/curriculum-image/curriculum-image.style.scss
@@ -0,0 +1,11 @@
+.curriculum-image {
+ width: 100%;
+
+ &__title {
+ @include title4;
+ }
+ &__content {
+ width: 90%;
+ margin: 0.8rem 5%;
+ }
+}
diff --git a/src/components/curriculum-list/curriculum-list.component.js b/src/components/curriculum-list/curriculum-list.component.js
new file mode 100644
index 0000000..53d78b1
--- /dev/null
+++ b/src/components/curriculum-list/curriculum-list.component.js
@@ -0,0 +1,111 @@
+import Component from '../../core/component';
+import * as utils from '../../helper/utils';
+import { detailCategoryToKorean, categoryNameToKorean } from '../../helper/parse';
+
+export default class CurriculumList extends Component {
+ setDefaultProps() {
+ this.props = {
+ lecture: [],
+ };
+ }
+
+ initState() {
+ this.state = {
+ common: false,
+ };
+ }
+
+ isNote(partName) {
+ const { year } = this.props;
+ let text = '';
+ if (this.state.common) {
+ text = '* 선택 1';
+ }
+ if (partName === '기독교') {
+ year < 20 ? (text = '* 성서와 인간이해(필수)외 선택 1') : (text = '* 선택 2');
+ }
+ if (partName === '영어') {
+ text = '* 교과목(영어, 영어회화)당 1,2 또는 3,4 이수';
+ }
+ return text;
+ }
+
+ getList(props) {
+ return props
+ .map((prop) => {
+ return `
+ 전공이수로드맵
+
+
`;
+ })
+ .join('');
+ }
+
+ getTable() {
+ const { common } = this.state;
+ const { lecture } = this.props;
+ return (
+ lecture &&
+ Object.values(common ? lecture[1] : lecture[0])
+ .map((obj) => {
+ return `
+ ${prop.name}
+ ${
+ prop.credit === 0 ? `0.5` : prop.credit
+ }학점
+
+
`;
+ })
+ .join('')
+ );
+ }
+
+ template() {
+ return (props) => {
+ if (props) this.setProps(props);
+ const { common } = this.state;
+ const barStyle = { right: common ? '1.3rem' : '6.7rem' };
+ return `
+ ${categoryNameToKorean[Object.keys(obj)[0]]}
+
+ ${Object.values(obj)[0]
+ .map((value) => {
+ const partName =
+ value.categoryName in detailCategoryToKorean
+ ? detailCategoryToKorean[value.categoryName]
+ : value.categoryName;
+ return `
+
+
`;
+ })
+ .join('')}
+ ${partName}
+ ${this.getList(value.lectures)}
+ ${this.isNote(partName)}
+
+
+ `;
+ };
+ }
+
+ setEvent() {
+ this.addEvent('click', '.curriculum-list__content__option-major', () => {
+ this.setState({ common: false });
+ });
+ this.addEvent('click', '.curriculum-list__content__option-culture', () => {
+ this.setState({ common: true });
+ });
+ }
+}
diff --git a/src/components/curriculum-list/curriculum-list.style.scss b/src/components/curriculum-list/curriculum-list.style.scss
new file mode 100644
index 0000000..61a243c
--- /dev/null
+++ b/src/components/curriculum-list/curriculum-list.style.scss
@@ -0,0 +1,106 @@
+.curriculum-list {
+ &__title {
+ @include title5;
+ }
+ &__content {
+ margin: 2rem 0;
+ width: 100%;
+ border-top: 5px solid $color-grey-scale3;
+ &__option {
+ position: relative;
+ top: -50px;
+ right: -40px;
+ @include mobile {
+ top: -30px;
+ }
+ float: right;
+ @include subhead4;
+ display: flex;
+ &-major {
+ cursor: pointer;
+ }
+ &-culture {
+ cursor: pointer;
+ margin-left: 1.5rem;
+ }
+ }
+ &__bar {
+ border-radius: 4px;
+ border-top: 7px solid $color-g2;
+ width: 2rem;
+ position: relative;
+ top: -6px;
+ z-index: 1;
+ float: right;
+ }
+ }
+ &__info {
+ &__category {
+ @include mobile {
+ width: 100%;
+ margin: 1.5rem 0rem;
+ font: smaller;
+ }
+ margin: 1.5rem 1rem;
+ &__categoryName {
+ width: fit-content;
+ background-color: $color-secondary;
+ padding: 0.33rem 1rem;
+ color: white;
+ @include title2;
+ margin-bottom: 0.5rem;
+ }
+ &__content {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap-reverse;
+ justify-content: flex-start;
+ &__item {
+ width: 45%;
+ margin: 0.33rem auto;
+ &-detailcatogory {
+ display: flex;
+ justify-content: center;
+ background-color: $color-g1;
+ padding: 0.33rem;
+ color: $color-g2;
+ @include title2;
+ border-radius: 1.875rem;
+ margin-bottom: 0.5rem;
+ }
+ &-list {
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ border-radius: 1rem;
+ height: 8rem;
+ overflow: scroll;
+ @include subhead3;
+ color: $color-title;
+ &__item {
+ display: flex;
+ padding: 0.33rem 0.5rem;
+ justify-content: space-between;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ &-name {
+ width: 75%;
+ }
+ &-credit {
+ color: $color-grey-scale4;
+ }
+ }
+ &__item:last-child {
+ border-bottom: 0px;
+ }
+ }
+ &-notice {
+ @include subhead3;
+ color: $color-grey-scale4;
+ padding: 0.2rem 0.5rem;
+ @include mobile {
+ font: smaller;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/loadmap-more/loadmap-more.component.js b/src/components/curriculum-more/curriculum-more.component.js
similarity index 73%
rename from src/components/loadmap-more/loadmap-more.component.js
rename to src/components/curriculum-more/curriculum-more.component.js
index 103b650..b5d88bc 100644
--- a/src/components/loadmap-more/loadmap-more.component.js
+++ b/src/components/curriculum-more/curriculum-more.component.js
@@ -13,7 +13,7 @@ const sizes = {
};
const [sizeAttr, srcsetAttr] = getResponseiveImage(sizes, `${IMAGE_URL}/images/maru_upperbody.png`);
-export default class LoadmapMore extends Component {
+export default class CurriculumMore extends Component {
template() {
const styleOption = {
background: '#F5F5F5',
@@ -38,20 +38,20 @@ export default class LoadmapMore extends Component {
return (props) => {
if (props) this.setProps(props);
return `
- 과목 정보
+
+
+
+
+
+ 전필/전선/학기교
+ 핵심/공통교양
+ ${this.getTable()}
+
- ![loadmap-more__img]()
-
-
-
학과 관련 정보
- 더 확인하고 싶다면 클릭!
+
+ ![curriculum-more__img]()
+
+
+
- 학과 관련 정보
+ 더 확인하고 싶다면 클릭!
-
+
+
-
+
${guideButton.render(guideButtonProps)}
diff --git a/src/components/curriculum-more/curriculum-more.style.scss b/src/components/curriculum-more/curriculum-more.style.scss
new file mode 100644
index 0000000..d124fce
--- /dev/null
+++ b/src/components/curriculum-more/curriculum-more.style.scss
@@ -0,0 +1,45 @@
+.curriculum-more {
+ width: 100%;
+
+ &__img {
+ position: relative;
+ top: 10px;
+ left: 15%;
+ z-index: 0;
+ width: 15%;
+ min-width: 130px;
+ }
+ &__content {
+ position: relative;
+ padding: 1rem;
+ border-radius: 150px;
+ background-color: $color-g2;
+ display: flex;
+ justify-content: space-around;
+ @include tablet {
+ padding: 1rem 0.5rem;
+ }
+ &-explain {
+ @include mobile {
+ display: none;
+ }
+ @include tablet {
+ font-size: smaller;
+ }
+ padding: 0;
+ color: white;
+ &__title {
+ @include title4;
+ }
+ &__subtitle {
+ @include body2;
+ }
+ }
+ &-btn {
+ display: flex;
+ &-item {
+ margin-left: 0.5rem;
+ }
+ }
+ }
+}
diff --git a/src/components/curriculum-result/curriculum-result.component.js b/src/components/curriculum-result/curriculum-result.component.js
new file mode 100644
index 0000000..d86030f
--- /dev/null
+++ b/src/components/curriculum-result/curriculum-result.component.js
@@ -0,0 +1,29 @@
+import Component from '../../core/component';
+import CurriculumList from '../curriculum-list/curriculum-list.component';
+import CurriculumSort from '../curriculum-sort/curriculum-sort.component';
+import CurriculumImage from '../curriculum-image/curriculum-image.component';
+import CurriculumMore from '../curriculum-more/curriculum-more.component';
+
+export default class LoadmapResult extends Component {
+ template() {
+ const curriculumSort = this.addChild(CurriculumSort);
+ const curriculumList = this.addChild(CurriculumList);
+ const curriculumImage = this.addChild(CurriculumImage);
+ const curriculumMore = this.addChild(CurriculumMore);
+ return (props) => {
+ if (props) this.setProps(props);
+ const { credit, lecture, major, year } = this.props;
+
+ return `
+
+
+ `;
+ };
+ }
+}
diff --git a/src/components/curriculum-result/curriculum-result.style.scss b/src/components/curriculum-result/curriculum-result.style.scss
new file mode 100644
index 0000000..f8e850f
--- /dev/null
+++ b/src/components/curriculum-result/curriculum-result.style.scss
@@ -0,0 +1,8 @@
+.curriculum-result {
+ &-bar {
+ background-color: $color-grey-scale5;
+ height: 1px;
+ width: 100%;
+ margin: 2.5rem 0;
+ }
+}
diff --git a/src/components/loadmap-sort/loadmap-sort.component.js b/src/components/curriculum-sort/curriculum-sort.component.js
similarity index 71%
rename from src/components/loadmap-sort/loadmap-sort.component.js
rename to src/components/curriculum-sort/curriculum-sort.component.js
index cb60840..757d2a7 100644
--- a/src/components/loadmap-sort/loadmap-sort.component.js
+++ b/src/components/curriculum-sort/curriculum-sort.component.js
@@ -2,7 +2,7 @@ import Component from '../../core/component';
import Credit from '../credit/credit.component';
import { categoryNameToKorean } from '../../helper/parse';
-export default class LoadmapSort extends Component {
+export default class CurriculumSort extends Component {
setDefaultProps() {
this.props = {};
}
@@ -14,7 +14,7 @@ export default class LoadmapSort extends Component {
return values
.map((credit, index) => {
return `
- ${curriculumSort.render({ ...credit })}
+
+ ${curriculumList.render({ lecture, year })}
+
+ ${curriculumImage.render({ major })}
+ ${curriculumMore.render({ major })}
+ ${creditComponent.render({
+
${creditComponent.render({
title: categoryNameToKorean[keys[index].slice(0, -6)],
value: credit,
})}
@@ -27,9 +27,9 @@ export default class LoadmapSort extends Component {
return (props) => {
if (props) this.setProps(props);
return `
-
-
분류
-
+
+
diff --git a/src/components/curriculum-sort/curriculum-sort.style.scss b/src/components/curriculum-sort/curriculum-sort.style.scss
new file mode 100644
index 0000000..2b88f11
--- /dev/null
+++ b/src/components/curriculum-sort/curriculum-sort.style.scss
@@ -0,0 +1,13 @@
+.curriculum-sort {
+ &__title {
+ @include title5;
+ }
+ &__list {
+ display: flex;
+ max-width: 26rem;
+ margin: auto;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ }
+}
diff --git a/src/components/loadmap/loadmap.component.js b/src/components/curriculum/curriculum.component.js
similarity index 68%
rename from src/components/loadmap/loadmap.component.js
rename to src/components/curriculum/curriculum.component.js
index 172b993..a8a590b 100644
--- a/src/components/loadmap/loadmap.component.js
+++ b/src/components/curriculum/curriculum.component.js
@@ -6,9 +6,9 @@ import Modal from '../modal/modal.component';
import InputGroup from '../input-group/input-group.component';
import Button from '../button/button.component';
-import LoadmapResult from '../loadmap-result/loadmap-result.component';
+import CurriculumResult from '../curriculum-result/curriculum-result.component';
-import { fetchLoadmapInfos } from '../../async/lecture';
+import { fetchCurriculumInfos } from '../../async/lecture';
import { inputTypes, buttonTypes } from '../../helper/types';
import { departmentList } from '../../helper/data';
@@ -22,7 +22,7 @@ const sizes = {
const [sizesAttr, srcsetAttr] = getResponseiveImage(sizes, `${IMAGE_URL}/images/loadmap.png`);
-export default class Loadmap extends Component {
+export default class Curriculum extends Component {
initState() {
this.state = {
auth: false,
@@ -43,7 +43,7 @@ export default class Loadmap extends Component {
this.setState({
isLoading: true,
});
- const response = await fetchLoadmapInfos(formData);
+ const response = await fetchCurriculumInfos(formData);
this.setState({
isLoading: false,
});
@@ -54,11 +54,11 @@ export default class Loadmap extends Component {
}
showDetail() {
- const loadmapResult = this.addChild(LoadmapResult);
+ const curriculumResult = this.addChild(CurriculumResult);
const { categoryList, lectureList, major, year, auth } = this.state;
return `${
auth
- ? `분류
+
${this.getList()}
${loadmapResult.render({
+ ? `
${curriculumResult.render({
credit: categoryList,
lecture: lectureList,
major,
@@ -85,7 +85,7 @@ export default class Loadmap extends Component {
const modalLoading = this.addChild(ModalLoading);
const yearInputGroup = this.addChild(InputGroup);
const majorInputGroup = this.addChild(InputGroup);
- const loadmapButton = this.addChild(Button);
+ const curriculumButton = this.addChild(Button);
const { isLoading } = this.state;
@@ -101,46 +101,46 @@ export default class Loadmap extends Component {
if (props) this.setProps(props);
return `
-
+
${modalLoadingContainer.render(modalLoadingProps)}
-
- ![loadmap__explain-icon]()
나와 맞는 과목 정보 확인하기
-
학과와 학번을 선택하시면 해당 조건과 일치하는 과목 정보들을 알려드릴게요!
+
+ ![curriculum__explain-icon]()
나와 맞는 과목 정보 확인하기
+
- 학과와 학번을 선택하시면 해당 조건과 일치하는 과목 정보들을 알려드릴게요!
-
-
학과
- ${majorInputGroup.render({
+
+
+
- 학과
+ ${majorInputGroup.render({
value: this.state.major,
type: inputTypes.select,
options: Object.keys(departmentList),
onChange: (newMajor) => {
this.setState({ major: newMajor });
},
- key: 'loadmap-major',
+ key: 'curriculum-major',
styleOption: inputStyle,
})}
-
학번
- ${yearInputGroup.render({
+
-
+
학번
+ ${yearInputGroup.render({
value: this.state.year,
type: inputTypes.select,
options: ['16', '17', '18', '19', '20', '21', '22'],
onChange: (newYear) => {
this.setState({ year: newYear });
},
- key: 'loadmap-year',
+ key: 'curriculum-year',
styleOption: inputStyle,
})}
${loadmapButton.render({
+
${curriculumButton.render({
content: '확인',
type: this.validation() ? buttonTypes.grey : buttonTypes.primary,
size: 'md',
- key: 'loadmap-btn',
+ key: 'curriculum-btn',
disabled: this.validation(),
onClick: this.submitData.bind(this),
})}
diff --git a/src/components/curriculum/curriculum.style.scss b/src/components/curriculum/curriculum.style.scss
new file mode 100644
index 0000000..b3c5eec
--- /dev/null
+++ b/src/components/curriculum/curriculum.style.scss
@@ -0,0 +1,78 @@
+.curriculum {
+ width: 100%;
+ &__explain {
+ &-icon {
+ margin-right: 0.3rem;
+ width: 3%;
+ @include mobile {
+ width: 5%;
+ }
+ }
+ &-title {
+ @include title5;
+ margin: 0.3rem 0;
+ }
+ &-detail {
+ @include subhead5;
+ color: $color-grey-scale4;
+ }
+ }
+ &__select {
+ margin: 1.25rem 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #cfcfcf;
+ border-radius: 0.75rem;
+ display: flex;
+ @include mobile {
+ display: flex;
+ flex-direction: column;
+ }
+ @include tablet {
+ display: flex;
+ flex-direction: column;
+ }
+ &__bundle {
+ display: flex;
+ margin: 1.25rem auto;
+ @include mobile {
+ margin: 0.5rem 0;
+ }
+ @include tablet {
+ margin: 0.5rem 0;
+ }
+ &-label {
+ margin-right: 0.5rem;
+ margin-top: 0.1rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 1.25rem;
+ width: 2.5rem;
+ background-color: $color-g2;
+ border-radius: 100px;
+ @include subhead5;
+ color: #ffffff;
+ }
+ &-input {
+ padding-right: 0rem;
+ }
+ }
+ }
+ &__btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+.box {
+ @include mobile {
+ padding: 1rem;
+ }
+ padding: 2rem;
+ background-color: white;
+ border-radius: 16px;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1), 0px 4px 20px rgba(0, 0, 0, 0.1);
+ margin-bottom: 1rem;
+}
diff --git a/src/components/loadmap-image/loadmap-image.style.scss b/src/components/loadmap-image/loadmap-image.style.scss
deleted file mode 100644
index 2c8a88d..0000000
--- a/src/components/loadmap-image/loadmap-image.style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.loadmap-image{
- width: 100%;
-
- &__title{
- @include title4;
- }
- &__content{
- width: 90%;
- margin: 0.8rem 5%;
- }
-}
\ No newline at end of file
diff --git a/src/components/loadmap-list/loadmap-list.component.js b/src/components/loadmap-list/loadmap-list.component.js
deleted file mode 100644
index 3111ba8..0000000
--- a/src/components/loadmap-list/loadmap-list.component.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import Component from '../../core/component';
-import * as utils from '../../helper/utils';
-import { detailCategoryToKorean, categoryNameToKorean } from '../../helper/parse';
-
-export default class LoadmapList extends Component {
- setDefaultProps() {
- this.props = {
- lecture: [],
- };
- }
-
- initState() {
- this.state = {
- common: false,
- };
- }
-
- isNote(partName) {
- const { year } = this.props;
- let text = '';
- if (this.state.common) {
- text = '* 선택 1';
- }
- if (partName === '기독교') {
- year < 20 ? (text = '* 성서와 인간이해(필수)외 선택 1') : (text = '* 선택 2');
- }
- if (partName === '영어') {
- text = '* 교과목(영어, 영어회화)당 1,2 또는 3,4 이수';
- }
- return text;
- }
-
- getList(props) {
- return props
- .map((prop) => {
- return `
-
-
`;
- })
- .join('');
- }
-
- getTable() {
- const { common } = this.state;
- const { lecture } = this.props;
- return (
- lecture &&
- Object.values(common ? lecture[1] : lecture[0])
- .map((obj) => {
- return `
- ${prop.name}
- ${
- prop.credit === 0 ? `0.5` : prop.credit
- }학점
-
-
`;
- })
- .join('')
- );
- }
-
- template() {
- return (props) => {
- if (props) this.setProps(props);
- const { common } = this.state;
- const barStyle = { right: common ? '1.3rem' : '6.7rem' };
- return `
- ${categoryNameToKorean[Object.keys(obj)[0]]}
-
- ${Object.values(obj)[0]
- .map((value) => {
- const partName =
- value.categoryName in detailCategoryToKorean
- ? detailCategoryToKorean[value.categoryName]
- : value.categoryName;
- return `
-
-
`;
- })
- .join('')}
- ${partName}
- ${this.getList(value.lectures)}
- ${this.isNote(partName)}
-
-
- `;
- };
- }
-
- setEvent() {
- this.addEvent('click', '.loadmap-list__content__option-major', () => {
- this.setState({ common: false });
- });
- this.addEvent('click', '.loadmap-list__content__option-culture', () => {
- this.setState({ common: true });
- });
- }
-}
diff --git a/src/components/loadmap-list/loadmap-list.style.scss b/src/components/loadmap-list/loadmap-list.style.scss
deleted file mode 100644
index 225b6e8..0000000
--- a/src/components/loadmap-list/loadmap-list.style.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-.loadmap-list{
-
- &__title{
- @include title5;
- }
- &__content{
- margin: 2rem 0;
- width: 100%;
- border-top: 5px solid $color-grey-scale3;
- &__option{
- position: relative;
- top: -50px;
- right: -40px;
- @include mobile{top: -30px;}
- float: right;
- @include subhead4;
- display: flex;
- &-major{ cursor: pointer;}
- &-culture{
- cursor: pointer;
- margin-left: 1.5rem;
- }
- }
- &__bar{
- border-radius: 4px;
- border-top: 7px solid $color-g2;
- width: 2rem;
- position: relative;
- top:-6px;
- z-index:1;
- float: right;
- }
- }
- &__info{
- &__category{
- @include mobile {
- width: 100%;
- margin: 1.5rem 0rem;
- font: smaller;
- }
- margin: 1.5rem 1rem;
- &__categoryName{
- width:fit-content;
- background-color: $color-secondary;
- padding: .33rem 1rem;
- color : white;
- @include title2;
- margin-bottom: .5rem;
- }
- &__content{
- display: flex;
- flex-direction: row-reverse;
- flex-wrap: wrap-reverse;
- justify-content: flex-start;
- &__item{
- width: 45%;
- margin: .33rem auto;
- &-detailcatogory{
- display: flex;
- justify-content: center;
- background-color: $color-g1;
- padding: .33rem;
- color : $color-g2;
- @include title2;
- border-radius: 1.875rem;
- margin-bottom: .5rem;
- }
- &-list{
- border : 1px solid rgba(0, 0, 0, 0.3);
- border-radius: 1rem;
- height: 8rem;
- overflow: scroll;
- @include subhead3;
- color: $color-title;
- &__item{
- display: flex;
- padding: .33rem 0.5rem;
- justify-content:space-between;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- &-name{
- width: 75%;
- }
- &-credit{
- color: $color-grey-scale4;
- }
- }
- &__item:last-child{border-bottom:0px}
- }
- &-notice{
- @include subhead3;
- color: $color-grey-scale4;
- padding: 0.2rem 0.5rem;
- @include mobile{
- font: smaller;
- }
-
-
-
- }
- }
- }
- }
-
-}
-}
\ No newline at end of file
diff --git a/src/components/loadmap-more/loadmap-more.style.scss b/src/components/loadmap-more/loadmap-more.style.scss
deleted file mode 100644
index 8bfc47c..0000000
--- a/src/components/loadmap-more/loadmap-more.style.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.loadmap-more{
- width: 100%;
-
- &__img{
- position: relative;
- top: 10px;
- left: 15%;
- z-index: 0;
- width: 15%;
- min-width: 130px;
- }
- &__content{
- position: relative;
- padding: 1rem;
- border-radius: 150px;
- background-color: $color-g2;
- display: flex;
- justify-content: space-around;
- @include tablet{ padding: 1rem 0.5rem;}
- &-explain{
- @include mobile{ display: none; }
- @include tablet{ font-size: smaller; }
- padding: 0;
- color: white;
- &__title{ @include title4; }
- &__subtitle{ @include body2; }
- }
- &-btn{
- display: flex;
- &-item{
- margin-left: 0.5rem;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/components/loadmap-result/loadmap-result.component.js b/src/components/loadmap-result/loadmap-result.component.js
deleted file mode 100644
index 252286d..0000000
--- a/src/components/loadmap-result/loadmap-result.component.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Component from '../../core/component';
-import LoadmapList from '../loadmap-list/loadmap-list.component';
-import LoadmapSort from '../loadmap-sort/loadmap-sort.component';
-import LoadmapImage from '../loadmap-image/loadmap-image.component';
-import LoadmapMore from '../loadmap-more/loadmap-more.component';
-
-export default class LoadmapResult extends Component {
- template() {
- const loadmapSort = this.addChild(LoadmapSort);
- const loadmapList = this.addChild(LoadmapList);
- const loadmapImage = this.addChild(LoadmapImage);
- const loadmapmore = this.addChild(LoadmapMore);
- return (props) => {
- if (props) this.setProps(props);
- const { credit, lecture, major, year } = this.props;
-
- return `
- 과목 정보
-
-
-
-
-
- 전필/전선/학기교
- 핵심/공통교양
- ${this.getTable()}
-
-
- `;
- };
- }
-}
diff --git a/src/components/loadmap-result/loadmap-result.style.scss b/src/components/loadmap-result/loadmap-result.style.scss
deleted file mode 100644
index 527403e..0000000
--- a/src/components/loadmap-result/loadmap-result.style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.loadmap-result{
- &-bar{
- background-color: $color-grey-scale5;
- height: 1px;
- width: 100%;
- margin: 2.5rem 0;
- }
-}
\ No newline at end of file
diff --git a/src/components/loadmap-sort/loadmap-sort.style.scss b/src/components/loadmap-sort/loadmap-sort.style.scss
deleted file mode 100644
index 8dabe29..0000000
--- a/src/components/loadmap-sort/loadmap-sort.style.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.loadmap-sort{
- &__title{
- @include title5;
- }
- &__list{
- display: flex;
- max-width: 26rem;
- margin: auto;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- }
-}
\ No newline at end of file
diff --git a/src/components/loadmap/loadmap.style.scss b/src/components/loadmap/loadmap.style.scss
deleted file mode 100644
index c7817ed..0000000
--- a/src/components/loadmap/loadmap.style.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.loadmap{
- width: 100%;
- &__explain{
- &-icon{
- margin-right: 0.3rem;
- width: 3%;
- @include mobile{width: 5%}
- }
- &-title{
- @include title5;
- margin: 0.3rem 0;
- }
- &-detail{
- @include subhead5;
- color:$color-grey-scale4;
- }
- }
- &__select{
- margin: 1.25rem 0;
- display: flex;
- justify-content: center;
- align-items: center;
- border: 1px solid #CFCFCF;
- border-radius: .75rem;
- display: flex;
- @include mobile{
- display: flex;
- flex-direction: column;
- }
- @include tablet{
- display: flex;
- flex-direction: column;
- }
- &__bundle{
- display: flex;
- margin: 1.25rem auto;
- @include mobile{ margin: 0.5rem 0;}
- @include tablet{ margin: 0.5rem 0;}
- &-label{
- margin-right: 0.5rem;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 1.25rem;
- width: 2.5rem;
- background-color:$color-g2;
- border-radius: 100px;
- @include subhead5;
- color: #FFFFFF;
- }
- }
- }
- &__btn{
- display: flex;
- align-items: center;
- justify-content: center;
- }
-}
-.box{
- @include mobile{
- padding: 1rem;
- }
- padding: 2rem;
- background-color: white;
- border-radius: 16px;
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1), 0px 4px 20px rgba(0, 0, 0, 0.1);
- margin-bottom: 1rem;
-}
\ No newline at end of file
diff --git a/src/components/mobile-category/mobile-category.component.js b/src/components/mobile-category/mobile-category.component.js
index b9051cd..bdc2242 100644
--- a/src/components/mobile-category/mobile-category.component.js
+++ b/src/components/mobile-category/mobile-category.component.js
@@ -17,7 +17,7 @@ export default class MobileCategory extends Component {
template() {
const myInfo = this.addChild(MyInfo);
const tutorialNavigate = this.addChild(MobileNavigate);
- const loadmapNavigate = this.addChild(MobileNavigate);
+ const curriculumNavigate = this.addChild(MobileNavigate);
const mypageNavigate = this.addChild(MobileNavigate);
const resultNavigate = this.addChild(MobileNavigate);
const aboutNavigate = this.addChild(MobileNavigate);
@@ -40,9 +40,9 @@ export default class MobileCategory extends Component {
- ${loadmapSort.render({ ...credit })}
-
- ${loadmapList.render({ lecture, year })}
-
- ${loadmapImage.render({ major })}
- ${loadmapmore.render({ major })}
- ${loadmapNavigate.render({
- title: '로드맵',
- navigate: 'loadmap',
+
${tutorialNavigate.render({
title: '튜토리얼',
@@ -59,9 +59,9 @@ export default class MobileCategory extends Component {
: `
${myInfo.render()}
- ${loadmapNavigate.render({
- title: '로드맵',
- navigate: 'loadmap',
+
${tutorialNavigate.render({
title: '튜토리얼',
diff --git a/src/components/modal-notice/modal-notice.component.js b/src/components/modal-notice/modal-notice.component.js
index 3e39037..f269bc4 100644
--- a/src/components/modal-notice/modal-notice.component.js
+++ b/src/components/modal-notice/modal-notice.component.js
@@ -1,5 +1,16 @@
import Component from '../../core/component';
import modalHeader from '../modal-header/modal-header.component';
+import { getResponseiveImage } from '../../helper/images';
+
+const sizes = {
+ mobile: 240,
+ tablet: 315,
+ sm: 315,
+ md: 405,
+ lg: 540,
+};
+
+const [sizeAttr, srcsetAttr] = getResponseiveImage(sizes, `${IMAGE_URL}/images/notice.png`);
export default class ModalNotice extends Component {
template() {
@@ -10,23 +21,22 @@ export default class ModalNotice extends Component {
return `
-
+
`;
};
}
diff --git a/src/components/modal-notice/modal-notice.style.scss b/src/components/modal-notice/modal-notice.style.scss
index 3caa12e..9bc277d 100644
--- a/src/components/modal-notice/modal-notice.style.scss
+++ b/src/components/modal-notice/modal-notice.style.scss
@@ -1,19 +1,10 @@
-.modal-notice{
- text-align: center;
- &__context{
- max-width: 22.5rem;
- border : 1px solid $color-grey-scale2;
- border-radius: .3333rem;
- margin: 0.8rem;
- text-align: left;
- @include body1;
- padding: 0.5rem;
- & > ol {
- padding-left: 0.5rem;
- }
- }
-
- &__important {
- color: red;
- }
- }
\ No newline at end of file
+.modal-notice {
+ text-align: center;
+
+ &__context {
+ height: 10rem;
+ max-width: 22.5rem;
+ @include body1;
+ padding-top: 0.5rem;
+ }
+}
diff --git a/src/root.scss b/src/root.scss
index 883cd12..591be7b 100644
--- a/src/root.scss
+++ b/src/root.scss
@@ -1,18 +1,18 @@
-$color-primary: #0B4093;
+$color-primary: #0b4093;
$color-secondary: #002968;
-$color-point_blue: #3B61FF;
-$color-point_yellow: #FFF38B;
-$color-title: #2F2F2F;
+$color-point_blue: #3b61ff;
+$color-point_yellow: #fff38b;
+$color-title: #2f2f2f;
$color-grey-scale1: #353535;
-$color-grey-scale2: #CFCFCF;
-$color-grey-scale3: #E5E5E5;
-$color-grey-scale4: #9F9F9F;
-$color-grey-scale5: #F5F5F5;
-$color-g1: #E7EBFF;
-$color-g2: #7590FF;
-$color-g3: #FFC8C8;
-$color-g4: #FF6D6D;
-$color-error: #FF1111;
+$color-grey-scale2: #cfcfcf;
+$color-grey-scale3: #e5e5e5;
+$color-grey-scale4: #9f9f9f;
+$color-grey-scale5: #f5f5f5;
+$color-g1: #e7ebff;
+$color-g2: #7590ff;
+$color-g3: #ffc8c8;
+$color-g4: #ff6d6d;
+$color-error: #ff1111;
@import './normalize.scss';
@import './responsive.scss';
@@ -30,7 +30,7 @@ $color-error: #FF1111;
@import './components/modal/modal.style.scss';
@import './components/category-card/category-card.style.scss';
@import './routers/main-page/main-page.style.scss';
-@import './routers/loadmap-page/loadmap-page.style.scss';
+@import './routers/curriculum-page/curriculum-page.style.scss';
@import './routers/tutorial-page/tutorial-page.style.scss';
@import './components/pie-chart/pie-chart.style.scss';
@import './components/modal-result-header/modal-result-header.style.scss';
@@ -77,15 +77,15 @@ $color-error: #FF1111;
@import './components/modal-success-content/modal-success-content.style.scss';
@import './components/info/info.style.scss';
@import './components/modal-notice/modal-notice.style.scss';
-@import './components/loadmap/loadmap.style.scss';
+@import './components/curriculum/curriculum.style.scss';
@import './components/credit/credit.style.scss';
-@import './components/loadmap-result/loadmap-result.style.scss';
-@import './components/loadmap-sort/loadmap-sort.style.scss';
-@import './components/loadmap-list/loadmap-list.style.scss';
-@import './components/loadmap-image/loadmap-image.style.scss';
-@import './components/loadmap-more/loadmap-more.style.scss';
+@import './components/curriculum-result/curriculum-result.style.scss';
+@import './components/curriculum-sort/curriculum-sort.style.scss';
+@import './components/curriculum-list/curriculum-list.style.scss';
+@import './components/curriculum-image/curriculum-image.style.scss';
+@import './components/curriculum-more/curriculum-more.style.scss';
@import './components/modal-secession/modal-secession.style.scss';
@import './components/find-id-form/find-id-form.style.scss';
@import './components/find-pw-form/find-pw-form.style.scss';
@import './routers/find-id-page/find-id-page.style.scss';
-@import './routers/find-pw-page/find-pw-page.style.scss';
\ No newline at end of file
+@import './routers/find-pw-page/find-pw-page.style.scss';
diff --git a/src/routers/curriculum-page/curriculum-page.component.js b/src/routers/curriculum-page/curriculum-page.component.js
new file mode 100644
index 0000000..22c2c24
--- /dev/null
+++ b/src/routers/curriculum-page/curriculum-page.component.js
@@ -0,0 +1,26 @@
+import Component from '../../core/component';
+import Header from '../../components/header/header.component';
+import Curriculum from '../../components/curriculum/curriculum.component';
+
+export default class CurriculumPage extends Component {
+ template() {
+ const header = this.addChild(Header);
+ const curriculum = this.addChild(Curriculum);
+ return (props) => {
+ if (props) this.setProps(props);
+
+ return `
+ ${header.render({ title: '정식서비스 출시 안내' })}
+ ${header.render({ title: '2023-2학기 학사정보 업데이트 안내' })}
- ![notice-img]()
+
졸업을 부탁해 서비스의 정식버전이 출시되었습니다.
-베타버전 일주일간 총 1200명의 사용자, 12개의 버그리포트가 접수되었습니다. -학우분들의 많은 관심에 감사드리고 성원에 입어 졸업을 부탁해가 정식버전 출시로 강하게 돌아왔습니다.
-앞으로도 더욱 발전하는 졸부가 되겠습니다. 감사합니다.
-📋 업데이트 사항
--
-
- 졸업사정결과 정확도 개선 -
- 기이수 과목 조회 기능 추가 -
- 사용자 ux/ui 개선 -
- 랜더링 퍼포먼스 개선 -
- 졸업을 부탁해 베타버전 버그리포트에 참여해주신 학우분들에게 모두 감사드리며 당첨자는 개별적으로 연락드릴 예정입니다.
-- 문의는 서비스 우측 하단 채널톡을 이용해 주시면 답변드리도록 하겠습니다.
+
+ 졸업을 부탁해는 학우님들에게 더 정확한 서비스를 제공해드리기 위해
+ 9월 1일 까지 2023-2학기 학사정보를 업데이트 중에 있습니다. + 이에 따라 서비스 결과가 부정확할 수 있음을 안내드립니다. +
+ 9월 1일 까지 2023-2학기 학사정보를 업데이트 중에 있습니다. + 이에 따라 서비스 결과가 부정확할 수 있음을 안내드립니다. +
+
+ `;
+ };
+ }
+}
diff --git a/src/routers/curriculum-page/curriculum-page.style.scss b/src/routers/curriculum-page/curriculum-page.style.scss
new file mode 100644
index 0000000..6be2a69
--- /dev/null
+++ b/src/routers/curriculum-page/curriculum-page.style.scss
@@ -0,0 +1,23 @@
+.curriculum-page {
+ &__header {
+ background-color: $color-primary;
+ height: 7.1rem;
+ position: relative;
+ }
+
+ &__body {
+ display: flex;
+ justify-content: center;
+ &__content {
+ width: 80%;
+ @include mobile {
+ width: 90%;
+ }
+ top: -3rem;
+ z-index: 10;
+ display: flex;
+ justify-content: center;
+ position: relative;
+ }
+ }
+}
diff --git a/src/routers/index.js b/src/routers/index.js
index 0ba8585..b80e909 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -5,7 +5,7 @@ import SignInPage from './sign-in-page/sign-in-page.component';
import SignUpPage from './sign-up-page/sign-up-page.component';
import FileUploadPage from './file-upload-page/file-upload-page.component';
import MypagePage from './mypage-page/mypage-page.component';
-import LoadmapPage from './loadmap-page/loadmap-page.component';
+import CurriculumPage from './curriculum-page/curriculum-page.component';
import FindIdPage from './find-id-page/find-id-page.component';
import FindPwPage from './find-pw-page/find-pw-page.component';
import App from '../app';
@@ -26,8 +26,8 @@ export const routerObjects = [
authentication: userRule.guest,
},
{
- path: 'loadmap',
- element: LoadmapPage,
+ path: 'curriculum',
+ element: CurriculumPage,
authentication: userRule.guest,
},
{
diff --git a/src/routers/loadmap-page/loadmap-page.component.js b/src/routers/loadmap-page/loadmap-page.component.js
deleted file mode 100644
index 4b19bfd..0000000
--- a/src/routers/loadmap-page/loadmap-page.component.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import Component from '../../core/component';
-import Header from '../../components/header/header.component';
-import Loadmap from '../../components/loadmap/loadmap.component';
-
-export default class LoadmapPage extends Component {
- template() {
- const header = this.addChild(Header);
- const loadmap = this.addChild(Loadmap);
- return (props) => {
- if (props) this.setProps(props);
-
- return `
-
+ ${header.render()}
+
+
+
+
+ ${curriculum.render()}
+
+
-
- `;
- };
- }
-}
diff --git a/src/routers/loadmap-page/loadmap-page.style.scss b/src/routers/loadmap-page/loadmap-page.style.scss
deleted file mode 100644
index 71824d3..0000000
--- a/src/routers/loadmap-page/loadmap-page.style.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.loadmap-page{
- &__header {
- background-color: $color-primary;
- height: 7.1rem;
- position: relative;
- }
-
- &__body{
- display: flex;
- justify-content: center;
- &__content{
- width: 80%;
- @include mobile{
- width: 90%;
- }
- top: -3rem;
- z-index: 10;
- display: flex;
- justify-content: center;
- position: relative;
- }
- }
-}
\ No newline at end of file
diff --git a/src/routers/main-page/main-page.component.js b/src/routers/main-page/main-page.component.js
index 2ee52e2..cd75844 100644
--- a/src/routers/main-page/main-page.component.js
+++ b/src/routers/main-page/main-page.component.js
@@ -1,5 +1,6 @@
import Component from '../../core/component';
-
+import Modal from '../../components/modal/modal.component';
+import ModalNotice from '../../components/modal-notice/modal-notice.component';
import Maintitle from '../../components/main-title/main-title.component';
import MainBtn from '../../components/button/button.component';
import GNB from '../../components/GNB/GNB.component';
@@ -22,24 +23,49 @@ const roundSizes = {
md: 145,
lg: 192,
};
+
const [sizeAttr, srcsetAttr] = getResponseiveImage(sizes, `${IMAGE_URL}/images/main-background.png`);
const [roundSizeAttr, roundSrcsetAttr] = getResponseiveImage(roundSizes, `${IMAGE_URL}/images/round-logo.svg`);
export default class MainPage extends Component {
+ initState() {
+ this.state = {
+ isModalShow: true,
+ };
+ }
+
+ toggleModal() {
+ this.setState({
+ isModalShow: !this.state.isModalShow,
+ });
+ }
+
template() {
const gnb = this.addChild(GNB);
const maintitle = this.addChild(Maintitle);
const startBtn = this.addChild(MainBtn);
+ const modalNoticeContainer = this.addChild(Modal);
+ const modalNoticeContent = this.addChild(ModalNotice);
return (props) => {
if (props) this.setProps(props);
+ const modalProps = {
+ isModalShow: this.state.isModalShow,
+ toggleModal: this.toggleModal.bind(this),
+ contentComponent: modalNoticeContent,
+ width: 1000,
+ padding: 55,
+ key: 'update',
+ };
+
return `
- ${header.render()}
-
-
-
-
- ${loadmap.render()}
-
-