[Feature] 스터디 수강신청 api 연결 (#31)

* feat: 스터디 신청 api 연결 및 응답 포맷팅 로직 추가 * feat: body 추가 * feat: 헤더 뺀 부분 * refactor: parseDate 상단에서 하도록 수정, padWitZero 유틸 추가 * feat: padWithZero export * feat: utils 패키지에 next 설치 * fix: fetcher 클래스 client, server 환경 분리 로직 추가 * chore: root 의존성 충돌 문제 해결 * chore: 불필요한 헤더 주입 로직 삭제 * chore: admin 헤더 관련 로직 삭제 * fix: 빌드 실패하는 문제 해결 * feat: async await 으로 변경, success 여부만 넘기는 것으로 * refactor: Table.Content 삭제, 핸들러 이름 변경 * feat: 에러 페이지 추가, header 제거 * feat: Table export 추가 및 빌드 스크립트 수정 * fix: 빌드 에러 수정 * feat: Table Content 부분 삭제 * fix: 구조분해할당으로 리팩토링 * fix: respose.ok 값 체크 * chore: 필요없는 주석 제거 * chore: notion link 로 열리게 수정 --------- Co-authored-by: ghdtjgus76 <[email protected]>
GDSC-Hongik · Aug 19, 2024 · 55b19a2 · 55b19a2
1 parent e2f6fe0
commit 55b19a2
Show file tree

Hide file tree

Showing 24 changed files with 275 additions and 161 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -6,7 +6,7 @@ on:
       - main
       - dev
   pull_request:
-    types: [opened, ready_for_review, converted_to_draft]
+    types: [opened, ready_for_review, converted_to_draft, synchronize]
     branches:
       - main
       - dev
@@ -34,7 +34,7 @@ jobs:
           run_install: false
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --no-frozen-lockfile
 
       - name: Run build
         run: pnpm run build
diff --git a/apps/admin/apis/auth/dashboardApi.ts b/apps/admin/apis/auth/dashboardApi.ts
@@ -1,21 +1,14 @@
 import { fetcher } from "@wow-class/utils";
 import { apiPath } from "constants/apiPath";
 import { tags } from "constants/tags";
-import { cookies } from "next/headers";
-import type { DashboardApiResponseDto } from "types/dto/auth";
+import type { DashboardApiResponseDto } from "types/dtos/auth";
 
 export const dashboardApi = {
   getDashboardInfo: async () => {
-    const cookieStore = cookies();
-    const accessToken = cookieStore.get("accessToken")?.value;
-
     const response = await fetcher.get<DashboardApiResponseDto>(
       apiPath.dashboard,
       {
         next: { tags: [tags.dashboard] },
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-        },
       }
     );
 

diff --git a/apps/admin/middleware.ts b/apps/admin/middleware.ts
@@ -25,11 +25,8 @@ const middleware = async (req: NextRequest) => {
 
     return NextResponse.redirect(new URL("/auth", url));
   }
-  const response = NextResponse.next();
 
-  response.headers.set("Authorization", `Bearer ${accessToken}`);
-
-  return response;
+  return NextResponse.next();
 };
 
 export default middleware;
diff --git a/apps/client/apis/dashboardApi.ts b/apps/client/apis/dashboardApi.ts
@@ -1,22 +1,14 @@
 import { fetcher } from "@wow-class/utils";
 import { apiPath } from "constants/apiPath";
 import { tags } from "constants/tags";
-import { cookies } from "next/headers";
 import type { DashboardApiResponseDto } from "types/dtos/auth";
 
 export const dashboardApi = {
   getDashboardInfo: async () => {
-    const cookieStore = cookies();
-    const accessToken = cookieStore.get("accessToken")?.value;
-
-    // NOTE: middleware에서 호출하기 위해서 별도로 헤더 주입
     const response = await fetcher.get<DashboardApiResponseDto>(
       apiPath.dashboard,
       {
         next: { tags: [tags.dashboard] },
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-        },
       }
     );
 

diff --git a/apps/client/apis/studyApplyApi.ts b/apps/client/apis/studyApplyApi.ts
@@ -0,0 +1,31 @@
+import { fetcher } from "@wow-class/utils";
+import { apiPath } from "constants/apiPath";
+import { tags } from "constants/tags";
+import type { StudyListApiResponseDto } from "types/dtos/apply-study";
+
+export const studyApplyApi = {
+  getStudyList: async () => {
+    const response = await fetcher.get<StudyListApiResponseDto[]>(
+      apiPath.applyStudy,
+      {
+        next: { tags: [tags.studyApply] },
+        cache: "force-cache",
+      }
+    );
+
+    return response.data;
+  },
+  applyStudy: async (studyId: number) => {
+    const response = await fetcher.post(
+      `${apiPath.applyStudy}/${studyId}`,
+      null
+    );
+
+    return { success: response.ok };
+  },
+  cancelStudyApplication: async (studyId: number) => {
+    const response = await fetcher.delete(`${apiPath.applyStudy}/${studyId}`);
+
+    return { success: response.ok };
+  },
+};
diff --git a/apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkHistory.tsx b/apps/client/app/(afterLogin)/my-study/my-homework/_components/HomeworkHistory.tsx
@@ -1,4 +1,4 @@
-import { styled } from "@styled-system/jsx";
+import { Flex, styled } from "@styled-system/jsx";
 import { Space, Table, Text } from "@wow-class/ui";
 import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
@@ -22,10 +22,12 @@ export const HomeworkHistory = () => {
               1주차
             </Text>
             <Space width={50} />
-            <Table.Content
-              subText="종료 : 2024년 5월 23일 23:59"
-              text="(과제 제목) HTTP 통신 코드 작성하기"
-            />
+            <Flex direction="column" gap="xxs" justifyContent="center">
+              <Text typo="h3">(과제 제목) HTTP 통신 코드 작성하기</Text>
+              <Text color="sub" typo="body2">
+                종료 : 2024년 5월 23일 23:59
+              </Text>
+            </Flex>
           </Table.Left>
           <Table.Right>
             <styled.div paddingX="36px">

diff --git a/apps/client/app/(afterLogin)/study-apply/_components/StudyItem.tsx b/apps/client/app/(afterLogin)/study-apply/_components/StudyItem.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Flex, styled } from "@styled-system/jsx";
+import { Table, Text } from "@wow-class/ui";
+import { parseISODate, splitTime } from "@wow-class/utils";
+import { studyApplyApi } from "apis/studyApplyApi";
+import { dayToKorean } from "constants/dayToKorean";
+import type { ComponentProps } from "react";
+import type { StudyListApiResponseDto } from "types/dtos/apply-study";
+import Button from "wowds-ui/Button";
+import Tag from "wowds-ui/Tag";
+
+interface StudyItemProps {
+  study: StudyListApiResponseDto;
+}
+
+const StudyItem = ({ study }: StudyItemProps) => {
+  const {
+    studyId,
+    title,
+    introduction,
+    notionLink,
+    mentorName,
+    studyType,
+    dayOfWeek,
+    startTime: startTimeString,
+    openingDate: openingDateString,
+    totalWeek,
+  } = study;
+
+  const handleClickApplyButton = async () => {
+    const result = await studyApplyApi.applyStudy(studyId);
+
+    if (!result.success) {
+      console.error("스터디 신청 실패");
+    } else {
+      console.log("스터디 신청 성공");
+    }
+  };
+
+  const handleClickCancelButton = async () => {
+    const result = await studyApplyApi.cancelStudyApplication(studyId);
+
+    if (!result.success) {
+      console.error("스터디 신청 실패");
+    } else {
+      console.log("스터디 취소 성공");
+    }
+  };
+
+  const startTime = splitTime(startTimeString);
+  const openingDate = parseISODate(openingDateString);
+  const studyTime = `${dayToKorean[dayOfWeek.toUpperCase()]} ${startTime.hours}:${startTime.minutes} - ${
+    Number(startTime.hours) + 1
+  }:${startTime.minutes}`;
+
+  return (
+    <Table>
+      <Flex direction="column" gap="xxs" justifyContent="center">
+        <Flex gap="xs">
+          <Text typo="h3">{title}</Text>
+          <Tag color={sessionColors[studyType] ?? "green"} variant="solid1">
+            {studyType}
+          </Tag>
+        </Flex>
+        <Text color="sub" typo="body2">
+          {`${introduction} -`}
+          <a href={notionLink} target="_blank">
+            {notionLink}
+          </a>
+        </Text>
+      </Flex>
+      <Text className={textCellStyle}>{mentorName}</Text>
+      <Text className={textCellStyle}>{studyTime}</Text>
+      <Text className={textCellStyle}>{totalWeek}주 코스</Text>
+      <Text className={textCellStyle}>
+        {`${openingDate.month}.${openingDate.day} 개강`}
+      </Text>
+      <styled.div paddingX="24px">
+        <Button size="sm" variant="solid" onClick={handleClickApplyButton}>
+          수강 신청
+        </Button>
+        <Button size="sm" variant="solid" onClick={handleClickCancelButton}>
+          신청 취소
+        </Button>
+      </styled.div>
+    </Table>
+  );
+};
+
+const textCellStyle = css({
+  paddingX: "28px",
+});
+
+const sessionColors: Record<string, ComponentProps<typeof Tag>["color"]> = {
+  "과제 스터디": "green",
+  "온라인 세션": "blue",
+  "오프라인 세션": "yellow",
+};
+
+export default StudyItem;
diff --git a/apps/client/app/(afterLogin)/study-apply/_components/index.ts b/apps/client/app/(afterLogin)/study-apply/_components/index.ts
@@ -0,0 +1 @@
+export { default as StudytItem } from "./StudyItem";
diff --git a/apps/client/app/(afterLogin)/study-apply/page.tsx b/apps/client/app/(afterLogin)/study-apply/page.tsx
@@ -1,45 +1,22 @@
-import { css } from "@styled-system/css";
-import { styled } from "@styled-system/jsx";
-import { Space, Table, Text } from "@wow-class/ui";
-import Button from "wowds-ui/Button";
-import Tag from "wowds-ui/Tag";
+import { Space, Text } from "@wow-class/ui";
+import { studyApplyApi } from "apis/studyApplyApi";
+
+import StudyItem from "./_components/StudyItem";
+
+const StudyApplyPage = async () => {
+  const studyList = await studyApplyApi.getStudyList();
 
-const StudyApplyPage = () => {
-  const array = [0, 1, 2];
   return (
     <>
       <Text as="h1" typo="h1">
         신청 가능한 스터디
       </Text>
       <Space height={19} />
-      {array.map(() => (
-        <Table>
-          <Table.Content
-            subText="(스터디 한 줄 소개-스터디 상세 설명 노션 링크로 연결)"
-            text="기초 웹 스터디"
-            rightContent={
-              <Tag color="yellow" variant="solid1">
-                신규
-              </Tag>
-            }
-          />
-          <Text className={textCellStyle}>강가은 멘토</Text>
-          <Text className={textCellStyle}>화 18:00-19:00</Text>
-          <Text className={textCellStyle}>4주 코스</Text>
-          <Text className={textCellStyle}>06.18 개강</Text>
-          <styled.div paddingX="24px">
-            <Button size="sm" variant="solid">
-              수강 신청
-            </Button>
-          </styled.div>
-        </Table>
+      {studyList?.map((study) => (
+        <StudyItem key={study.studyId} study={study} />
       ))}
     </>
   );
 };
 
 export default StudyApplyPage;
-
-const textCellStyle = css({
-  paddingX: "28px",
-});
diff --git a/apps/client/app/error.tsx b/apps/client/app/error.tsx
@@ -0,0 +1,6 @@
+"use client";
+const ErrorPage = () => {
+  return <div>error</div>;
+};
+
+export default ErrorPage;
diff --git a/apps/client/constants/apiPath.ts b/apps/client/constants/apiPath.ts
@@ -1,3 +1,5 @@
 export const enum apiPath {
   dashboard = "/onboarding/members/me/dashboard",
+
+  applyStudy = "/studies/apply",
 }
diff --git a/apps/client/constants/dayToKorean.ts b/apps/client/constants/dayToKorean.ts
@@ -0,0 +1,9 @@
+export const dayToKorean: Record<string, string> = {
+  MONDAY: "월",
+  TUESDAY: "화",
+  WEDNESDAY: "수",
+  THURSDAY: "목",
+  FRIDAY: "금",
+  SATURDAY: "토",
+  SUNDAY: "일",
+};
diff --git a/apps/client/constants/tags.ts b/apps/client/constants/tags.ts
@@ -1,3 +1,4 @@
 export const enum tags {
   dashboard = "dashboard",
+  studyApply = "studyApply",
 }
diff --git a/apps/client/types/dtos/apply-study.ts b/apps/client/types/dtos/apply-study.ts
@@ -0,0 +1,19 @@
+export interface StudyListApiResponseDto {
+  studyId: number;
+  title: string;
+  studyType: string;
+  notionLink: string;
+  introduction: string;
+  mentorName: string;
+  dayOfWeek:
+    | "MONDAY"
+    | "TUESDAY"
+    | "WEDNESDAY"
+    | "THURSDAY"
+    | "FRIDAY"
+    | "SATURDAY"
+    | "SUNDAY";
+  startTime: string;
+  totalWeek: number;
+  openingDate: string;
+}
diff --git a/package.json b/package.json
@@ -46,7 +46,6 @@
     "clsx": "^2.1.1",
     "wowds-icons": "^0.1.3",
     "wowds-tokens": "^0.1.1",
-    "wowds-ui": "^0.1.8",
-    "wowds-icons": "^0.1.2"
+    "wowds-ui": "^0.1.8"
   }
 }