[민우] - 계획 작성 페이지 분리 및 구현

package.json

@@ -20,6 +20,7 @@
     "react": "^18",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18",
+    "react-form-stepper": "^2.0.3",
     "react-hot-toast": "^2.4.1",
     "react-infinite-scroller": "^1.2.6",
     "react-spinners": "^0.13.8",

src/app/(header)/create/_components/CreatePlanStepper/CreatePlanStepper.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Stepper } from 'react-form-stepper';
+import './index.scss';
+
+interface CreatePlanStepperProps {
+  nowStep: number;
+}
+
+export default function CreatePlanStepper({ nowStep }: CreatePlanStepperProps) {
+  return (
+    <Stepper
+      steps={[{ label: '' }, { label: '' }, { label: '' }, { label: '' }]}
+      activeStep={nowStep}
+      connectorStateColors={true}
+      connectorStyleConfig={{
+        size: 1.5,
+        style: 'solid',
+        completedColor: '#f76c5e',
+        activeColor: '#f76c5e',
+        disabledColor: '#eee',
+      }}
+      styleConfig={{
+        size: '2rem',
+        circleFontSize: '1rem',
+        labelFontSize: '1rem',
+        borderRadius: '50%',
+        fontWeight: '500',
+        activeBgColor: '#f76c5e',
+        completedBgColor: '#f76c5e',
+        inactiveBgColor: '#eee',
+        activeTextColor: '#ffffff',
+        completedTextColor: '#ffffff',
+        inactiveTextColor: '#ffffff',
+      }}
+      className={'stepper'}
+      stepClassName={'stepper__step'}
+    />
+  );
+}

src/app/(header)/create/_components/CreatePlanStepper/index.scss

@@ -0,0 +1,4 @@
+.stepper{
+  width: 100%;
+  padding: 2rem 1.5rem;
+}

src/app/(header)/create/_components/StepButtonGroup/StepButtonGroup.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { Button } from '@/components';
+import { ajajaToast } from '@/components/Toaster/customToast';
+import { SESSION_STORAGE_KEY } from '@/constants';
+import { usePostNewPlanMutation } from '@/hooks/apis/usePostNewPlanMutation';
+import { PlanContentType } from '@/types/Plan';
+import { RemindItemType, RemindOptionType } from '@/types/Remind';
+import { PostNewPlanRequestBody } from '@/types/apis/plan/PostNewPlan';
+import { changeRemindTimeToString } from '@/utils/changeRemindTimeToString';
+import classNames from 'classnames';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import './index.scss';
+
+interface StepButtonGroupProps {
+  nowStep: number;
+  goToPreviousStep: () => void;
+  goToNextStep: () => void;
+  goToLastStep: () => void;
+  isFirstStepDataAllExist: boolean;
+  isSecondStepDataAllExist: boolean;
+  isLastStepDataAllExist: boolean;
+}
+
+export default function StepButtonGroup({
+  nowStep,
+  goToPreviousStep,
+  goToNextStep,
+  goToLastStep,
+  isFirstStepDataAllExist,
+  isSecondStepDataAllExist,
+  isLastStepDataAllExist,
+}: StepButtonGroupProps) {
+  const router = useRouter();
+
+  const isEveryStepDataAllExist =
+    isFirstStepDataAllExist &&
+    isSecondStepDataAllExist &&
+    isLastStepDataAllExist;
+
+  const exitCreatePlanPage = () => {
+    router.back();
+  };
+
+  const handleClickGoToNextStep = (isEachStepDataAllExist: boolean) => {
+    if (isEachStepDataAllExist) {
+      goToNextStep();
+    } else {
+      ajajaToast.error('모든 항목을 입력해주세요!');
+    }
+  };
+
+  const { mutate: createNewPlanAPI } = usePostNewPlanMutation();
+
+  const handleClickCreatePlan = (isEveryStepDataAllExist: boolean) => {
+    const planIconItem = sessionStorage.getItem(SESSION_STORAGE_KEY.STEP_1);
+    const planContentItem = sessionStorage.getItem(SESSION_STORAGE_KEY.STEP_2);
+    const remindDateItem = sessionStorage.getItem(SESSION_STORAGE_KEY.STEP_3);
+    const remindMessageItem = sessionStorage.getItem(
+      SESSION_STORAGE_KEY.STEP_4,
+    );
+
+    if (
+      isEveryStepDataAllExist &&
+      planIconItem &&
+      planContentItem &&
+      remindDateItem &&
+      remindMessageItem
+    ) {
+      const planIcon = JSON.parse(planIconItem) as number;
+      const planContent = JSON.parse(planContentItem) as PlanContentType;
+      const remindDate = JSON.parse(remindDateItem) as RemindOptionType;
+      const remindMessage = JSON.parse(remindMessageItem) as RemindItemType[];
+
+      const data: PostNewPlanRequestBody = {
+        iconNumber: planIcon,
+        isPublic: planContent.isPublic,
+        title: planContent.title,
+        description: planContent.description,
+        tags: planContent.tags,
+
+        remindTotalPeriod: remindDate.TotalPeriod,
+        remindTerm: remindDate.Term,
+        remindDate: remindDate.Date,
+        remindTime: changeRemindTimeToString(remindDate.Time),
+        messages: remindMessage.map((messageItem) => {
+          return messageItem.message;
+        }),
+      };
+
+      createNewPlanAPI(data);
+      ajajaToast.success('계획 작성 API 실행');
+      router.push('/home');
+    } else {
+      ajajaToast.error('모든 항목을 입력해주세요!');
+    }
+  };
+
+  return (
+    <div className={classNames('step-button-group')}>
+      {(() => {
+        switch (nowStep) {
+          case 1:
+            return (
+              <>
+                <Button
+                  background="white-100"
+                  border={true}
+                  color="primary"
+                  onClick={exitCreatePlanPage}
+                  size="sm">
+                  나가기
+                </Button>
+                <Button
+                  background="primary"
+                  border={false}
+                  color="white-100"
+                  onClick={() => {
+                    handleClickGoToNextStep(isFirstStepDataAllExist);
+                  }}>
+                  다음 단계
+                </Button>
+              </>
+            );
+          case 2:
+            return (
+              <>
+                <Button
+                  background="white-100"
+                  border={true}
+                  color="primary"
+                  onClick={goToPreviousStep}>
+                  이전 단계
+                </Button>
+                <Button
+                  background="primary"
+                  border={false}
+                  color="white-100"
+                  onClick={() => {
+                    handleClickGoToNextStep(isSecondStepDataAllExist);
+                  }}>
+                  다음 단계
+                </Button>
+              </>
+            );
+          case 3:
+            return (
+              <>
+                <Button
+                  background="white-100"
+                  border={true}
+                  color="primary"
+                  onClick={goToPreviousStep}>
+                  이전 단계
+                </Button>
+                <Button
+                  background="primary"
+                  border={false}
+                  color="white-100"
+                  onClick={() => {
+                    goToLastStep();
+                  }}>
+                  다음 단계
+                </Button>
+              </>
+            );
+          case 4:
+            return (
+              <>
+                <Button
+                  background="white-100"
+                  border={true}
+                  color="primary"
+                  onClick={goToPreviousStep}>
+                  이전 단계
+                </Button>
+                <Button
+                  background="primary"
+                  border={false}
+                  color="white-100"
+                  onClick={() => {
+                    handleClickCreatePlan(isEveryStepDataAllExist);
+                  }}>
+                  작성 완료
+                </Button>
+              </>
+            );
+          default:
+            return <div>Invalid nowStep value</div>;
+        }
+      })()}
+    </div>
+  );
+}

src/app/(header)/create/_components/StepButtonGroup/index.scss

@@ -0,0 +1,9 @@
+.step-button-group{
+  display: flex;
+  position: absolute;
+  bottom: 6rem;
+  width: calc(100% - 3rem);
+  background-color: transparent;
+  justify-content: end;
+  gap: 24px;
+}

src/app/(header)/create/index.scss

@@ -1,25 +1,11 @@
-.create-page {
-  padding: 1.75rem 2.5rem;
-  // height: 100%;
+.new-create-page{
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  // overflow: auto;
+  align-items: center;
 
-  &__remind {
-    &:before {
-      content: '';
-      display: block;
-      height: 0.3px;
-      background-color: var(--origin-gray-100);
-      border: 1px solid var(--origin-gray-100);
-      margin: 2rem 0 2rem 0;
-    }
+  &__title{
+    margin-top: 0rem;
   }
-
-  &__button__container {
-    margin-top: 2rem;
-    display: flex;
-    justify-content: center;
-    gap: 13rem;
-  }
-}
+}