Merge pull request #44 from DDD-Community/feat/goal-modal

[feat] : 목표 생성 완료 모달 및 다이얼로그 컴포넌트 개선

Author: IceBear9028

src/app/(auth)/signup/components/SignupDialogButton.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/shared/components/dialog';
+import Button from '@/shared/components/navigation/Button';
 
 interface SignupButtonProps {
   isValid: boolean;
@@ -26,18 +27,12 @@ export const SignupDialogButton = ({ isValid, onClick, isSignupSuccess, isSubmit
 
   return (
     <>
-      <button
-        type="button"
+      <Button
+        size={'ml'}
         onClick={onClick}
         disabled={!isValid || isSubmitting}
-        className={`w-full py-3 rounded-lg font-medium transition-colors ${
-          isValid && !isSubmitting
-            ? 'bg-white text-black hover:bg-gray-100'
-            : 'bg-[#2C2C2E] text-gray-500 cursor-not-allowed'
-        }`}
-      >
-        {isSubmitting ? '가입 중...' : '가입하기'}
-      </button>
+        text={isSubmitting ? '가입 중...' : '가입하기'}
+      />
       <Dialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>

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

@@ -21,14 +21,22 @@ export interface GoalFormData {
     asIs: string;
     toBe: string;
   };
-  plans: { content: string }[];
+  plans: {
+    content: string;
+    weekOfMonth: number;
+  }[];
 }
 
 const defaultValues: GoalFormData = {
   name: '',
   duration: { startDate: '', endDate: '' },
   beforeAfter: { asIs: '', toBe: '' },
-  plans: [{ content: '' }, { content: '' }, { content: '' }, { content: '' }],
+  plans: [
+    { content: '', weekOfMonth: 1 },
+    { content: '', weekOfMonth: 2 },
+    { content: '', weekOfMonth: 3 },
+    { content: '', weekOfMonth: 4 },
+  ],
 };
 
 // 날짜를 YYYY-MM-DD 형식으로 변환하는 함수 (시간대 문제 해결)
@@ -74,8 +82,8 @@ export default function CreateGoalPage() {
     reValidateMode: 'onChange',
     defaultValues,
   });
-  const { isLoading, isError, createGoal } = useFetchPostCreateGoal();
   const [completed, setCompleted] = useState(false);
+  const { isLoading, isError, isSuccess, createGoal } = useFetchPostCreateGoal();
 
   const startDate = watch('duration.startDate');
 
@@ -254,6 +262,7 @@ export default function CreateGoalPage() {
         onComplete={handleSubmit(onSubmit)}
         isComplete={isValid && percent === 100 && !completed}
         isLoading={isLoading}
+        isSuccess={isSuccess}
         isError={isError}
       />
     </main>

src/feature/goal/components/ConfirmGoalBottomBar.tsx

@@ -1,6 +1,7 @@
 import FlexBox from '@/shared/components/layout/FlexBox';
 import Button from '@/shared/components/navigation/Button';
 import { motion } from 'framer-motion';
+import { GoalDialogButton } from '@/feature/goal/components/GoalDialogButton';
 
 interface ProgressBarProps {
   doneTask?: number;
@@ -10,25 +11,19 @@ interface ProgressBarProps {
   onComplete: () => void;
   isComplete: boolean;
   isError?: boolean;
+  isSuccess?: boolean;
 }
 
 export const ConfirmGoalBottomBar = ({
-  isLoading,
   doneTask,
   totalTask,
   percentage,
   onComplete,
+  isLoading,
   isComplete,
   isError = false,
+  isSuccess = false,
 }: ProgressBarProps) => {
-  const isButtonEnabled = !isLoading && (isComplete || isError);
-
-  const getButtonText = () => {
-    if (isLoading) return '로딩중';
-    if (isError) return '다시 시도';
-    return '목표 작성 완료';
-  };
-
   return (
     <div className="w-full flex items-center max-sm:flex-col max-sm:gap-[20px] max-sm:px-[20px] max-sm:pb-[48px] sm:gap-[60px] sm:px-[40px] sm:pb-[16px] pt-[20px] border-t border-line-normal">
       <div className="flex flex-col gap-2 items-start w-full">
@@ -46,9 +41,13 @@ export const ConfirmGoalBottomBar = ({
           />
         </FlexBox>
       </div>
-      <FlexBox className="max-sm:w-full sm:min-w-[140px]">
-        <Button size="xl" text={getButtonText()} onClick={onComplete} disabled={!isButtonEnabled} />
-      </FlexBox>
+      <GoalDialogButton
+        isLoading={isLoading}
+        isComplete={isComplete}
+        isSuccess={isSuccess}
+        isError={isError}
+        onClick={onComplete}
+      />
     </div>
   );
 };

src/feature/goal/components/GoalDialogButton.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import Button from '@/shared/components/navigation/Button';
+import FlexBox from '@/shared/components/layout/FlexBox';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/shared/components/dialog';
+import { useRouter } from 'next/navigation';
+
+interface GoalDialogButtonProps {
+  isLoading: boolean;
+  isComplete: boolean;
+  isSuccess: boolean;
+  isError: boolean;
+  onClick: () => void;
+}
+
+export const GoalDialogButton = ({ isLoading, isError, isComplete, isSuccess, onClick }: GoalDialogButtonProps) => {
+  const router = useRouter();
+  const [showSuccessDialog, setShowSuccessDialog] = useState(false);
+
+  const isButtonEnabled = !isLoading && (isComplete || isError);
+  const getButtonText = () => {
+    if (isLoading) return '로딩중';
+    if (isError) return '다시 시도';
+    return '목표 작성 완료';
+  };
+  const handleSuccessConfirm = () => {
+    setShowSuccessDialog(false);
+    router.push('/home');
+  };
+
+  useEffect(() => {
+    if (isSuccess) setShowSuccessDialog(true);
+  }, [isSuccess]);
+
+  return (
+    <>
+      <FlexBox className="max-sm:w-full sm:min-w-[140px]">
+        <Button size="xl" text={getButtonText()} onClick={onClick} disabled={!isButtonEnabled} />
+      </FlexBox>
+      <Dialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
+        <DialogContent className="sm:max-w-md" showCloseButton={false}>
+          <DialogHeader>
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 mb-4">
+              <svg className="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <DialogTitle className="text-center">축하한다냥 🐱</DialogTitle>
+            <DialogDescription className="text-center">드디어 4주간 여정의 도착지가 정해졌다냥!</DialogDescription>
+          </DialogHeader>
+          <Button size={'ml'} text={'4주 여정 시작하기'} onClick={handleSuccessConfirm} />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

src/feature/goal/hooks/useFetchPostCreateGoal.ts

@@ -1,5 +1,4 @@
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { postCreateGoal } from '../api/api';
 import { GoalFormData } from '@/app/(home)/home/create-goal/page';
 import { useToast } from '@/shared/components/feedBack/toast';
@@ -14,7 +13,6 @@ interface UseFetchPostCreateGoalReturn {
 }
 
 export const useFetchPostCreateGoal = (): UseFetchPostCreateGoalReturn => {
-  const router = useRouter();
   const { showToast } = useToast();
   const [isLoading, setIsLoading] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
@@ -28,16 +26,8 @@ export const useFetchPostCreateGoal = (): UseFetchPostCreateGoalReturn => {
       setIsSuccess(false);
       setIsError(false);
       setError(null);
-
       await postCreateGoal(data);
-
       setIsSuccess(true);
-      showToast('목표가 성공적으로 생성되었습니다!', 'success');
-
-      // 성공 토스트 메시지가 보인 후 home 페이지로 이동
-      setTimeout(() => {
-        router.push('/home');
-      }, 500);
     } catch (err) {
       setIsError(true);
       const errorMessage = err instanceof Error ? err.message : '목표 생성에 실패했습니다.';

src/shared/components/dialog.tsx

@@ -27,7 +27,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
         className
       )}
       {...props}
@@ -49,7 +49,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-elevated-normal data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg p-6 shadow-lg duration-200 sm:max-w-lg',
           className
         )}
         {...props}
@@ -58,7 +58,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 text-label-normal"
           >
             <XIcon />
             <span className="sr-only">Close</span>
@@ -73,7 +73,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn('flex flex-col gap-2 text-center sm:text-left text-label-normal', className)}
       {...props}
     />
   );
@@ -93,7 +93,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn('text-lg leading-none font-semibold text-label-normal', className)}
       {...props}
     />
   );