fix: bottom app bar 사이즈, backdrop

go-cham · Aug 9, 2023 · a319f53 · a319f53
1 parent 6a0c9f3
commit a319f53
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/src/components/layout/BottomAppBar/BottomAppBar.tsx b/src/components/layout/BottomAppBar/BottomAppBar.tsx
@@ -6,6 +6,7 @@ import ProfileIcon from '@/components/icons/ProfileIcon';
 import { RouteURL } from '@/constants/route-url';
 import { customColors } from '@/styles/colors';
 import BackgroundImage from '@/components/layout/BottomAppBar/BackgroundImage';
+import { isMobile } from 'react-device-detect';
 
 interface BottomAppBarProps {
   currentPage: 'home' | 'user';
@@ -38,7 +39,7 @@ export default function BottomAppBar({
 
   return (
     <footer className="absolute bottom-0 z-10 w-full">
-      <BackgroundImage className="shadow-dock relative top-[0.3rem] mx-auto scale-[1.15]" />
+      <BackgroundImage className="shadow-dock relative top-[0.5vh] mx-auto scale-[1.15]" />
       <div className="absolute -top-[0.6rem] flex w-full items-end justify-evenly">
         <button onClick={handleHomeIconClick}>
           <HomeIcon
@@ -47,14 +48,22 @@ export default function BottomAppBar({
                 ? customColors.text.subExplain['400']
                 : customColors.text.subTitle['700']
             }
+            className={`${
+              isMobile ? '' : 'relative bottom-[0.5rem] scale-[1.2]'
+            }`}
           />
         </button>
 
         <button
           onClick={handleAddIconClick}
           className="flex aspect-square w-[14.5%] items-center justify-center rounded-full bg-mainSub-main-500"
         >
-          <PlusIcon color="white" className="h-[3.2rem] w-[3.2rem]" />
+          <PlusIcon
+            color="white"
+            className={`${
+              isMobile ? 'h-[3.2rem] w-[3.2rem]' : 'h-[4.1rem] w-[4.1rem]'
+            }`}
+          />
         </button>
 
         <button
@@ -67,6 +76,9 @@ export default function BottomAppBar({
                 ? customColors.text.subTitle['700']
                 : customColors.text.subExplain['400']
             }
+            className={`${
+              isMobile ? '' : 'relative bottom-[0.5rem] scale-[1.2]'
+            }`}
           />
         </button>
       </div>

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -30,15 +30,15 @@ export default function Layout({ children }: LayoutProps) {
       <img
         src={text}
         alt="text"
-        className="fixed left-[5.5%] top-[8rem] z-10 hidden w-[40rem] xl:block"
+        className="fixed left-[5.5%] top-[8vh] z-10 hidden w-[20%] xl:block"
       />
       <img
         src={character}
         alt="character"
         className="fixed bottom-0 left-0 hidden w-[45%] xl:block"
       />
       {isMobile ? (
-        <div className="relative mx-auto h-full w-full bg-background-mainBg-0">
+        <div className="relative mx-auto h-full w-full bg-white">
           {children}
         </div>
       ) : (
@@ -54,7 +54,7 @@ export default function Layout({ children }: LayoutProps) {
           >
             <Frame className="pointer-events-none absolute left-0 top-0 z-[9999]" />
             <div className="absolute left-[24.6%] top-[2.4rem] h-[5rem] w-[83.0%] bg-white" />
-            <div className="absolute left-[24.4%] top-[6.4rem] h-[92.4rem] w-[84%] overflow-hidden bg-white">
+            <div className="absolute left-[24.4%] top-[6.3rem] h-[92.4rem] w-[84%] overflow-hidden bg-white">
               {children}
             </div>
           </div>

diff --git a/src/components/ui/modal/Popup/Popup.tsx b/src/components/ui/modal/Popup/Popup.tsx
@@ -27,7 +27,7 @@ export default function Popup({
 
   return (
     <>
-      <div className="fixed left-0 top-0 z-[99] h-screen w-screen bg-black opacity-20" />
+      <div className="absolute left-0 top-0 z-[99] h-screen w-screen bg-black opacity-20" />
       <div className="absolute left-1/2 top-1/2 z-[999] flex w-[32.8rem] -translate-x-1/2 -translate-y-1/2 flex-col items-center rounded-[0.7rem] bg-white px-[1.1rem] py-[1.3rem]">
         {useCancelIcon && (
           <CloseIcon