Merge pull request #76 from Myongji-Graduate/category-lecture/#68

Myongji-Graduate · Apr 17, 2024 · 8d47fa1 · 8d47fa1
2 parents 636c35b + 22385e3
commit 8d47fa1
Show file tree

Hide file tree

Showing 22 changed files with 392 additions and 55 deletions.
diff --git a/app/(sub-page)/result/components/completed-category.tsx b/app/(sub-page)/result/components/completed-category.tsx
diff --git a/app/(sub-page)/result/components/result-category-detail-container.tsx b/app/(sub-page)/result/components/result-category-detail-container.tsx
@@ -4,18 +4,21 @@ import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
 import Drawer from '../../../ui/view/molecule/drawer/drawer';
 import ResultCategoryDetailContent from '@/app/ui/result/result-category/result-category-detail-content';
 import Responsive from '@/app/ui/responsive';
+import { fetchResultCategoryDetailInfo } from '@/app/business/result/result.query';
+
+async function ResultCategoryDetailContainer() {
+  const data = await fetchResultCategoryDetailInfo();
 
-function ResultCategoryDetailContainer() {
   return (
     <>
       <Responsive maxWidth={767}>
         <Drawer drawerKey={DIALOG_KEY.RESULT_CATEGORY}>
-          <ResultCategoryDetailContent />
+          <ResultCategoryDetailContent info={data} />
         </Drawer>
       </Responsive>
       <Responsive minWidth={768}>
         <Modal modalKey={DIALOG_KEY.RESULT_CATEGORY}>
-          <ResultCategoryDetailContent />
+          <ResultCategoryDetailContent info={data} />
         </Modal>
       </Responsive>
     </>

diff --git a/app/(sub-page)/result/layout.tsx b/app/(sub-page)/result/layout.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import ResultCategoryDetailContainer from './components/result-category-detail-container';
 
 interface ResultLayoutProps {

diff --git a/app/business/api-path.ts b/app/business/api-path.ts
@@ -5,6 +5,7 @@ export const API_PATH = {
   registerUserGrade: `${BASE_URL}/registerUserGrade`,
   parsePDFtoText: `${BASE_URL}/parsePDFtoText`,
   takenLectures: `${BASE_URL}/taken-lectures`,
+  resultCategoryDetailInfo: `${BASE_URL}/result-category-detail-info`,
   user: `${BASE_URL}/users`,
   auth: `${BASE_URL}/auth`,
 };
diff --git a/app/business/lecture/taken-lecture.query.ts b/app/business/lecture/taken-lecture.query.ts
@@ -1,10 +1,10 @@
-import { LectureInfo } from '@/app/type/lecture';
+import { TakenLectrueInfo } from '@/app/type/lecture';
 import { API_PATH } from '../api-path';
 import { TAG } from '@/app/utils/http/tag';
 
 export interface TakenLectures {
   totalCredit: number;
-  takenLectures: LectureInfo[];
+  takenLectures: TakenLectrueInfo[];
 }
 
 export const fetchTakenLectures = async (): Promise<TakenLectures> => {

diff --git a/app/business/result/result.query.ts b/app/business/result/result.query.ts
@@ -0,0 +1,33 @@
+import { LectureInfo } from '@/app/type/lecture';
+import { API_PATH } from '../api-path';
+
+export interface ResultCategoryDetailLectures {
+  categoryName: string;
+  totalCredits: number;
+  takenCredits: number;
+  takenLectures: LectureInfo[];
+  haveToLectures: LectureInfo[];
+  completed: boolean;
+}
+
+export interface ResultCategoryDetailInfo {
+  totalCredit: number;
+  takenCredit: number;
+  detailCategory: ResultCategoryDetailLectures[];
+  completed: boolean;
+}
+
+export interface ResultUserInfo {
+  studentNumber: string;
+  studentName: string;
+  studentCategory: 'NORMAL' | 'CHANGE_MAJOR' | 'DUAL_MAJOR' | 'SUB_MAJOR';
+  major: string;
+  totalCredit: number;
+  takenCredit: number;
+}
+
+export const fetchResultCategoryDetailInfo = async (): Promise<ResultCategoryDetailInfo> => {
+  const response = await fetch(API_PATH.resultCategoryDetailInfo);
+  const data = await response.json();
+  return data;
+};
diff --git a/app/mocks/data.mock.ts b/app/mocks/data.mock.ts
@@ -68,3 +68,110 @@ export const takenLectures = JSON.parse(`{
     }
   ]
 }`);
+
+export const resultCategoryDetailInfo = JSON.parse(`{
+  "totalCredit": 15,
+  "takenCredit": 12,
+  "detailCategory": [
+      {
+          "categoryName": "공통교양(기독교)",
+          "totalCredits": 4,
+          "takenCredits": 4,
+          "takenLectures": [
+              {
+                  "id": 3,
+                  "lectureCode": "KMA00101",
+                  "name": "성서와인간이해",
+                  "credit": 2
+              }
+          ],
+          "haveToLectures": [
+              {
+                  "id": 6,
+                  "lectureCode": "KMA02103",
+                  "name": "종교와과학",
+                  "credit": 2
+              },
+              {
+                  "id": 7,
+                  "lectureCode": "KMA02122",
+                  "name": "기독교와문화",
+                  "credit": 2
+              }
+          ],
+          "completed": true
+      },
+      {
+          "categoryName": "공통교양(진로와 선택)",
+          "totalCredits": 2,
+          "takenCredits": 2,
+          "takenLectures": [
+              {
+                  "id": 18,
+                  "lectureCode": "KMA02137",
+                  "name": "4차산업혁명시대의진로선택",
+                  "credit": 2
+              }
+          ],
+          "haveToLectures": [],
+          "completed": true
+      },
+      {
+          "categoryName": "공통교양(사고와 표현)",
+          "totalCredits": 3,
+          "takenCredits": 3,
+          "takenLectures": [
+              {
+                  "id": 9,
+                  "lectureCode": "KMA02105",
+                  "name": "발표와토의",
+                  "credit": 3
+              }
+          ],
+          "haveToLectures": [
+              {
+                  "id": 8,
+                  "lectureCode": "KMA02104",
+                  "name": "글쓰기",
+                  "credit": 3
+              }
+          ],
+          "completed": true
+      },
+      {
+          "categoryName": "공통교양(영어)",
+          "totalCredits": 6,
+          "takenCredits": 3,
+          "takenLectures": [
+              {
+                  "id": 10,
+                  "lectureCode": "KMA02106",
+                  "name": "영어1",
+                  "credit": 2
+              },
+              {
+                  "id": 14,
+                  "lectureCode": "KMA02108",
+                  "name": "영어회화1",
+                  "credit": 1
+              }
+          ],
+          "haveToLectures": [
+              {
+                  "id": 11,
+                  "lectureCode": "KMA02107",
+                  "name": "영어2",
+                  "credit": 2
+              },
+              {
+                  "id": 15,
+                  "lectureCode": "KMA02109",
+                  "name": "영어회화2",
+                  "credit": 1
+              }
+          ],
+          "completed": false
+      }
+  ],
+  "completed": false
+}`);
diff --git a/app/mocks/db.mock.ts b/app/mocks/db.mock.ts
@@ -1,6 +1,7 @@
 import { TakenLectures } from '../business/lecture/taken-lecture.query';
+import { ResultCategoryDetailInfo } from '../business/result/result.query';
 import { SignUpRequestBody, SignInRequestBody, UserInfoResponse } from '../business/user/user.type';
-import { takenLectures } from './data.mock';
+import { takenLectures, resultCategoryDetailInfo } from './data.mock';
 
 interface MockUser {
   authId: string;
@@ -14,11 +15,13 @@ interface MockUser {
 
 interface MockDatabaseState {
   takenLectures: TakenLectures;
+  resultCategoryDetailInfo: ResultCategoryDetailInfo;
   users: MockUser[];
 }
 
 type MockDatabaseAction = {
   getTakenLectures: () => TakenLectures;
+  getResultCategoryDetailInfo: () => ResultCategoryDetailInfo;
   deleteTakenLecture: (lectureId: number) => boolean;
   getUser: (authId: string) => MockUser | undefined;
   createUser: (user: SignUpRequestBody) => boolean;
@@ -37,6 +40,7 @@ export const mockDatabase: MockDatabaseAction = {
     }
     return false;
   },
+  getResultCategoryDetailInfo: () => mockDatabaseStore.resultCategoryDetailInfo,
   getUser: (authId: string) => mockDatabaseStore.users.find((user) => user.authId === authId),
   createUser: (user: SignUpRequestBody) => {
     if (mockDatabaseStore.users.find((u) => u.authId === user.authId || u.studentNumber === user.studentNumber)) {
@@ -78,6 +82,7 @@ export const mockDatabase: MockDatabaseAction = {
 
 const initialState: MockDatabaseState = {
   takenLectures: takenLectures,
+  resultCategoryDetailInfo: resultCategoryDetailInfo,
   users: [
     {
       authId: 'admin',

diff --git a/app/mocks/handlers/index.ts b/app/mocks/handlers/index.ts
@@ -1,4 +1,5 @@
+import { resultHandlers } from './result-handler.mock';
 import { takenLectureHandlers } from './taken-lecture-handler.mock';
 import { userHandlers } from './user-handler.mock';
 
-export const handlers = [...userHandlers, ...takenLectureHandlers];
+export const handlers = [...userHandlers, ...takenLectureHandlers, ...resultHandlers];
diff --git a/app/mocks/handlers/result-handler.mock.ts b/app/mocks/handlers/result-handler.mock.ts
@@ -0,0 +1,11 @@
+import { HttpResponse, http, delay } from 'msw';
+import { API_PATH } from '../../business/api-path';
+import { mockDatabase } from '../db.mock';
+
+export const resultHandlers = [
+  http.get(API_PATH.resultCategoryDetailInfo, async () => {
+    const resultCategoryDetailInfo = mockDatabase.getResultCategoryDetailInfo();
+    await delay(100);
+    return HttpResponse.json(resultCategoryDetailInfo);
+  }),
+];
diff --git a/app/store/custom-taken-lecture.ts b/app/store/custom-taken-lecture.ts
@@ -1,6 +1,6 @@
 import { atom } from 'jotai';
-import { LectureInfo } from '../type/lecture';
+import { TakenLectrueInfo } from '../type/lecture';
 
-export const takenLectureAtom = atom<LectureInfo[]>([]);
+export const takenLectureAtom = atom<TakenLectrueInfo[]>([]);
 
-export const swipeTakenLectureAtom = atom<LectureInfo[]>([]);
+export const swipeTakenLectureAtom = atom<TakenLectrueInfo[]>([]);
diff --git a/app/store/taken-lecture-atom-hydrator.tsx b/app/store/taken-lecture-atom-hydrator.tsx
@@ -1,12 +1,12 @@
 'use client';
 import { takenLectureAtom } from '@/app/store/custom-taken-lecture';
-import { LectureInfo } from '@/app/type/lecture';
+import { TakenLectrueInfo } from '@/app/type/lecture';
 import { useHydrateAtoms } from 'jotai/utils';
 
 export default function TakenLectureAtomHydrator({
   initialValue,
   children,
-}: React.PropsWithChildren<{ initialValue: LectureInfo[] }>) {
+}: React.PropsWithChildren<{ initialValue: TakenLectrueInfo[] }>) {
   useHydrateAtoms(new Map([[takenLectureAtom, initialValue]]));
   return children;
 }
diff --git a/app/type/lecture.ts b/app/type/lecture.ts
@@ -1,4 +1,4 @@
-export interface LectureInfo {
+export interface TakenLectrueInfo {
   [index: string]: string | number;
   id: number;
   year: string;
@@ -8,7 +8,7 @@ export interface LectureInfo {
   credit: number;
 }
 
-export interface SearchedLectureInfo {
+export interface LectureInfo {
   [index: string]: string | number;
   id: number;
   lectureCode: string;

diff --git a/app/ui/lecture/lecture-search/lecture-search-result-container.tsx b/app/ui/lecture/lecture-search/lecture-search-result-container.tsx
@@ -2,7 +2,7 @@ import List from '../../view/molecule/list';
 import Image from 'next/image';
 import searchResultIcon from '@/public/assets/searchResultIcon.svg';
 import Grid from '../../view/molecule/grid';
-import { SearchedLectureInfo } from '@/app/type/lecture';
+import { LectureInfo } from '@/app/type/lecture';
 import AddTakenLectureButton from '../taken-lecture/add-taken-lecture-button';
 
 const emptyDataRender = () => {
@@ -15,10 +15,10 @@ const emptyDataRender = () => {
 };
 
 export default function LectureSearchResultContainer() {
-  const renderAddActionButton = (item: SearchedLectureInfo) => {
+  const renderAddActionButton = (item: LectureInfo) => {
     return <AddTakenLectureButton lectureItem={item} />;
   };
-  const render = (item: SearchedLectureInfo, index: number) => {
+  const render = (item: LectureInfo, index: number) => {
     const searchLectureItem = item;
     return (
       <List.Row key={index}>

diff --git a/app/ui/lecture/taken-lecture/add-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/add-taken-lecture-button.tsx
@@ -1,8 +1,8 @@
-import { SearchedLectureInfo } from '@/app/type/lecture';
+import { LectureInfo } from '@/app/type/lecture';
 import Button from '../../view/atom/button/button';
 
 interface AddTakenLectureButtonProps {
-  lectureItem: SearchedLectureInfo;
+  lectureItem: LectureInfo;
 }
 export default function AddTakenLectureButton({ lectureItem }: AddTakenLectureButtonProps) {
   return <Button variant="list" label="추가" onClick={() => {}} />;

diff --git a/app/ui/result/result-category/result-cagegory-detail-lecture.tsx b/app/ui/result/result-category/result-cagegory-detail-lecture.tsx
@@ -0,0 +1,37 @@
+import { Table } from '../../view/molecule/table';
+import AnnounceMessageBox from '@/app/ui/view/molecule/announce-message-box/announce-massage-box';
+import { ResultCategoryDetailLectures } from '@/app/business/result/result.query';
+import LabelContainer from '@/app/ui/view/atom/label-container/label-container';
+
+const headerInfo = ['과목코드', '과목명', '학점'];
+
+interface ResultCagegoryDetailLectureProps {
+  detailCategory: ResultCategoryDetailLectures;
+  isTakenLecture: boolean;
+}
+
+function ResultCagegoryDetailLecture({ detailCategory, isTakenLecture }: ResultCagegoryDetailLectureProps) {
+  const { categoryName, totalCredits, takenCredits, takenLectures, haveToLectures, completed } = detailCategory;
+
+  const showCompleted = !isTakenLecture && completed;
+
+  return (
+    <div className="my-4 flex flex-col gap-4">
+      <LabelContainer
+        label={categoryName}
+        rightElement={
+          <div className="text-2xl text-gray-6">
+            {takenCredits} / {totalCredits}
+          </div>
+        }
+      />
+      {showCompleted ? (
+        <AnnounceMessageBox message="해당 파트의 졸업요건을 충족하셨습니다!" />
+      ) : (
+        <Table headerInfo={headerInfo} data={isTakenLecture ? takenLectures : haveToLectures} />
+      )}
+    </div>
+  );
+}
+
+export default ResultCagegoryDetailLecture;