Merge branch 'develop' into epic/home

Author: IceBear9028

mocks/domain/todo.ts

@@ -1,6 +1,5 @@
 import { http, HttpResponse } from 'msw';
 import { Todo, DAY_OF_THE_WEEK } from '@/shared/type/Todo';
-import { Goal, GoalCategoryEnum } from '@/shared/type/goal';
 
 // CORS preflight 요청 처리
 export const optionsHandler = http.options('*', () => {
@@ -14,79 +13,6 @@ export const optionsHandler = http.options('*', () => {
   });
 });
 
-// 테스트용 Goal 데이터
-export const mockGoals: Goal[] = [
-  {
-    id: 'goal-1',
-    name: '프론트엔드 개발 마스터하기',
-    mentor: 'TIM_COOK',
-    duration: {
-      startDate: '2024-01-01',
-      endDate: '2024-03-31',
-    },
-    toBe: 'React 전문가가 되어 프로젝트를 주도할 수 있음',
-    category: GoalCategoryEnum.STUDY,
-    plans: [
-      {
-        id: 'plan-1',
-        content: 'React 컴포넌트 설계 및 리팩토링',
-        weekOfMonth: 1,
-      },
-      {
-        id: 'plan-2',
-        content: 'TypeScript와 React 연동',
-        weekOfMonth: 2,
-      },
-    ],
-  },
-  {
-    id: 'goal-2',
-    name: '디자인 시스템 구축',
-    mentor: 'CONFUCIUS',
-    duration: {
-      startDate: '2024-01-15',
-      endDate: '2024-02-28',
-    },
-    toBe: '일관성 있는 디자인 시스템',
-    category: GoalCategoryEnum.FINANCE,
-    plans: [
-      {
-        id: 'plan-3',
-        content: '디자인 토큰 정의 및 컴포넌트 설계',
-        weekOfMonth: 1,
-      },
-      {
-        id: 'plan-4',
-        content: '스토리북을 활용한 컴포넌트 문서화',
-        weekOfMonth: 2,
-      },
-    ],
-  },
-  {
-    id: 'goal-3',
-    name: '프로젝트 관리 역량 강화',
-    mentor: 'WARREN_BUFFETT',
-    duration: {
-      startDate: '2024-01-01',
-      endDate: '2024-04-30',
-    },
-    toBe: '프로젝트를 기획하고 관리할 수 있는 역량',
-    category: GoalCategoryEnum.STUDY,
-    plans: [
-      {
-        id: 'plan-5',
-        content: '프로젝트 기획 및 요구사항 분석',
-        weekOfMonth: 1,
-      },
-      {
-        id: 'plan-6',
-        content: '팀 협업 및 커뮤니케이션',
-        weekOfMonth: 2,
-      },
-    ],
-  },
-];
-
 // 테스트용 Todo 데이터 (요일별로 구성)
 export const mockTodosByPlan: Record<string, Record<DAY_OF_THE_WEEK, Todo[]>> = {
   'plan-1': {
@@ -266,24 +192,6 @@ const getAllTodos = (): Todo[] => {
   return Object.values(mockTodosByPlan).flatMap(planTodos => Object.values(planTodos).flat());
 };
 
-// Goal 목록 조회
-export const getGoals = http.get('/mock/goals', () => {
-  return HttpResponse.json(
-    {
-      data: mockGoals,
-      message: 'Goal 목록을 성공적으로 조회했습니다.',
-    },
-    {
-      status: 200,
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-      },
-    }
-  );
-});
-
 // 주간 Todo 리스트 조회 (요일별로 그룹화)
 export const getWeeklyTodoList = http.get('/mock/todos', ({ request }) => {
   const url = new URL(request.url);
@@ -690,7 +598,6 @@ function getDayOfWeek(dateString: string): DAY_OF_THE_WEEK {
 // 모든 Todo 핸들러들을 배열로 export
 export const todoHandlers = [
   optionsHandler,
-  getGoals,
   getWeeklyTodoList,
   getTodos,
   getTodoById,

next.config.ts

@@ -5,6 +5,16 @@ const nextConfig: NextConfig = {
   plugins: {
     '@tailwindcss/postcss': {},
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'growit-images.s3.ap-northeast-2.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

src/app/(home)/goal/ended/loading.tsx

@@ -0,0 +1,17 @@
+export default function EndedGoalsListLoader() {
+  return (
+    <div className="p-5">
+      <nav className="px-2 pt-8 pb-4 w-full border-b border-line-normal flex items-center justify-center">
+        <div className="h-8 bg-elevated-normal rounded w-1/3" />
+      </nav>
+      <div className="animate-pulse space-y-4">
+        <div className="h-8 bg-elevated-normal rounded w-1/3" />
+        <div className="grid grid-cols-2 gap-3">
+          {[1, 2, 3, 4, 5, 6, 7, 8].map(i => (
+            <div key={i} className="h-32 bg-elevated-normal rounded" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(home)/goal/ended/page.tsx

@@ -1,32 +1,7 @@
 import EndedGoalsContainer from '@/composite/goal/endedGoalsContainer';
-import { Suspense } from 'react';
 
 export const dynamic = 'force-dynamic';
 
 export default function EndedGoalsPage() {
-  return (
-    <Suspense fallback={<EndedGoalsListLoader />}>
-      <EndedGoalsContainer />
-    </Suspense>
-  );
-}
-
-function EndedGoalsListLoader() {
-  return (
-    <div>
-      <nav className="px-2 pt-8 pb-4 w-full border-b border-line-normal flex items-center justify-center">
-        <div className="h-8 bg-elevated-normal rounded w-1/3" />
-      </nav>
-      <div className="p-5">
-        <div className="animate-pulse space-y-4">
-          <div className="h-8 bg-elevated-normal rounded w-1/3" />
-          <div className="grid grid-cols-2 gap-3">
-            {[1, 2, 3, 4].map(i => (
-              <div key={i} className="h-32 bg-elevated-normal rounded" />
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+  return <EndedGoalsContainer />;
 }

src/app/(home)/retrospect/page.tsx

@@ -1,7 +1,5 @@
-import Navigation from '@/composite/retrospect/navigation/component';
-
 const RetrospectPage = () => {
-  return <Navigation />;
+  return <></>;
 };
 
 export default RetrospectPage;

src/composite/create-goal/createGoalForm/component.tsx

@@ -4,17 +4,20 @@ import { CreateGoalFormElement } from '@/feature/goal';
 import Button from '@/shared/components/input/Button';
 import { PageHeader } from '@/shared/components/layout/PageHeader';
 import { createCreateGoalMutation } from '@/model/goal/hooks';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { ROUTES } from '@/shared/constants/routes';
 import { useToast } from '@/shared/components/feedBack/toast';
+import { GoalQueryKeys } from '@/model/goal/queryKeys';
 
 export const CreateGoalForm = () => {
   const router = useRouter();
+  const queryClient = useQueryClient();
   const { showToast } = useToast();
   const { mutate: createGoal } = useMutation(
     createCreateGoalMutation({
       onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: GoalQueryKeys.progress() });
         router.push(ROUTES.GOAL);
         showToast('목표 생성이 완료되었습니다.', 'success');
       },

src/composite/goal/endedGoalsContainer/index.tsx

@@ -44,7 +44,7 @@ export default function EndedGoalsContainer() {
 
   const handleDelete = async () => {
     if (!isEditMode) return;
-    await deleteGoals(checkedGoals);
+    if (checkedGoals.size > 0) await deleteGoals(checkedGoals);
     setCheckedGoals(new Set());
     setIsEditMode(false);
   };

src/composite/goal/goalEditForm/GoalEditForm.tsx

@@ -36,7 +36,6 @@ export const GoalEditForm = ({ currentGoal }: { currentGoal: Goal }) => {
   const { mutate: editGoal } = useMutation(
     createEditGoalMutation({
       onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: GoalQueryKeys.all() });
         queryClient.invalidateQueries({ queryKey: GoalQueryKeys.progress() });
         showToast('수정이 완료되었습니다.', 'success');
         router.push(ROUTES.GOAL);

src/composite/goal/goalProgressSheet/index.tsx

@@ -10,22 +10,38 @@ import {
 } from '@/shared/components/dropdown-menu';
 import { TrashIcon, WarningIcon } from '@/shared/constants/icons';
 import { useGoalSelector } from '@/model/goal/context';
-import { getDaysUntilEndDate } from '@/shared/lib/utils';
+import { getDaysUntilEndDate, getProgressPercentageByDateRange } from '@/shared/lib/utils';
 import { Modal } from '@/shared/components/feedBack/Modal';
 import { useState } from 'react';
 import Button from '@/shared/components/input/Button';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { createDeleteGoalMutation } from '@/model/goal/hooks';
+import { GoalQueryKeys } from '@/model/goal/queryKeys';
 
 export default function GoalProgressSheet() {
   const router = useRouter();
+  const queryClient = useQueryClient();
   const { currentGoal } = useGoalSelector();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
-  if (currentGoal === undefined || null) return <div className="w-full h-30 bg-transparent" />;
+  const { mutateAsync: deleteGoal } = useMutation(
+    createDeleteGoalMutation({
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: GoalQueryKeys.progress() });
+        setIsDeleteModalOpen(false);
+      },
+      onError: () => {
+        showToast('목표 삭제에 실패했습니다.', 'error');
+      },
+    })
+  );
+
+  if (!currentGoal) return <div className="w-full h-30 bg-transparent" />;
 
-  const progressPercentage = currentGoal?.plans.length
-    ? (currentGoal.plans.length / currentGoal.plans.length) * 100
+  const progressPercentage = currentGoal
+    ? getProgressPercentageByDateRange(currentGoal.duration.startDate, currentGoal.duration.endDate)
     : 0;
-  const daysUntilEndDate = currentGoal?.duration.endDate ? getDaysUntilEndDate(currentGoal.duration.endDate) : 0;
+  const daysUntilEndDate = currentGoal ? getDaysUntilEndDate(currentGoal.duration.endDate) : 0;
 
   return (
     <div className="w-full max-h-40 h-full bg-elevated-normal rounded-t-lg border-t border-line-normal">
@@ -93,7 +109,11 @@ export default function GoalProgressSheet() {
           {currentGoal?.duration.startDate} ~ {currentGoal?.duration.endDate}
         </p>
       </div>
-      <DeleteGoalModal open={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} onDelete={() => {}} />
+      <DeleteGoalModal
+        open={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        onDelete={() => deleteGoal(currentGoal.id)}
+      />
     </div>
   );
 }
@@ -128,3 +148,6 @@ function DeleteGoalModal({ open, onClose, onDelete }: DeleteGoalModalProps) {
     />
   );
 }
+function showToast(arg0: string, arg1: string) {
+  throw new Error('Function not implemented.');
+}

src/composite/goal/planetSelector/PlanetSelector.tsx

@@ -8,15 +8,16 @@ import { GoalProvider, useGoalSelector } from '@/model/goal/context';
 import 'swiper/css';
 import 'swiper/css/pagination';
 import { PlanetItem } from '@/feature/goal/planetItem';
-import { useSuspenseQueries } from '@tanstack/react-query';
-import { createAllGoalsQuery, createProgressGoalsQuery } from '@/model/goal/hooks';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createProgressGoalsQuery } from '@/model/goal/hooks';
 import { useMemo } from 'react';
 import { Goal } from '@/shared/type/goal';
 import { BottomSheet, useBottomSheet } from '@/shared/components/feedBack/BottomSheet';
 import CreateNewGoal from './components/CreateNewGoal';
 import Button from '@/shared/components/input/Button';
 import { Swiper as SwiperType } from 'swiper/types';
 import { useShowEndedGoalsSheet } from './hooks';
+import { getMsUntilEndOfDay } from '@/shared/lib/utils';
 
 export default function PlanetSelectorScene() {
   return (
@@ -28,12 +29,17 @@ export default function PlanetSelectorScene() {
 }
 
 export function PlanetSelector() {
-  const [{ data: progressGoals }, { data: allGoals }] = useSuspenseQueries({
-    queries: [createProgressGoalsQuery(), createAllGoalsQuery()],
-  });
+  const msUntilEndOfDay = getMsUntilEndOfDay();
+  const { data: progressGoals } = useSuspenseQuery(
+    createProgressGoalsQuery({
+      // 캐시 무효화가 없다면, 현재 시간부터 하루가 끝나기전까지 유지되어도 괜찮다 판단
+      staleTime: msUntilEndOfDay,
+      gcTime: msUntilEndOfDay,
+    })
+  );
   const { setCurrentGoal } = useGoalSelector();
   const { isOpen, showSheet, closeSheet } = useBottomSheet();
-  useShowEndedGoalsSheet(allGoals, showSheet);
+  useShowEndedGoalsSheet(showSheet);
 
   const goalsWithAddGoalSlot: (Goal | 'add-goal-section')[] = useMemo(() => {
     return [...progressGoals, 'add-goal-section'];