Skip to content

Commit

Permalink
✨ 필수교양과목 아코디언 추가 (#138)
Browse files Browse the repository at this point in the history 
* design: 교양 교과과정 변경 내역 디자인 수정

* fix: 필수교양과목 본문 컴포넌트 분리

* fix: 아코디언 형식으로 수정

* refactor: 아코디언 컴포넌트 분리
  • Loading branch information
@Limchansol
Limchansol authored Feb 19, 2024
1 parent c35783c commit 7e43bf6
Show file tree
Hide file tree
Showing 22 changed files with 183 additions and 35 deletions.
10 changes: 0 additions & 10 deletions apis/academicsServer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,6 @@ import {
getMockUndergraduateScholarshipList,
} from '@/data/serverObjects';

import {
Curriculum,
DegreeRequirements,
GeneralStudiesRequirements,
Scholarship,
ScholarshipList,
} from '@/types/academics';

import { getRequest } from '.';

export const getDegreeRequirements = getMockDegreeRequirements;

export const getCurriculum = getMockCurriculum;
Expand Down
44 changes: 26 additions & 18 deletions app/[locale]/academics/undergraduate/general-studies-requirements/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { getGeneralStudiesRequirements } from '@/apis/academicsServer';

import HTMLViewer from '@/components/editor/HTMLViewer';
import Accordion from '@/components/common/Accordion';
import PageLayout from '@/components/layout/pageLayout/PageLayout';

export default async function UndergraduateGeneralStudiesRequirementsPage() {
const { overview, subjectChanges, description } = await getGeneralStudiesRequirements();
const { overview, subjectChanges, generalStudies } = await getGeneralStudiesRequirements();

return (
<PageLayout titleType="big" titleMargin="mb-9">
<PageLayout titleType="big">
<div className="flex flex-col">
<p className="text-sm leading-[26px]">{overview}</p>
<div className="flex flex-col mt-12">
<ContentTitle content={'교양 교과과정 변경 내역'} />
<div className="mt-5">
<p className="text-md leading-loose bg-neutral-100 mb-10 px-6 py-5">{overview}</p>
<div className="flex flex-col">
<ContentTitle title={'교양 교과과정 변경 내역'} />
<div className="mt-2.5">
{subjectChanges?.map((change) => (
<SubjectChanges
key={change.time}
Expand All @@ -26,19 +26,27 @@ export default async function UndergraduateGeneralStudiesRequirementsPage() {
</div>
</div>
<div className="flex flex-col mt-5">
<ContentTitle content={'[학번별] 영역별 교양과목 학점 배분 구조표'} />
<HTMLViewer htmlContent={description} margin="mt-3" />
<ContentTitle title={'[학번별] 영역별 교양과목 학점 배분 구조표'} />
<div className="flex flex-col gap-3 mt-5">
{generalStudies.map((information) => (
<Accordion
key={information.id}
title={`${information.year}학번부터 적용`}
content={information.description}
/>
))}
</div>
</div>
</div>
</PageLayout>
);
}

function ContentTitle({ content }: { content: string }) {
function ContentTitle({ title }: { title: string }) {
return (
<div className="flex flex-row leading-8 items-center">
<div className="border border-main-orange rounded-full w-2.5 h-2.5" />
<h3 className="font-noto font-bold text-base pl-3">{content}</h3>
<h3 className="font-bold text-[17px] ml-2.5 leading-loose">{title}</h3>
</div>
);
}
Expand All @@ -53,29 +61,29 @@ interface SubjectChangesProps {

function SubjectChanges({ status, time, additionalInfos, changes, progress }: SubjectChangesProps) {
return (
<div key={time} className="font-noto flex flex-col border-l-4 border-neutral-300 pl-5 mb-9">
<p className="font-bold text-sm text-neutral-400">{time} 시행 교양 교과과정 변경</p>
<h3 className="font-bold text-base mt-3">
<div key={time} className="flex flex-col border-l-4 border-neutral-200 pl-5 mb-9 leading-loose">
<p className="font-semibold text-[15px] text-neutral-400">{time} 시행 교양 교과과정 변경</p>
<h3 className="font-bold text-[17px] mt-3">
{status === 'new' ? '교과목 신설' : '교과목 변경'}
</h3>
<div className="flex flex-col mt-2">
{additionalInfos &&
additionalInfos.map((info, index) => (
<p key={index} className="text-sm font-normal ">
<p key={index} className="text-md">
{info}
</p>
))}
</div>
<ul className="list-inside list-disc">
{changes.map((change, index) => (
<li className="text-sm font-normal pl-2 leading-[26px] mt-[6px]" key={index}>
<li className="text-md pl-2 mt-[6px]" key={index}>
{change}
</li>
))}
</ul>

<h3 className="font-bold text-base mt-6">경과 조치</h3>
<p className="text-sm font-normal">{progress}</p>
<h3 className="font-bold text-[17px] mt-6">경과 조치</h3>
<p className="text-md font-normal">{progress}</p>
</div>
);
}
33 changes: 33 additions & 0 deletions components/common/Accordion.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
'use client';

import { useReducer } from 'react';

import HTMLViewer from '../editor/HTMLViewer';

interface AccordionProps {
title: string;
content: string;
}

export default function Accordion({ title, content }: AccordionProps) {
const [isExpanded, toggleExpand] = useReducer((x) => !x, false);

return (
<div className="rounded overflow-hidden border-b border-neutral-200 bg-[#efefef]">
<h4
className="bg-neutral-100 px-4 py-[6px] flex items-center gap-1 cursor-pointer"
onClick={toggleExpand}
>
<span className="material-symbols-outlined font-light text-[36px] text-main-orange">
{isExpanded ? 'expand_less' : 'expand_more'}
</span>
<span className="font-medium tracking-[0.02em]">{title}</span>
</h4>
{isExpanded && (
<div className="m-5 bg-white">
<HTMLViewer htmlContent={content} />
</div>
)}
</div>
);
}
8 changes: 4 additions & 4 deletions components/layout/pageLayout/PageLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import Header from '../header/Header';
interface PageLayoutProps {
title?: string | JSX.Element;
titleType: 'big' | 'small';
titleMargin: string; // tailwind class
titleMargin?: string; // tailwind class
bodyStyle?: CSSProperties;
children: ReactNode;
}
Expand All @@ -30,7 +30,7 @@ interface PageLayoutProps {
export default function PageLayout({
title,
titleType,
titleMargin,
titleMargin = 'mb-[44px]',
bodyStyle,
children,
}: PageLayoutProps) {
Expand All @@ -45,10 +45,10 @@ export default function PageLayout({
title={title}
currentPage={currentPage}
titleType={titleType}
margin={titleMargin ?? ''}
margin={titleMargin}
/>
<div
className={'bg-white pl-[100px] pr-[350px] pt-[44px] pb-[150px] relative'}
className={'bg-white pl-[100px] pr-[360px] pt-[44px] pb-[150px] relative'}
style={bodyStyle}
>
{children}
Expand Down
2 changes: 1 addition & 1 deletion components/layout/pageLayout/SubNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function SubNavbar({ currentTab }: SubNavbarProps) {
const height = `${(subTabs.length + 1) * ITEM_HEIGHT}px`;

return (
<div className="absolute top-0 right-[60px] h-full">
<div className="absolute top-0 right-[80px] h-full">
<div
className="flex row-span-full col-start-2 mt-[3.25rem] mb-8 sticky top-20"
style={{ height }}
Expand Down
Empty file removed data/htmls/degreeRequirements.txt
View file
Empty file.
1 change: 1 addition & 0 deletions data/htmls/generalStudies/generalStudies_2007.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div><table><tbody><tr><td colspan="2" rowspan="2"><div>구분</div></td><td colspan="3"><div>1학년</div></td><td colspan="3"><div>2학년</div></td><td colspan="3"><div>3학년</div></td><td colspan="3"><div>4학년</div></td><td rowspan="2"><div>합계</div></td><td rowspan="2"><div>비고</div></td></tr><tr><td><div>1</div></td><td><div>2</div></td><td><div>계</div></td><td><div>1</div></td><td><div>2</div></td><td><div>계</div></td><td><div>1</div></td><td><div>2</div></td><td><div>계</div></td><td><div>1</div></td><td><div>2</div></td><td><div>계</div></td></tr><tr><td colspan="2"><div>학문의 기초</div></td><td><div>16(17)</div></td><td><div>14</div></td><td><div>30(31)</div></td><td><div>3</div></td><td><div>3</div></td><td><div>6</div></td><td><div><br></div></td><td><div>3</div></td><td><div>3</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>39(40)</div></td><td><ul><li>*［1-1］대학영어 또는 고급영어(3), 수학및연습1 또는 고급수학및연습1(3), 컴퓨터의기초 또는 컴퓨터원리(2 또는 3), 기타과목(8)</li><li>*［1-2］대학국어(3), 수학및연습2 또는 고급수학및연습2(3), 기타과목(8)</li><li>*[2-1] 공학수학1 (3)</li><li>*[2-2]공학수학2 (3)</li><li>*[3-2]과학과 기술 글쓰기(3)</li></ul></td></tr><tr><td rowspan="4"><div>핵심교양</div></td><td><div>문학과 예술</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td></tr><tr><td><div>역사와 철학</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div>3</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td></tr><tr><td><div>사회와 이념</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td></tr><tr><td><div>자연의 이해</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td></tr><tr><td colspan="2"><div>선택</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div>3</div></td><td><div>6</div></td><td><div>6</div></td><td><ul><li>*[4-1] 공학소양관련 교과목 &lt;아래참조&gt;(3).</li><li>*[4-2] 공학소양관련 교과목 &lt;아래참조&gt;(3).</li></ul></td></tr><tr><td colspan="2"><div>교양학점계</div></td><td><div>16(17)</div></td><td><div>14</div></td><td><div>30(31)</div></td><td><div>6</div></td><td><div>6</div></td><td><div>12</div></td><td><div>3</div></td><td><div>3</div></td><td><div>6</div></td><td><div>3</div></td><td><div>3</div></td><td><div>6</div></td><td><div>54(55)</div></td><td><div><br></div></td></tr></tbody></table></div><h2>실험과목 이수</h2><div><ul><li>물리학1/2(또는 고급물리학1/2), 화학1/2(또는 고급화학1/2), 생물학1/2, 물리학, 화학, 생물학, 통계학, 물리학실험1/2, 화학실험1/2, 생물학실험1/2, 물리학실험, 화학실험, 생물학실험, 통계학실험 중에서 학기별로 8학점을 이수하는 것을 원칙으로 하되, 이수과목은 각 학과(부) 특성에 맞게 따로 정하여 운영할 수 있음.</li><li>물리학1/2(또는 고급물리학1/2)&gt;, 화학1/2(또는 고급화학1/2), 생물학1/2, 물리학, 화학, 생물학, 통계학을 수강하는 학생은 반드시 해당학기에 실험을 동시에 수강하여야 함.</li><li>공학소양관련 교과목 : 과학기술과 사회, 경제학개론, 소비자와 시장, 경영학개론, 창업과 경제 중 3학점, 정보와 산업기술의 이해, 생명과 환경기술의 이해, 컴퓨터와 마음, 두뇌의 이해, 공학윤리와 리더십, 특허와 기술이전 중 3학점을 반드시 이수.</li></ul></div>
1 change: 1 addition & 0 deletions data/htmls/generalStudies/generalStudies_2008.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<div><table><tbody><tr><td colspan="2" rowspan="2"><div>구분</div></td><td colspan="3"><div>1학년</div></td><td colspan="3"><div>2학년</div></td><td colspan="3"><div>3학년</div></td><td colspan="3"><div>4학년</div></td><td rowspan="2"><div>합계</div></td><td rowspan="2"><div>비고</div></td></tr><tr><td><div>1</div></td><td><div>2</div></td><td><div>계</div></td><td><div>1</div></td><td><div>2</div></td><td><div>계</div></td><td><div>1</div></td><td><div>2</div></td><td><div>계</div></td><td><div>1</div></td><td><div>2</div></td><td><div>계</div></td></tr><tr><td colspan="2"><div>학문의 기초</div></td><td><div>16(17)</div></td><td><div>17</div></td><td><div>33(34)</div></td><td><div>3</div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td><td><div>3</div></td><td><div>3</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>39(40)</div></td><td><ul><li>*［1-1］대학영어 또는 고급영어(3), 수학및연습1 또는 고급수학및연습1(3), 컴퓨터의기초 또는 컴퓨터원리(2 또는 3), 기타과목(8)</li><li>*［1-2］대학국어(3), 수학및연습2 또는 고급수학및연습2(3), 공학수학1(3), 기타과목(8)</li><li>*[2-2]공학수학2 (3)</li><li>*[3-2]과학과 기술 글쓰기(3)</li></ul></td></tr><tr><td rowspan="4"><div>핵심교양</div></td><td><div>문학과 예술</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td></tr><tr><td><div>역사와 철학</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div>3</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td></tr><tr><td><div>사회와 이념</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div><br></div></td></tr><tr><td><div>자연의 이해</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td></tr><tr><td colspan="2"><div>선택</div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div><br></div></td><td><div>3</div></td><td><div>3</div></td><td><div>6</div></td><td><div>6</div></td><td><ul><li>*[4-1] 공학소양관련 교과목 &lt;아래참조&gt;(3).</li><li>*[4-2] 공학소양관련 교과목 &lt;아래참조&gt;(3).</li></ul></td></tr><tr><td colspan="2"><div>교양학점계</div></td><td><div>16(17)</div></td><td><div>17</div></td><td><div>33(34)</div></td><td><div>6</div></td><td><div>3</div></td><td><div>9</div></td><td><div>3</div></td><td><div>3</div></td><td><div>6</div></td><td><div>3</div></td><td><div>3</div></td><td><div>6</div></td><td><div>54(55)</div></td><td><div><br></div></td></tr></tbody></table></div><h2>실험과목 이수</h2><div><ul><li>물리학1/2(또는 고급물리학1/2), 화학1/2(또는 고급화학1/2), 생물학1/2, 물리학, 화학, 생물학, 통계학, 물리학실험1/2, 화학실험1/2, 생물학실험1/2, 물리학실험, 화학실험, 생물학실험, 통계학실험 중에서 학기별로 8학점을 이수하는 것을 원칙으로 하되, 이수과목은 각 학과(부) 특성에 맞게 따로 정하여 운영할 수 있음.</li><li>물리학1/2(또는 고급물리학1/2)&gt;, 화학1/2(또는 고급화학1/2), 생물학1/2, 물리학, 화학, 생물학, 통계학을 수강하는 학생은 반드시 해당학기에 실험을 동시에 수강하여야 함.</li><li>공학소양관련 교과목 : 과학기술과 사회, 경제학개론, 소비자와 시장, 경영학개론, 창업과 경제, 기술과 사회발전 중 3학점, 정보와 산업기술의 이해, 컴퓨터와 마음, 두뇌의 이해, 공학윤리와 리더십, 특허와 기술이전, 기술과 기업 중 3학점을 반드시 이수.</li><li>공학소양관련 이수 규정 및 과학과 기술 글쓰기는 2005학년도 입학자부터 적용.</li></ul></div>
Loading

0 comments on commit 7e43bf6

Please sign in to comment.