Merge pull request #221 from DDD-Community/epic/home

Feat: Home 개편 및 API 연결

Author: IceBear9028

package-lock.json

@@ -12,6 +12,7 @@
     "knip": "knip"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
     "@next/third-parties": "^15.5.6",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -22,6 +23,8 @@
     "axios": "^1.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "date-holidays": "^3.26.5",
     "lucide-react": "^0.519.0",
     "motion": "^12.19.1",
     "next": "15.3.8",
@@ -30,7 +33,8 @@
     "react-dom": "19.0.1",
     "react-hook-form": "^7.58.1",
     "swiper": "^12.0.2",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "zod": "^3.24.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

package.json

@@ -7,8 +7,8 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.10.2'
-const INTEGRITY_CHECKSUM = 'f5825c521429caf22a4dd13b66e243af'
+const PACKAGE_VERSION = '2.12.4'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -71,11 +71,6 @@ addEventListener('message', async function (event) {
       break
     }
 
-    case 'MOCK_DEACTIVATE': {
-      activeClientIds.delete(clientId)
-      break
-    }
-
     case 'CLIENT_CLOSED': {
       activeClientIds.delete(clientId)
 
@@ -94,6 +89,8 @@ addEventListener('message', async function (event) {
 })
 
 addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
   // Bypass navigation requests.
   if (event.request.mode === 'navigate') {
     return
@@ -110,23 +107,29 @@ addEventListener('fetch', function (event) {
 
   // Bypass all requests when there are no active clients.
   // Prevents the self-unregistered worked from handling requests
-  // after it's been deleted (still remains active until the next reload).
+  // after it's been terminated (still remains active until the next reload).
   if (activeClientIds.size === 0) {
     return
   }
 
   const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId))
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
 })
 
 /**
  * @param {FetchEvent} event
  * @param {string} requestId
+ * @param {number} requestInterceptedAt
  */
-async function handleRequest(event, requestId) {
+async function handleRequest(event, requestId, requestInterceptedAt) {
   const client = await resolveMainClient(event)
   const requestCloneForEvents = event.request.clone()
-  const response = await getResponse(event, client, requestId)
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
@@ -202,9 +205,10 @@ async function resolveMainClient(event) {
  * @param {FetchEvent} event
  * @param {Client | undefined} client
  * @param {string} requestId
+ * @param {number} requestInterceptedAt
  * @returns {Promise<Response>}
  */
-async function getResponse(event, client, requestId) {
+async function getResponse(event, client, requestId, requestInterceptedAt) {
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
   const requestClone = event.request.clone()
@@ -255,6 +259,7 @@ async function getResponse(event, client, requestId) {
       type: 'REQUEST',
       payload: {
         id: requestId,
+        interceptedAt: requestInterceptedAt,
         ...serializedRequest,
       },
     },

public/mockServiceWorker.js

@@ -1,13 +1,11 @@
 'use client';
 
-import { CheerMessageCard, GoalBanner } from '@/composite/home';
+import { TodoListContainer } from '@/composite/home';
 import { GoalProvider } from '@/model/goal/context';
 import { PlanProvider } from '@/model/todo/planSelector';
-import { WeeklyPlanBoard } from '@/composite/home/planBoard';
 import { TodoListProvider } from '@/model/todo/todoList';
 import { SelectedDayProvider } from '@/model/todo/selectedDay';
 import { AIMentorProvider } from '@/model/aiMentor/context';
-import { Z_INDEX } from '@/shared/lib/z-index';
 
 export default function MainPage() {
   return (
@@ -16,24 +14,7 @@ export default function MainPage() {
         <TodoListProvider>
           <SelectedDayProvider>
             <AIMentorProvider>
-              <div className="relative w-full">
-                <CheerMessageCard type="grorong" />
-                <div
-                  className={`absolute top-[140px] left-0 right-0 max-w-sm:mx-[20px] sm:mx-[40px] mx-auto bg-normal rounded-t-3xl shadow-xl ${Z_INDEX.CONTENT}`}
-                >
-                  <div className="flex flex-col h-[calc(100vh-140px)]">
-                    <div className="flex flex-col flex-1 gap-6">
-                      <GoalBanner />
-                      <div className="px-4 md:px-0">
-                        <WeeklyPlanBoard />
-                      </div>
-                    </div>
-                    <div className="w-full px-4 mt-[32px] pb-[calc(100px+env(safe-area-inset-bottom))]">
-                      <CheerMessageCard type="aiMentor" />
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <TodoListContainer />
             </AIMentorProvider>
           </SelectedDayProvider>
         </TodoListProvider>

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

@@ -14,7 +14,7 @@ export default function HomePageLayout({ children }: HomeLayoutProps) {
   return (
     <div className="flex flex-1 max-sm:flex-col max-w-md w-full mx-auto h-full">
       <NavigationBar />
-      <NotifyOnboardModal />
+      {/* <NotifyOnboardModal /> */}
       <div className="flex flex-1 flex-col overflow-x-hidden">{children}</div>
     </div>
   );

src/app/(home)/layout.tsx

@@ -37,7 +37,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <GoogleTagManager gtmId="GTM-W8GCRPWX" />
-      <body className={`${pretendard.variable} flex h-[100dvh] font-pretendard pretendard bg-[#1B1C1E]`}>
+      <body className={`${pretendard.variable} flex h-[100dvh] font-pretendard pretendard bg-[#0F0F10]`}>
         <MSWClientProvider>
           <TanstackQueryWrapper>
             <ToastProvider>{children}</ToastProvider>

src/app/layout.tsx

@@ -15,7 +15,6 @@ 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 GoalProgressSheet from '../goalProgressSheet';
 import { Swiper as SwiperType } from 'swiper/types';
 import { useShowEndedGoalsSheet } from './hooks';
 import { getMsUntilEndOfDay } from '@/shared/lib/utils';
@@ -24,9 +23,7 @@ export default function PlanetSelectorScene() {
   return (
     <GoalProvider goalListOption={{ year: 2025 }}>
       <PlanetSelector />
-      <section className="pb-16">
-        <GoalProgressSheet />
-      </section>
+      <section className="pb-16">{/* <GoalProgressSheet /> */}</section>
     </GoalProvider>
   );
 }

src/composite/goal/planetSelector/PlanetSelector.tsx

@@ -1,4 +1,4 @@
-export { CheerMessageCard } from './cheerMessageCard/component';
 export { GoalRoadMap } from './goalRoadMap/component';
 export { ContributionGraph } from './contributionGraph/component';
 export { GoalBanner } from './goalBanner/component';
+export { TodoListContainer } from './todoListContainer';

src/composite/home/index.ts

@@ -0,0 +1,87 @@
+'use client';
+
+import { GoalTodo } from '@/shared/type/GoalTodo';
+import { useBottomSheet } from '@/shared/components/feedBack/BottomSheet';
+import FloatingButton from '@/shared/components/input/FloatingButton';
+import { Z_INDEX } from '@/shared/lib/z-index';
+import { TodoList } from '@/feature/todo/todoList';
+import { TodoBottomSheet } from '@/feature/todo/todoBottomSheet';
+import { Calendar } from '@/feature/todo/calendar';
+import { CheerMessageCard } from './components/cheerMessageCard';
+import { AddGoalButton } from './components/addGoalButton';
+import { TodoListContainerFormProvider } from './form';
+import { convertToFormData, getEditingTodoDefault } from './helper';
+
+export const TodoListContainer = () => {
+  const addSheet = useBottomSheet();
+  const editSheet = useBottomSheet();
+
+  return (
+    <TodoListContainerFormProvider>
+      {({ selectedDate, calendarView, editingTodo, setSelectedDate, setCalendarView, setEditingTodo }) => {
+        const isMonthlyView = calendarView === 'monthly';
+
+        const handleEdit = (todo: GoalTodo) => {
+          editSheet.showSheet();
+          setEditingTodo(todo);
+        };
+
+        const handleCloseEditSheet = () => {
+          editSheet.closeSheet();
+          setEditingTodo(getEditingTodoDefault());
+        };
+
+        return (
+          <div className="relative w-full">
+            {!isMonthlyView && <CheerMessageCard type="grorong" />}
+
+            <div
+              className={`absolute left-0 right-0 max-w-sm:mx-[20px] sm:mx-[40px] mx-auto bg-[#0F0F10] shadow-xl transition-all duration-300 ease-in-out ${Z_INDEX.CONTENT} ${
+                isMonthlyView ? 'top-0 rounded-none' : 'top-[140px] rounded-t-3xl'
+              }`}
+            >
+              <div className={`flex flex-col ${isMonthlyView ? 'h-screen' : 'h-[calc(100vh-100px)]'}`}>
+                <div className="flex flex-col flex-1 gap-6">
+                  <div className="px-4 md:px-0 pt-[24px]">
+                    <Calendar
+                      view={calendarView}
+                      selectedDate={selectedDate}
+                      onDateSelect={setSelectedDate}
+                      onViewChange={setCalendarView}
+                    />
+                    <TodoList selectedDate={selectedDate} onEdit={handleEdit} />
+                    <AddGoalButton selectedDate={selectedDate} />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <FloatingButton onClick={addSheet.showSheet} aria-label="투두 추가" />
+
+            {/* 추가용 TodoBottomSheet */}
+            <TodoBottomSheet
+              mode="add"
+              isOpen={addSheet.isOpen}
+              onOpen={addSheet.showSheet}
+              onClose={addSheet.closeSheet}
+              selectedDate={selectedDate}
+            />
+
+            {/* 편집용 TodoBottomSheet */}
+            <TodoBottomSheet
+              mode="edit"
+              isOpen={editSheet.isOpen}
+              onOpen={editSheet.showSheet}
+              onClose={handleCloseEditSheet}
+              selectedDate={new Date(editingTodo.date)}
+              values={convertToFormData(editingTodo)}
+              todoId={editingTodo.id}
+            />
+          </div>
+        );
+      }}
+    </TodoListContainerFormProvider>
+  );
+};
+
+export default TodoListContainer;

src/composite/home/todoListContainer/TodoListContainer.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { format } from 'date-fns';
+import Button from '@/shared/components/input/Button';
+import { PlusIcon } from '@/shared/constants/icons';
+import { ROUTES } from '@/shared/constants/routes';
+import { useTodosByDate } from '@/model/todo/todoList';
+
+interface AddGoalButtonProps {
+  selectedDate: Date;
+}
+
+export const AddGoalButton = ({ selectedDate }: AddGoalButtonProps) => {
+  const router = useRouter();
+  const dateString = format(selectedDate, 'yyyy-MM-dd');
+  const { data: todosData } = useTodosByDate({ date: dateString });
+
+  const todoCount = todosData?.length ?? 0;
+
+  const handleAddGoal = useCallback(() => {
+    router.push(ROUTES.CREATE_GOAL);
+  }, [router]);
+
+  // todo가 없으면 버튼 숨김
+  if (todoCount === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex justify-center mb-[120px]">
+      <Button
+        size="ml"
+        variant="tertiary"
+        layout="icon-left"
+        text="목표 추가하기"
+        icon={<PlusIcon />}
+        onClick={handleAddGoal}
+        className="w-auto"
+      />
+    </div>
+  );
+};
+
+export default AddGoalButton;