Feat: 스크롤 시 하단 탭을 투명하게 하기

src/components/blocks/BottomTabBar.tsx

@@ -1,13 +1,16 @@
 import styled from "styled-components/native";
-import { useContext, useState } from "react";
-import { InsetsContext } from "../../utils/context";
+import { useContext, useEffect, useState } from "react";
+import { InsetsContext, ScrollContext } from "../../utils/context";
 import { Insets } from "../../utils";
 import Icon from "../../utils/icon";
 import { Shadow } from "react-native-shadow-2";
 import { useNavigation } from "@react-navigation/native";
 
-const TabContainer = styled.View`
+export const TabContainer = styled.View`
   width: 100%;
+  position: absolute;
+  bottom: 0;
+  opacity: ${(props: { opacity: number }) => props.opacity};
   height: ${(props: { insets: Insets }) => 60 + props.insets.bottom}px;
   background-color: #fff;
   flex-direction: row;
@@ -52,16 +55,25 @@ const BottomTabBar = () => {
   const navigation = useNavigation();
 
   const [curScreen, setCurScreen] = useState("Home");
+  const [opacity, setOpacity] = useState(1);
   const { insets } = useContext(InsetsContext);
+  const { scrollY } = useContext(ScrollContext);
 
   const NavigateBTnOnPress = (screenName: string) => {
     // @ts-ignore
     navigation.navigate(screenName);
     setCurScreen(screenName);
   };
+
+  // useEffect(() => {
+  //   // if (opacity >= 0 && opacity <= 1) {
+  //   //   setOpacity((prev) => prev - scrollY / 50);
+  //   // }
+  //   console.log(scrollY);
+  // }, [scrollY]);
   return (
     <Shadow>
-      <TabContainer insets={insets}>
+      <TabContainer insets={insets} opacity={opacity}>
         <LogoBox onPress={() => NavigateBTnOnPress("Home")}>
           <Icon.RepeatIcon2 size={35} outline={curScreen != "Home"} />
         </LogoBox>

src/components/screens/Card.tsx

@@ -3,19 +3,33 @@ import styled from "styled-components/native";
 import Babb from "../blocks/Babb";
 import { Dimensions } from "react-native";
 import BabbInfo from "../blocks/BabbInfo";
+import { useContext, useState } from "react";
+import { ScrollContext } from "../../utils/context";
 
 const { width, height } = Dimensions.get("window");
 
 const Container = styled.View`
   width: ${width}px;
-  margin-bottom: 25px;
 `;
 const ContentContainer = styled.FlatList``;
+const Footer = styled.View`
+  height: 25px;
+`;
 
 const Card = ({ babb }: { babb: BabbProps }) => {
+  const { setScrollY } = useContext(ScrollContext);
+  const [scrollYState, setScrollYState] = useState(0);
+  const [prevScrollY, setPrevScrollY] = useState(0);
   return (
     <Container>
       <ContentContainer
+        onScroll={(e: any) => {
+          //console.log(e.nativeEvent.contentOffset.y);
+          // 스크롤의 변화량을 계산하여 Context에 저장.
+          //console.log(e.nativeEvent.contentOffset.y - prevScrollY);
+          // setScrollYState((prev) => e.nativeEvent.contentOffset.y - prev);
+          // setScrollY(scrollYState);
+        }}
         data={babb.comment}
         ListHeaderComponent={() => (
           <>
@@ -29,6 +43,7 @@ const Card = ({ babb }: { babb: BabbProps }) => {
             <BabbInfo></BabbInfo>
           </>
         )}
+        ListFooterComponent={() => <Footer />}
         renderItem={({ item: babb }: { item: BabbProps }) => {
           return (
             <Babb

src/components/screens/Home.tsx

@@ -1,6 +1,5 @@
 import styled from "styled-components/native";
 import MainHeader from "../blocks/headers/MainHeader";
-import Babb from "../blocks/Babb";
 import { useQuery } from "@tanstack/react-query";
 import api from "../../utils/api";
 import { BabbProps } from "../../utils";
@@ -10,7 +9,6 @@ const Container = styled.View`
   flex: 1;
   background-color: #fff;
 `;
-const ContentContainer = styled.FlatList``;
 
 const Home = () => {
   const BabbData = useQuery({ queryKey: ["babbs"], queryFn: api.getBabb });

src/utils/context.tsx

@@ -10,3 +10,8 @@ export const InsetsContext = createContext<InsetsContextInterface>({
   },
   setInsets: (insets) => {},
 });
+
+export const ScrollContext = createContext({
+  scrollY: Object,
+  setScrollY: (scrollY: Object) => {},
+});