Merge feat/#2 into master

kimhyunjee · kimhyunjee · commit fc46ca3e77b3 · 2026-03-15T19:47:27.000+09:00
diff --git a/entities/goal/type/index.ts b/entities/goal/type/index.ts
@@ -0,0 +1,9 @@
+export interface MyGoalDTO {
+  id: string;
+  title: string;
+  createdAt: string;
+  updatedAt: string;
+  totalTaskCount: number;
+  completedTaskCount: number;
+  achievementRate: number;
+}
diff --git a/entities/task/type/index.ts b/entities/task/type/index.ts
@@ -1,10 +1,10 @@
 type TaskStatus = 'TODO' | 'DONE';
 
 interface Task {
-  id: number;
+  id: string;
   title: string;
   status: TaskStatus;
-  goalId: number;
+  goalId: string;
   taskDate: Date;
   createdAt: Date;
   updatedAt: Date;
@@ -17,10 +17,10 @@ interface TaskFilter {
 }
 
 interface TaskDTO {
-  id: number;
+  id: string;
   title: string;
   status: TaskStatus;
-  goalId: number;
+  goalId: string;
   taskDate: string;
   createdAt: string;
   updatedAt: string;
diff --git a/features/goals/Goals.tsx b/features/goals/Goals.tsx
@@ -9,18 +9,35 @@ import { GoalCard } from 'features/goals/ui/GoalCard';
 export interface Goal {
   id: string;
   title: string;
-  completed: number;
-  total: number;
+  completedTaskCount: number;
+  totalTaskCount: number;
+  achievementRate?: number;
 }
 
 export function Goals() {
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
-  const { goals, addGoal } = useGoals();
+  const { goals, addGoal, loading, error } = useGoals();
 
   const handleAddGoalClick = () => {
     setIsAddModalOpen(true);
   };
 
+  if (loading) {
+    return (
+      <div className="flex min-h-full flex-col items-center justify-center bg-gray-50 p-10">
+        <p className="text-sub2">로딩 중...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex min-h-full flex-col items-center justify-center bg-gray-50 p-10">
+        <p className="text-red-500">목표를 불러오는 중 오류가 발생했습니다.</p>
+      </div>
+    );
+  }
+
   if (goals.length === 0) {
     return (
       <div className="flex min-h-full flex-col bg-gray-50 p-10">
diff --git a/features/goals/api/createGoal.mutation.ts b/features/goals/api/createGoal.mutation.ts
@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_GOAL_MUTATION = gql`
+  mutation createGoal($input: CreateGoalInput!) {
+    createGoal(input: $input) {
+      id
+      title
+      createdAt
+      updatedAt
+      totalTaskCount
+      completedTaskCount
+      achievementRate
+    }
+  }
+`;
diff --git a/features/goals/api/myGoals.query.ts b/features/goals/api/myGoals.query.ts
@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const MY_GOALS_QUERY = gql`
+  query myGoals {
+    myGoals {
+      id
+      title
+      createdAt
+      updatedAt
+      totalTaskCount
+      completedTaskCount
+      achievementRate
+    }
+  }
+`;
diff --git a/features/goals/api/updateGoal.mutation.ts b/features/goals/api/updateGoal.mutation.ts
@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_GOAL_MUTATION = gql`
+  mutation updateGoal($input: UpdateGoalInput!) {
+    updateGoal(input: $input) {
+      id
+      title
+      createdAt
+      updatedAt
+      totalTaskCount
+      completedTaskCount
+      achievementRate
+    }
+  }
+`;
diff --git a/features/goals/model/useCreateGoal.ts b/features/goals/model/useCreateGoal.ts
@@ -0,0 +1,32 @@
+import { useMutation } from '@apollo/client/react';
+import { CREATE_GOAL_MUTATION } from '../api/createGoal.mutation';
+
+interface CreateGoalInput {
+  title: string;
+}
+
+interface CreateGoalDTO {
+  id: string | number;
+  title: string;
+  createdAt: string;
+  updatedAt: string;
+  totalTaskCount: number;
+  completedTaskCount: number;
+  achievementRate: number;
+}
+
+interface CreateGoalResponse {
+  createGoal: CreateGoalDTO;
+}
+
+export function useCreateGoal() {
+  const [mutate, { loading, error }] = useMutation<
+    CreateGoalResponse,
+    { input: CreateGoalInput }
+  >(CREATE_GOAL_MUTATION);
+
+  const createGoal = (input: CreateGoalInput) =>
+    mutate({ variables: { input } });
+
+  return { createGoal, loading, error };
+}
diff --git a/features/goals/model/useMyGoals.ts b/features/goals/model/useMyGoals.ts
@@ -0,0 +1,36 @@
+import { useQuery } from '@apollo/client/react';
+import { MY_GOALS_QUERY } from '../api/myGoals.query';
+import type { MyGoalDTO } from 'entities/goal/type';
+
+interface MyGoalsResponse {
+  myGoals: MyGoalDTO[];
+}
+
+export interface MyGoal {
+  id: string;
+  title: string;
+  createdAt: Date;
+  updatedAt: Date;
+  totalTaskCount: number;
+  completedTaskCount: number;
+  achievementRate: number;
+}
+
+export function useMyGoals() {
+  const { data, loading, error, refetch } = useQuery<MyGoalsResponse>(
+    MY_GOALS_QUERY
+  );
+
+  const myGoals: MyGoal[] =
+    data?.myGoals?.map((dto) => ({
+      id: dto.id,
+      title: dto.title,
+      createdAt: new Date(dto.createdAt),
+      updatedAt: new Date(dto.updatedAt),
+      totalTaskCount: dto.totalTaskCount,
+      completedTaskCount: dto.completedTaskCount,
+      achievementRate: dto.achievementRate,
+    })) ?? [];
+
+  return { myGoals, loading, error, refetch };
+}
diff --git a/features/goals/model/useUpdateGoal.ts b/features/goals/model/useUpdateGoal.ts
@@ -0,0 +1,24 @@
+import { useMutation } from '@apollo/client/react';
+import { UPDATE_GOAL_MUTATION } from '../api/updateGoal.mutation';
+import type { MyGoalDTO } from 'entities/goal/type';
+
+interface UpdateGoalInput {
+  id: string;
+  title: string;
+}
+
+interface UpdateGoalResponse {
+  updateGoal: MyGoalDTO;
+}
+
+export function useUpdateGoal() {
+  const [mutate, { loading, error }] = useMutation<
+    UpdateGoalResponse,
+    { input: UpdateGoalInput }
+  >(UPDATE_GOAL_MUTATION);
+
+  const updateGoal = (input: UpdateGoalInput) =>
+    mutate({ variables: { input } });
+
+  return { updateGoal, loading, error };
+}
diff --git a/features/goals/ui/GoalCard.tsx b/features/goals/ui/GoalCard.tsx
@@ -5,15 +5,18 @@ export interface GoalCardProps {
   goal: {
     id: string;
     title: string;
-    completed: number;
-    total: number;
+    completedTaskCount: number;
+    totalTaskCount: number;
+    achievementRate?: number;
   };
 }
 
 export function GoalCard({ goal }: GoalCardProps) {
   const navigate = useNavigate();
   const progressPercent =
-    goal.total > 0 ? (goal.completed / goal.total) * 100 : 0;
+    goal.achievementRate ?? (goal.totalTaskCount > 0
+      ? (goal.completedTaskCount / goal.totalTaskCount) * 100
+      : 0);
 
   const handleClick = () => {
     navigate(`/goals/${goal.id}`);
@@ -44,7 +47,7 @@ export function GoalCard({ goal }: GoalCardProps) {
               />
             </div>
             <span className="shrink-0 text-sm text-sub2">
-              {goal.completed} / {goal.total}
+              {goal.completedTaskCount} / {goal.totalTaskCount}
             </span>
           </div>
         </div>
diff --git a/features/goals/ui/GoalDetail.tsx b/features/goals/ui/GoalDetail.tsx
@@ -2,6 +2,7 @@ import { MoreVertical } from 'lucide-react';
 import { Button } from 'shared/ui/components/button';
 import { BackArrowIcon } from 'shared/ui';
 import { useGoals } from 'shared/context/GoalsContext';
+import { useTask } from 'features/task/model/useTask';
 
 interface GoalDetailProps {
   goalId: string;
@@ -10,14 +11,14 @@ interface GoalDetailProps {
 
 export function GoalDetail({ goalId, onBack }: GoalDetailProps) {
   const { goals } = useGoals();
+  const { myTasks } = useTask({ goalId });
   const goal = goals.find((g) => g.id === goalId);
 
   if (!goal) {
     return null;
   }
 
-  const achievementRate =
-    goal.total > 0 ? Math.round((goal.completed / goal.total) * 100) : 0;
+  const achievementRate = goal.achievementRate;
 
   return (
     <div className="flex min-h-full flex-col bg-gray-50 p-10">
@@ -49,12 +50,14 @@ export function GoalDetail({ goalId, onBack }: GoalDetailProps) {
           <div className="flex items-center justify-around gap-4">
             <div className="flex flex-col items-center">
               <span className="text-3xl font-bold text-main2">
-                {goal.completed}
+                {goal.completedTaskCount}
               </span>
               <span className="mt-1 text-sm text-sub2">완료한 액션</span>
             </div>
             <div className="flex flex-col items-center">
-              <span className="text-3xl font-bold text-main2">{goal.total}</span>
+              <span className="text-3xl font-bold text-main2">
+                {goal.totalTaskCount}
+              </span>
               <span className="mt-1 text-sm text-sub2">총 액션</span>
             </div>
           </div>
@@ -64,22 +67,24 @@ export function GoalDetail({ goalId, onBack }: GoalDetailProps) {
           </p>
         </div>
 
-        {goal.tasks.length === 0 ? (
+        {myTasks.length === 0 ? (
           <p className="text-center text-sm text-sub2">
             아직 할 일이 없어요
           </p>
         ) : (
           <ul className="space-y-2">
-            {goal.tasks.map((task) => (
+            {myTasks.map((task) => (
               <li
                 key={task.id}
                 className={`rounded-lg px-4 py-3 ${
-                  task.completed ? 'bg-main1/10' : 'bg-white'
+                  task.status === 'DONE' ? 'bg-main1/10' : 'bg-white'
                 } ring-1 ring-gray-200`}
               >
                 <span
                   className={
-                    task.completed ? 'text-sub2 line-through' : 'text-main2'
+                    task.status === 'DONE'
+                      ? 'text-sub2 line-through'
+                      : 'text-main2'
                   }
                 >
                   {task.title}
diff --git a/features/task/api/createTask.mutation.ts b/features/task/api/createTask.mutation.ts
@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_TASK_MUTATION = gql`
+  mutation createTask($input: CreateTaskInput!) {
+    createTask(input: $input) {
+      id
+      title
+      status
+      goalId
+      taskDate
+      createdAt
+      updatedAt
+    }
+  }
+`;
diff --git a/features/task/api/deleteTask.mutation.ts b/features/task/api/deleteTask.mutation.ts
@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_TASK_MUTATION = gql`
+  mutation deleteTask($id: ID!) {
+    deleteTask(id: $id)
+  }
+`;
diff --git a/features/task/model/useCreateTask.ts b/features/task/model/useCreateTask.ts
@@ -0,0 +1,25 @@
+import { useMutation } from '@apollo/client/react';
+import { CREATE_TASK_MUTATION } from '../api/createTask.mutation';
+import type { TaskDTO } from 'entities/task/type';
+
+interface CreateTaskInput {
+  goalId: string;
+  title: string;
+  taskDate: string; // yyyy-mm-dd
+}
+
+interface CreateTaskResponse {
+  createTask: TaskDTO;
+}
+
+export function useCreateTask() {
+  const [mutate, { loading, error }] = useMutation<
+    CreateTaskResponse,
+    { input: CreateTaskInput }
+  >(CREATE_TASK_MUTATION);
+
+  const createTask = (input: CreateTaskInput) =>
+    mutate({ variables: { input } });
+
+  return { createTask, loading, error };
+}
diff --git a/features/task/model/useDeleteTask.ts b/features/task/model/useDeleteTask.ts
@@ -0,0 +1,17 @@
+import { useMutation } from '@apollo/client/react';
+import { DELETE_TASK_MUTATION } from '../api/deleteTask.mutation';
+
+interface DeleteTaskResponse {
+  deleteTask: boolean;
+}
+
+export function useDeleteTask() {
+  const [mutate, { loading, error }] = useMutation<
+    DeleteTaskResponse,
+    { id: string }
+  >(DELETE_TASK_MUTATION);
+
+  const deleteTask = (id: string) => mutate({ variables: { id } });
+
+  return { deleteTask, loading, error };
+}
diff --git a/features/task/model/useTask.ts b/features/task/model/useTask.ts
diff --git a/features/todo/todo.tsx b/features/todo/todo.tsx
diff --git a/shared/context/GoalsContext.tsx b/shared/context/GoalsContext.tsx
diff --git a/shared/utils/formatDate.ts b/shared/utils/formatDate.ts
diff --git a/shared/utils/index.ts b/shared/utils/index.ts
