[Feature] 스터디 기본 정보 조회하기 UI 생성 및 api 연결

apps/admin/apis/study/studyInfoApi.ts

@@ -0,0 +1,47 @@
+import { fetcher } from "@wow-class/utils";
+import { mentorApiPath } from "constants/apiPath";
+import { tags } from "constants/tags";
+import type { AssignmentApiResponseDto } from "types/dtos/assignmentList";
+import type { SessionApiResponseDto } from "types/dtos/sessionList";
+import type { StudyBasicInfoApiResponseDto } from "types/dtos/studyBasicInfo";
+
+export const studyInfoApi = {
+  getStudyBasicInfo: async (studyId: number) => {
+    const response = await fetcher.get<StudyBasicInfoApiResponseDto>(
+      `/common/studies/${studyId}`,
+      {
+        next: { tags: [tags.studyBasicInfo] },
+        cache: "force-cache",
+      }
+    );
+    return response.data;
+  },
+  getAssignmentList: async (studyId: number) => {
+    const response = await fetcher.get<AssignmentApiResponseDto[]>(
+      `${mentorApiPath.assignments}?studyId=${studyId}`,
+      {
+        next: { tags: [tags.assignments] },
+        cache: "force-cache",
+      }
+    );
+    return response.data;
+  },
+  cancelAssignment: async (studyDetailId: number) => {
+    const response = await fetcher.patch(
+      `/mentor/study-details/${studyDetailId}/assignments/cancel`,
+      {}
+    );
+
+    return { success: response.ok };
+  },
+  getSessionList: async (studyId: number) => {
+    const response = await fetcher.get<SessionApiResponseDto[]>(
+      `${mentorApiPath.sessions}?study=${studyId}`,
+      {
+        next: { tags: [tags.sessions] },
+        cache: "force-cache",
+      }
+    );
+    return response.data;
+  },
+};

apps/admin/app/studies/[studyId]/_components/assignment/AssignmentList.tsx

@@ -0,0 +1,27 @@
+import { Space, Text } from "@wow-class/ui";
+import { studyInfoApi } from "apis/study/studyInfoApi";
+
+import AssignmentListItem from "./AssignmentListItem";
+
+const AssignmentList = async ({ studyId }: { studyId: string }) => {
+  const assignmentList = await studyInfoApi.getAssignmentList(
+    parseInt(studyId, 10)
+  );
+
+  return (
+    <section aria-label="assignment-list">
+      <Text typo="h2">주차별 과제</Text>
+      <Space height={24} />
+      {assignmentList?.map((assignment, index) => {
+        return (
+          <AssignmentListItem
+            assignment={assignment}
+            key={`studyDetailId-${index}`}
+          />
+        );
+      })}
+    </section>
+  );
+};
+
+export default AssignmentList;

apps/admin/app/studies/[studyId]/_components/assignment/AssignmentListItem.tsx

@@ -0,0 +1,119 @@
+"use client";
+import { cva } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Table, Text } from "@wow-class/ui";
+import { padWithZero, parseISODate } from "@wow-class/utils";
+import { studyInfoApi } from "apis/study/studyInfoApi";
+import { tags } from "constants/tags";
+import Link from "next/link";
+import type { AssignmentApiResponseDto } from "types/dtos/assignmentList";
+import getIsCurrentWeek from "utils/getIsCurrentWeek";
+import { revalidateTagByName } from "utils/revalidateTagByName";
+import Button from "wowds-ui/Button";
+
+const AssignmentListItem = ({
+  assignment,
+}: {
+  assignment: AssignmentApiResponseDto;
+}) => {
+  const {
+    studyDetailId,
+    title,
+    deadline,
+    week,
+    descriptionLink,
+    assignmentStatus,
+  } = assignment;
+  const thisWeekAssignment = getIsCurrentWeek(deadline);
+  const { year, month, day, hours, minutes } = parseISODate(deadline);
+
+  const studyDeadline = `종료 : ${year}년 ${month}월 ${day}일 ${padWithZero(hours)}:${padWithZero(minutes)}`;
+
+  const handleCancelAssignment = async (studyDetailId: number) => {
+    const { success } = await studyInfoApi.cancelAssignment(studyDetailId);
+    if (success) {
+      window.alert("휴강 처리에 성공했어요.");
+      revalidateTagByName(tags.assignments);
+    } else {
+      window.alert("휴강 처리에 실패했어요.");
+    }
+  };
+  return (
+    <Table>
+      <Table.Left style={TableLeftStyle}>
+        <Flex alignItems="center" gap="xxs">
+          <div
+            className={ThisWeekBarStyle({
+              type: thisWeekAssignment ? "thisWeek" : "notThisWeek",
+            })}
+          />
+          <Text typo="body1">{week}주차</Text>
+        </Flex>
+        <Flex direction="column" gap="xxs">
+          <Text typo="h3">{title || "-"}</Text>
+          <Text color="sub" typo="body2">
+            {deadline ? studyDeadline : "-"}
+          </Text>
+        </Flex>
+      </Table.Left>
+      <Table.Right>
+        <>
+          {assignmentStatus === "OPEN" ? (
+            <Button
+              asProp={Link}
+              href={descriptionLink || ""}
+              size="sm"
+              variant="outline"
+            >
+              과제 내용보기
+            </Button>
+          ) : (
+            <Flex gap="sm">
+              <Button
+                color="sub"
+                size="sm"
+                variant="sub"
+                onClick={() => handleCancelAssignment(studyDetailId)}
+              >
+                과제 휴강처리
+              </Button>
+              <Button
+                size="sm"
+                variant="solid"
+                onClick={() => {
+                  console.log("TODO: 과제 개설 페이지 연결");
+                }}
+              >
+                과제 개설하기
+              </Button>
+            </Flex>
+          )}
+        </>
+      </Table.Right>
+    </Table>
+  );
+};
+export default AssignmentListItem;
+
+const ThisWeekBarStyle = cva({
+  base: {
+    width: "4px",
+    height: "18px",
+  },
+  variants: {
+    type: {
+      thisWeek: {
+        backgroundColor: "primary",
+      },
+      notThisWeek: {
+        backgroundColor: "transparent",
+      },
+    },
+  },
+});
+
+const TableLeftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "47px",
+};

apps/admin/app/studies/[studyId]/_components/attendance/CheckAttendanceNumber.tsx

@@ -0,0 +1,76 @@
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Space, Text } from "@wow-class/ui";
+import Box from "wowds-ui/Box";
+import Tag from "wowds-ui/Tag";
+
+const CheckAttendanceNumber = () => {
+  return (
+    <section>
+      <Text typo="h2">주차별 출결 번호</Text>
+      <Space height={24} />
+      <div className={AttendanceContainerStyle}>
+        <Box
+          style={AttendanceBoxStyle}
+          text={
+            <Flex direction="column" gap="lg">
+              <Flex direction="column" gap="xs">
+                <Flex alignItems="center" gap="xs">
+                  <Text typo="h2">4주차 출결 번호</Text>
+                  <Tag color="blue" variant="solid2">
+                    진행중
+                  </Tag>
+                </Flex>
+                <Text color="sub" typo="body1">
+                  2024년 5월 23일 00:00 - 23:59까지
+                </Text>
+              </Flex>
+              <Text color="primary" style={AttendanceNumberStyle}>
+                2143
+              </Text>
+            </Flex>
+          }
+        />
+        <Box
+          style={AttendanceBoxStyle}
+          text={
+            <Flex direction="column" gap="lg">
+              <Flex direction="column" gap="xs">
+                <Flex alignItems="center" gap="xs">
+                  <Text typo="h2">5주차 출결 번호</Text>
+                  <Tag color="grey" variant="solid2">
+                    진행전
+                  </Tag>
+                </Flex>
+                <Text color="sub" typo="body1">
+                  2024년 5월 23일 00:00 - 23:59까지
+                </Text>
+              </Flex>
+              <Text color="outline" style={AttendanceNumberStyle}>
+                4176
+              </Text>
+            </Flex>
+          }
+        />
+      </div>
+    </section>
+  );
+};
+
+export default CheckAttendanceNumber;
+
+const AttendanceContainerStyle = css({
+  display: "flex",
+  direction: "row",
+  alignItems: "center",
+  gap: "md",
+});
+
+const AttendanceBoxStyle = {
+  maxWidth: "282px",
+};
+
+const AttendanceNumberStyle = {
+  fontSize: "40px",
+  fontWeight: 700,
+};