Myongji-Graduate · yougyung · Aug 10, 2023 · Aug 10, 2023
diff --git a/server/router/api.js b/server/router/api.js
@@ -205,7 +205,7 @@ router.get('/takenLectures', async function (req, res) {
 		apiErrorHandler(res, error);
 	}
 });
-router.get('/loadmapInfos', async function (req, res) {
+router.get('/curriculumInfos', async function (req, res) {
 	try {
 		const lectureResult = await axios.get(`${ROOT_URL}/bachelor-info/lectures`, {
 			headers: {

diff --git a/src/async/lecture.js b/src/async/lecture.js
@@ -46,10 +46,10 @@ export async function fetchGetTakenLectures() {
 	return result;
 }
 
-export async function fetchLoadmapInfos(query) {
+export async function fetchCurriculumInfos(query) {
 	const queryString = objectToQueryString(query);
 
-	const response = await fetch(`/api/loadmapInfos?${queryString}`, {
+	const response = await fetch(`/api/curriculumInfos?${queryString}`, {
 		headers: {
 			'Content-Type': 'application/json',
 		},

diff --git a/src/components/GNB/GNB.component.js b/src/components/GNB/GNB.component.js
@@ -60,7 +60,7 @@ export default class GNB extends Component {
 				  <div class="GNB__tab-navigator__general-item gnb-result">결과페이지</div>`
 						: `<div class="GNB__tab-navigator__general-item gnb-signin">로그인</div>`
 				}
-				 <div class="GNB__tab-navigator__general-item gnb-loadmap">로드맵</div>
+				 <div class="GNB__tab-navigator__general-item gnb-curriculum">커리큘럼</div>
 				 <div class="GNB__tab-navigator__general-item gnb-tutorial">튜토리얼</div>
 				 <div class="GNB__tab-navigator__general-item gnb-about">팀소개</div>
 			  </div>
@@ -94,8 +94,8 @@ export default class GNB extends Component {
 		this.addEvent('click', '.gnb-tutorial', () => {
 			router.navigate('/tutorial');
 		});
-		this.addEvent('click', '.gnb-loadmap', () => {
-			router.navigate('/loadmap');
+		this.addEvent('click', '.gnb-curriculum', () => {
+			router.navigate('/curriculum');
 		});
 		this.addEvent('click', '.gnb-about', () => {
 			window.location.href = 'https://jade-sofa-1be.notion.site/7ebf97e49afe403eab8394eaec8e32a1';

diff --git a/.../loadmap-image/loadmap-image.component.js → ...culum-image/curriculum-image.component.js b/.../loadmap-image/loadmap-image.component.js → ...culum-image/curriculum-image.component.js
@@ -10,7 +10,7 @@ const sizes = {
 	lg: 1300,
 };
 
-export default class LoadmapImage extends Component {
+export default class CurriculumImage extends Component {
 	template() {
 		return (props) => {
 			if (props) this.setProps(props);
@@ -27,9 +27,9 @@ export default class LoadmapImage extends Component {
 			const [sizeAttr, srcsetAttr] = getResponseiveImage(sizes, `${IMAGE_URL}/images/department/${majorImage}.png`);
 
 			return `
-        <div class="loadmap-image" > 
-			<div class="loadmap-image__title">전공이수로드맵</div>
-			<img sizes="${sizeAttr}" srcset="${srcsetAttr}" class="loadmap-image__content" alt="loadmap-image__content"/>
+        <div class="curriculum-image" > 
+			<div class="curriculum-image__title">전공이수로드맵</div>
+			<img sizes="${sizeAttr}" srcset="${srcsetAttr}" class="curriculum-image__content" alt="curriculum-image__content"/>
         </div>
       `;
 		};

diff --git a/src/components/curriculum-image/curriculum-image.style.scss 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
@@ -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 `
+				<div class="curriculum-list__info__category__content__item-list__item">
+					<div class="curriculum-list__info__category__content__item-list__item-name">${prop.name}</div>
+					<div class="curriculum-list__info__category__content__item-list__item-credit">${
+						prop.credit === 0 ? `0.5` : prop.credit
+					}학점</div>
+				</div>`;
+			})
+			.join('');
+	}
+
+	getTable() {
+		const { common } = this.state;
+		const { lecture } = this.props;
+		return (
+			lecture &&
+			Object.values(common ? lecture[1] : lecture[0])
+				.map((obj) => {
+					return `
+		<div class="curriculum-list__info__category">
+			<div class="curriculum-list__info__category__categoryName">${categoryNameToKorean[Object.keys(obj)[0]]}</div>
+			<div class="curriculum-list__info__category__content">
+			${Object.values(obj)[0]
+				.map((value) => {
+					const partName =
+						value.categoryName in detailCategoryToKorean
+							? detailCategoryToKorean[value.categoryName]
+							: value.categoryName;
+					return `<div class="curriculum-list__info__category__content__item">
+							<div class="curriculum-list__info__category__content__item-detailcatogory">${partName}</div>
+							<div class="curriculum-list__info__category__content__item-list">${this.getList(value.lectures)}</div>
+							<div class="curriculum-list__info__category__content__item-notice">${this.isNote(partName)}</div>
+							</div>`;
+				})
+				.join('')}
+			</div>
+		</div>`;
+				})
+				.join('')
+		);
+	}
+
+	template() {
+		return (props) => {
+			if (props) this.setProps(props);
+			const { common } = this.state;
+			const barStyle = { right: common ? '1.3rem' : '6.7rem' };
+			return `
+        <div class="curriculum-list">        
+		  <div class="curriculum-list__title">과목 정보</div>
+		  <div class="curriculum-list__content">
+			<div class="curriculum-list__content__bar" style=${utils.getInlineStyle(barStyle)}></div>
+			<div class="curriculum-list__content__option"> 
+				<div class="curriculum-list__content__option-major" style="color:${
+					common ? '#9F9F9F' : '#7590FF'
+				};">전필/전선/학기교</div>
+				<div class="curriculum-list__content__option-culture" style="color:${
+					common ? '#7590FF' : '#9F9F9F'
+				};">핵심/공통교양</div>
+			</div>
+		  </div>
+		  <div class="curriculum-list__info"> ${this.getTable()}  </div>
+        </div>
+      `;
+		};
+	}
+
+	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
@@ -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/...ts/loadmap-more/loadmap-more.component.js → ...riculum-more/curriculum-more.component.js b/...ts/loadmap-more/loadmap-more.component.js → ...riculum-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 `
-	    <div class="loadmap-more">
-			<img sizes="${sizeAttr}" srcset="${srcsetAttr}" class="loadmap-more__img" alt="loadmap-more__img" />
-			<div class="loadmap-more__content">
-				<div class="loadmap-more__content-explain">
-				<div class="loadmap-more__content-explain__title">학과 관련 정보</div>
-				<div class="loadmap-more__content-explain__subtitle">더 확인하고 싶다면 클릭!</div>
+	    <div class="curriculum-more">
+			<img sizes="${sizeAttr}" srcset="${srcsetAttr}" class="curriculum-more__img" alt="curriculum-more__img" />
+			<div class="curriculum-more__content">
+				<div class="curriculum-more__content-explain">
+				<div class="curriculum-more__content-explain__title">학과 관련 정보</div>
+				<div class="curriculum-more__content-explain__subtitle">더 확인하고 싶다면 클릭!</div>
 				</div>
-				<div class="loadmap-more__content-btn">
-					<div class="loadmap-more__content-btn-item">
+				<div class="curriculum-more__content-btn">
+					<div class="curriculum-more__content-btn-item">
 							<a target='_blank' href="https://www.mju.ac.kr/mjukr/${departmentList[this.props.major]}/subview.do">
 							${majorPageButton.render(majorPageButtonProps)}	
 							</a>
 					</div>
-					<div class="loadmap-more__content-btn-item">
+					<div class="curriculum-more__content-btn-item">
 							<a target='_blank' href="https://www.mju.ac.kr/mjukr/257/subview.do?enc=Zm5jdDF8QEB8JTJGYmJzJTJGbWp1a3IlMkYxNDMlMkYxOTU4MTElMkZhcnRjbFZpZXcuZG8lM0ZwYWdlJTNEMSUyNnNyY2hDb2x1bW4lM0QlMjZzcmNoV3JkJTNEJTI2YmJzQ2xTZXElM0QlMjZiYnNPcGVuV3JkU2VxJTNEJTI2cmdzQmduZGVTdHIlM0QlMjZyZ3NFbmRkZVN0ciUzRCUyNmlzVmlld01pbmUlM0RmYWxzZSUyNmlzVmlldyUzRHRydWUlMjZwYXNzd29yZCUzRCUyNg%3D%3D">
 							${guideButton.render(guideButtonProps)}	
 							</a>

diff --git a/src/components/curriculum-more/curriculum-more.style.scss 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;
+			}
+		}
+	}
+}