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

* fix: BottomActionButton 패딩 값 수정 * fix: 루트 이외의 페이지 BottomActionButton에 컨탠츠가 가려지는 현상 수정 * refactor: 바텀액션버튼과 활용될 padding-bottom 커스텀 클래스 작성 * fix: pb-action-button 10px 축소 * fix: pb-action-button env값 제거 * chore: 필요없는 주석 제거
prgrms-web-devcourse · Jun 16, 2024 · fcff20d · fcff20d
1 parent 2e0bfcd
commit fcff20d
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 6 deletions.
diff --git a/src/app/book/[bookId]/page.tsx b/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="책 코멘트" />

diff --git a/src/app/group/[groupId]/page.tsx b/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]">

diff --git a/src/styles/global.css b/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];
+  }
 }
diff --git a/src/v1/base/BottomActionButton.tsx b/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>

diff --git a/src/v1/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx b/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>

diff --git a/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx b/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

diff --git a/src/v1/layout/Layout.tsx b/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 (
     <>