Merge branch 'feat/#619' into develop

prgrms-web-devcourse · Jun 16, 2024 · b57f2fb · b57f2fb
2 parents b72ffda + 9a958b7
commit b57f2fb
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 17 deletions.
diff --git a/src/app/group/page.tsx b/src/app/group/page.tsx
@@ -45,7 +45,7 @@ const GroupPage = () => {
   };
 
   const FLOATING_BUTTON_POSITION =
-    'bottom-[8.3rem] right-[1.7rem] desktop:right-1/2 desktop:translate-x-[19.8rem]';
+    'bottom-[calc(env(safe-area-inset-bottom)+8.3rem)] right-[1.7rem] desktop:right-1/2 desktop:translate-x-[19.8rem]';
 
   return (
     <>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,7 +16,7 @@ export const metadata: Metadata = {
     default: '다독다독',
   },
   description: '책에 대한 인사이트를 공유하고 소통하는 독서 소셜 플랫폼',
-  themeColor: '#FFA436',
+  themeColor: '#FFFFFF',
   keywords: [
     '다독다독',
     'dadok',
@@ -37,26 +37,18 @@ export const metadata: Metadata = {
     },
   },
   icons: [
-    { rel: 'apple-touch-icon', url: 'favicon.ico' },
+    { rel: 'apple-touch-icon', url: 'images/icon-192x192.png' },
     { rel: 'icon', url: 'favicon.ico' },
   ],
   appleWebApp: {
     title: '다독다독',
-    statusBarStyle: 'black-translucent',
     startupImage: appleSplashScreens,
   },
 };
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="ko">
-      <head>
-        <meta
-          content="width=device-width, initial-scale=1, maximum-scale=1"
-          name="viewport"
-        />
-        <link rel="icon" href="/favicon.ico" />
-      </head>
       {/* @todo Chakra 제거시 app-layout 프로퍼티 제거. */}
       <body className={`${LineSeedKR.variable} app-layout font-lineseed`}>
         <Layout>

diff --git a/src/components/ContextProvider.tsx b/src/components/ContextProvider.tsx
@@ -3,9 +3,9 @@
 import { ReactNode } from 'react';
 import { RecoilRoot } from 'recoil';
 
-import PWAServiceWorkerProvider from './PWAServiceWorkerProvider';
-import ChakraThemeProvider from './ChakraThemeProvider';
-import ReactQueryProvider from './ReactQueryProvider';
+import PWAServiceWorkerProvider from '@/components/PWAServiceWorkerProvider';
+import ChakraThemeProvider from '@/components/ChakraThemeProvider';
+import ReactQueryProvider from '@/components/ReactQueryProvider';
 
 import ToastProvider from '@/v1/base/Toast/ToastProvider';
 

diff --git a/src/v1/base/BottomNavigation.tsx b/src/v1/base/BottomNavigation.tsx
@@ -41,7 +41,7 @@ const iconColor = {
 
 const BottomNavigation = ({ pathname }: BottomNavigationProps) => {
   return (
-    <nav className="fixed bottom-0 left-[50%] flex h-[7rem] w-full max-w-[43rem] -translate-x-1/2 justify-between rounded-t-[2rem] border-t-[0.05rem] border-black-200 bg-white px-[3.2rem] py-[1.4rem] shadow-bottomNav">
+    <nav className="fixed bottom-0 left-[50%] flex w-full max-w-[43rem] -translate-x-1/2 justify-between rounded-t-[2rem] border-t-[0.05rem] border-black-200 bg-white px-[3.2rem] pb-[calc(env(safe-area-inset-bottom)+1.4rem)] pt-[1.4rem] shadow-bottomNav">
       {icons.map(({ icon, label, href }) => (
         <Link key={label} type="button" href={href}>
           <button

diff --git a/src/v1/base/Toast/ToastProvider.tsx b/src/v1/base/Toast/ToastProvider.tsx
@@ -40,7 +40,7 @@ const ToastProvider = ({ children }: { children?: ReactNode }) => {
       {children}
       <Portal id="toast">
         <div
-          className={`fixed bottom-[1.5rem] w-full max-w-[43rem] translate-y-[300%] ${animations[animation]} z-20 m-auto px-[1.5rem]`}
+          className={`fixed bottom-[calc(env(safe-area-inset-bottom)+1.5rem)] w-full max-w-[43rem] translate-y-[300%] ${animations[animation]} z-20 m-auto px-[1.5rem]`}
         >
           {toast && <ToastItem type={toast.type} message={toast.message} />}
         </div>

diff --git a/src/v1/layout/Layout.tsx b/src/v1/layout/Layout.tsx
@@ -15,7 +15,7 @@ const Layout = ({ children }: LayoutProps) => {
   const isRootPath = pathname && rootPaths.includes(pathname);
 
   const dynamicClass = isRootPath
-    ? 'pb-[7rem] pt-[2rem]'
+    ? 'pb-[calc(env(safe-area-inset-bottom)+7rem)] pt-[2rem]'
     : 'pt-[5.4rem] pb-[2rem]';
 
   return (