[#679] [모임 생성] 모임 생성 퍼널 종료기능 추가 (#683)

* feat: 모임생성 퍼널 종료 버튼 추가 * feat: FunnelBottomActionButton 합성 컴포넌트 작성 * feat: FunnelBottomActionButton 적용 * feat: 모임 생성 종료 Modal 작성 * fix: 모임 생성 모달 종료 옵션을 router.push에서 router.back으로 수정 * feat: StickyFooter 작성 * refactor: 기존의 BottomActionButtond을 StickyFooter로 교체 * fix: LoginBottomActionButton 내부의 link 태그 위치 수정
prgrms-web-devcourse · Aug 8, 2024 · da7b63e · da7b63e
1 parent 004bc4f
commit da7b63e
Show file tree

Hide file tree

Showing 12 changed files with 248 additions and 109 deletions.
diff --git a/src/app/book/[bookId]/page.tsx b/src/app/book/[bookId]/page.tsx
@@ -16,12 +16,13 @@ import { SERVICE_ERROR_MESSAGE } from '@/constants';
 import Skeleton from '@/components/common/Skeleton';
 import SSRSafeSuspense from '@/components/common/SSRSafeSuspense';
 import TopNavigation from '@/components/common/TopNavigation';
-import BottomActionButton from '@/components/common/BottomActionButton';
+import StickyFooter from '@/components/common/StickyFooter';
 import LoginBottomActionButton from '@/components/common/LoginBottomActionButton';
 import CommentDrawer from '@/components/comment/CommentDrawer';
 import BackButton from '@/components/common/BackButton';
 import BookInfo, { BookInfoSkeleton } from '@/components/book/detail/BookInfo';
 import BookCommentList from '@/components/comment/BookCommentList';
+import Button from '@/components/common/Button';
 
 const BookDetailPage = ({
   params: { bookId },
@@ -125,9 +126,11 @@ const AddBookCommentButton = ({ bookId }: { bookId: APIBook['bookId'] }) => {
 
   return (
     <>
-      <BottomActionButton onClick={onDrawerOpen}>
-        코멘트 작성하기
-      </BottomActionButton>
+      <StickyFooter>
+        <Button size="full" onClick={onDrawerOpen}>
+          코멘트 작성하기
+        </Button>
+      </StickyFooter>
       <CommentDrawer
         isOpen={isDrawerOpen}
         onClose={onDrawerClose}

diff --git a/src/app/group/[groupId]/join/page.tsx b/src/app/group/[groupId]/join/page.tsx
@@ -12,8 +12,9 @@ import Loading from '@/components/common/Loading';
 import Input from '@/components/common/Input';
 import InputLength from '@/components/common/InputLength';
 import ErrorMessage from '@/components/common/ErrorMessage';
-import BottomActionButton from '@/components/common/BottomActionButton';
+import StickyFooter from '@/components/common/StickyFooter';
 import BookGroupNavigation from '@/components/bookGroup/BookGroupNavigation';
+import Button from '@/components/common/Button';
 
 type JoinFormValues = {
   answer: string;
@@ -100,7 +101,12 @@ const BookGroupJoinForm = ({ groupId }: { groupId: number }) => {
           </div>
         </div>
       </div>
-      <BottomActionButton type="submit">제출하기</BottomActionButton>
+
+      <StickyFooter>
+        <Button type="submit" size="full">
+          제출하기
+        </Button>
+      </StickyFooter>
     </form>
   );
 };
diff --git a/src/components/bookGroup/create/CreateBookGroupFunnel.tsx b/src/components/bookGroup/create/CreateBookGroupFunnel.tsx
@@ -7,14 +7,17 @@ import type { CreateBookGroupFormValues } from '@/components/bookGroup/create/ty
 import useCreateBookGroupMutation from '@/queries/group/useCreateBookGroupMutation';
 
 import { useFunnel } from '@/hooks/useFunnel';
+import useDisclosure from '@/hooks/useDisclosure';
 import useToast from '@/components/common/Toast/useToast';
 import { getTodayDate } from '@/utils/date';
 import { isAxiosErrorWithCustomCode } from '@/utils/helpers';
 import { SERVICE_ERROR_MESSAGE } from '@/constants';
 
-import { IconArrowLeft } from '@public/icons';
+import { IconClose } from '@public/icons';
 import TopNavigation from '@/components/common/TopNavigation';
 import Stepper from '@/components/common/Stepper';
+import Modal from '@/components/common/Modal';
+import Button from '@/components/common/Button';
 import {
   EnterTitleStep,
   SelectBookStep,
@@ -34,7 +37,7 @@ const steps = [
   { label: '모임이름' },
   { label: '모임정보' },
   { label: '가입유형' },
-];
+] as const;
 
 const CreateBookGroupFunnel = () => {
   const router = useRouter();
@@ -44,6 +47,7 @@ const CreateBookGroupFunnel = () => {
   const stepIndex = FUNNEL_STEPS.indexOf(currentStep);
   const activeStep = stepIndex !== -1 ? stepIndex : 0;
 
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const { show: showToast } = useToast();
   const { mutate } = useCreateBookGroupMutation();
 
@@ -58,16 +62,9 @@ const CreateBookGroupFunnel = () => {
     },
   });
 
-  const handleBackButtonClick = () => {
-    const currentStepIndex = FUNNEL_STEPS.indexOf(currentStep);
-
-    if (currentStepIndex === 0 || currentStepIndex === -1) {
-      router.back();
-    } else {
-      setStep(FUNNEL_STEPS[currentStepIndex - 1]);
-    }
-
-    return;
+  const handleCloseButtonClick = () => {
+    onClose();
+    router.back();
   };
 
   const handleCreateGroupSubmit: SubmitHandler<
@@ -118,10 +115,16 @@ const CreateBookGroupFunnel = () => {
     <FormProvider {...methods}>
       <TopNavigation>
         <TopNavigation.LeftItem>
-          <IconArrowLeft onClick={handleBackButtonClick} />
+          <IconClose onClick={onOpen} />
         </TopNavigation.LeftItem>
       </TopNavigation>
 
+      <FunnelCloseModal
+        isOpen={isOpen}
+        onClose={onClose}
+        handleSubmit={handleCloseButtonClick}
+      />
+
       <div className="sticky top-[5.4rem] z-10 -ml-[2rem] w-[calc(100%+4rem)] bg-white px-[2rem] pb-[3rem] pt-[1rem]">
         <div className="relative left-1/2 w-[98%] -translate-x-1/2 ">
           <Stepper activeIndex={activeStep}>
@@ -138,16 +141,21 @@ const CreateBookGroupFunnel = () => {
             <SelectBookStep onNextStep={() => setStep('EnterTitle')} />
           </Funnel.Step>
           <Funnel.Step name="EnterTitle">
-            <EnterTitleStep onNextStep={() => setStep('SetUpDetail')} />
+            <EnterTitleStep
+              onPrevStep={() => setStep('SelectBook')}
+              onNextStep={() => setStep('SetUpDetail')}
+            />
           </Funnel.Step>
           <Funnel.Step name="SetUpDetail">
             <SetUpDetailStep
-              goToSelectBookStep={() => setStep('SelectBook')}
+              onPrevStep={() => setStep('EnterTitle')}
               onNextStep={() => setStep('SelectJoinType')}
+              goToSelectBookStep={() => setStep('SelectBook')}
             />
           </Funnel.Step>
           <Funnel.Step name="SelectJoinType">
             <SelectJoinTypeStep
+              onPrevStep={() => setStep('SetUpDetail')}
               onSubmit={methods.handleSubmit(handleCreateGroupSubmit)}
             />
           </Funnel.Step>
@@ -158,3 +166,32 @@ const CreateBookGroupFunnel = () => {
 };
 
 export default CreateBookGroupFunnel;
+
+const FunnelCloseModal = ({
+  isOpen,
+  onClose,
+  handleSubmit,
+}: {
+  isOpen: boolean;
+  onClose?: () => void;
+  handleSubmit?: () => void;
+}) => {
+  return (
+    <Modal isOpen={isOpen} onClose={() => onClose?.()}>
+      <div className="text-lg font-bold">
+        독서모임 만들기를 그만할까요?
+        <p className="text-xs font-normal text-black-500">
+          작성한 내용은 저장되지 않아요.
+        </p>
+      </div>
+      <div className="flex justify-end gap-[1rem]">
+        <Button onClick={onClose} fill={false} colorScheme="grey" size="small">
+          취소
+        </Button>
+        <Button onClick={handleSubmit} size="small">
+          그만두기
+        </Button>
+      </div>
+    </Modal>
+  );
+};
diff --git a/src/components/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx b/src/components/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx
@@ -6,9 +6,10 @@ import type { EnterTitleStepFormValues } from '@/components/bookGroup/create/typ
 import useRemoveVerticalScroll from '@/hooks/useRemoveVerticalScroll';
 
 import { TitleField } from '@/components/bookGroup/create/steps/EnterTitleStep/fields';
-import BottomActionButton from '@/components/common/BottomActionButton';
+import StickyFooter from '@/components/common/StickyFooter';
+import Button from '@/components/common/Button';
 
-const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
+const EnterTitleStep = ({ onPrevStep, onNextStep }: MoveFunnelStepProps) => {
   const {
     handleSubmit,
     formState: { isValid },
@@ -25,13 +26,24 @@ const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
         <TitleField name="title" />
       </section>
 
-      <BottomActionButton
-        type="submit"
-        disabled={!isValid}
-        onClick={handleSubmit(() => onNextStep?.())}
-      >
-        다음
-      </BottomActionButton>
+      <StickyFooter>
+        <Button
+          colorScheme="grey"
+          size="large"
+          className="grow-[1]"
+          onClick={onPrevStep}
+        >
+          이전
+        </Button>
+        <Button
+          size="large"
+          className="grow-[5]"
+          onClick={handleSubmit(() => onNextStep?.())}
+          disabled={!isValid}
+        >
+          다음
+        </Button>
+      </StickyFooter>
     </article>
   );
 };

diff --git a/src/components/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx b/src/components/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx
@@ -7,12 +7,13 @@ import {
   JoinPasswordFieldset,
   JoinTypeFieldset,
 } from '@/components/bookGroup/create/steps/SelectJoinTypeStep/fields';
-import BottomActionButton from '@/components/common/BottomActionButton';
+import StickyFooter from '@/components/common/StickyFooter';
+import Button from '@/components/common/Button';
 
 export type JoinTypeStepFieldName = keyof SelectJoinTypeStepFormValues;
 export type JoinTypeStepFieldProp = { name: JoinTypeStepFieldName };
 
-const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
+const SelectJoinTypeStep = ({ onPrevStep, onSubmit }: MoveFunnelStepProps) => {
   const {
     handleSubmit,
     formState: { isValid },
@@ -35,13 +36,24 @@ const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
         </JoinPasswordFieldset>
       </section>
 
-      <BottomActionButton
-        type="submit"
-        disabled={!isValid}
-        onClick={onSubmit && handleSubmit(onSubmit)}
-      >
-        독서모임 만들기
-      </BottomActionButton>
+      <StickyFooter>
+        <Button
+          colorScheme="grey"
+          size="large"
+          className="grow-[1]"
+          onClick={onPrevStep}
+        >
+          이전
+        </Button>
+        <Button
+          size="large"
+          className="grow-[5]"
+          onClick={onSubmit && handleSubmit(onSubmit)}
+          disabled={!isValid}
+        >
+          독서모임 만들기
+        </Button>
+      </StickyFooter>
     </article>
   );
 };

diff --git a/src/components/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx b/src/components/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx
@@ -7,7 +7,6 @@ import { MAX_MEMBER_COUNT_OPTIONS } from '@/constants';
 import { getTodayDate } from '@/utils/date';
 
 import withScrollLockOnFocus from '@/hocs/withScrollLockOnFocus';
-import BottomActionButton from '@/components/common/BottomActionButton';
 import DatePicker from '@/components/common/DatePicker';
 import ErrorMessage from '@/components/common/ErrorMessage';
 import Input from '@/components/common/Input';
@@ -16,6 +15,8 @@ import RadioButton from '@/components/common/RadioButton';
 import Switch from '@/components/common/Switch';
 import TextArea from '@/components/common/TextArea';
 import BookInfoCard from '@/components/bookGroup/BookInfoCard';
+import StickyFooter from '@/components/common/StickyFooter';
+import Button from '@/components/common/Button';
 
 interface SetUpDetailStepProps extends MoveFunnelStepProps {
   goToSelectBookStep?: () => void;
@@ -28,6 +29,7 @@ interface SetUpDetailStepProps extends MoveFunnelStepProps {
 
 const SetUpDetailStep = ({
   goToSelectBookStep,
+  onPrevStep,
   onNextStep,
 }: SetUpDetailStepProps) => {
   const {
@@ -56,13 +58,24 @@ const SetUpDetailStep = ({
 
       <SwitchIsPublicField name={'isPublic'} />
 
-      <BottomActionButton
-        type="submit"
-        disabled={!isValid}
-        onClick={handleSubmit(() => onNextStep?.())}
-      >
-        다음
-      </BottomActionButton>
+      <StickyFooter>
+        <Button
+          colorScheme="grey"
+          size="large"
+          className="grow-[1]"
+          onClick={onPrevStep}
+        >
+          이전
+        </Button>
+        <Button
+          size="large"
+          className="grow-[5]"
+          onClick={handleSubmit(() => onNextStep?.())}
+          disabled={!isValid}
+        >
+          다음
+        </Button>
+      </StickyFooter>
     </article>
   );
 };

diff --git a/src/components/bookGroup/detail/JoinBookGroupButton.tsx b/src/components/bookGroup/detail/JoinBookGroupButton.tsx
@@ -1,7 +1,8 @@
 import { usePathname, useRouter } from 'next/navigation';
 
 import useJoinBookGroup from '@/hooks/group/useJoinBookGroup';
-import BottomActionButton from '@/components/common/BottomActionButton';
+import StickyFooter from '@/components/common/StickyFooter';
+import Button from '@/components/common/Button';
 
 const JoinBookGroupButton = ({ groupId }: { groupId: number }) => {
   const router = useRouter();
@@ -24,16 +25,20 @@ const JoinBookGroupButton = ({ groupId }: { groupId: number }) => {
 
   if (isExpired) {
     return (
-      <BottomActionButton colorScheme="grey" disabled>
-        모임이 종료되었어요.
-      </BottomActionButton>
+      <StickyFooter>
+        <Button size="full" colorScheme="grey" disabled>
+          모임이 종료되었어요.
+        </Button>
+      </StickyFooter>
     );
   }
 
   return (
-    <BottomActionButton onClick={handleButtonClick}>
-      참여하기
-    </BottomActionButton>
+    <StickyFooter>
+      <Button size="full" onClick={handleButtonClick}>
+        참여하기
+      </Button>
+    </StickyFooter>
   );
 };
 

diff --git a/src/components/common/BottomActionButton.tsx b/src/components/common/BottomActionButton.tsx