[Chore] 클라이언트 페이지 성능 최적화 (#88)

* chore: 폰트 ttf에서 woff2로 변경

* chore: woff2, woff, ttf 순으로 브라우저에서 지원하는 폰트 사용하도록 설정

* feat: my-page, my-study, study-apply 중 한 페이지 초기 접속 시에만 미들웨어 동작하는 로직 추가

* chore: 로그아웃 시 middleware-executed 쿠키 삭제 로직 추가

* chore: 미들웨어에서 로그인 안 한 사용자는 헤더 캐시 속성 없어도 확인하도록 수정

* chore: aria 속성 잘못 설정된 부분 삭제

* chore: 자잘한 태그 변경

* feat: ui 패키지 스타일 변경 사항 반영

* refactor: cookieKey constants에서 관리하도록 수정

* chore: 불필요한 api 호출 에러 처리 삭제

* chore: cookieKey 객체로 관리하도록 수정

* chore: 과제 제출 상태 넘어오지 않는 경우 예외 처리 추가

* refactor: 스타일 객체 분리

* chore: baseUrl hostname으로 지정하도록 수정

* feat: ui 패키지 변경사항 반영

* chore: 불필요한 변수 삭제

* fix: 스터디 기본 정보 시작시간 및 종료시간 널 처리 추가

* feat: ui 패키지 변경사항 변경

apps/client/app/(afterLogin)/my-page/@modal/(.)logout/page.tsx

@@ -4,7 +4,9 @@ import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Modal, Space, Text } from "@wow-class/ui";
 import { useModalRoute } from "@wow-class/ui/hooks";
+import { fetcher } from "@wow-class/utils";
 import { authApi } from "apis/authApi";
+import { baseUrl } from "constants/environment";
 import { routePath } from "constants/routePath";
 import { useRouter } from "next/navigation";
 import Button from "wowds-ui/Button";
@@ -13,8 +15,14 @@ const LogoutModal = () => {
   const router = useRouter();
   const { onClose } = useModalRoute();
   const handleClickLogoutButton = async () => {
-    const response = await authApi.logout();
-    if (response.success) {
+    fetcher.setBaseUrl(`https://${window.location.hostname}`);
+    await fetcher.post("/api/my-page/logout", {});
+
+    baseUrl && fetcher.setBaseUrl(baseUrl);
+
+    const { success } = await authApi.logout();
+
+    if (success) {
       router.push(routePath["landing"]);
     } else {
       router.back();

apps/client/app/(afterLogin)/my-study/_components/AssignmentStatusBox.tsx

@@ -30,9 +30,9 @@ const AssignmentStatusBox = ({
 
   const attendanceDeadline = `${year}년 ${month}월 ${day}일 ${hours}:${minutes}까지`;
   const {
-    label: assignmentSubmissionStatusLabel,
+    label: assignmentSubmissionStatusLabel = "",
     color: assignmentSubmissionStatusColor,
-  } = assignmentSubmissionStatusMap[assignmentSubmissionStatus];
+  } = assignmentSubmissionStatusMap[assignmentSubmissionStatus] || {};
 
   return (
     <Box
@@ -52,9 +52,11 @@ const AssignmentStatusBox = ({
                 <Text as="h2" typo="h2">
                   {week}주차 과제
                 </Text>
-                <Tag color={assignmentSubmissionStatusColor} variant="solid2">
-                  {assignmentSubmissionStatusLabel}
-                </Tag>
+                {assignmentSubmissionStatusLabel && (
+                  <Tag color={assignmentSubmissionStatusColor} variant="solid2">
+                    {assignmentSubmissionStatusLabel}
+                  </Tag>
+                )}
               </Flex>
               <Text as="div" className={assignmentNameStyle} typo="body1">
                 {name}

apps/client/app/(afterLogin)/my-study/_components/Header.tsx

@@ -39,8 +39,8 @@ const Header = () => {
     mentorName,
     studyType,
     dayOfWeek,
-    startTime: { hour: startHour, minute: startMinute },
-    endTime: { hour: endHour, minute: endMinute },
+    startTime,
+    endTime,
     totalWeek,
     period: { startDate, endDate },
     introduction,
@@ -51,8 +51,10 @@ const Header = () => {
   const { month: endMonth, day: endDay } = parseISODate(endDate);
 
   const studySemester = `${academicYear}-${semester === "FIRST" ? 1 : 2}`;
-  const studySchedule = `${dayToKorean[dayOfWeek]} ${startHour}:${padWithZero(startMinute)}-
-  ${endHour}:${padWithZero(endMinute)}`;
+  const studySchedule =
+    startTime && endTime
+      ? `${dayToKorean[dayOfWeek]} ${startTime.hour}:${padWithZero(startTime.minute)}-${endTime.hour}:${padWithZero(endTime.minute)}`
+      : "";
   const studyPeriod = `${padWithZero(startMonth)}.${padWithZero(startDay)}-
   ${padWithZero(endMonth)}.${padWithZero(endDay)}`;
 

apps/client/app/api/my-page/logout/route.ts

@@ -0,0 +1,17 @@
+import { cookieKey } from "constants/cookieKey";
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+export async function POST() {
+  const cookieStore = cookies();
+
+  cookieStore.set(cookieKey["middleware-executed"], "", {
+    httpOnly: true,
+    secure: true,
+    sameSite: "lax",
+    expires: new Date(0),
+    path: "/",
+  });
+
+  return NextResponse.json({ success: true });
+}

apps/client/components/Navbar.tsx

@@ -41,7 +41,7 @@ const Navbar = async () => {
         className={navContainerStyle}
         role="navigation"
       >
-        <ul>
+        <section>
           {navMenu.map((menu) => (
             <NavItem
               alt={menu.alt}
@@ -52,15 +52,17 @@ const Navbar = async () => {
               name={menu.name}
             />
           ))}
-        </ul>
-        {showConvertToMentorPageButton && (
-          <NavItem
-            alt="administrator-icon"
-            href={routePath.admin || ""}
-            imageUrl={adminImageUrl}
-            name="멘토 페이지로 전환"
-          />
-        )}
+        </section>
+        <section>
+          {showConvertToMentorPageButton && (
+            <NavItem
+              alt="administrator-icon"
+              href={routePath.admin || ""}
+              imageUrl={adminImageUrl}
+              name="멘토 페이지로 전환"
+            />
+          )}
+        </section>
       </nav>
     </aside>
   );

apps/client/constants/cookieKey.ts

@@ -1,3 +1,4 @@
-export const enum cookieKey {
-  accessToken = "accessToken",
-}
+export const cookieKey = {
+  accessToken: "accessToken",
+  ["middleware-executed"]: "middleware-executed",
+};

apps/client/middleware.ts

@@ -12,13 +12,29 @@ export const config = {
 const middleware = async (req: NextRequest) => {
   const cookieStore = cookies();
   const accessToken = cookieStore.get(cookieKey.accessToken)?.value;
+  const cacheCookie = cookieStore.get(cookieKey["middleware-executed"]);
 
-  const { memberRole } = await dashboardApi.getDashboardInfo();
-
-  if (!accessToken || memberRole !== "REGULAR") {
+  if (!accessToken) {
     return NextResponse.redirect(new URL(routePath.auth, req.url));
   }
 
+  if (!cacheCookie) {
+    const { memberRole } = await dashboardApi.getDashboardInfo();
+
+    if (memberRole !== "REGULAR") {
+      return NextResponse.redirect(new URL(routePath.auth, req.url));
+    }
+
+    const response = NextResponse.next();
+    response.cookies.set(cookieKey["middleware-executed"], "true", {
+      httpOnly: true,
+      secure: true,
+      sameSite: "lax",
+    });
+
+    return response;
+  }
+
   return NextResponse.next();
 };
 

apps/client/types/dtos/myStudy.ts

@@ -23,8 +23,8 @@ export interface BasicStudyInfoDto {
   introduction: string;
   mentorName: string;
   dayOfWeek: DayOfWeekType;
-  startTime: Time;
-  endTime: Time;
+  startTime: Time | null;
+  endTime: Time | null;
   totalWeek: number;
   period: {
     startDate: string;

packages/fonts/index.css

@@ -1,61 +1,101 @@
 @font-face {
   font-family: "SUIT";
   font-weight: 200;
-  src: url("./SUIT-Thin.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./SUIT-Thin.woff2") format("woff2"),
+    url("./SUIT-Thin.woff") format("woff"),
+    url("./SUIT-Thin.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "SUIT";
   font-weight: 300;
-  src: url("./SUIT-ExtraLight.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./SUIT-ExtraLight.woff2") format("woff2"),
+    url("./SUIT-ExtraLight.woff") format("woff"),
+    url("./SUIT-ExtraLight.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "SUIT";
   font-weight: 400;
-  src: url("./SUIT-Regular.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./SUIT-Regular.woff2") format("woff2"),
+    url("./SUIT-Regular.woff") format("woff"),
+    url("./SUIT-Regular.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "SUIT";
   font-weight: 500;
-  src: url("./SUIT-Medium.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./SUIT-Medium.woff2") format("woff2"),
+    url("./SUIT-Medium.woff") format("woff"),
+    url("./SUIT-Medium.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "SUIT";
   font-weight: 600;
-  src: url("./SUIT-SemiBold.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./SUIT-SemiBold.woff2") format("woff2"),
+    url("./SUIT-SemiBold.woff") format("woff"),
+    url("./SUIT-SemiBold.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "SUIT";
   font-weight: 700;
-  src: url("./SUIT-Bold.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./SUIT-Bold.woff2") format("woff2"),
+    url("./SUIT-Bold.woff") format("woff"),
+    url("./SUIT-Bold.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "SUIT";
   font-weight: 800;
-  src: url("./SUIT-ExtraBold.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./SUIT-ExtraBold.woff2") format("woff2"),
+    url("./SUIT-ExtraBold.woff") format("woff"),
+    url("./SUIT-ExtraBold.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "SUIT";
   font-weight: 900;
-  src: url("./SUIT-Heavy.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./SUIT-Heavy.woff2") format("woff2"),
+    url("./SUIT-Heavy.woff") format("woff"),
+    url("./SUIT-Heavy.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Product Sans";
   font-weight: 400;
-  src: url("./ProductSans-Regular.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./ProductSans-Regular.woff2") format("woff2"),
+    url("./ProductSans-Regular.woff") format("woff"),
+    url("./ProductSans-Regular.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Product Sans";
   font-weight: 700;
-  src: url("./ProductSans-Bold.ttf") format("truetype");
+  font-display: swap;
+  src:
+    url("./ProductSans-Bold.woff2") format("woff2"),
+    url("./ProductSans-Bold.woff") format("woff"),
+    url("./ProductSans-Bold.ttf") format("truetype");
 }
 
 body {

packages/ui/src/components/NavItem/index.tsx

@@ -47,13 +47,12 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
   };
 
   return (
-    <styled.li listStyle="none" role="presentation">
+    <styled.div listStyle="none" role="presentation">
       <Link
         aria-controls={items ? `${name}-submenu` : undefined}
         aria-expanded={expanded ? "true" : "false"}
         aria-haspopup={items?.length && items.length > 1 ? "true" : undefined}
         href={`${href}`}
-        role="menuitem"
         tabIndex={0}
         className={navItemStyle({
           type:
@@ -63,7 +62,7 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
       >
         <Image
           alt={alt}
-          className={css({ width: "20px", height: "20px" })}
+          className={navItemImageStyle}
           height={20}
           src={imageUrl}
           width={20}
@@ -74,15 +73,11 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
         {items?.length && items?.length > 1 && (
           <Image
             alt="toggle-icon"
+            className={toggleIconStyle}
             height={20}
             src={arrowImageUrl}
             style={{ transform: expanded ? "rotate(0deg)" : "rotate(180deg)" }}
             width={20}
-            className={css({
-              width: "20px",
-              height: "20px",
-              marginLeft: "auto",
-            })}
           />
         )}
       </Link>
@@ -101,7 +96,7 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
               >
                 <Image
                   alt={item.alt}
-                  className={css({ width: "20px", height: "20px" })}
+                  className={navItemImageStyle}
                   height={20}
                   src={item.imageUrl}
                   width={20}
@@ -114,7 +109,7 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
           ))}
         </ul>
       )}
-    </styled.li>
+    </styled.div>
   );
 };
 
@@ -139,3 +134,11 @@ const navItemStyle = cva({
     },
   },
 });
+
+const toggleIconStyle = css({
+  width: "20px",
+  height: "20px",
+  marginLeft: "auto",
+});
+
+const navItemImageStyle = css({ width: "20px", height: "20px" });