feat: 강의시간표 페이지 구현

src/assets/data/filter.ts

@@ -0,0 +1,171 @@
+export const term = [
+  {id: 0, value: '2024/1학기'},
+  {id: 1, value: '2024/2학기'},
+];
+
+export const completion = [
+  {id: 0, value: '-전체-'},
+  {id: 1, value: '교양필수'},
+  {id: 2, value: '공통교양필수'},
+  {id: 3, value: '교양선택(1영역)'},
+  {id: 4, value: '학문기초교양필수'},
+  {id: 5, value: '교양선택'},
+  {id: 6, value: '학문기초교양'},
+  {id: 7, value: '전공기초'},
+  {id: 8, value: '전공필수'},
+  {id: 9, value: '전공선택'},
+  {id: 10, value: '교직'},
+  {id: 11, value: '무관후보생교육'},
+];
+
+export const optional = [
+  {id: 0, value: '-전체-'},
+  {id: 1, value: '인성과도덕'},
+  {id: 2, value: '역사와문화'},
+  {id: 3, value: '사회와제도'},
+  {id: 4, value: '생명과 과학'},
+  {id: 5, value: '예술과생활'},
+  {id: 6, value: '지구촌의이해'},
+  {id: 7, value: '학문기초'},
+  {id: 8, value: '인성과창의력'},
+  {id: 9, value: '역량강화'},
+  {id: 10, value: '사상과역사'},
+  {id: 11, value: '사회와문화'},
+  {id: 12, value: '융합과창업'},
+  {id: 13, value: '자연과과학기술'},
+  {id: 14, value: '세계와지구촌'},
+  {id: 15, value: '예술과체육'},
+  {id: 17, value: '역사와사상'},
+  {id: 18, value: '자연과과학'},
+  {id: 19, value: '경제와사회'},
+  {id: 20, value: '문화와예술'},
+  {id: 21, value: '사상과 역사'},
+  {id: 22, value: '대학위성강좌'},
+];
+
+export const major = [
+  {id: 0, value: '-선택-'},
+  {id: 1, value: 'AI로봇학과【3517 학부】인공지능융합대학'},
+  {id: 2, value: 'AI연계융합전공【3317 학부】연계전공'},
+  {
+    id: 3,
+    value: 'AI연계융합전공 소셜미디어매니지먼트소프트웨어【3328 학부】연계전공',
+  },
+  {
+    id: 4,
+    value:
+      'AI연계융합전공 스마트투어리즘매니지먼트소프트웨어【3331 학부】연계전공',
+  },
+  {id: 5, value: 'AI연계융합전공 시스템생명공학【3324 학부】연계전공'},
+  {
+    id: 6,
+    value: 'AI연계융합전공 에듀테크콘텐츠애널리틱스【3326 학부】연계전공',
+  },
+  {id: 7, value: '건설환경공학과【2733 학부】공과대학'},
+  {id: 8, value: '건축공학과【2720 학부】공과대학'},
+  {id: 9, value: '건축공학부 건축공학전공【2779 학부】공과대학'},
+  {id: 10, value: '건축공학부 건축학전공【2780 학부】공과대학'},
+  {id: 11, value: '건축학과【2739 학부】공과대학'},
+  {id: 12, value: '경영학부【2274 학부】경영경제대학'},
+  {id: 13, value: '경제학과【2273 학부】경영경제대학'},
+  {id: 14, value: '교육학과【2114 학부】인문과학대학'},
+  {id: 15, value: '국방시스템공학과【2784 학부】공과대학'},
+  {id: 17, value: '국어국문학과【2111 학부】인문과학대학'},
+  {id: 18, value: '국제학부【2130 학부】인문과학대학'},
+  {id: 19, value: '국제학부 영어영문학전공【2131 학부】인문과학대학'},
+  {id: 20, value: '국제학부 일어일문학전공【2132 학부】인문과학대학'},
+  {id: 21, value: '국제학부 중국통상학전공【2133 학부】인문과학대학'},
+  {id: 22, value: '글로벌미디어소프트웨어 융합전공【3330 학부】연계전공'},
+  {id: 23, value: '글로벌인재학부【2122 학부】인문과학대학'},
+  {id: 24, value: '글로벌조리학과【3037 학부】호텔관광대학'},
+  {id: 25, value: '기계공학과【2725 학부】공과대학'},
+  {id: 26, value: '기계항공우주공학부 기계공학전공【2723 학부】공과대학'},
+  {id: 27, value: '기계항공우주공학부 항공우주공학전공【2724 학부】공과대학'},
+  {id: 28, value: '나노신소재공학과【2786 학부】공과대학'},
+  {id: 29, value: '뉴미디어퍼포먼스 융합전공【3376 학부】연계전공'},
+  {id: 30, value: '대양휴머니티칼리지【9005 학부】대양휴머니티칼리지'},
+  {id: 31, value: '데이터사이언스학과【3225 학부】소프트웨어융합대학'},
+  {id: 32, value: '디지털역사문화자원큐레이션융합전공【3395 학부】연계전공'},
+  {id: 33, value: '럭셔리 브랜드 디자인 융합전공【3370 학부】연계전공'},
+  {id: 34, value: '무용과【2515 학부】예체능대학'},
+  {id: 35, value: '문화산업경영 융합전공【3366 학부】연계전공'},
+  {id: 36, value: '물리천문학과【2450 학부】자연과학대학'},
+  {id: 37, value: '미디어커뮤니케이션학과【2233 학부】사회과학대학'},
+  {id: 38, value: '반도체시스템공학과【2931 학부】전자정보공학대학'},
+  {id: 39, value: '반도체시스템공학과【3512 학부】인공지능융합대학'},
+  {id: 40, value: '법학과【2053 학부】사회과학대학'},
+  {id: 41, value: '법학부 법학전공【2052 학부】대학'},
+  {id: 42, value: '비즈니스 애널리틱스 융합전공【3350 학부】연계전공'},
+  {id: 43, value: '생명시스템학부【3140 학부】생명과학대학'},
+  {
+    id: 44,
+    value: '생명시스템학부 바이오산업자원공학전공【3144 학부】생명과학대학',
+  },
+  {id: 45, value: '생명시스템학부 바이오융합공학전공【3142 학부】생명과학대학'},
+  {id: 46, value: '생명시스템학부 식품생명공학전공【3145 학부】생명과학대학'},
+  {id: 47, value: '소프트웨어학과【3220 학부】소프트웨어융합대학'},
+  {id: 48, value: '소프트웨어학과【3515 학부】인공지능융합대학'},
+  {id: 49, value: '수학통계학과【2658 학부】자연과학대학'},
+  {id: 50, value: '수학통계학부 수학전공【2648 학부】자연과학대학'},
+  {id: 51, value: '수학통계학부 응용통계학전공【2649 학부】자연과학대학'},
+  {id: 52, value: '스마트생명산업융합학과【3146 학부】생명과학대학'},
+  {id: 53, value: '양자원자력공학과【2789 학부】공과대학'},
+  {id: 54, value: '엔터테인먼트 소프트웨어 융합전공【3320 학부】연계전공'},
+  {id: 55, value: '역사학과【2115 학부】인문과학대학'},
+  {id: 56, value: '영상디자인 융합전공【3360 학부】연계전공'},
+  {id: 57, value: '영화예술학과【2525 학부】예체능대학'},
+  {id: 58, value: '예술융합콘텐츠 융합전공【3386 학부】연계전공'},
+  {id: 59, value: '우주항공드론공학부【2757 학부】공과대학'},
+  {id: 60, value: '우주항공드론공학부 항공시스템공학전공【2761 학부】공과대학'},
+  {
+    id: 61,
+    value: '우주항공시스템공학부 항공시스템공학전공【2793 학부】공과대학',
+  },
+  {id: 62, value: '융합창업전공【3310 학부】연계전공'},
+  {id: 63, value: '음악과【2513 학부】예체능대학'},
+  {id: 64, value: '인공지능데이터사이언스학과【3516 학부】인공지능융합대학'},
+  {id: 65, value: '인공지능학과【3238 학부】소프트웨어융합대학'},
+  {id: 66, value: '전자정보통신공학과【2930 학부】전자정보공학대학'},
+  {id: 67, value: '전자정보통신공학과【3511 학부】인공지능융합대학'},
+  {id: 68, value: '정보보호학과【3215 학부】소프트웨어융합대학'},
+  {id: 69, value: '정보보호학과【3514 학부】인공지능융합대학'},
+  {id: 70, value: '지구자원시스템공학과【2788 학부】공과대학'},
+  {id: 71, value: '지능기전공학과【3233 학부】소프트웨어융합대학'},
+  {
+    id: 72,
+    value: '지능기전공학부 무인이동체공학전공【3231 학부】소프트웨어융합대학',
+  },
+  {
+    id: 73,
+    value: '지능기전공학부 스마트기기공학전공【3232 학부】소프트웨어융합대학',
+  },
+  {
+    id: 74,
+    value: '창의소프트학부 디자인이노베이션전공【3236 학부】소프트웨어융합대학',
+  },
+  {
+    id: 75,
+    value: '창의소프트학부 만화애니메이션텍전공【3237 학부】소프트웨어융합대학',
+  },
+  {id: 76, value: '창의소프트학부【3518 학부】인공지능융합대학'},
+  {id: 77, value: '체육학과【2514 학부】예체능대학'},
+  {id: 78, value: '컴퓨터공학과【3210 학부】소프트웨어융합대학'},
+  {id: 79, value: '컴퓨터공학과【3513 학부】인공지능융합대학'},
+  {id: 80, value: '패션디자인학과【2536 학부】예체능대학'},
+  {id: 81, value: '항공시스템공학과【2787 학부】공과대학'},
+  {id: 82, value: '행정학과【2223 학부】사회과학대학'},
+  {id: 83, value: '호텔관광외식경영학부【3029 학부】호텔관광대학'},
+  {
+    id: 84,
+    value: '호텔관광외식경영학부 외식경영학전공【3036 학부】호텔관광대학',
+  },
+  {
+    id: 85,
+    value: '호텔관광외식경영학부 호텔관광경영학전공【3035 학부】호텔관광대학',
+  },
+  {id: 86, value: '호텔외식관광프랜차이즈경영학과【3033 학부】호텔관광대학'},
+  {id: 87, value: '호텔외식비즈니스학과【3034 학부】호텔관광대학'},
+  {id: 88, value: '화학과【2433 학부】자연과학대학'},
+  {id: 89, value: '환경에너지공간융합학과【2790 학부】공과대학'},
+  {id: 90, value: '환경에너지공간융합학과【2790 학부】공과대학'},
+];

src/assets/types/tableType.ts

@@ -0,0 +1,9 @@
+export interface TableTypes {
+  [key: string]: string | null;
+}
+
+export interface TableHeadTypes {
+  name: string;
+  value: string;
+  initialWidth?: number;
+}

src/components/LectureList/Filters.tsx

@@ -0,0 +1,165 @@
+import {useState} from 'react';
+import styled from 'styled-components';
+import FilterButton from '@components/common/FilterButton';
+import FilterInput from '@components/common/FilterInput';
+import SelectBox from '@components/common/SelectBox';
+import {completion, major, optional, term} from '@assets/data/filter';
+
+export interface LectureProps {
+  schCollegeAlias?: string | undefined;
+  schDeptAlias?: string | undefined;
+  curiTypeCdNm?: string | undefined;
+  sltDomainCdNm?: string | undefined;
+  curiNm?: string | undefined;
+  lesnEmp?: string | undefined;
+}
+
+function Filters() {
+  const [lecture, setLecture] = useState<LectureProps>();
+  const handleSelect = (
+    name: keyof LectureProps,
+    value: string | undefined,
+  ) => {
+    let dept = '';
+    let colledge = '';
+
+    if (name === 'schDeptAlias') {
+      dept = value!.substring(0, value!.indexOf('【'));
+      colledge = value!.substring(value!.indexOf('】') + 1);
+
+      setLecture(prevState => ({
+        ...prevState,
+        schDeptAlias: dept,
+        schCollegeAlias: colledge,
+      }));
+    } else {
+      setLecture(prevState => ({
+        ...prevState,
+        [name]: value,
+      }));
+    }
+  };
+
+  return (
+    <FilterContainer>
+      <FilterArea>
+        <FilterBox>
+          <FilterWrap>
+            <span>조직분류</span>
+            <SelectBox
+              options={[{id: 0, value: '학부'}]}
+              tagged={true}
+              disabled={true}
+              sizes='m'
+              onSelect={value => handleSelect('curiTypeCdNm', value)}
+            />
+          </FilterWrap>
+          <FilterWrap>
+            <span>년도/학기</span>
+            <SelectBox
+              options={term}
+              tagged={true}
+              disabled={true}
+              sizes='m'
+              onSelect={value => handleSelect('curiTypeCdNm', value)}
+            />
+          </FilterWrap>
+          <FilterWrap>
+            <span>이수구분</span>
+            <SelectBox
+              options={completion}
+              tagged={false}
+              sizes='m'
+              onSelect={value => handleSelect('curiTypeCdNm', value)}
+            />
+          </FilterWrap>
+          <FilterWrap>
+            <span>선택영역</span>
+            <SelectBox
+              options={optional}
+              tagged={false}
+              sizes='m'
+              onSelect={value => handleSelect('sltDomainCdNm', value)}
+            />
+          </FilterWrap>
+          <FilterWrap>
+            <span>학과전공</span>
+            <SelectBox
+              options={major}
+              tagged={false}
+              sizes='xl'
+              onSelect={value => handleSelect('schDeptAlias', value)}
+            />
+          </FilterWrap>
+          <FilterWrap>
+            <span>교과목명</span>
+            <FilterInput
+              sizes='m'
+              onChange={value => handleSelect('curiNm', value)}
+            />
+          </FilterWrap>
+          <FilterWrap>
+            <span>교수명</span>
+            <FilterInput
+              sizes='m'
+              onChange={value => handleSelect('lesnEmp', value)}
+            />
+          </FilterWrap>
+        </FilterBox>
+        <FilterButton label='조회' lecture={lecture} />
+      </FilterArea>
+      <WarningWrap>
+        <p>
+          ※ 교양과목(중필, 중선, 전공기초교양, 자유선택교양), 교직과목,
+          ROTC과목은 개설학과전공을 대양휴머니티칼리지(또는 교양학부)로 하여
+          조회하시기 바랍니다.
+        </p>
+        <p>
+          ※ 과목에 대한 문의는 개설학과가 아닌 주관학과에 문의하시기 바라며,
+          영어과목에 대한 문의는 교양영어실로 문의하시기 바랍니다.
+        </p>
+      </WarningWrap>
+    </FilterContainer>
+  );
+}
+
+const FilterContainer = styled.div`
+  border: 0.1rem solid #714656;
+  border-radius: 2px;
+  padding: 0.5rem 1.5rem;
+  margin-bottom: 2rem;
+`;
+
+const FilterBox = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem 3rem;
+`;
+
+const FilterArea = styled.div`
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 1rem;
+`;
+
+const FilterWrap = styled.div`
+  ${props => props.theme.texts.tableTitle};
+  > span {
+    display: inline-block;
+    margin-right: 1rem;
+    text-align: right;
+    min-width: 4.5rem;
+  }
+`;
+
+const WarningWrap = styled.div`
+  ${props => props.theme.texts.warning};
+  color: #c30e2e;
+  margin-bottom: -1.5rem;
+
+  > p {
+    margin-bottom: 1.5rem;
+  }
+`;
+
+export default Filters;