Add bottom padding to page

Adds 80px of bottom padding to the page.

src/components/SafeAreaContainer.tsx

@@ -7,6 +7,7 @@ interface SafeAreaContainerProps {
   className?: string;
   topOnly?: boolean;
   bottomOnly?: boolean;
+  extraBottomPadding?: boolean; // 추가 하단 여백 옵션
 }
 
 /**
@@ -17,7 +18,8 @@ const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
   children,
   className = '',
   topOnly = false,
-  bottomOnly = false
+  bottomOnly = false,
+  extraBottomPadding = false // 기본값은 false
 }) => {
   const [isIOS, setIsIOS] = useState(false);
   
@@ -37,8 +39,11 @@ const SafeAreaContainer: React.FC<SafeAreaContainerProps> = ({
     if (!topOnly) safeAreaClass += ' pb-4';     // 안드로이드 하단 여백
   }
 
+  // 추가 하단 여백 적용
+  const extraBottomClass = extraBottomPadding ? 'pb-[80px]' : '';
+
   return (
-    <div className={`${safeAreaClass} ${className}`}>
+    <div className={`${safeAreaClass} ${extraBottomClass} ${className}`}>
       {children}
     </div>
   );