Skip to content

Commit da7b63e

Browse files
hanyugeonhanyugeon
authored
[#679] [모임 생성] 모임 생성 퍼널 종료기능 추가 (#683)
* feat: 모임생성 퍼널 종료 버튼 추가 * feat: FunnelBottomActionButton 합성 컴포넌트 작성 * feat: FunnelBottomActionButton 적용 * feat: 모임 생성 종료 Modal 작성 * fix: 모임 생성 모달 종료 옵션을 router.push에서 router.back으로 수정 * feat: StickyFooter 작성 * refactor: 기존의 BottomActionButtond을 StickyFooter로 교체 * fix: LoginBottomActionButton 내부의 link 태그 위치 수정
1 parent 004bc4f commit da7b63e

File tree

12 files changed

+248
-109
lines changed

12 files changed

+248
-109
lines changed

‎src/app/book/[bookId]/page.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@ import { SERVICE_ERROR_MESSAGE } from '@/constants';
1616
import Skeleton from '@/components/common/Skeleton';
1717
import SSRSafeSuspense from '@/components/common/SSRSafeSuspense';
1818
import TopNavigation from '@/components/common/TopNavigation';
19-
import BottomActionButton from '@/components/common/BottomActionButton';
19+
import StickyFooter from '@/components/common/StickyFooter';
2020
import LoginBottomActionButton from '@/components/common/LoginBottomActionButton';
2121
import CommentDrawer from '@/components/comment/CommentDrawer';
2222
import BackButton from '@/components/common/BackButton';
2323
import BookInfo, { BookInfoSkeleton } from '@/components/book/detail/BookInfo';
2424
import BookCommentList from '@/components/comment/BookCommentList';
25+
import Button from '@/components/common/Button';
2526

2627
const BookDetailPage = ({
2728
params: { bookId },
@@ -125,9 +126,11 @@ const AddBookCommentButton = ({ bookId }: { bookId: APIBook['bookId'] }) => {
125126

126127
return (
127128
<>
128-
<BottomActionButton onClick={onDrawerOpen}>
129-
코멘트 작성하기
130-
</BottomActionButton>
129+
<StickyFooter>
130+
<Button size="full" onClick={onDrawerOpen}>
131+
코멘트 작성하기
132+
</Button>
133+
</StickyFooter>
131134
<CommentDrawer
132135
isOpen={isDrawerOpen}
133136
onClose={onDrawerClose}

‎src/app/group/[groupId]/join/page.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ import Loading from '@/components/common/Loading';
1212
import Input from '@/components/common/Input';
1313
import InputLength from '@/components/common/InputLength';
1414
import ErrorMessage from '@/components/common/ErrorMessage';
15-
import BottomActionButton from '@/components/common/BottomActionButton';
15+
import StickyFooter from '@/components/common/StickyFooter';
1616
import BookGroupNavigation from '@/components/bookGroup/BookGroupNavigation';
17+
import Button from '@/components/common/Button';
1718

1819
type JoinFormValues = {
1920
answer: string;
@@ -100,7 +101,12 @@ const BookGroupJoinForm = ({ groupId }: { groupId: number }) => {
100101
</div>
101102
</div>
102103
</div>
103-
<BottomActionButton type="submit">제출하기</BottomActionButton>
104+
105+
<StickyFooter>
106+
<Button type="submit" size="full">
107+
제출하기
108+
</Button>
109+
</StickyFooter>
104110
</form>
105111
);
106112
};

‎src/components/bookGroup/create/CreateBookGroupFunnel.tsx

Lines changed: 52 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,17 @@ import type { CreateBookGroupFormValues } from '@/components/bookGroup/create/ty
77
import useCreateBookGroupMutation from '@/queries/group/useCreateBookGroupMutation';
88

99
import { useFunnel } from '@/hooks/useFunnel';
10+
import useDisclosure from '@/hooks/useDisclosure';
1011
import useToast from '@/components/common/Toast/useToast';
1112
import { getTodayDate } from '@/utils/date';
1213
import { isAxiosErrorWithCustomCode } from '@/utils/helpers';
1314
import { SERVICE_ERROR_MESSAGE } from '@/constants';
1415

15-
import { IconArrowLeft } from '@public/icons';
16+
import { IconClose } from '@public/icons';
1617
import TopNavigation from '@/components/common/TopNavigation';
1718
import Stepper from '@/components/common/Stepper';
19+
import Modal from '@/components/common/Modal';
20+
import Button from '@/components/common/Button';
1821
import {
1922
EnterTitleStep,
2023
SelectBookStep,
@@ -34,7 +37,7 @@ const steps = [
3437
{ label: '모임이름' },
3538
{ label: '모임정보' },
3639
{ label: '가입유형' },
37-
];
40+
] as const;
3841

3942
const CreateBookGroupFunnel = () => {
4043
const router = useRouter();
@@ -44,6 +47,7 @@ const CreateBookGroupFunnel = () => {
4447
const stepIndex = FUNNEL_STEPS.indexOf(currentStep);
4548
const activeStep = stepIndex !== -1 ? stepIndex : 0;
4649

50+
const { isOpen, onOpen, onClose } = useDisclosure();
4751
const { show: showToast } = useToast();
4852
const { mutate } = useCreateBookGroupMutation();
4953

@@ -58,16 +62,9 @@ const CreateBookGroupFunnel = () => {
5862
},
5963
});
6064

61-
const handleBackButtonClick = () => {
62-
const currentStepIndex = FUNNEL_STEPS.indexOf(currentStep);
63-
64-
if (currentStepIndex === 0 || currentStepIndex === -1) {
65-
router.back();
66-
} else {
67-
setStep(FUNNEL_STEPS[currentStepIndex - 1]);
68-
}
69-
70-
return;
65+
const handleCloseButtonClick = () => {
66+
onClose();
67+
router.back();
7168
};
7269

7370
const handleCreateGroupSubmit: SubmitHandler<
@@ -118,10 +115,16 @@ const CreateBookGroupFunnel = () => {
118115
<FormProvider {...methods}>
119116
<TopNavigation>
120117
<TopNavigation.LeftItem>
121-
<IconArrowLeft onClick={handleBackButtonClick} />
118+
<IconClose onClick={onOpen} />
122119
</TopNavigation.LeftItem>
123120
</TopNavigation>
124121

122+
<FunnelCloseModal
123+
isOpen={isOpen}
124+
onClose={onClose}
125+
handleSubmit={handleCloseButtonClick}
126+
/>
127+
125128
<div className="sticky top-[5.4rem] z-10 -ml-[2rem] w-[calc(100%+4rem)] bg-white px-[2rem] pb-[3rem] pt-[1rem]">
126129
<div className="relative left-1/2 w-[98%] -translate-x-1/2 ">
127130
<Stepper activeIndex={activeStep}>
@@ -138,16 +141,21 @@ const CreateBookGroupFunnel = () => {
138141
<SelectBookStep onNextStep={() => setStep('EnterTitle')} />
139142
</Funnel.Step>
140143
<Funnel.Step name="EnterTitle">
141-
<EnterTitleStep onNextStep={() => setStep('SetUpDetail')} />
144+
<EnterTitleStep
145+
onPrevStep={() => setStep('SelectBook')}
146+
onNextStep={() => setStep('SetUpDetail')}
147+
/>
142148
</Funnel.Step>
143149
<Funnel.Step name="SetUpDetail">
144150
<SetUpDetailStep
145-
goToSelectBookStep={() => setStep('SelectBook')}
151+
onPrevStep={() => setStep('EnterTitle')}
146152
onNextStep={() => setStep('SelectJoinType')}
153+
goToSelectBookStep={() => setStep('SelectBook')}
147154
/>
148155
</Funnel.Step>
149156
<Funnel.Step name="SelectJoinType">
150157
<SelectJoinTypeStep
158+
onPrevStep={() => setStep('SetUpDetail')}
151159
onSubmit={methods.handleSubmit(handleCreateGroupSubmit)}
152160
/>
153161
</Funnel.Step>
@@ -158,3 +166,32 @@ const CreateBookGroupFunnel = () => {
158166
};
159167

160168
export default CreateBookGroupFunnel;
169+
170+
const FunnelCloseModal = ({
171+
isOpen,
172+
onClose,
173+
handleSubmit,
174+
}: {
175+
isOpen: boolean;
176+
onClose?: () => void;
177+
handleSubmit?: () => void;
178+
}) => {
179+
return (
180+
<Modal isOpen={isOpen} onClose={() => onClose?.()}>
181+
<div className="text-lg font-bold">
182+
독서모임 만들기를 그만할까요?
183+
<p className="text-xs font-normal text-black-500">
184+
작성한 내용은 저장되지 않아요.
185+
</p>
186+
</div>
187+
<div className="flex justify-end gap-[1rem]">
188+
<Button onClick={onClose} fill={false} colorScheme="grey" size="small">
189+
취소
190+
</Button>
191+
<Button onClick={handleSubmit} size="small">
192+
그만두기
193+
</Button>
194+
</div>
195+
</Modal>
196+
);
197+
};

‎src/components/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import type { EnterTitleStepFormValues } from '@/components/bookGroup/create/typ
66
import useRemoveVerticalScroll from '@/hooks/useRemoveVerticalScroll';
77

88
import { TitleField } from '@/components/bookGroup/create/steps/EnterTitleStep/fields';
9-
import BottomActionButton from '@/components/common/BottomActionButton';
9+
import StickyFooter from '@/components/common/StickyFooter';
10+
import Button from '@/components/common/Button';
1011

11-
const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
12+
const EnterTitleStep = ({ onPrevStep, onNextStep }: MoveFunnelStepProps) => {
1213
const {
1314
handleSubmit,
1415
formState: { isValid },
@@ -25,13 +26,24 @@ const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
2526
<TitleField name="title" />
2627
</section>
2728

28-
<BottomActionButton
29-
type="submit"
30-
disabled={!isValid}
31-
onClick={handleSubmit(() => onNextStep?.())}
32-
>
33-
다음
34-
</BottomActionButton>
29+
<StickyFooter>
30+
<Button
31+
colorScheme="grey"
32+
size="large"
33+
className="grow-[1]"
34+
onClick={onPrevStep}
35+
>
36+
이전
37+
</Button>
38+
<Button
39+
size="large"
40+
className="grow-[5]"
41+
onClick={handleSubmit(() => onNextStep?.())}
42+
disabled={!isValid}
43+
>
44+
다음
45+
</Button>
46+
</StickyFooter>
3547
</article>
3648
);
3749
};

‎src/components/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ import {
77
JoinPasswordFieldset,
88
JoinTypeFieldset,
99
} from '@/components/bookGroup/create/steps/SelectJoinTypeStep/fields';
10-
import BottomActionButton from '@/components/common/BottomActionButton';
10+
import StickyFooter from '@/components/common/StickyFooter';
11+
import Button from '@/components/common/Button';
1112

1213
export type JoinTypeStepFieldName = keyof SelectJoinTypeStepFormValues;
1314
export type JoinTypeStepFieldProp = { name: JoinTypeStepFieldName };
1415

15-
const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
16+
const SelectJoinTypeStep = ({ onPrevStep, onSubmit }: MoveFunnelStepProps) => {
1617
const {
1718
handleSubmit,
1819
formState: { isValid },
@@ -35,13 +36,24 @@ const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
3536
</JoinPasswordFieldset>
3637
</section>
3738

38-
<BottomActionButton
39-
type="submit"
40-
disabled={!isValid}
41-
onClick={onSubmit && handleSubmit(onSubmit)}
42-
>
43-
독서모임 만들기
44-
</BottomActionButton>
39+
<StickyFooter>
40+
<Button
41+
colorScheme="grey"
42+
size="large"
43+
className="grow-[1]"
44+
onClick={onPrevStep}
45+
>
46+
이전
47+
</Button>
48+
<Button
49+
size="large"
50+
className="grow-[5]"
51+
onClick={onSubmit && handleSubmit(onSubmit)}
52+
disabled={!isValid}
53+
>
54+
독서모임 만들기
55+
</Button>
56+
</StickyFooter>
4557
</article>
4658
);
4759
};

‎src/components/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { MAX_MEMBER_COUNT_OPTIONS } from '@/constants';
77
import { getTodayDate } from '@/utils/date';
88

99
import withScrollLockOnFocus from '@/hocs/withScrollLockOnFocus';
10-
import BottomActionButton from '@/components/common/BottomActionButton';
1110
import DatePicker from '@/components/common/DatePicker';
1211
import ErrorMessage from '@/components/common/ErrorMessage';
1312
import Input from '@/components/common/Input';
@@ -16,6 +15,8 @@ import RadioButton from '@/components/common/RadioButton';
1615
import Switch from '@/components/common/Switch';
1716
import TextArea from '@/components/common/TextArea';
1817
import BookInfoCard from '@/components/bookGroup/BookInfoCard';
18+
import StickyFooter from '@/components/common/StickyFooter';
19+
import Button from '@/components/common/Button';
1920

2021
interface SetUpDetailStepProps extends MoveFunnelStepProps {
2122
goToSelectBookStep?: () => void;
@@ -28,6 +29,7 @@ interface SetUpDetailStepProps extends MoveFunnelStepProps {
2829

2930
const SetUpDetailStep = ({
3031
goToSelectBookStep,
32+
onPrevStep,
3133
onNextStep,
3234
}: SetUpDetailStepProps) => {
3335
const {
@@ -56,13 +58,24 @@ const SetUpDetailStep = ({
5658

5759
<SwitchIsPublicField name={'isPublic'} />
5860

59-
<BottomActionButton
60-
type="submit"
61-
disabled={!isValid}
62-
onClick={handleSubmit(() => onNextStep?.())}
63-
>
64-
다음
65-
</BottomActionButton>
61+
<StickyFooter>
62+
<Button
63+
colorScheme="grey"
64+
size="large"
65+
className="grow-[1]"
66+
onClick={onPrevStep}
67+
>
68+
이전
69+
</Button>
70+
<Button
71+
size="large"
72+
className="grow-[5]"
73+
onClick={handleSubmit(() => onNextStep?.())}
74+
disabled={!isValid}
75+
>
76+
다음
77+
</Button>
78+
</StickyFooter>
6679
</article>
6780
);
6881
};

‎src/components/bookGroup/detail/JoinBookGroupButton.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { usePathname, useRouter } from 'next/navigation';
22

33
import useJoinBookGroup from '@/hooks/group/useJoinBookGroup';
4-
import BottomActionButton from '@/components/common/BottomActionButton';
4+
import StickyFooter from '@/components/common/StickyFooter';
5+
import Button from '@/components/common/Button';
56

67
const JoinBookGroupButton = ({ groupId }: { groupId: number }) => {
78
const router = useRouter();
@@ -24,16 +25,20 @@ const JoinBookGroupButton = ({ groupId }: { groupId: number }) => {
2425

2526
if (isExpired) {
2627
return (
27-
<BottomActionButton colorScheme="grey" disabled>
28-
모임이 종료되었어요.
29-
</BottomActionButton>
28+
<StickyFooter>
29+
<Button size="full" colorScheme="grey" disabled>
30+
모임이 종료되었어요.
31+
</Button>
32+
</StickyFooter>
3033
);
3134
}
3235

3336
return (
34-
<BottomActionButton onClick={handleButtonClick}>
35-
참여하기
36-
</BottomActionButton>
37+
<StickyFooter>
38+
<Button size="full" onClick={handleButtonClick}>
39+
참여하기
40+
</Button>
41+
</StickyFooter>
3742
);
3843
};
3944

‎src/components/common/BottomActionButton.tsx

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

Comments
 (0)