Renew onboarding

app/_components/GuestModeHandler.tsx

@@ -1,9 +1,45 @@
 "use client";
 
+import { useEffect, useRef } from "react";
 import useAuthStore from "@/stores/useAuthStore";
+import useOnboardingStore from "@/stores/useOnboardingStore";
 import { MSWComponent } from "@/components/_mocks/MSWComponent";
+
 const GuestModeHandler = () => {
-  const { isGuest } = useAuthStore();
+  const { isGuest, isLoggedIn } = useAuthStore();
+  const { resetOnboarding } = useOnboardingStore();
+  const hasCleanedUp = useRef(false);
+
+  // Ensure MSW is stopped and guest data is cleared when transitioning out of guest mode
+  useEffect(() => {
+    // Only cleanup when transitioning from guest mode to authenticated mode
+    if (!isGuest && isLoggedIn && !hasCleanedUp.current) {
+      // Add a small delay to ensure auth state is stable
+      const timeoutId = setTimeout(async () => {
+        try {
+          // Stop MSW worker
+          const { stopMsw } = await import("../../mocks/index");
+          await stopMsw();
+
+          // Clear guest mode onboarding data
+          resetOnboarding();
+
+          hasCleanedUp.current = true;
+          console.log("Guest mode cleanup completed");
+        } catch (error) {
+          console.log("MSW cleanup error (likely already stopped):", error);
+        }
+      }, 100); // Small delay to let auth state stabilize
+
+      return () => clearTimeout(timeoutId);
+    }
+
+    // Reset cleanup flag when entering guest mode again
+    if (isGuest) {
+      hasCleanedUp.current = false;
+    }
+  }, [isGuest, isLoggedIn, resetOnboarding]);
+
   return <>{isGuest && <MSWComponent />}</>;
 };
 

app/onboarding/_components/OnboardingSubGoalEdit.tsx

@@ -0,0 +1,159 @@
+"use client";
+import { motion, Reorder } from "motion/react";
+import { useState, useEffect, useRef } from "react";
+
+import useModal from "@/hooks/useModal";
+
+import SubGoalEditItem from "@/components/details/SubGoalEditItem/SubGoalEditItem";
+import ModalAddingSubGoal from "@/components/shared/Modal/ModalAddingSubGoal/ModalAddingSubGoal";
+import ModalDeletingSubGoal from "@/components/shared/Modal/ModalDeletingSubGoal/ModalDeletingSubGoal";
+import ModalUpdatingSubGoal from "@/components/details/Modals/ModalUpdatingSubGoal/ModalUpdatingSubGoal";
+
+import PlusSvg from "@/components/shared/public/Add_Plus.svg";
+import useToast from "@/hooks/useToast";
+import useOnboardingStore from "@/stores/useOnboardingStore";
+
+const OnboardingSubGoalEdit = () => {
+  const { openModal, closeModal } = useModal();
+  const { setToast } = useToast();
+  const { subGoals, setSubGoals, addSubGoal } = useOnboardingStore();
+  const hasInitialized = useRef(false);
+
+  // Add default "기본함" subGoal when component mounts if it doesn't exist
+  useEffect(() => {
+    if (hasInitialized.current) return;
+
+    const hasDefaultSubGoal = subGoals.some(subGoal => subGoal.title === "기본함");
+
+    if (!hasDefaultSubGoal) {
+      addSubGoal("기본함");
+      hasInitialized.current = true;
+    } else {
+      // Remove duplicate "기본함" subGoals, keep only the first one
+      const defaultSubGoals = subGoals.filter(subGoal => subGoal.title === "기본함");
+      if (defaultSubGoals.length > 1) {
+        const filteredSubGoals = subGoals.filter(subGoal => subGoal.title !== "기본함");
+        filteredSubGoals.unshift(defaultSubGoals[0]); // Keep the first "기본함" at the beginning
+        setSubGoals(filteredSubGoals);
+      }
+      hasInitialized.current = true;
+    }
+  }, [subGoals, addSubGoal, setSubGoals]);
+
+  return (
+    <>
+      <main className="flex flex-col gap-2">
+        <>
+          <div
+            data-type="type5"
+            className="w-full p-3 bg-white rounded-lg shadow-[0px_0px_4px_0px_rgba(0,0,0,0.10)] inline-flex flex-col justify-start items-center gap-2 overflow-hidden"
+          >
+            <div className="self-stretch h-8 inline-flex justify-start items-center gap-1">
+              <div className="flex-1 justify-center text-label-strong text-base font-bold font-['SUIT_Variable'] leading-snug">
+                세부 목표를 추가해주세요.
+              </div>
+              <button
+                onClick={() => {
+                  openModal(
+                    <ModalAddingSubGoal
+                      onClose={() => closeModal()}
+                      onAddSubGoal={async (subGoal: string) => {
+                        addSubGoal(subGoal);
+                        closeModal();
+                      }}
+                    />,
+                  );
+                }}
+                type="button"
+                className="w-8 h-8 p-1.5 bg-background-primary rounded-[999px] flex justify-center items-center gap-2"
+              >
+                <div className="w-5 h-5 relative overflow-hidden text-white">
+                  <PlusSvg width={20} height={20} />
+                </div>
+              </button>
+            </div>
+          </div>
+        </>
+        <Reorder.Group
+          onReorder={(newOrderedSubGoals) => {
+            const orderUpdated = newOrderedSubGoals as typeof subGoals;
+            setSubGoals(
+              orderUpdated.map((subGoalInfo, idx) => ({
+                ...subGoalInfo,
+                order: idx + 1,
+              }))
+            );
+          }}
+          values={subGoals}
+        >
+          <section className="flex flex-col gap-2">
+            {subGoals.map((currentSubGoalInfo, idx) => (
+              <Reorder.Item
+                value={currentSubGoalInfo}
+                key={
+                  currentSubGoalInfo.id
+                    ? `${currentSubGoalInfo.id}-${currentSubGoalInfo.title}`
+                    : currentSubGoalInfo.tmpKey || currentSubGoalInfo.order
+                }
+              >
+                <SubGoalEditItem
+                  subGoalTitle={currentSubGoalInfo.title}
+                  onEdit={
+                    currentSubGoalInfo.title === "기본함"
+                      ? undefined
+                      : () => {
+                          openModal(
+                            <ModalUpdatingSubGoal
+                              initSubGoal={currentSubGoalInfo.title}
+                              onClose={closeModal}
+                              onUpdateSubGoal={async (newSubGoalTitle) => {
+                                const newSubGoals = subGoals.map((prevSubGoal) => {
+                                  if (
+                                    prevSubGoal.tmpKey === currentSubGoalInfo.tmpKey ||
+                                    prevSubGoal.id === currentSubGoalInfo.id
+                                  ) {
+                                    return { ...prevSubGoal, title: newSubGoalTitle };
+                                  }
+                                  return prevSubGoal;
+                                });
+
+                                setSubGoals(newSubGoals);
+                                setToast("세부 목표 텍스트 변경이 완료되었습니다.");
+                              }}
+                            />,
+                          );
+                        }
+                  }
+                  onDelete={
+                    currentSubGoalInfo.title === "기본함"
+                      ? undefined
+                      : () => {
+                          openModal(
+                            <ModalDeletingSubGoal
+                              onClose={closeModal}
+                              onDeletSubGoale={async () => {
+                                const newSubGoals = subGoals.filter(
+                                  (prevSubGoal) =>
+                                    prevSubGoal.tmpKey !== currentSubGoalInfo.tmpKey &&
+                                    prevSubGoal.id !== currentSubGoalInfo.id
+                                );
+
+                                setSubGoals(newSubGoals);
+                                closeModal();
+                                setToast("세부 목표 삭제가 완료되었습니다.");
+                              }}
+                            />,
+                          );
+                        }
+                  }
+                />
+              </Reorder.Item>
+            ))}
+          </section>
+        </Reorder.Group>
+      </main>
+    </>
+  );
+};
+
+export default OnboardingSubGoalEdit;

app/onboarding/_components/PeriodSelectionScreen.tsx

@@ -7,6 +7,7 @@ import { ButtonRound } from "@/components/shared/ButtonRound/ButtonRound";
 import { CupertinoPicker } from "@/components/shared/CupertinoPicker/CupertinoPicker";
 import api, { goalApi } from "@/api/service";
 import useOnboardingStore from "@/stores/useOnboardingStore";
+import useAuthStore from "@/stores/useAuthStore";
 
 interface PeriodSelectionScreenProps {
   onNext: () => void;
@@ -22,10 +23,13 @@ export default function PeriodSelectionScreen({
     periodType,
     monthCount,
     targetDate,
+    subGoals,
     setPeriodType,
     setMonthCount,
     setTargetDate,
   } = useOnboardingStore();
+
+  const { isGuest } = useAuthStore();
 
   const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
   const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
@@ -272,17 +276,23 @@ export default function PeriodSelectionScreen({
               })();
 
             try {
-              await goalApi.createGoal({
-                title: goal,
-                isPeriodByMonth,
-                month: isPeriodByMonth ? monthCount : undefined,
-                dueDate,
-                subGoals: [],
-              });
+              // Skip API call for guests
+              if (!isGuest) {
+                await goalApi.createGoal({
+                  title: goal,
+                  isPeriodByMonth,
+                  month: isPeriodByMonth ? monthCount : undefined,
+                  dueDate,
+                  subGoals: subGoals.map((subGoal, index) => ({
+                    title: subGoal.title,
+                    order: index + 1,
+                  })),
+                });
+              }
               onNext();
             } catch (error) {
               console.error('Failed to create goal:', error);
-            setIsSubmitting(false);
+              setIsSubmitting(false);
               // Handle error appropriately (show toast, etc.)
             }
           }}

app/onboarding/_components/SubGoalSelectionScreen.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { AppBar } from "@/components/shared/AppBar/AppBar";
+import { ButtonRound } from "@/components/shared/ButtonRound/ButtonRound";
+import OnboardingSubGoalEdit from "./OnboardingSubGoalEdit";
+import useOnboardingStore from "@/stores/useOnboardingStore";
+import { goalApi } from "@/api/service";
+import { GoalCreateRq } from "@/api/generated/motimo/Api";
+
+interface SubGoalSelectionScreenProps {
+  onNext: () => void;
+  onBack: () => void;
+}
+
+export default function SubGoalSelectionScreen({
+  onNext,
+  onBack,
+}: SubGoalSelectionScreenProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { goal, periodType, monthCount, targetDate, subGoals, setSubGoals } =
+    useOnboardingStore();
+
+  // Cleanup duplicate "기본함" subGoals when this screen loads
+  useEffect(() => {
+    const defaultSubGoals = subGoals.filter(
+      (subGoal) => subGoal.title === "기본함",
+    );
+    if (defaultSubGoals.length > 1) {
+      const otherSubGoals = subGoals.filter(
+        (subGoal) => subGoal.title !== "기본함",
+      );
+      setSubGoals([defaultSubGoals[0], ...otherSubGoals]);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleSubmit = async () => {
+    if (isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      if (subGoals.length > 0) {
+        // Create goal with subgoals
+        const goalData: GoalCreateRq = {
+          title: goal,
+          isPeriodByMonth: periodType === "months",
+          ...(periodType === "months"
+            ? { month: monthCount }
+            : { dueDate: targetDate?.toISOString().split("T")[0] }),
+          subGoals: subGoals.map((subGoal) => ({
+            title: subGoal.title,
+          })),
+        };
+
+        await goalApi.createGoal(goalData);
+      }
+
+      onNext();
+    } catch (error) {
+      console.error("Failed to create goal:", error);
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background-alternative flex flex-col">
+      <AppBar type="progress" progress={100} onBackClick={onBack} />
+      <div className="py-[8px]" />
+
+      {/* Content */}
+      <div className="flex-1 px-6">
+        {/* Title and Description */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-label-strong mb-2">
+            세부 목표를 설정할 수 있어요.
+          </h1>
+          <p className="text-base font-normal text-label-alternative leading-[1.4]">
+            세부 목표를 설정하지 않았다면,{"\n"}기본함에 자동으로 투두가
+            들어가요.
+          </p>
+        </div>
+
+        {/* SubGoal Edit Component */}
+        <div className="mb-8">
+          <OnboardingSubGoalEdit />
+        </div>
+      </div>
+
+      {/* Next/Setup Later Button */}
+      <div className="px-4 pb-14">
+        <ButtonRound onClick={handleSubmit} disabled={isSubmitting}>
+          {isSubmitting
+            ? "처리 중..."
+            : subGoals.length > 1
+              ? "다음"
+              : "나중에 설정하기"}
+        </ButtonRound>
+      </div>
+    </div>
+  );
+}