[STYLE] #38 홈 화면 스타일 수정

app/src/screens/home/Home.style.ts

@@ -5,9 +5,8 @@ import {Dimensions} from 'react-native';
 import styled from 'styled-components/native';
 
 const screenWidth = Dimensions.get('window').width;
-const width = screenWidth - 40;
-const widthPassport = (width * 284) / 343;
-const heightPassport = (widthPassport * 363) / 264;
+const width = screenWidth - 30;
+const widthPassport = (width * 237) / 343;
 
 // 기준 너비 (디자인 시안의 너비)
 const guidelineBaseWidth = 375;
@@ -34,6 +33,12 @@ export const Bridge = styled.TouchableOpacity`
   flex-direction: row;
   margin: 12px 0px 26px;
   justify-content: center;
+  width: ${width};
+`;
+
+export const BridgeImg = styled.Image`
+  width: ${width};
+  aspect-ratio: 351 / 100;
 `;
 
 export const BridgeIconWrapper = styled.ImageBackground`
@@ -81,24 +86,28 @@ export const BodyDescription = styled(DefaultText)`
   margin: 6px 0px 22px;
 `;
 
-export const PassPortBg = styled.View`
-  position: relative;
-  width: ${width};
-  height: ${Math.round(heightPassport)};
-  background: ${Palette.White};
-  border-radius: 0px 18px 18px 0px;
-  align-self: center;
-`;
+// export const PassPortBg = styled.View`
+//   position: relative;
+//   width: ${width};
+//   height: ${Math.round(heightPassport)};
+//   background: ${Palette.White};
+//   border-radius: 0px 18px 18px 0px;
+//   align-self: center;
+// `;
 
 export const PassPort = styled.TouchableOpacity`
-  width: ${Math.round(widthPassport)};
-  height: ${Math.round(heightPassport)};
-  background: ${Palette.Secondary};
+  width: ${widthPassport};
+  aspect-ratio: ${237 / 303};
   border-radius: 0px 18px 18px 0px;
   align-items: center;
   padding: 32px 13px;
 `;
 
+export const PassPortImg = styled.Image`
+  width: ${widthPassport / 2};
+  aspect-ratio: ${237 / 303};
+`
+
 export const PassPortTitle = styled(DefaultText)`
   font-family: 'PTSerif-Bold';
   font-size: ${scale(32)}px;

app/src/screens/home/Home.tsx

@@ -55,22 +55,19 @@ export default function Home() {
           <S.HeaderTitle>{`User, Start your BinVoyage!`}</S.HeaderTitle>
         )}
         <S.Bridge onPress={() => navigation1.navigate('FindBin')}>
-          <S.BridgeIconWrapper source={require('assets/images/icon-trash-wrapper.png')} resizeMode="contain">
-            {/* <HomeTrashSvg width="40" height="66" /> */}
-            <S.BridgeIcon source={require('assets/images/icon-home-trash2x.png')} resizeMode="contain" />
-          </S.BridgeIconWrapper>
-          <S.BridgeTextWrapper source={require('assets/images/icon-text-wrapper.png')} resizeMode="stretch">
-            <S.BridgeText>{`Struggling to find bins? 😓\nTouch here to explore!`}</S.BridgeText>
-          </S.BridgeTextWrapper>
+          <S.BridgeImg source={require('assets/images/home-bridge.png')} />
         </S.Bridge>
         <S.Body>
           <S.BodyTitle>{`Collect Seoul\nstamps during BinVoyage`}</S.BodyTitle>
           <S.BodyDescription>Stamp varies by the bin location.</S.BodyDescription>
-          <S.PassPort onPress={() => navigation2.navigate('PassPort')}>
+          {/* <S.PassPort onPress={() => navigation2.navigate('PassPort')}>
             <S.PassPortTitle>PASSPORT</S.PassPortTitle>
             <S.ImagePassPort source={require('assets/images/img-passport.png')} resizeMode="contain" />
             <S.PassPortSubTitle>{`TO THE BINVOYAGE\nIN SEOUL`}</S.PassPortSubTitle>
             <S.IconPassPort source={require('assets/images/icon-passport.png')} resizeMode="contain" />
+          </S.PassPort> */}
+          <S.PassPort onPress={() => navigation2.navigate('PassPort')} style={{alignSelf: 'center'}}>
+            <S.PassPortImg source={require('assets/images/home-passport.png')} />
           </S.PassPort>
           <S.Button onPress={handleBtnReportNewBin}>
             <S.ButtonText>Find any new bin? Let us know!</S.ButtonText>

app/src/screens/passport/PassPort.tsx

@@ -1,35 +1,58 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import {NavigationProp, useNavigation} from '@react-navigation/native';
 import api from 'api/api';
 import ArrowPrevSvg from 'assets/images/ArrowPrevSvg';
 import PassPortPage from 'components/passPort/PassPortPage';
 import {Palette} from 'constants/palette';
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {Dimensions} from 'react-native';
 import Carousel from 'react-native-snap-carousel';
-import Swiper from 'react-native-swiper';
 import * as S from 'screens/passport/PassPort.style';
+import analytics from '@react-native-firebase/analytics';
 
 export default function PassPort() {
-  // const swiperRef = useRef<Swiper>(null);
   const navigation = useNavigation<NavigationProp<RootHomeParamList>>();
   const [stampList, setStampList] = useState<StampInfo[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [currentIndex, setCurrentIndex] = useState(0);
   const {width: screenWidth} = Dimensions.get('window');
   const width = screenWidth - 32;
 
-  useEffect(() => {
-    const getData = async () => {
-      try {
-        const response = await api.get('/stamp');
-        setStampList(response.data.data.user_stamp_list);
-        setIsLoading(false);
-      } catch (error: any) {
-        console.log('error: ' + error.response);
+  const getData = async () => {
+    try {
+      const response = await api.get('/stamp');
+      setStampList(response.data.data.user_stamp_list);
+      setIsLoading(false);
+    } catch (error: any) {
+      console.log('error: ' + error.response);
+    }
+  };
+
+  const logAnalyticsAboutStamp = async () => {
+    try {
+      const latestStampTime = await AsyncStorage.getItem('latestStampTime');
+
+      if (latestStampTime) {
+        const lastStampTime = parseInt(latestStampTime, 10);
+        const currentTime = Date.now();
+        const diffInMinutes = (currentTime - lastStampTime) / 1000 / 60; // 분 단위로 변환
+
+        const isWithin30Minutes = diffInMinutes <= 30;
+
+        // Google Analytics 로그
+        await analytics().logEvent('stamp_revisit_check', {
+          is_within_30_minutes: isWithin30Minutes,
+          duration_since_last_stamp_minutes: Math.floor(diffInMinutes),
+        });
       }
-    };
+    } catch (error) {
+      console.log('Analytics logging error:', error);
+    }
+  };
 
+  useEffect(() => {
     getData();
+    logAnalyticsAboutStamp();
   }, []);
 
   // const stampList = [{stamp_id: 1}, {stamp_id: 2}, {stamp_id: 3}, {stamp_id: 4}, {stamp_id: 5}, {stamp_id: 6}, {stamp_id: 6}, {stamp_id: 6}];