From f602d94963be3e7d77ec81f4655ed10b87704044 Mon Sep 17 00:00:00 2001
From: PARKGEONTAE <112490505+prkgnt@users.noreply.github.com>
Date: Wed, 22 May 2024 14:16:01 +0900
Subject: [PATCH 1/3] =?UTF-8?q?refactor/=20Card=20=EC=8A=A4=ED=81=AC?=
=?UTF-8?q?=EB=A6=B0=20=ED=95=98=EB=8B=A8=20=EB=A7=88=EC=A7=84=EC=9D=84=20?=
=?UTF-8?q?Footer=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B3=80?=
=?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/screens/Card.tsx | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/components/screens/Card.tsx b/src/components/screens/Card.tsx
index b87054f..2955cab 100644
--- a/src/components/screens/Card.tsx
+++ b/src/components/screens/Card.tsx
@@ -8,9 +8,11 @@ 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 }) => {
return (
@@ -29,6 +31,7 @@ const Card = ({ babb }: { babb: BabbProps }) => {
)}
+ ListFooterComponent={() => }
renderItem={({ item: babb }: { item: BabbProps }) => {
return (
Date: Wed, 22 May 2024 14:16:37 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor/Home=20=ED=99=94=EB=A9=B4=20?=
=?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=84=B0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/screens/Home.tsx | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/components/screens/Home.tsx b/src/components/screens/Home.tsx
index a89cbe1..f71e903 100644
--- a/src/components/screens/Home.tsx
+++ b/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 });
From 81f3e3b35f3d3e7c02ebff76ade689a51b3aaadd Mon Sep 17 00:00:00 2001
From: PARKGEONTAE <112490505+prkgnt@users.noreply.github.com>
Date: Thu, 23 May 2024 13:43:08 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat/=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
=?UTF-8?q?=EA=B0=92=EC=9D=84=20context=EC=97=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- context 말고 redux 사용 고려해봐야할듯
---
src/components/blocks/BottomTabBar.tsx | 20 ++++++++++++++++----
src/components/screens/Card.tsx | 12 ++++++++++++
src/utils/context.tsx | 5 +++++
3 files changed, 33 insertions(+), 4 deletions(-)
diff --git a/src/components/blocks/BottomTabBar.tsx b/src/components/blocks/BottomTabBar.tsx
index d565531..852b48f 100644
--- a/src/components/blocks/BottomTabBar.tsx
+++ b/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 (
-
+
NavigateBTnOnPress("Home")}>
diff --git a/src/components/screens/Card.tsx b/src/components/screens/Card.tsx
index 2955cab..da4d352 100644
--- a/src/components/screens/Card.tsx
+++ b/src/components/screens/Card.tsx
@@ -3,6 +3,8 @@ 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");
@@ -15,9 +17,19 @@ const Footer = styled.View`
`;
const Card = ({ babb }: { babb: BabbProps }) => {
+ const { setScrollY } = useContext(ScrollContext);
+ const [scrollYState, setScrollYState] = useState(0);
+ const [prevScrollY, setPrevScrollY] = useState(0);
return (
{
+ //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={() => (
<>
diff --git a/src/utils/context.tsx b/src/utils/context.tsx
index 3fa9e92..c34e2cf 100644
--- a/src/utils/context.tsx
+++ b/src/utils/context.tsx
@@ -10,3 +10,8 @@ export const InsetsContext = createContext({
},
setInsets: (insets) => {},
});
+
+export const ScrollContext = createContext({
+ scrollY: Object,
+ setScrollY: (scrollY: Object) => {},
+});