Myongji-Graduate · gahyuun · May 6, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024
@@ -0,0 +1,18 @@
+import UserCreditResult from '@/app/ui/user/user-credit-result';
+import Button from '@/app/ui/view/atom/button/button';
+import Link from 'next/link';
+import React from 'react';
+
+export default function MyResultContainer() {
+  return (
+    <div className="flex flex-col  justify-center gap-10">
+      <p className="font-bold sm:text-3xl text-2xl ml-1 sm:ml-0">마이페이지</p>
+      <UserCreditResult />
+      <div className="flex justify-center">
+        <Link href="/result">
+          <Button label="수강현황 자세히 보기" variant="primary" size="xs" />
+        </Link>
+      </div>
+    </div>
+  );
+}
@@ -6,6 +6,7 @@ import ContentContainer from '@/app/ui/view/atom/content-container';
 import Drawer from '@/app/ui/view/molecule/drawer/drawer';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import { Suspense } from 'react';
+import MyResultContainer from './components/my-result-container';
 
 export default function MyPage() {
   return (
@@ -16,7 +17,8 @@ export default function MyPage() {
             <UserInfoNavigator />
           </Suspense>
         </div>
-        <div className="w-full lg:w-[70%] lg:px-[20px]">
+        <div className="w-full lg:w-[70%] lg:px-[20px] pt-12 pb-2 flex flex-col gap-12">
+          <MyResultContainer />
           <TakenLecture />
         </div>
       </ContentContainer>

@@ -1,11 +1,19 @@
 import { z } from 'zod';
 
 // api 변경 예정
+
 export const UserInfoResponseSchema = z.object({
   studentNumber: z.string(),
   studentName: z.string(),
-  major: z.string(),
-  isSumbitted: z.boolean(),
+  completionDivision: z.array(
+    z.object({
+      majorType: z.string(),
+      major: z.string(),
+    }),
+  ),
+  totalCredit: z.number(),
+  takenCredit: z.number(),
+  graduated: z.boolean(),
 });
 
 export const ValidateTokenResponseSchema = z.object({

@@ -24,7 +24,7 @@ export default function RootLayout({
         />
       </head>
       <body>
-        <div className="bg-white w-[100vw] h-[100vh]">
+        <div className="bg-white">
           <Provider>
             <MSWComponent>
               <NavigationBar />

@@ -86,15 +86,30 @@ export const mockDatabase: MockDatabaseAction = {
       return {
         studentNumber: '',
         studentName: '',
-        major: '',
-        isSumbitted: false,
+        completionDivision: [
+          {
+            majorType: '',
+            major: '',
+          },
+        ],
+        totalCredit: 0,
+        takenCredit: 0,
+        graduated: false,
       };
     }
     return {
       studentNumber: user.studentNumber,
       studentName: user.name,
-      major: user.major,
-      isSumbitted: user.isSumbitted,
+      completionDivision: [
+        {
+          majorType: 'primary',
+          major: '디지털컨텐츠디자인학과',
+        },
+      ],
+
+      totalCredit: 132,
+      takenCredit: 50,
+      graduated: false,
     };
   },
 };

@@ -2,14 +2,29 @@
 import { useAtomValue } from 'jotai';
 import LectureSearchBar from './lecture-search-bar';
 import { searchWordAtom } from '@/app/store/search-word';
-import EmptyDataContainer from './empty-data-container';
 import { Suspense } from 'react';
 import { LectureSearchResultSpinner } from './lecture-search-result/lecture-search-result-spinner';
 import LectureSearchResult from './lecture-search-result';
+import Image from 'next/image';
+import searchResultIcon from '@/public/assets/searchResultIcon.svg';
+import List from '../../view/molecule/list';
+
+const emptyDataRender = () => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <Image src={searchResultIcon} alt="search-result-icon" width={40} height={40} />
+      <div className="text-md font-medium text-gray-400 text-center whitespace-pre-wrap">
+        검색 결과가 표시됩니다
+        <br />한 글자 이상 검색해주세요
+      </div>
+    </div>
+  );
+};
 
 export default function LectureSearch() {
   const searchWord = useAtomValue(searchWordAtom);
   const searchable = searchWord.keyword && searchWord.keyword.length > 1;
+
   return (
     <div className="bg-white  w-full h-[500px] sm:h-[400px] z-[10] flex justify-center" data-testid="lecture-search">
       <div className="w-[800px] mx-auto my-7  flex flex-col gap-10 sm:gap-6">
@@ -19,7 +34,7 @@ export default function LectureSearch() {
             <LectureSearchResult />
           </Suspense>
         ) : (
-          <EmptyDataContainer />
+          <List data={[]} isScrollList={true} emptyDataRender={emptyDataRender} />
         )}
       </div>
     </div>

@@ -0,0 +1,22 @@
+import { getUserInfo } from '@/app/business/user/user.query';
+import books from '@/public/assets/books.png';
+import pencil from '@/public/assets/pencil.png';
+import Image from 'next/image';
+
+export default async function UserCreditResult() {
+  const userInfo = await getUserInfo();
+  return (
+    <div className="flex justify-between items-center bg-zinc-100 min-h-20 rounded-lg py-1 px-8 gap-3">
+      <div className="relative sm:h-20 sm:w-20 h-14 w-14">
+        <Image src={pencil} alt="pencil" layout="fill" />
+      </div>
+      <p className="zIndex-1 text-sm md:text-base lg:text-lg">
+        {userInfo.studentName}님, 총 기준학점 중 <span className="text-point-blue">{userInfo.takenCredit}</span>학점을
+        수강하셨습니다!
+      </p>
+      <div className="relative sm:h-20 sm:w-20 h-14 w-14">
+        <Image src={books} alt="books" layout="fill" />
+      </div>
+    </div>
+  );
+}
@@ -13,7 +13,7 @@ export default async function UserInfoNavigator() {
         <span className="font-semibold">{userInfo.studentName}</span>
         <span>님</span>
       </div>
-      <div className="mb-3 text-sm">{userInfo.major}</div>
+      <div className="mb-3 text-sm">{userInfo.completionDivision[0].major}</div>
       <div className="text-sm text-gray-400">{userInfo.studentNumber}</div>
 
       <div className="mt-9">

@@ -25,6 +25,7 @@ const Drawer = ({ children, drawerKey, onClose, className }: DrawerProps) => {
             className,
           )}
         >
+          <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-slate-300" />
           {children}
         </DrawerPrimitive.Content>
       </DrawerPrimitive.Portal>