[Feature] : 개설된 스터디 보기 api 연동

apps/admin/apis/study/createStudyApi.ts

@@ -0,0 +1,18 @@
+import { fetcher } from "@wow-class/utils";
+import { apiPath } from "constants/apiPath";
+import { tags } from "constants/tags";
+import type { StudyListApiResponseDto } from "types/dtos/studyList";
+
+export const createStudyApi = {
+  getStudyList: async () => {
+    const response = await fetcher.get<StudyListApiResponseDto[]>(
+      apiPath.studyList,
+      {
+        next: { tags: [tags.studyList] },
+        cache: "force-cache",
+      }
+    );
+
+    return response.data;
+  },
+};

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

@@ -0,0 +1,135 @@
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Table, Text } from "@wow-class/ui";
+import { createStudyApi } from "apis/study/createStudyApi";
+import Image from "next/image";
+import Link from "next/link";
+import type { ComponentProps } from "react";
+import type { StudyType } from "types/entities/study";
+import isAdmin from "utils/isAdmin";
+import Button from "wowds-ui/Button";
+import Tag from "wowds-ui/Tag";
+
+const StudyList = async () => {
+  const adminStatus = await isAdmin();
+
+  const studyList = await createStudyApi.getStudyList();
+
+  if (studyList?.length === 0) {
+    return (
+      <Flex
+        alignItems="center"
+        direction="column"
+        gap="xl"
+        height="100%"
+        justifyContent="center"
+        width="100%"
+      >
+        <Image
+          alt="study-empty"
+          height={186}
+          src="/images/empty.svg"
+          width={140}
+        />
+        <Text color="sub" typo="h2">
+          개설된 스터디가 없어요
+        </Text>
+      </Flex>
+    );
+  }
+  return (
+    <section aria-label="study-list" className={SectionStyle}>
+      {studyList?.map(
+        (
+          {
+            studyId,
+            title,
+            studyType,
+            notionLink,
+            mentorName,
+            academicYear,
+            semesterType,
+          },
+          index
+        ) => {
+          return (
+            <Table key={`${index}-${studyId}`}>
+              <Table.Left>
+                <Flex alignItems="center" gap="31px">
+                  <Text typo="body1">
+                    {academicYear}-{semesterType === "FIRST" ? "1" : "2"}
+                  </Text>
+                  <Flex alignItems="center" gap="xs">
+                    <Text typo="h3">{title}</Text>
+                    <Tag color={studyTypeColorMap[studyType]} variant="solid1">
+                      {studyType}
+                    </Tag>
+                  </Flex>
+                </Flex>
+              </Table.Left>
+
+              <Table.Right>
+                <Flex alignItems="center" gap="64px">
+                  <Text typo="body1">{mentorName} 멘토</Text>
+                  <Link
+                    href={notionLink ? notionLink : ""}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      color: "sub",
+                      gap: "8px",
+                    }}
+                  >
+                    <Image
+                      alt="study-link"
+                      height={24}
+                      src="/images/link.svg"
+                      width={24}
+                    />
+                    <Text
+                      color="sub"
+                      style={{ textDecoration: "underline" }}
+                      typo="label1"
+                    >
+                      스터디 소개 페이지
+                    </Text>
+                  </Link>
+                  <Flex alignItems="center" gap="sm">
+                    {adminStatus && (
+                      <Button size="sm" variant="outline">
+                        스터디 삭제
+                      </Button>
+                    )}
+                    <Link href={`/studies/detail-info/${studyId}`}>
+                      <Button size="sm" variant="solid">
+                        상세 정보 입력
+                      </Button>
+                    </Link>
+                  </Flex>
+                </Flex>
+              </Table.Right>
+            </Table>
+          );
+        }
+      )}
+    </section>
+  );
+};
+
+const studyTypeColorMap: Record<
+  StudyType,
+  ComponentProps<typeof Tag>["color"]
+> = {
+  "과제 스터디": "green",
+  "온라인 세션": "blue",
+  "오프라인 세션": "yellow",
+};
+
+export default StudyList;
+
+const SectionStyle = css({
+  width: "100%",
+  height: "100%",
+  overflow: "scroll",
+  scrollbarWidth: "none",
+});

apps/admin/app/studies/detail-info/[studyId]/page.tsx

@@ -0,0 +1,5 @@
+const CreateStudyDetailInfoPage = () => {
+  return <>스터디 상세 작성</>;
+};
+
+export default CreateStudyDetailInfoPage;

apps/admin/app/studies/layout.tsx

@@ -8,8 +8,8 @@ const StudiesLayout = ({
   return (
     <>
       <Navbar />
-      <styled.div padding="54px 101px" width="100%">
-        <Flex direction="column" gap="sm" width="100%">
+      <styled.div height="100vh" padding="54px 101px" width="100%">
+        <Flex direction="column" gap="sm" height="100%" width="100%">
           {children}
         </Flex>
       </styled.div>

apps/admin/app/studies/page.tsx

@@ -1,6 +1,7 @@
 import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 
+import StudyList from "./_components/StudyList";
 import CreateStudyButton from "./create-study/_components/CreateStudyButton";
 
 const StudiesPage = () => {
@@ -10,6 +11,7 @@ const StudiesPage = () => {
         <p className={css({ textStyle: "h1" })}>개설된 스터디</p>
       </Flex>
       <CreateStudyButton />
+      <StudyList />
     </>
   );
 };

apps/admin/constants/apiPath.ts

@@ -1,3 +1,4 @@
 export const enum apiPath {
   dashboard = "/onboarding/members/me/dashboard",
+  studyList = "/admin/studies",
 }

apps/admin/constants/tags.ts

@@ -1,3 +1,4 @@
 export const enum tags {
   dashboard = "dashboard",
+  studyList = "studyList",
 }

apps/admin/types/dtos/studyList.ts

@@ -0,0 +1,28 @@
+import type { StudyType } from "types/entities/study";
+
+export interface StudyListApiResponseDto {
+  studyId: number;
+  academicYear: number;
+  semesterType: "FIRST" | "SECOND";
+  title: string;
+  studyType: StudyType;
+  notionLink: string;
+  introduction: string;
+  mentorName: string;
+  dayOfWeek:
+    | "MONDAY"
+    | "TUESDAY"
+    | "WEDNESDAY"
+    | "THURSDAY"
+    | "FRIDAY"
+    | "SATURDAY"
+    | "SUNDAY";
+  startTime: {
+    hour: number;
+    minute: number;
+    second: number;
+    nano: number;
+  };
+  totalWeek: number;
+  openingDate: string;
+}

apps/admin/types/entities/study.ts

@@ -0,0 +1 @@
+export type StudyType = "과제 스터디" | "온라인 세션" | "오프라인 세션";