[ Feat ] 문제 목록 조회 API 연결 (#224)

* feat: 풀어야 할 문제 API 연결

* feat: 문제 리스트 API 연결

* feat: role에 따라 문제 리스트 뷰 조건적 렌더링

* feat: 대기 중인 문제 API 연결

* feat: 문제 수정 API 연결

* feat: 문제목록 없을 때 렌더링 처리

* feat: userNickname 연결

src/api/problems/index.ts

@@ -1,5 +1,11 @@
 import { kyInstance } from "@/api";
-import type { ProblemContent, ProblemRequest } from "@/api/problems/type";
+import type {
+  EditProblemRequest,
+  GetProblemRequest,
+  ProblemContent,
+  ProblemListResponse,
+  ProblemRequest,
+} from "@/api/problems/type";
 
 export const getProblemInfo = async (problemId: number) => {
   const response = await kyInstance
@@ -21,3 +27,68 @@ export const deleteProblem = (problemId: number) => {
 
   return response;
 };
+
+export const getDeadlineReachedProblems = async (groupId: number) => {
+  const response = await kyInstance
+    .get<ProblemContent[]>(`api/groups/${groupId}/problems/deadline-reached`)
+    .json();
+
+  return response;
+};
+
+export const getInProgressProblems = async ({
+  groupId,
+  page,
+  size,
+}: GetProblemRequest) => {
+  const response = await kyInstance
+    .get<ProblemListResponse>(
+      `api/groups/${groupId}/problems/in-progress?page=${page}&size=${size}`,
+    )
+    .json();
+
+  return response;
+};
+
+export const getExpiredProblems = async ({
+  groupId,
+  page,
+  size,
+}: GetProblemRequest) => {
+  const response = await kyInstance
+    .get<ProblemListResponse>(
+      `api/groups/${groupId}/problems/expired?page=${page}&size=${size}`,
+    )
+    .json();
+
+  return response;
+};
+
+export const getQueuedProblems = async ({
+  groupId,
+  page,
+  size,
+}: GetProblemRequest) => {
+  const response = await kyInstance
+    .get<ProblemListResponse>(
+      `api/groups/${groupId}/problems/queued?page=${page}&size=${size}`,
+    )
+    .json();
+
+  return response;
+};
+
+export const patchProblem = async ({
+  problemId,
+  startDate,
+  endDate,
+}: EditProblemRequest) => {
+  const response = await kyInstance.patch<EditProblemRequest>(
+    `api/problems/${problemId}`,
+    {
+      json: { startDate, endDate },
+    },
+  );
+
+  return response;
+};

src/api/problems/type.ts

@@ -1,3 +1,5 @@
+import type { PaginationResponse } from "@/api/type";
+
 export type ProblemStatus = "inProgressProblems" | "expiredProblems";
 
 export type ProblemContent = {
@@ -14,14 +16,9 @@ export type ProblemContent = {
   inProgress?: boolean;
 };
 
-export type ProblemResponse = ProblemContent[];
 export type ProblemListResponse = {
-  [key in ProblemStatus]: ProblemContent[];
-} & {
-  currentPage: number;
-  totalPages: number;
-  totalItems: number;
-};
+  content: ProblemContent[];
+} & PaginationResponse;
 
 export type ProblemRequest = {
   link: string;
@@ -30,7 +27,13 @@ export type ProblemRequest = {
 };
 
 export type EditProblemRequest = {
-  problemId: number;
-  startDate: string;
-  endDate: string;
+  problemId?: number;
+  startDate: Date;
+  endDate: Date;
+};
+
+export type GetProblemRequest = {
+  groupId: number;
+  page: number;
+  size: number;
 };

src/api/users/index.ts

@@ -18,7 +18,7 @@ export const getUsers = async (userNickname: string) => {
   return response;
 };
 
-export const getMe = async () => {
+export const getMyInfo = async () => {
   const response = await kyInstance.get<UserResponse>("api/users/me").json();
 
   return response;

src/app/[user]/layout.tsx

@@ -1,4 +1,4 @@
-import { getMe } from "@/api/users";
+import { getMyInfo } from "@/api/users";
 import { IcnMy, IcnPlus, IcnSquare } from "@/asset/svg";
 import NavBar from "@/shared/component/NavBar";
 import type { Metadata } from "next";
@@ -15,7 +15,7 @@ export default async function UserLayout({
   children: React.ReactNode;
   params: { user: string };
 }>) {
-  const { nickname } = await getMe();
+  const { nickname } = await getMyInfo();
   const isMe = nickname === user;
 
   return (

src/app/[user]/query.tsx

@@ -0,0 +1,11 @@
+import { getMyInfo } from "@/api/users";
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+export const useMyNicknameQuery = () => {
+  const { data } = useSuspenseQuery({
+    queryKey: ["me"],
+    queryFn: () => getMyInfo(),
+  });
+
+  return data.nickname;
+};

src/app/group/[groupId]/page.tsx

@@ -1,6 +1,6 @@
 import { getGroupInfo, getGroupMemberList } from "@/api/groups";
 import { getAllRanking } from "@/api/groups/ranking";
-import type { ProblemContent } from "@/api/problems/type";
+import { getDeadlineReachedProblems } from "@/api/problems";
 import { listSectionStyle, titleStyle } from "@/app/group/[groupId]/page.css";
 import Sidebar from "@/common/component/Sidebar";
 import ProblemList from "@/shared/component/ProblemList";
@@ -15,51 +15,15 @@ const GroupDashboardPage = async ({
   const groupInfoData = getGroupInfo(+groupId);
   const rankingData = getAllRanking(+groupId);
   const memberData = getGroupMemberList(+groupId);
+  const deadlineReachedData = getDeadlineReachedProblems(+groupId);
 
-  const [groupInfo, rankingInfo, memberInfo] = await Promise.all([
-    groupInfoData,
-    rankingData,
-    memberData,
-  ]);
-
-  const data: ProblemContent[] = [
-    {
-      problemId: 1,
-      link: "",
-      title: "트리에서의 동적 계획법",
-      startDate: "2024-10-10",
-      endDate: "2024-11-01",
-      level: 2,
-      solved: false,
-      submitMemberCount: 50,
-      memberCount: 200,
-      accuracy: 25,
-    },
-    {
-      problemId: 2,
-      link: "",
-      title: "트리에서의 동적 계획법",
-      startDate: "2024-10-10",
-      endDate: "2024-10-14",
-      level: 2,
-      solved: false,
-      submitMemberCount: 50,
-      memberCount: 200,
-      accuracy: 25,
-    },
-    {
-      problemId: 3,
-      link: "",
-      title: "트리에서의 동적 계획법",
-      startDate: "2024-10-10",
-      endDate: "2024-11-01",
-      level: 2,
-      solved: true,
-      submitMemberCount: 50,
-      memberCount: 200,
-      accuracy: 25,
-    },
-  ];
+  const [groupInfo, rankingInfo, memberInfo, deadlineReachedInfo] =
+    await Promise.all([
+      groupInfoData,
+      rankingData,
+      memberData,
+      deadlineReachedData,
+    ]);
 
   return (
     <main className={sidebarWrapper}>
@@ -73,7 +37,7 @@ const GroupDashboardPage = async ({
         <section>
           <ProblemList.Header />
           <ProblemList>
-            {data.map((item) => (
+            {deadlineReachedInfo.map((item) => (
               <ProblemList.Item key={item.problemId} {...item} />
             ))}
           </ProblemList>

src/app/group/[groupId]/problem-list/action.ts

@@ -1,7 +1,7 @@
 "use server";
 
-import { postProblem } from "@/api/problems";
-import type { ProblemRequest } from "@/api/problems/type";
+import { patchProblem, postProblem } from "@/api/problems";
+import type { EditProblemRequest, ProblemRequest } from "@/api/problems/type";
 
 export type problemActionRequest = {
   groupId: number;
@@ -21,5 +21,16 @@ export const postProblemAction = async ({
     endDate,
   };
   const response = await postProblem(groupId, body);
+
+  return response;
+};
+
+export const patchProblemAction = async ({
+  problemId,
+  startDate,
+  endDate,
+}: EditProblemRequest) => {
+  const response = await patchProblem({ problemId, startDate, endDate });
+
   return response;
 };