[Refactor] : 어드민 서비스 미들웨어 로직 추가 및 스터디 리스트 레이아웃 조정 (#94)

* chore: middleware 캐시 로직 추가

* fix: 오타 수정

* fix: 커리큘럼을 스터디로 변경해요

* feat: Navbar 클릭하면 메인페이지로 이동

* fix: 절대경로 변경

* fix: 스터디 상세 레이아웃 수정

* fix: url constants로 분리

* fix: error처리 삭제, 이름 변경

* fix: 어드민 전용으로 쿠키 이름 변경

* fix: 만료 시간 제거

apps/admin/app/studies/[studyId]/layout.tsx

@@ -14,7 +14,7 @@ const StudyLayout = ({
 };
 
 const MainLayoutStyle = {
-  height: "100vh",
+  height: "100%",
   overflow: "auto",
 };
 

apps/admin/app/studies/_components/StudyListItem.tsx

@@ -30,7 +30,9 @@ const StudyListItem = async ({ study }: { study: StudyListApiResponseDto }) => {
           {academicYear}-{semesterType === "FIRST" ? "1" : "2"}
         </Text>
         <Flex alignItems="center" gap="xs">
-          <Text typo="h3">{title}</Text>
+          <Text style={StudyNameStyle} typo="h3">
+            {title}
+          </Text>
           <Tag color={studyTypeColorMap[studyType]} variant="solid1">
             {studyType}
           </Tag>
@@ -70,8 +72,8 @@ const studyTypeColorMap: Record<
   ComponentProps<typeof Tag>["color"]
 > = {
   "과제 스터디": "green",
-  "온라인 커리큘럼": "blue",
-  "오프라인 커리큘럼": "yellow",
+  "온라인 스터디": "blue",
+  "오프라인 스터디": "yellow",
 };
 
 const LinkStyle = {
@@ -83,12 +85,21 @@ const LinkStyle = {
 
 const TableLeftStyle = {
   display: "flex",
+  flex: 2,
   alignItems: "center",
   gap: "31px",
 };
 
 const TableRightStyle = {
   display: "flex",
+  flex: 3,
   alignItems: "center",
   gap: "64px",
 };
+
+const StudyNameStyle = {
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "150px",
+};

apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyFormatSelect.tsx

@@ -23,7 +23,7 @@ const StudyFormatSelect = () => {
             value="OFFLINE"
             text={
               <Flex alignItems="center" gap="md">
-                <Text typo="body1">오프라인 커리큘럼</Text>
+                <Text typo="body1">오프라인 스터디</Text>
                 <Text color="sub" typo="body2">
                   오프라인으로 진행해요.
                 </Text>
@@ -34,7 +34,7 @@ const StudyFormatSelect = () => {
             value="ONLINE"
             text={
               <Flex alignItems="center" gap="md">
-                <Text typo="body1">온라인 커리큘럼</Text>
+                <Text typo="body1">온라인 스터디</Text>
                 <Text color="sub" typo="body2">
                   온라인으로 진행해요.
                 </Text>

apps/admin/constants/cookieKey.ts

@@ -0,0 +1,4 @@
+export const enum cookieKey {
+  accessToken = "accessToken",
+  "admin-middleware-executed" = "admin-middleware-executed",
+}

apps/admin/constants/url.ts

@@ -0,0 +1,4 @@
+export const clientUrl =
+  process.env.NEXT_PUBLIC_VERCEL_ENV === "production"
+    ? process.env.NEXT_PUBLIC_CLIENT_PROD_URL
+    : process.env.NEXT_PUBLIC_CLIENT_DEV_URL;

apps/admin/hooks/useForm.tsx

@@ -0,0 +1,3 @@
+const useForm = () => {};
+
+export default useForm;

apps/admin/middleware.ts

@@ -1,29 +1,40 @@
 import { dashboardApi } from "apis/auth/dashboardApi";
+import { cookieKey } from "constants/cookieKey";
+import { clientUrl } from "constants/url";
 import { cookies } from "next/headers";
-import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
-
+import setExpireTime from "utils/setExpireTime";
 export const config = {
   matcher: ["/studies/:path*", "/participants/:path*"],
 };
 
-const middleware = async (req: NextRequest) => {
+const middleware = async () => {
   const cookieStore = cookies();
-  const accessToken = cookieStore.get("accessToken")?.value;
+  const accessToken = cookieStore.get(cookieKey.accessToken)?.value;
+  const middlewareExecuted = cookieStore.get(
+    cookieKey["admin-middleware-executed"]
+  )?.value;
 
   if (!accessToken) {
-    return NextResponse.redirect(new URL("/not-found", req.url));
+    return NextResponse.redirect(new URL("/auth", clientUrl));
   }
 
-  const { studyRole, manageRole } = await dashboardApi.getDashboardInfo();
-
-  if (studyRole === "STUDENT" && manageRole === "NONE") {
-    const url =
-      process.env.NEXT_PUBLIC_VERCEL_ENV === "production"
-        ? process.env.NEXT_PUBLIC_CLIENT_PROD_URL
-        : process.env.NEXT_PUBLIC_CLIENT_DEV_URL;
-
-    return NextResponse.redirect(new URL("/auth", url));
+  if (!middlewareExecuted) {
+    try {
+      const { manageRole, studyRole } = await dashboardApi.getDashboardInfo();
+      if (studyRole === "STUDENT" && manageRole === "NONE") {
+        return NextResponse.redirect(new URL("/auth", clientUrl));
+      }
+      const response = NextResponse.next();
+      response.cookies.set(cookieKey["admin-middleware-executed"], "true", {
+        httpOnly: true,
+        secure: true,
+        sameSite: "lax",
+      });
+      return response;
+    } catch (error) {
+      return NextResponse.next();
+    }
   }
 
   return NextResponse.next();

apps/admin/types/entities/study.ts

@@ -11,8 +11,8 @@ export type StudyType = "ASSIGNMENT" | "ONLINE" | "OFFLINE";
 
 export type StudyKoreanType =
   | "과제 스터디"
-  | "온라인 커리큘럼"
-  | "오프라인 커리큘럼";
+  | "온라인 스터디"
+  | "오프라인 스터디";
 
 export type StudyCurriculumType = {
   studyDetailId: number;

apps/admin/utils/setExpireTime.ts

@@ -0,0 +1,8 @@
+const setExpireTime = (hour: number) => {
+  const expires = new Date();
+  expires.setTime(expires.getTime() + hour * 60 * 60 * 1000);
+
+  return expires;
+};
+
+export default setExpireTime;

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

@@ -55,8 +55,7 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
         href={`${href}`}
         tabIndex={0}
         className={navItemStyle({
-          type:
-            !segment[1] && `/${segment[0]}` === href ? "active" : "inactive",
+          type: !segment[1] && `${segment[0]}` === href ? "active" : "inactive",
         })}
         onClick={handleClickNavItem}
       >