Merge pull request #178 from SOPT-36-NINEDOT/feat/#134/lowerGoalApi

[Feat]: 하위 목표 뷰 남은 API 연결

Author: shinjigu

src/api/constant/queryKey.ts

@@ -17,8 +17,11 @@ export const QUERY_KEY = {
   STREAK: (mandalartId: number) => ['streaks', mandalartId],
   JOB_LIST: ['jobList'],
   RECOMMENDED_TODO: (mandalartId: number) => ['recommendedTodo', mandalartId],
-  MANDAL_ALL: ['mandalAll'] as const,
+  MANDAL_ALL: ['mandaclAll'] as const,
   CORE_GOALS: ['coreGoals'],
   PERSONA: 'persona',
+  UPDATE_SUB_GOAL: (id: number) => ['updateSubGoal', id],
+  DELETE_SUB_GOAL: (id: number) => ['deleteSubGoal', id],
+  OVERALL_GOAL: ['overallGoal'],
   USER_INFO: ['userInfo'],
 } as const;

src/api/domain/lowerTodo/hook/useDeleteSubGoal.ts

@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { deleteSubGoal } from '../index';
+
+import { QUERY_KEY } from '@/api/constant/queryKey';
+
+export const useDeleteSubGoal = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (subGoalId: number) => deleteSubGoal(subGoalId),
+    onSuccess: (_, subGoalId) => {
+      queryClient.invalidateQueries({
+        queryKey: QUERY_KEY.SUB_GOAL_IDS(subGoalId),
+        exact: true,
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['subGoals'],
+        refetchType: 'active',
+      });
+    },
+  });
+};

src/api/domain/lowerTodo/hook/useOverallGoal.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getOverallGoal } from '../index';
+
+import { QUERY_KEY } from '@/api/constant/queryKey';
+
+export const useOverallGoal = (mandalartId: number) => {
+  return useQuery({
+    queryKey: [QUERY_KEY.OVERALL_GOAL, mandalartId],
+    queryFn: () => getOverallGoal(mandalartId),
+    enabled: !!mandalartId,
+  });
+};

src/api/domain/lowerTodo/hook/useUpdateSubGoal.ts

@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { updateSubGoal } from '../index';
+import type { UpdateSubGoalRequest } from '../type/updateSubGoal.request';
+
+import { QUERY_KEY } from '@/api/constant/queryKey';
+
+export const useUpdateSubGoal = (subGoalId: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (payload: UpdateSubGoalRequest) => updateSubGoal(subGoalId, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: QUERY_KEY.SUB_GOAL_IDS(subGoalId),
+        exact: true,
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['subGoals'],
+        refetchType: 'active',
+      });
+    },
+  });
+};

src/api/domain/lowerTodo/index.ts

@@ -6,10 +6,12 @@ import type {
   AiRecommendSubGoalRequest,
   AiRecommendSubGoalResponse,
 } from './type/aiRecommendSubGoal';
+import type { UpdateSubGoalRequest } from './type/updateSubGoal.request';
 
-import { get, post } from '@/api';
+import { get, post, api } from '@/api';
 import { END_POINT } from '@/api/constant/endPoint';
 import type { BaseResponse } from '@/type/api';
+import axiosInstance from '@/api/axiosInstance';
 
 export const getCoreGoals = async (mandalartId: number) => {
   const { data } = await get<BaseResponse<GetCoreGoalsResponse>>(
@@ -83,3 +85,16 @@ export const postAiRecommendSubGoals = async (
   const { data } = await post(`/core-goals/${coreGoalSnapshotId}/sub-goals/ai`, { goals });
   return data;
 };
+
+export const updateSubGoal = async (subGoalId: number, payload: UpdateSubGoalRequest) => {
+  return (await api.patch(`/sub-goals/${subGoalId}`, payload)).data;
+};
+
+export const deleteSubGoal = async (subGoalId: number) => {
+  return (await api.delete(`/sub-goals/${subGoalId}`)).data;
+};
+
+export const getOverallGoal = async (mandalartId: number): Promise<{ title: string }> => {
+  const response = await axiosInstance.get(`/mandalarts/${mandalartId}`);
+  return response.data.data;
+};

src/api/domain/lowerTodo/type/updateSubGoal.request.ts

@@ -0,0 +1,4 @@
+export interface UpdateSubGoalRequest {
+  title: string;
+  cycle: 'DAILY' | 'WEEKLY' | 'ONCE';
+}

src/common/component/MandalartTextField/MandalartTextField.css.ts

@@ -15,6 +15,7 @@ const bigGoalBase = {
   fontSize: fonts.title01.fontSize,
   fontWeight: fonts.title01.fontWeight,
   lineHeight: fonts.title01.lineHeight,
+  color: colors.grey10,
 };
 const subGoalBase = {
   display: 'flex',
@@ -27,6 +28,7 @@ const subGoalBase = {
   fontSize: fonts.subtitle03.fontSize,
   fontWeight: fonts.subtitle03.fontWeight,
   lineHeight: fonts.subtitle03.lineHeight,
+  color: colors.grey10,
 };
 const todoBase = {
   display: 'flex',
@@ -39,6 +41,7 @@ const todoBase = {
   fontSize: fonts.subtitle03.fontSize,
   fontWeight: fonts.subtitle03.fontWeight,
   lineHeight: fonts.subtitle03.lineHeight,
+  color: '#111111',
 };
 
 export const bigGoalBaseClass = style(bigGoalBase);
@@ -53,7 +56,7 @@ export const inputBase = style({
   border: 'none',
   outline: 'none',
   padding: 0,
-  color: 'inherit',
+  color: colors.grey10,
 });
 
 const makeInputStyle = (font: Record<string, string | number>) =>

src/common/component/MandalartTextField/MandalartTextField.tsx

@@ -107,11 +107,7 @@ const TextField = ({
   const effectivePlaceholder = getPlaceholder(variant, placeholder);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    if (effectiveMaxLength && newValue.length > effectiveMaxLength) {
-      return;
-    }
-    onChange(newValue);
+    onChange(e.target.value);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

src/page/home/StartButton/StartButton.tsx

@@ -1,5 +1,4 @@
 import type { buttonHandlerType } from '@/page/home/type/buttonHandlerType';
-
 import { startButton } from '@/page/home/StartButton/StartButton.css';
 
 const StartButton = ({ onClick }: buttonHandlerType) => {