Merge pull request #222 from DDD-Community/epic/goal-onboard

Feat: 목표생성 온보딩 페이지 적용

Author: IceBear9028

public/goal-onboard/goal-onboard-1.png

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useFormContext } from 'react-hook-form';
+import { FunnelHeader, FunnelHeaderProvider } from '@/shared/components/layout/FunnelHeader';
+import { FunnelNextButton } from '@/shared/components/layout/FunnelNextButton';
+import { SwipeActionButton } from '@/shared/components/input/SwipeActionButton';
+import { WelcomeStep, GoalNameStep, DateStep, CompleteStep } from '@/composite/goal-onboard';
+import { ROUTES } from '@/shared/constants/routes';
+import { useFetchUserName } from '@/shared/hooks';
+import { GoalMutation } from '@/model/goal/hooks';
+import { GoalQueryKeys } from '@/model/goal/queryKeys';
+import { userApi, UserQueryKeys } from '@/model/user';
+import { useToast } from '@/shared/components/feedBack/toast';
+import { CreateGoalFormElement } from '@/feature/goal';
+import { GoalFormData } from '@/shared/type/form';
+import { CreateGoalResponseData } from '@/feature/goal/confimGoal/api';
+
+const TOTAL_STEPS = 4;
+
+function GoalOnboardContent() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+  const { fullUserName } = useFetchUserName();
+
+  const [currentStep, setCurrentStep] = useState(1);
+  const [createdGoalData, setCreatedGoalData] = useState<CreateGoalResponseData | null>(null);
+
+  const { watch } = useFormContext<GoalFormData>();
+  const goalName = watch('name');
+  const startDate = watch('durationDate.startDate');
+  const endDate = watch('durationDate.endDate');
+
+  const { mutate: createGoal, isPending } = useMutation(
+    GoalMutation.createGoal({
+      onSuccess: data => {
+        queryClient.invalidateQueries({ queryKey: GoalQueryKeys.progress() });
+        setCreatedGoalData(data);
+        setCurrentStep(4); // 완료 스텝으로 이동
+      },
+      onError: () => {
+        showToast('목표 생성에 실패했습니다.', 'error');
+      },
+    })
+  );
+
+  const { mutate: updateOnboardStatus } = useMutation({
+    mutationFn: userApi.putOnboardStatus,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: UserQueryKeys.onboardStatus() });
+      setCurrentStep(2);
+    },
+    onError: () => {
+      showToast('온보딩 등록에 실패했습니다.', 'error');
+    },
+  });
+
+  const validateStep = (): boolean => {
+    switch (currentStep) {
+      case 2:
+        return !!goalName?.trim();
+      case 3:
+        return !!startDate && !!endDate;
+      default:
+        return true;
+    }
+  };
+
+  const handleNext = () => {
+    if (!validateStep()) return;
+
+    if (currentStep === 1) {
+      // 온보딩 등록 API 호출
+      updateOnboardStatus();
+      return;
+    }
+
+    if (currentStep === 3) {
+      // 목표 생성 API 호출
+      createGoal({
+        category: '',
+        name: goalName,
+        duration: 0,
+        durationDate: {
+          startDate,
+          endDate,
+        },
+        toBe: '',
+        plans: [],
+      });
+      return;
+    }
+
+    if (currentStep < TOTAL_STEPS) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handleBack = () => {
+    if (currentStep > 1) {
+      setCurrentStep(currentStep - 1);
+    } else {
+      router.push(ROUTES.HOME);
+    }
+  };
+
+  const handleComplete = () => {
+    router.push(ROUTES.HOME);
+    showToast('목표 생성이 완료되었습니다.', 'success');
+  };
+
+  const getButtonText = (): string => {
+    switch (currentStep) {
+      case 1:
+        return '목표 설정하기';
+      case 3:
+        return isPending ? '생성 중...' : '완료';
+      case 4:
+        return '목표 시작하기';
+      default:
+        return '다음';
+    }
+  };
+
+  const isButtonDisabled = (): boolean => {
+    if (isPending) return true;
+
+    switch (currentStep) {
+      case 2:
+        return !goalName?.trim();
+      case 3:
+        return !startDate || !endDate;
+      default:
+        return false;
+    }
+  };
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case 1:
+        return <WelcomeStep userName={fullUserName} />;
+      case 2:
+        return <GoalNameStep />;
+      case 3:
+        return <DateStep />;
+      case 4:
+        return (
+          <CompleteStep goalName={goalName} startDate={startDate} endDate={endDate} planet={createdGoalData?.planet} />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <FunnelHeaderProvider>
+      <main className="flex flex-1 flex-col h-screen overflow-hidden bg-normal">
+        {currentStep > 1 && currentStep < 4 && (
+          <FunnelHeader
+            currentStep={currentStep - 1}
+            totalSteps={TOTAL_STEPS - 2}
+            onBack={handleBack}
+            title="목표 추가"
+          />
+        )}
+
+        <div className="flex flex-1 flex-col overflow-hidden">{renderStep()}</div>
+
+        {currentStep === 4 ? (
+          <div className="fixed bottom-0 left-0 right-0 p-5 max-w-md mx-auto">
+            <SwipeActionButton text="목표 시작하기" onSwipeComplete={handleComplete} />
+          </div>
+        ) : (
+          <FunnelNextButton text={getButtonText()} onClick={handleNext} disabled={isButtonDisabled()} />
+        )}
+      </main>
+    </FunnelHeaderProvider>
+  );
+}
+
+export default function GoalOnboardPage() {
+  return (
+    <CreateGoalFormElement.Provider>
+      <GoalOnboardContent />
+    </CreateGoalFormElement.Provider>
+  );
+}

public/goal-onboard/goal-onboard-2.png

@@ -2,7 +2,7 @@
 
 import { useAutoLogout } from '@/shared/hooks';
 import { NavigationBar } from '@/shared/components/layout';
-import { NotifyOnboardModal } from '@/feature/onboard/notifyOnboardModal';
+import { GoalOnboardRedirect } from '@/feature/onboard';
 
 interface HomeLayoutProps {
   children?: React.ReactNode;
@@ -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 /> */}
+      <GoalOnboardRedirect />
       <div className="flex flex-1 flex-col overflow-x-hidden">{children}</div>
     </div>
   );

public/goal-onboard/goal-onboard-3.png

@@ -0,0 +1 @@
+export * from './steps';

src/app/(home)/goal/create-onboard/page.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import FlexBox from '@/shared/components/foundation/FlexBox';
+
+interface CompleteStepProps {
+  goalName: string;
+  startDate?: string;
+  endDate?: string;
+  planet?: {
+    name: string;
+    image: {
+      done: string;
+      progress: string;
+    };
+  };
+}
+
+const formatDateRange = (startDate?: string, endDate?: string): string => {
+  if (!startDate || !endDate) return '';
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const days = ['일', '월', '화', '수', '목', '금', '토'];
+
+  const formatDate = (date: Date) => {
+    const year = String(date.getFullYear()).slice(2);
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const dayName = days[date.getDay()];
+    return `${year}.${month}.${day} (${dayName})`;
+  };
+
+  return `${formatDate(start)} ~ ${formatDate(end)}`;
+};
+
+export const CompleteStep = ({ goalName, startDate, endDate, planet }: CompleteStepProps) => {
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+
+  return (
+    <FlexBox direction="col" className="flex-1 items-center px-5 pt-12">
+      <FlexBox direction="col" className="items-center gap-2 text-center mb-8">
+        <h1 className="text-2xl font-bold text-white">나의 목표 행성이에요</h1>
+        <p className="text-base text-text-secondary">목표를 끝까지 완료해 행성을 완성시키세요</p>
+      </FlexBox>
+
+      <div className="relative w-[200px] h-[200px] mb-4">
+        {/* 로딩 중 placeholder */}
+        {!isImageLoaded && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-[160px] h-[160px] rounded-full bg-fill-normal animate-pulse" />
+          </div>
+        )}
+        <Image
+          src={planet?.image.progress || '/goal/goal-progress.png'}
+          alt="목표 행성"
+          fill
+          className={`object-contain transition-all duration-700 ease-out ${
+            isImageLoaded ? 'opacity-100 scale-100' : 'opacity-0 scale-75'
+          }`}
+          priority
+          onLoad={() => setIsImageLoaded(true)}
+        />
+      </div>
+
+      <p
+        className={`text-sm text-text-tertiary mb-8 transition-opacity duration-500 delay-300 ${
+          isImageLoaded ? 'opacity-100' : 'opacity-0'
+        }`}
+      >
+        {planet?.name ? `${planet.name} 행성` : '행성'}
+      </p>
+
+      <div className="w-full bg-fill-normal rounded-2xl p-4">
+        <h3 className="text-lg font-semibold text-white mb-2">{goalName}</h3>
+        {startDate && endDate && (
+          <p className="text-sm text-text-secondary">날짜 {formatDateRange(startDate, endDate)}</p>
+        )}
+      </div>
+    </FlexBox>
+  );
+};

src/app/(home)/layout.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import Image from 'next/image';
+import FlexBox from '@/shared/components/foundation/FlexBox';
+import { CreateGoalFormElement } from '@/feature/goal';
+
+export const DateStep = () => {
+  return (
+    <FlexBox direction="col" className="flex-1 px-5 pt-6 overflow-y-auto pb-24">
+      <FlexBox direction="col" className="items-center mb-8">
+        <div className="relative w-[236px] h-[190px] mb-4 -ml-5">
+          <Image src="/goal-onboard/goal-onboard-3.png" alt="그로롱 캐릭터" fill className="object-contain" priority />
+        </div>
+        <h2 className="text-xl font-bold text-white text-center">언제까지 목표를 이뤄볼까?</h2>
+      </FlexBox>
+
+      <FlexBox direction="col" className="gap-4">
+        <CreateGoalFormElement.SelectStartDate />
+        <CreateGoalFormElement.SelectEndDate />
+      </FlexBox>
+
+      <p className="text-sm text-status-negative mt-4">ⓘ 목표 기간은 최소 1주, 최대 1년까지 설정 가능합니다.</p>
+    </FlexBox>
+  );
+};

src/composite/goal-onboard/index.ts

@@ -0,0 +1,22 @@
+'use client';
+
+import Image from 'next/image';
+import FlexBox from '@/shared/components/foundation/FlexBox';
+import { CreateGoalFormElement } from '@/feature/goal';
+
+export const GoalNameStep = () => {
+  return (
+    <FlexBox direction="col" className="flex-1 px-5 pt-6">
+      <FlexBox direction="col" className="items-center mb-8">
+        <div className="relative w-[236px] h-[190px] mb-4">
+          <Image src="/goal-onboard/goal-onboard-2.png" alt="그로롱 캐릭터" fill className="object-contain" priority />
+        </div>
+        <h2 className="text-xl font-bold text-white text-center">어떤 목표를 이루고 싶어?</h2>
+      </FlexBox>
+
+      <div className="w-full">
+        <CreateGoalFormElement.Name />
+      </div>
+    </FlexBox>
+  );
+};

src/composite/goal-onboard/steps/CompleteStep.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import Image from 'next/image';
+
+interface WelcomeStepProps {
+  userName?: string;
+}
+
+export const WelcomeStep = ({ userName = '' }: WelcomeStepProps) => {
+  const displayName = userName || '친구';
+
+  return (
+    <div className="relative flex-1 w-full h-full overflow-hidden">
+      <Image
+        src="/goal-onboard/goal-onboard-1.png"
+        alt="목표 온보딩"
+        fill
+        className="object-cover object-top"
+        priority
+      />
+      {/* 텍스트 오버레이 */}
+      <div className="absolute top-20 left-0 right-0 flex flex-col items-center text-center px-5 z-10">
+        <h1 className="text-2xl font-bold text-white mb-3">{displayName}, 동행해줘서 고마워.</h1>
+        <p className="text-base text-text-secondary whitespace-pre-line">
+          {`이제 그로롱과 함께 목표 행성을\n모으러 떠나보자!`}
+        </p>
+      </div>
+    </div>
+  );
+};