feat: 스터디 기본 정보 대시보드

GDSC-Hongik · Aug 20, 2024 · fac8392 · fac8392
1 parent df812ba
commit fac8392
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 159 deletions.
diff --git a/apps/admin/app/studies/[study]/_components/Header.tsx b/apps/admin/app/studies/[study]/_components/Header.tsx
@@ -3,18 +3,35 @@
 import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
-import { padWithZero, parseISODate } from "@wow-class/utils";
+import { padWithZero } from "@wow-class/utils";
+import { studyInfoApi } from "apis/study/studyInfoApi";
 import { dayToKorean } from "constants/dayToKorean";
-import { headerMockData } from "constants/mockData";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import type { StudyBasicInfoApiResponseDto } from "types/dtos/studyBasicInfo";
 import { space } from "wowds-tokens";
 import TextButton from "wowds-ui/TextButton";
 
 const Header = ({ studyId }: { studyId: string }) => {
   const [showIntro, setShowIntro] = useState(false);
-  const [studyInfo, setStudyInfo] = useState({});
+  const [studyInfo, setStudyInfo] = useState<
+    StudyBasicInfoApiResponseDto | undefined
+  >(undefined);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (studyId) {
+        const data = await studyInfoApi.getStudyBasicInfo(
+          parseInt(studyId, 10)
+        );
+
+        if (data) setStudyInfo(data);
+      }
+    };
+
+    fetchData();
+  }, [studyId]);
 
   const handleClickShowIntro = () => {
     setShowIntro((prev) => !prev);
@@ -27,129 +44,129 @@ const Header = ({ studyId }: { studyId: string }) => {
     ? "Collapse introduction icon"
     : "Expand introduction icon";
 
-  const {
-    title,
-    academicYear,
-    semester,
-    mentorName,
-    studyType,
-    dayOfWeek,
-    startTime: { hour: startHour, minute: startMinute },
-    endTime: { hour: endHour, minute: endMinute },
-    totalWeek,
-    period: { startDate, endDate },
-    introduction,
-    notionLink,
-  } = headerMockData;
+  if (!studyInfo) return null;
+  else {
+    const {
+      title,
+      academicYear,
+      semester,
+      mentorName,
+      studyType,
+      dayOfWeek,
+      startTime,
+      endTime,
+      totalWeek,
+      period: { startDate, endDate },
+      introduction,
+      notionLink,
+    } = studyInfo;
 
-  const { month: startMonth, day: startDay } = parseISODate(startDate);
-  const { month: endMonth, day: endDay } = parseISODate(endDate);
+    const studySemester = `${academicYear}-${semester === "FIRST" ? 1 : 2}`;
+    const studySchedule = `${dayToKorean[dayOfWeek]} ${padWithZero(startTime[0]!!)}:${padWithZero(startTime[1]!!)}-
+    ${padWithZero(endTime[0]!!)}:${padWithZero(endTime[1]!!)}`;
+    const studyPeriod = `${padWithZero(startDate[1]!!)}.${padWithZero(startDate[2]!!)} -
+    ${padWithZero(endDate[1]!!)}.${padWithZero(endDate[2]!!)}`;
 
-  const studySemester = `${academicYear}-${semester === "FIRST" ? 1 : 2}`;
-  const studySchedule = `${dayToKorean[dayOfWeek]} ${startHour}:${padWithZero(startMinute)}-
-  ${endHour}:${padWithZero(endMinute)}`;
-  const studyPeriod = `${padWithZero(startMonth)}.${padWithZero(startDay)}-
-  ${padWithZero(endMonth)}.${padWithZero(endDay)}`;
-
-  return (
-    <header>
-      <section aria-label="my-study-header">
-        <Flex alignItems="center" gap={8}>
-          <Text as="h1" typo="h1">
-            {title}
-          </Text>
-          <button
-            aria-controls="intro-section"
-            aria-expanded={showIntro}
-            aria-label={introSectionButtonAriaLabel}
-            tabIndex={0}
-            onClick={handleClickShowIntro}
-          >
-            <Image
-              alt={introSectionImageAriaLabel}
-              className={downArrowIconStyle}
-              height={20}
-              src="/images/arrow.svg"
-              style={{ rotate: showIntro ? "0deg" : "180deg" }}
-              width={20}
-            />
-          </button>
-        </Flex>
-      </section>
-      <section>
-        <Space height={8} />
-        <Flex gap="xs">
-          <Text as="h5" color="sub">
-            {studySemester}
-          </Text>
-          <ItemSeparator />
-          <Text as="h5" color="sub">
-            {mentorName} 멘토
-          </Text>
-          <ItemSeparator />
-          <Text as="h5" color="sub">
-            {studyType}
-          </Text>
-        </Flex>
-      </section>
-      {showIntro && (
-        <section id="intro-section">
-          <section aria-labelledby="study-schedule-heading">
-            <Space height={24} />
-            <Flex direction="column" gap="4">
-              <Text as="h3" typo="h3">
-                스터디 일정
-              </Text>
-              <Flex gap="xs">
-                <Text as="h5" color="sub">
-                  {studySchedule}
-                </Text>
-                <ItemSeparator />
-                <Text as="h5" color="sub">
-                  {totalWeek}주 코스
-                </Text>
-                <ItemSeparator />
-                <Text as="h5" color="sub">
-                  {studyPeriod}
+    return (
+      <header>
+        <section aria-label="my-study-header">
+          <Flex alignItems="center" gap={8}>
+            <Text as="h1" typo="h1">
+              {title}
+            </Text>
+            <button
+              aria-controls="intro-section"
+              aria-expanded={showIntro}
+              aria-label={introSectionButtonAriaLabel}
+              tabIndex={0}
+              onClick={handleClickShowIntro}
+            >
+              <Image
+                alt={introSectionImageAriaLabel}
+                className={downArrowIconStyle}
+                height={20}
+                src="/images/arrow.svg"
+                style={{ rotate: showIntro ? "0deg" : "180deg" }}
+                width={20}
+              />
+            </button>
+          </Flex>
+        </section>
+        <section>
+          <Space height={8} />
+          <Flex gap="xs">
+            <Text as="h5" color="sub">
+              {studySemester}
+            </Text>
+            <ItemSeparator />
+            <Text as="h5" color="sub">
+              {mentorName} 멘토
+            </Text>
+            <ItemSeparator />
+            <Text as="h5" color="sub">
+              {studyType}
+            </Text>
+          </Flex>
+        </section>
+        {showIntro && (
+          <section id="intro-section">
+            <section aria-labelledby="study-schedule-heading">
+              <Space height={24} />
+              <Flex direction="column" gap="4">
+                <Text as="h3" typo="h3">
+                  스터디 일정
                 </Text>
+                <Flex gap="xs">
+                  <Text as="h5" color="sub">
+                    {studySchedule}
+                  </Text>
+                  <ItemSeparator />
+                  <Text as="h5" color="sub">
+                    {totalWeek}주 코스
+                  </Text>
+                  <ItemSeparator />
+                  <Text as="h5" color="sub">
+                    {studyPeriod}
+                  </Text>
+                </Flex>
               </Flex>
-            </Flex>
-          </section>
-          <section aria-labelledby="study-intro-heading">
-            <Space height={28} />
-            <Flex direction="column" gap="4">
-              <Text as="h3" typo="h3">
-                스터디 소개
-              </Text>
-              <Flex alignItems="center" gap="sm">
-                <Text as="h5" color="sub">
-                  {introduction}
+            </section>
+            <section aria-labelledby="study-intro-heading">
+              <Space height={28} />
+              <Flex direction="column" gap="4">
+                <Text as="h3" typo="h3">
+                  스터디 소개
                 </Text>
-                <Link
-                  className={introduceLinkStyle}
-                  href={notionLink}
-                  role="button"
-                  tabIndex={0}
-                >
-                  <Image
-                    alt="link-icon"
-                    height={24}
-                    src="/images/link.svg"
-                    width={24}
-                  />
-                  <TextButton
-                    size="lg"
-                    style={textButtonStyle}
-                    text="소개 링크 바로가기"
-                  />
-                </Link>
+                <Flex alignItems="center" gap="sm">
+                  <Text as="h5" color="sub">
+                    {introduction}
+                  </Text>
+                  <Link
+                    className={introduceLinkStyle}
+                    href={notionLink}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <Image
+                      alt="link-icon"
+                      height={24}
+                      src="/images/link.svg"
+                      width={24}
+                    />
+                    <TextButton
+                      size="lg"
+                      style={textButtonStyle}
+                      text="소개 링크 바로가기"
+                    />
+                  </Link>
+                </Flex>
               </Flex>
-            </Flex>
+            </section>
           </section>
-        </section>
-      )}
-    </header>
-  );
+        )}
+      </header>
+    );
+  }
 };
 
 export default Header;

diff --git a/apps/admin/app/studies/_components/StudyList.tsx b/apps/admin/app/studies/_components/StudyList.tsx
@@ -5,7 +5,7 @@ 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 type { StudyKoreanType } from "types/entities/study";
 import isAdmin from "utils/isAdmin";
 import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
@@ -117,7 +117,7 @@ const StudyList = async () => {
 };
 
 const studyTypeColorMap: Record<
-  StudyType,
+  StudyKoreanType,
   ComponentProps<typeof Tag>["color"]
 > = {
   "과제 스터디": "green",

diff --git a/apps/admin/types/dtos/studyBasicInfo.ts b/apps/admin/types/dtos/studyBasicInfo.ts
@@ -1,31 +1,21 @@
-import type { DifficultyType } from "types/entities/difficulty";
+import type { DayOfWeekType, SemesterType } from "types/entities/study";
 
 export interface StudyBasicInfoApiResponseDto {
-  studyId: 0;
+  studyId: number;
   title: string;
-  academicYear: 0;
-  semester: "FIRST";
-  studyType: "string";
-  notionLink: "string";
-  introduction: "string";
-  mentorName: "string";
-  dayOfWeek: "MONDAY";
-  startTime: {
-    hour: 0;
-    minute: 0;
-    second: 0;
-    nano: 0;
-  };
-  endTime: {
-    hour: 0;
-    minute: 0;
-    second: 0;
-    nano: 0;
-  };
-  totalWeek: 0;
+  academicYear: number;
+  semester: SemesterType;
+  studyType: string;
+  notionLink: string;
+  introduction: string;
+  mentorName: string;
+  dayOfWeek: DayOfWeekType;
+  startTime: number[];
+  endTime: number[];
+  totalWeek: number;
   period: {
-    startDate: "2024-08-20T17:19:56.047Z";
-    endDate: "2024-08-20T17:19:56.047Z";
-    open: true;
+    startDate: number[];
+    endDate: number[];
+    open: boolean;
   };
 }
diff --git a/apps/admin/types/dtos/studyList.ts b/apps/admin/types/dtos/studyList.ts
@@ -1,22 +1,19 @@
-import type { StudyType } from "types/entities/study";
+import type {
+  DayOfWeekType,
+  SemesterType,
+  StudyKoreanType,
+} from "types/entities/study";
 
 export interface StudyListApiResponseDto {
   studyId: number;
   academicYear: number;
-  semesterType: "FIRST" | "SECOND";
+  semesterType: SemesterType;
   title: string;
-  studyType: StudyType;
+  studyType: StudyKoreanType;
   notionLink: string;
   introduction: string;
   mentorName: string;
-  dayOfWeek:
-    | "MONDAY"
-    | "TUESDAY"
-    | "WEDNESDAY"
-    | "THURSDAY"
-    | "FRIDAY"
-    | "SATURDAY"
-    | "SUNDAY";
+  dayOfWeek: DayOfWeekType;
   startTime: {
     hour: number;
     minute: number;

diff --git a/apps/admin/types/entities/study.ts b/apps/admin/types/entities/study.ts
@@ -11,4 +11,4 @@ export type SemesterType = "FIRST" | "SECOND";
 
 export type StudyType = "ASSIGNMENT" | "ONLINE" | "OFFLINE";
 
-export type StudyType = "과제 스터디" | "온라인 세션" | "오프라인 세션";
+export type StudyKoreanType = "과제 스터디" | "온라인 세션" | "오프라인 세션";
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,4 +11,4 @@ export type SemesterType = "FIRST" \| "SECOND";

		export type StudyType = "ASSIGNMENT" \| "ONLINE" \| "OFFLINE";

		export type StudyType = "과제 스터디" \| "온라인 세션" \| "오프라인 세션";
		export type StudyKoreanType = "과제 스터디" \| "온라인 세션" \| "오프라인 세션";