[#622] BottomActionButton 패딩 수정 (#626)

* fix: BottomActionButton 패딩 값 수정

* fix: 루트 이외의 페이지 BottomActionButton에 컨탠츠가 가려지는 현상 수정

* refactor: 바텀액션버튼과 활용될 padding-bottom 커스텀 클래스 작성

* fix: pb-action-button 10px 축소

* fix: pb-action-button env값 제거

* chore: 필요없는 주석 제거

Author: harryk-im

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

@@ -34,7 +34,7 @@ const BookDetailPage = ({
     <>
       <BookTopNavigation bookId={bookId} />
       <SSRSafeSuspense fallback={<BookPageSkeleton />}>
-        <div className="flex flex-col gap-[3rem] pb-[5rem] pt-[1rem]">
+        <div className="pb-action-button flex flex-col gap-[3rem] pt-[1rem]">
           <BookInfo bookId={bookId} />
           <div className="flex flex-col gap-[1rem]">
             <Heading text="책 코멘트" />

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

@@ -29,7 +29,7 @@ const DetailBookGroupPage = ({
       </BookGroupNavigation>
 
       <SSRSafeSuspense fallback={<PageSkeleton />}>
-        <div className="flex flex-col gap-[2rem]">
+        <div className="pb-action-button flex flex-col gap-[2rem]">
           <BookGroupInfo groupId={groupId} />
           <Divider />
           <div className="flex flex-col gap-[1rem]">

src/styles/global.css

@@ -94,4 +94,8 @@
     box-shadow: inset 0 0 3rem #dddddd;
     @apply bg-placeholder;
   }
+
+  .pb-action-button {
+    @apply pb-[6.3rem];
+  }
 }

src/v1/base/BottomActionButton.tsx

@@ -11,7 +11,7 @@ const BottomActionButton = ({
   ...props
 }: BottomActionButtonProps) => {
   return (
-    <footer className="fixed bottom-0 left-0 right-0 z-10 mx-auto w-full max-w-[43rem] bg-white px-[2.0rem] py-[1.5rem]">
+    <footer className="fixed bottom-0 left-0 right-0 z-10 mx-auto w-full max-w-[43rem] bg-white px-[2.0rem] pb-[calc(env(safe-area-inset-bottom)+1.5rem)] pt-[1.5rem]">
       <Button size="full" {...props}>
         {children}
       </Button>

src/v1/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx

@@ -16,7 +16,7 @@ const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
   } = useFormContext<SelectJoinTypeStepFormValues>();
 
   return (
-    <article>
+    <article className="pb-action-button">
       <h2 className="mb-[3rem] font-subheading-bold">
         가입은 어떻게 받을까요?
       </h2>

src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx

@@ -37,7 +37,7 @@ const SetUpDetailStep = ({
   } = useFormContext<SetUpDetailStepFormValues>();
 
   return (
-    <article className="flex flex-col gap-[2.5rem] overflow-y-scroll pb-[7rem]">
+    <article className="pb-action-button flex flex-col gap-[2.5rem] overflow-y-scroll">
       <h2 className="font-subheading-bold">모임 정보를 설정해주세요</h2>
       <TitleField name={'title'} />
       <SelectedBookInfoField

src/v1/layout/Layout.tsx

@@ -16,7 +16,7 @@ const Layout = ({ children }: LayoutProps) => {
 
   const dynamicClass = isRootPath
     ? 'pb-[calc(env(safe-area-inset-bottom)+7rem)] pt-[2rem]'
-    : 'pt-[5.4rem] pb-[2rem]';
+    : 'pb-[calc(env(safe-area-inset-bottom)+2rem)] pt-[5.4rem]';
 
   return (
     <>