Groups 목록, 그룹 멤버 찌르기 구현

.storybook/main.ts

@@ -28,7 +28,9 @@ const config = {
   ],
   framework: {
     name: "@storybook/nextjs",
-    options: {},
+    options: {
+      nextConfigPath: "../next.config.ts",
+    },
   },
   staticDirs: [path.resolve(__dirname, "../public")],
   typescript: {
@@ -55,6 +57,18 @@ const config = {
       },
     ];
 
+    // Mock Next.js navigation module
+    if (!config.resolve) {
+      config.resolve = {};
+    }
+    if (!config.resolve.alias) {
+      config.resolve.alias = {};
+    }
+    config.resolve.alias["next/navigation"] = path.resolve(
+      __dirname,
+      "nextjs-mock.ts",
+    );
+
     return config;
   },
 };

.storybook/nextjs-mock.ts

@@ -0,0 +1,48 @@
+// Mock Next.js App Router navigation for Storybook
+const mockRouter = {
+  push: (url: string) => {
+    console.log("Router.push called with:", url);
+  },
+  replace: (url: string) => {
+    console.log("Router.replace called with:", url);
+  },
+  back: () => {
+    console.log("Router.back called");
+  },
+  forward: () => {
+    console.log("Router.forward called");
+  },
+  refresh: () => {
+    console.log("Router.refresh called");
+  },
+  prefetch: (url: string) => {
+    console.log("Router.prefetch called with:", url);
+  },
+};
+
+// Export the functions that next/navigation provides
+export const useRouter = () => mockRouter;
+
+export const useSearchParams = () => new URLSearchParams();
+
+export const usePathname = () => "/";
+
+export const useParams = () => ({});
+
+export const notFound = () => {
+  console.log("notFound called");
+};
+
+export const redirect = (url: string) => {
+  console.log("redirect called with:", url);
+};
+
+// For backward compatibility
+export default {
+  useRouter,
+  useSearchParams,
+  usePathname,
+  useParams,
+  notFound,
+  redirect,
+};

.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
 import "../app/globals.css";
 import "./storybook-fonts.css";
@@ -9,6 +10,7 @@ import {
   Controls,
   Stories,
 } from "@storybook/blocks";
+
 const preview: Preview = {
   tags: ["autodocs"],
   decorators: [
@@ -31,6 +33,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+
     docs: {
       page: () => (
         <>

api/generated/motimo/Api.ts

@@ -342,16 +342,36 @@ export interface PointRs {
   point?: number;
 }
 
-export interface CustomSliceNotificationItemRs {
+export interface CustomPageNotificationItemRs {
   content?: NotificationItemRs[];
-  hasNext?: boolean;
+  /** @format int64 */
+  totalCount?: number;
   /** @format int32 */
-  offset?: number;
+  totalPage?: number;
+  /** @format int32 */
+  page?: number;
   /** @format int32 */
   size?: number;
 }
 
-export type NotificationItemRs = object;
+export interface NotificationItemRs {
+  /**
+   * 알림 아이디입니다.
+   * @format uuid
+   */
+  id?: string;
+  /** 알림 내용 전체입니다. */
+  content?: string;
+  /** 알림 타입입니다. */
+  type?: NotificationItemRsTypeEnum;
+  /**
+   * 알림과 연결되는 항목의 아이디입니다.
+   * @format uuid
+   */
+  referenceId?: string;
+  /** 읽음 여부입니다. */
+  isRead?: boolean;
+}
 
 export interface GroupDetailRs {
   /**
@@ -777,6 +797,15 @@ export enum TodoRsStatusEnum {
   INCOMPLETE = "INCOMPLETE",
 }
 
+/** 알림 타입입니다. */
+export enum NotificationItemRsTypeEnum {
+  REACTION = "REACTION",
+  POKE = "POKE",
+  TODO_DUE_DAY = "TODO_DUE_DAY",
+  GROUP_TODO_COMPLETED = "GROUP_TODO_COMPLETED",
+  GROUP_TODO_RESULT_COMPLETED = "GROUP_TODO_RESULT_COMPLETED",
+}
+
 export enum GroupMessageContentTypeEnum {
   JOIN = "JOIN",
   LEAVE = "LEAVE",
@@ -1998,18 +2027,21 @@ export class Api<SecurityDataType extends unknown> {
      * @summary 알림 목록 API
      * @request GET:/v1/notifications
      * @secure
-     * @response `200` `CustomSliceNotificationItemRs` OK
+     * @response `200` `CustomPageNotificationItemRs` OK
      */
     getNotificationList: (
       query: {
+        /**
+         * @format int32
+         * @default 0
+         */
+        page?: number;
         /** @format int32 */
-        offset: number;
-        /** @format int32 */
-        limit: number;
+        size: number;
       },
       params: RequestParams = {},
     ) =>
-      this.http.request<CustomSliceNotificationItemRs, any>({
+      this.http.request<CustomPageNotificationItemRs, any>({
         path: `/v1/notifications`,
         method: "GET",
         query: query,

api/hooks.ts

@@ -1,5 +1,6 @@
 import { SWRConfiguration } from "swr";
 import { useApiQuery } from "./useApiQuery";
+import { GetGroupChatParamsDirectionEnum } from "./generated/motimo/Api";
 
 export const useQuery = {
   // Todo API
@@ -40,15 +41,35 @@ export const useQuery = {
   goalsNotInGroup: (config?: SWRConfiguration) =>
     useApiQuery("목표Api", "getGoalNotJoinGroup", [], undefined, config),
 
-  // // Sub Goal API
-  // subGoalTodos: (subGoalId: string | null, config?: SWRConfiguration) =>
-  //   useApiQuery(
-  //     "세부목표Api",
-  //     "getIncompleteOrTodayTodos",
-  //     subGoalId ? [subGoalId] : null,
-  //     undefined,
-  //     config,
-  //   ),
+  // Sub Goal API
+  subGoalTodos: (
+    subGoalId: string | null,
+    offset: number = 0,
+    size: number = 10,
+    config?: SWRConfiguration,
+  ) =>
+    useApiQuery(
+      "세부목표Api",
+      "getIncompleteOrTodayTodosWithSlice",
+      subGoalId ? [subGoalId, { offset, size }] : null,
+      undefined,
+      config,
+    ),
+
+  // Sub Goal API - All todos (complete and incomplete)
+  allSubGoalTodos: (
+    subGoalId: string | null,
+    offset: number = 0,
+    size: number = 10,
+    config?: SWRConfiguration,
+  ) =>
+    useApiQuery(
+      "세부목표Api",
+      "getTodosBySubGoalIdWithSlice",
+      subGoalId ? [subGoalId, { offset, size }] : null,
+      undefined,
+      config,
+    ),
 
   // User API
   myProfile: (config?: SWRConfiguration) =>
@@ -64,19 +85,42 @@ export const useQuery = {
       config,
     ),
 
-  // groupChat: (
-  //   groupId: string | null,
-  //   page: number,
-  //   size: number,
-  //   config?: SWRConfiguration,
-  // ) =>
-  //   useApiQuery(
-  //     "그룹Api",
-  //     "getGroupChat",
-  //     groupId ? [groupId, { page, size }] : null,
-  //     undefined,
-  //     config,
-  //   ),
+  groupChat: (
+    groupId: string | null,
+    limit?: string,
+    cursor?: string,
+    direction?: GetGroupChatParamsDirectionEnum,
+    config?: SWRConfiguration,
+  ) =>
+    useApiQuery(
+      "그룹Api",
+      "getGroupChat",
+      groupId ? [groupId, { limit, cursor, direction }] : null,
+      undefined,
+      config,
+    ),
+
+  groupDetail: (groupId: string | null, config?: SWRConfiguration) =>
+    useApiQuery(
+      "그룹Api",
+      "getGroupDetail",
+      groupId ? [groupId] : null,
+      undefined,
+      config,
+    ),
+
+  newGroupMessages: (
+    groupId: string | null,
+    latestCursor?: string,
+    config?: SWRConfiguration,
+  ) =>
+    useApiQuery(
+      "그룹Api",
+      "getNewGroupMessages",
+      groupId ? [groupId, { latestCursor }] : null,
+      undefined,
+      config,
+    ),
 
   joinedGroups: (config?: SWRConfiguration) =>
     useApiQuery("그룹Api", "getJoinedGroups", [], undefined, config),
@@ -87,6 +131,24 @@ export const useQuery = {
 
   cheerPhrase: (config?: SWRConfiguration) =>
     useApiQuery("응원Api", "getCheerPhrase", [], undefined, config),
+
+  // Completed Goals API
+  completedGoals: (config?: SWRConfiguration) =>
+    useApiQuery("목표Api", "getCompletedGoals", [], undefined, config),
+
+  // Health API
+  health: (config?: SWRConfiguration) =>
+    useApiQuery("healthController", "health", [], undefined, config),
+
+  // Notification API
+  notifications: (page: number = 0, size: number, config?: SWRConfiguration) =>
+    useApiQuery(
+      "알림Api",
+      "getNotificationList",
+      [{ page, size }],
+      undefined,
+      config,
+    ),
 };
 
 // Legacy hooks for backward compatibility (이전 방식과 호환성 유지)
@@ -96,10 +158,16 @@ export const useGoals = useQuery.goals;
 export const useGoalDetail = useQuery.goalDetail;
 export const useGoalWithSubGoals = useQuery.goalWithSubGoals;
 export const useGoalsNotInGroup = useQuery.goalsNotInGroup;
-// export const useSubGoalTodos = useQuery.subGoalTodos;
+export const useSubGoalTodos = useQuery.subGoalTodos;
 export const useMyProfile = useQuery.myProfile;
 export const useGroupMembers = useQuery.groupMembers;
-// export const useGroupChat = useQuery.groupChat;
+export const useGroupChat = useQuery.groupChat;
+export const useGroupDetail = useQuery.groupDetail;
+export const useNewGroupMessages = useQuery.newGroupMessages;
 export const useJoinedGroups = useQuery.joinedGroups;
 export const usePoints = useQuery.points;
 export const useCheerPhrase = useQuery.cheerPhrase;
+export const useNotifications = useQuery.notifications;
+export const useCompletedGoals = useQuery.completedGoals;
+export const useHealth = useQuery.health;
+export const useAllSubGoalTodos = useQuery.allSubGoalTodos;

api/service.ts

@@ -41,14 +41,15 @@ export type ApiMethodParams<
 > = ApiClient[T][M] extends (...args: infer P) => any ? P : never;
 
 // 개별 API 그룹들을 직접 export하여 사용하기 편하게 함
+export const userApi = api.사용자Api;
 export const todoApi = api.투두Api;
 export const goalApi = api.목표Api;
 export const subGoalApi = api.세부목표Api;
 export const groupApi = api.그룹Api;
-// export const pokeApi = api.찌르기Api;
 export const authApi = api.authController;
-export const userApi = api.사용자Api;
 export const pointApi = api.포인트Api;
+export const notificationApi = api.알림Api;
 export const cheerApi = api.응원Api;
+export const healthApi = api.healthController;
 
 export default api;

api/useApiQuery.ts

@@ -32,6 +32,11 @@ export function useApiQuery<
       ? null
       : () => {
           const apiGroupInstance = api[apiGroup] as any;
+
+          if (!apiGroupInstance) {
+            throw new Error(`API group ${String(apiGroup)} not found`);
+          }
+
           const methodFunction = apiGroupInstance[method] as any;
 
           if (typeof methodFunction !== "function") {
@@ -41,9 +46,16 @@ export function useApiQuery<
           }
 
           // params가 배열이면 spread, 아니면 그대로 전달
-          return Array.isArray(params) && params.length > 0
-            ? methodFunction(...params)
-            : methodFunction();
+          try {
+            return Array.isArray(params) && params.length > 0
+              ? methodFunction(...params)
+              : methodFunction();
+          } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            throw new Error(
+              `Failed to call ${String(apiGroup)}.${String(method)}: ${errorMessage}`,
+            );
+          }
         },
     config,
   );