[RN-85] 맛집리스트 페이지 GuidePopup 구현

src/components/molecules/common/GuidePopup/GuidePopup.tsx

@@ -0,0 +1,114 @@
+import {PressableProps} from 'react-native';
+import styled from '@emotion/native';
+import {Txt, colors, Icon} from '@uoslife/design-system';
+
+type GuidePopupProps = {
+  label: string;
+  tail: 'LEFT' | 'CENTER' | 'RIGHT';
+  onPress: () => void;
+  theme: 'PRIMARY' | 'SECONDARY';
+} & PressableProps;
+const GuidePopup = ({
+  label,
+  tail,
+  onPress,
+  theme,
+  ...props
+}: GuidePopupProps) => {
+  switch (theme) {
+    case 'SECONDARY':
+      return (
+        <GuidePopupContainer onPress={() => onPress()} {...props}>
+          <GuidePopupBody>
+            <Txt label={label} color="grey190" typograph="labelMedium" />
+            <Icon color="secondaryUi" name="clear" width={20} height={20} />
+          </GuidePopupBody>
+          <TriangleWrapper tail={tail}>
+            <Triangle />
+          </TriangleWrapper>
+        </GuidePopupContainer>
+      );
+    case 'PRIMARY':
+      return (
+        <GuidePopupContainer onPress={() => onPress()} {...props}>
+          <PrimaryGuidePopupBody>
+            <Txt label={label} color="grey190" typograph="labelMedium" />
+            <Icon color="primaryBrand" name="clear" width={20} height={20} />
+          </PrimaryGuidePopupBody>
+          <TriangleWrapper tail={tail}>
+            <PrimaryTriangleWrapper />
+            <PrimaryTriangle />
+          </TriangleWrapper>
+        </GuidePopupContainer>
+      );
+  }
+};
+export default GuidePopup;
+
+const GuidePopupContainer = styled.Pressable`
+  height: 60px;
+  position: absolute;
+`;
+
+const GuidePopupBody = styled.View`
+  flex-direction: row;
+  padding: 8px 10px 8px 16px;
+  border-radius: 30px;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background-color: ${colors.secondaryBrand};
+  // z-index: 2;
+`;
+const PrimaryGuidePopupBody = styled.View`
+  flex-direction: row;
+  padding: 8px 10px 8px 16px;
+  border-radius: 30px;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background-color: ${colors.white};
+  border: 1px solid ${colors.primaryBrand};
+  // z-index: 2;
+`;
+
+type TailProps = {tail: 'LEFT' | 'CENTER' | 'RIGHT'};
+
+const TriangleWrapper = styled.View<TailProps>`
+  ${props =>
+    // eslint-disable-next-line no-nested-ternary
+    props.tail === 'LEFT'
+      ? 'align-items: flex-start; left:8px;'
+      : props.tail === 'RIGHT'
+      ? 'align-items: flex-end; right:8px;'
+      : 'align-items: center;'}
+  width: 100%;
+`;
+
+const Triangle = styled.View`
+  border-style: solid;
+  border-color: ${colors.secondaryBrand} transparent transparent transparent;
+  border-width: 24px 12px 0 12px;
+  height: 0;
+  width: 0;
+  top: -10px;
+`;
+const PrimaryTriangle = styled.View`
+  position: absolute;
+  border-style: solid;
+  border-color: ${colors.primaryBrand} transparent transparent transparent;
+  border-width: 16px 8px 0 8px;
+  height: 0;
+  width: 0;
+  top: -1px;
+`;
+const PrimaryTriangleWrapper = styled.View`
+  position: absolute;
+  border-style: solid;
+  border-color: ${colors.white} transparent transparent transparent;
+  border-width: 14px 7px 0 7px;
+  height: 0;
+  width: 0;
+  top: -1px;
+  z-index: 1;
+`;

src/features/library/components/molecules/my_seat/LibrarySeatControl.tsx

@@ -6,7 +6,7 @@ import {Button, Icon, colors} from '@uoslife/design-system';
 import {View} from 'react-native';
 import {useNavigation} from '@react-navigation/native';
 import AnimatePress from '../../../../../components/animations/pressable_icon/AnimatePress';
-import GuidePopup from '../../../../../components/molecules/common/GuidePopup';
+import GuidePopup from '../../../../../components/molecules/common/GuidePopup/GuidePopup';
 import useUserState from '../../../../../hooks/useUserState';
 import {LibraryNavigationProp} from '../../../navigators/types/library';
 import boxShadowStyle from '../../../../../styles/boxShadow';
@@ -36,7 +36,8 @@ const LibrarySeatControl = ({
                 label="포털 계정을 연동하면 좌석을 발권할 수 있어요!"
                 tail="RIGHT"
                 onPress={closeGuidePopup}
-                style={{...boxShadowStyle.bottomTapShadow}}
+                style={{...boxShadowStyle.bottomTapShadow, bottom: 40}}
+                theme="SECONDARY"
               />
             )}
             <AnimatePress

src/features/library/components/screens/main_screen/ChallengeScreen.tsx

@@ -11,7 +11,7 @@ import {
 } from '../../../constants/libraryChallenge/challengeUserStatus';
 import usePullToRefresh from '../../../../../hooks/usePullToRefresh';
 import {changeHourFromMin} from '../../../utils/libraryRanking';
-import GuidePopup from '../../../../../components/molecules/common/GuidePopup';
+import GuidePopup from '../../../../../components/molecules/common/GuidePopup/GuidePopup';
 import boxShadowStyle from '../../../../../styles/boxShadow';
 import useUserState from '../../../../../hooks/useUserState';
 import customShowToast from '../../../../../configs/toast';
@@ -100,8 +100,10 @@ const ChallengeScreen = () => {
             style={css`
               position: absolute;
               top: 0px;
+              bottom: 40px;
               ${boxShadowStyle.bottomTapShadow};
             `}
+            theme="SECONDARY"
           />
         )}
         <S.TextBox>

src/features/uos_lifestyle/restaurant/RestaurantScreen.tsx

@@ -1,7 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
-import {useState} from 'react';
+import {useState, useRef} from 'react';
 import {Txt, Icon, colors} from '@uoslife/design-system';
-import {View, StyleSheet, Linking} from 'react-native';
+import {View, StyleSheet, Linking, Dimensions} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import styled from '@emotion/native';
 import Header from '../../../components/molecules/common/header/Header';
@@ -10,6 +10,9 @@ import usePullToRefresh from '../../../hooks/usePullToRefresh';
 import useModal from '../../../hooks/useModal';
 import RankingContainer from './components/RangkingContainer';
 import RestaurantListContainer from './components/RestaurantListContainer';
+import GuidePopup from '../../../components/molecules/common/GuidePopup/GuidePopup';
+import {css} from '@emotion/native';
+import storage from '../../../storage';
 
 export type RestaurantItemType = {
   name: string;
@@ -27,15 +30,39 @@ const RestaurantScreen = () => {
     useState<RestaurantItemType | null>();
   const [openBottomSheet, closeBottomSheet, BottomSheet] =
     useModal('BOTTOM_SHEET');
+  const [isGuidePopupOpen, setIsGuidePopupOpen] = useState(true);
 
   const handleClickBottomSheetButton = (item: RestaurantItemType) => {
     Linking.openURL(item.mapLink).catch(err =>
       console.error("Couldn't load page", err),
     );
   };
-
+  const closeGuidePopup = () => {
+    setIsGuidePopupOpen(false);
+  };
+  const renderGuidePopup = () => {
+    if (storage.getBoolean('isRestaurantGuidePopupFirstOpen')) {
+      storage.set('isRestaurantGuidePopupFirstOpen', false);
+      return (
+        <GuidePopup
+          label="클릭 시 지도 앱으로 연결됩니다."
+          tail="CENTER"
+          onPress={closeGuidePopup}
+          theme="PRIMARY"
+          style={css`
+            align-self: center;
+            top: 433px;
+            z-index: 1;
+          `}
+        />
+      );
+    } else {
+      return null;
+    }
+  };
   return (
     <View>
+      {renderGuidePopup()}
       <Header
         style={{paddingTop: inset.top, marginBottom: 8}}
         label="맛집 리스트"