Merge branch 'feat/#2'

kimhyunjee · kimhyunjee · commit aa3d6982eb39 · 2026-03-15T20:55:27.000+09:00
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
@@ -3,6 +3,7 @@ import type { Route } from './+types/home';
 import { ReviewStartModal } from 'features/review';
 import { useMyReviews } from 'features/history';
 import { TodayReview } from 'entities/review';
+import { Todo } from 'features/todo/todo';
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'LOOP' }];
@@ -19,6 +20,7 @@ export default function Home() {
   console.log(todayReview, myReviews);
   return (
     <div className="flex flex-col h-full">
+      <Todo />
       <div className="w-full px-30">
         {todayReview ? (
           <TodayReview steps={todayReview.steps} />
diff --git a/features/goals/model/useCreateGoal.ts b/features/goals/model/useCreateGoal.ts
@@ -1,5 +1,6 @@
 import { useMutation } from '@apollo/client/react';
 import { CREATE_GOAL_MUTATION } from '../api/createGoal.mutation';
+import { MY_GOALS_QUERY } from '../api/myGoals.query';
 
 interface CreateGoalInput {
   title: string;
@@ -26,7 +27,10 @@ export function useCreateGoal() {
   >(CREATE_GOAL_MUTATION);
 
   const createGoal = (input: CreateGoalInput) =>
-    mutate({ variables: { input } });
+    mutate({
+      variables: { input },
+      refetchQueries: [{ query: MY_GOALS_QUERY }],
+    });
 
   return { createGoal, loading, error };
 }
diff --git a/features/goals/model/useMyGoals.ts b/features/goals/model/useMyGoals.ts
@@ -18,7 +18,10 @@ export interface MyGoal {
 
 export function useMyGoals() {
   const { data, loading, error, refetch } = useQuery<MyGoalsResponse>(
-    MY_GOALS_QUERY
+    MY_GOALS_QUERY,
+    {
+      fetchPolicy: 'cache-and-network',
+    }
   );
 
   const myGoals: MyGoal[] =
diff --git a/features/goals/ui/AddGoalModal.tsx b/features/goals/ui/AddGoalModal.tsx
@@ -13,7 +13,7 @@ import { Input } from 'shared/ui/components/input';
 interface AddGoalModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onAddGoal: (title: string) => void;
+  onAddGoal: (title: string) => void | Promise<void>;
 }
 
 export function AddGoalModal({
@@ -22,20 +22,26 @@ export function AddGoalModal({
   onAddGoal,
 }: AddGoalModalProps) {
   const [goalText, setGoalText] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   useEffect(() => {
     if (open) {
       setGoalText('');
     }
   }, [open]);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!goalText.trim()) return;
 
-    onAddGoal(goalText);
-    setGoalText('');
-    onOpenChange(false);
+    setIsSubmitting(true);
+    try {
+      await onAddGoal(goalText);
+      setGoalText('');
+      onOpenChange(false);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   const handleCancel = () => {
@@ -81,9 +87,9 @@ export function AddGoalModal({
             <Button
               type="submit"
               className="h-12 flex-1 bg-main1 px-6 py-3 hover:bg-main1/90"
-              disabled={!goalText.trim()}
+              disabled={!goalText.trim() || isSubmitting}
             >
-              만들기
+              {isSubmitting ? '만드는 중...' : '만들기'}
             </Button>
           </DialogFooter>
         </form>
diff --git a/features/task/model/useCreateTask.ts b/features/task/model/useCreateTask.ts
@@ -1,11 +1,13 @@
 import { useMutation } from '@apollo/client/react';
 import { CREATE_TASK_MUTATION } from '../api/createTask.mutation';
+import { TASK_QEURY } from '../api/task.query';
+import { MY_GOALS_QUERY } from 'features/goals/api/myGoals.query';
 import type { TaskDTO } from 'entities/task/type';
 
 interface CreateTaskInput {
   goalId: string;
   title: string;
-  taskDate: string; // yyyy-mm-dd
+  date: string; // yyyy-mm-dd
 }
 
 interface CreateTaskResponse {
@@ -19,7 +21,21 @@ export function useCreateTask() {
   >(CREATE_TASK_MUTATION);
 
   const createTask = (input: CreateTaskInput) =>
-    mutate({ variables: { input } });
+    mutate({
+      variables: { input },
+      refetchQueries: [
+        { query: MY_GOALS_QUERY },
+        {
+          query: TASK_QEURY,
+          variables: {
+            filter: {
+              startDate: input.date,
+              endDate: input.date,
+            },
+          },
+        },
+      ],
+    });
 
   return { createTask, loading, error };
 }
diff --git a/features/todo/todo.tsx b/features/todo/todo.tsx
@@ -1,7 +1,9 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { Send } from 'lucide-react';
 import { Button } from 'shared/ui/components/button';
+import { Input } from 'shared/ui/components/input';
 import { useGoals } from 'shared/context/GoalsContext';
+import { useMyGoals } from 'features/goals/model/useMyGoals';
 import { useTask } from 'features/task/model/useTask';
 import { formatDateToYYYYMMDD } from 'shared/utils';
 import { AddGoalModal } from 'features/goals/ui/AddGoalModal';
@@ -11,8 +13,14 @@ import { TodoItem } from 'features/todo/TodoItem';
 export const Todo = () => {
   const [selectedDate, setSelectedDate] = useState<Date>(() => new Date());
   const [isAddGoalOpen, setIsAddGoalOpen] = useState(false);
+
+  // History 페이지(useMyReviews)와 동일하게 페이지에서 직접 myGoals 쿼리 호출
+  const {
+    myGoals,
+    loading: goalsLoading,
+    refetch: refetchGoals,
+  } = useMyGoals();
   const {
-    goals,
     addGoal: handleAddTodo,
     addTask: handleAddTask,
     toggleTask: handleToggleTask,
@@ -21,16 +29,42 @@ export const Todo = () => {
     deleteGoal: handleDeleteTodo,
   } = useGoals();
 
+  const goals = useMemo(
+    () =>
+      myGoals.map((g) => ({
+        id: String(g.id),
+        title: g.title,
+        completedTaskCount: g.completedTaskCount,
+        totalTaskCount: g.totalTaskCount,
+        achievementRate: g.achievementRate,
+      })),
+    [myGoals]
+  );
+
   const dateStr = formatDateToYYYYMMDD(selectedDate);
   const { myTasks, refetch: refetchTasks } = useTask({
     startDate: dateStr,
     endDate: dateStr,
   });
 
-  const todos = useMemo(() => {
-    return goals.map((goal) => {
-      const goalTasks = myTasks.filter((t) => t.goalId === goal.id);
-      const completedCount = goalTasks.filter((t) => t.status === 'DONE').length;
+  // 해당 날짜에 task가 있는 goal만 표시. task가 없으면 전체 goal 표시(할 일 추가 가능)
+  const { todos, hiddenGoalIds } = useMemo(() => {
+    const goalsWithTasksOnDate = goals.filter((goal) =>
+      myTasks.some((t) => String(t.goalId) === goal.id)
+    );
+    const goalsToShow =
+      goalsWithTasksOnDate.length > 0 ? goalsWithTasksOnDate : goals;
+    const hiddenGoalIds = goals
+      .filter((g) => !goalsToShow.some((s) => s.id === g.id))
+      .map((g) => g.id);
+
+    const todosResult = goalsToShow.map((goal) => {
+      const goalTasks = myTasks.filter(
+        (t) => String(t.goalId) === goal.id
+      );
+      const completedCount = goalTasks.filter(
+        (t) => t.status === 'DONE'
+      ).length;
       return {
         id: goal.id,
         title: goal.title,
@@ -43,8 +77,15 @@ export const Todo = () => {
         })),
       };
     });
+
+    return { todos: todosResult, hiddenGoalIds };
   }, [goals, myTasks]);
 
+  const hiddenGoals = useMemo(
+    () => goals.filter((g) => hiddenGoalIds.includes(g.id)),
+    [goals, hiddenGoalIds]
+  );
+
   const handlePrevDate = () => {
     setSelectedDate((prev) => {
       const next = new Date(prev);
@@ -62,26 +103,35 @@ export const Todo = () => {
   };
 
   const [taskInputs, setTaskInputs] = useState<Record<string, string>>({});
+  const [isAddOtherGoalsOpen, setIsAddOtherGoalsOpen] = useState(false);
+  const isSubmittingRef = useRef(false);
   const [editingTask, setEditingTask] = useState<{
     goalId: string;
     taskId: string;
   } | null>(null);
   const [editingTaskInput, setEditingTaskInput] = useState('');
 
   const handleAddTaskWithReset = async (goalId: string, title: string) => {
-    await handleAddTask(goalId, title, dateStr);
-    refetchTasks();
-    setTaskInputs((prev) => ({ ...prev, [goalId]: '' }));
+    const trimmed = title.trim();
+    if (!trimmed) return;
+    if (isSubmittingRef.current) return;
+
+    isSubmittingRef.current = true;
+    try {
+      await handleAddTask(goalId, trimmed, dateStr);
+      refetchTasks();
+      refetchGoals();
+      setTaskInputs((prev) => ({ ...prev, [goalId]: '' }));
+    } finally {
+      isSubmittingRef.current = false;
+    }
   };
 
   const handleToggleTaskWrapper = (goalId: string, taskId: string) => {
     handleToggleTask(goalId, taskId);
   };
 
-  const handleDeleteTaskWrapper = async (
-    goalId: string,
-    taskId: string
-  ) => {
+  const handleDeleteTaskWrapper = async (goalId: string, taskId: string) => {
     await handleDeleteTask(goalId, taskId);
     refetchTasks();
   };
@@ -92,6 +142,7 @@ export const Todo = () => {
   ) => {
     if (e.key !== 'Enter') return;
     e.preventDefault();
+    e.stopPropagation();
     const value = taskInputs[goalId] ?? '';
     handleAddTaskWithReset(goalId, value);
   };
@@ -136,7 +187,24 @@ export const Todo = () => {
     }
   };
 
-  if (todos.length === 0) {
+  if (goalsLoading) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-4">
+        <div className="w-full max-w-2xl pt-8">
+          <TodoHeader
+            selectedDate={selectedDate}
+            onPrevDate={handlePrevDate}
+            onNextDate={handleNextDate}
+          />
+        </div>
+        <div className="flex flex-1 flex-col items-center justify-center">
+          <p className="text-sub2">목표를 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (goals.length === 0) {
     return (
       <div className="flex min-h-screen flex-col items-center bg-gray-50 p-4">
         <div className="w-full max-w-2xl pt-8">
@@ -172,7 +240,10 @@ export const Todo = () => {
         <AddGoalModal
           open={isAddGoalOpen}
           onOpenChange={setIsAddGoalOpen}
-          onAddGoal={handleAddTodo}
+          onAddGoal={async (title) => {
+            await handleAddTodo(title);
+            refetchGoals();
+          }}
         />
       </div>
     );
@@ -207,15 +278,58 @@ export const Todo = () => {
             onEditInputKeyDown={(taskId, e) =>
               handleEditInputKeyDown(todo.id, taskId, e)
             }
-            onToggleTask={(taskId) =>
-              handleToggleTaskWrapper(todo.id, taskId)
-            }
-            onDeleteTask={(taskId) =>
-              handleDeleteTaskWrapper(todo.id, taskId)
-            }
+            onToggleTask={(taskId) => handleToggleTaskWrapper(todo.id, taskId)}
+            onDeleteTask={(taskId) => handleDeleteTaskWrapper(todo.id, taskId)}
             onDeleteTodo={() => handleDeleteTodoWrapper(todo.id)}
           />
         ))}
+        {hiddenGoals.length > 0 && (
+          <div className="rounded-lg bg-white p-4 shadow-sm ring-1 ring-gray-200">
+            <button
+              type="button"
+              onClick={() => setIsAddOtherGoalsOpen((prev) => !prev)}
+              className="flex w-full items-center justify-between text-left text-base text-sub2 hover:text-main2"
+              aria-expanded={isAddOtherGoalsOpen}
+              aria-label={
+                isAddOtherGoalsOpen
+                  ? '다른 목표에 할 일 추가 접기'
+                  : '다른 목표에 할 일 추가 펼치기'
+              }
+            >
+              <span>다른 목표에 할 일 추가</span>
+              <span className="text-xl" aria-hidden>
+                {isAddOtherGoalsOpen ? '−' : '+'}
+              </span>
+            </button>
+            {isAddOtherGoalsOpen && (
+              <div className="mt-4 space-y-3">
+                {hiddenGoals.map((goal) => (
+                  <div
+                    key={goal.id}
+                    className="flex items-center gap-2 rounded-lg border border-gray-200 px-3 py-2"
+                  >
+                    <span className="shrink-0 text-sm text-sub2">
+                      {goal.title}
+                    </span>
+                    <Input
+                      type="text"
+                      placeholder="할 일 입력"
+                      value={taskInputs[goal.id] ?? ''}
+                      onChange={(e) =>
+                        handleTaskInputChange(goal.id, e.target.value)
+                      }
+                      onKeyDown={(e) =>
+                        handleTaskInputKeyDown(goal.id, e)
+                      }
+                      className="flex-1 border-none text-base focus-visible:ring-0"
+                      aria-label={`${goal.title}에 할 일 추가`}
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
         <div className="flex items-center justify-center">
           <p className="mt-5 text-lg text-sub2">
             다른 목표를 만들고 싶다면 목표에서 추가할 수 있어요 →
diff --git a/shared/api/apolloClient.ts b/shared/api/apolloClient.ts
diff --git a/shared/context/GoalsContext.tsx b/shared/context/GoalsContext.tsx
