refactor: 기존의 BottomActionButtond을 StickyFooter로 교체

prgrms-web-devcourse · Aug 6, 2024 · 46ad69c · 46ad69c
1 parent cd95748
commit 46ad69c
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 98 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/steps/EnterTitleStep/EnterTitleStep.tsx b/src/components/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx
@@ -6,7 +6,8 @@ import type { EnterTitleStepFormValues } from '@/components/bookGroup/create/typ
 import useRemoveVerticalScroll from '@/hooks/useRemoveVerticalScroll';
 
 import { TitleField } from '@/components/bookGroup/create/steps/EnterTitleStep/fields';
-import FunnelBottomActionButton from '@/components/common/FunnelBottomActionButton';
+import StickyFooter from '@/components/common/StickyFooter';
+import Button from '@/components/common/Button';
 
 const EnterTitleStep = ({ onPrevStep, onNextStep }: MoveFunnelStepProps) => {
   const {
@@ -25,17 +26,24 @@ const EnterTitleStep = ({ onPrevStep, onNextStep }: MoveFunnelStepProps) => {
         <TitleField name="title" />
       </section>
 
-      <FunnelBottomActionButton>
-        <FunnelBottomActionButton.Previous onClick={onPrevStep}>
+      <StickyFooter>
+        <Button
+          colorScheme="grey"
+          size="large"
+          className="grow-[1]"
+          onClick={onPrevStep}
+        >
           이전
-        </FunnelBottomActionButton.Previous>
-        <FunnelBottomActionButton.Submit
+        </Button>
+        <Button
+          size="large"
+          className="grow-[5]"
           onClick={handleSubmit(() => onNextStep?.())}
           disabled={!isValid}
         >
           다음
-        </FunnelBottomActionButton.Submit>
-      </FunnelBottomActionButton>
+        </Button>
+      </StickyFooter>
     </article>
   );
 };

diff --git a/src/components/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx b/src/components/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx
@@ -7,7 +7,8 @@ import {
   JoinPasswordFieldset,
   JoinTypeFieldset,
 } from '@/components/bookGroup/create/steps/SelectJoinTypeStep/fields';
-import FunnelBottomActionButton from '@/components/common/FunnelBottomActionButton';
+import StickyFooter from '@/components/common/StickyFooter';
+import Button from '@/components/common/Button';
 
 export type JoinTypeStepFieldName = keyof SelectJoinTypeStepFormValues;
 export type JoinTypeStepFieldProp = { name: JoinTypeStepFieldName };
@@ -35,17 +36,24 @@ const SelectJoinTypeStep = ({ onPrevStep, onSubmit }: MoveFunnelStepProps) => {
         </JoinPasswordFieldset>
       </section>
 
-      <FunnelBottomActionButton>
-        <FunnelBottomActionButton.Previous onClick={onPrevStep}>
+      <StickyFooter>
+        <Button
+          colorScheme="grey"
+          size="large"
+          className="grow-[1]"
+          onClick={onPrevStep}
+        >
           이전
-        </FunnelBottomActionButton.Previous>
-        <FunnelBottomActionButton.Submit
+        </Button>
+        <Button
+          size="large"
+          className="grow-[5]"
           onClick={onSubmit && handleSubmit(onSubmit)}
           disabled={!isValid}
         >
           독서모임 만들기
-        </FunnelBottomActionButton.Submit>
-      </FunnelBottomActionButton>
+        </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 FunnelBottomActionButton from '@/components/common/FunnelBottomActionButton';
 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;
@@ -57,17 +58,24 @@ const SetUpDetailStep = ({
 
       <SwitchIsPublicField name={'isPublic'} />
 
-      <FunnelBottomActionButton>
-        <FunnelBottomActionButton.Previous onClick={onPrevStep}>
+      <StickyFooter>
+        <Button
+          colorScheme="grey"
+          size="large"
+          className="grow-[1]"
+          onClick={onPrevStep}
+        >
           이전
-        </FunnelBottomActionButton.Previous>
-        <FunnelBottomActionButton.Submit
+        </Button>
+        <Button
+          size="large"
+          className="grow-[5]"
           onClick={handleSubmit(() => onNextStep?.())}
           disabled={!isValid}
         >
           다음
-        </FunnelBottomActionButton.Submit>
-      </FunnelBottomActionButton>
+        </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/FunnelBottomActionButton.tsx b/src/components/common/FunnelBottomActionButton.tsx
diff --git a/src/components/common/LoginBottomActionButton.tsx b/src/components/common/LoginBottomActionButton.tsx
@@ -1,9 +1,12 @@
-import BottomActionButton from '@/components/common/BottomActionButton';
+import StickyFooter from '@/components/common/StickyFooter';
 import LoginLink from '@/components/common/LoginLink';
+import Button from '@/components/common/Button';
 
 const LoginBottomActionButton = () => (
   <LoginLink>
-    <BottomActionButton>로그인 및 회원가입</BottomActionButton>
+    <StickyFooter>
+      <Button size="full">로그인 및 회원가입</Button>
+    </StickyFooter>
   </LoginLink>
 );