Merge pull request #167 from Myongji-Graduate/improve-performace/#188

Improve performace/#188
Myongji-Graduate · Dec 23, 2024 · e068d25 · e068d25
2 parents ce2be3f + 9232dc4
commit e068d25
Show file tree

Hide file tree

Showing 30 changed files with 278 additions and 83 deletions.
diff --git a/app/(sub-page)/components/navigation-bar.tsx b/app/(sub-page)/components/navigation-bar.tsx
@@ -10,7 +10,7 @@ import UserDeleteModal from '@/app/ui/user/user-info-navigator/user-delete-modal
 
 export default function NavigationBar() {
   return (
-    <div className="absolute flex justify-between items-center p-4 border-b-[1px] w-full z-2">
+    <div className="absolute flex justify-between items-center p-2.5 border-b-[1px] w-full z-2">
       <Link href={'/'}>
         <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
       </Link>

diff --git a/app/(sub-page)/components/navigation-items.tsx b/app/(sub-page)/components/navigation-items.tsx
@@ -40,7 +40,7 @@ export function NavigationItem({ href, label, target }: NavigationItemProps) {
     <Link href={href} target={target} className="flex items-center justify-between">
       <Button
         size={'xs'}
-        className="text-black lg:text-white hover:text-slate-400 lg:text-base text-lg my-1"
+        className="text-black lg:text-white hover:text-slate-400 py-5 lg:text-base text-lg "
         variant={'text'}
         label={label}
       />

diff --git a/app/(sub-page)/components/side-navigation-bar.tsx b/app/(sub-page)/components/side-navigation-bar.tsx
@@ -23,7 +23,7 @@ export default function SideNavigationBar({ header, content, footer }: SideNavig
 
   return (
     <Sheet open={isOpen} onOpenChange={handleSideNavOpen}>
-      <SheetTrigger className="h-6">
+      <SheetTrigger aria-label="menu-button" className="h-6">
         <HamburgerMenuIcon className="w-6 h-6 text-white" />
       </SheetTrigger>
       <SheetContent className="z-3">

diff --git a/app/(sub-page)/layout.tsx b/app/(sub-page)/layout.tsx
@@ -10,7 +10,9 @@ function SubPageLayout({ children }: LayoutProps) {
   return (
     <>
       <NavigationBar />
-      <Image src={background} width={800} height={288} className="w-full bg-white h-[18rem]" alt="background" />
+      <div className="relative bg-primary h-[18rem]">
+        <Image src={background} sizes="100vw" className="absolute bottom-0 bg-white" alt="background" />
+      </div>
       <div className="flex justify-center">{children}</div>
     </>
   );

diff --git a/app/(sub-page)/result/components/result-category-detail-container.tsx b/app/(sub-page)/result/components/result-category-detail-container.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import useDialog from '@/app/hooks/useDialog';
+import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
+import { ResultCategoryKey } from '@/app/utils/key/result-category.key';
+import dynamic from 'next/dynamic';
+import { useEffect } from 'react';
+
+const ResultCategoryDetail = dynamic(() => import('@/app/ui/result/result-category-detail/result-category-detail'));
+
+export default function ResultCategoryDetailContainer({ category }: { category: ResultCategoryKey }) {
+  const { isOpen, open } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
+
+  useEffect(() => {
+    if (category && !isOpen) open();
+  }, []);
+
+  return isOpen && category ? <ResultCategoryDetail category={category} /> : null;
+}
diff --git a/app/(sub-page)/result/page.tsx b/app/(sub-page)/result/page.tsx
@@ -1,12 +1,17 @@
 import UserInfoCard from '@/app/ui/user/user-info-card/user-info-card';
-import ResultCategoryDetail from '@/app/ui/result/result-category-detail/result-category-detail';
 import { Suspense } from 'react';
 import UserInfoCardSkeleton from '@/app/ui/user/user-info-card/user-info-card.skeleton';
-import ResultCategory from '@/app/ui/result/result-category/result-category';
 import ResultCategorySkeleton from '@/app/ui/result/result-category/result-category.skeleton';
 import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
 import { ResultCategoryKey } from '@/app/utils/key/result-category.key';
 import type { Metadata } from 'next';
+import ResultCategoryDetailContainer from '@/app/(sub-page)/result/components/result-category-detail-container';
+import dynamic from 'next/dynamic';
+
+const ResultCategory = dynamic(() => import('@/app/ui/result/result-category/result-category'), {
+  ssr: false,
+  loading: () => <ResultCategorySkeleton />,
+});
 
 export const metadata: Metadata = {
   title: '졸업 요건 검사 결과',
@@ -39,10 +44,8 @@ function ResultPage({ searchParams }: ResultPageProp) {
           <UserInfoCard />
         </Suspense>
       </ContentContainer>
-      <Suspense fallback={<ResultCategorySkeleton />}>
-        <ResultCategory />
-      </Suspense>
-      <ResultCategoryDetail category={category} />
+      <ResultCategory />
+      <ResultCategoryDetailContainer category={category} />
     </div>
   );
 }

diff --git a/app/(sub-page)/sign-in/page.tsx b/app/(sub-page)/sign-in/page.tsx
@@ -18,11 +18,11 @@ export const metadata: Metadata = {
 export default function SignInPage() {
   return (
     <ContentContainer className="md:w-[768px] h-[550px] xl:w-[960px] flex p-9">
-      <Responsive minWidth={767}>
-        <div className="w-2/4">
-          <Image className="object-cover h-full" src={MaruImage} alt="마루" />
-        </div>
-      </Responsive>
+      <div className="hidden md:w-2/4 md:block relative ">
+        <Responsive minWidth={767}>
+          <Image fill={true} className="object-cover" src={MaruImage} alt="마루" />
+        </Responsive>
+      </div>
       <div className="w-full md:w-2/4 md:pl-7 ">
         <div className="pb-12">
           <TitleBox title={'로그인'} />

diff --git a/app/business/services/user/user.query.ts b/app/business/services/user/user.query.ts
@@ -12,6 +12,7 @@ import {
 } from './user.validation';
 import { FormState } from '@/app/ui/view/molecule/form/form-root';
 import { instance } from '@/app/utils/api/instance';
+import { CreditResponse } from '@/app/store/querys/result';
 
 export async function auth(): Promise<InitUserInfoResponse | UserInfoResponse | undefined> {
   try {
@@ -39,6 +40,16 @@ export async function fetchUser(): Promise<InitUserInfoResponse | UserInfoRespon
   }
 }
 
+export async function fetchCredits(): Promise<CreditResponse[]> {
+  try {
+    const { data } = await instance.get<CreditResponse[]>(`${API_PATH.graduations}/credits`);
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+}
+
 export async function findUserToStudentNumber(prevState: FormState, formData: FormData): Promise<FormState> {
   const validatedFields = FindIdFormSchema.safeParse({
     studentNumber: formData.get('studentNumber'),

diff --git a/app/globals.css b/app/globals.css
@@ -24,7 +24,7 @@
 
 *,
 a {
-  font-family: 'Pretendard';
+  font-family: 'Pretendard Variable';
 }
 
 ::-webkit-scrollbar {
@@ -40,14 +40,3 @@ a {
   background: #c4c4c4;
   border-radius: 5px;
 }
-
-@font-face {
-  font-family: 'VitroCore';
-  src:
-    local('vitro'),
-    url('../public/assets/font/vitro.woff2') format('woff2'),
-    url('../public/assets/font/vitro.woff') format('woff'),
-    url('../public/assets/font/vitro.ttf') format('truetype');
-  font-weight: 700;
-  font-display: swap;
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
   description:
     '명지대학교 졸업사정결과 조회서비스 "졸업을 부탁해"는 미이수 / 이수 과목정보 및 잔여학점 조회, 졸업사정예측 서비스를 원클릭으로 제공합니다.',
   icons: {
-    icon: 'https://github.com/Myongji-Graduate/MyongjiGraduate-BE/assets/75975946/2a7354ae-dffe-4250-8b83-a211a07ff5d2',
+    icon: '/assets/favicon.png',
   },
   openGraph: {
     siteName: '졸업을 부탁해',
@@ -38,7 +38,8 @@ export default function RootLayout({
     <html lang="ko">
       <head>
         <link
-          href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
+          href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+          as="style"
           rel="stylesheet"
         />
       </head>

diff --git a/app/mocks/handlers/taken-lecture-handler.mock.ts b/app/mocks/handlers/taken-lecture-handler.mock.ts
@@ -14,9 +14,9 @@ export const takenLectureHandlers = [
     await delay(100);
     return HttpResponse.json(takenLectures);
   }),
-  http.post<never, { lectureCode: string }>(API_PATH.takenLectures, async ({ request }) => {
+  http.post<never, { lectureId: string }>(API_PATH.takenLectures, async ({ request }) => {
     const body = await request.json();
-    const isAdded = mockDatabase.addTakenLecture(body.lectureCode);
+    const isAdded = mockDatabase.addTakenLecture(body.lectureId);
     await delay(1000);
     if (isAdded) return HttpResponse.json({ message: '과목 추가에 성공했습니다' }, { status: 200 });
     return HttpResponse.json({ errorCode: 400, message: '추가에 실패했습니다' }, { status: 400 });

diff --git a/app/page.tsx b/app/page.tsx
@@ -6,13 +6,30 @@ import Responsive from './ui/responsive';
 import NavigationBar from './(sub-page)/components/navigation-bar';
 import Button from './ui/view/atom/button/button';
 import Link from 'next/link';
+import localFont from 'next/font/local';
+
+const vitroFont = localFont({
+  src: '../public/assets/font/vitro.woff2',
+  variable: '--font-vitro',
+  weight: '700',
+  display: 'swap',
+});
 
 export default function HomePage() {
   return (
-    <div className="bg-primary w-[100vw] h-[100vh] overflow-hidden relative">
+    <div className={`bg-primary w-screen h-screen overflow-hidden relative ${vitroFont.variable}`}>
       <NavigationBar />
       <Responsive minWidth={768}>
-        <Image src={mainBookBackground} alt="main-book-background" className="fixed right-0 w-[60%] z-0" />
+        <div className="fixed h-screen right-0 w-7/12">
+          <Image
+            src={mainBookBackground}
+            alt="main-book-background"
+            fill={true}
+            className="absolute object-contain z-0"
+            quality={50}
+            priority={true}
+          />
+        </div>
       </Responsive>
       <Image
         src={mainMyongjiLogo}
@@ -22,26 +39,31 @@ export default function HomePage() {
         className="absolute top-24 right-4"
       />
       <div className="relative h-full flex flex-col items-center justify-center gap-6 z-1">
-        <p className="text-center flex flex-col gap-4">
+        <div className="text-center flex flex-col gap-4">
           <div className="relative">
-            <div className="z-2 text-3xl font-bold sm:text-7xl relative text-white" style={{ fontFamily: 'VitroCore' }}>
-              <span className="text-etc-yellow" style={{ fontFamily: 'VitroCore' }}>
+            <div
+              className="z-2 text-3xl font-bold sm:text-7xl relative text-white"
+              style={{ fontFamily: 'var(--font-vitro)' }}
+            >
+              <span className="text-etc-yellow" style={{ fontFamily: 'var(--font-vitro)' }}>
                 졸
               </span>
               업을&nbsp;
-              <span className="text-etc-yellow" style={{ fontFamily: 'VitroCore' }}>
+              <span className="text-etc-yellow" style={{ fontFamily: 'var(--font-vitro)' }}>
                 부
               </span>
               탁해
             </div>
             <Image
               src={graduationCap}
               alt="graduation-cap"
-              className="absolute bottom-2 left-8 sm:bottom-10 sm:left-[-24px] sm:w-[52px] sm:h-[52px] w-[36px] h-[36px]"
+              className="absolute object-contain bottom-2 left-8 sm:bottom-10 sm:left-[-24px] sm:w-[52px] w-[36px]"
+              sizes="(min-width: 640px) 52px, 36px"
+              quality={100}
             />
           </div>
           <div className="text-md sm:text-lg text-gray-400 font-medium">명지인을 위한 간편 졸업요건 검사 사이트</div>
-        </p>
+        </div>
         <div className="flex flex-col gap-2 md:gap-4">
           <Link href="/result">
             <Button label="검사 시작" variant="dark" size="xl" />

diff --git a/app/store/querys/lecture.ts b/app/store/querys/lecture.ts
@@ -2,10 +2,10 @@ import { QUERY_KEY } from '@/app/utils/query/react-query-key';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { useAtomValue } from 'jotai';
 import { searchWordAtom } from '../stores/search-word';
-import axios from 'axios';
 import { API_PATH } from '@/app/business/api-path';
 import { getToken } from '@/app/business/services/auth';
 import { LectureInfoResponse } from './result';
+import fetchAX from 'fetch-ax';
 
 export type SearchedLectureInfoResponse = LectureInfoResponse & { taken: boolean; revoked: boolean };
 
@@ -22,10 +22,13 @@ export const useFetchSearchLecture = () => {
 
 export const fetchSearchLectures = async (type: string, keyword: string) => {
   const token = await getToken();
-  const response = await axios<SearchedLectureInfoResponse[]>(`${API_PATH.lectures}?type=${type}&&keyword=${keyword}`, {
-    headers: {
-      Authorization: `Bearer ${token}`,
+  const response = await fetchAX.get<SearchedLectureInfoResponse[]>(
+    `${API_PATH.lectures}?type=${type}&&keyword=${keyword}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
     },
-  });
+  );
   return response.data;
 };
diff --git a/app/store/querys/result.ts b/app/store/querys/result.ts
@@ -3,7 +3,7 @@ import { getToken } from '@/app/business/services/auth';
 import { RESULT_CATEGORY } from '@/app/utils/key/result-category.key';
 import { QUERY_KEY } from '@/app/utils/query/react-query-key';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import axios from 'axios';
+import fetchAX from 'fetch-ax';
 
 export interface LectureInfoResponse {
   [index: string]: string | number | boolean;
@@ -45,7 +45,7 @@ export const useFetchCredits = () => {
 
 const fetchCredits = async () => {
   try {
-    const { data } = await axios<CreditResponse[]>(`${API_PATH.graduations}/credits`, {
+    const { data } = await fetchAX.get<CreditResponse[]>(`${API_PATH.graduations}/credits`, {
       headers: {
         Authorization: `Bearer ${await getToken()}`,
       },
@@ -66,7 +66,7 @@ export const useFetchResultCategoryDetailInfo = (category: string) => {
 
 const fetchResultCategoryDetailInfo = async (category: string) => {
   try {
-    const { data } = await axios<ResultCategoryDetailResponse>(
+    const { data } = await fetchAX.get<ResultCategoryDetailResponse>(
       `${API_PATH.graduations}/detail?graduationCategory=${category}`,
       {
         headers: {

diff --git a/app/ui/responsive.tsx b/app/ui/responsive.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMediaQuery } from 'usehooks-ts';
 
 interface ResponsiveProps {
@@ -8,11 +8,17 @@ interface ResponsiveProps {
 }
 
 export default function Responsive({ minWidth, maxWidth, children }: React.PropsWithChildren<ResponsiveProps>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   let breakPoint = '(min-width: 0px)';
   if (minWidth && maxWidth) breakPoint = `(min-width:${minWidth}px) and (max-width:${maxWidth}px)`;
   else if (minWidth) breakPoint = `(min-width:${minWidth}px)`;
   else if (maxWidth) breakPoint = `(max-width:${maxWidth}px)`;
 
   const isBreakPoint = useMediaQuery(breakPoint);
-  return <>{isBreakPoint ? children : null}</>;
+  return <>{isClient && (isBreakPoint ? children : null)}</>;
 }
diff --git a/app/ui/result/result-category-detail/result-category-detail-dialog.tsx b/app/ui/result/result-category-detail/result-category-detail-dialog.tsx
@@ -3,25 +3,18 @@ import Modal from '../../view/molecule/modal/modal';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import Drawer from '../../view/molecule/drawer/drawer';
 import Responsive from '@/app/ui/responsive';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useAtomValue } from 'jotai';
 import { isDialogOpenAtom } from '@/app/store/stores/dialog';
-import useDialog from '@/app/hooks/useDialog';
 
 interface ResultCategoryDetailDialogProp {
   children: React.ReactNode;
   querystring?: string;
 }
 
-export default function ResultCategoryDetailDialog({ children, querystring }: ResultCategoryDetailDialogProp) {
+export default function ResultCategoryDetailDialog({ children }: ResultCategoryDetailDialogProp) {
   const isOpenDialog = useAtomValue(isDialogOpenAtom);
 
-  const { isOpen, open } = useDialog(DIALOG_KEY.RESULT_CATEGORY);
-
-  useEffect(() => {
-    if (querystring && !isOpen) open();
-  }, []);
-
   const handleCloseDialog = () => {
     if (isOpenDialog) window.history.go(-1);
     window.history.replaceState({}, '', '/result');

diff --git a/app/ui/result/result-category-detail/result-category-detail.tsx b/app/ui/result/result-category-detail/result-category-detail.tsx
@@ -10,7 +10,7 @@ export default function ResultCategoryDetail({ category }: { category: ResultCat
   if (!category) return;
 
   return (
-    <ResultCategoryDetailDialog querystring={category}>
+    <ResultCategoryDetailDialog>
       <Suspense fallback={<ResultCategoryDetailContentSkeleton />}>
         <ResultCategoryDetailInfo category={category} />
       </Suspense>

diff --git a/app/ui/user/user-info-card/user-info-card.tsx b/app/ui/user/user-info-card/user-info-card.tsx
@@ -1,7 +1,7 @@
 import { InitUserInfoResponse, UserInfoResponse } from '@/app/business/services/user/user.type';
 import InitUserAnnounce from './init-user-announce';
-import UserInfoContent from './user-info-content/user-info-content';
 import { fetchUser } from '@/app/business/services/user/user.query';
+import UserInfoContent from './user-info-content/user-info-content';
 
 async function UserInfoCard() {
   const data = await fetchUser();